@sqlrooms/kepler 0.29.0-rc.1 → 0.29.0-rc.10

package/dist/components/CustomInteractionManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomInteractionManager.js","sourceRoot":"","sources":["../../src/components/CustomInteractionManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport {Switch, Checkbox, useTheme} from '@sqlrooms/ui';\n\nimport {InteractionConfig} from '@kepler.gl/types';\nimport {FormattedMessage} from '@kepler.gl/localization';\n\nimport {useKeplerStateActions} from '../hooks/useKeplerStateActions';\nimport {CustomTooltipConfig} from './CustomTooltipConfig';\n\nconst SimpleInteractionPanel: React.FC<{\n  configId: string;\n  config: any;\n  label: string;\n  onConfigChange: (configId: string, newConfig: any) => void;\n}> = ({configId, config, label, onConfigChange}) => {\n  const toggleEnableConfig = useCallback(() => {\n    onConfigChange(configId, {\n      enabled: !config.enabled,\n    });\n  }, [configId, config.enabled, onConfigChange]);\n\n  return (\n    <div className=\"flex items-center justify-between p-2\">\n      <div className=\"text-muted-foreground text-sm font-medium\">{label}</div>\n      <Switch\n        checked={config.enabled}\n        onCheckedChange={toggleEnableConfig}\n        className=\"data-[state=checked]:bg-primary data-[state=unchecked]:bg-secondary\"\n      />\n    </div>\n  );\n};\n\nconst TooltipPanel: React.FC<{\n  tooltipConfig: any;\n  coordinateConfig: any;\n  datasets: any;\n  isDark: boolean;\n  handleConfigChange: (configId: string, newConfig: any) => void;\n  handleCoordinateToggle: () => void;\n  setColumnDisplayFormat: (format: any) => void;\n}> = ({\n  tooltipConfig,\n  coordinateConfig,\n  datasets,\n  isDark,\n  handleConfigChange,\n  handleCoordinateToggle,\n  setColumnDisplayFormat,\n}) => {\n  const handleTooltipConfigChange = useCallback(\n    (newConfig: any) => {\n      handleConfigChange('tooltip', {config: newConfig});\n    },\n    [handleConfigChange],\n  );\n\n  if (!tooltipConfig) return null;\n  return (\n    <div>\n      <SimpleInteractionPanel\n        configId=\"tooltip\"\n        config={tooltipConfig}\n        label=\"Tooltip\"\n        onConfigChange={handleConfigChange}\n      />\n      {tooltipConfig.enabled && (\n        <div className=\"pr-2 pl-4\">\n          <div className=\"flex items-center space-x-2 py-2\">\n            <Checkbox\n              checked={coordinateConfig?.enabled || false}\n              onCheckedChange={handleCoordinateToggle}\n              className=\"shadow-none\"\n            />\n            <span className=\"text-muted-foreground text-xs\">\n              Show <FormattedMessage id=\"interactions.coordinate\" />\n            </span>\n          </div>\n          <CustomTooltipConfig\n            datasets={datasets}\n            config={tooltipConfig.config}\n            onChange={handleTooltipConfigChange}\n            onDisplayFormatChange={setColumnDisplayFormat}\n            isDark={isDark}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const CustomInteractionManager: React.FC<{mapId: string}> = ({\n  mapId,\n}) => {\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const {theme} = useTheme();\n\n  // Determine if dark mode is active\n  const isDark =\n    theme === 'dark' ||\n    (theme === 'system' &&\n      window.matchMedia('(prefers-color-scheme: dark)').matches);\n\n  const rawInteractionConfig = keplerState?.visState.interactionConfig;\n  const interactionConfig = useMemo<Partial<InteractionConfig>>(\n    () => rawInteractionConfig ?? {},\n    [rawInteractionConfig],\n  );\n  const datasets = keplerState?.visState.datasets || {};\n  const {interactionConfigChange, setColumnDisplayFormat} =\n    keplerActions.visStateActions;\n\n  const handleConfigChange = useCallback(\n    (configId: string, newConfig: any) => {\n      const currentConfig =\n        interactionConfig[configId as keyof InteractionConfig];\n      if (currentConfig && typeof currentConfig === 'object') {\n        interactionConfigChange({\n          ...currentConfig,\n          ...newConfig,\n        });\n      }\n    },\n    [interactionConfig, interactionConfigChange],\n  );\n\n  // Handle coordinate display toggle\n  const handleCoordinateToggle = useCallback(() => {\n    const coordinateConfig = interactionConfig.coordinate;\n    if (coordinateConfig && typeof coordinateConfig === 'object') {\n      interactionConfigChange({\n        ...coordinateConfig,\n        enabled: !coordinateConfig.enabled,\n      });\n    }\n  }, [interactionConfig.coordinate, interactionConfigChange]);\n\n  return (\n    <div className=\"interaction-manager\">\n      <div className=\"space-y-2\">\n        <TooltipPanel\n          tooltipConfig={interactionConfig.tooltip}\n          coordinateConfig={interactionConfig.coordinate}\n          datasets={datasets}\n          isDark={isDark}\n          handleConfigChange={handleConfigChange}\n          handleCoordinateToggle={handleCoordinateToggle}\n          setColumnDisplayFormat={setColumnDisplayFormat}\n        />\n        {interactionConfig.geocoder && (\n          <SimpleInteractionPanel\n            configId=\"geocoder\"\n            config={interactionConfig.geocoder}\n            label=\"Location search\"\n            onConfigChange={handleConfigChange}\n          />\n        )}\n        {interactionConfig.brush && (\n          <SimpleInteractionPanel\n            configId=\"brush\"\n            config={interactionConfig.brush}\n            label=\"Brush filter\"\n            onConfigChange={handleConfigChange}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"CustomInteractionManager.js","sourceRoot":"","sources":["../../src/components/CustomInteractionManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport {Switch, Checkbox, useTheme} from '@sqlrooms/ui';\n\nimport {InteractionConfig} from '@kepler.gl/types';\nimport {FormattedMessage} from '@kepler.gl/localization';\n\nimport {useKeplerStateActions} from '../hooks/useKeplerStateActions';\nimport {CustomTooltipConfig} from './CustomTooltipConfig';\n\nconst SimpleInteractionPanel: React.FC<{\n  configId: string;\n  config: any;\n  label: string;\n  onConfigChange: (configId: string, newConfig: any) => void;\n}> = ({configId, config, label, onConfigChange}) => {\n  const toggleEnableConfig = useCallback(() => {\n    onConfigChange(configId, {\n      enabled: !config.enabled,\n    });\n  }, [configId, config.enabled, onConfigChange]);\n\n  return (\n    <div className=\"flex items-center justify-between p-2\">\n      <div className=\"text-muted-foreground text-sm font-medium\">{label}</div>\n      <Switch\n        checked={config.enabled}\n        onCheckedChange={toggleEnableConfig}\n        className=\"data-[state=checked]:bg-primary data-[state=unchecked]:bg-secondary\"\n      />\n    </div>\n  );\n};\n\nconst TooltipPanel: React.FC<{\n  tooltipConfig: any;\n  coordinateConfig: any;\n  datasets: any;\n  isDark: boolean;\n  handleConfigChange: (configId: string, newConfig: any) => void;\n  handleCoordinateToggle: () => void;\n  setColumnDisplayFormat: (\n    dataId: string,\n    formats: {[key: string]: string},\n  ) => void;\n}> = ({\n  tooltipConfig,\n  coordinateConfig,\n  datasets,\n  isDark,\n  handleConfigChange,\n  handleCoordinateToggle,\n  setColumnDisplayFormat,\n}) => {\n  const handleTooltipConfigChange = useCallback(\n    (newConfig: any) => {\n      handleConfigChange('tooltip', {config: newConfig});\n    },\n    [handleConfigChange],\n  );\n\n  const handleDisplayFormatChange = useCallback(\n    (dataId: string, column: string, displayFormat: string) => {\n      setColumnDisplayFormat(dataId, {[column]: displayFormat});\n    },\n    [setColumnDisplayFormat],\n  );\n\n  if (!tooltipConfig) return null;\n  return (\n    <div>\n      <SimpleInteractionPanel\n        configId=\"tooltip\"\n        config={tooltipConfig}\n        label=\"Tooltip\"\n        onConfigChange={handleConfigChange}\n      />\n      {tooltipConfig.enabled && (\n        <div className=\"pr-2 pl-4\">\n          <div className=\"flex items-center space-x-2 py-2\">\n            <Checkbox\n              checked={coordinateConfig?.enabled || false}\n              onCheckedChange={handleCoordinateToggle}\n              className=\"shadow-none\"\n            />\n            <span className=\"text-muted-foreground text-xs\">\n              Show <FormattedMessage id=\"interactions.coordinate\" />\n            </span>\n          </div>\n          <CustomTooltipConfig\n            datasets={datasets}\n            config={tooltipConfig.config}\n            onChange={handleTooltipConfigChange}\n            onDisplayFormatChange={handleDisplayFormatChange}\n            isDark={isDark}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const CustomInteractionManager: React.FC<{mapId: string}> = ({\n  mapId,\n}) => {\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const {theme} = useTheme();\n\n  // Determine if dark mode is active\n  const isDark =\n    theme === 'dark' ||\n    (theme === 'system' &&\n      window.matchMedia('(prefers-color-scheme: dark)').matches);\n\n  const rawInteractionConfig = keplerState?.visState.interactionConfig;\n  const interactionConfig = useMemo<Partial<InteractionConfig>>(\n    () => rawInteractionConfig ?? {},\n    [rawInteractionConfig],\n  );\n  const datasets = keplerState?.visState.datasets || {};\n  const {interactionConfigChange, setColumnDisplayFormat} =\n    keplerActions.visStateActions;\n\n  const handleConfigChange = useCallback(\n    (configId: string, newConfig: any) => {\n      const currentConfig =\n        interactionConfig[configId as keyof InteractionConfig];\n      if (currentConfig && typeof currentConfig === 'object') {\n        interactionConfigChange({\n          ...currentConfig,\n          ...newConfig,\n        });\n      }\n    },\n    [interactionConfig, interactionConfigChange],\n  );\n\n  // Handle coordinate display toggle\n  const handleCoordinateToggle = useCallback(() => {\n    const coordinateConfig = interactionConfig.coordinate;\n    if (coordinateConfig && typeof coordinateConfig === 'object') {\n      interactionConfigChange({\n        ...coordinateConfig,\n        enabled: !coordinateConfig.enabled,\n      });\n    }\n  }, [interactionConfig.coordinate, interactionConfigChange]);\n\n  return (\n    <div className=\"interaction-manager\">\n      <div className=\"space-y-2\">\n        <TooltipPanel\n          tooltipConfig={interactionConfig.tooltip}\n          coordinateConfig={interactionConfig.coordinate}\n          datasets={datasets}\n          isDark={isDark}\n          handleConfigChange={handleConfigChange}\n          handleCoordinateToggle={handleCoordinateToggle}\n          setColumnDisplayFormat={setColumnDisplayFormat}\n        />\n        {interactionConfig.geocoder && (\n          <SimpleInteractionPanel\n            configId=\"geocoder\"\n            config={interactionConfig.geocoder}\n            label=\"Location search\"\n            onConfigChange={handleConfigChange}\n          />\n        )}\n        {interactionConfig.brush && (\n          <SimpleInteractionPanel\n            configId=\"brush\"\n            config={interactionConfig.brush}\n            label=\"Brush filter\"\n            onConfigChange={handleConfigChange}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/components/CustomLayerManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomLayerManager.d.ts","sourceRoot":"","sources":["../../src/components/CustomLayerManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AA4ElD,KAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AA8BF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8FhE,CAAC"}
+{"version":3,"file":"CustomLayerManager.d.ts","sourceRoot":"","sources":["../../src/components/CustomLayerManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAyI5D,KAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AA6BF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA4GhE,CAAC"}

package/dist/components/CustomLayerManager.js

@@ -1,31 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { LayerListFactory, DatasetLayerGroupFactory, PanelTitleFactory, AddLayerButtonFactory, SidePanelSection, } from '@kepler.gl/components';
+import { LayerListFactory, DatasetLayerGroupFactory, PanelTitleFactory, SidePanelSection, } from '@kepler.gl/components';
 import { PANEL_VIEW_TOGGLES, SIDEBAR_PANELS } from '@kepler.gl/constants';
 import { getApplicationConfig } from '@kepler.gl/utils';
+import { Plus } from 'lucide-react';
+import { Button } from '@sqlrooms/ui';
 import { getKeplerFactory } from './KeplerInjector';
 import { useKeplerStateActions, } from '../hooks/useKeplerStateActions';
-// Get the kepler.gl components through the injector
+import { buildKeplerTableSourceOptions, } from '../keplerTableSelection';
+import { useStoreWithKepler } from '../KeplerSlice';
+import { KeplerTableSourceSelector } from './KeplerTableSourceSelector';
 const LayerList = getKeplerFactory(LayerListFactory);
 const DatasetLayerGroup = getKeplerFactory(DatasetLayerGroupFactory);
 const PanelTitle = getKeplerFactory(PanelTitleFactory);
-const AddLayerButton = getKeplerFactory(AddLayerButtonFactory);
 const layerPanelMetadata = SIDEBAR_PANELS.find((p) => p.id === 'layer');
-// Custom styled components for your layer manager
 const CustomLayerManagerContainer = styled.div `
-  .layer-manager {
-    /* Add your custom styles here */
-  }
-  
   .layer-manager-title {
-    /* Custom title styling */
   }
 
   .add-layer-button {
     background-color: ${(props) => props.theme.sidePanelBg || props.theme.panelBackground};
-    color: #2563EB; 
+    color: #2563EB;
     border: 0px;
     height: 28px;
     font-weight: 500;
@@ -58,7 +55,31 @@ const CustomLayerManagerContainer = styled.div `
   }
 }
 `;
-// Custom hook for side panel actions
+/**
+ * Dropdown button that lists available datasets and DuckDB tables.
+ * When a table is selected, it is synced to Kepler on demand and a new
+ * layer is created for it.
+ */
+const AddTableLayerButton = ({ onAdd, datasets, disabled }) => {
+    const [isAdding, setIsAdding] = useState(false);
+    const intl = useIntl();
+    const dbTables = useStoreWithKepler((state) => state.db.tables);
+    const tableSelection = useStoreWithKepler((state) => state.kepler.tableSelection);
+    const options = useMemo(() => {
+        return buildKeplerTableSourceOptions({
+            dbTables,
+            datasets,
+            tableSelection,
+        });
+    }, [datasets, dbTables, tableSelection]);
+    const handleSelect = useCallback((option) => {
+        setIsAdding(true);
+        onAdd(option.value)
+            .catch((e) => console.error('Failed to add layer:', e))
+            .finally(() => setIsAdding(false));
+    }, [onAdd]);
+    return (_jsx(KeplerTableSourceSelector, { disabled: !options.length || disabled || isAdding, options: options, popoverAlign: "end", searchPlaceholder: intl ? intl.formatMessage({ id: 'placeholder.search' }) : 'Search', onSelect: handleSelect, renderTrigger: ({ disabled: isDisabled }) => (_jsxs(Button, { type: "button", variant: "ghost", size: "xs", className: "add-layer-button", disabled: isDisabled, children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), intl.formatMessage({ id: 'layerManager.addLayer' })] })) }));
+};
 function useCustomSidePanelActions(keplerActions) {
     const { openDeleteModal, toggleModal } = keplerActions.uiStateActions;
     const { updateTableColor } = keplerActions.visStateActions;
@@ -75,13 +96,26 @@ function useCustomSidePanelActions(keplerActions) {
 export const CustomLayerManager = ({ mapId, showDeleteDataset = true, }) => {
     const { keplerActions, keplerState } = useKeplerStateActions({ mapId });
     const intl = useIntl();
+    const addTableToMap = useStoreWithKepler((state) => state.kepler.addTableToMap);
     const { onRemoveDataset, onUpdateTableColor } = useCustomSidePanelActions(keplerActions);
     const { addLayer } = keplerActions.visStateActions;
-    const onAddLayer = useCallback((dataset) => {
-        addLayer(undefined, dataset);
-    }, [addLayer]);
+    const onAddTableLayer = useCallback(async (tableName) => {
+        const keplerDatasets = keplerState?.visState.datasets;
+        if (!keplerDatasets?.[tableName]) {
+            await addTableToMap({
+                mapId,
+                tableName,
+                options: {
+                    autoCreateLayers: true,
+                    centerMap: true,
+                },
+            });
+        }
+        else {
+            addLayer(undefined, tableName);
+        }
+    }, [addLayer, addTableToMap, keplerState?.visState.datasets, mapId]);
     const isSortByDatasetMode = keplerState?.uiState.layerPanelListView === PANEL_VIEW_TOGGLES.byDataset;
-    // Filter layer classes based on application config
     const enableRasterTileLayer = getApplicationConfig().enableRasterTileLayer;
     const enableWMSLayer = getApplicationConfig().enableWMSLayer;
     const filteredLayerClasses = useMemo(() => {
@@ -105,6 +139,6 @@ export const CustomLayerManager = ({ mapId, showDeleteDataset = true, }) => {
     }
     return (_jsx(CustomLayerManagerContainer, { children: _jsxs("div", { className: "layer-manager", children: [_jsx(SidePanelSection, { children: _jsx(PanelTitle, { className: "layer-manager-title", title: intl.formatMessage({
                             id: layerPanelMetadata?.label || 'Layers',
-                        }), children: _jsx(AddLayerButton, { datasets: keplerState.visState.datasets, onAdd: onAddLayer }) }) }), _jsx(SidePanelSection, { children: isSortByDatasetMode ? (_jsx(DatasetLayerGroup, { datasets: keplerState.visState.datasets, showDatasetTable: keplerActions.visStateActions.showDatasetTable, layers: keplerState.visState.layers, updateTableColor: onUpdateTableColor, removeDataset: onRemoveDataset, layerOrder: keplerState.visState.layerOrder, layerClasses: filteredLayerClasses, uiStateActions: keplerActions.uiStateActions, visStateActions: keplerActions.visStateActions, mapStateActions: keplerActions.mapStateActions, showDeleteDataset: showDeleteDataset })) : (_jsx(LayerList, { layers: keplerState.visState.layers, datasets: keplerState.visState.datasets, layerOrder: keplerState.visState.layerOrder, uiStateActions: keplerActions.uiStateActions, visStateActions: keplerActions.visStateActions, mapStateActions: keplerActions.mapStateActions, layerClasses: filteredLayerClasses })) })] }) }));
+                        }), children: _jsx(AddTableLayerButton, { onAdd: onAddTableLayer, datasets: keplerState.visState.datasets }) }) }), _jsx(SidePanelSection, { children: isSortByDatasetMode ? (_jsx(DatasetLayerGroup, { datasets: keplerState.visState.datasets, showDatasetTable: keplerActions.visStateActions.showDatasetTable, layers: keplerState.visState.layers, updateTableColor: onUpdateTableColor, removeDataset: onRemoveDataset, layerOrder: keplerState.visState.layerOrder, layerClasses: filteredLayerClasses, uiStateActions: keplerActions.uiStateActions, visStateActions: keplerActions.visStateActions, mapStateActions: keplerActions.mapStateActions, showDeleteDataset: showDeleteDataset })) : (_jsx(LayerList, { layers: keplerState.visState.layers, datasets: keplerState.visState.datasets, layerOrder: keplerState.visState.layerOrder, uiStateActions: keplerActions.uiStateActions, visStateActions: keplerActions.visStateActions, mapStateActions: keplerActions.mapStateActions, layerClasses: filteredLayerClasses })) })] }) }));
 };
 //# sourceMappingURL=CustomLayerManager.js.map

package/dist/components/CustomLayerManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomLayerManager.js","sourceRoot":"","sources":["../../src/components/CustomLayerManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport {useIntl} from 'react-intl';\nimport styled from 'styled-components';\n\nimport {\n  LayerListFactory,\n  DatasetLayerGroupFactory,\n  PanelTitleFactory,\n  AddLayerButtonFactory,\n  SidePanelSection,\n} from '@kepler.gl/components';\nimport {PANEL_VIEW_TOGGLES, SIDEBAR_PANELS} from '@kepler.gl/constants';\nimport {LayerClassesType} from '@kepler.gl/layers';\nimport {getApplicationConfig} from '@kepler.gl/utils';\n\nimport {getKeplerFactory} from './KeplerInjector';\nimport {\n  KeplerActions,\n  useKeplerStateActions,\n} from '../hooks/useKeplerStateActions';\nimport {RGBColor} from '@kepler.gl/types';\n\n// Get the kepler.gl components through the injector\nconst LayerList = getKeplerFactory(LayerListFactory);\nconst DatasetLayerGroup = getKeplerFactory(DatasetLayerGroupFactory);\nconst PanelTitle = getKeplerFactory(PanelTitleFactory);\nconst AddLayerButton = getKeplerFactory(AddLayerButtonFactory);\n\nconst layerPanelMetadata = SIDEBAR_PANELS.find((p) => p.id === 'layer');\n\n// Custom styled components for your layer manager\nconst CustomLayerManagerContainer = styled.div`\n  .layer-manager {\n    /* Add your custom styles here */\n  }\n  \n  .layer-manager-title {\n    /* Custom title styling */\n  }\n\n  .add-layer-button {\n    background-color: ${(props) => props.theme.sidePanelBg || props.theme.panelBackground};\n    color: #2563EB; \n    border: 0px;\n    height: 28px;\n    font-weight: 500;\n    font-size: 14px;\n  }\n\n  .layer__title__type {\n    display: none !important;\n  }\n\n  .layer-panel__header {\n    height: 36px;\n  }\n\n  .layer__title {\n    min-width: 0;\n  }\n\n  .layer__title > div {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .layer__title__editor {\n    width: 100%;\n    min-width: 0;\n    flex: 1;\n  }\n}\n`;\n\ntype CustomLayerManagerProps = {\n  mapId: string;\n  showDeleteDataset?: boolean;\n};\n\n// Custom hook for side panel actions\nfunction useCustomSidePanelActions(keplerActions: KeplerActions) {\n  const {openDeleteModal, toggleModal} = keplerActions.uiStateActions;\n  const {updateTableColor} = keplerActions.visStateActions;\n\n  const onRemoveDataset = useCallback(\n    (dataId: string) => openDeleteModal(dataId),\n    [openDeleteModal],\n  );\n\n  const onShowAddDataModal = useCallback(\n    () => toggleModal('addData'),\n    [toggleModal],\n  );\n\n  const onUpdateTableColor = useCallback(\n    (dataId: string, newColor: RGBColor) => updateTableColor(dataId, newColor),\n    [updateTableColor],\n  );\n\n  return {\n    onRemoveDataset,\n    onShowAddDataModal,\n    onUpdateTableColor,\n  };\n}\n\n// Main Custom Layer Manager Component\nexport const CustomLayerManager: React.FC<CustomLayerManagerProps> = ({\n  mapId,\n  showDeleteDataset = true,\n}) => {\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const intl = useIntl();\n\n  const {onRemoveDataset, onUpdateTableColor} =\n    useCustomSidePanelActions(keplerActions);\n\n  const {addLayer} = keplerActions.visStateActions;\n\n  const onAddLayer = useCallback(\n    (dataset: string) => {\n      addLayer(undefined, dataset);\n    },\n    [addLayer],\n  );\n\n  const isSortByDatasetMode =\n    keplerState?.uiState.layerPanelListView === PANEL_VIEW_TOGGLES.byDataset;\n\n  // Filter layer classes based on application config\n  const enableRasterTileLayer = getApplicationConfig().enableRasterTileLayer;\n  const enableWMSLayer = getApplicationConfig().enableWMSLayer;\n\n  const filteredLayerClasses = useMemo(() => {\n    let filteredClasses = keplerState?.visState.layerClasses || {};\n    if (!enableRasterTileLayer && 'rasterTile' in filteredClasses) {\n      const {rasterTile: _rasterTile, ...rest} = filteredClasses;\n      filteredClasses = rest as LayerClassesType;\n    }\n    if (!enableWMSLayer && 'wms' in filteredClasses) {\n      const {wms: _wms, ...rest} = filteredClasses;\n      filteredClasses = rest as LayerClassesType;\n    }\n    return filteredClasses as LayerClassesType;\n  }, [\n    enableRasterTileLayer,\n    enableWMSLayer,\n    keplerState?.visState.layerClasses,\n  ]);\n\n  if (!keplerState || !keplerActions) {\n    return null;\n  }\n\n  return (\n    <CustomLayerManagerContainer>\n      <div className=\"layer-manager\">\n        <SidePanelSection>\n          <PanelTitle\n            className=\"layer-manager-title\"\n            title={intl.formatMessage({\n              id: layerPanelMetadata?.label || 'Layers',\n            })}\n          >\n            <AddLayerButton\n              datasets={keplerState.visState.datasets}\n              onAdd={onAddLayer}\n            />\n          </PanelTitle>\n        </SidePanelSection>\n\n        <SidePanelSection>\n          {isSortByDatasetMode ? (\n            <DatasetLayerGroup\n              datasets={keplerState.visState.datasets}\n              showDatasetTable={keplerActions.visStateActions.showDatasetTable}\n              layers={keplerState.visState.layers}\n              updateTableColor={onUpdateTableColor}\n              removeDataset={onRemoveDataset}\n              layerOrder={keplerState.visState.layerOrder}\n              layerClasses={filteredLayerClasses}\n              uiStateActions={keplerActions.uiStateActions}\n              visStateActions={keplerActions.visStateActions}\n              mapStateActions={keplerActions.mapStateActions}\n              showDeleteDataset={showDeleteDataset}\n            />\n          ) : (\n            <LayerList\n              layers={keplerState.visState.layers}\n              datasets={keplerState.visState.datasets}\n              layerOrder={keplerState.visState.layerOrder}\n              uiStateActions={keplerActions.uiStateActions}\n              visStateActions={keplerActions.visStateActions}\n              mapStateActions={keplerActions.mapStateActions}\n              layerClasses={filteredLayerClasses}\n            />\n          )}\n        </SidePanelSection>\n      </div>\n    </CustomLayerManagerContainer>\n  );\n};\n"]}
+{"version":3,"file":"CustomLayerManager.js","sourceRoot":"","sources":["../../src/components/CustomLayerManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport {useIntl} from 'react-intl';\nimport styled from 'styled-components';\n\nimport {\n  LayerListFactory,\n  DatasetLayerGroupFactory,\n  PanelTitleFactory,\n  SidePanelSection,\n} from '@kepler.gl/components';\nimport {PANEL_VIEW_TOGGLES, SIDEBAR_PANELS} from '@kepler.gl/constants';\nimport {LayerClassesType} from '@kepler.gl/layers';\nimport {getApplicationConfig} from '@kepler.gl/utils';\nimport {Plus} from 'lucide-react';\nimport {Button} from '@sqlrooms/ui';\n\nimport {getKeplerFactory} from './KeplerInjector';\nimport {\n  KeplerActions,\n  useKeplerStateActions,\n} from '../hooks/useKeplerStateActions';\nimport {\n  buildKeplerTableSourceOptions,\n  type KeplerSourceDataset,\n  type KeplerTableSourceOption,\n} from '../keplerTableSelection';\nimport {useStoreWithKepler} from '../KeplerSlice';\nimport type {RGBColor} from '@kepler.gl/types';\nimport {KeplerTableSourceSelector} from './KeplerTableSourceSelector';\n\nconst LayerList = getKeplerFactory(LayerListFactory);\nconst DatasetLayerGroup = getKeplerFactory(DatasetLayerGroupFactory);\nconst PanelTitle = getKeplerFactory(PanelTitleFactory);\n\nconst layerPanelMetadata = SIDEBAR_PANELS.find((p) => p.id === 'layer');\n\nconst CustomLayerManagerContainer = styled.div`\n  .layer-manager-title {\n  }\n\n  .add-layer-button {\n    background-color: ${(props) => props.theme.sidePanelBg || props.theme.panelBackground};\n    color: #2563EB;\n    border: 0px;\n    height: 28px;\n    font-weight: 500;\n    font-size: 14px;\n  }\n\n  .layer__title__type {\n    display: none !important;\n  }\n\n  .layer-panel__header {\n    height: 36px;\n  }\n\n  .layer__title {\n    min-width: 0;\n  }\n\n  .layer__title > div {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .layer__title__editor {\n    width: 100%;\n    min-width: 0;\n    flex: 1;\n  }\n}\n`;\n\n/**\n * Dropdown button that lists available datasets and DuckDB tables.\n * When a table is selected, it is synced to Kepler on demand and a new\n * layer is created for it.\n */\nconst AddTableLayerButton: React.FC<{\n  onAdd: (tableName: string) => Promise<void>;\n  datasets: Record<string, KeplerSourceDataset>;\n  disabled?: boolean;\n}> = ({onAdd, datasets, disabled}) => {\n  const [isAdding, setIsAdding] = useState(false);\n  const intl = useIntl();\n\n  const dbTables = useStoreWithKepler((state) => state.db.tables);\n  const tableSelection = useStoreWithKepler(\n    (state) => state.kepler.tableSelection,\n  );\n\n  const options = useMemo(() => {\n    return buildKeplerTableSourceOptions({\n      dbTables,\n      datasets,\n      tableSelection,\n    });\n  }, [datasets, dbTables, tableSelection]);\n\n  const handleSelect = useCallback(\n    (option: KeplerTableSourceOption) => {\n      setIsAdding(true);\n      onAdd(option.value)\n        .catch((e) => console.error('Failed to add layer:', e))\n        .finally(() => setIsAdding(false));\n    },\n    [onAdd],\n  );\n\n  return (\n    <KeplerTableSourceSelector\n      disabled={!options.length || disabled || isAdding}\n      options={options}\n      popoverAlign=\"end\"\n      searchPlaceholder={\n        intl ? intl.formatMessage({id: 'placeholder.search'}) : 'Search'\n      }\n      onSelect={handleSelect}\n      renderTrigger={({disabled: isDisabled}) => (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"xs\"\n          className=\"add-layer-button\"\n          disabled={isDisabled}\n        >\n          <Plus className=\"h-3.5 w-3.5\" />\n          {intl.formatMessage({id: 'layerManager.addLayer'})}\n        </Button>\n      )}\n    />\n  );\n};\n\ntype CustomLayerManagerProps = {\n  mapId: string;\n  showDeleteDataset?: boolean;\n};\n\nfunction useCustomSidePanelActions(keplerActions: KeplerActions) {\n  const {openDeleteModal, toggleModal} = keplerActions.uiStateActions;\n  const {updateTableColor} = keplerActions.visStateActions;\n\n  const onRemoveDataset = useCallback(\n    (dataId: string) => openDeleteModal(dataId),\n    [openDeleteModal],\n  );\n\n  const onShowAddDataModal = useCallback(\n    () => toggleModal('addData'),\n    [toggleModal],\n  );\n\n  const onUpdateTableColor = useCallback(\n    (dataId: string, newColor: RGBColor) => updateTableColor(dataId, newColor),\n    [updateTableColor],\n  );\n\n  return {\n    onRemoveDataset,\n    onShowAddDataModal,\n    onUpdateTableColor,\n  };\n}\n\n// Main Custom Layer Manager Component\nexport const CustomLayerManager: React.FC<CustomLayerManagerProps> = ({\n  mapId,\n  showDeleteDataset = true,\n}) => {\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const intl = useIntl();\n  const addTableToMap = useStoreWithKepler(\n    (state) => state.kepler.addTableToMap,\n  );\n\n  const {onRemoveDataset, onUpdateTableColor} =\n    useCustomSidePanelActions(keplerActions);\n\n  const {addLayer} = keplerActions.visStateActions;\n\n  const onAddTableLayer = useCallback(\n    async (tableName: string) => {\n      const keplerDatasets = keplerState?.visState.datasets;\n      if (!keplerDatasets?.[tableName]) {\n        await addTableToMap({\n          mapId,\n          tableName,\n          options: {\n            autoCreateLayers: true,\n            centerMap: true,\n          },\n        });\n      } else {\n        addLayer(undefined, tableName);\n      }\n    },\n    [addLayer, addTableToMap, keplerState?.visState.datasets, mapId],\n  );\n\n  const isSortByDatasetMode =\n    keplerState?.uiState.layerPanelListView === PANEL_VIEW_TOGGLES.byDataset;\n\n  const enableRasterTileLayer = getApplicationConfig().enableRasterTileLayer;\n  const enableWMSLayer = getApplicationConfig().enableWMSLayer;\n\n  const filteredLayerClasses = useMemo(() => {\n    let filteredClasses = keplerState?.visState.layerClasses || {};\n    if (!enableRasterTileLayer && 'rasterTile' in filteredClasses) {\n      const {rasterTile: _rasterTile, ...rest} = filteredClasses;\n      filteredClasses = rest as LayerClassesType;\n    }\n    if (!enableWMSLayer && 'wms' in filteredClasses) {\n      const {wms: _wms, ...rest} = filteredClasses;\n      filteredClasses = rest as LayerClassesType;\n    }\n    return filteredClasses as LayerClassesType;\n  }, [\n    enableRasterTileLayer,\n    enableWMSLayer,\n    keplerState?.visState.layerClasses,\n  ]);\n\n  if (!keplerState || !keplerActions) {\n    return null;\n  }\n\n  return (\n    <CustomLayerManagerContainer>\n      <div className=\"layer-manager\">\n        <SidePanelSection>\n          <PanelTitle\n            className=\"layer-manager-title\"\n            title={intl.formatMessage({\n              id: layerPanelMetadata?.label || 'Layers',\n            })}\n          >\n            <AddTableLayerButton\n              onAdd={onAddTableLayer}\n              datasets={keplerState.visState.datasets}\n            />\n          </PanelTitle>\n        </SidePanelSection>\n\n        <SidePanelSection>\n          {isSortByDatasetMode ? (\n            <DatasetLayerGroup\n              datasets={keplerState.visState.datasets}\n              showDatasetTable={keplerActions.visStateActions.showDatasetTable}\n              layers={keplerState.visState.layers}\n              updateTableColor={onUpdateTableColor}\n              removeDataset={onRemoveDataset}\n              layerOrder={keplerState.visState.layerOrder}\n              layerClasses={filteredLayerClasses}\n              uiStateActions={keplerActions.uiStateActions}\n              visStateActions={keplerActions.visStateActions}\n              mapStateActions={keplerActions.mapStateActions}\n              showDeleteDataset={showDeleteDataset}\n            />\n          ) : (\n            <LayerList\n              layers={keplerState.visState.layers}\n              datasets={keplerState.visState.datasets}\n              layerOrder={keplerState.visState.layerOrder}\n              uiStateActions={keplerActions.uiStateActions}\n              visStateActions={keplerActions.visStateActions}\n              mapStateActions={keplerActions.mapStateActions}\n              layerClasses={filteredLayerClasses}\n            />\n          )}\n        </SidePanelSection>\n      </div>\n    </CustomLayerManagerContainer>\n  );\n};\n"]}

package/dist/components/CustomMapDrawPanel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MapControlTooltipFactory, MapControlToolbarFactory, MapDrawPanelFactory } from '@kepler.gl/components';
+import type { MapDrawPanelProps } from '@kepler.gl/components';
+export declare function CustomMapDrawPanelFactory(...deps: Parameters<typeof MapDrawPanelFactory>): React.FC<MapDrawPanelProps>;
+export declare namespace CustomMapDrawPanelFactory {
+    var deps: (typeof MapControlTooltipFactory | typeof MapControlToolbarFactory)[];
+}
+//# sourceMappingURL=CustomMapDrawPanel.d.ts.map

package/dist/components/CustomMapDrawPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMapDrawPanel.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapDrawPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAC;AAM7D,wBAAgB,yBAAyB,CACvC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,+BA6ChD;yBA9Ce,yBAAyB"}

package/dist/components/CustomMapDrawPanel.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the kepler.gl project
+import React, { useCallback } from 'react';
+import { MapDrawPanelFactory, } from '@kepler.gl/components';
+import { XIcon } from 'lucide-react';
+import { Button } from '@sqlrooms/ui';
+CustomMapDrawPanelFactory.deps = MapDrawPanelFactory.deps;
+export function CustomMapDrawPanelFactory(...deps) {
+    // Get the original MapDrawPanel component
+    const OriginalMapDrawPanel = MapDrawPanelFactory(...deps);
+    const CustomMapDrawPanel = React.memo((props) => {
+        const { mapControls, onToggleMapControl } = props;
+        const isActive = mapControls?.mapDraw?.active;
+        const onToggleMenuPanel = useCallback(() => onToggleMapControl('mapDraw'), [onToggleMapControl]);
+        if (!mapControls?.mapDraw?.show) {
+            return null;
+        }
+        return (_jsxs("div", { className: "map-draw-controls", style: { position: 'relative' }, children: [_jsx(OriginalMapDrawPanel, { ...props }), isActive && (_jsx(Button, { variant: "ghost", size: "xs", className: "border-border bg-background hover:bg-accent absolute z-50 h-6 w-6 rounded-full border p-0 shadow-sm", style: { left: '-35px', top: '-20px' }, "aria-label": "Close draw panel", onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onToggleMenuPanel();
+                    }, children: _jsx(XIcon, { className: "h-3 w-3" }) }))] }));
+    });
+    CustomMapDrawPanel.displayName = 'CustomMapDrawPanel';
+    return CustomMapDrawPanel;
+}
+//# sourceMappingURL=CustomMapDrawPanel.js.map

package/dist/components/CustomMapDrawPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMapDrawPanel.js","sourceRoot":"","sources":["../../src/components/CustomMapDrawPanel.tsx"],"names":[],"mappings":";AAAA,+BAA+B;AAC/B,kDAAkD;AAElD,OAAO,KAAK,EAAE,EAAC,WAAW,EAAC,MAAM,OAAO,CAAC;AACzC,OAAO,EAGL,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,yBAAyB,CAAC,IAAI,GAAG,mBAAmB,CAAC,IAAI,CAAC;AAE1D,MAAM,UAAU,yBAAyB,CACvC,GAAG,IAA4C;IAE/C,0CAA0C;IAC1C,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,GAAG,IAAI,CAAC,CAAC;IAE1D,MAAM,kBAAkB,GAAgC,KAAK,CAAC,IAAI,CAChE,CAAC,KAAK,EAAE,EAAE;QACR,MAAM,EAAC,WAAW,EAAE,kBAAkB,EAAC,GAAG,KAAK,CAAC;QAChD,MAAM,QAAQ,GAAG,WAAW,EAAE,OAAO,EAAE,MAAM,CAAC;QAE9C,MAAM,iBAAiB,GAAG,WAAW,CACnC,GAAG,EAAE,CAAC,kBAAkB,CAAC,SAAS,CAAC,EACnC,CAAC,kBAAkB,CAAC,CACrB,CAAC;QAEF,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YAChC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAC,aAC9D,KAAC,oBAAoB,OAAK,KAAK,GAAI,EAClC,QAAQ,IAAI,CACX,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,qGAAqG,EAC/G,KAAK,EAAE,EAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAC,gBACzB,kBAAkB,EAC7B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wBACb,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,iBAAiB,EAAE,CAAC;oBACtB,CAAC,YAED,KAAC,KAAK,IAAC,SAAS,EAAC,SAAS,GAAG,GACtB,CACV,IACG,CACP,CAAC;IACJ,CAAC,CACF,CAAC;IAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;IACtD,OAAO,kBAAkB,CAAC;AAC5B,CAAC","sourcesContent":["// SPDX-License-Identifier: MIT\n// Copyright contributors to the kepler.gl project\n\nimport React, {useCallback} from 'react';\nimport {\n  MapControlTooltipFactory,\n  MapControlToolbarFactory,\n  MapDrawPanelFactory,\n} from '@kepler.gl/components';\nimport type {MapDrawPanelProps} from '@kepler.gl/components';\nimport {XIcon} from 'lucide-react';\nimport {Button} from '@sqlrooms/ui';\n\nCustomMapDrawPanelFactory.deps = MapDrawPanelFactory.deps;\n\nexport function CustomMapDrawPanelFactory(\n  ...deps: Parameters<typeof MapDrawPanelFactory>\n) {\n  // Get the original MapDrawPanel component\n  const OriginalMapDrawPanel = MapDrawPanelFactory(...deps);\n\n  const CustomMapDrawPanel: React.FC<MapDrawPanelProps> = React.memo(\n    (props) => {\n      const {mapControls, onToggleMapControl} = props;\n      const isActive = mapControls?.mapDraw?.active;\n\n      const onToggleMenuPanel = useCallback(\n        () => onToggleMapControl('mapDraw'),\n        [onToggleMapControl],\n      );\n\n      if (!mapControls?.mapDraw?.show) {\n        return null;\n      }\n\n      return (\n        <div className=\"map-draw-controls\" style={{position: 'relative'}}>\n          <OriginalMapDrawPanel {...props} />\n          {isActive && (\n            <Button\n              variant=\"ghost\"\n              size=\"xs\"\n              className=\"border-border bg-background hover:bg-accent absolute z-50 h-6 w-6 rounded-full border p-0 shadow-sm\"\n              style={{left: '-35px', top: '-20px'}}\n              aria-label=\"Close draw panel\"\n              onClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                onToggleMenuPanel();\n              }}\n            >\n              <XIcon className=\"h-3 w-3\" />\n            </Button>\n          )}\n        </div>\n      );\n    },\n  );\n\n  CustomMapDrawPanel.displayName = 'CustomMapDrawPanel';\n  return CustomMapDrawPanel;\n}\n"]}

package/dist/components/CustomMapLegend.d.ts

@@ -1,6 +1,9 @@
 import { LayerLegendContentFactory, LayerLegendHeaderFactory } from '@kepler.gl/components';
 import { MapLegendProps } from '@kepler.gl/components/dist/map/map-legend';
-export declare function CustomMapLegendFactory(LayerLegendHeader: ReturnType<typeof LayerLegendHeaderFactory>, LayerLegendContent: ReturnType<typeof LayerLegendContentFactory>): import("react").FC<MapLegendProps>;
+export declare function CustomMapLegendFactory(LayerLegendHeader: ReturnType<typeof LayerLegendHeaderFactory>, LayerLegendContent: ReturnType<typeof LayerLegendContentFactory>): import("react").FC<MapLegendProps & {
+    mapIndex?: number;
+    onClose?: () => void;
+}>;
 export declare namespace CustomMapLegendFactory {
     var deps: (typeof LayerLegendHeaderFactory | typeof LayerLegendContentFactory)[];
 }

package/dist/components/CustomMapLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomMapLegend.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapLegend.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,cAAc,EAAC,MAAM,2CAA2C,CAAC;AAgCzE,wBAAgB,sBAAsB,CACpC,iBAAiB,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,EAC9D,kBAAkB,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,sCAsJjE;yBAxJe,sBAAsB"}
+{"version":3,"file":"CustomMapLegend.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapLegend.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,cAAc,EACf,MAAM,2CAA2C,CAAC;AAkCnD,wBAAgB,sBAAsB,CACpC,iBAAiB,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,EAC9D,kBAAkB,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC;eAGjC,MAAM;cAAY,MAAM,IAAI;GAuL5D;yBA5Le,sBAAsB"}

package/dist/components/CustomMapLegend.js

@@ -5,29 +5,40 @@ import { toggleMapControl } from '@kepler.gl/actions';
 import { KeplerGlContext, LayerLegendContentFactory, LayerLegendHeaderFactory, } from '@kepler.gl/components';
 import { DIMENSIONS } from '@kepler.gl/constants';
 import { Button } from '@sqlrooms/ui';
-import { ArrowDown, ArrowRight, ChevronDownIcon, ChevronRightIcon, XIcon, } from 'lucide-react';
-import { useCallback, useContext, useRef, useState, } from 'react';
+import { ChevronDownIcon, ChevronRightIcon, XIcon, } from 'lucide-react';
+import { useCallback, useContext, useRef, useState } from 'react';
 import { useStoreWithKepler } from '../KeplerSlice';
+import { SplitMapIndexContext } from './SplitMapIndexContext';
 const defaultActionIcons = {
-    expanded: ArrowDown,
-    collapsed: ArrowRight,
+    expanded: ChevronDownIcon,
+    collapsed: ChevronRightIcon,
 };
+const keplerGlContext = KeplerGlContext;
 CustomMapLegendFactory.deps = [
     LayerLegendHeaderFactory,
     LayerLegendContentFactory,
 ];
 export function CustomMapLegendFactory(LayerLegendHeader, LayerLegendContent) {
-    const MapLegend = ({ layers = [], width, isExport, ...restProps }) => {
+    const MapLegend = ({ layers = [], width, isExport, mapIndex: mapIndexProp, onClose, ...restProps }) => {
         const containerW = width || DIMENSIONS.mapControl.width;
-        const mapId = useContext(KeplerGlContext).id;
+        const mapId = useContext(keplerGlContext).id;
+        const splitMapIndex = useContext(SplitMapIndexContext);
+        const mapIndex = mapIndexProp ?? splitMapIndex;
         const dispatchAction = useStoreWithKepler((state) => state.kepler.dispatchAction);
+        const splitMaps = useStoreWithKepler((state) => state.kepler.map[mapId]?.visState?.splitMaps);
         const handleClose = (evt) => {
             evt.stopPropagation();
-            dispatchAction(mapId, toggleMapControl('mapLegend', 0));
+            if (onClose) {
+                onClose();
+            }
+            else {
+                dispatchAction(mapId, toggleMapControl('mapLegend', 0));
+            }
         };
-        return (_jsx("div", { className: "map-legend border-border border", style: { width: containerW }, children: _jsxs("div", { className: "relative flex flex-col", children: [!isExport && (_jsxs("div", { className: "border-muted bg-background sticky top-0 flex w-full items-center justify-between border-b p-2", children: [_jsx("div", { className: "text-xs font-medium", children: "Legend" }), _jsx(Button, { variant: "ghost", size: "xs", className: "h-6 w-6", onClick: handleClose, children: _jsx(XIcon, { className: "h-4 w-4" }) })] })), _jsx("div", { className: "flex w-full flex-1 flex-col items-center", children: layers
-                            .filter((layer) => layer.config.isVisible)
-                            .map((layer, index) => {
+        const isSplit = splitMaps && splitMaps.length > 1;
+        const panelLayers = isSplit && mapIndex != null ? splitMaps[mapIndex]?.layers : undefined;
+        const visibleLayers = layers.filter((layer) => layer.config.isVisible && (!panelLayers || panelLayers[layer.id]));
+        return (_jsx("div", { className: "map-legend border-border border", style: { width: containerW }, children: _jsxs("div", { className: "relative flex flex-col", children: [!isExport && (_jsxs("div", { className: "border-muted bg-background sticky top-0 flex w-full items-center justify-between border-b p-2", children: [_jsx("div", { className: "text-xs font-medium", children: "Legend" }), _jsx(Button, { variant: "ghost", size: "xs", className: "h-6 w-6", onClick: handleClose, children: _jsx(XIcon, { className: "h-4 w-4" }) })] })), _jsx("div", { className: "flex w-full flex-1 flex-col items-center", children: visibleLayers.map((layer, index) => {
                             return (_jsx(LayerLegendItem, { layer: layer, containerW: containerW, isExport: isExport, ...restProps }, index));
                         }) })] }) }));
     };
@@ -51,7 +62,7 @@ export function CustomMapLegendFactory(LayerLegendHeader, LayerLegendContent) {
                 scrollIntoView();
             }
         };
-        const mapId = useContext(KeplerGlContext).id;
+        const mapId = useContext(keplerGlContext).id;
         const containerRef = useRef(null);
         if (!layer.isValidToSave() || layer.config.hidden) {
             return null;
@@ -59,7 +70,23 @@ export function CustomMapLegendFactory(LayerLegendHeader, LayerLegendContent) {
         if (isExport && !layer.config.isVisible) {
             return null;
         }
-        return (_jsxs("div", { ref: containerRef, className: "border-muted flex w-full flex-col items-center border-b", children: [_jsx("style", { children: `.legend--layer__item .panel--header__action { display: none !important; }` }), _jsxs("div", { className: "flex w-full flex-row items-center gap-2", onClick: handleToggleExpanded, children: [_jsx("div", { className: "cursor-pointer items-center overflow-hidden p-2 text-xs text-ellipsis whitespace-nowrap select-none", children: layer.config.label }), _jsx("div", { className: "flex-1" }), _jsx("div", { className: "flex flex-row items-center justify-end gap-1", children: _jsx(Button, { className: "h-7 w-7", variant: "ghost", size: "icon", onClick: handleToggleExpanded, children: isExpanded ? (_jsx(ChevronDownIcon, { className: "h-4 w-4" })) : (_jsx(ChevronRightIcon, { className: "h-4 w-4" })) }) })] }), isExpanded && (_jsx("div", { className: "w-full px-[8px] py-[5px] text-xs", children: _jsx(LayerLegendContent, { containerW: containerW, layer: layer, mapState: mapState, disableEdit: disableEdit, isExport: isExport, onLayerVisConfigChange: onLayerVisConfigChange, actionIcons: defaultActionIcons }) }))] }));
+        return (_jsxs("div", { ref: containerRef, className: "border-muted flex w-full flex-col items-center border-b", children: [_jsxs("div", { className: "flex w-full flex-row items-center gap-2", onClick: handleToggleExpanded, children: [_jsx("div", { className: "cursor-pointer items-center overflow-hidden p-2 text-xs text-ellipsis whitespace-nowrap select-none", children: layer.config.label }), _jsx("div", { className: "flex-1" }), _jsx("div", { className: "flex flex-row items-center justify-end gap-1", children: _jsx(Button, { className: "h-7 w-7", variant: "ghost", size: "icon", onClick: handleToggleExpanded, children: isExpanded ? (_jsx(ChevronDownIcon, { className: "h-4 w-4" })) : (_jsx(ChevronRightIcon, { className: "h-4 w-4" })) }) })] }), isExpanded && (_jsxs("div", { className: "legend-content-wrapper w-full px-[8px] py-[5px] text-xs", children: [_jsx("style", { children: `
+              .legend-content-wrapper .legend--layer_size-title-row { display: flex; align-items: center; gap: 4px; }
+              .legend-content-wrapper .panel--header__action {
+                margin-left: 0;
+                width: 28px;
+                height: 28px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 6px;
+                cursor: pointer;
+              }
+              .legend-content-wrapper .panel--header__action:hover {
+                background-color: hsl(var(--accent));
+                color: hsl(var(--accent-foreground));
+              }
+            ` }), _jsx(LayerLegendContent, { containerW: containerW, layer: layer, mapState: mapState, disableEdit: disableEdit, isExport: isExport, onLayerVisConfigChange: onLayerVisConfigChange, actionIcons: defaultActionIcons })] }))] }));
     };
     MapLegend.displayName = 'MapLegend';
     return MapLegend;

package/dist/components/CustomMapLegend.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomMapLegend.js","sourceRoot":"","sources":["../../src/components/CustomMapLegend.tsx"],"names":[],"mappings":"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","sourcesContent":["// SPDX-License-Identifier: MIT\n// Copyright contributors to the kepler.gl project\n\nimport {layerConfigChange, toggleMapControl} from '@kepler.gl/actions';\nimport {\n  KeplerGlContext,\n  LayerLegendContentFactory,\n  LayerLegendHeaderFactory,\n} from '@kepler.gl/components';\nimport {MapLegendProps} from '@kepler.gl/components/dist/map/map-legend';\nimport {DIMENSIONS} from '@kepler.gl/constants';\nimport {Layer} from '@kepler.gl/layers';\nimport {Button} from '@sqlrooms/ui';\nimport {\n  ArrowDown,\n  ArrowRight,\n  ChevronDownIcon,\n  ChevronRightIcon,\n  EyeIcon,\n  EyeOffIcon,\n  XIcon,\n} from 'lucide-react';\nimport {\n  MouseEventHandler,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\nimport {useStoreWithKepler} from '../KeplerSlice';\n\nconst defaultActionIcons = {\n  expanded: ArrowDown,\n  collapsed: ArrowRight,\n};\n\nCustomMapLegendFactory.deps = [\n  LayerLegendHeaderFactory,\n  LayerLegendContentFactory,\n];\n\nexport function CustomMapLegendFactory(\n  LayerLegendHeader: ReturnType<typeof LayerLegendHeaderFactory>,\n  LayerLegendContent: ReturnType<typeof LayerLegendContentFactory>,\n) {\n  const MapLegend: React.FC<MapLegendProps> = ({\n    layers = [],\n    width,\n    isExport,\n    ...restProps\n  }) => {\n    const containerW = width || DIMENSIONS.mapControl.width;\n    const mapId = useContext(KeplerGlContext).id;\n    const dispatchAction = useStoreWithKepler(\n      (state) => state.kepler.dispatchAction,\n    );\n    const handleClose = (evt: React.MouseEvent<HTMLButtonElement>) => {\n      evt.stopPropagation();\n      dispatchAction(mapId, toggleMapControl('mapLegend', 0));\n    };\n\n    return (\n      <div\n        className=\"map-legend border-border border\"\n        style={{width: containerW}}\n      >\n        <div className=\"relative flex flex-col\">\n          {!isExport && (\n            <div className=\"border-muted bg-background sticky top-0 flex w-full items-center justify-between border-b p-2\">\n              <div className=\"text-xs font-medium\">Legend</div>\n              <Button\n                variant=\"ghost\"\n                size=\"xs\"\n                className=\"h-6 w-6\"\n                onClick={handleClose}\n              >\n                <XIcon className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          )}\n          <div className=\"flex w-full flex-1 flex-col items-center\">\n            {layers\n              .filter((layer) => layer.config.isVisible)\n              .map((layer, index) => {\n                return (\n                  <LayerLegendItem\n                    key={index}\n                    layer={layer}\n                    containerW={containerW}\n                    isExport={isExport}\n                    {...restProps}\n                  />\n                );\n              })}\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  const LayerLegendItem = ({\n    layer,\n    containerW,\n    isExport,\n    mapState,\n    disableEdit,\n    onLayerVisConfigChange,\n  }: {layer: Layer; containerW: number} & MapLegendProps) => {\n    const [isExpanded, setIsExpanded] = useState(layer.config.isVisible);\n\n    const dispatchAction = useStoreWithKepler(\n      (state) => state.kepler.dispatchAction,\n    );\n    const scrollIntoView = useCallback(() => {\n      requestAnimationFrame(() => {\n        containerRef.current?.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      });\n    }, []);\n\n    const handleToggleExpanded: MouseEventHandler<HTMLElement> = (evt) => {\n      evt.stopPropagation();\n      const nextExpanded = !isExpanded;\n      setIsExpanded(nextExpanded);\n      if (!isExpanded) {\n        scrollIntoView();\n      }\n    };\n\n    const mapId = useContext(KeplerGlContext).id;\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    if (!layer.isValidToSave() || layer.config.hidden) {\n      return null;\n    }\n\n    if (isExport && !layer.config.isVisible) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={containerRef}\n        className=\"border-muted flex w-full flex-col items-center border-b\"\n      >\n        <style>{`.legend--layer__item .panel--header__action { display: none !important; }`}</style>\n        <div\n          className=\"flex w-full flex-row items-center gap-2\"\n          onClick={handleToggleExpanded}\n        >\n          <div className=\"cursor-pointer items-center overflow-hidden p-2 text-xs text-ellipsis whitespace-nowrap select-none\">\n            {layer.config.label}\n          </div>\n          <div className=\"flex-1\" />\n          <div className=\"flex flex-row items-center justify-end gap-1\">\n            <Button\n              className=\"h-7 w-7\"\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={handleToggleExpanded}\n            >\n              {isExpanded ? (\n                <ChevronDownIcon className=\"h-4 w-4\" />\n              ) : (\n                <ChevronRightIcon className=\"h-4 w-4\" />\n              )}\n            </Button>\n          </div>\n        </div>\n\n        {isExpanded && (\n          <div className=\"w-full px-[8px] py-[5px] text-xs\">\n            <LayerLegendContent\n              containerW={containerW}\n              layer={layer}\n              mapState={mapState}\n              disableEdit={disableEdit}\n              isExport={isExport}\n              onLayerVisConfigChange={onLayerVisConfigChange}\n              actionIcons={defaultActionIcons}\n            />\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  MapLegend.displayName = 'MapLegend';\n\n  return MapLegend;\n}\n"]}
+{"version":3,"file":"CustomMapLegend.js","sourceRoot":"","sources":["../../src/components/CustomMapLegend.tsx"],"names":[],"mappings":"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","sourcesContent":["// SPDX-License-Identifier: MIT\n// Copyright contributors to the kepler.gl project\n\nimport {layerConfigChange, toggleMapControl} from '@kepler.gl/actions';\nimport {\n  KeplerGlContext,\n  LayerLegendContentFactory,\n  LayerLegendHeaderFactory,\n} from '@kepler.gl/components';\nimport {\n  MapLegendIcons,\n  MapLegendProps,\n} from '@kepler.gl/components/dist/map/map-legend';\nimport {DIMENSIONS} from '@kepler.gl/constants';\nimport {Layer} from '@kepler.gl/layers';\nimport {Button} from '@sqlrooms/ui';\nimport {\n  ChevronDownIcon,\n  ChevronRightIcon,\n  EyeIcon,\n  EyeOffIcon,\n  XIcon,\n} from 'lucide-react';\nimport {useCallback, useContext, useRef, useState} from 'react';\nimport type {Context, MouseEventHandler} from 'react';\nimport {useStoreWithKepler} from '../KeplerSlice';\nimport {SplitMapIndexContext} from './SplitMapIndexContext';\n\nconst defaultActionIcons = {\n  expanded: ChevronDownIcon as unknown as MapLegendIcons['expanded'],\n  collapsed: ChevronRightIcon as unknown as MapLegendIcons['collapsed'],\n} satisfies MapLegendIcons;\n\ntype KeplerGlContextValue = {\n  selector: (state: any) => any;\n  id: string;\n};\n\nconst keplerGlContext =\n  KeplerGlContext as unknown as Context<KeplerGlContextValue>;\n\nCustomMapLegendFactory.deps = [\n  LayerLegendHeaderFactory,\n  LayerLegendContentFactory,\n];\n\nexport function CustomMapLegendFactory(\n  LayerLegendHeader: ReturnType<typeof LayerLegendHeaderFactory>,\n  LayerLegendContent: ReturnType<typeof LayerLegendContentFactory>,\n) {\n  const MapLegend: React.FC<\n    MapLegendProps & {mapIndex?: number; onClose?: () => void}\n  > = ({\n    layers = [],\n    width,\n    isExport,\n    mapIndex: mapIndexProp,\n    onClose,\n    ...restProps\n  }) => {\n    const containerW = width || DIMENSIONS.mapControl.width;\n    const mapId = useContext(keplerGlContext).id;\n    const splitMapIndex = useContext(SplitMapIndexContext);\n    const mapIndex = mapIndexProp ?? splitMapIndex;\n    const dispatchAction = useStoreWithKepler(\n      (state) => state.kepler.dispatchAction,\n    );\n    const splitMaps = useStoreWithKepler(\n      (state) => state.kepler.map[mapId]?.visState?.splitMaps,\n    );\n    const handleClose = (evt: React.MouseEvent<HTMLButtonElement>) => {\n      evt.stopPropagation();\n      if (onClose) {\n        onClose();\n      } else {\n        dispatchAction(mapId, toggleMapControl('mapLegend', 0));\n      }\n    };\n\n    const isSplit = splitMaps && splitMaps.length > 1;\n    const panelLayers =\n      isSplit && mapIndex != null ? splitMaps[mapIndex]?.layers : undefined;\n\n    const visibleLayers = layers.filter(\n      (layer) =>\n        layer.config.isVisible && (!panelLayers || panelLayers[layer.id]),\n    );\n\n    return (\n      <div\n        className=\"map-legend border-border border\"\n        style={{width: containerW}}\n      >\n        <div className=\"relative flex flex-col\">\n          {!isExport && (\n            <div className=\"border-muted bg-background sticky top-0 flex w-full items-center justify-between border-b p-2\">\n              <div className=\"text-xs font-medium\">Legend</div>\n              <Button\n                variant=\"ghost\"\n                size=\"xs\"\n                className=\"h-6 w-6\"\n                onClick={handleClose}\n              >\n                <XIcon className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          )}\n          <div className=\"flex w-full flex-1 flex-col items-center\">\n            {visibleLayers.map((layer, index) => {\n              return (\n                <LayerLegendItem\n                  key={index}\n                  layer={layer}\n                  containerW={containerW}\n                  isExport={isExport}\n                  {...restProps}\n                />\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  const LayerLegendItem = ({\n    layer,\n    containerW,\n    isExport,\n    mapState,\n    disableEdit,\n    onLayerVisConfigChange,\n  }: {layer: Layer; containerW: number} & MapLegendProps) => {\n    const [isExpanded, setIsExpanded] = useState(layer.config.isVisible);\n\n    const dispatchAction = useStoreWithKepler(\n      (state) => state.kepler.dispatchAction,\n    );\n    const scrollIntoView = useCallback(() => {\n      requestAnimationFrame(() => {\n        containerRef.current?.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      });\n    }, []);\n\n    const handleToggleExpanded: MouseEventHandler<HTMLElement> = (evt) => {\n      evt.stopPropagation();\n      const nextExpanded = !isExpanded;\n      setIsExpanded(nextExpanded);\n      if (!isExpanded) {\n        scrollIntoView();\n      }\n    };\n\n    const mapId = useContext(keplerGlContext).id;\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    if (!layer.isValidToSave() || layer.config.hidden) {\n      return null;\n    }\n\n    if (isExport && !layer.config.isVisible) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={containerRef}\n        className=\"border-muted flex w-full flex-col items-center border-b\"\n      >\n        <div\n          className=\"flex w-full flex-row items-center gap-2\"\n          onClick={handleToggleExpanded}\n        >\n          <div className=\"cursor-pointer items-center overflow-hidden p-2 text-xs text-ellipsis whitespace-nowrap select-none\">\n            {layer.config.label}\n          </div>\n          <div className=\"flex-1\" />\n          <div className=\"flex flex-row items-center justify-end gap-1\">\n            <Button\n              className=\"h-7 w-7\"\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={handleToggleExpanded}\n            >\n              {isExpanded ? (\n                <ChevronDownIcon className=\"h-4 w-4\" />\n              ) : (\n                <ChevronRightIcon className=\"h-4 w-4\" />\n              )}\n            </Button>\n          </div>\n        </div>\n\n        {isExpanded && (\n          <div className=\"legend-content-wrapper w-full px-[8px] py-[5px] text-xs\">\n            <style>{`\n              .legend-content-wrapper .legend--layer_size-title-row { display: flex; align-items: center; gap: 4px; }\n              .legend-content-wrapper .panel--header__action {\n                margin-left: 0;\n                width: 28px;\n                height: 28px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 6px;\n                cursor: pointer;\n              }\n              .legend-content-wrapper .panel--header__action:hover {\n                background-color: hsl(var(--accent));\n                color: hsl(var(--accent-foreground));\n              }\n            `}</style>\n            <LayerLegendContent\n              containerW={containerW}\n              layer={layer}\n              mapState={mapState}\n              disableEdit={disableEdit}\n              isExport={isExport}\n              onLayerVisConfigChange={onLayerVisConfigChange}\n              actionIcons={defaultActionIcons}\n            />\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  MapLegend.displayName = 'MapLegend';\n\n  return MapLegend;\n}\n"]}

package/dist/components/CustomMapLegendPanel.d.ts

@@ -1,6 +1,6 @@
-import { MapLegendPanelFactory } from '@kepler.gl/components';
-export declare function CustomMapLegendPanelFactory(...deps: Parameters<typeof MapLegendPanelFactory>): ReturnType<typeof MapLegendPanelFactory>;
+import { MapControlTooltipFactory, MapControlPanelFactory, MapLegendFactory, MapLegendPanelFactory } from '@kepler.gl/components';
+export declare function CustomMapLegendPanelFactory(MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>, MapControlPanel: ReturnType<typeof MapControlPanelFactory>, MapLegend: ReturnType<typeof MapLegendFactory>): ReturnType<typeof MapLegendPanelFactory>;
 export declare namespace CustomMapLegendPanelFactory {
-    var deps: (typeof import("@kepler.gl/components").MapControlTooltipFactory | typeof import("@kepler.gl/components").MapControlPanelFactory | typeof import("@kepler.gl/components").MapLegendFactory)[];
+    var deps: (typeof MapControlTooltipFactory | typeof MapControlPanelFactory | typeof MapLegendFactory)[];
 }
 //# sourceMappingURL=CustomMapLegendPanel.d.ts.map

package/dist/components/CustomMapLegendPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomMapLegendPanel.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapLegendPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EAEtB,MAAM,uBAAuB,CAAC;AAI/B,wBAAgB,2BAA2B,CACzC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,GAChD,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAY1C;yBAde,2BAA2B"}
+{"version":3,"file":"CustomMapLegendPanel.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapLegendPanel.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,wBAAwB,EACxB,sBAAsB,EACtB,gBAAgB,EAChB,qBAAqB,EAEtB,MAAM,uBAAuB,CAAC;AAI/B,wBAAgB,2BAA2B,CACzC,iBAAiB,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,EAC9D,eAAe,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,EAC1D,SAAS,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,GAC7C,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAsE1C;yBA1Ee,2BAA2B"}

package/dist/components/CustomMapLegendPanel.js

@@ -1,10 +1,33 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { MapLegendPanelFactory, } from '@kepler.gl/components';
+import { useCallback } from 'react';
+import { Icons, MapControlButton, MapLegendPanelFactory, } from '@kepler.gl/components';
 CustomMapLegendPanelFactory.deps = MapLegendPanelFactory.deps;
-export function CustomMapLegendPanelFactory(...deps) {
-    const MapLegendPanel = MapLegendPanelFactory(...deps);
+export function CustomMapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
+    const OriginalMapLegendPanel = MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend);
+    const SplitPaneLegend = (props) => {
+        const mapLegend = props.mapControls?.mapLegend;
+        const isActive = mapLegend?.active;
+        const { onToggleMapControl } = props;
+        const toggleLegend = useCallback((e) => {
+            e?.preventDefault();
+            onToggleMapControl('mapLegend');
+        }, [onToggleMapControl]);
+        if (!mapLegend?.show)
+            return null;
+        // The secondary (right) pane only shows the toggle button
+        if (props.mapIndex !== 0) {
+            return (_jsx(MapControlTooltip, { id: "show-legend", message: isActive ? 'tooltip.hideLegend' : 'tooltip.showLegend', children: _jsx(MapControlButton, { className: "map-control-button show-legend", active: isActive, onClick: toggleLegend, children: _jsx(Icons.Legend, { height: "22px" }) }) }));
+        }
+        // Primary (left) pane: render the full draggable legend panel
+        // (OriginalMapLegendPanel handles DraggableLegend + createPortal,
+        // and MapControlPanel renders "Unlock Viewport" / "Sync Zoom" in its header)
+        return (_jsxs(_Fragment, { children: [_jsx("style", { children: `.draggable-legend .map-control__panel-header:not(.map-control__panel-split-viewport-tools) { display: none !important; }` }), _jsx(OriginalMapLegendPanel, { ...props })] }));
+    };
     const CustomMapLegendPanel = (props) => {
-        return (_jsxs(_Fragment, { children: [_jsx("style", { children: `.draggable-legend .map-control__panel-header { display: none !important; }` }), _jsx(MapLegendPanel, { ...props })] }));
+        if (props.isSplit) {
+            return _jsx(SplitPaneLegend, { ...props });
+        }
+        return (_jsxs(_Fragment, { children: [_jsx("style", { children: `.draggable-legend .map-control__panel-header:not(.map-control__panel-split-viewport-tools) { display: none !important; }` }), _jsx(OriginalMapLegendPanel, { ...props })] }));
     };
     CustomMapLegendPanel.displayName = 'CustomMapLegendPanel';
     return CustomMapLegendPanel;

package/dist/components/CustomMapLegendPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomMapLegendPanel.js","sourceRoot":"","sources":["../../src/components/CustomMapLegendPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,qBAAqB,GAEtB,MAAM,uBAAuB,CAAC;AAE/B,2BAA2B,CAAC,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC;AAE9D,MAAM,UAAU,2BAA2B,CACzC,GAAG,IAA8C;IAEjD,MAAM,cAAc,GAAG,qBAAqB,CAAC,GAAG,IAAI,CAAC,CAAC;IACtD,MAAM,oBAAoB,GAAG,CAAC,KAA0B,EAAE,EAAE;QAC1D,OAAO,CACL,8BACE,0BAAQ,4EAA4E,GAAS,EAC7F,KAAC,cAAc,OAAK,KAAK,GAAI,IAC5B,CACJ,CAAC;IACJ,CAAC,CAAC;IACF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;IAC1D,OAAO,oBAAoB,CAAC;AAC9B,CAAC","sourcesContent":["import {\n  MapLegendPanelFactory,\n  MapLegendPanelProps,\n} from '@kepler.gl/components';\n\nCustomMapLegendPanelFactory.deps = MapLegendPanelFactory.deps;\n\nexport function CustomMapLegendPanelFactory(\n  ...deps: Parameters<typeof MapLegendPanelFactory>\n): ReturnType<typeof MapLegendPanelFactory> {\n  const MapLegendPanel = MapLegendPanelFactory(...deps);\n  const CustomMapLegendPanel = (props: MapLegendPanelProps) => {\n    return (\n      <>\n        <style>{`.draggable-legend .map-control__panel-header { display: none !important; }`}</style>\n        <MapLegendPanel {...props} />\n      </>\n    );\n  };\n  CustomMapLegendPanel.displayName = 'CustomMapLegendPanel';\n  return CustomMapLegendPanel;\n}\n"]}
+{"version":3,"file":"CustomMapLegendPanel.js","sourceRoot":"","sources":["../../src/components/CustomMapLegendPanel.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAC,WAAW,EAAC,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,KAAK,EACL,gBAAgB,EAIhB,qBAAqB,GAEtB,MAAM,uBAAuB,CAAC;AAE/B,2BAA2B,CAAC,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC;AAE9D,MAAM,UAAU,2BAA2B,CACzC,iBAA8D,EAC9D,eAA0D,EAC1D,SAA8C;IAE9C,MAAM,sBAAsB,GAAG,qBAAqB,CAClD,iBAAiB,EACjB,eAAe,EACf,SAAS,CACV,CAAC;IAEF,MAAM,eAAe,GAAG,CACtB,KAAmE,EACnE,EAAE;QACF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,EAAE,SAAS,CAAC;QAC/C,MAAM,QAAQ,GAAG,SAAS,EAAE,MAAM,CAAC;QACnC,MAAM,EAAC,kBAAkB,EAAC,GAAG,KAAK,CAAC;QAEnC,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAoB,EAAE,EAAE;YACvB,CAAC,EAAE,cAAc,EAAE,CAAC;YACpB,kBAAkB,CAAC,WAAW,CAAC,CAAC;QAClC,CAAC,EACD,CAAC,kBAAkB,CAAC,CACrB,CAAC;QAEF,IAAI,CAAC,SAAS,EAAE,IAAI;YAAE,OAAO,IAAI,CAAC;QAElC,0DAA0D;QAC1D,IAAI,KAAK,CAAC,QAAQ,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,CACL,KAAC,iBAAiB,IAChB,EAAE,EAAC,aAAa,EAChB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,YAE/D,KAAC,gBAAgB,IACf,SAAS,EAAC,gCAAgC,EAC1C,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE,YAAY,YAErB,KAAC,KAAK,CAAC,MAAM,IAAC,MAAM,EAAC,MAAM,GAAG,GACb,GACD,CACrB,CAAC;QACJ,CAAC;QAED,8DAA8D;QAC9D,kEAAkE;QAClE,6EAA6E;QAC7E,OAAO,CACL,8BACE,0BAAQ,0HAA0H,GAAS,EAC3I,KAAC,sBAAsB,OAAK,KAAK,GAAI,IACpC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAC3B,KAAmE,EACnE,EAAE;QACF,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,KAAC,eAAe,OAAK,KAAK,GAAI,CAAC;QACxC,CAAC;QAED,OAAO,CACL,8BACE,0BAAQ,0HAA0H,GAAS,EAC3I,KAAC,sBAAsB,OAAK,KAAK,GAAI,IACpC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;IAC1D,OAAO,oBAAoB,CAAC;AAC9B,CAAC","sourcesContent":["import React, {useCallback} from 'react';\nimport {\n  Icons,\n  MapControlButton,\n  MapControlTooltipFactory,\n  MapControlPanelFactory,\n  MapLegendFactory,\n  MapLegendPanelFactory,\n  MapLegendPanelProps,\n} from '@kepler.gl/components';\n\nCustomMapLegendPanelFactory.deps = MapLegendPanelFactory.deps;\n\nexport function CustomMapLegendPanelFactory(\n  MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>,\n  MapControlPanel: ReturnType<typeof MapControlPanelFactory>,\n  MapLegend: ReturnType<typeof MapLegendFactory>,\n): ReturnType<typeof MapLegendPanelFactory> {\n  const OriginalMapLegendPanel = MapLegendPanelFactory(\n    MapControlTooltip,\n    MapControlPanel,\n    MapLegend,\n  );\n\n  const SplitPaneLegend = (\n    props: MapLegendPanelProps & {mapIndex?: number; isSplit?: boolean},\n  ) => {\n    const mapLegend = props.mapControls?.mapLegend;\n    const isActive = mapLegend?.active;\n    const {onToggleMapControl} = props;\n\n    const toggleLegend = useCallback(\n      (e?: React.MouseEvent) => {\n        e?.preventDefault();\n        onToggleMapControl('mapLegend');\n      },\n      [onToggleMapControl],\n    );\n\n    if (!mapLegend?.show) return null;\n\n    // The secondary (right) pane only shows the toggle button\n    if (props.mapIndex !== 0) {\n      return (\n        <MapControlTooltip\n          id=\"show-legend\"\n          message={isActive ? 'tooltip.hideLegend' : 'tooltip.showLegend'}\n        >\n          <MapControlButton\n            className=\"map-control-button show-legend\"\n            active={isActive}\n            onClick={toggleLegend}\n          >\n            <Icons.Legend height=\"22px\" />\n          </MapControlButton>\n        </MapControlTooltip>\n      );\n    }\n\n    // Primary (left) pane: render the full draggable legend panel\n    // (OriginalMapLegendPanel handles DraggableLegend + createPortal,\n    // and MapControlPanel renders \"Unlock Viewport\" / \"Sync Zoom\" in its header)\n    return (\n      <>\n        <style>{`.draggable-legend .map-control__panel-header:not(.map-control__panel-split-viewport-tools) { display: none !important; }`}</style>\n        <OriginalMapLegendPanel {...props} />\n      </>\n    );\n  };\n\n  const CustomMapLegendPanel = (\n    props: MapLegendPanelProps & {mapIndex?: number; isSplit?: boolean},\n  ) => {\n    if (props.isSplit) {\n      return <SplitPaneLegend {...props} />;\n    }\n\n    return (\n      <>\n        <style>{`.draggable-legend .map-control__panel-header:not(.map-control__panel-split-viewport-tools) { display: none !important; }`}</style>\n        <OriginalMapLegendPanel {...props} />\n      </>\n    );\n  };\n\n  CustomMapLegendPanel.displayName = 'CustomMapLegendPanel';\n  return CustomMapLegendPanel;\n}\n"]}

package/dist/components/CustomSourceDataSelector.d.ts

@@ -0,0 +1,18 @@
+import { SourceDataSelectorProps } from '@kepler.gl/components';
+import React from 'react';
+type SourceDataSelectorContent = React.ComponentType<SourceDataSelectorProps>;
+type CustomSourceDataSelectorProps = SourceDataSelectorProps & {
+    id?: string;
+};
+/**
+ * Kepler uses the same SourceDataSelector in layer config and filter config.
+ * Layer config passes a layer id, so only that version includes unloaded
+ * SQLRooms table options. Filter selectors use the same UI with loaded Kepler
+ * datasets only because a filter needs a loaded dataset to expose fields.
+ */
+export declare function CustomSourceDataSelectorFactory(_DataSourceSelectorContent: SourceDataSelectorContent): React.FC<CustomSourceDataSelectorProps>;
+export declare namespace CustomSourceDataSelectorFactory {
+    var deps: typeof import("@kepler.gl/components/dist/side-panel/common/source-data-selector-content").default[];
+}
+export {};
+//# sourceMappingURL=CustomSourceDataSelector.d.ts.map

package/dist/components/CustomSourceDataSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomSourceDataSelector.d.ts","sourceRoot":"","sources":["../../src/components/CustomSourceDataSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,uBAAuB,EACxB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAuC,MAAM,OAAO,CAAC;AAW5D,KAAK,yBAAyB,GAAG,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;AAC9E,KAAK,6BAA6B,GAAG,uBAAuB,GAAG;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAyCF;;;;;GAKG;AACH,wBAAgB,+BAA+B,CAC7C,0BAA0B,EAAE,yBAAyB,GACpD,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAAC,CAoJzC;yBAtJe,+BAA+B"}