fix: update custom map legend panel when exporting image - #372

packages/kepler/src/components/CustomMapLegend.tsx (3)

149-149: Duplicate <style> tag injected per layer item — move to a single injection point.

A new <style> element is created and inserted into the DOM for every rendered LayerLegendItem. With N layers, the browser receives N identical style blocks to parse and apply. Move this rule to a module-level CSS file, a single top-level <style> tag at the MapLegend render root, or a createGlobalStyle / injectGlobal equivalent.

Additionally, this rule fires unconditionally, so kepler.gl's panel header actions are suppressed even in non-export mode (assuming the intent is export-only).

♻️ Proposed refactor — hoist style to component root, guarded by `isExport`

Remove the per-item <style> tag from LayerLegendItem:

-        <style>{`.legend--layer__item .panel--header__action { display: none !important; }`}</style>

Inject once at the MapLegend level, conditionally on isExport:

       <div className="flex w-full flex-1 flex-col items-center">
+          {isExport && (
+            <style>{`.legend--layer__item .panel--header__action { display: none !important; }`}</style>
+          )}
           {layers

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/kepler/src/components/CustomMapLegend.tsx` at line 149, The inline
<style> injection in LayerLegendItem is duplicated per layer and unconditionally
hides panel header actions; remove the per-item injection from the
LayerLegendItem component and instead inject the rule `.legend--layer__item
.panel--header__action { display: none !important; }` once at the MapLegend
render root (or in a module/global CSS or createGlobalStyle), and only apply it
when isExport is true so the rule is guarded; update MapLegend to render that
single conditional style (or import the CSS) and ensure LayerLegendItem no
longer inserts any <style> tags.

---

140-142: Redundant guard — already covered by the layers.filter(...) upstream.

After the correct fix to line 83 (!isExport || layer.config.isVisible), invisible layers in export mode will never reach LayerLegendItem, making this early-return unreachable. It is also currently dead code given the unconditional filter on line 83. This block can be removed once the upstream filter is corrected.

-    if (isExport && !layer.config.isVisible) {
-      return null;
-    }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/kepler/src/components/CustomMapLegend.tsx` around lines 140 - 142,
Remove the redundant early-return guard in LayerLegendItem that checks "if
(isExport && !layer.config.isVisible) return null;" because invisible layers in
export mode are already filtered out upstream (after fixing the upstream filter
to "!isExport || layer.config.isVisible"), so this block is dead code; locate
the conditional in the LayerLegendItem component and delete the entire
if-statement to simplify the component and avoid unreachable code.

---

109-109: isExpanded initialised from layer.config.isVisible — orthogonal concerns.

Expand/collapse state and layer visibility are independent. Initialising isExpanded from layer.config.isVisible also means that once the unconditional filter (line 83) is fixed and invisible layers re-appear in normal mode, they will all start collapsed rather than in a consistent default state. true (start expanded) is the conventional default for legend items.

-    const [isExpanded, setIsExpanded] = useState(layer.config.isVisible);
+    const [isExpanded, setIsExpanded] = useState(true);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/kepler/src/components/CustomMapLegend.tsx` at line 109, The
expand/collapse state is incorrectly initialized from layer.config.isVisible (in
CustomMapLegend using const [isExpanded, setIsExpanded] = useState(...)),
coupling visibility with expansion; change the initializer to a consistent
default (useState(true)) so legend items start expanded, and leave
layer.config.isVisible solely for rendering visibility—update any code that
relied on the previous coupling to use the separate isExpanded state instead of
layer.config.isVisible where appropriate.

packages/kepler/src/components/CustomMapLegend.tsx:170

• Consider hiding the expand/collapse chevron button in export mode for a cleaner appearance in the exported image. Since the export is a static image, interactive controls like this button don't serve a functional purpose. If hidden, ensure layers are expanded by default in export mode so the legend content is visible. This could be done by adding {!isExport && <Button ...>} around the button and ensuring isExpanded is set to true when isExport is true.

            <Button
              className="h-7 w-7"
              variant="ghost"
              size="icon"
              onClick={handleToggleExpanded}
            >
              {isExpanded ? (
                <ChevronDownIcon className="h-4 w-4" />
              ) : (
                <ChevronRightIcon className="h-4 w-4" />
              )}
            </Button>