@sqlrooms/kepler 0.26.1-rc.0

package/dist/components/CustomDndContext.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+import { DndContext as DndKitContext, DragOverlay } from '@dnd-kit/core';
+import { LayerPanelHeaderFactory, DND_MODIFIERS, DND_EMPTY_MODIFIERS, SORTABLE_LAYER_TYPE, SORTABLE_EFFECT_TYPE, } from '@kepler.gl/components';
+import useDndLayers from '../hooks/useDndLayers';
+import useDndEffects from '../hooks/useDndEffects';
+import { useStoreWithKepler } from '../KeplerSlice';
+const DragItem = styled.div `
+  cursor: grabbing;
+`;
+const nop = () => { };
+export function CustomDndContextFactory(LayerPanelHeader) {
+    const LayerPanelOverlay = ({ layer, datasets, }) => {
+        const color = layer.config.dataId && datasets[layer.config.dataId]
+            ? datasets[layer.config.dataId].color
+            : null;
+        return (_jsx(LayerPanelHeader, { isConfigActive: false, layerId: layer.id, isVisible: true, isValid: true, label: layer.config.label, labelRCGColorValues: color, onToggleVisibility: nop, onResetIsValid: nop, onUpdateLayerLabel: nop, onToggleEnableConfig: nop, onDuplicateLayer: nop, onRemoveLayer: nop, onZoomToLayer: nop, layerType: layer.type, allowDuplicate: false, isDragNDropEnabled: false }));
+    };
+    const DndContext = ({ children, visState }) => {
+        // Get the current map ID from the store
+        const mapId = useStoreWithKepler((state) => state.kepler.config.currentMapId);
+        const { datasets, layerOrder, layers, splitMaps, effects, effectOrder } = visState || {};
+        // Use our custom hooks that include mapId
+        const { activeLayer, onDragStart: onLayerDragStart, onDragEnd: onLayerDragEnd, } = useDndLayers(mapId, layers || [], layerOrder || []);
+        const { onDragStart: onEffectDragStart, onDragEnd: onEffectDragEnd } = useDndEffects(mapId, effects || [], effectOrder || []);
+        const isSplit = useMemo(() => (splitMaps?.length || 0) > 1, [splitMaps]);
+        const dndModifiers = useMemo(() => (isSplit ? DND_EMPTY_MODIFIERS : DND_MODIFIERS), [isSplit]);
+        const onDragStart = useCallback((event) => {
+            const activeType = event.active.data?.current?.type;
+            switch (activeType) {
+                case SORTABLE_LAYER_TYPE:
+                    onLayerDragStart(event);
+                    break;
+                case SORTABLE_EFFECT_TYPE:
+                    onEffectDragStart(event);
+                    break;
+                default:
+                    console.log(`activeType ${activeType} unknown`);
+            }
+        }, [onLayerDragStart, onEffectDragStart]);
+        const onDragEnd = useCallback((event) => {
+            const activeType = event.active.data?.current?.type;
+            switch (activeType) {
+                case SORTABLE_LAYER_TYPE:
+                    onLayerDragEnd(event);
+                    break;
+                case SORTABLE_EFFECT_TYPE:
+                    onEffectDragEnd(event);
+                    break;
+                default:
+                    console.log(`activeType ${activeType} unknown`);
+            }
+        }, [onLayerDragEnd, onEffectDragEnd]);
+        return (_jsxs(DndKitContext, { onDragStart: onDragStart, onDragEnd: onDragEnd, modifiers: dndModifiers, children: [children, activeLayer ? (_jsx(DragOverlay, { modifiers: dndModifiers, dropAnimation: null, children: _jsx(DragItem, { children: _jsx(LayerPanelOverlay, { layer: activeLayer, datasets: datasets }) }) })) : null] }));
+    };
+    return DndContext;
+}
+CustomDndContextFactory.deps = [LayerPanelHeaderFactory];
+//# sourceMappingURL=CustomDndContext.js.map

package/dist/components/CustomDndContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomDndContext.js","sourceRoot":"","sources":["../../src/components/CustomDndContext.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo, PropsWithChildren} from 'react';\nimport styled from 'styled-components';\nimport {DndContext as DndKitContext, DragOverlay} from '@dnd-kit/core';\nimport {VisState} from '@kepler.gl/schemas';\nimport {\n  LayerPanelHeaderFactory,\n  DND_MODIFIERS,\n  DND_EMPTY_MODIFIERS,\n  SORTABLE_LAYER_TYPE,\n  SORTABLE_EFFECT_TYPE,\n} from '@kepler.gl/components';\n\nimport useDndLayers from '../hooks/useDndLayers';\nimport useDndEffects from '../hooks/useDndEffects';\nimport {useStoreWithKepler} from '../KeplerSlice';\n\nconst DragItem = styled.div`\n  cursor: grabbing;\n`;\n\nconst nop = () => {};\n\nexport type DndContextProps = PropsWithChildren<{\n  visState?: VisState;\n}>;\n\nexport function CustomDndContextFactory(\n  LayerPanelHeader: ReturnType<typeof LayerPanelHeaderFactory>,\n): React.FC<DndContextProps> {\n  const LayerPanelOverlay = ({\n    layer,\n    datasets,\n  }: {\n    layer: any;\n    datasets: any;\n  }) => {\n    const color =\n      layer.config.dataId && datasets[layer.config.dataId]\n        ? datasets[layer.config.dataId].color\n        : null;\n    return (\n      <LayerPanelHeader\n        isConfigActive={false}\n        layerId={layer.id}\n        isVisible={true}\n        isValid={true}\n        label={layer.config.label}\n        labelRCGColorValues={color}\n        onToggleVisibility={nop}\n        onResetIsValid={nop}\n        onUpdateLayerLabel={nop}\n        onToggleEnableConfig={nop}\n        onDuplicateLayer={nop}\n        onRemoveLayer={nop}\n        onZoomToLayer={nop}\n        layerType={layer.type}\n        allowDuplicate={false}\n        isDragNDropEnabled={false}\n      />\n    );\n  };\n\n  const DndContext = ({children, visState}: DndContextProps) => {\n    // Get the current map ID from the store\n    const mapId = useStoreWithKepler(\n      (state: any) => state.kepler.config.currentMapId,\n    );\n    const {datasets, layerOrder, layers, splitMaps, effects, effectOrder} =\n      visState || {};\n\n    // Use our custom hooks that include mapId\n    const {\n      activeLayer,\n      onDragStart: onLayerDragStart,\n      onDragEnd: onLayerDragEnd,\n    } = useDndLayers(mapId, layers || [], layerOrder || []);\n\n    const {onDragStart: onEffectDragStart, onDragEnd: onEffectDragEnd} =\n      useDndEffects(mapId, effects || [], effectOrder || []);\n\n    const isSplit = useMemo(() => (splitMaps?.length || 0) > 1, [splitMaps]);\n    const dndModifiers = useMemo(\n      () => (isSplit ? DND_EMPTY_MODIFIERS : DND_MODIFIERS),\n      [isSplit],\n    );\n\n    const onDragStart = useCallback(\n      (event: any) => {\n        const activeType = event.active.data?.current?.type;\n        switch (activeType) {\n          case SORTABLE_LAYER_TYPE:\n            onLayerDragStart(event);\n            break;\n          case SORTABLE_EFFECT_TYPE:\n            onEffectDragStart(event);\n            break;\n          default:\n            console.log(`activeType ${activeType} unknown`);\n        }\n      },\n      [onLayerDragStart, onEffectDragStart],\n    );\n\n    const onDragEnd = useCallback(\n      (event: any) => {\n        const activeType = event.active.data?.current?.type;\n        switch (activeType) {\n          case SORTABLE_LAYER_TYPE:\n            onLayerDragEnd(event);\n            break;\n          case SORTABLE_EFFECT_TYPE:\n            onEffectDragEnd(event);\n            break;\n          default:\n            console.log(`activeType ${activeType} unknown`);\n        }\n      },\n      [onLayerDragEnd, onEffectDragEnd],\n    );\n\n    return (\n      <DndKitContext\n        onDragStart={onDragStart}\n        onDragEnd={onDragEnd}\n        modifiers={dndModifiers}\n      >\n        {children}\n        {activeLayer ? (\n          <DragOverlay modifiers={dndModifiers} dropAnimation={null}>\n            <DragItem>\n              <LayerPanelOverlay layer={activeLayer} datasets={datasets} />\n            </DragItem>\n          </DragOverlay>\n        ) : null}\n      </DndKitContext>\n    );\n  };\n\n  return DndContext;\n}\n\nCustomDndContextFactory.deps = [LayerPanelHeaderFactory];\n"]}

package/dist/components/CustomFilterManager.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type CustomFilterManagerProps = {
+    mapId: string;
+    showDeleteDataset?: boolean;
+};
+export declare const CustomFilterManager: React.FC<CustomFilterManagerProps>;
+export default CustomFilterManager;
+//# sourceMappingURL=CustomFilterManager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFilterManager.d.ts","sourceRoot":"","sources":["../../src/components/CustomFilterManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAkDlD,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAyGF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAqDlE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/CustomFilterManager.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { FilterPanelFactory, PanelTitleFactory, AddFilterButtonFactory, SidePanelSection, } from '@kepler.gl/components';
+import { FILTER_VIEW_TYPES, SIDEBAR_PANELS } from '@kepler.gl/constants';
+import { isSideFilter } from '@kepler.gl/utils';
+import { KeplerInjector } from './KeplerInjector';
+import { useKeplerStateActions, } from '../hooks/useKeplerStateActions';
+// Get the kepler.gl components through the injector
+const FilterPanel = KeplerInjector.get(FilterPanelFactory);
+const PanelTitle = KeplerInjector.get(PanelTitleFactory);
+const AddFilterButton = KeplerInjector.get(AddFilterButtonFactory);
+const filterPanelMetadata = SIDEBAR_PANELS.find((p) => p.id === 'filter');
+// Custom styled components for your filter manager
+const CustomFilterManagerContainer = styled.div `
+  .filter-manager {
+    /* Add your custom styles here */
+  }
+
+  .filter-manager-title {
+    /* Custom title styling */
+  }
+
+  .add-filter-button {
+    background-color: ${(props) => props.theme.sidePanelBg || props.theme.panelBackground};
+    color: #2563eb;
+    border: 0px;
+    height: 28px;
+    font-weight: 500;
+    font-size: 14px;
+  }
+`;
+// Filter List Component
+const FilterList = ({ filtersByIndex, filters, datasets, layers, isAnyFilterAnimating, keplerActions, }) => {
+    const { removeFilter, setFilterView, toggleFilterAnimation, toggleFilterFeature, } = keplerActions.visStateActions;
+    const filterPanelProps = useMemo(() => {
+        return filtersByIndex.reduce((accu, { filter, idx }) => ({
+            ...accu,
+            [filter.id]: {
+                removeFilter: () => removeFilter(idx),
+                setFilterView: (view) => setFilterView(idx, isSideFilter(filter)
+                    ? FILTER_VIEW_TYPES.enlarged
+                    : FILTER_VIEW_TYPES.side),
+                toggleAnimation: () => toggleFilterAnimation(idx),
+                toggleFilterFeature: () => toggleFilterFeature(idx),
+            },
+        }), {});
+    }, [
+        filtersByIndex,
+        removeFilter,
+        setFilterView,
+        toggleFilterAnimation,
+        toggleFilterFeature,
+    ]);
+    return (_jsx(_Fragment, { children: [...filtersByIndex].reverse().map(({ filter, idx }) => (_jsx(FilterPanel, { idx: idx, filters: filters, filter: filter, datasets: datasets, layers: layers, isAnyFilterAnimating: isAnyFilterAnimating, removeFilter: filterPanelProps[filter.id]?.removeFilter, setFilterView: filterPanelProps[filter.id]?.setFilterView, toggleAnimation: filterPanelProps[filter.id]?.toggleAnimation, toggleFilterFeature: filterPanelProps[filter.id]?.toggleFilterFeature, ...keplerActions.visStateActions }, `${filter.id}-${idx}`))) }));
+};
+// Custom hook for filter actions
+function useCustomFilterActions(keplerActions) {
+    const { addFilter } = keplerActions.visStateActions;
+    const onClickAddFilter = useCallback((dataset) => addFilter(dataset), [addFilter]);
+    return {
+        onClickAddFilter,
+    };
+}
+// Main Custom Filter Manager Component
+export const CustomFilterManager = ({ mapId, }) => {
+    const { keplerActions, keplerState } = useKeplerStateActions({ mapId });
+    const intl = useIntl();
+    const { onClickAddFilter } = useCustomFilterActions(keplerActions);
+    if (!keplerState || !keplerActions) {
+        return null;
+    }
+    const { filters, datasets, layers } = keplerState.visState;
+    const isAnyFilterAnimating = Object.values(filters).some((f) => f.isAnimating);
+    const filtersByIndex = useMemo(() => filters.map((f, idx) => ({
+        filter: f,
+        idx,
+    })), [filters]);
+    return (_jsx(CustomFilterManagerContainer, { children: _jsxs("div", { className: "filter-manager", children: [_jsx(SidePanelSection, { children: _jsx(PanelTitle, { className: "filter-manager-title", title: intl.formatMessage({
+                            id: filterPanelMetadata?.label || 'Filters',
+                        }), children: _jsx(AddFilterButton, { datasets: datasets, onAdd: onClickAddFilter }) }) }), _jsx(SidePanelSection, { children: _jsx(FilterList, { filtersByIndex: filtersByIndex, filters: filters, datasets: datasets, layers: layers, isAnyFilterAnimating: isAnyFilterAnimating, keplerActions: keplerActions }) })] }) }));
+};
+export default CustomFilterManager;
+//# sourceMappingURL=CustomFilterManager.js.map

package/dist/components/CustomFilterManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFilterManager.js","sourceRoot":"","sources":["../../src/components/CustomFilterManager.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  FilterPanelFactory,\n  PanelTitleFactory,\n  AddFilterButtonFactory,\n  SidePanelSection,\n} from '@kepler.gl/components';\nimport {FILTER_VIEW_TYPES, SIDEBAR_PANELS} from '@kepler.gl/constants';\nimport {Filter} from '@kepler.gl/types';\nimport {Layer} from '@kepler.gl/layers';\nimport {isSideFilter} from '@kepler.gl/utils';\nimport {Datasets} from '@kepler.gl/table';\n\nimport {KeplerInjector} from './KeplerInjector';\nimport {\n  KeplerActions,\n  useKeplerStateActions,\n} from '../hooks/useKeplerStateActions';\n\n// Get the kepler.gl components through the injector\nconst FilterPanel = KeplerInjector.get(FilterPanelFactory);\nconst PanelTitle = KeplerInjector.get(PanelTitleFactory);\nconst AddFilterButton = KeplerInjector.get(AddFilterButtonFactory);\n\nconst filterPanelMetadata = SIDEBAR_PANELS.find((p) => p.id === 'filter');\n\n// Custom styled components for your filter manager\nconst CustomFilterManagerContainer = styled.div`\n  .filter-manager {\n    /* Add your custom styles here */\n  }\n\n  .filter-manager-title {\n    /* Custom title styling */\n  }\n\n  .add-filter-button {\n    background-color: ${(props) =>\n      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\ntype CustomFilterManagerProps = {\n  mapId: string;\n  showDeleteDataset?: boolean;\n};\n\ntype FilterListProps = {\n  filters: Filter[];\n  datasets: Datasets;\n  layers: Layer[];\n  filtersByIndex: {\n    filter: Filter;\n    idx: number;\n  }[];\n  isAnyFilterAnimating: boolean;\n  keplerActions: KeplerActions;\n};\n\n// Based on Kepler.gl's filterPanelCallbacks pattern\ntype FilterPanelCallbacks = Record<\n  string,\n  {\n    removeFilter: () => void;\n    setFilterView: (view: string) => void;\n    toggleAnimation: () => void;\n    toggleFilterFeature: () => void;\n  }\n>;\n\n// Filter List Component\nconst FilterList: React.FC<FilterListProps> = ({\n  filtersByIndex,\n  filters,\n  datasets,\n  layers,\n  isAnyFilterAnimating,\n  keplerActions,\n}) => {\n  const {\n    removeFilter,\n    setFilterView,\n    toggleFilterAnimation,\n    toggleFilterFeature,\n  } = keplerActions.visStateActions;\n\n  const filterPanelProps = useMemo(() => {\n    return filtersByIndex.reduce(\n      (accu, {filter, idx}) => ({\n        ...accu,\n        [filter.id]: {\n          removeFilter: () => removeFilter(idx),\n          setFilterView: (view: string) =>\n            setFilterView(\n              idx,\n              isSideFilter(filter)\n                ? FILTER_VIEW_TYPES.enlarged\n                : FILTER_VIEW_TYPES.side,\n            ),\n          toggleAnimation: () => toggleFilterAnimation(idx),\n          toggleFilterFeature: () => toggleFilterFeature(idx),\n        },\n      }),\n      {} as FilterPanelCallbacks,\n    );\n  }, [\n    filtersByIndex,\n    removeFilter,\n    setFilterView,\n    toggleFilterAnimation,\n    toggleFilterFeature,\n  ]);\n\n  return (\n    <>\n      {[...filtersByIndex].reverse().map(({filter, idx}) => (\n        <FilterPanel\n          key={`${filter.id}-${idx}`}\n          idx={idx}\n          filters={filters}\n          filter={filter}\n          datasets={datasets}\n          layers={layers}\n          isAnyFilterAnimating={isAnyFilterAnimating}\n          removeFilter={filterPanelProps[filter.id]?.removeFilter}\n          setFilterView={filterPanelProps[filter.id]?.setFilterView}\n          toggleAnimation={filterPanelProps[filter.id]?.toggleAnimation}\n          toggleFilterFeature={filterPanelProps[filter.id]?.toggleFilterFeature}\n          {...keplerActions.visStateActions}\n        />\n      ))}\n    </>\n  );\n};\n\n// Custom hook for filter actions\nfunction useCustomFilterActions(keplerActions: KeplerActions) {\n  const {addFilter} = keplerActions.visStateActions;\n\n  const onClickAddFilter = useCallback(\n    (dataset: string) => addFilter(dataset),\n    [addFilter],\n  );\n\n  return {\n    onClickAddFilter,\n  };\n}\n\n// Main Custom Filter Manager Component\nexport const CustomFilterManager: React.FC<CustomFilterManagerProps> = ({\n  mapId,\n}) => {\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const intl = useIntl();\n\n  const {onClickAddFilter} = useCustomFilterActions(keplerActions);\n\n  if (!keplerState || !keplerActions) {\n    return null;\n  }\n\n  const {filters, datasets, layers} = keplerState.visState;\n  const isAnyFilterAnimating = Object.values(filters).some(\n    (f) => f.isAnimating,\n  );\n\n  const filtersByIndex = useMemo(\n    () =>\n      filters.map((f, idx) => ({\n        filter: f,\n        idx,\n      })),\n    [filters],\n  );\n\n  return (\n    <CustomFilterManagerContainer>\n      <div className=\"filter-manager\">\n        <SidePanelSection>\n          <PanelTitle\n            className=\"filter-manager-title\"\n            title={intl.formatMessage({\n              id: filterPanelMetadata?.label || 'Filters',\n            })}\n          >\n            <AddFilterButton datasets={datasets} onAdd={onClickAddFilter} />\n          </PanelTitle>\n        </SidePanelSection>\n\n        <SidePanelSection>\n          <FilterList\n            filtersByIndex={filtersByIndex}\n            filters={filters}\n            datasets={datasets}\n            layers={layers}\n            isAnyFilterAnimating={isAnyFilterAnimating}\n            keplerActions={keplerActions}\n          />\n        </SidePanelSection>\n      </div>\n    </CustomFilterManagerContainer>\n  );\n};\n\nexport default CustomFilterManager;\n"]}

package/dist/components/CustomInteractionManager.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CustomInteractionManager: React.FC<{
+    mapId: string;
+}>;
+//# sourceMappingURL=CustomInteractionManager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomInteractionManager.d.ts","sourceRoot":"","sources":["../../src/components/CustomInteractionManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AA4FzC,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CA0E9D,CAAC"}

package/dist/components/CustomInteractionManager.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Switch, Checkbox, useTheme } from '@sqlrooms/ui';
+import { FormattedMessage } from '@kepler.gl/localization';
+import { useKeplerStateActions } from '../hooks/useKeplerStateActions';
+import { CustomTooltipConfig } from './CustomTooltipConfig';
+const SimpleInteractionPanel = ({ configId, config, label, handleConfigChange }) => {
+    const toggleEnableConfig = useCallback(() => {
+        handleConfigChange(configId, {
+            enabled: !config.enabled,
+        });
+    }, [configId, config.enabled]);
+    return (_jsxs("div", { className: "flex items-center justify-between p-2", children: [_jsx("div", { className: "text-muted-foreground text-sm font-medium", children: label }), _jsx(Switch, { checked: config.enabled, onCheckedChange: toggleEnableConfig, className: "data-[state=checked]:bg-primary data-[state=unchecked]:bg-secondary" })] }));
+};
+const TooltipPanel = ({ tooltipConfig, coordinateConfig, datasets, isDark, handleConfigChange, handleCoordinateToggle, setColumnDisplayFormat, }) => {
+    if (!tooltipConfig)
+        return null;
+    const handleTooltipConfigChange = useCallback((newConfig) => {
+        handleConfigChange('tooltip', { config: newConfig });
+    }, [handleConfigChange]);
+    return (_jsxs("div", { children: [_jsx(SimpleInteractionPanel, { configId: "tooltip", config: tooltipConfig, label: "Tooltip", handleConfigChange: handleConfigChange }), tooltipConfig.enabled && (_jsxs("div", { className: "pl-4 pr-2", children: [_jsxs("div", { className: "flex items-center space-x-2 py-2", children: [_jsx(Checkbox, { checked: coordinateConfig?.enabled || false, onCheckedChange: handleCoordinateToggle, className: "shadow-none" }), _jsxs("span", { className: "text-muted-foreground text-xs", children: ["Show ", _jsx(FormattedMessage, { id: "interactions.coordinate" })] })] }), _jsx(CustomTooltipConfig, { datasets: datasets, config: tooltipConfig.config, onChange: handleTooltipConfigChange, onDisplayFormatChange: setColumnDisplayFormat, isDark: isDark })] }))] }));
+};
+export const CustomInteractionManager = ({ mapId, }) => {
+    const { keplerActions, keplerState } = useKeplerStateActions({ mapId });
+    const { theme } = useTheme();
+    // Determine if dark mode is active
+    const isDark = theme === 'dark' ||
+        (theme === 'system' &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches);
+    const interactionConfig = keplerState?.visState.interactionConfig || {};
+    const datasets = keplerState?.visState.datasets || {};
+    const { interactionConfigChange, setColumnDisplayFormat } = keplerActions.visStateActions;
+    const handleConfigChange = useCallback((configId, newConfig) => {
+        const currentConfig = interactionConfig[configId];
+        if (currentConfig && typeof currentConfig === 'object') {
+            interactionConfigChange({
+                ...currentConfig,
+                ...newConfig,
+            });
+        }
+    }, [interactionConfig, interactionConfigChange]);
+    // Handle coordinate display toggle
+    const handleCoordinateToggle = useCallback(() => {
+        const coordinateConfig = interactionConfig.coordinate;
+        if (coordinateConfig && typeof coordinateConfig === 'object') {
+            interactionConfigChange({
+                ...coordinateConfig,
+                enabled: !coordinateConfig.enabled,
+            });
+        }
+    }, [interactionConfig.coordinate, interactionConfigChange]);
+    return (_jsx("div", { className: "interaction-manager", children: _jsxs("div", { className: "space-y-2", children: [_jsx(TooltipPanel, { tooltipConfig: interactionConfig.tooltip, coordinateConfig: interactionConfig.coordinate, datasets: datasets, isDark: isDark, handleConfigChange: handleConfigChange, handleCoordinateToggle: handleCoordinateToggle, setColumnDisplayFormat: setColumnDisplayFormat }), interactionConfig.geocoder && (_jsx(SimpleInteractionPanel, { configId: "geocoder", config: interactionConfig.geocoder, label: "Location search", handleConfigChange: handleConfigChange })), interactionConfig.brush && (_jsx(SimpleInteractionPanel, { configId: "brush", config: interactionConfig.brush, label: "Brush filter", handleConfigChange: handleConfigChange }))] }) }));
+};
+//# sourceMappingURL=CustomInteractionManager.js.map

package/dist/components/CustomInteractionManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomInteractionManager.js","sourceRoot":"","sources":["../../src/components/CustomInteractionManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback} 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  handleConfigChange: (configId: string, newConfig: any) => void;\n}> = ({configId, config, label, handleConfigChange}) => {\n  const toggleEnableConfig = useCallback(() => {\n    handleConfigChange(configId, {\n      enabled: !config.enabled,\n    });\n  }, [configId, config.enabled]);\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  if (!tooltipConfig) return null;\n\n  const handleTooltipConfigChange = useCallback(\n    (newConfig: any) => {\n      handleConfigChange('tooltip', {config: newConfig});\n    },\n    [handleConfigChange],\n  );\n\n  return (\n    <div>\n      <SimpleInteractionPanel\n        configId=\"tooltip\"\n        config={tooltipConfig}\n        label=\"Tooltip\"\n        handleConfigChange={handleConfigChange}\n      />\n      {tooltipConfig.enabled && (\n        <div className=\"pl-4 pr-2\">\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 interactionConfig: Partial<InteractionConfig> =\n    keplerState?.visState.interactionConfig || {};\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            handleConfigChange={handleConfigChange}\n          />\n        )}\n        {interactionConfig.brush && (\n          <SimpleInteractionPanel\n            configId=\"brush\"\n            config={interactionConfig.brush}\n            label=\"Brush filter\"\n            handleConfigChange={handleConfigChange}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/components/CustomLayerManager.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type CustomLayerManagerProps = {
+    mapId: string;
+    showDeleteDataset?: boolean;
+};
+export declare const CustomLayerManager: React.FC<CustomLayerManagerProps>;
+export default CustomLayerManager;
+//# sourceMappingURL=CustomLayerManager.d.ts.map

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

@@ -0,0 +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;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/CustomLayerManager.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { LayerListFactory, DatasetLayerGroupFactory, PanelTitleFactory, AddLayerButtonFactory, SidePanelSection, } from '@kepler.gl/components';
+import { PANEL_VIEW_TOGGLES, SIDEBAR_PANELS } from '@kepler.gl/constants';
+import { getApplicationConfig } from '@kepler.gl/utils';
+import { KeplerInjector } from './KeplerInjector';
+import { useKeplerStateActions, } from '../hooks/useKeplerStateActions';
+// Get the kepler.gl components through the injector
+const LayerList = KeplerInjector.get(LayerListFactory);
+const DatasetLayerGroup = KeplerInjector.get(DatasetLayerGroupFactory);
+const PanelTitle = KeplerInjector.get(PanelTitleFactory);
+const AddLayerButton = KeplerInjector.get(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; 
+    border: 0px;
+    height: 28px;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  .layer__title__type {
+    display: none !important;
+  }
+
+  .layer-panel__header {
+    height: 36px;
+  }
+
+  .layer__title {
+    min-width: 0;
+  }
+
+  .layer__title > div {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .layer__title__editor {
+    width: 100%;
+    min-width: 0;
+    flex: 1;
+  }
+}
+`;
+// Custom hook for side panel actions
+function useCustomSidePanelActions(keplerActions) {
+    const { openDeleteModal, toggleModal } = keplerActions.uiStateActions;
+    const { updateTableColor } = keplerActions.visStateActions;
+    const onRemoveDataset = useCallback((dataId) => openDeleteModal(dataId), [openDeleteModal]);
+    const onShowAddDataModal = useCallback(() => toggleModal('addData'), [toggleModal]);
+    const onUpdateTableColor = useCallback((dataId, newColor) => updateTableColor(dataId, newColor), [updateTableColor]);
+    return {
+        onRemoveDataset,
+        onShowAddDataModal,
+        onUpdateTableColor,
+    };
+}
+// Main Custom Layer Manager Component
+export const CustomLayerManager = ({ mapId, showDeleteDataset = true, }) => {
+    const { keplerActions, keplerState } = useKeplerStateActions({ mapId });
+    const intl = useIntl();
+    const { onRemoveDataset, onUpdateTableColor } = useCustomSidePanelActions(keplerActions);
+    const { addLayer } = keplerActions.visStateActions;
+    const onAddLayer = useCallback((dataset) => {
+        addLayer(undefined, dataset);
+    }, [addLayer]);
+    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(() => {
+        let filteredClasses = keplerState?.visState.layerClasses || {};
+        if (!enableRasterTileLayer && 'rasterTile' in filteredClasses) {
+            const { rasterTile: _rasterTile, ...rest } = filteredClasses;
+            filteredClasses = rest;
+        }
+        if (!enableWMSLayer && 'wms' in filteredClasses) {
+            const { wms: _wms, ...rest } = filteredClasses;
+            filteredClasses = rest;
+        }
+        return filteredClasses;
+    }, [
+        enableRasterTileLayer,
+        enableWMSLayer,
+        keplerState?.visState.layerClasses,
+    ]);
+    if (!keplerState || !keplerActions) {
+        return null;
+    }
+    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 })) })] }) }));
+};
+export default CustomLayerManager;
+//# sourceMappingURL=CustomLayerManager.js.map

package/dist/components/CustomLayerManager.js.map

@@ -0,0 +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 {KeplerInjector} 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 = KeplerInjector.get(LayerListFactory);\nconst DatasetLayerGroup = KeplerInjector.get(DatasetLayerGroupFactory);\nconst PanelTitle = KeplerInjector.get(PanelTitleFactory);\nconst AddLayerButton = KeplerInjector.get(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\nexport default CustomLayerManager;\n"]}

package/dist/components/CustomMapManager.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type CustomMapManagerProps = {
+    mapId: string;
+};
+export declare const CustomMapManager: React.FC<CustomMapManagerProps>;
+export default CustomMapManager;
+//# sourceMappingURL=CustomMapManager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMapManager.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAkElD,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAqGF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkF5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/CustomMapManager.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { LayerGroupSelectorFactory, PanelTitleFactory, SidePanelSection, Button, Icons, } from '@kepler.gl/components';
+import { SIDEBAR_PANELS, ADD_MAP_STYLE_ID } from '@kepler.gl/constants';
+import { KeplerInjector } from './KeplerInjector';
+import { useKeplerStateActions, } from '../hooks/useKeplerStateActions';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuTrigger, } from '@sqlrooms/ui';
+import { ChevronDown } from 'lucide-react';
+// Get the kepler.gl components through the injector
+const LayerGroupSelector = KeplerInjector.get(LayerGroupSelectorFactory);
+const PanelTitle = KeplerInjector.get(PanelTitleFactory);
+// Import icons from kepler.gl
+const { Add, Trash } = Icons;
+const mapPanelMetadata = SIDEBAR_PANELS.find((p) => p.id === 'map');
+// Custom styled components for the map manager
+const CustomMapManagerContainer = styled.div `
+  .map-style-panel {
+    /* Add your custom styles here */
+  }
+
+  .map-manager-title {
+    /* Custom title styling */
+  }
+
+  .add-map-style-button {
+    background-color: ${(props) => props.theme.sidePanelBg || props.theme.panelBackground || '#fff'};
+    color: ${(props) => props.theme.activeColor || props.theme.textColorHl || '#2563EB'};
+    border: 0px;
+    height: 28px;
+    font-weight: 500;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .layer-group__header {
+    display: none;
+  }
+`;
+// Custom hook for map style actions
+function useCustomMapActions(keplerActions) {
+    const { toggleModal } = keplerActions.uiStateActions;
+    const { mapStyleChange, removeCustomMapStyle } = keplerActions.mapStyleActions;
+    const onShowAddMapStyleModal = useCallback(() => toggleModal(ADD_MAP_STYLE_ID), [toggleModal]);
+    const onMapStyleChange = useCallback((styleType) => mapStyleChange(styleType), [mapStyleChange]);
+    const onRemoveCustomMapStyle = useCallback((styleId) => removeCustomMapStyle({ id: styleId }), [removeCustomMapStyle]);
+    return {
+        onShowAddMapStyleModal,
+        onMapStyleChange,
+        onRemoveCustomMapStyle,
+    };
+}
+// Custom Map Style Dropdown Component
+const MapStyleDropdown = ({ mapStyle, onChange, customMapStylesActions }) => {
+    const { mapStyles, styleType } = mapStyle;
+    const currentStyle = mapStyles[styleType];
+    const handleStyleSelect = (styleId) => onChange(styleId);
+    return (_jsx("div", { className: "w-full", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, className: "w-full", children: _jsxs("div", { className: "border-primary-foreground bg-muted flex min-h-[40px] w-full cursor-pointer items-center justify-between rounded border px-3 py-2 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { className: "h-6 w-6 rounded-sm object-cover", src: currentStyle?.icon || '', alt: currentStyle?.label || 'Map Style' }), _jsx("span", { className: "text-sm font-medium dark:text-white", children: currentStyle?.label || 'Select Style' })] }), _jsx(ChevronDown, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" })] }) }), _jsx(DropdownMenuContent, { className: "max-h-64 w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto bg-white dark:bg-gray-700", children: Object.values(mapStyles).map((style) => (_jsxs(DropdownMenuCheckboxItem, { onClick: () => handleStyleSelect(style.id), className: "flex cursor-pointer items-center gap-2 bg-white p-2 text-gray-900 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600", children: [_jsx("img", { src: style.icon || '', alt: style.label || 'Untitled', className: "h-6 w-6 flex-shrink-0 rounded-sm object-cover" }), _jsx("span", { className: "flex-1 truncate text-sm", children: style.label || 'Untitled' }), style.custom && customMapStylesActions?.[style.id] && (_jsx("div", { className: "flex items-center", onClick: (e) => e.stopPropagation(), children: customMapStylesActions[style.id].map((action) => (_jsx("button", { onClick: (e) => {
+                                        e.stopPropagation();
+                                        action.onClick();
+                                    }, className: "rounded bg-white p-1 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700", title: action.tooltip, children: _jsx(action.IconComponent, { height: "16px" }) }, action.id))) }))] }, style.id))) })] }) }));
+};
+// Main Custom Map Manager Component
+export const CustomMapManager = ({ mapId }) => {
+    const { keplerActions, keplerState } = useKeplerStateActions({ mapId });
+    const intl = useIntl();
+    const { onShowAddMapStyleModal, onMapStyleChange, onRemoveCustomMapStyle } = useCustomMapActions(keplerActions);
+    if (!keplerState || !keplerActions) {
+        return null;
+    }
+    const { mapStyle } = keplerState;
+    const currentStyle = mapStyle.mapStyles[mapStyle.styleType] || {};
+    const editableLayers = currentStyle.layerGroups || [];
+    // Custom map styles actions (for delete functionality)
+    const customMapStylesActions = useMemo(() => {
+        const actionsPerCustomStyle = {};
+        Object.values(mapStyle.mapStyles)
+            .filter((style) => Boolean(style.custom))
+            .forEach((style) => {
+            actionsPerCustomStyle[style.id] = [
+                {
+                    id: `remove-map-style-${style.id}`,
+                    IconComponent: Trash,
+                    tooltip: 'tooltip.removeBaseMapStyle',
+                    onClick: () => onRemoveCustomMapStyle(style.id),
+                },
+            ];
+        });
+        return actionsPerCustomStyle;
+    }, [mapStyle.mapStyles, onRemoveCustomMapStyle]);
+    return (_jsx(CustomMapManagerContainer, { children: _jsxs("div", { className: "map-style-panel", children: [_jsx(SidePanelSection, { children: _jsx(PanelTitle, { className: "map-manager-title", title: intl.formatMessage({
+                            id: mapPanelMetadata?.label || 'Base map',
+                        }), children: _jsxs(Button, { className: "add-map-style-button", onClick: onShowAddMapStyleModal, children: [_jsx(Add, { height: "12px" }), _jsx("span", { children: intl.formatMessage({ id: 'mapManager.addMapStyle' }) })] }) }) }), _jsxs(SidePanelSection, { children: [_jsx("div", { className: "mb-1", children: _jsx(MapStyleDropdown, { mapStyle: mapStyle, onChange: onMapStyleChange, customMapStylesActions: customMapStylesActions }) }), editableLayers.length ? (_jsx(LayerGroupSelector, { layers: mapStyle.visibleLayerGroups, editableLayers: editableLayers, topLayers: mapStyle.topLayerGroups, onChange: keplerActions.mapStyleActions.mapConfigChange, threeDBuildingColor: mapStyle.threeDBuildingColor, on3dBuildingColorChange: keplerActions.mapStyleActions.set3dBuildingColor, backgroundColor: mapStyle.backgroundColor, onBackgroundColorChange: keplerActions.mapStyleActions.setBackgroundColor })) : null] })] }) }));
+};
+export default CustomMapManager;
+//# sourceMappingURL=CustomMapManager.js.map

package/dist/components/CustomMapManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMapManager.js","sourceRoot":"","sources":["../../src/components/CustomMapManager.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  LayerGroupSelectorFactory,\n  PanelTitleFactory,\n  SidePanelSection,\n  Button,\n  Icons,\n} from '@kepler.gl/components';\nimport {SIDEBAR_PANELS, ADD_MAP_STYLE_ID} from '@kepler.gl/constants';\nimport {MapStyle} from '@kepler.gl/reducers';\n\nimport {KeplerInjector} from './KeplerInjector';\nimport {\n  KeplerActions,\n  useKeplerStateActions,\n} from '../hooks/useKeplerStateActions';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuCheckboxItem,\n  DropdownMenuTrigger,\n} from '@sqlrooms/ui';\nimport {ChevronDown} from 'lucide-react';\n\n// Get the kepler.gl components through the injector\nconst LayerGroupSelector = KeplerInjector.get(LayerGroupSelectorFactory);\nconst PanelTitle = KeplerInjector.get(PanelTitleFactory);\n\n// Import icons from kepler.gl\nconst {Add, Trash} = Icons;\n\nconst mapPanelMetadata = SIDEBAR_PANELS.find((p) => p.id === 'map');\n\n// Custom styled components for the map manager\nconst CustomMapManagerContainer = styled.div<{isOpen?: boolean}>`\n  .map-style-panel {\n    /* Add your custom styles here */\n  }\n\n  .map-manager-title {\n    /* Custom title styling */\n  }\n\n  .add-map-style-button {\n    background-color: ${(props) =>\n      props.theme.sidePanelBg || props.theme.panelBackground || '#fff'};\n    color: ${(props) =>\n      props.theme.activeColor || props.theme.textColorHl || '#2563EB'};\n    border: 0px;\n    height: 28px;\n    font-weight: 500;\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .layer-group__header {\n    display: none;\n  }\n`;\n\ntype CustomMapManagerProps = {\n  mapId: string;\n};\n\n// Custom hook for map style actions\nfunction useCustomMapActions(keplerActions: KeplerActions) {\n  const {toggleModal} = keplerActions.uiStateActions;\n  const {mapStyleChange, removeCustomMapStyle} = keplerActions.mapStyleActions;\n\n  const onShowAddMapStyleModal = useCallback(\n    () => toggleModal(ADD_MAP_STYLE_ID),\n    [toggleModal],\n  );\n\n  const onMapStyleChange = useCallback(\n    (styleType: string) => mapStyleChange(styleType),\n    [mapStyleChange],\n  );\n\n  const onRemoveCustomMapStyle = useCallback(\n    (styleId: string) => removeCustomMapStyle({id: styleId}),\n    [removeCustomMapStyle],\n  );\n\n  return {\n    onShowAddMapStyleModal,\n    onMapStyleChange,\n    onRemoveCustomMapStyle,\n  };\n}\n\n// Custom Map Style Dropdown Component\nconst MapStyleDropdown: React.FC<{\n  mapStyle: MapStyle;\n  onChange: (styleType: string) => void;\n  customMapStylesActions?: any;\n}> = ({mapStyle, onChange, customMapStylesActions}) => {\n  const {mapStyles, styleType} = mapStyle;\n  const currentStyle = mapStyles[styleType];\n\n  const handleStyleSelect = (styleId: string) => onChange(styleId);\n  return (\n    <div className=\"w-full\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild className=\"w-full\">\n          <div className=\"border-primary-foreground bg-muted flex min-h-[40px] w-full cursor-pointer items-center justify-between rounded border px-3 py-2 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700\">\n            <div className=\"flex items-center gap-2\">\n              <img\n                className=\"h-6 w-6 rounded-sm object-cover\"\n                src={currentStyle?.icon || ''}\n                alt={currentStyle?.label || 'Map Style'}\n              />\n              <span className=\"text-sm font-medium dark:text-white\">\n                {currentStyle?.label || 'Select Style'}\n              </span>\n            </div>\n            <ChevronDown className=\"h-4 w-4 text-gray-500 dark:text-gray-400\" />\n          </div>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"max-h-64 w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto bg-white dark:bg-gray-700\">\n          {Object.values(mapStyles).map((style: any) => (\n            <DropdownMenuCheckboxItem\n              key={style.id}\n              onClick={() => handleStyleSelect(style.id)}\n              className=\"flex cursor-pointer items-center gap-2 bg-white p-2 text-gray-900 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600\"\n            >\n              <img\n                src={style.icon || ''}\n                alt={style.label || 'Untitled'}\n                className=\"h-6 w-6 flex-shrink-0 rounded-sm object-cover\"\n              />\n              <span className=\"flex-1 truncate text-sm\">\n                {style.label || 'Untitled'}\n              </span>\n              {style.custom && customMapStylesActions?.[style.id] && (\n                <div\n                  className=\"flex items-center\"\n                  onClick={(e) => e.stopPropagation()}\n                >\n                  {customMapStylesActions[style.id].map((action: any) => (\n                    <button\n                      key={action.id}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        action.onClick();\n                      }}\n                      className=\"rounded bg-white p-1 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700\"\n                      title={action.tooltip}\n                    >\n                      <action.IconComponent height=\"16px\" />\n                    </button>\n                  ))}\n                </div>\n              )}\n            </DropdownMenuCheckboxItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n};\n\n// Main Custom Map Manager Component\nexport const CustomMapManager: React.FC<CustomMapManagerProps> = ({mapId}) => {\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const intl = useIntl();\n\n  const {onShowAddMapStyleModal, onMapStyleChange, onRemoveCustomMapStyle} =\n    useCustomMapActions(keplerActions);\n\n  if (!keplerState || !keplerActions) {\n    return null;\n  }\n\n  const {mapStyle} = keplerState;\n  const currentStyle = mapStyle.mapStyles[mapStyle.styleType] || {};\n  const editableLayers = (currentStyle as any).layerGroups || [];\n\n  // Custom map styles actions (for delete functionality)\n  const customMapStylesActions = useMemo(() => {\n    const actionsPerCustomStyle: any = {};\n    Object.values(mapStyle.mapStyles)\n      .filter((style: any) => Boolean(style.custom))\n      .forEach((style: any) => {\n        actionsPerCustomStyle[style.id] = [\n          {\n            id: `remove-map-style-${style.id}`,\n            IconComponent: Trash,\n            tooltip: 'tooltip.removeBaseMapStyle',\n            onClick: () => onRemoveCustomMapStyle(style.id),\n          },\n        ];\n      });\n    return actionsPerCustomStyle;\n  }, [mapStyle.mapStyles, onRemoveCustomMapStyle]);\n\n  return (\n    <CustomMapManagerContainer>\n      <div className=\"map-style-panel\">\n        <SidePanelSection>\n          <PanelTitle\n            className=\"map-manager-title\"\n            title={intl.formatMessage({\n              id: mapPanelMetadata?.label || 'Base map',\n            })}\n          >\n            <Button\n              className=\"add-map-style-button\"\n              onClick={onShowAddMapStyleModal}\n            >\n              <Add height=\"12px\" />\n              <span>{intl.formatMessage({id: 'mapManager.addMapStyle'})}</span>\n            </Button>\n          </PanelTitle>\n        </SidePanelSection>\n\n        <SidePanelSection>\n          <div className=\"mb-1\">\n            <MapStyleDropdown\n              mapStyle={mapStyle}\n              onChange={onMapStyleChange}\n              customMapStylesActions={customMapStylesActions}\n            />\n          </div>\n\n          {editableLayers.length ? (\n            <LayerGroupSelector\n              layers={mapStyle.visibleLayerGroups}\n              editableLayers={editableLayers}\n              topLayers={mapStyle.topLayerGroups}\n              onChange={keplerActions.mapStyleActions.mapConfigChange}\n              threeDBuildingColor={mapStyle.threeDBuildingColor}\n              on3dBuildingColorChange={\n                keplerActions.mapStyleActions.set3dBuildingColor\n              }\n              backgroundColor={mapStyle.backgroundColor}\n              onBackgroundColorChange={\n                keplerActions.mapStyleActions.setBackgroundColor\n              }\n            />\n          ) : null}\n        </SidePanelSection>\n      </div>\n    </CustomMapManagerContainer>\n  );\n};\n\nexport default CustomMapManager;\n"]}

package/dist/components/CustomTooltipConfig.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Datasets } from '@kepler.gl/table';
+type CustomTooltipConfigProps = {
+    config: {
+        fieldsToShow: {
+            [key: string]: {
+                name: string;
+                format: string | null;
+            }[];
+        };
+        compareMode: boolean;
+        compareType: string | null;
+    };
+    onChange: (config: {
+        fieldsToShow: {
+            [key: string]: {
+                name: string;
+                format: string | null;
+            }[];
+        };
+        compareMode: boolean;
+        compareType: string | null;
+    }) => void;
+    datasets: Datasets;
+    onDisplayFormatChange: (dataId: string, column: string, displayFormat: string) => void;
+    isDark: boolean;
+};
+export declare const CustomTooltipConfig: React.FC<CustomTooltipConfigProps>;
+export {};
+//# sourceMappingURL=CustomTooltipConfig.d.ts.map