@sqlrooms/kepler 0.27.0 → 0.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -2
- package/dist/components/CustomInteractionManager.d.ts.map +1 -1
- package/dist/components/CustomInteractionManager.js +4 -3
- package/dist/components/CustomInteractionManager.js.map +1 -1
- package/dist/components/CustomMapLegend.d.ts.map +1 -1
- package/dist/components/CustomMapLegend.js +8 -11
- package/dist/components/CustomMapLegend.js.map +1 -1
- package/dist/components/CustomMapManager.js +1 -1
- package/dist/components/CustomMapManager.js.map +1 -1
- package/dist/components/KeplerAddDataDialog.js +1 -1
- package/dist/components/KeplerAddDataDialog.js.map +1 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1,3 +1,103 @@
|
|
|
1
|
-
|
|
1
|
+
Kepler.gl integration for SQLRooms.
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Use this package when you want a **map-first analytics experience** in a SQLRooms app, backed by DuckDB tables and SQL.
|
|
4
|
+
|
|
5
|
+
## What this package provides
|
|
6
|
+
|
|
7
|
+
- `createKeplerSlice()` to add Kepler state/actions to your Room store
|
|
8
|
+
- `KeplerMapContainer` and `KeplerPlotContainer` for rendering maps/overlays
|
|
9
|
+
- `KeplerSidePanels` for layer/filter/interaction UI
|
|
10
|
+
- utilities for map config persistence and dataset synchronization
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @sqlrooms/kepler @sqlrooms/room-shell @sqlrooms/duckdb @sqlrooms/ui
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Quick start
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
import {useEffect} from 'react';
|
|
22
|
+
import {
|
|
23
|
+
createKeplerSlice,
|
|
24
|
+
KeplerMapContainer,
|
|
25
|
+
KeplerSliceState,
|
|
26
|
+
} from '@sqlrooms/kepler';
|
|
27
|
+
import {
|
|
28
|
+
createRoomShellSlice,
|
|
29
|
+
createRoomStore,
|
|
30
|
+
RoomShell,
|
|
31
|
+
RoomShellSliceState,
|
|
32
|
+
} from '@sqlrooms/room-shell';
|
|
33
|
+
|
|
34
|
+
type RoomState = RoomShellSliceState & KeplerSliceState;
|
|
35
|
+
|
|
36
|
+
export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
|
|
37
|
+
(set, get, store) => ({
|
|
38
|
+
...createRoomShellSlice({
|
|
39
|
+
config: {
|
|
40
|
+
dataSources: [
|
|
41
|
+
{
|
|
42
|
+
type: 'url',
|
|
43
|
+
tableName: 'earthquakes',
|
|
44
|
+
url: 'https://huggingface.co/datasets/sqlrooms/earthquakes/resolve/main/earthquakes.parquet',
|
|
45
|
+
},
|
|
46
|
+
],
|
|
47
|
+
},
|
|
48
|
+
})(set, get, store),
|
|
49
|
+
...createKeplerSlice()(set, get, store),
|
|
50
|
+
}),
|
|
51
|
+
);
|
|
52
|
+
|
|
53
|
+
function MapPanel() {
|
|
54
|
+
const mapId = useRoomStore((state) => state.kepler.config.currentMapId);
|
|
55
|
+
const addTableToMap = useRoomStore((state) => state.kepler.addTableToMap);
|
|
56
|
+
const isTableReady = useRoomStore((state) =>
|
|
57
|
+
Boolean(state.db.findTableByName('earthquakes')),
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (!isTableReady || !mapId) return;
|
|
62
|
+
void addTableToMap(mapId, 'earthquakes', {
|
|
63
|
+
autoCreateLayers: true,
|
|
64
|
+
centerMap: true,
|
|
65
|
+
});
|
|
66
|
+
}, [isTableReady, mapId, addTableToMap]);
|
|
67
|
+
|
|
68
|
+
if (!mapId) return null;
|
|
69
|
+
|
|
70
|
+
return <KeplerMapContainer mapId={mapId} />;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export function App() {
|
|
74
|
+
return (
|
|
75
|
+
<RoomShell roomStore={roomStore} className="h-screen">
|
|
76
|
+
<MapPanel />
|
|
77
|
+
</RoomShell>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Common customization
|
|
83
|
+
|
|
84
|
+
Pass options to `createKeplerSlice()`:
|
|
85
|
+
|
|
86
|
+
```ts
|
|
87
|
+
createKeplerSlice({
|
|
88
|
+
basicKeplerProps: {
|
|
89
|
+
mapboxApiAccessToken: import.meta.env.VITE_MAPBOX_TOKEN,
|
|
90
|
+
},
|
|
91
|
+
actionLogging: false,
|
|
92
|
+
});
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Related packages
|
|
96
|
+
|
|
97
|
+
- `@sqlrooms/kepler-config` for Zod schemas used by persisted Kepler config
|
|
98
|
+
- `@sqlrooms/room-shell` for Room store composition and UI shell
|
|
99
|
+
- `@sqlrooms/duckdb` for DuckDB-backed table loading/querying
|
|
100
|
+
|
|
101
|
+
## Examples
|
|
102
|
+
|
|
103
|
+
- Kepler example app: https://github.com/sqlrooms/examples/tree/main/kepler
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomInteractionManager.d.ts","sourceRoot":"","sources":["../../src/components/CustomInteractionManager.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"CustomInteractionManager.d.ts","sourceRoot":"","sources":["../../src/components/CustomInteractionManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AA2FlD,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CA6E9D,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback } from 'react';
|
|
2
|
+
import { useCallback, useMemo } from 'react';
|
|
3
3
|
import { Switch, Checkbox, useTheme } from '@sqlrooms/ui';
|
|
4
4
|
import { FormattedMessage } from '@kepler.gl/localization';
|
|
5
5
|
import { useKeplerStateActions } from '../hooks/useKeplerStateActions';
|
|
@@ -18,7 +18,7 @@ const TooltipPanel = ({ tooltipConfig, coordinateConfig, datasets, isDark, handl
|
|
|
18
18
|
}, [handleConfigChange]);
|
|
19
19
|
if (!tooltipConfig)
|
|
20
20
|
return null;
|
|
21
|
-
return (_jsxs("div", { children: [_jsx(SimpleInteractionPanel, { configId: "tooltip", config: tooltipConfig, label: "Tooltip", onConfigChange: handleConfigChange }), tooltipConfig.enabled && (_jsxs("div", { className: "pl-4
|
|
21
|
+
return (_jsxs("div", { children: [_jsx(SimpleInteractionPanel, { configId: "tooltip", config: tooltipConfig, label: "Tooltip", onConfigChange: handleConfigChange }), tooltipConfig.enabled && (_jsxs("div", { className: "pr-2 pl-4", 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 })] }))] }));
|
|
22
22
|
};
|
|
23
23
|
export const CustomInteractionManager = ({ mapId, }) => {
|
|
24
24
|
const { keplerActions, keplerState } = useKeplerStateActions({ mapId });
|
|
@@ -27,7 +27,8 @@ export const CustomInteractionManager = ({ mapId, }) => {
|
|
|
27
27
|
const isDark = theme === 'dark' ||
|
|
28
28
|
(theme === 'system' &&
|
|
29
29
|
window.matchMedia('(prefers-color-scheme: dark)').matches);
|
|
30
|
-
const
|
|
30
|
+
const rawInteractionConfig = keplerState?.visState.interactionConfig;
|
|
31
|
+
const interactionConfig = useMemo(() => rawInteractionConfig ?? {}, [rawInteractionConfig]);
|
|
31
32
|
const datasets = keplerState?.visState.datasets || {};
|
|
32
33
|
const { interactionConfigChange, setColumnDisplayFormat } = keplerActions.visStateActions;
|
|
33
34
|
const handleConfigChange = useCallback((configId, newConfig) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomInteractionManager.js","sourceRoot":"","sources":["../../src/components/CustomInteractionManager.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAC,WAAW,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CustomInteractionManager.js","sourceRoot":"","sources":["../../src/components/CustomInteractionManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport {Switch, Checkbox, useTheme} from '@sqlrooms/ui';\n\nimport {InteractionConfig} from '@kepler.gl/types';\nimport {FormattedMessage} from '@kepler.gl/localization';\n\nimport {useKeplerStateActions} from '../hooks/useKeplerStateActions';\nimport {CustomTooltipConfig} from './CustomTooltipConfig';\n\nconst SimpleInteractionPanel: React.FC<{\n configId: string;\n config: any;\n label: string;\n onConfigChange: (configId: string, newConfig: any) => void;\n}> = ({configId, config, label, onConfigChange}) => {\n const toggleEnableConfig = useCallback(() => {\n onConfigChange(configId, {\n enabled: !config.enabled,\n });\n }, [configId, config.enabled, onConfigChange]);\n\n return (\n <div className=\"flex items-center justify-between p-2\">\n <div className=\"text-muted-foreground text-sm font-medium\">{label}</div>\n <Switch\n checked={config.enabled}\n onCheckedChange={toggleEnableConfig}\n className=\"data-[state=checked]:bg-primary data-[state=unchecked]:bg-secondary\"\n />\n </div>\n );\n};\n\nconst TooltipPanel: React.FC<{\n tooltipConfig: any;\n coordinateConfig: any;\n datasets: any;\n isDark: boolean;\n handleConfigChange: (configId: string, newConfig: any) => void;\n handleCoordinateToggle: () => void;\n setColumnDisplayFormat: (format: any) => void;\n}> = ({\n tooltipConfig,\n coordinateConfig,\n datasets,\n isDark,\n handleConfigChange,\n handleCoordinateToggle,\n setColumnDisplayFormat,\n}) => {\n const handleTooltipConfigChange = useCallback(\n (newConfig: any) => {\n handleConfigChange('tooltip', {config: newConfig});\n },\n [handleConfigChange],\n );\n\n if (!tooltipConfig) return null;\n return (\n <div>\n <SimpleInteractionPanel\n configId=\"tooltip\"\n config={tooltipConfig}\n label=\"Tooltip\"\n onConfigChange={handleConfigChange}\n />\n {tooltipConfig.enabled && (\n <div className=\"pr-2 pl-4\">\n <div className=\"flex items-center space-x-2 py-2\">\n <Checkbox\n checked={coordinateConfig?.enabled || false}\n onCheckedChange={handleCoordinateToggle}\n className=\"shadow-none\"\n />\n <span className=\"text-muted-foreground text-xs\">\n Show <FormattedMessage id=\"interactions.coordinate\" />\n </span>\n </div>\n <CustomTooltipConfig\n datasets={datasets}\n config={tooltipConfig.config}\n onChange={handleTooltipConfigChange}\n onDisplayFormatChange={setColumnDisplayFormat}\n isDark={isDark}\n />\n </div>\n )}\n </div>\n );\n};\n\nexport const CustomInteractionManager: React.FC<{mapId: string}> = ({\n mapId,\n}) => {\n const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n const {theme} = useTheme();\n\n // Determine if dark mode is active\n const isDark =\n theme === 'dark' ||\n (theme === 'system' &&\n window.matchMedia('(prefers-color-scheme: dark)').matches);\n\n const rawInteractionConfig = keplerState?.visState.interactionConfig;\n const interactionConfig = useMemo<Partial<InteractionConfig>>(\n () => rawInteractionConfig ?? {},\n [rawInteractionConfig],\n );\n const datasets = keplerState?.visState.datasets || {};\n const {interactionConfigChange, setColumnDisplayFormat} =\n keplerActions.visStateActions;\n\n const handleConfigChange = useCallback(\n (configId: string, newConfig: any) => {\n const currentConfig =\n interactionConfig[configId as keyof InteractionConfig];\n if (currentConfig && typeof currentConfig === 'object') {\n interactionConfigChange({\n ...currentConfig,\n ...newConfig,\n });\n }\n },\n [interactionConfig, interactionConfigChange],\n );\n\n // Handle coordinate display toggle\n const handleCoordinateToggle = useCallback(() => {\n const coordinateConfig = interactionConfig.coordinate;\n if (coordinateConfig && typeof coordinateConfig === 'object') {\n interactionConfigChange({\n ...coordinateConfig,\n enabled: !coordinateConfig.enabled,\n });\n }\n }, [interactionConfig.coordinate, interactionConfigChange]);\n\n return (\n <div className=\"interaction-manager\">\n <div className=\"space-y-2\">\n <TooltipPanel\n tooltipConfig={interactionConfig.tooltip}\n coordinateConfig={interactionConfig.coordinate}\n datasets={datasets}\n isDark={isDark}\n handleConfigChange={handleConfigChange}\n handleCoordinateToggle={handleCoordinateToggle}\n setColumnDisplayFormat={setColumnDisplayFormat}\n />\n {interactionConfig.geocoder && (\n <SimpleInteractionPanel\n configId=\"geocoder\"\n config={interactionConfig.geocoder}\n label=\"Location search\"\n onConfigChange={handleConfigChange}\n />\n )}\n {interactionConfig.brush && (\n <SimpleInteractionPanel\n configId=\"brush\"\n config={interactionConfig.brush}\n label=\"Brush filter\"\n onConfigChange={handleConfigChange}\n />\n )}\n </div>\n </div>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomMapLegend.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapLegend.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,cAAc,EAAC,MAAM,2CAA2C,CAAC;AAgCzE,wBAAgB,sBAAsB,CACpC,iBAAiB,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,EAC9D,kBAAkB,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,
|
|
1
|
+
{"version":3,"file":"CustomMapLegend.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapLegend.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,cAAc,EAAC,MAAM,2CAA2C,CAAC;AAgCzE,wBAAgB,sBAAsB,CACpC,iBAAiB,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,EAC9D,kBAAkB,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,sCAsJjE;yBAxJe,sBAAsB"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
// SPDX-License-Identifier: MIT
|
|
3
3
|
// Copyright contributors to the kepler.gl project
|
|
4
|
-
import {
|
|
4
|
+
import { toggleMapControl } from '@kepler.gl/actions';
|
|
5
5
|
import { KeplerGlContext, LayerLegendContentFactory, LayerLegendHeaderFactory, } from '@kepler.gl/components';
|
|
6
6
|
import { DIMENSIONS } from '@kepler.gl/constants';
|
|
7
7
|
import { Button } from '@sqlrooms/ui';
|
|
8
|
-
import { ArrowDown, ArrowRight, ChevronDownIcon, ChevronRightIcon,
|
|
8
|
+
import { ArrowDown, ArrowRight, ChevronDownIcon, ChevronRightIcon, XIcon, } from 'lucide-react';
|
|
9
9
|
import { useCallback, useContext, useRef, useState, } from 'react';
|
|
10
10
|
import { useStoreWithKepler } from '../KeplerSlice';
|
|
11
11
|
const defaultActionIcons = {
|
|
@@ -17,7 +17,7 @@ CustomMapLegendFactory.deps = [
|
|
|
17
17
|
LayerLegendContentFactory,
|
|
18
18
|
];
|
|
19
19
|
export function CustomMapLegendFactory(LayerLegendHeader, LayerLegendContent) {
|
|
20
|
-
const MapLegend = ({ layers = [], width, ...restProps }) => {
|
|
20
|
+
const MapLegend = ({ layers = [], width, isExport, ...restProps }) => {
|
|
21
21
|
const containerW = width || DIMENSIONS.mapControl.width;
|
|
22
22
|
const mapId = useContext(KeplerGlContext).id;
|
|
23
23
|
const dispatchAction = useStoreWithKepler((state) => state.kepler.dispatchAction);
|
|
@@ -25,8 +25,10 @@ export function CustomMapLegendFactory(LayerLegendHeader, LayerLegendContent) {
|
|
|
25
25
|
evt.stopPropagation();
|
|
26
26
|
dispatchAction(mapId, toggleMapControl('mapLegend', 0));
|
|
27
27
|
};
|
|
28
|
-
return (_jsx("div", { className: "map-legend border-border border", style: { width: containerW }, children: _jsxs("div", { className: "relative flex flex-col", children: [_jsxs("div", { className: "border-muted bg-background sticky top-0 flex w-full items-center justify-between border-b p-2", children: [_jsx("div", { className: "text-xs font-medium", children: "
|
|
29
|
-
|
|
28
|
+
return (_jsx("div", { className: "map-legend border-border border", style: { width: containerW }, children: _jsxs("div", { className: "relative flex flex-col", children: [!isExport && (_jsxs("div", { className: "border-muted bg-background sticky top-0 flex w-full items-center justify-between border-b p-2", children: [_jsx("div", { className: "text-xs font-medium", children: "Legend" }), _jsx(Button, { variant: "ghost", size: "xs", className: "h-6 w-6", onClick: handleClose, children: _jsx(XIcon, { className: "h-4 w-4" }) })] })), _jsx("div", { className: "flex w-full flex-1 flex-col items-center", children: layers
|
|
29
|
+
.filter((layer) => layer.config.isVisible)
|
|
30
|
+
.map((layer, index) => {
|
|
31
|
+
return (_jsx(LayerLegendItem, { layer: layer, containerW: containerW, isExport: isExport, ...restProps }, index));
|
|
30
32
|
}) })] }) }));
|
|
31
33
|
};
|
|
32
34
|
const LayerLegendItem = ({ layer, containerW, isExport, mapState, disableEdit, onLayerVisConfigChange, }) => {
|
|
@@ -51,18 +53,13 @@ export function CustomMapLegendFactory(LayerLegendHeader, LayerLegendContent) {
|
|
|
51
53
|
};
|
|
52
54
|
const mapId = useContext(KeplerGlContext).id;
|
|
53
55
|
const containerRef = useRef(null);
|
|
54
|
-
const handleToggleVisibility = (evt) => {
|
|
55
|
-
evt.stopPropagation();
|
|
56
|
-
const nextVisible = !layer.config.isVisible;
|
|
57
|
-
dispatchAction(mapId, layerConfigChange(layer, { isVisible: nextVisible }));
|
|
58
|
-
};
|
|
59
56
|
if (!layer.isValidToSave() || layer.config.hidden) {
|
|
60
57
|
return null;
|
|
61
58
|
}
|
|
62
59
|
if (isExport && !layer.config.isVisible) {
|
|
63
60
|
return null;
|
|
64
61
|
}
|
|
65
|
-
return (_jsxs("div", { ref: containerRef, className: "border-muted flex w-full flex-col items-center border-b", children: [_jsx("style", { children: `.legend--layer__item .panel--header__action { display: none !important; }` }), _jsxs("div", { className: "flex w-full flex-row items-center gap-2", onClick: handleToggleExpanded, children: [_jsx("div", { className: "cursor-pointer items-center overflow-hidden p-2 text-xs text-ellipsis whitespace-nowrap select-none", children: layer.config.label }), _jsx("div", { className: "flex-1" }),
|
|
62
|
+
return (_jsxs("div", { ref: containerRef, className: "border-muted flex w-full flex-col items-center border-b", children: [_jsx("style", { children: `.legend--layer__item .panel--header__action { display: none !important; }` }), _jsxs("div", { className: "flex w-full flex-row items-center gap-2", onClick: handleToggleExpanded, children: [_jsx("div", { className: "cursor-pointer items-center overflow-hidden p-2 text-xs text-ellipsis whitespace-nowrap select-none", children: layer.config.label }), _jsx("div", { className: "flex-1" }), _jsx("div", { className: "flex flex-row items-center justify-end gap-1", children: _jsx(Button, { className: "h-7 w-7", variant: "ghost", size: "icon", onClick: handleToggleExpanded, children: isExpanded ? (_jsx(ChevronDownIcon, { className: "h-4 w-4" })) : (_jsx(ChevronRightIcon, { className: "h-4 w-4" })) }) })] }), isExpanded && (_jsx("div", { className: "w-full px-[8px] py-[5px] text-xs", children: _jsx(LayerLegendContent, { containerW: containerW, layer: layer, mapState: mapState, disableEdit: disableEdit, isExport: isExport, onLayerVisConfigChange: onLayerVisConfigChange, actionIcons: defaultActionIcons }) }))] }));
|
|
66
63
|
};
|
|
67
64
|
MapLegend.displayName = 'MapLegend';
|
|
68
65
|
return MapLegend;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomMapLegend.js","sourceRoot":"","sources":["../../src/components/CustomMapLegend.tsx"],"names":[],"mappings":"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","sourcesContent":["// SPDX-License-Identifier: MIT\n// Copyright contributors to the kepler.gl project\n\nimport {layerConfigChange, toggleMapControl} from '@kepler.gl/actions';\nimport {\n KeplerGlContext,\n LayerLegendContentFactory,\n LayerLegendHeaderFactory,\n} from '@kepler.gl/components';\nimport {MapLegendProps} from '@kepler.gl/components/dist/map/map-legend';\nimport {DIMENSIONS} from '@kepler.gl/constants';\nimport {Layer} from '@kepler.gl/layers';\nimport {Button} from '@sqlrooms/ui';\nimport {\n ArrowDown,\n ArrowRight,\n ChevronDownIcon,\n ChevronRightIcon,\n EyeIcon,\n EyeOffIcon,\n XIcon,\n} from 'lucide-react';\nimport {\n MouseEventHandler,\n useCallback,\n useContext,\n useRef,\n useState,\n} from 'react';\nimport {useStoreWithKepler} from '../KeplerSlice';\n\nconst defaultActionIcons = {\n expanded: ArrowDown,\n collapsed: ArrowRight,\n};\n\nCustomMapLegendFactory.deps = [\n LayerLegendHeaderFactory,\n LayerLegendContentFactory,\n];\n\nexport function CustomMapLegendFactory(\n LayerLegendHeader: ReturnType<typeof LayerLegendHeaderFactory>,\n LayerLegendContent: ReturnType<typeof LayerLegendContentFactory>,\n) {\n const MapLegend: React.FC<MapLegendProps> = ({\n layers = [],\n width,\n ...restProps\n }) => {\n const containerW = width || DIMENSIONS.mapControl.width;\n const mapId = useContext(KeplerGlContext).id;\n const dispatchAction = useStoreWithKepler(\n (state) => state.kepler.dispatchAction,\n );\n const handleClose = (evt: React.MouseEvent<HTMLButtonElement>) => {\n evt.stopPropagation();\n dispatchAction(mapId, toggleMapControl('mapLegend', 0));\n };\n\n return (\n <div\n className=\"map-legend border-border border\"\n style={{width: containerW}}\n >\n <div className=\"relative flex flex-col\">\n <div className=\"border-muted bg-background sticky top-0 flex w-full items-center justify-between border-b p-2\">\n <div className=\"text-xs font-medium\">Map Layers</div>\n <Button\n variant=\"ghost\"\n size=\"xs\"\n className=\"h-6 w-6\"\n onClick={handleClose}\n >\n <XIcon className=\"h-4 w-4\" />\n </Button>\n </div>\n <div className=\"flex w-full flex-1 flex-col items-center\">\n {layers.map((layer, index) => {\n return (\n <LayerLegendItem\n key={index}\n layer={layer}\n containerW={containerW}\n {...restProps}\n />\n );\n })}\n </div>\n </div>\n </div>\n );\n };\n\n const LayerLegendItem = ({\n layer,\n containerW,\n isExport,\n mapState,\n disableEdit,\n onLayerVisConfigChange,\n }: {layer: Layer; containerW: number} & MapLegendProps) => {\n const [isExpanded, setIsExpanded] = useState(layer.config.isVisible);\n\n const dispatchAction = useStoreWithKepler(\n (state) => state.kepler.dispatchAction,\n );\n const scrollIntoView = useCallback(() => {\n requestAnimationFrame(() => {\n containerRef.current?.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'nearest',\n });\n });\n }, []);\n\n const handleToggleExpanded: MouseEventHandler<HTMLElement> = (evt) => {\n evt.stopPropagation();\n const nextExpanded = !isExpanded;\n setIsExpanded(nextExpanded);\n if (!isExpanded) {\n scrollIntoView();\n }\n };\n\n const mapId = useContext(KeplerGlContext).id;\n const containerRef = useRef<HTMLDivElement>(null);\n const handleToggleVisibility = (\n evt: React.MouseEvent<HTMLButtonElement>,\n ) => {\n evt.stopPropagation();\n const nextVisible = !layer.config.isVisible;\n dispatchAction(mapId, layerConfigChange(layer, {isVisible: nextVisible}));\n };\n\n if (!layer.isValidToSave() || layer.config.hidden) {\n return null;\n }\n\n if (isExport && !layer.config.isVisible) {\n return null;\n }\n\n return (\n <div\n ref={containerRef}\n className=\"border-muted flex w-full flex-col items-center border-b\"\n >\n <style>{`.legend--layer__item .panel--header__action { display: none !important; }`}</style>\n <div\n className=\"flex w-full flex-row items-center gap-2\"\n onClick={handleToggleExpanded}\n >\n <div className=\"cursor-pointer items-center overflow-hidden p-2 text-xs text-ellipsis whitespace-nowrap select-none\">\n {layer.config.label}\n </div>\n <div className=\"flex-1\" />\n <div className=\"flex flex-row items-center justify-end gap-1\">\n <Button\n className=\"h-7 w-7\"\n variant=\"ghost\"\n size=\"icon\"\n onClick={handleToggleVisibility}\n >\n {layer.config.isVisible ? (\n <EyeIcon className=\"h-4 w-4\" />\n ) : (\n <EyeOffIcon className=\"h-4 w-4\" />\n )}\n </Button>\n <Button\n className=\"h-7 w-7\"\n variant=\"ghost\"\n size=\"icon\"\n onClick={handleToggleExpanded}\n >\n {isExpanded ? (\n <ChevronDownIcon className=\"h-4 w-4\" />\n ) : (\n <ChevronRightIcon className=\"h-4 w-4\" />\n )}\n </Button>\n </div>\n </div>\n\n {isExpanded && (\n <div className=\"w-full px-[8px] py-[5px] text-xs\">\n <LayerLegendContent\n containerW={containerW}\n layer={layer}\n mapState={mapState}\n disableEdit={disableEdit}\n isExport={isExport}\n onLayerVisConfigChange={onLayerVisConfigChange}\n actionIcons={defaultActionIcons}\n />\n </div>\n )}\n </div>\n );\n };\n\n MapLegend.displayName = 'MapLegend';\n\n return MapLegend;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"CustomMapLegend.js","sourceRoot":"","sources":["../../src/components/CustomMapLegend.tsx"],"names":[],"mappings":"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","sourcesContent":["// SPDX-License-Identifier: MIT\n// Copyright contributors to the kepler.gl project\n\nimport {layerConfigChange, toggleMapControl} from '@kepler.gl/actions';\nimport {\n KeplerGlContext,\n LayerLegendContentFactory,\n LayerLegendHeaderFactory,\n} from '@kepler.gl/components';\nimport {MapLegendProps} from '@kepler.gl/components/dist/map/map-legend';\nimport {DIMENSIONS} from '@kepler.gl/constants';\nimport {Layer} from '@kepler.gl/layers';\nimport {Button} from '@sqlrooms/ui';\nimport {\n ArrowDown,\n ArrowRight,\n ChevronDownIcon,\n ChevronRightIcon,\n EyeIcon,\n EyeOffIcon,\n XIcon,\n} from 'lucide-react';\nimport {\n MouseEventHandler,\n useCallback,\n useContext,\n useRef,\n useState,\n} from 'react';\nimport {useStoreWithKepler} from '../KeplerSlice';\n\nconst defaultActionIcons = {\n expanded: ArrowDown,\n collapsed: ArrowRight,\n};\n\nCustomMapLegendFactory.deps = [\n LayerLegendHeaderFactory,\n LayerLegendContentFactory,\n];\n\nexport function CustomMapLegendFactory(\n LayerLegendHeader: ReturnType<typeof LayerLegendHeaderFactory>,\n LayerLegendContent: ReturnType<typeof LayerLegendContentFactory>,\n) {\n const MapLegend: React.FC<MapLegendProps> = ({\n layers = [],\n width,\n isExport,\n ...restProps\n }) => {\n const containerW = width || DIMENSIONS.mapControl.width;\n const mapId = useContext(KeplerGlContext).id;\n const dispatchAction = useStoreWithKepler(\n (state) => state.kepler.dispatchAction,\n );\n const handleClose = (evt: React.MouseEvent<HTMLButtonElement>) => {\n evt.stopPropagation();\n dispatchAction(mapId, toggleMapControl('mapLegend', 0));\n };\n\n return (\n <div\n className=\"map-legend border-border border\"\n style={{width: containerW}}\n >\n <div className=\"relative flex flex-col\">\n {!isExport && (\n <div className=\"border-muted bg-background sticky top-0 flex w-full items-center justify-between border-b p-2\">\n <div className=\"text-xs font-medium\">Legend</div>\n <Button\n variant=\"ghost\"\n size=\"xs\"\n className=\"h-6 w-6\"\n onClick={handleClose}\n >\n <XIcon className=\"h-4 w-4\" />\n </Button>\n </div>\n )}\n <div className=\"flex w-full flex-1 flex-col items-center\">\n {layers\n .filter((layer) => layer.config.isVisible)\n .map((layer, index) => {\n return (\n <LayerLegendItem\n key={index}\n layer={layer}\n containerW={containerW}\n isExport={isExport}\n {...restProps}\n />\n );\n })}\n </div>\n </div>\n </div>\n );\n };\n\n const LayerLegendItem = ({\n layer,\n containerW,\n isExport,\n mapState,\n disableEdit,\n onLayerVisConfigChange,\n }: {layer: Layer; containerW: number} & MapLegendProps) => {\n const [isExpanded, setIsExpanded] = useState(layer.config.isVisible);\n\n const dispatchAction = useStoreWithKepler(\n (state) => state.kepler.dispatchAction,\n );\n const scrollIntoView = useCallback(() => {\n requestAnimationFrame(() => {\n containerRef.current?.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'nearest',\n });\n });\n }, []);\n\n const handleToggleExpanded: MouseEventHandler<HTMLElement> = (evt) => {\n evt.stopPropagation();\n const nextExpanded = !isExpanded;\n setIsExpanded(nextExpanded);\n if (!isExpanded) {\n scrollIntoView();\n }\n };\n\n const mapId = useContext(KeplerGlContext).id;\n const containerRef = useRef<HTMLDivElement>(null);\n\n if (!layer.isValidToSave() || layer.config.hidden) {\n return null;\n }\n\n if (isExport && !layer.config.isVisible) {\n return null;\n }\n\n return (\n <div\n ref={containerRef}\n className=\"border-muted flex w-full flex-col items-center border-b\"\n >\n <style>{`.legend--layer__item .panel--header__action { display: none !important; }`}</style>\n <div\n className=\"flex w-full flex-row items-center gap-2\"\n onClick={handleToggleExpanded}\n >\n <div className=\"cursor-pointer items-center overflow-hidden p-2 text-xs text-ellipsis whitespace-nowrap select-none\">\n {layer.config.label}\n </div>\n <div className=\"flex-1\" />\n <div className=\"flex flex-row items-center justify-end gap-1\">\n <Button\n className=\"h-7 w-7\"\n variant=\"ghost\"\n size=\"icon\"\n onClick={handleToggleExpanded}\n >\n {isExpanded ? (\n <ChevronDownIcon className=\"h-4 w-4\" />\n ) : (\n <ChevronRightIcon className=\"h-4 w-4\" />\n )}\n </Button>\n </div>\n </div>\n\n {isExpanded && (\n <div className=\"w-full px-[8px] py-[5px] text-xs\">\n <LayerLegendContent\n containerW={containerW}\n layer={layer}\n mapState={mapState}\n disableEdit={disableEdit}\n isExport={isExport}\n onLayerVisConfigChange={onLayerVisConfigChange}\n actionIcons={defaultActionIcons}\n />\n </div>\n )}\n </div>\n );\n };\n\n MapLegend.displayName = 'MapLegend';\n\n return MapLegend;\n}\n"]}
|
|
@@ -58,7 +58,7 @@ const MapStyleDropdown = ({ mapStyle, onChange, customMapStylesActions }) => {
|
|
|
58
58
|
const { mapStyles, styleType } = mapStyle;
|
|
59
59
|
const currentStyle = mapStyles[styleType];
|
|
60
60
|
const handleStyleSelect = (styleId) => onChange(styleId);
|
|
61
|
-
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-
|
|
61
|
+
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-(--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 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) => {
|
|
62
62
|
e.stopPropagation();
|
|
63
63
|
action.onClick();
|
|
64
64
|
}, 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))) })] }) }));
|
|
@@ -1 +1 @@
|
|
|
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 {getKeplerFactory} 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 = getKeplerFactory(LayerGroupSelectorFactory);\nconst PanelTitle = getKeplerFactory(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 // Custom map styles actions (for delete functionality)\n const customMapStylesActions = useMemo(() => {\n const actionsPerCustomStyle: any = {};\n Object.values(keplerState?.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 }, [keplerState?.mapStyle.mapStyles, onRemoveCustomMapStyle]);\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 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"]}
|
|
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 {getKeplerFactory} 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 = getKeplerFactory(LayerGroupSelectorFactory);\nconst PanelTitle = getKeplerFactory(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-(--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 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 // Custom map styles actions (for delete functionality)\n const customMapStylesActions = useMemo(() => {\n const actionsPerCustomStyle: any = {};\n Object.values(keplerState?.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 }, [keplerState?.mapStyle.mapStyles, onRemoveCustomMapStyle]);\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 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"]}
|
|
@@ -56,6 +56,6 @@ export const KeplerAddDataDialog = ({ addDataModal, loadTileSet, loadFiles, list
|
|
|
56
56
|
await loadS3Files(...args);
|
|
57
57
|
addDataModal.onClose();
|
|
58
58
|
}, [loadS3Files, addDataModal]);
|
|
59
|
-
return (_jsx(KeplerProvider, { mapId: '', children: _jsx(Dialog, { open: addDataModal.isOpen, onOpenChange: (isOpen) => !isOpen && addDataModal.onClose(), children: _jsxs(DialogContent, { className: "
|
|
59
|
+
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 }) })] })] }) }) }));
|
|
60
60
|
};
|
|
61
61
|
//# sourceMappingURL=KeplerAddDataDialog.js.map
|
|
@@ -1 +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=\"
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/kepler",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.28.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -34,11 +34,11 @@
|
|
|
34
34
|
"@kepler.gl/types": "3.2.4",
|
|
35
35
|
"@kepler.gl/utils": "3.2.4",
|
|
36
36
|
"@paralleldrive/cuid2": "^3.0.0",
|
|
37
|
-
"@sqlrooms/duckdb": "0.
|
|
38
|
-
"@sqlrooms/kepler-config": "0.
|
|
39
|
-
"@sqlrooms/room-shell": "0.
|
|
40
|
-
"@sqlrooms/s3-browser": "0.
|
|
41
|
-
"@sqlrooms/ui": "0.
|
|
37
|
+
"@sqlrooms/duckdb": "0.28.0",
|
|
38
|
+
"@sqlrooms/kepler-config": "0.28.0",
|
|
39
|
+
"@sqlrooms/room-shell": "0.28.0",
|
|
40
|
+
"@sqlrooms/s3-browser": "0.28.0",
|
|
41
|
+
"@sqlrooms/ui": "0.28.0",
|
|
42
42
|
"apache-arrow": "17.0.0",
|
|
43
43
|
"immer": "^11.0.1",
|
|
44
44
|
"lucide-react": "^0.556.0",
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@types/redux-logger": "^3.0.13"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "dcac54f8adf77240e293c93d224a0ce9fd8142a9"
|
|
66
66
|
}
|