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

package/dist/components/CustomSourceDataSelector.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelLabel, SidePanelSection, SourceDataSelectorFactory, } from '@kepler.gl/components';
+import { FormattedMessage } from '@kepler.gl/localization';
+import { Button, cn } from '@sqlrooms/ui';
+import { useCallback, useMemo, useState } from 'react';
+import { useStoreWithKepler } from '../KeplerSlice';
+import { buildKeplerTableSourceOptions, } from '../keplerTableSelection';
+import { KeplerTableSourceSelector } from './KeplerTableSourceSelector';
+function getSelectedDatasetId(value) {
+    if (value === null) {
+        return undefined;
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return undefined;
+        }
+        return getSelectedDatasetId(value[0]);
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number') {
+        return String(value);
+    }
+    if (typeof value === 'boolean') {
+        return String(value);
+    }
+    if (typeof value === 'object') {
+        const option = value;
+        if (typeof option.value === 'string') {
+            return option.value;
+        }
+        if (typeof option.id === 'string') {
+            return option.id;
+        }
+    }
+    return undefined;
+}
+/**
+ * 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 function CustomSourceDataSelectorFactory(_DataSourceSelectorContent) {
+    const SourceDataSelector = ({ dataId, datasets, disabled, onSelect, defaultValue = 'Select A Dataset', className, id: layerId, }) => {
+        const [isLoadingTable, setIsLoadingTable] = useState(false);
+        const dbTables = useStoreWithKepler((state) => state.db.tables);
+        const tableSelection = useStoreWithKepler((state) => state.kepler.tableSelection);
+        const addTableToMap = useStoreWithKepler((state) => state.kepler.addTableToMap);
+        const keplerMap = useStoreWithKepler((state) => state.kepler.map);
+        const mapId = useMemo(() => {
+            if (!layerId) {
+                return undefined;
+            }
+            for (const [candidateMapId, mapState] of Object.entries(keplerMap)) {
+                const hasLayer = mapState?.visState?.layers?.some((layer) => layer.id === layerId);
+                if (hasLayer) {
+                    return candidateMapId;
+                }
+            }
+            return undefined;
+        }, [keplerMap, layerId]);
+        const mapDatasets = useMemo(() => {
+            if (!mapId) {
+                return undefined;
+            }
+            return keplerMap[mapId]?.visState.datasets;
+        }, [keplerMap, mapId]);
+        const loadedDatasetIds = useMemo(() => Object.keys(mapDatasets ?? datasets), [datasets, mapDatasets]);
+        const options = useMemo(() => {
+            return buildKeplerTableSourceOptions({
+                dbTables,
+                datasets,
+                includeUnloadedTables: Boolean(layerId && mapId),
+                loadedDatasetIds,
+                tableSelection,
+            });
+        }, [datasets, dbTables, layerId, loadedDatasetIds, mapId, tableSelection]);
+        const handleSelect = useCallback((option) => {
+            if (!layerId || !mapId) {
+                onSelect(option.value);
+                return;
+            }
+            if (option.isLoaded) {
+                onSelect(option.value);
+                return;
+            }
+            setIsLoadingTable(true);
+            void addTableToMap({
+                mapId,
+                tableName: option.value,
+                options: {
+                    autoCreateLayers: false,
+                    centerMap: false,
+                },
+            })
+                .then(() => {
+                onSelect(option.value);
+            })
+                .catch((e) => {
+                console.error('Failed to load layer data source:', e);
+            })
+                .finally(() => {
+                setIsLoadingTable(false);
+            });
+        }, [addTableToMap, layerId, mapId, onSelect]);
+        const selectedValue = getSelectedDatasetId(dataId);
+        const selectedDataset = selectedValue ? datasets[selectedValue] : undefined;
+        const selectedOption = options.find((option) => option.value === selectedValue);
+        const selectedLabel = selectedOption?.label ??
+            selectedDataset?.label ??
+            selectedValue ??
+            defaultValue;
+        const selectedColor = selectedOption?.color ??
+            selectedDataset?.color ?? [143, 149, 161];
+        const isDisabled = Boolean(disabled || isLoadingTable || !options.length);
+        return (_jsxs(SidePanelSection, { className: "data-source-selector", children: [_jsx(PanelLabel, { children: _jsx(FormattedMessage, { id: "misc.dataSource" }) }), _jsx(KeplerTableSourceSelector, { disabled: isDisabled, options: options, popoverClassName: "w-[360px]", searchPlaceholder: "Search", selectedValue: selectedValue, onSelect: handleSelect, renderTrigger: ({ disabled: triggerDisabled, selectedOption }) => {
+                        const triggerColor = selectedOption?.color ?? selectedColor;
+                        const triggerLabel = selectedOption?.label ?? selectedLabel;
+                        return (_jsxs(Button, { type: "button", variant: "secondary", className: cn(className, 'h-9 w-full justify-start gap-2.5 rounded-sm px-3 text-left text-xs font-semibold'), disabled: triggerDisabled, children: [_jsx("span", { className: "h-2.5 w-2.5 shrink-0", style: {
+                                        backgroundColor: `rgb(${triggerColor.join(',')})`,
+                                    } }), _jsx("span", { className: "min-w-0 truncate", children: triggerLabel })] }));
+                    } })] }));
+    };
+    SourceDataSelector.displayName = 'CustomSourceDataSelector';
+    return SourceDataSelector;
+}
+CustomSourceDataSelectorFactory.deps = SourceDataSelectorFactory.deps;
+//# sourceMappingURL=CustomSourceDataSelector.js.map

package/dist/components/CustomSourceDataSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomSourceDataSelector.js","sourceRoot":"","sources":["../../src/components/CustomSourceDataSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PanelLabel,\n  SidePanelSection,\n  SourceDataSelectorFactory,\n  SourceDataSelectorProps,\n} from '@kepler.gl/components';\nimport {FormattedMessage} from '@kepler.gl/localization';\nimport {Button, cn} from '@sqlrooms/ui';\nimport React, {useCallback, useMemo, useState} from 'react';\nimport {useStoreWithKepler} from '../KeplerSlice';\nimport {\n  buildKeplerTableSourceOptions,\n  type KeplerTableSourceOption,\n} from '../keplerTableSelection';\nimport {KeplerTableSourceSelector} from './KeplerTableSourceSelector';\n\ntype SourceDataSelectorValue = Parameters<\n  SourceDataSelectorProps['onSelect']\n>[0];\ntype SourceDataSelectorContent = React.ComponentType<SourceDataSelectorProps>;\ntype CustomSourceDataSelectorProps = SourceDataSelectorProps & {\n  id?: string;\n};\n\nfunction getSelectedDatasetId(\n  value: SourceDataSelectorValue,\n): string | undefined {\n  if (value === null) {\n    return undefined;\n  }\n\n  if (Array.isArray(value)) {\n    if (value.length === 0) {\n      return undefined;\n    }\n    return getSelectedDatasetId(value[0] as SourceDataSelectorValue);\n  }\n\n  if (typeof value === 'string') {\n    return value;\n  }\n\n  if (typeof value === 'number') {\n    return String(value);\n  }\n\n  if (typeof value === 'boolean') {\n    return String(value);\n  }\n\n  if (typeof value === 'object') {\n    const option = value as {id?: unknown; value?: unknown};\n    if (typeof option.value === 'string') {\n      return option.value;\n    }\n    if (typeof option.id === 'string') {\n      return option.id;\n    }\n  }\n\n  return undefined;\n}\n\n/**\n * Kepler uses the same SourceDataSelector in layer config and filter config.\n * Layer config passes a layer id, so only that version includes unloaded\n * SQLRooms table options. Filter selectors use the same UI with loaded Kepler\n * datasets only because a filter needs a loaded dataset to expose fields.\n */\nexport function CustomSourceDataSelectorFactory(\n  _DataSourceSelectorContent: SourceDataSelectorContent,\n): React.FC<CustomSourceDataSelectorProps> {\n  const SourceDataSelector: React.FC<CustomSourceDataSelectorProps> = ({\n    dataId,\n    datasets,\n    disabled,\n    onSelect,\n    defaultValue = 'Select A Dataset',\n    className,\n    id: layerId,\n  }) => {\n    const [isLoadingTable, setIsLoadingTable] = useState(false);\n    const dbTables = useStoreWithKepler((state) => state.db.tables);\n    const tableSelection = useStoreWithKepler(\n      (state) => state.kepler.tableSelection,\n    );\n    const addTableToMap = useStoreWithKepler(\n      (state) => state.kepler.addTableToMap,\n    );\n    const keplerMap = useStoreWithKepler((state) => state.kepler.map);\n    const mapId = useMemo(() => {\n      if (!layerId) {\n        return undefined;\n      }\n\n      for (const [candidateMapId, mapState] of Object.entries(keplerMap)) {\n        const hasLayer = mapState?.visState?.layers?.some(\n          (layer: {id?: string}) => layer.id === layerId,\n        );\n        if (hasLayer) {\n          return candidateMapId;\n        }\n      }\n\n      return undefined;\n    }, [keplerMap, layerId]);\n    const mapDatasets = useMemo(() => {\n      if (!mapId) {\n        return undefined;\n      }\n\n      return keplerMap[mapId]?.visState.datasets;\n    }, [keplerMap, mapId]);\n    const loadedDatasetIds = useMemo(\n      () => Object.keys(mapDatasets ?? datasets),\n      [datasets, mapDatasets],\n    );\n\n    const options = useMemo(() => {\n      return buildKeplerTableSourceOptions({\n        dbTables,\n        datasets,\n        includeUnloadedTables: Boolean(layerId && mapId),\n        loadedDatasetIds,\n        tableSelection,\n      });\n    }, [datasets, dbTables, layerId, loadedDatasetIds, mapId, tableSelection]);\n\n    const handleSelect = useCallback(\n      (option: KeplerTableSourceOption) => {\n        if (!layerId || !mapId) {\n          onSelect(option.value);\n          return;\n        }\n\n        if (option.isLoaded) {\n          onSelect(option.value);\n          return;\n        }\n\n        setIsLoadingTable(true);\n        void addTableToMap({\n          mapId,\n          tableName: option.value,\n          options: {\n            autoCreateLayers: false,\n            centerMap: false,\n          },\n        })\n          .then(() => {\n            onSelect(option.value);\n          })\n          .catch((e) => {\n            console.error('Failed to load layer data source:', e);\n          })\n          .finally(() => {\n            setIsLoadingTable(false);\n          });\n      },\n      [addTableToMap, layerId, mapId, onSelect],\n    );\n\n    const selectedValue = getSelectedDatasetId(dataId);\n    const selectedDataset = selectedValue ? datasets[selectedValue] : undefined;\n    const selectedOption = options.find(\n      (option) => option.value === selectedValue,\n    );\n    const selectedLabel =\n      selectedOption?.label ??\n      selectedDataset?.label ??\n      selectedValue ??\n      defaultValue;\n    const selectedColor = selectedOption?.color ??\n      selectedDataset?.color ?? [143, 149, 161];\n    const isDisabled = Boolean(disabled || isLoadingTable || !options.length);\n\n    return (\n      <SidePanelSection className=\"data-source-selector\">\n        <PanelLabel>\n          <FormattedMessage id=\"misc.dataSource\" />\n        </PanelLabel>\n        <KeplerTableSourceSelector\n          disabled={isDisabled}\n          options={options}\n          popoverClassName=\"w-[360px]\"\n          searchPlaceholder=\"Search\"\n          selectedValue={selectedValue}\n          onSelect={handleSelect}\n          renderTrigger={({disabled: triggerDisabled, selectedOption}) => {\n            const triggerColor = selectedOption?.color ?? selectedColor;\n            const triggerLabel = selectedOption?.label ?? selectedLabel;\n\n            return (\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                className={cn(\n                  className,\n                  'h-9 w-full justify-start gap-2.5 rounded-sm px-3 text-left text-xs font-semibold',\n                )}\n                disabled={triggerDisabled}\n              >\n                <span\n                  className=\"h-2.5 w-2.5 shrink-0\"\n                  style={{\n                    backgroundColor: `rgb(${triggerColor.join(',')})`,\n                  }}\n                />\n                <span className=\"min-w-0 truncate\">{triggerLabel}</span>\n              </Button>\n            );\n          }}\n        />\n      </SidePanelSection>\n    );\n  };\n\n  SourceDataSelector.displayName = 'CustomSourceDataSelector';\n  return SourceDataSelector;\n}\n\nCustomSourceDataSelectorFactory.deps = SourceDataSelectorFactory.deps;\n"]}

package/dist/components/KeplerAddDataDialog.d.ts

@@ -1,5 +1,4 @@
 import { UseDisclosureReturnValue } from '@sqlrooms/ui';
-import type { KeplerS3BrowserProps } from './KeplerS3Browser';
 export type LoadTileSet = (args: {
     tileset: {
         name: string;
@@ -19,6 +18,6 @@ export type KeplerAddDataDialogProps = {
     loadFiles: (files: FileList | string[]) => Promise<void>;
     method?: AddDataMethods;
     acceptedFormats?: string[];
-} & KeplerS3BrowserProps;
-export declare const KeplerAddDataDialog: ({ addDataModal, loadTileSet, loadFiles, listS3Files, loadS3Files, saveS3Credentials, loadS3Credentials, deleteS3Credentials, s3Browser, method, acceptedFormats, }: KeplerAddDataDialogProps) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const KeplerAddDataDialog: ({ addDataModal, loadTileSet, loadFiles, method, acceptedFormats, }: KeplerAddDataDialogProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=KeplerAddDataDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"KeplerAddDataDialog.d.ts","sourceRoot":"","sources":["../../src/components/KeplerAddDataDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,wBAAwB,EAKzB,MAAM,cAAc,CAAC;AAMtB,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAC;AAe5D,MAAM,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE;IAC/B,OAAO,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAAC,CAAC;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC,KAAK,IAAI,CAAC;AA+BX,oBAAY,cAAc;IACxB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,EAAE,OAAO;CACV;AAgBD,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,EAAE,IAAI,CAAC,wBAAwB,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;IACnE,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B,GAAG,oBAAoB,CAAC;AAEzB,eAAO,MAAM,mBAAmB,GAAI,oKAYjC,wBAAwB,4CAkG1B,CAAC"}
+{"version":3,"file":"KeplerAddDataDialog.d.ts","sourceRoot":"","sources":["../../src/components/KeplerAddDataDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAUL,wBAAwB,EACzB,MAAM,cAAc,CAAC;AAoBtB,MAAM,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE;IAC/B,OAAO,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAAC,CAAC;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC,KAAK,IAAI,CAAC;AA+BX,oBAAY,cAAc;IACxB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,EAAE,OAAO;CACV;AAgBD,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,EAAE,IAAI,CAAC,wBAAwB,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;IACnE,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,oEAYjC,wBAAwB,4CAkG1B,CAAC"}

package/dist/components/KeplerAddDataDialog.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
+import { Icons, LoadTileSetFactory } from '@kepler.gl/components';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Tabs, TabsContent, TabsList, TabsTrigger, } from '@sqlrooms/ui';
-import { LoadTileSetFactory, Icons } from '@kepler.gl/components';
 import { FileDropInput } from './FileDropInput';
 import { getKeplerFactory } from './KeplerInjector';
 import { KeplerProvider } from './KeplerProvider';
-import { KeplerS3Browser } from './KeplerS3Browser';
+// import type {KeplerS3BrowserProps} from './KeplerS3Browser';
 import { useIntl } from 'react-intl';
 const DEFAULT_ACCEPTED_FORMATS = [
     'csv',
     'tsv',
     'parquet',
     'json',
+    'geojson',
     'arrow',
     'shp',
     'kml',
@@ -46,16 +47,26 @@ const ADD_DATA_METHODS = [
     //   value: AddDataMethods.S3,
     // },
 ];
-export const KeplerAddDataDialog = ({ addDataModal, loadTileSet, loadFiles, listS3Files, loadS3Files, saveS3Credentials, loadS3Credentials, deleteS3Credentials, s3Browser, method = AddDataMethods.Upload, acceptedFormats = DEFAULT_ACCEPTED_FORMATS, }) => {
+export const KeplerAddDataDialog = ({ addDataModal, loadTileSet, loadFiles, 
+// listS3Files,
+// loadS3Files,
+// saveS3Credentials,
+// loadS3Credentials,
+// deleteS3Credentials,
+// s3Browser,
+method = AddDataMethods.Upload, acceptedFormats = DEFAULT_ACCEPTED_FORMATS, }) => {
     const [currentMethod, selectCurrentMethod] = useState(method);
     const onFileDrop = useCallback((files) => {
         loadFiles(files);
         addDataModal.onClose();
     }, [loadFiles, addDataModal]);
-    const onLoadS3Files = useCallback(async (...args) => {
-        await loadS3Files(...args);
-        addDataModal.onClose();
-    }, [loadS3Files, addDataModal]);
-    return (_jsx(KeplerProvider, { mapId: '', children: _jsx(Dialog, { open: addDataModal.isOpen, onOpenChange: (isOpen) => !isOpen && addDataModal.onClose(), children: _jsxs(DialogContent, { className: "h-[80vh] max-w-4xl min-w-md grid-rows-[auto_1fr]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add Data" }), _jsx(DialogDescription, { children: "Add data to the project." })] }), _jsxs(Tabs, { defaultValue: currentMethod, className: "flex h-full w-full flex-col gap-4 overflow-auto", onValueChange: (value) => selectCurrentMethod(value), children: [_jsx(TabsList, { className: "flex h-10 items-center justify-start gap-1", children: ADD_DATA_METHODS.map(({ value, label }) => (_jsx(TabsTrigger, { value: value, className: "flex items-center gap-2", children: _jsx("span", { className: "text-muted-foreground", children: label }) }, value))) }), _jsx(TabsContent, { value: AddDataMethods.Upload, className: "h-full w-full data-[state=inactive]:hidden", children: _jsx("div", { className: "h-min-[200px] flex h-full w-full items-center justify-center", children: _jsx(FileDropInput, { onFileDrop: onFileDrop, children: acceptedFormats ? (_jsx("div", { className: "text-muted-foreground flex flex-wrap justify-center gap-2 opacity-80", children: acceptedFormats.map((ext) => (_jsx(Icons.FileType, { ext: ext, height: "50px", fontSize: "9px" }, ext))) })) : null }) }) }), _jsx(TabsContent, { value: AddDataMethods.TileSet, className: "h-full w-full overflow-auto data-[state=inactive]:hidden", children: _jsx(LoadTileSetContent, { loadTileSet: loadTileSet, onClose: addDataModal.onClose }) }), _jsx(TabsContent, { value: AddDataMethods.S3, className: "h-full w-full data-[state=inactive]:hidden", children: _jsx(KeplerS3Browser, { listS3Files: listS3Files, s3Browser: s3Browser, loadS3Files: onLoadS3Files, saveS3Credentials: saveS3Credentials, loadS3Credentials: loadS3Credentials, deleteS3Credentials: deleteS3Credentials }) })] })] }) }) }));
+    // const onLoadS3Files = useCallback(
+    //   async (...args: Parameters<KeplerS3BrowserProps['loadS3Files']>) => {
+    //     await loadS3Files(...args);
+    //     addDataModal.onClose();
+    //   },
+    //   [loadS3Files, addDataModal],
+    // );
+    return (_jsx(KeplerProvider, { mapId: '', children: _jsx(Dialog, { open: addDataModal.isOpen, onOpenChange: (isOpen) => !isOpen && addDataModal.onClose(), children: _jsxs(DialogContent, { className: "h-[80vh] max-w-4xl min-w-md grid-rows-[auto_1fr]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add Data" }), _jsx(DialogDescription, { children: "Add data to the project." })] }), _jsxs(Tabs, { defaultValue: currentMethod, className: "flex h-full w-full flex-col gap-4 overflow-auto", onValueChange: (value) => selectCurrentMethod(value), children: [_jsx(TabsList, { className: "flex h-10 items-center justify-start gap-1", children: ADD_DATA_METHODS.map(({ value, label }) => (_jsx(TabsTrigger, { value: value, className: "flex items-center gap-2", children: _jsx("span", { className: "text-muted-foreground", children: label }) }, value))) }), _jsx(TabsContent, { value: AddDataMethods.Upload, className: "h-full w-full data-[state=inactive]:hidden", children: _jsx("div", { className: "h-min-[200px] flex h-full w-full items-center justify-center", children: _jsx(FileDropInput, { onFileDrop: onFileDrop, children: acceptedFormats ? (_jsx("div", { className: "text-muted-foreground flex flex-wrap justify-center gap-2 opacity-80", children: acceptedFormats.map((ext) => (_jsx(Icons.FileType, { ext: ext, height: "50px", fontSize: "9px" }, ext))) })) : null }) }) }), _jsx(TabsContent, { value: AddDataMethods.TileSet, className: "h-full w-full overflow-auto data-[state=inactive]:hidden", children: _jsx(LoadTileSetContent, { loadTileSet: loadTileSet, onClose: addDataModal.onClose }) })] })] }) }) }));
 };
 //# sourceMappingURL=KeplerAddDataDialog.js.map

package/dist/components/KeplerAddDataDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerAddDataDialog.js","sourceRoot":"","sources":["../../src/components/KeplerAddDataDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useCallback, useMemo, useState} from 'react';\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  UseDisclosureReturnValue,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@sqlrooms/ui';\nimport {LoadTileSetFactory, Icons} from '@kepler.gl/components';\nimport {FileDropInput} from './FileDropInput';\nimport {getKeplerFactory} from './KeplerInjector';\nimport {KeplerProvider} from './KeplerProvider';\nimport {KeplerS3Browser} from './KeplerS3Browser';\nimport type {KeplerS3BrowserProps} from './KeplerS3Browser';\nimport {useIntl} from 'react-intl';\n\nconst DEFAULT_ACCEPTED_FORMATS = [\n  'csv',\n  'tsv',\n  'parquet',\n  'json',\n  'arrow',\n  'shp',\n  'kml',\n];\n\nconst LoadTileSet = getKeplerFactory(LoadTileSetFactory);\n\nexport type LoadTileSet = (args: {\n  tileset: {name: string; type: string; metadata: Record<string, any>};\n  metadata?: Record<string, any>;\n}) => void;\n\nfunction LoadTileSetContent({\n  loadTileSet,\n  onClose,\n}: {\n  loadTileSet: LoadTileSet;\n  onClose?: () => void;\n}) {\n  const intl = useIntl();\n  const onTilesetAdded = useCallback(\n    (\n      tileset: {name: string; type: string; metadata: Record<string, any>},\n      metadata?: Record<string, any>,\n    ) => {\n      loadTileSet({tileset, metadata});\n      onClose?.();\n    },\n    [loadTileSet, onClose],\n  );\n  const meta = useMemo(() => ({}), []); // TODO: add metadata\n  return (\n    <LoadTileSet\n      meta={meta}\n      isAddingDatasets={false}\n      intl={intl}\n      onTilesetAdded={onTilesetAdded}\n    />\n  );\n}\n\nexport enum AddDataMethods {\n  Upload = 'upload',\n  TileSet = 'tileset',\n  S3 = 's3',\n}\nconst ADD_DATA_METHODS = [\n  {\n    label: 'Local File',\n    value: AddDataMethods.Upload,\n  },\n  {\n    label: 'Tiles',\n    value: AddDataMethods.TileSet,\n  },\n  // {\n  //   label: 'S3',\n  //   value: AddDataMethods.S3,\n  // },\n];\n\nexport type KeplerAddDataDialogProps = {\n  addDataModal: Pick<UseDisclosureReturnValue, 'isOpen' | 'onClose'>;\n  loadTileSet: LoadTileSet;\n  loadFiles: (files: FileList | string[]) => Promise<void>;\n  method?: AddDataMethods;\n  acceptedFormats?: string[];\n} & KeplerS3BrowserProps;\n\nexport const KeplerAddDataDialog = ({\n  addDataModal,\n  loadTileSet,\n  loadFiles,\n  listS3Files,\n  loadS3Files,\n  saveS3Credentials,\n  loadS3Credentials,\n  deleteS3Credentials,\n  s3Browser,\n  method = AddDataMethods.Upload,\n  acceptedFormats = DEFAULT_ACCEPTED_FORMATS,\n}: KeplerAddDataDialogProps) => {\n  const [currentMethod, selectCurrentMethod] = useState<AddDataMethods>(method);\n  const onFileDrop = useCallback(\n    (files: FileList) => {\n      loadFiles(files);\n      addDataModal.onClose();\n    },\n    [loadFiles, addDataModal],\n  );\n  const onLoadS3Files = useCallback(\n    async (...args: Parameters<KeplerS3BrowserProps['loadS3Files']>) => {\n      await loadS3Files(...args);\n      addDataModal.onClose();\n    },\n    [loadS3Files, addDataModal],\n  );\n  return (\n    <KeplerProvider mapId={''}>\n      <Dialog\n        open={addDataModal.isOpen}\n        onOpenChange={(isOpen: boolean) => !isOpen && addDataModal.onClose()}\n      >\n        <DialogContent className=\"h-[80vh] max-w-4xl min-w-md grid-rows-[auto_1fr]\">\n          <DialogHeader>\n            <DialogTitle>Add Data</DialogTitle>\n            <DialogDescription>Add data to the project.</DialogDescription>\n          </DialogHeader>\n          <Tabs\n            defaultValue={currentMethod}\n            className=\"flex h-full w-full flex-col gap-4 overflow-auto\"\n            onValueChange={(value) =>\n              selectCurrentMethod(value as AddDataMethods)\n            }\n          >\n            <TabsList className=\"flex h-10 items-center justify-start gap-1\">\n              {ADD_DATA_METHODS.map(({value, label}) => (\n                <TabsTrigger\n                  value={value}\n                  className=\"flex items-center gap-2\"\n                  key={value}\n                >\n                  <span className=\"text-muted-foreground\">{label}</span>\n                </TabsTrigger>\n              ))}\n            </TabsList>\n\n            {/** File Upload */}\n            <TabsContent\n              value={AddDataMethods.Upload}\n              className=\"h-full w-full data-[state=inactive]:hidden\"\n            >\n              <div className=\"h-min-[200px] flex h-full w-full items-center justify-center\">\n                <FileDropInput onFileDrop={onFileDrop}>\n                  {acceptedFormats ? (\n                    <div className=\"text-muted-foreground flex flex-wrap justify-center gap-2 opacity-80\">\n                      {acceptedFormats.map((ext) => (\n                        <Icons.FileType\n                          key={ext}\n                          ext={ext}\n                          height=\"50px\"\n                          fontSize=\"9px\"\n                        />\n                      ))}\n                    </div>\n                  ) : null}\n                </FileDropInput>\n              </div>\n            </TabsContent>\n\n            {/** TileSet*/}\n            <TabsContent\n              value={AddDataMethods.TileSet}\n              className=\"h-full w-full overflow-auto data-[state=inactive]:hidden\"\n            >\n              <LoadTileSetContent\n                loadTileSet={loadTileSet}\n                onClose={addDataModal.onClose}\n              />\n            </TabsContent>\n            {/** S3 */}\n            <TabsContent\n              value={AddDataMethods.S3}\n              className=\"h-full w-full data-[state=inactive]:hidden\"\n            >\n              <KeplerS3Browser\n                listS3Files={listS3Files}\n                s3Browser={s3Browser}\n                loadS3Files={onLoadS3Files}\n                saveS3Credentials={saveS3Credentials}\n                loadS3Credentials={loadS3Credentials}\n                deleteS3Credentials={deleteS3Credentials}\n              />\n            </TabsContent>\n          </Tabs>\n        </DialogContent>\n      </Dialog>\n    </KeplerProvider>\n  );\n};\n"]}
+{"version":3,"file":"KeplerAddDataDialog.js","sourceRoot":"","sources":["../../src/components/KeplerAddDataDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useCallback, useMemo, useState} from 'react';\n\nimport {Icons, LoadTileSetFactory} from '@kepler.gl/components';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  UseDisclosureReturnValue,\n} from '@sqlrooms/ui';\nimport {FileDropInput} from './FileDropInput';\nimport {getKeplerFactory} from './KeplerInjector';\nimport {KeplerProvider} from './KeplerProvider';\n// import type {KeplerS3BrowserProps} from './KeplerS3Browser';\nimport {useIntl} from 'react-intl';\n\nconst DEFAULT_ACCEPTED_FORMATS = [\n  'csv',\n  'tsv',\n  'parquet',\n  'json',\n  'geojson',\n  'arrow',\n  'shp',\n  'kml',\n];\n\nconst LoadTileSet = getKeplerFactory(LoadTileSetFactory);\n\nexport type LoadTileSet = (args: {\n  tileset: {name: string; type: string; metadata: Record<string, any>};\n  metadata?: Record<string, any>;\n}) => void;\n\nfunction LoadTileSetContent({\n  loadTileSet,\n  onClose,\n}: {\n  loadTileSet: LoadTileSet;\n  onClose?: () => void;\n}) {\n  const intl = useIntl();\n  const onTilesetAdded = useCallback(\n    (\n      tileset: {name: string; type: string; metadata: Record<string, any>},\n      metadata?: Record<string, any>,\n    ) => {\n      loadTileSet({tileset, metadata});\n      onClose?.();\n    },\n    [loadTileSet, onClose],\n  );\n  const meta = useMemo(() => ({}), []); // TODO: add metadata\n  return (\n    <LoadTileSet\n      meta={meta}\n      isAddingDatasets={false}\n      intl={intl}\n      onTilesetAdded={onTilesetAdded}\n    />\n  );\n}\n\nexport enum AddDataMethods {\n  Upload = 'upload',\n  TileSet = 'tileset',\n  S3 = 's3',\n}\nconst ADD_DATA_METHODS = [\n  {\n    label: 'Local File',\n    value: AddDataMethods.Upload,\n  },\n  {\n    label: 'Tiles',\n    value: AddDataMethods.TileSet,\n  },\n  // {\n  //   label: 'S3',\n  //   value: AddDataMethods.S3,\n  // },\n];\n\nexport type KeplerAddDataDialogProps = {\n  addDataModal: Pick<UseDisclosureReturnValue, 'isOpen' | 'onClose'>;\n  loadTileSet: LoadTileSet;\n  loadFiles: (files: FileList | string[]) => Promise<void>;\n  method?: AddDataMethods;\n  acceptedFormats?: string[];\n}; //& KeplerS3BrowserProps;\n\nexport const KeplerAddDataDialog = ({\n  addDataModal,\n  loadTileSet,\n  loadFiles,\n  // listS3Files,\n  // loadS3Files,\n  // saveS3Credentials,\n  // loadS3Credentials,\n  // deleteS3Credentials,\n  // s3Browser,\n  method = AddDataMethods.Upload,\n  acceptedFormats = DEFAULT_ACCEPTED_FORMATS,\n}: KeplerAddDataDialogProps) => {\n  const [currentMethod, selectCurrentMethod] = useState<AddDataMethods>(method);\n  const onFileDrop = useCallback(\n    (files: FileList) => {\n      loadFiles(files);\n      addDataModal.onClose();\n    },\n    [loadFiles, addDataModal],\n  );\n  // const onLoadS3Files = useCallback(\n  //   async (...args: Parameters<KeplerS3BrowserProps['loadS3Files']>) => {\n  //     await loadS3Files(...args);\n  //     addDataModal.onClose();\n  //   },\n  //   [loadS3Files, addDataModal],\n  // );\n  return (\n    <KeplerProvider mapId={''}>\n      <Dialog\n        open={addDataModal.isOpen}\n        onOpenChange={(isOpen: boolean) => !isOpen && addDataModal.onClose()}\n      >\n        <DialogContent className=\"h-[80vh] max-w-4xl min-w-md grid-rows-[auto_1fr]\">\n          <DialogHeader>\n            <DialogTitle>Add Data</DialogTitle>\n            <DialogDescription>Add data to the project.</DialogDescription>\n          </DialogHeader>\n          <Tabs\n            defaultValue={currentMethod}\n            className=\"flex h-full w-full flex-col gap-4 overflow-auto\"\n            onValueChange={(value) =>\n              selectCurrentMethod(value as AddDataMethods)\n            }\n          >\n            <TabsList className=\"flex h-10 items-center justify-start gap-1\">\n              {ADD_DATA_METHODS.map(({value, label}) => (\n                <TabsTrigger\n                  value={value}\n                  className=\"flex items-center gap-2\"\n                  key={value}\n                >\n                  <span className=\"text-muted-foreground\">{label}</span>\n                </TabsTrigger>\n              ))}\n            </TabsList>\n\n            {/** File Upload */}\n            <TabsContent\n              value={AddDataMethods.Upload}\n              className=\"h-full w-full data-[state=inactive]:hidden\"\n            >\n              <div className=\"h-min-[200px] flex h-full w-full items-center justify-center\">\n                <FileDropInput onFileDrop={onFileDrop}>\n                  {acceptedFormats ? (\n                    <div className=\"text-muted-foreground flex flex-wrap justify-center gap-2 opacity-80\">\n                      {acceptedFormats.map((ext) => (\n                        <Icons.FileType\n                          key={ext}\n                          ext={ext}\n                          height=\"50px\"\n                          fontSize=\"9px\"\n                        />\n                      ))}\n                    </div>\n                  ) : null}\n                </FileDropInput>\n              </div>\n            </TabsContent>\n\n            {/** TileSet*/}\n            <TabsContent\n              value={AddDataMethods.TileSet}\n              className=\"h-full w-full overflow-auto data-[state=inactive]:hidden\"\n            >\n              <LoadTileSetContent\n                loadTileSet={loadTileSet}\n                onClose={addDataModal.onClose}\n              />\n            </TabsContent>\n            {/** S3 */}\n            {/* <TabsContent\n              value={AddDataMethods.S3}\n              className=\"h-full w-full data-[state=inactive]:hidden\"\n            >\n              <KeplerS3Browser\n                listS3Files={listS3Files}\n                s3Browser={s3Browser}\n                loadS3Files={onLoadS3Files}\n                saveS3Credentials={saveS3Credentials}\n                loadS3Credentials={loadS3Credentials}\n                deleteS3Credentials={deleteS3Credentials}\n              />\n            </TabsContent> */}\n          </Tabs>\n        </DialogContent>\n      </Dialog>\n    </KeplerProvider>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"KeplerImageExport.d.ts","sourceRoot":"","sources":["../../src/components/KeplerImageExport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAwBpD,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAE7C,MAAM,WAAW,sBAAsB;IACrC,qBAAqB,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChE,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,mBAAmB,EAAE,WAAW,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqG9D,CAAC"}
+{"version":3,"file":"KeplerImageExport.d.ts","sourceRoot":"","sources":["../../src/components/KeplerImageExport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAuBpD,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAK7C,MAAM,WAAW,sBAAsB;IACrC,qBAAqB,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChE,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,mBAAmB,EAAE,WAAW,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAaD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAoG9D,CAAC"}

package/dist/components/KeplerImageExport.js

@@ -1,12 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect } from 'react';
 import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Label, Switch, } from '@sqlrooms/ui';
-import { EXPORT_IMG_RATIO_OPTIONS, EXPORT_IMG_RESOLUTION_OPTIONS, } from '@kepler.gl/constants';
-import { FormattedMessage } from '@kepler.gl/localization';
+import { Resolution1024x768Option, Resolution1280x720Option, Resolution1280x960Option, Resolution1600x1200Option, Resolution1600x900Option, Resolution1920x1080Option, Resolution1920x1440Option, Resolution2560x1440Option, } from '@kepler.gl/constants';
 import { ImagePreview } from '@kepler.gl/components';
 import { dataURItoBlob, downloadFile } from '@kepler.gl/utils';
+import { Loader2 } from 'lucide-react';
+const CUSTOM_RESOLUTION_OPTIONS = [
+    Resolution1280x720Option,
+    Resolution1920x1080Option,
+    Resolution2560x1440Option,
+    Resolution1600x900Option,
+    Resolution1024x768Option,
+    Resolution1280x960Option,
+    Resolution1600x1200Option,
+    Resolution1920x1440Option,
+];
 export const KeplerImageExport = ({ setExportImageSetting, cleanupExportImage, exportImageSettings, fileName, onExportStart, }) => {
-    const { legend, ratio, resolution, processing, imageDataUri } = exportImageSettings;
+    const { legend, resolution, processing, imageDataUri } = exportImageSettings;
+    useEffect(() => {
+        // hardcode default resolution only when incoming resolution is not a supported custom option
+        const isSupportedResolution = CUSTOM_RESOLUTION_OPTIONS.some((option) => option.id === resolution);
+        if (!isSupportedResolution) {
+            setExportImageSetting({
+                resolution: Resolution1280x720Option.id,
+            });
+        }
+    }, [resolution, setExportImageSetting]);
     useEffect(() => {
         setExportImageSetting({
             exporting: true,
@@ -20,12 +39,11 @@ export const KeplerImageExport = ({ setExportImageSetting, cleanupExportImage, e
             downloadFile(file, `${fileName || 'Untitled'}.png`);
         }
     }, [processing, imageDataUri, fileName, onExportStart]);
-    return (_jsxs("div", { className: "flex flex-col gap-6 px-[5px] pb-5 pt-1", children: [_jsx(ImagePreview, { exportImage: exportImageSettings }), _jsxs("div", { className: "grid grid-cols-[100px_auto] items-center gap-4", children: [_jsx(Label, { children: "Resolution" }), _jsxs(Select, { value: resolution, onValueChange: (value) => setExportImageSetting({
+    const isPreviewReady = !processing && Boolean(imageDataUri);
+    return (_jsxs("div", { className: "flex flex-col gap-6 px-[5px] pt-1 pb-5", children: [_jsx(ImagePreview, { exportImage: exportImageSettings }), _jsxs("div", { className: "grid grid-cols-[100px_auto] items-center gap-4", children: [_jsx(Label, { children: "Resolution" }), _jsxs(Select, { value: resolution, onValueChange: (value) => setExportImageSetting({
                             resolution: value,
-                        }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select resolution" }) }), _jsx(SelectContent, { children: EXPORT_IMG_RESOLUTION_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.id, disabled: !option.available, children: option.label }, option.id))) })] }), _jsx(Label, { children: "Ratio" }), _jsxs(Select, { value: ratio, onValueChange: (value) => setExportImageSetting({
-                            ratio: value,
-                        }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select ratio" }) }), _jsx(SelectContent, { children: EXPORT_IMG_RATIO_OPTIONS.filter((op) => !op.hidden).map((option) => (_jsx(SelectItem, { value: option.id, children: _jsx(FormattedMessage, { id: option.label }) }, option.id))) })] }), _jsx(Label, { className: "font-normal", children: "Show legend" }), _jsx(Switch, { checked: legend, onCheckedChange: (checked) => setExportImageSetting({
+                        }), disabled: processing, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select resolution" }) }), _jsx(SelectContent, { children: CUSTOM_RESOLUTION_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.id, disabled: !option.available, children: option.label }, option.id))) })] }), _jsx(Label, { className: "font-normal", children: "Show legend" }), _jsx(Switch, { checked: legend, onCheckedChange: (checked) => setExportImageSetting({
                             legend: checked === true,
-                        }) })] }), _jsx("div", { className: "flex flex-col gap-2", children: _jsx(Button, { variant: "default", className: "w-full", onClick: handleExportImage, children: "Export Image" }) })] }));
+                        }), disabled: processing })] }), _jsx("div", { className: "flex flex-col gap-2", children: _jsx(Button, { variant: "default", className: "w-full", onClick: handleExportImage, disabled: processing || !isPreviewReady, children: processing ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Processing..."] })) : ('Export Image') }) })] }));
 };
 //# sourceMappingURL=KeplerImageExport.js.map

package/dist/components/KeplerImageExport.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerImageExport.js","sourceRoot":"","sources":["../../src/components/KeplerImageExport.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useEffect} from 'react';\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Label,\n  Switch,\n} from '@sqlrooms/ui';\nimport type {\n  ImageRatioOption,\n  ImageResolutionOption,\n} from '@kepler.gl/constants';\nimport {\n  EXPORT_IMG_RATIOS,\n  RESOLUTIONS,\n  EXPORT_IMG_RATIO_OPTIONS,\n  EXPORT_IMG_RESOLUTION_OPTIONS,\n} from '@kepler.gl/constants';\nimport {FormattedMessage} from '@kepler.gl/localization';\nimport {ImagePreview} from '@kepler.gl/components';\nimport {dataURItoBlob, downloadFile} from '@kepler.gl/utils';\nimport {ExportImage} from '@kepler.gl/types';\n\nexport interface KeplerImageExportProps {\n  setExportImageSetting: (settings: Partial<ExportImage>) => void;\n  cleanupExportImage: () => void;\n  exportImageSettings: ExportImage;\n  fileName?: string;\n  onExportStart?: () => void;\n}\n\nexport const KeplerImageExport: React.FC<KeplerImageExportProps> = ({\n  setExportImageSetting,\n  cleanupExportImage,\n  exportImageSettings,\n  fileName,\n  onExportStart,\n}) => {\n  const {legend, ratio, resolution, processing, imageDataUri} =\n    exportImageSettings;\n\n  useEffect(() => {\n    setExportImageSetting({\n      exporting: true,\n    });\n    return cleanupExportImage;\n  }, [setExportImageSetting, cleanupExportImage]);\n\n  const handleExportImage = useCallback(() => {\n    if (!processing && imageDataUri) {\n      onExportStart?.();\n      const file = dataURItoBlob(imageDataUri);\n      downloadFile(file, `${fileName || 'Untitled'}.png`);\n    }\n  }, [processing, imageDataUri, fileName, onExportStart]);\n\n  return (\n    <div className=\"flex flex-col gap-6 px-[5px] pb-5 pt-1\">\n      <ImagePreview exportImage={exportImageSettings} />\n      <div className=\"grid grid-cols-[100px_auto] items-center gap-4\">\n        <Label>Resolution</Label>\n        <Select\n          value={resolution}\n          onValueChange={(value) =>\n            setExportImageSetting({\n              resolution: value as keyof typeof RESOLUTIONS,\n            })\n          }\n        >\n          <SelectTrigger>\n            <SelectValue placeholder=\"Select resolution\" />\n          </SelectTrigger>\n          <SelectContent>\n            {EXPORT_IMG_RESOLUTION_OPTIONS.map(\n              (option: ImageResolutionOption) => (\n                <SelectItem\n                  key={option.id}\n                  value={option.id}\n                  disabled={!option.available}\n                >\n                  {option.label}\n                </SelectItem>\n              ),\n            )}\n          </SelectContent>\n        </Select>\n\n        <Label>Ratio</Label>\n        <Select\n          value={ratio}\n          onValueChange={(value) =>\n            setExportImageSetting({\n              ratio: value as keyof typeof EXPORT_IMG_RATIOS,\n            })\n          }\n        >\n          <SelectTrigger>\n            <SelectValue placeholder=\"Select ratio\" />\n          </SelectTrigger>\n          <SelectContent>\n            {EXPORT_IMG_RATIO_OPTIONS.filter(\n              (op: ImageRatioOption) => !op.hidden,\n            ).map((option: ImageRatioOption) => (\n              <SelectItem key={option.id} value={option.id}>\n                <FormattedMessage id={option.label} />\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n\n        <Label className=\"font-normal\">Show legend</Label>\n        <Switch\n          checked={legend}\n          onCheckedChange={(checked) =>\n            setExportImageSetting({\n              legend: checked === true,\n            })\n          }\n        />\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <Button\n          variant=\"default\"\n          className=\"w-full\"\n          onClick={handleExportImage}\n        >\n          Export Image\n        </Button>\n      </div>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"KeplerImageExport.js","sourceRoot":"","sources":["../../src/components/KeplerImageExport.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useEffect} from 'react';\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Label,\n  Switch,\n} from '@sqlrooms/ui';\nimport {\n  Resolution1024x768Option,\n  Resolution1280x720Option,\n  Resolution1280x960Option,\n  Resolution1600x1200Option,\n  Resolution1600x900Option,\n  Resolution1920x1080Option,\n  Resolution1920x1440Option,\n  Resolution2560x1440Option,\n} from '@kepler.gl/constants';\nimport {ImagePreview} from '@kepler.gl/components';\nimport {dataURItoBlob, downloadFile} from '@kepler.gl/utils';\nimport {ExportImage} from '@kepler.gl/types';\nimport {Loader2} from 'lucide-react';\n\ntype ExportResolutionOption = ExportImage['resolution'];\n\nexport interface KeplerImageExportProps {\n  setExportImageSetting: (settings: Partial<ExportImage>) => void;\n  cleanupExportImage: () => void;\n  exportImageSettings: ExportImage;\n  fileName?: string;\n  onExportStart?: () => void;\n}\n\nconst CUSTOM_RESOLUTION_OPTIONS = [\n  Resolution1280x720Option,\n  Resolution1920x1080Option,\n  Resolution2560x1440Option,\n  Resolution1600x900Option,\n  Resolution1024x768Option,\n  Resolution1280x960Option,\n  Resolution1600x1200Option,\n  Resolution1920x1440Option,\n];\n\nexport const KeplerImageExport: React.FC<KeplerImageExportProps> = ({\n  setExportImageSetting,\n  cleanupExportImage,\n  exportImageSettings,\n  fileName,\n  onExportStart,\n}) => {\n  const {legend, resolution, processing, imageDataUri} = exportImageSettings;\n\n  useEffect(() => {\n    // hardcode default resolution only when incoming resolution is not a supported custom option\n    const isSupportedResolution = CUSTOM_RESOLUTION_OPTIONS.some(\n      (option) => option.id === resolution,\n    );\n    if (!isSupportedResolution) {\n      setExportImageSetting({\n        resolution: Resolution1280x720Option.id,\n      });\n    }\n  }, [resolution, setExportImageSetting]);\n\n  useEffect(() => {\n    setExportImageSetting({\n      exporting: true,\n    });\n    return cleanupExportImage;\n  }, [setExportImageSetting, cleanupExportImage]);\n\n  const handleExportImage = useCallback(() => {\n    if (!processing && imageDataUri) {\n      onExportStart?.();\n      const file = dataURItoBlob(imageDataUri);\n      downloadFile(file, `${fileName || 'Untitled'}.png`);\n    }\n  }, [processing, imageDataUri, fileName, onExportStart]);\n\n  const isPreviewReady = !processing && Boolean(imageDataUri);\n\n  return (\n    <div className=\"flex flex-col gap-6 px-[5px] pt-1 pb-5\">\n      <ImagePreview exportImage={exportImageSettings} />\n\n      <div className=\"grid grid-cols-[100px_auto] items-center gap-4\">\n        <Label>Resolution</Label>\n        <Select\n          value={resolution}\n          onValueChange={(value: ExportResolutionOption) =>\n            setExportImageSetting({\n              resolution: value,\n            })\n          }\n          disabled={processing}\n        >\n          <SelectTrigger>\n            <SelectValue placeholder=\"Select resolution\" />\n          </SelectTrigger>\n          <SelectContent>\n            {CUSTOM_RESOLUTION_OPTIONS.map((option) => (\n              <SelectItem\n                key={option.id}\n                value={option.id as ExportResolutionOption}\n                disabled={!option.available}\n              >\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n\n        <Label className=\"font-normal\">Show legend</Label>\n        <Switch\n          checked={legend}\n          onCheckedChange={(checked) =>\n            setExportImageSetting({\n              legend: checked === true,\n            })\n          }\n          disabled={processing}\n        />\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <Button\n          variant=\"default\"\n          className=\"w-full\"\n          onClick={handleExportImage}\n          disabled={processing || !isPreviewReady}\n        >\n          {processing ? (\n            <span className=\"flex items-center gap-2\">\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n              Processing...\n            </span>\n          ) : (\n            'Export Image'\n          )}\n        </Button>\n      </div>\n    </div>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"KeplerInjector.d.ts","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAaL,KAAK,YAAY,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAA0B,MAAM,OAAO,CAAC;AAO/C,eAAO,MAAM,0BAA0B,kBAEtC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;EAMnC,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,OAAO,GAAG,OAAO,IAAI,CAAC,GAAG,KAAK,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC;AAC5E,MAAM,MAAM,mBAAmB,GAAG,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;AACjE,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAuG3D,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,mBAAmB,EAAE,EAC9B,OAAO,GAAE;IAAC,IAAI,CAAC,EAAE,uBAAuB,CAAA;CAAM,QAM/C;AAED,wBAAgB,0BAA0B,SAGzC;AAED,wBAAgB,iBAAiB,iBAEhC;AAeD,wBAAgB,gBAAgB,CAAC,QAAQ,SAAS,aAAa,EAC7D,OAAO,EAAE,QAAQ,GAChB,UAAU,CAAC,QAAQ,CAAC,CA+BtB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc;QACrB,QAAQ,SAAS,aAAa,WAAW,QAAQ;CAGtD,CAAC"}
+{"version":3,"file":"KeplerInjector.d.ts","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAeL,KAAK,YAAY,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAA0B,MAAM,OAAO,CAAC;AAS/C,eAAO,MAAM,0BAA0B,kBAEtC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;EAMnC,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,OAAO,GAAG,OAAO,IAAI,CAAC,GAAG,KAAK,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC;AAC5E,MAAM,MAAM,mBAAmB,GAAG,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;AACjE,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAyG3D,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,mBAAmB,EAAE,EAC9B,OAAO,GAAE;IAAC,IAAI,CAAC,EAAE,uBAAuB,CAAA;CAAM,QAM/C;AAED,wBAAgB,0BAA0B,SAGzC;AAED,wBAAgB,iBAAiB,iBAEhC;AAeD,wBAAgB,gBAAgB,CAAC,QAAQ,SAAS,aAAa,EAC7D,OAAO,EAAE,QAAQ,GAChB,UAAU,CAAC,QAAQ,CAAC,CA+BtB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc;QACrB,QAAQ,SAAS,aAAa,WAAW,QAAQ;CAGtD,CAAC"}

package/dist/components/KeplerInjector.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AddDataButtonFactory, ContainerFactory, injector as createInjector, DndContextFactory, FilterPanelHeaderFactory, flattenDeps, MapControlTooltipFactory, MapLegendFactory, MapLegendPanelFactory, PanelTitleFactory, typeCheckRecipe, } from '@kepler.gl/components';
+import { AddDataButtonFactory, ContainerFactory, injector as createInjector, DndContextFactory, FilterPanelHeaderFactory, flattenDeps, MapControlTooltipFactory, MapDrawPanelFactory, MapLegendFactory, MapLegendPanelFactory, PanelTitleFactory, SourceDataSelectorFactory, typeCheckRecipe, } from '@kepler.gl/components';
 import { CustomDndContextFactory } from './CustomDndContext';
 import { CustomFilterPanelHeaderFactory } from './CustomFilterPanelHeader';
 import { CustomMapControlTooltipFactory } from './CustomMapControlTooltipFactory';
+import { CustomMapDrawPanelFactory } from './CustomMapDrawPanel';
 import { CustomMapLegendFactory } from './CustomMapLegend';
 import { CustomMapLegendPanelFactory } from './CustomMapLegendPanel';
+import { CustomSourceDataSelectorFactory } from './CustomSourceDataSelector';
 export const CustomAddDataButtonFactory = () => {
     return () => null;
 };
@@ -20,6 +22,8 @@ const defaultRecipes = [
     [MapLegendPanelFactory, CustomMapLegendPanelFactory],
     [MapLegendFactory, CustomMapLegendFactory],
     [MapControlTooltipFactory, CustomMapControlTooltipFactory],
+    [MapDrawPanelFactory, CustomMapDrawPanelFactory],
+    [SourceDataSelectorFactory, CustomSourceDataSelectorFactory],
 ];
 let customRecipes = [];
 let injector = createKeplerInjector();

package/dist/components/KeplerInjector.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerInjector.js","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AddDataButtonFactory,\n  ContainerFactory,\n  injector as createInjector,\n  DndContextFactory,\n  Factory,\n  FilterPanelHeaderFactory,\n  flattenDeps,\n  MapControlTooltipFactory,\n  MapLegendFactory,\n  MapLegendPanelFactory,\n  PanelTitleFactory,\n  typeCheckRecipe,\n  type InjectorType,\n} from '@kepler.gl/components';\nimport React, {PropsWithChildren} from 'react';\nimport {CustomDndContextFactory} from './CustomDndContext';\nimport {CustomFilterPanelHeaderFactory} from './CustomFilterPanelHeader';\nimport {CustomMapControlTooltipFactory} from './CustomMapControlTooltipFactory';\nimport {CustomMapLegendFactory} from './CustomMapLegend';\nimport {CustomMapLegendPanelFactory} from './CustomMapLegendPanel';\n\nexport const CustomAddDataButtonFactory = () => {\n  return () => null;\n};\n\nexport const CustomPanelTitleFactory = () => {\n  const PanelTitle: React.FC<PropsWithChildren> = ({children}) => (\n    <div className=\"flex items-center justify-end\">{children}</div>\n  );\n\n  return PanelTitle;\n};\n\nexport type KeplerFactory<TReturn = unknown> = (..._args: any[]) => TReturn;\nexport type KeplerFactoryRecipe = [KeplerFactory, KeplerFactory];\nexport type KeplerFactoryRecipeMode = 'append' | 'replace';\n\nconst defaultRecipes: KeplerFactoryRecipe[] = [\n  [AddDataButtonFactory, CustomAddDataButtonFactory],\n  [PanelTitleFactory, CustomPanelTitleFactory],\n  [DndContextFactory, CustomDndContextFactory],\n  [FilterPanelHeaderFactory, CustomFilterPanelHeaderFactory],\n  [MapLegendPanelFactory, CustomMapLegendPanelFactory],\n  [MapLegendFactory, CustomMapLegendFactory],\n  [MapControlTooltipFactory, CustomMapControlTooltipFactory],\n];\n\nlet customRecipes: KeplerFactoryRecipe[] = [];\nlet injector = createKeplerInjector();\n\nfunction createBaseInjector() {\n  const allDependencies = flattenDeps(\n    [],\n    ContainerFactory as unknown as Factory,\n  );\n  return allDependencies.reduce(\n    (current, factory) => current.provide(factory, factory),\n    createInjector(),\n  );\n}\n\n/**\n * Applies factory replacement recipes on top of a fresh Kepler injector while\n * preserving explicit replacement targets.\n *\n * Kepler's default `provideRecipesToInjector` pre-provides all replacement\n * dependencies as identity mappings (`dep -> dep`) before applying each recipe.\n * That can unintentionally override factories that were already replaced by\n * earlier recipes, and emits noisy \"already injected\" warnings.\n *\n * This helper keeps the same high-level flow (process recipes in order and then\n * eagerly resolve the configured factories), but skips identity-providing any\n * dependency that is itself an explicit replacement target in the current\n * recipe set. As a result:\n * - earlier explicit replacements are not overwritten by later dependency setup\n * - replacement ordering remains deterministic\n * - configured factories are still warmed via `get(factoryToReplace)`\n */\nfunction provideRecipesToInjectorSafely(\n  recipes: KeplerFactoryRecipe[],\n  baseInjector: InjectorType,\n) {\n  const replacementTargets = new Set(\n    recipes\n      .filter((recipe) =>\n        typeCheckRecipe(recipe as unknown as [Factory, Factory]),\n      )\n      .map((recipe) => recipe[0]),\n  );\n\n  const provided = new Map();\n\n  const injectorWithRecipes = recipes.reduce((currentInjector, recipe) => {\n    if (!typeCheckRecipe(recipe as unknown as [Factory, Factory])) {\n      return currentInjector;\n    }\n\n    const [factoryToReplace, replacementFactory] = recipe;\n    const customDependencies = flattenDeps(\n      [],\n      replacementFactory as unknown as Factory,\n    );\n\n    const injectorWithDependencies = customDependencies.reduce(\n      (dependencyInjector, dependencyFactory) => {\n        // If a dependency has an explicit replacement recipe, skip self-injecting it.\n        // This avoids overriding previous replacements and warning noise.\n        if (\n          replacementTargets.has(dependencyFactory as unknown as KeplerFactory)\n        ) {\n          return dependencyInjector;\n        }\n        return dependencyInjector.provide(dependencyFactory, dependencyFactory);\n      },\n      currentInjector,\n    );\n\n    provided.set(factoryToReplace, replacementFactory);\n    return injectorWithDependencies.provide(\n      factoryToReplace,\n      replacementFactory,\n    );\n  }, baseInjector);\n\n  provided.forEach((_, factoryToReplace) => {\n    injectorWithRecipes.get(factoryToReplace);\n  });\n\n  return injectorWithRecipes;\n}\n\nfunction createKeplerInjector(recipes: KeplerFactoryRecipe[] = []) {\n  return provideRecipesToInjectorSafely(\n    [...defaultRecipes, ...recipes],\n    createBaseInjector(),\n  );\n}\n\nexport function configureKeplerInjector(\n  recipes: KeplerFactoryRecipe[],\n  options: {mode?: KeplerFactoryRecipeMode} = {},\n) {\n  const mode = options.mode ?? 'append';\n  customRecipes =\n    mode === 'replace' ? [...recipes] : [...customRecipes, ...recipes];\n  injector = createKeplerInjector(customRecipes);\n}\n\nexport function resetKeplerInjectorRecipes() {\n  customRecipes = [];\n  injector = createKeplerInjector();\n}\n\nexport function getKeplerInjector() {\n  return injector;\n}\n\n// Cache resolved components per injector so we keep a stable component\n// reference across re-renders. Invalidated when injector is replaced (configure/reset).\nconst injectorToFactoryCache = new WeakMap<\n  object,\n  Map<KeplerFactory, React.ComponentType<Record<string, unknown>>>\n>();\n\n// Cache wrapper components per factory so callers always get a stable component type.\nconst factoryToWrapperCache = new Map<\n  KeplerFactory,\n  React.ComponentType<Record<string, unknown>>\n>();\n\nexport function getKeplerFactory<TFactory extends KeplerFactory>(\n  factory: TFactory,\n): ReturnType<TFactory> {\n  let Wrapped = factoryToWrapperCache.get(factory);\n  if (Wrapped === undefined) {\n    const WrappedComponent = function KeplerFactoryWrapper(\n      props: Record<string, unknown>,\n    ) {\n      // Resolve at top level of render (not inside useMemo) so injector.get()\n      // running the factory chain does not run hooks inside a hook.\n      const injectorInstance = getKeplerInjector();\n      let byFactory = injectorToFactoryCache.get(injectorInstance as object);\n      if (byFactory === undefined) {\n        byFactory = new Map();\n        injectorToFactoryCache.set(injectorInstance as object, byFactory);\n      }\n      let Component = byFactory.get(factory);\n      if (Component === undefined) {\n        Component = injectorInstance.get(\n          factory as unknown as Factory,\n        ) as React.ComponentType<Record<string, unknown>>;\n        byFactory.set(factory, Component);\n      }\n      // eslint-disable-next-line react-hooks/static-components -- Kepler factory components resolved at render by design\n      return <Component {...props} />;\n    };\n\n    const factoryName = factory.name || 'Anonymous';\n    WrappedComponent.displayName = `KeplerFactory(${factoryName})`;\n    Wrapped = WrappedComponent;\n    factoryToWrapperCache.set(factory, WrappedComponent);\n  }\n  return Wrapped as unknown as ReturnType<TFactory>;\n}\n\n/**\n * Stable access to Kepler factories. Prefer calling `get()` at module scope\n * (or in a constant initializer) so the returned component type is reused.\n */\nexport const KeplerInjector = {\n  get<TFactory extends KeplerFactory>(factory: TFactory) {\n    return getKeplerFactory(factory);\n  },\n};\n"]}
+{"version":3,"file":"KeplerInjector.js","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AddDataButtonFactory,\n  ContainerFactory,\n  injector as createInjector,\n  DndContextFactory,\n  Factory,\n  FilterPanelHeaderFactory,\n  flattenDeps,\n  MapControlTooltipFactory,\n  MapDrawPanelFactory,\n  MapLegendFactory,\n  MapLegendPanelFactory,\n  PanelTitleFactory,\n  SourceDataSelectorFactory,\n  typeCheckRecipe,\n  type InjectorType,\n} from '@kepler.gl/components';\nimport React, {PropsWithChildren} from 'react';\nimport {CustomDndContextFactory} from './CustomDndContext';\nimport {CustomFilterPanelHeaderFactory} from './CustomFilterPanelHeader';\nimport {CustomMapControlTooltipFactory} from './CustomMapControlTooltipFactory';\nimport {CustomMapDrawPanelFactory} from './CustomMapDrawPanel';\nimport {CustomMapLegendFactory} from './CustomMapLegend';\nimport {CustomMapLegendPanelFactory} from './CustomMapLegendPanel';\nimport {CustomSourceDataSelectorFactory} from './CustomSourceDataSelector';\n\nexport const CustomAddDataButtonFactory = () => {\n  return () => null;\n};\n\nexport const CustomPanelTitleFactory = () => {\n  const PanelTitle: React.FC<PropsWithChildren> = ({children}) => (\n    <div className=\"flex items-center justify-end\">{children}</div>\n  );\n\n  return PanelTitle;\n};\n\nexport type KeplerFactory<TReturn = unknown> = (..._args: any[]) => TReturn;\nexport type KeplerFactoryRecipe = [KeplerFactory, KeplerFactory];\nexport type KeplerFactoryRecipeMode = 'append' | 'replace';\n\nconst defaultRecipes: KeplerFactoryRecipe[] = [\n  [AddDataButtonFactory, CustomAddDataButtonFactory],\n  [PanelTitleFactory, CustomPanelTitleFactory],\n  [DndContextFactory, CustomDndContextFactory],\n  [FilterPanelHeaderFactory, CustomFilterPanelHeaderFactory],\n  [MapLegendPanelFactory, CustomMapLegendPanelFactory],\n  [MapLegendFactory, CustomMapLegendFactory],\n  [MapControlTooltipFactory, CustomMapControlTooltipFactory],\n  [MapDrawPanelFactory, CustomMapDrawPanelFactory],\n  [SourceDataSelectorFactory, CustomSourceDataSelectorFactory],\n];\n\nlet customRecipes: KeplerFactoryRecipe[] = [];\nlet injector = createKeplerInjector();\n\nfunction createBaseInjector() {\n  const allDependencies = flattenDeps(\n    [],\n    ContainerFactory as unknown as Factory,\n  );\n  return allDependencies.reduce(\n    (current, factory) => current.provide(factory, factory),\n    createInjector(),\n  );\n}\n\n/**\n * Applies factory replacement recipes on top of a fresh Kepler injector while\n * preserving explicit replacement targets.\n *\n * Kepler's default `provideRecipesToInjector` pre-provides all replacement\n * dependencies as identity mappings (`dep -> dep`) before applying each recipe.\n * That can unintentionally override factories that were already replaced by\n * earlier recipes, and emits noisy \"already injected\" warnings.\n *\n * This helper keeps the same high-level flow (process recipes in order and then\n * eagerly resolve the configured factories), but skips identity-providing any\n * dependency that is itself an explicit replacement target in the current\n * recipe set. As a result:\n * - earlier explicit replacements are not overwritten by later dependency setup\n * - replacement ordering remains deterministic\n * - configured factories are still warmed via `get(factoryToReplace)`\n */\nfunction provideRecipesToInjectorSafely(\n  recipes: KeplerFactoryRecipe[],\n  baseInjector: InjectorType,\n) {\n  const replacementTargets = new Set(\n    recipes\n      .filter((recipe) =>\n        typeCheckRecipe(recipe as unknown as [Factory, Factory]),\n      )\n      .map((recipe) => recipe[0]),\n  );\n\n  const provided = new Map();\n\n  const injectorWithRecipes = recipes.reduce((currentInjector, recipe) => {\n    if (!typeCheckRecipe(recipe as unknown as [Factory, Factory])) {\n      return currentInjector;\n    }\n\n    const [factoryToReplace, replacementFactory] = recipe;\n    const customDependencies = flattenDeps(\n      [],\n      replacementFactory as unknown as Factory,\n    );\n\n    const injectorWithDependencies = customDependencies.reduce(\n      (dependencyInjector, dependencyFactory) => {\n        // If a dependency has an explicit replacement recipe, skip self-injecting it.\n        // This avoids overriding previous replacements and warning noise.\n        if (\n          replacementTargets.has(dependencyFactory as unknown as KeplerFactory)\n        ) {\n          return dependencyInjector;\n        }\n        return dependencyInjector.provide(dependencyFactory, dependencyFactory);\n      },\n      currentInjector,\n    );\n\n    provided.set(factoryToReplace, replacementFactory);\n    return injectorWithDependencies.provide(\n      factoryToReplace,\n      replacementFactory,\n    );\n  }, baseInjector);\n\n  provided.forEach((_, factoryToReplace) => {\n    injectorWithRecipes.get(factoryToReplace);\n  });\n\n  return injectorWithRecipes;\n}\n\nfunction createKeplerInjector(recipes: KeplerFactoryRecipe[] = []) {\n  return provideRecipesToInjectorSafely(\n    [...defaultRecipes, ...recipes],\n    createBaseInjector(),\n  );\n}\n\nexport function configureKeplerInjector(\n  recipes: KeplerFactoryRecipe[],\n  options: {mode?: KeplerFactoryRecipeMode} = {},\n) {\n  const mode = options.mode ?? 'append';\n  customRecipes =\n    mode === 'replace' ? [...recipes] : [...customRecipes, ...recipes];\n  injector = createKeplerInjector(customRecipes);\n}\n\nexport function resetKeplerInjectorRecipes() {\n  customRecipes = [];\n  injector = createKeplerInjector();\n}\n\nexport function getKeplerInjector() {\n  return injector;\n}\n\n// Cache resolved components per injector so we keep a stable component\n// reference across re-renders. Invalidated when injector is replaced (configure/reset).\nconst injectorToFactoryCache = new WeakMap<\n  object,\n  Map<KeplerFactory, React.ComponentType<Record<string, unknown>>>\n>();\n\n// Cache wrapper components per factory so callers always get a stable component type.\nconst factoryToWrapperCache = new Map<\n  KeplerFactory,\n  React.ComponentType<Record<string, unknown>>\n>();\n\nexport function getKeplerFactory<TFactory extends KeplerFactory>(\n  factory: TFactory,\n): ReturnType<TFactory> {\n  let Wrapped = factoryToWrapperCache.get(factory);\n  if (Wrapped === undefined) {\n    const WrappedComponent = function KeplerFactoryWrapper(\n      props: Record<string, unknown>,\n    ) {\n      // Resolve at top level of render (not inside useMemo) so injector.get()\n      // running the factory chain does not run hooks inside a hook.\n      const injectorInstance = getKeplerInjector();\n      let byFactory = injectorToFactoryCache.get(injectorInstance as object);\n      if (byFactory === undefined) {\n        byFactory = new Map();\n        injectorToFactoryCache.set(injectorInstance as object, byFactory);\n      }\n      let Component = byFactory.get(factory);\n      if (Component === undefined) {\n        Component = injectorInstance.get(\n          factory as unknown as Factory,\n        ) as React.ComponentType<Record<string, unknown>>;\n        byFactory.set(factory, Component);\n      }\n      // eslint-disable-next-line react-hooks/static-components -- Kepler factory components resolved at render by design\n      return <Component {...props} />;\n    };\n\n    const factoryName = factory.name || 'Anonymous';\n    WrappedComponent.displayName = `KeplerFactory(${factoryName})`;\n    Wrapped = WrappedComponent;\n    factoryToWrapperCache.set(factory, WrappedComponent);\n  }\n  return Wrapped as unknown as ReturnType<TFactory>;\n}\n\n/**\n * Stable access to Kepler factories. Prefer calling `get()` at module scope\n * (or in a constant initializer) so the returned component type is reused.\n */\nexport const KeplerInjector = {\n  get<TFactory extends KeplerFactory>(factory: TFactory) {\n    return getKeplerFactory(factory);\n  },\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"KeplerMapContainer.d.ts","sourceRoot":"","sources":["../../src/components/KeplerMapContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAuC,MAAM,OAAO,CAAC;AAyK/D,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf,CAMA,CAAC"}
+{"version":3,"file":"KeplerMapContainer.d.ts","sourceRoot":"","sources":["../../src/components/KeplerMapContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAuC,MAAM,OAAO,CAAC;AAgP/D,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf,CAMA,CAAC"}

package/dist/components/KeplerMapContainer.js

@@ -7,6 +7,7 @@ import { getKeplerFactory } from './KeplerInjector';
 import { KeplerProvider } from './KeplerProvider';
 import { useKeplerStateActions } from '../hooks/useKeplerStateActions';
 import { useStoreWithKepler } from '../KeplerSlice';
+import { SplitMapIndexContext } from './SplitMapIndexContext';
 const MapContainer = getKeplerFactory(MapContainerFactory);
 const BottomWidget = getKeplerFactory(BottomWidgetFactory);
 const GeoCoderPanel = getKeplerFactory(GeocoderPanelFactory);
@@ -36,15 +37,22 @@ const CustomWidgetcontainer = styled.div `
     margin-top: 0 !important;
   }
 `;
+const SplitMapsContainer = styled.div `
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+`;
 const KeplerGl = ({ mapId }) => {
     const bottomWidgetRef = useRef(null);
     const [containerRef, size] = useDimensions();
     const [containerNode, setContainerNode] = useState(null);
     const theme = useTheme();
     const basicKeplerProps = useStoreWithKepler((state) => state.kepler.basicKeplerProps);
+    const modalPortalTarget = useStoreWithKepler((state) => state.kepler.modalPortalTarget);
     const { keplerActions, keplerState } = useKeplerStateActions({ mapId });
     const interactionConfig = keplerState?.visState?.interactionConfig;
-    // Capture the current container DOM node outside of render logic
+    // Capture container DOM node outside of render for portal use
     useEffect(() => {
         setContainerNode(containerRef.current);
     }, [containerRef]);
@@ -70,22 +78,53 @@ const KeplerGl = ({ mapId }) => {
         // dont need height
         size || DEFAULT_DIMENSIONS)
         : null;
+    const splitMaps = keplerState?.visState?.splitMaps;
+    const isSplit = splitMaps && splitMaps.length > 1;
     const mapFields = useMemo(() => (keplerState?.visState ? mapFieldsSelector(mergedKeplerProps) : null), [keplerState, mergedKeplerProps]);
+    const mapFieldsSplit = useMemo(() => isSplit && keplerState?.visState
+        ? splitMaps.map((_, index) => mapFieldsSelector(mergedKeplerProps, index))
+        : null, [keplerState, mergedKeplerProps, isSplit, splitMaps]);
     // Check if there are filters or animatable layers (e.g., Trip layers)
     const hasFilters = Boolean(keplerState?.visState.filters?.length);
     const hasAnimatableLayers = useMemo(() => {
         const layers = keplerState?.visState?.layers || [];
         return getAnimatableVisibleLayers(layers).length > 0;
     }, [keplerState?.visState?.layers]);
-    const bottomWidgetFields = hasFilters || hasAnimatableLayers
-        ? bottomWidgetSelector(mergedKeplerProps, theme)
-        : null;
+    const bottomWidgetFields = useMemo(() => {
+        if (!hasFilters && !hasAnimatableLayers)
+            return null;
+        const fields = bottomWidgetSelector(mergedKeplerProps, theme);
+        // The legend is rendered as a draggable, portaled overlay so the
+        // BottomWidget should not shrink to reserve space for it.  Mask
+        // mapLegend.active so the upstream spaceForLegendWidth stays 0.
+        return {
+            ...fields,
+            uiState: {
+                ...fields.uiState,
+                mapControls: {
+                    ...fields.uiState.mapControls,
+                    mapLegend: {
+                        ...fields.uiState.mapControls?.mapLegend,
+                        show: fields.uiState.mapControls?.mapLegend?.show ?? false,
+                        active: false,
+                    },
+                },
+            },
+        };
+    }, [hasFilters, hasAnimatableLayers, mergedKeplerProps, theme]);
+    const modalPortalNode = useMemo(() => {
+        if (modalPortalTarget === 'body') {
+            return typeof document !== 'undefined' ? document.body : null;
+        }
+        return containerNode;
+    }, [modalPortalTarget, containerNode]);
     const modalContainerFields = keplerState?.visState
-        ? modalContainerSelector(mergedKeplerProps, containerNode)
+        ? modalContainerSelector(mergedKeplerProps, modalPortalNode)
         : null;
     const mapboxApiAccessToken = mapFields?.mapStyle?.mapboxApiAccessToken ||
         basicKeplerProps?.mapboxApiAccessToken;
-    return (_jsx(RootContext.Provider, { value: containerRef, children: _jsxs(CustomWidgetcontainer, { ref: containerRef, className: "kepler-gl relative flex h-full w-full flex-col justify-between", children: [mapFields?.mapState ? (_jsx(MapViewStateContextProvider, { mapState: mapFields.mapState, children: _jsx(MapContainer, { primary: true, containerId: 0, index: 0, ...mapFields, mapboxApiAccessToken: mapboxApiAccessToken || '' }, 0) })) : null, geoCoderPanelFields && interactionConfig?.geocoder?.enabled ? (_jsx(GeoCoderPanel, { ...geoCoderPanelFields, index: 0, unsyncedViewports: false, mapboxApiAccessToken: mapboxApiAccessToken || '' })) : null, size && bottomWidgetFields ? (_jsx(BottomWidget, { rootRef: bottomWidgetRef, ...bottomWidgetFields, theme: theme, containerW: size?.width })) : null, size && size.width && size.height && modalContainerFields ? (_jsx(ModalContainer, { ...modalContainerFields, containerW: size?.width, containerH: size?.height })) : null] }) }));
+    return (_jsx(RootContext.Provider, { value: containerRef, children: _jsxs(CustomWidgetcontainer, { ref: containerRef, className: "kepler-gl relative flex h-full w-full flex-col justify-between", children: [isSplit && mapFieldsSplit ? (_jsx(SplitMapsContainer, { children: _jsx(MapViewStateContextProvider, { mapState: (mapFieldsSplit[0]?.mapState ??
+                            mapFields?.mapState), children: mapFieldsSplit.map((fields, index) => (_jsx(SplitMapIndexContext.Provider, { value: index, children: _jsx(MapContainer, { index: index, primary: index === 1, containerId: index, ...fields, mapboxApiAccessToken: mapboxApiAccessToken || '' }) }, index))) }) })) : mapFields?.mapState ? (_jsx(MapViewStateContextProvider, { mapState: mapFields.mapState, children: _jsx(MapContainer, { primary: true, containerId: 0, index: 0, ...mapFields, mapboxApiAccessToken: mapboxApiAccessToken || '' }, 0) })) : null, geoCoderPanelFields && interactionConfig?.geocoder?.enabled ? (_jsx(GeoCoderPanel, { ...geoCoderPanelFields, index: 0, unsyncedViewports: false, mapboxApiAccessToken: mapboxApiAccessToken || '' })) : null, size && bottomWidgetFields ? (_jsx(BottomWidget, { rootRef: bottomWidgetRef, ...bottomWidgetFields, theme: theme, containerW: size?.width })) : null, size && size.width && size.height && modalContainerFields ? (_jsx(ModalContainer, { ...modalContainerFields, containerW: size?.width, containerH: size?.height })) : null] }) }));
 };
 export const KeplerMapContainer = ({ mapId }) => {
     return (_jsx(KeplerProvider, { mapId: mapId, children: _jsx(KeplerGl, { mapId: mapId }) }));