@sqlrooms/kepler 0.27.0-rc.0 → 0.27.0-rc.2
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/dist/components/CustomMapLegend.d.ts +7 -0
- package/dist/components/CustomMapLegend.d.ts.map +1 -0
- package/dist/components/CustomMapLegend.js +70 -0
- package/dist/components/CustomMapLegend.js.map +1 -0
- package/dist/components/CustomMapLegendPanel.d.ts +6 -0
- package/dist/components/CustomMapLegendPanel.d.ts.map +1 -0
- package/dist/components/CustomMapLegendPanel.js +12 -0
- package/dist/components/CustomMapLegendPanel.js.map +1 -0
- package/dist/components/KeplerInjector.d.ts.map +1 -1
- package/dist/components/KeplerInjector.js +5 -1
- package/dist/components/KeplerInjector.js.map +1 -1
- package/dist/components/KeplerMapContainer.d.ts.map +1 -1
- package/dist/components/KeplerMapContainer.js +14 -2
- package/dist/components/KeplerMapContainer.js.map +1 -1
- package/package.json +7 -7
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { LayerLegendContentFactory, LayerLegendHeaderFactory } from '@kepler.gl/components';
|
|
2
|
+
import { MapLegendProps } from '@kepler.gl/components/dist/map/map-legend';
|
|
3
|
+
export declare function CustomMapLegendFactory(LayerLegendHeader: ReturnType<typeof LayerLegendHeaderFactory>, LayerLegendContent: ReturnType<typeof LayerLegendContentFactory>): import("react").FC<MapLegendProps>;
|
|
4
|
+
export declare namespace CustomMapLegendFactory {
|
|
5
|
+
var deps: (typeof LayerLegendHeaderFactory | typeof LayerLegendContentFactory)[];
|
|
6
|
+
}
|
|
7
|
+
//# sourceMappingURL=CustomMapLegend.d.ts.map
|
|
@@ -0,0 +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,sCAgKjE;yBAlKe,sBAAsB"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright contributors to the kepler.gl project
|
|
4
|
+
import { layerConfigChange, toggleMapControl } from '@kepler.gl/actions';
|
|
5
|
+
import { KeplerGlContext, LayerLegendContentFactory, LayerLegendHeaderFactory, } from '@kepler.gl/components';
|
|
6
|
+
import { DIMENSIONS } from '@kepler.gl/constants';
|
|
7
|
+
import { Button } from '@sqlrooms/ui';
|
|
8
|
+
import { ArrowDown, ArrowRight, ChevronDownIcon, ChevronRightIcon, EyeIcon, EyeOffIcon, XIcon, } from 'lucide-react';
|
|
9
|
+
import { useCallback, useContext, useRef, useState, } from 'react';
|
|
10
|
+
import { useStoreWithKepler } from '../KeplerSlice';
|
|
11
|
+
const defaultActionIcons = {
|
|
12
|
+
expanded: ArrowDown,
|
|
13
|
+
collapsed: ArrowRight,
|
|
14
|
+
};
|
|
15
|
+
CustomMapLegendFactory.deps = [
|
|
16
|
+
LayerLegendHeaderFactory,
|
|
17
|
+
LayerLegendContentFactory,
|
|
18
|
+
];
|
|
19
|
+
export function CustomMapLegendFactory(LayerLegendHeader, LayerLegendContent) {
|
|
20
|
+
const MapLegend = ({ layers = [], width, ...restProps }) => {
|
|
21
|
+
const containerW = width || DIMENSIONS.mapControl.width;
|
|
22
|
+
const mapId = useContext(KeplerGlContext).id;
|
|
23
|
+
const dispatchAction = useStoreWithKepler((state) => state.kepler.dispatchAction);
|
|
24
|
+
const handleClose = (evt) => {
|
|
25
|
+
evt.stopPropagation();
|
|
26
|
+
dispatchAction(mapId, toggleMapControl('mapLegend', 0));
|
|
27
|
+
};
|
|
28
|
+
return (_jsx("div", { className: "map-legend", 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: "Map Layers" }), _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.map((layer, index) => {
|
|
29
|
+
return (_jsx(LayerLegendItem, { layer: layer, containerW: containerW, ...restProps }, index));
|
|
30
|
+
}) })] }) }));
|
|
31
|
+
};
|
|
32
|
+
const LayerLegendItem = ({ layer, containerW, isExport, mapState, disableEdit, onLayerVisConfigChange, }) => {
|
|
33
|
+
const [isExpanded, setIsExpanded] = useState(layer.config.isVisible);
|
|
34
|
+
const dispatchAction = useStoreWithKepler((state) => state.kepler.dispatchAction);
|
|
35
|
+
const scrollIntoView = useCallback(() => {
|
|
36
|
+
requestAnimationFrame(() => {
|
|
37
|
+
containerRef.current?.scrollIntoView({
|
|
38
|
+
behavior: 'smooth',
|
|
39
|
+
block: 'nearest',
|
|
40
|
+
inline: 'nearest',
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
}, []);
|
|
44
|
+
const handleToggleExpanded = (evt) => {
|
|
45
|
+
evt.stopPropagation();
|
|
46
|
+
const nextExpanded = !isExpanded;
|
|
47
|
+
setIsExpanded(nextExpanded);
|
|
48
|
+
if (!isExpanded) {
|
|
49
|
+
scrollIntoView();
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
const mapId = useContext(KeplerGlContext).id;
|
|
53
|
+
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
|
+
if (!layer.isValidToSave() || layer.config.hidden) {
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
if (isExport && !layer.config.isVisible) {
|
|
63
|
+
return null;
|
|
64
|
+
}
|
|
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 select-none items-center overflow-hidden text-ellipsis whitespace-nowrap p-2 text-xs", children: layer.config.label }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1", children: [_jsx(Button, { className: "h-7 w-7", variant: "ghost", size: "icon", onClick: handleToggleVisibility, children: layer.config.isVisible ? (_jsx(EyeIcon, { className: "h-4 w-4" })) : (_jsx(EyeOffIcon, { className: "h-4 w-4" })) }), _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
|
+
};
|
|
67
|
+
MapLegend.displayName = 'MapLegend';
|
|
68
|
+
return MapLegend;
|
|
69
|
+
}
|
|
70
|
+
//# sourceMappingURL=CustomMapLegend.js.map
|
|
@@ -0,0 +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 className=\"map-legend\" style={{width: containerW}}>\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 select-none items-center overflow-hidden text-ellipsis whitespace-nowrap p-2 text-xs\">\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"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { MapLegendPanelFactory } from '@kepler.gl/components';
|
|
2
|
+
export declare function CustomMapLegendPanelFactory(...deps: Parameters<typeof MapLegendPanelFactory>): ReturnType<typeof MapLegendPanelFactory>;
|
|
3
|
+
export declare namespace CustomMapLegendPanelFactory {
|
|
4
|
+
var deps: (typeof import("@kepler.gl/components").MapControlTooltipFactory | typeof import("@kepler.gl/components").MapControlPanelFactory | typeof import("@kepler.gl/components").MapLegendFactory)[];
|
|
5
|
+
}
|
|
6
|
+
//# sourceMappingURL=CustomMapLegendPanel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CustomMapLegendPanel.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapLegendPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EAEtB,MAAM,uBAAuB,CAAC;AAI/B,wBAAgB,2BAA2B,CACzC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,GAChD,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAY1C;yBAde,2BAA2B"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { MapLegendPanelFactory, } from '@kepler.gl/components';
|
|
3
|
+
CustomMapLegendPanelFactory.deps = MapLegendPanelFactory.deps;
|
|
4
|
+
export function CustomMapLegendPanelFactory(...deps) {
|
|
5
|
+
const MapLegendPanel = MapLegendPanelFactory(...deps);
|
|
6
|
+
const CustomMapLegendPanel = (props) => {
|
|
7
|
+
return (_jsxs(_Fragment, { children: [_jsx("style", { children: `.draggable-legend .map-control__panel-header { display: none !important; }` }), _jsx(MapLegendPanel, { ...props })] }));
|
|
8
|
+
};
|
|
9
|
+
CustomMapLegendPanel.displayName = 'CustomMapLegendPanel';
|
|
10
|
+
return CustomMapLegendPanel;
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=CustomMapLegendPanel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CustomMapLegendPanel.js","sourceRoot":"","sources":["../../src/components/CustomMapLegendPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,qBAAqB,GAEtB,MAAM,uBAAuB,CAAC;AAE/B,2BAA2B,CAAC,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC;AAE9D,MAAM,UAAU,2BAA2B,CACzC,GAAG,IAA8C;IAEjD,MAAM,cAAc,GAAG,qBAAqB,CAAC,GAAG,IAAI,CAAC,CAAC;IACtD,MAAM,oBAAoB,GAAG,CAAC,KAA0B,EAAE,EAAE;QAC1D,OAAO,CACL,8BACE,0BAAQ,4EAA4E,GAAS,EAC7F,KAAC,cAAc,OAAK,KAAK,GAAI,IAC5B,CACJ,CAAC;IACJ,CAAC,CAAC;IACF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;IAC1D,OAAO,oBAAoB,CAAC;AAC9B,CAAC","sourcesContent":["import {\n MapLegendPanelFactory,\n MapLegendPanelProps,\n} from '@kepler.gl/components';\n\nCustomMapLegendPanelFactory.deps = MapLegendPanelFactory.deps;\n\nexport function CustomMapLegendPanelFactory(\n ...deps: Parameters<typeof MapLegendPanelFactory>\n): ReturnType<typeof MapLegendPanelFactory> {\n const MapLegendPanel = MapLegendPanelFactory(...deps);\n const CustomMapLegendPanel = (props: MapLegendPanelProps) => {\n return (\n <>\n <style>{`.draggable-legend .map-control__panel-header { display: none !important; }`}</style>\n <MapLegendPanel {...props} />\n </>\n );\n };\n CustomMapLegendPanel.displayName = 'CustomMapLegendPanel';\n return CustomMapLegendPanel;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeplerInjector.d.ts","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"KeplerInjector.d.ts","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"AAqCA,eAAO,MAAM,cAAc,8CAAiD,CAAC"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { appInjector, provideRecipesToInjector, AddDataButtonFactory, PanelTitleFactory, DndContextFactory, FilterPanelHeaderFactory, } from '@kepler.gl/components';
|
|
2
|
+
import { appInjector, provideRecipesToInjector, AddDataButtonFactory, PanelTitleFactory, DndContextFactory, FilterPanelHeaderFactory, MapLegendFactory, MapLegendPanelFactory, } from '@kepler.gl/components';
|
|
3
3
|
import { CustomDndContextFactory } from './CustomDndContext';
|
|
4
4
|
import { CustomFilterPanelHeaderFactory } from './CustomFilterPanelHeader';
|
|
5
|
+
import { CustomMapLegendFactory } from './CustomMapLegend';
|
|
6
|
+
import { CustomMapLegendPanelFactory } from './CustomMapLegendPanel';
|
|
5
7
|
const CustomAddDataButtonFactory = () => {
|
|
6
8
|
return () => null;
|
|
7
9
|
};
|
|
@@ -14,6 +16,8 @@ const recipes = [
|
|
|
14
16
|
[PanelTitleFactory, CustomPanelTitleFactory],
|
|
15
17
|
[DndContextFactory, CustomDndContextFactory],
|
|
16
18
|
[FilterPanelHeaderFactory, CustomFilterPanelHeaderFactory],
|
|
19
|
+
[MapLegendPanelFactory, CustomMapLegendPanelFactory],
|
|
20
|
+
[MapLegendFactory, CustomMapLegendFactory],
|
|
17
21
|
];
|
|
18
22
|
export const KeplerInjector = provideRecipesToInjector(recipes, appInjector);
|
|
19
23
|
//# sourceMappingURL=KeplerInjector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeplerInjector.js","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,WAAW,EACX,wBAAwB,EACxB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EAEjB,wBAAwB,
|
|
1
|
+
{"version":3,"file":"KeplerInjector.js","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,WAAW,EACX,wBAAwB,EACxB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EAEjB,wBAAwB,EACxB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,uBAAuB,EAAC,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAC,8BAA8B,EAAC,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAC,2BAA2B,EAAC,MAAM,wBAAwB,CAAC;AAEnE,MAAM,0BAA0B,GAAG,GAAG,EAAE;IACtC,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACnC,MAAM,UAAU,GAAgC,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,CAC9D,cAAK,SAAS,EAAC,+BAA+B,YAAE,QAAQ,GAAO,CAChE,CAAC;IAEF,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AACF,MAAM,OAAO,GAAG;IACd,CAAC,oBAAoB,EAAE,0BAA0B,CAAC;IAClD,CAAC,iBAAiB,EAAE,uBAAuB,CAAC;IAC5C,CAAC,iBAAiB,EAAE,uBAAuB,CAAC;IAC5C,CAAC,wBAAwB,EAAE,8BAA8B,CAAC;IAC1D,CAAC,qBAAqB,EAAE,2BAA2B,CAAC;IACpD,CAAC,gBAAgB,EAAE,sBAAsB,CAAC;CACnB,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,wBAAwB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC","sourcesContent":["import {\n appInjector,\n provideRecipesToInjector,\n AddDataButtonFactory,\n PanelTitleFactory,\n DndContextFactory,\n Factory,\n FilterPanelHeaderFactory,\n MapLegendFactory,\n MapLegendPanelFactory,\n} from '@kepler.gl/components';\nimport React, {PropsWithChildren} from 'react';\nimport {CustomDndContextFactory} from './CustomDndContext';\nimport {CustomFilterPanelHeaderFactory} from './CustomFilterPanelHeader';\nimport {CustomMapLegendFactory} from './CustomMapLegend';\nimport {CustomMapLegendPanelFactory} from './CustomMapLegendPanel';\n\nconst CustomAddDataButtonFactory = () => {\n return () => null;\n};\n\nconst CustomPanelTitleFactory = () => {\n const PanelTitle: React.FC<PropsWithChildren> = ({children}) => (\n <div className=\"flex items-center justify-end\">{children}</div>\n );\n\n return PanelTitle;\n};\nconst recipes = [\n [AddDataButtonFactory, CustomAddDataButtonFactory],\n [PanelTitleFactory, CustomPanelTitleFactory],\n [DndContextFactory, CustomDndContextFactory],\n [FilterPanelHeaderFactory, CustomFilterPanelHeaderFactory],\n [MapLegendPanelFactory, CustomMapLegendPanelFactory],\n [MapLegendFactory, CustomMapLegendFactory],\n] as [Factory, Factory][];\n\nexport const KeplerInjector = provideRecipesToInjector(recipes, appInjector);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeplerMapContainer.d.ts","sourceRoot":"","sources":["../../src/components/KeplerMapContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAuC,MAAM,OAAO,CAAC;
|
|
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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo, useRef, useEffect, useState } from 'react';
|
|
3
3
|
import { MapContainerFactory, BottomWidgetFactory, GeocoderPanelFactory, mapFieldsSelector, bottomWidgetSelector, geoCoderPanelSelector, modalContainerSelector, MapViewStateContextProvider, RootContext, ModalContainerFactory, } from '@kepler.gl/components';
|
|
4
|
-
import { useDimensions } from '@kepler.gl/utils';
|
|
4
|
+
import { useDimensions, getAnimatableVisibleLayers } from '@kepler.gl/utils';
|
|
5
5
|
import styled, { useTheme } from 'styled-components';
|
|
6
6
|
import { KeplerInjector } from './KeplerInjector';
|
|
7
7
|
import { KeplerProvider } from './KeplerProvider';
|
|
@@ -29,6 +29,12 @@ const CustomWidgetcontainer = styled.div `
|
|
|
29
29
|
.map-popover {
|
|
30
30
|
z-index: 50;
|
|
31
31
|
}
|
|
32
|
+
|
|
33
|
+
/* Remove top margin from Trip layer timeline */
|
|
34
|
+
.kepler-gl .bottom-widget--container .animation-control-container,
|
|
35
|
+
.bottom-widget--container .animation-control-container {
|
|
36
|
+
margin-top: 0 !important;
|
|
37
|
+
}
|
|
32
38
|
`;
|
|
33
39
|
const KeplerGl = ({ mapId }) => {
|
|
34
40
|
const bottomWidgetRef = useRef(null);
|
|
@@ -65,7 +71,13 @@ const KeplerGl = ({ mapId }) => {
|
|
|
65
71
|
size || DEFAULT_DIMENSIONS)
|
|
66
72
|
: null;
|
|
67
73
|
const mapFields = useMemo(() => (keplerState?.visState ? mapFieldsSelector(mergedKeplerProps) : null), [keplerState, mergedKeplerProps]);
|
|
68
|
-
|
|
74
|
+
// Check if there are filters or animatable layers (e.g., Trip layers)
|
|
75
|
+
const hasFilters = Boolean(keplerState?.visState.filters?.length);
|
|
76
|
+
const hasAnimatableLayers = useMemo(() => {
|
|
77
|
+
const layers = keplerState?.visState?.layers || [];
|
|
78
|
+
return getAnimatableVisibleLayers(layers).length > 0;
|
|
79
|
+
}, [keplerState?.visState?.layers]);
|
|
80
|
+
const bottomWidgetFields = hasFilters || hasAnimatableLayers
|
|
69
81
|
? bottomWidgetSelector(mergedKeplerProps, theme)
|
|
70
82
|
: null;
|
|
71
83
|
const modalContainerFields = keplerState?.visState
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeplerMapContainer.js","sourceRoot":"","sources":["../../src/components/KeplerMapContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAK,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/D,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,2BAA2B,EAC3B,WAAW,EACX,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"KeplerMapContainer.js","sourceRoot":"","sources":["../../src/components/KeplerMapContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {FC, useMemo, useRef, useEffect, useState} from 'react';\n\nimport {\n MapContainerFactory,\n BottomWidgetFactory,\n GeocoderPanelFactory,\n mapFieldsSelector,\n bottomWidgetSelector,\n geoCoderPanelSelector,\n modalContainerSelector,\n MapViewStateContextProvider,\n RootContext,\n ModalContainerFactory,\n} from '@kepler.gl/components';\nimport {useDimensions, getAnimatableVisibleLayers} from '@kepler.gl/utils';\nimport styled, {useTheme} from 'styled-components';\n\nimport {KeplerInjector} from './KeplerInjector';\nimport {KeplerProvider} from './KeplerProvider';\nimport {useKeplerStateActions} from '../hooks/useKeplerStateActions';\nimport {useStoreWithKepler} from '../KeplerSlice';\n\nconst MapContainer = KeplerInjector.get(MapContainerFactory);\nconst BottomWidget = KeplerInjector.get(BottomWidgetFactory);\nconst GeoCoderPanel = KeplerInjector.get(GeocoderPanelFactory);\nconst ModalContainer = KeplerInjector.get(ModalContainerFactory);\n\nconst DEFAULT_DIMENSIONS = {\n width: 0,\n height: 0,\n};\nconst KEPLER_PROPS = {\n mapboxApiUrl: 'https://api.mapbox.com',\n appName: 'kepler.gl',\n sidePanelWidth: 0,\n};\n// overide kepler default style\nconst CustomWidgetcontainer = styled.div`\n .bottom-widget--inner {\n margin-top: 0;\n }\n\n .map-popover {\n z-index: 50;\n }\n\n /* Remove top margin from Trip layer timeline */\n .kepler-gl .bottom-widget--container .animation-control-container,\n .bottom-widget--container .animation-control-container {\n margin-top: 0 !important;\n }\n`;\n\ntype KeplerGLProps = Parameters<typeof geoCoderPanelSelector>[0];\n\nconst KeplerGl: FC<{\n mapId: string;\n}> = ({mapId}) => {\n const bottomWidgetRef = useRef(null);\n const [containerRef, size] = useDimensions<HTMLDivElement>();\n const [containerNode, setContainerNode] = useState<HTMLElement | null>(null);\n const theme = useTheme();\n const basicKeplerProps = useStoreWithKepler(\n (state) => state.kepler.basicKeplerProps,\n );\n\n const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n const interactionConfig = keplerState?.visState?.interactionConfig;\n\n // Capture the current container DOM node outside of render logic\n useEffect(() => {\n setContainerNode(containerRef.current);\n }, [containerRef]);\n\n // Update export image settings when size changes\n useEffect(() => {\n if (size?.width && size?.height) {\n keplerActions.uiStateActions.setExportImageSetting({\n mapW: size.width,\n mapH: size.height,\n });\n }\n }, [size?.width, size?.height, keplerActions.uiStateActions]);\n\n const mergedKeplerProps = useMemo(() => {\n return {\n ...KEPLER_PROPS,\n ...keplerState,\n ...keplerActions,\n id: mapId,\n } as KeplerGLProps;\n }, [keplerState, keplerActions, mapId]);\n const geoCoderPanelFields = keplerState?.visState\n ? geoCoderPanelSelector(\n mergedKeplerProps,\n // dont need height\n size || DEFAULT_DIMENSIONS,\n )\n : null;\n const mapFields = useMemo(\n () => (keplerState?.visState ? mapFieldsSelector(mergedKeplerProps) : null),\n [keplerState, mergedKeplerProps],\n );\n\n // Check if there are filters or animatable layers (e.g., Trip layers)\n const hasFilters = Boolean(keplerState?.visState.filters?.length);\n const hasAnimatableLayers = useMemo(() => {\n const layers = keplerState?.visState?.layers || [];\n return getAnimatableVisibleLayers(layers).length > 0;\n }, [keplerState?.visState?.layers]);\n\n const bottomWidgetFields =\n hasFilters || hasAnimatableLayers\n ? bottomWidgetSelector(mergedKeplerProps, theme)\n : null;\n\n const modalContainerFields = keplerState?.visState\n ? modalContainerSelector(mergedKeplerProps, containerNode)\n : null;\n\n const mapboxApiAccessToken =\n mapFields?.mapStyle?.mapboxApiAccessToken ||\n basicKeplerProps?.mapboxApiAccessToken;\n return (\n <RootContext.Provider value={containerRef}>\n <CustomWidgetcontainer\n ref={containerRef}\n className=\"kepler-gl relative flex h-full w-full flex-col justify-between\"\n >\n {mapFields?.mapState ? (\n <MapViewStateContextProvider mapState={mapFields.mapState}>\n <MapContainer\n primary={true}\n containerId={0}\n key={0}\n index={0}\n {...mapFields}\n mapboxApiAccessToken={mapboxApiAccessToken}\n />\n </MapViewStateContextProvider>\n ) : null}\n {interactionConfig?.geocoder?.enabled ? (\n <GeoCoderPanel\n {...geoCoderPanelFields}\n index={0}\n unsyncedViewports={false}\n mapboxApiAccessToken={mapboxApiAccessToken}\n />\n ) : null}\n {bottomWidgetFields ? (\n <BottomWidget\n rootRef={bottomWidgetRef}\n {...bottomWidgetFields}\n theme={theme}\n containerW={size?.width}\n />\n ) : null}\n {modalContainerFields ? (\n <ModalContainer\n {...modalContainerFields}\n containerW={size?.width}\n containerH={size?.height}\n />\n ) : null}\n </CustomWidgetcontainer>\n </RootContext.Provider>\n );\n};\n\nexport const KeplerMapContainer: FC<{\n mapId: string;\n}> = ({mapId}) => {\n return (\n <KeplerProvider mapId={mapId}>\n <KeplerGl mapId={mapId} />\n </KeplerProvider>\n );\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/kepler",
|
|
3
|
-
"version": "0.27.0-rc.
|
|
3
|
+
"version": "0.27.0-rc.2",
|
|
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.27.0-rc.
|
|
38
|
-
"@sqlrooms/kepler-config": "0.27.0-rc.
|
|
39
|
-
"@sqlrooms/room-shell": "0.27.0-rc.
|
|
40
|
-
"@sqlrooms/s3-browser": "0.27.0-rc.
|
|
41
|
-
"@sqlrooms/ui": "0.27.0-rc.
|
|
37
|
+
"@sqlrooms/duckdb": "0.27.0-rc.2",
|
|
38
|
+
"@sqlrooms/kepler-config": "0.27.0-rc.2",
|
|
39
|
+
"@sqlrooms/room-shell": "0.27.0-rc.2",
|
|
40
|
+
"@sqlrooms/s3-browser": "0.27.0-rc.2",
|
|
41
|
+
"@sqlrooms/ui": "0.27.0-rc.2",
|
|
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": "eec06537352a9e760de21d7bcc77d9aa2db2a5ec"
|
|
66
66
|
}
|