feat: enable split map view with unlock viewport and sync zoom - #701

packages/kepler/src/components/CustomMapLegendPanel.tsx (2)

14-88: 💤 Low value

Consider adding JSDoc documentation.

As per coding guidelines, public exports in packages/ should be documented. Consider adding JSDoc to describe the component's purpose, props, and split-view behavior.

📝 Suggested documentation

+/**
+ * Custom map legend panel factory that handles split-map rendering.
+ * In split-map mode, the secondary pane (mapIndex !== 0) displays only a toggle button,
+ * while the primary pane renders the full draggable legend panel.
+ * 
+ * `@param` MapControlTooltip - Tooltip component factory
+ * `@param` MapControlPanel - Control panel component factory  
+ * `@param` MapLegend - Legend component factory
+ * `@returns` Customized MapLegendPanel component
+ */
 export function CustomMapLegendPanelFactory(
   MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>,
   MapControlPanel: ReturnType<typeof MapControlPanelFactory>,
   MapLegend: ReturnType<typeof MapLegendFactory>,
 ): ReturnType<typeof MapLegendPanelFactory> {

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/kepler/src/components/CustomMapLegendPanel.tsx` around lines 14 -
88, Add JSDoc for the exported factory and resulting component: document
CustomMapLegendPanelFactory (describe it returns a customized MapLegendPanel
component), explain the props shape (MapLegendPanelProps & {mapIndex?: number;
isSplit?: boolean}), and note split-view behavior handled by SplitPaneLegend vs
primary pane rendering (including that it hides header via injected style and
delegates rendering to OriginalMapLegendPanel). Place JSDoc above the
CustomMapLegendPanelFactory declaration and also add a brief `@returns` and
`@example` or `@remarks` describing when SplitPaneLegend is used and what
mapIndex/isSplit/control props control.

Source: Coding guidelines

---

65-65: ⚡ Quick win

Extract duplicate inline style injection.

The same CSS rule is injected in both split and non-split rendering paths. This creates duplicate <style> elements in the DOM and violates DRY.

♻️ Proposed fix to extract the common style

+const LEGEND_HEADER_STYLE = `
+  .draggable-legend .map-control__panel-header:not(.map-control__panel-split-viewport-tools) { 
+    display: none !important; 
+  }
+`;
+
 const SplitPaneLegend = (
   props: MapLegendPanelProps & {mapIndex?: number; isSplit?: boolean},
 ) => {
   // ...
   return (
     <>
-      <style>{`.draggable-legend .map-control__panel-header:not(.map-control__panel-split-viewport-tools) { display: none !important; }`}</style>
+      <style>{LEGEND_HEADER_STYLE}</style>
       <OriginalMapLegendPanel {...props} />
     </>
   );
 };

 const CustomMapLegendPanel = (
   props: MapLegendPanelProps & {mapIndex?: number; isSplit?: boolean},
 ) => {
   if (props.isSplit) {
     return <SplitPaneLegend {...props} />;
   }

   return (
     <>
-      <style>{`.draggable-legend .map-control__panel-header:not(.map-control__panel-split-viewport-tools) { display: none !important; }`}</style>
+      <style>{LEGEND_HEADER_STYLE}</style>
       <OriginalMapLegendPanel {...props} />
     </>
   );
 };

Also applies to: 80-80

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/kepler/src/components/CustomMapLegendPanel.tsx` at line 65,
Duplicate inline <style> injection for the rule `.draggable-legend
.map-control__panel-header:not(.map-control__panel-split-viewport-tools) {
display: none !important; }` is being added in both the split and non-split
render paths of CustomMapLegendPanel; extract that rule into a single shared
location (e.g., a top-level constant string or a single <style> rendered once at
the component root or move into the component stylesheet) and remove the
duplicate <style> injections from the two rendering branches so the rule is
injected only once.