@sqlrooms/kepler 0.26.1-rc.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/LICENSE.md +9 -0
- package/README.md +3 -0
- package/dist/KeplerSlice.d.ts +86 -0
- package/dist/KeplerSlice.d.ts.map +1 -0
- package/dist/KeplerSlice.js +395 -0
- package/dist/KeplerSlice.js.map +1 -0
- package/dist/components/CustomDndContext.d.ts +11 -0
- package/dist/components/CustomDndContext.d.ts.map +1 -0
- package/dist/components/CustomDndContext.js +60 -0
- package/dist/components/CustomDndContext.js.map +1 -0
- package/dist/components/CustomFilterManager.d.ts +8 -0
- package/dist/components/CustomFilterManager.d.ts.map +1 -0
- package/dist/components/CustomFilterManager.js +85 -0
- package/dist/components/CustomFilterManager.js.map +1 -0
- package/dist/components/CustomInteractionManager.d.ts +5 -0
- package/dist/components/CustomInteractionManager.d.ts.map +1 -0
- package/dist/components/CustomInteractionManager.js +54 -0
- package/dist/components/CustomInteractionManager.js.map +1 -0
- package/dist/components/CustomLayerManager.d.ts +8 -0
- package/dist/components/CustomLayerManager.d.ts.map +1 -0
- package/dist/components/CustomLayerManager.js +111 -0
- package/dist/components/CustomLayerManager.js.map +1 -0
- package/dist/components/CustomMapManager.d.ts +7 -0
- package/dist/components/CustomMapManager.d.ts.map +1 -0
- package/dist/components/CustomMapManager.js +99 -0
- package/dist/components/CustomMapManager.js.map +1 -0
- package/dist/components/CustomTooltipConfig.d.ts +30 -0
- package/dist/components/CustomTooltipConfig.d.ts.map +1 -0
- package/dist/components/CustomTooltipConfig.js +85 -0
- package/dist/components/CustomTooltipConfig.js.map +1 -0
- package/dist/components/FileDropInput.d.ts +8 -0
- package/dist/components/FileDropInput.d.ts.map +1 -0
- package/dist/components/FileDropInput.js +35 -0
- package/dist/components/FileDropInput.js.map +1 -0
- package/dist/components/KeplerAddDataDialog.d.ts +24 -0
- package/dist/components/KeplerAddDataDialog.d.ts.map +1 -0
- package/dist/components/KeplerAddDataDialog.js +60 -0
- package/dist/components/KeplerAddDataDialog.js.map +1 -0
- package/dist/components/KeplerAddTileSetDialog.d.ts +14 -0
- package/dist/components/KeplerAddTileSetDialog.d.ts.map +1 -0
- package/dist/components/KeplerAddTileSetDialog.js +20 -0
- package/dist/components/KeplerAddTileSetDialog.js.map +1 -0
- package/dist/components/KeplerImageExport.d.ts +10 -0
- package/dist/components/KeplerImageExport.d.ts.map +1 -0
- package/dist/components/KeplerImageExport.js +30 -0
- package/dist/components/KeplerImageExport.js.map +1 -0
- package/dist/components/KeplerInjector.d.ts +2 -0
- package/dist/components/KeplerInjector.d.ts.map +1 -0
- package/dist/components/KeplerInjector.js +17 -0
- package/dist/components/KeplerInjector.js.map +1 -0
- package/dist/components/KeplerMapContainer.d.ts +5 -0
- package/dist/components/KeplerMapContainer.d.ts.map +1 -0
- package/dist/components/KeplerMapContainer.js +76 -0
- package/dist/components/KeplerMapContainer.js.map +1 -0
- package/dist/components/KeplerPlotContainer.d.ts +6 -0
- package/dist/components/KeplerPlotContainer.d.ts.map +1 -0
- package/dist/components/KeplerPlotContainer.js +33 -0
- package/dist/components/KeplerPlotContainer.js.map +1 -0
- package/dist/components/KeplerProvider.d.ts +7 -0
- package/dist/components/KeplerProvider.d.ts.map +1 -0
- package/dist/components/KeplerProvider.js +22 -0
- package/dist/components/KeplerProvider.js.map +1 -0
- package/dist/components/KeplerS3Browser.d.ts +19 -0
- package/dist/components/KeplerS3Browser.d.ts.map +1 -0
- package/dist/components/KeplerS3Browser.js +69 -0
- package/dist/components/KeplerS3Browser.js.map +1 -0
- package/dist/components/KeplerSidePanels.d.ts +9 -0
- package/dist/components/KeplerSidePanels.d.ts.map +1 -0
- package/dist/components/KeplerSidePanels.js +15 -0
- package/dist/components/KeplerSidePanels.js.map +1 -0
- package/dist/hooks/useDndEffects.d.ts +10 -0
- package/dist/hooks/useDndEffects.d.ts.map +1 -0
- package/dist/hooks/useDndEffects.js +52 -0
- package/dist/hooks/useDndEffects.js.map +1 -0
- package/dist/hooks/useDndLayers.d.ts +10 -0
- package/dist/hooks/useDndLayers.d.ts.map +1 -0
- package/dist/hooks/useDndLayers.js +53 -0
- package/dist/hooks/useDndLayers.js.map +1 -0
- package/dist/hooks/useKeplerStateActions.d.ts +17 -0
- package/dist/hooks/useKeplerStateActions.d.ts.map +1 -0
- package/dist/hooks/useKeplerStateActions.js +14 -0
- package/dist/hooks/useKeplerStateActions.js.map +1 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +17 -0
- package/dist/index.js.map +1 -0
- package/dist/styles/theme.d.ts +468 -0
- package/dist/styles/theme.d.ts.map +1 -0
- package/dist/styles/theme.js +78 -0
- package/dist/styles/theme.js.map +1 -0
- package/package.json +70 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CustomTooltipConfig.d.ts","sourceRoot":"","sources":["../../src/components/CustomTooltipConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAoF1C,KAAK,wBAAwB,GAAG;IAC9B,MAAM,EAAE;QACN,YAAY,EAAE;YACZ,CAAC,GAAG,EAAE,MAAM,GAAG;gBAAC,IAAI,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;aAAC,EAAE,CAAC;SACxD,CAAC;QACF,WAAW,EAAE,OAAO,CAAC;QACrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF,QAAQ,EAAE,CAAC,MAAM,EAAE;QACjB,YAAY,EAAE;YACZ,CAAC,GAAG,EAAE,MAAM,GAAG;gBAAC,IAAI,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;aAAC,EAAE,CAAC;SACxD,CAAC;QACF,WAAW,EAAE,OAAO,CAAC;QACrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;KAC5B,KAAK,IAAI,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,qBAAqB,EAAE,CACrB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,MAAM,KAClB,IAAI,CAAC;IACV,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAoBlE,CAAC"}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import { useIntl } from 'react-intl';
|
|
4
|
+
import { TooltipConfigFactory } from '@kepler.gl/components';
|
|
5
|
+
import { KeplerInjector } from './KeplerInjector';
|
|
6
|
+
// Get the original TooltipConfig from kepler.gl
|
|
7
|
+
const TooltipConfig = KeplerInjector.get(TooltipConfigFactory);
|
|
8
|
+
const TooltipConfigWrapper = styled.div `
|
|
9
|
+
width: 100%;
|
|
10
|
+
max-width: 100%;
|
|
11
|
+
overflow-x: hidden;
|
|
12
|
+
overflow-y: visible;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
position: relative;
|
|
15
|
+
contain: layout;
|
|
16
|
+
|
|
17
|
+
.sortable-layer-items > div {
|
|
18
|
+
padding: 2px 4px;
|
|
19
|
+
background-color: ${(props) => props.theme.sidePanelBg || props.theme.panelBackground};
|
|
20
|
+
border-radius: 4px;
|
|
21
|
+
}
|
|
22
|
+
.chickleted-input {
|
|
23
|
+
background-color: ${(props) => props.isDark ? '#0f172a' : '#F6F8FB'} !important;
|
|
24
|
+
border-color: transparent;
|
|
25
|
+
border-radius: 6px;
|
|
26
|
+
font-weight: 400;
|
|
27
|
+
max-width: 100% !important;
|
|
28
|
+
box-sizing: border-box !important;
|
|
29
|
+
}
|
|
30
|
+
.side-panel-section {
|
|
31
|
+
position: relative !important;
|
|
32
|
+
width: 100% !important;
|
|
33
|
+
max-width: 100% !important;
|
|
34
|
+
overflow-x: hidden !important;
|
|
35
|
+
box-sizing: border-box !important;
|
|
36
|
+
}
|
|
37
|
+
.side-panel-section > :first-child {
|
|
38
|
+
display: flex;
|
|
39
|
+
justify-content: space-between;
|
|
40
|
+
position: absolute !important;
|
|
41
|
+
left: 0 !important;
|
|
42
|
+
right: 0 !important;
|
|
43
|
+
width: auto !important;
|
|
44
|
+
padding: 0px 9px;
|
|
45
|
+
top: 8px;
|
|
46
|
+
box-sizing: border-box !important;
|
|
47
|
+
}
|
|
48
|
+
.field-selector {
|
|
49
|
+
padding-top: 32px;
|
|
50
|
+
background-color: ${(props) => props.isDark ? '#0f172a' : '#F6F8FB'} !important;
|
|
51
|
+
width: 100% !important;
|
|
52
|
+
max-width: 100% !important;
|
|
53
|
+
overflow-x: hidden !important;
|
|
54
|
+
box-sizing: border-box !important;
|
|
55
|
+
}
|
|
56
|
+
.update-color {
|
|
57
|
+
display: none;
|
|
58
|
+
}
|
|
59
|
+
.dataset-name {
|
|
60
|
+
font-weight: 500;
|
|
61
|
+
font-size: 12px;
|
|
62
|
+
}
|
|
63
|
+
.clear-all {
|
|
64
|
+
width: 64px;
|
|
65
|
+
font-weight: 400;
|
|
66
|
+
color: #94a2b8 !important;
|
|
67
|
+
font-size: 12px;
|
|
68
|
+
}
|
|
69
|
+
.item-selector {
|
|
70
|
+
width: 100% !important;
|
|
71
|
+
max-width: 100% !important;
|
|
72
|
+
overflow-x: hidden !important;
|
|
73
|
+
box-sizing: border-box !important;
|
|
74
|
+
}
|
|
75
|
+
.item-selector > div {
|
|
76
|
+
max-width: 100% !important;
|
|
77
|
+
overflow-x: hidden !important;
|
|
78
|
+
box-sizing: border-box !important;
|
|
79
|
+
}
|
|
80
|
+
`;
|
|
81
|
+
export const CustomTooltipConfig = ({ config, datasets, onChange, onDisplayFormatChange, isDark, }) => {
|
|
82
|
+
const intl = useIntl();
|
|
83
|
+
return (_jsx(TooltipConfigWrapper, { isDark: isDark, children: _jsx(TooltipConfig, { config: config, datasets: datasets, onChange: onChange, onDisplayFormatChange: onDisplayFormatChange, intl: intl }) }));
|
|
84
|
+
};
|
|
85
|
+
//# sourceMappingURL=CustomTooltipConfig.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CustomTooltipConfig.js","sourceRoot":"","sources":["../../src/components/CustomTooltipConfig.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AACnC,OAAO,EAAC,oBAAoB,EAAC,MAAM,uBAAuB,CAAC;AAG3D,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAEhD,gDAAgD;AAChD,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;AAE/D,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAmB;;;;;;;;;;;wBAWlC,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,KAAK,CAAC,eAAe;;;;wBAIpC,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2BlB,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BzC,CAAC;AA0BF,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACrB,MAAM,GACP,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,YAClC,KAAC,aAAa,IACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,qBAAqB,EAC5C,IAAI,EAAE,IAAI,GACV,GACmB,CACxB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {useIntl} from 'react-intl';\nimport {TooltipConfigFactory} from '@kepler.gl/components';\nimport {Datasets} from '@kepler.gl/table';\n\nimport {KeplerInjector} from './KeplerInjector';\n\n// Get the original TooltipConfig from kepler.gl\nconst TooltipConfig = KeplerInjector.get(TooltipConfigFactory);\n\nconst TooltipConfigWrapper = styled.div<{isDark: boolean}>`\n width: 100%;\n max-width: 100%;\n overflow-x: hidden;\n overflow-y: visible;\n box-sizing: border-box;\n position: relative;\n contain: layout;\n\n .sortable-layer-items > div {\n padding: 2px 4px;\n background-color: ${(props) =>\n props.theme.sidePanelBg || props.theme.panelBackground};\n border-radius: 4px;\n }\n .chickleted-input {\n background-color: ${(props) =>\n props.isDark ? '#0f172a' : '#F6F8FB'} !important;\n border-color: transparent;\n border-radius: 6px;\n font-weight: 400;\n max-width: 100% !important;\n box-sizing: border-box !important;\n }\n .side-panel-section {\n position: relative !important;\n width: 100% !important;\n max-width: 100% !important;\n overflow-x: hidden !important;\n box-sizing: border-box !important;\n }\n .side-panel-section > :first-child {\n display: flex;\n justify-content: space-between;\n position: absolute !important;\n left: 0 !important;\n right: 0 !important;\n width: auto !important;\n padding: 0px 9px;\n top: 8px;\n box-sizing: border-box !important;\n }\n .field-selector {\n padding-top: 32px;\n background-color: ${(props) =>\n props.isDark ? '#0f172a' : '#F6F8FB'} !important;\n width: 100% !important;\n max-width: 100% !important;\n overflow-x: hidden !important;\n box-sizing: border-box !important;\n }\n .update-color {\n display: none;\n }\n .dataset-name {\n font-weight: 500;\n font-size: 12px;\n }\n .clear-all {\n width: 64px;\n font-weight: 400;\n color: #94a2b8 !important;\n font-size: 12px;\n }\n .item-selector {\n width: 100% !important;\n max-width: 100% !important;\n overflow-x: hidden !important;\n box-sizing: border-box !important;\n }\n .item-selector > div {\n max-width: 100% !important;\n overflow-x: hidden !important;\n box-sizing: border-box !important;\n }\n`;\n\ntype CustomTooltipConfigProps = {\n config: {\n fieldsToShow: {\n [key: string]: {name: string; format: string | null}[];\n };\n compareMode: boolean;\n compareType: string | null;\n };\n onChange: (config: {\n fieldsToShow: {\n [key: string]: {name: string; format: string | null}[];\n };\n compareMode: boolean;\n compareType: string | null;\n }) => void;\n datasets: Datasets;\n onDisplayFormatChange: (\n dataId: string,\n column: string,\n displayFormat: string,\n ) => void;\n isDark: boolean;\n};\n\nexport const CustomTooltipConfig: React.FC<CustomTooltipConfigProps> = ({\n config,\n datasets,\n onChange,\n onDisplayFormatChange,\n isDark,\n}) => {\n const intl = useIntl();\n\n return (\n <TooltipConfigWrapper isDark={isDark}>\n <TooltipConfig\n config={config}\n datasets={datasets}\n onChange={onChange}\n onDisplayFormatChange={onDisplayFormatChange}\n intl={intl}\n />\n </TooltipConfigWrapper>\n );\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileDropInput.d.ts","sourceRoot":"","sources":["../../src/components/FileDropInput.tsx"],"names":[],"mappings":"AAOA,KAAK,kBAAkB,GAAG;IACxB,UAAU,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0EtD,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useRef } from 'react';
|
|
3
|
+
import { Button, cn } from '@sqlrooms/ui';
|
|
4
|
+
import { FolderUp } from 'lucide-react';
|
|
5
|
+
const inputStyle = { display: 'none' };
|
|
6
|
+
export const FileDropInput = ({ onFileDrop, children, className, }) => {
|
|
7
|
+
const fileInput = useRef(null);
|
|
8
|
+
const onClick = useCallback((event) => {
|
|
9
|
+
event.stopPropagation();
|
|
10
|
+
if (fileInput.current) {
|
|
11
|
+
fileInput.current.value = '';
|
|
12
|
+
fileInput.current.click();
|
|
13
|
+
}
|
|
14
|
+
}, [fileInput]);
|
|
15
|
+
const onChangeInput = useCallback((event) => {
|
|
16
|
+
if (event.target.files?.length) {
|
|
17
|
+
onFileDrop(event.target.files);
|
|
18
|
+
}
|
|
19
|
+
}, [onFileDrop]);
|
|
20
|
+
return (_jsx("div", { className: cn('text-muted-foreground hover:text-foreground flex h-full w-full cursor-pointer items-center justify-center rounded-md border border-dashed border-gray-700 p-5 transition-colors duration-200 hover:border-gray-500', className), onClick: onClick, onDrop: (event) => {
|
|
21
|
+
event.preventDefault();
|
|
22
|
+
onFileDrop(event.dataTransfer.files);
|
|
23
|
+
}, onDragOver: (event) => {
|
|
24
|
+
event.preventDefault();
|
|
25
|
+
event.stopPropagation();
|
|
26
|
+
event.currentTarget.classList.add('border-gray-500');
|
|
27
|
+
event.currentTarget.classList.add('text-foreground');
|
|
28
|
+
}, onDragLeave: (event) => {
|
|
29
|
+
event.preventDefault();
|
|
30
|
+
event.stopPropagation();
|
|
31
|
+
event.currentTarget.classList.remove('border-gray-500');
|
|
32
|
+
event.currentTarget.classList.remove('text-foreground');
|
|
33
|
+
}, children: _jsx("div", { className: "relative flex h-full flex-col", children: _jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2", children: [_jsx("div", { className: "bg-muted flex h-[36px] w-[36px] items-center justify-center rounded-[18px]", children: _jsx(FolderUp, { height: '18px' }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "file", ref: fileInput, style: inputStyle, onChange: onChangeInput, className: "upload-button-input" }), _jsx("p", { className: "text-sm", children: "Drag & Drop your files or " }), _jsx(Button, { variant: "link", className: "h-8 px-0 py-0", onClick: onClick, children: "browse" })] }), children] }) }) }));
|
|
34
|
+
};
|
|
35
|
+
//# sourceMappingURL=FileDropInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileDropInput.js","sourceRoot":"","sources":["../../src/components/FileDropInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,WAAW,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAC,MAAM,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AAEtC,MAAM,UAAU,GAAG,EAAC,OAAO,EAAE,MAAM,EAAC,CAAC;AAOrC,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAqD,EAAE,EAAE;QACxD,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;YAC7B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAoC,EAAE,EAAE;QACvC,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;YAC/B,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,oNAAoN,EACpN,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC,EACD,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;YACrD,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QACvD,CAAC,EACD,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;YACxD,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QAC1D,CAAC,YAED,cAAK,SAAS,EAAC,+BAA+B,YAC5C,eAAK,SAAS,EAAC,wDAAwD,aACrE,cAAK,SAAS,EAAC,4EAA4E,YACzF,KAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,GACxB,EACN,eAAK,SAAS,EAAC,yBAAyB,aACtC,gBACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAC,qBAAqB,GAC/B,EACF,YAAG,SAAS,EAAC,SAAS,2CAAmC,EACzD,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,OAAO,uBAExD,IACL,EACL,QAAQ,IACL,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {ChangeEvent, MouseEvent, useCallback, useRef} from 'react';\n\nimport {Button, cn} from '@sqlrooms/ui';\nimport {FolderUp} from 'lucide-react';\n\nconst inputStyle = {display: 'none'};\n\ntype FileDropInputProps = {\n onFileDrop: (files: FileList) => void;\n children?: React.ReactNode;\n className?: string;\n};\nexport const FileDropInput: React.FC<FileDropInputProps> = ({\n onFileDrop,\n children,\n className,\n}) => {\n const fileInput = useRef<HTMLInputElement>(null);\n const onClick = useCallback(\n (event: MouseEvent<HTMLDivElement | HTMLButtonElement>) => {\n event.stopPropagation();\n\n if (fileInput.current) {\n fileInput.current.value = '';\n fileInput.current.click();\n }\n },\n [fileInput],\n );\n\n const onChangeInput = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (event.target.files?.length) {\n onFileDrop(event.target.files);\n }\n },\n [onFileDrop],\n );\n\n return (\n <div\n className={cn(\n 'text-muted-foreground hover:text-foreground flex h-full w-full cursor-pointer items-center justify-center rounded-md border border-dashed border-gray-700 p-5 transition-colors duration-200 hover:border-gray-500',\n className,\n )}\n onClick={onClick}\n onDrop={(event) => {\n event.preventDefault();\n onFileDrop(event.dataTransfer.files);\n }}\n onDragOver={(event) => {\n event.preventDefault();\n event.stopPropagation();\n event.currentTarget.classList.add('border-gray-500');\n event.currentTarget.classList.add('text-foreground');\n }}\n onDragLeave={(event) => {\n event.preventDefault();\n event.stopPropagation();\n event.currentTarget.classList.remove('border-gray-500');\n event.currentTarget.classList.remove('text-foreground');\n }}\n >\n <div className=\"relative flex h-full flex-col\">\n <div className=\"flex h-full flex-col items-center justify-center gap-2\">\n <div className=\"bg-muted flex h-[36px] w-[36px] items-center justify-center rounded-[18px]\">\n <FolderUp height={'18px'} />\n </div>\n <div className=\"flex items-center gap-2\">\n <input\n type=\"file\"\n ref={fileInput}\n style={inputStyle}\n onChange={onChangeInput}\n className=\"upload-button-input\"\n />\n <p className=\"text-sm\">Drag & Drop your files or </p>\n <Button variant=\"link\" className=\"h-8 px-0 py-0\" onClick={onClick}>\n browse\n </Button>\n </div>\n {children}\n </div>\n </div>\n </div>\n );\n};\n"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { UseDisclosureReturnValue } from '@sqlrooms/ui';
|
|
2
|
+
import type { KeplerS3BrowserProps } from '../index';
|
|
3
|
+
export type LoadTileSet = (args: {
|
|
4
|
+
tileset: {
|
|
5
|
+
name: string;
|
|
6
|
+
type: string;
|
|
7
|
+
metadata: Record<string, any>;
|
|
8
|
+
};
|
|
9
|
+
metadata?: Record<string, any>;
|
|
10
|
+
}) => void;
|
|
11
|
+
export declare enum AddDataMethods {
|
|
12
|
+
Upload = "upload",
|
|
13
|
+
TileSet = "tileset",
|
|
14
|
+
S3 = "s3"
|
|
15
|
+
}
|
|
16
|
+
export type KeplerAddDataDialogProps = {
|
|
17
|
+
addDataModal: Pick<UseDisclosureReturnValue, 'isOpen' | 'onClose'>;
|
|
18
|
+
loadTileSet: LoadTileSet;
|
|
19
|
+
loadFiles: (files: FileList | string[]) => Promise<void>;
|
|
20
|
+
method?: AddDataMethods;
|
|
21
|
+
acceptedFormats?: string[];
|
|
22
|
+
} & KeplerS3BrowserProps;
|
|
23
|
+
export declare const KeplerAddDataDialog: ({ addDataModal, loadTileSet, loadFiles, listS3Files, loadS3Files, saveS3Credentials, loadS3Credentials, deleteS3Credentials, s3Browser, method, acceptedFormats, }: KeplerAddDataDialogProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
//# sourceMappingURL=KeplerAddDataDialog.d.ts.map
|
|
@@ -0,0 +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,UAAU,CAAC;AAcnD,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;AAuBX,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"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useState } from 'react';
|
|
3
|
+
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Tabs, TabsContent, TabsList, TabsTrigger, } from '@sqlrooms/ui';
|
|
4
|
+
import { LoadTileSetFactory, Icons } from '@kepler.gl/components';
|
|
5
|
+
import { FileDropInput } from './FileDropInput';
|
|
6
|
+
import { KeplerInjector } from './KeplerInjector';
|
|
7
|
+
import { KeplerProvider } from './KeplerProvider';
|
|
8
|
+
import { KeplerS3Browser } from './KeplerS3Browser';
|
|
9
|
+
import { useIntl } from 'react-intl';
|
|
10
|
+
const DEFAULT_ACCEPTED_FORMATS = [
|
|
11
|
+
'csv',
|
|
12
|
+
'tsv',
|
|
13
|
+
'parquet',
|
|
14
|
+
'json',
|
|
15
|
+
'arrow',
|
|
16
|
+
'shp',
|
|
17
|
+
'kml',
|
|
18
|
+
];
|
|
19
|
+
const LoadTileSet = KeplerInjector.get(LoadTileSetFactory);
|
|
20
|
+
function LoadTileSetContent({ loadTileSet, onClose, }) {
|
|
21
|
+
const intl = useIntl();
|
|
22
|
+
const onTilesetAdded = useCallback((tileset, metadata) => {
|
|
23
|
+
loadTileSet({ tileset, metadata });
|
|
24
|
+
onClose?.();
|
|
25
|
+
}, [loadTileSet, onClose]);
|
|
26
|
+
return _jsx(LoadTileSet, { intl: intl, onTilesetAdded: onTilesetAdded });
|
|
27
|
+
}
|
|
28
|
+
export var AddDataMethods;
|
|
29
|
+
(function (AddDataMethods) {
|
|
30
|
+
AddDataMethods["Upload"] = "upload";
|
|
31
|
+
AddDataMethods["TileSet"] = "tileset";
|
|
32
|
+
AddDataMethods["S3"] = "s3";
|
|
33
|
+
})(AddDataMethods || (AddDataMethods = {}));
|
|
34
|
+
const ADD_DATA_METHODS = [
|
|
35
|
+
{
|
|
36
|
+
label: 'Local File',
|
|
37
|
+
value: AddDataMethods.Upload,
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
label: 'Tiles',
|
|
41
|
+
value: AddDataMethods.TileSet,
|
|
42
|
+
},
|
|
43
|
+
// {
|
|
44
|
+
// label: 'S3',
|
|
45
|
+
// value: AddDataMethods.S3,
|
|
46
|
+
// },
|
|
47
|
+
];
|
|
48
|
+
export const KeplerAddDataDialog = ({ addDataModal, loadTileSet, loadFiles, listS3Files, loadS3Files, saveS3Credentials, loadS3Credentials, deleteS3Credentials, s3Browser, method = AddDataMethods.Upload, acceptedFormats = DEFAULT_ACCEPTED_FORMATS, }) => {
|
|
49
|
+
const [currentMethod, selectCurrentMethod] = useState(method);
|
|
50
|
+
const onFileDrop = useCallback((files) => {
|
|
51
|
+
loadFiles(files);
|
|
52
|
+
addDataModal.onClose();
|
|
53
|
+
}, [loadFiles, addDataModal]);
|
|
54
|
+
const onLoadS3Files = useCallback(async (...args) => {
|
|
55
|
+
await loadS3Files(...args);
|
|
56
|
+
addDataModal.onClose();
|
|
57
|
+
}, [loadS3Files, addDataModal]);
|
|
58
|
+
return (_jsx(KeplerProvider, { mapId: '', children: _jsx(Dialog, { open: addDataModal.isOpen, onOpenChange: (isOpen) => !isOpen && addDataModal.onClose(), children: _jsxs(DialogContent, { className: "min-w-md h-[80vh] max-w-4xl 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 }) })] })] }) }) }));
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=KeplerAddDataDialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeplerAddDataDialog.js","sourceRoot":"","sources":["../../src/components/KeplerAddDataDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useCallback, 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 {KeplerInjector} from './KeplerInjector';\nimport {KeplerProvider} from './KeplerProvider';\nimport {KeplerS3Browser} from './KeplerS3Browser';\nimport type {KeplerS3BrowserProps} from '../index';\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 = KeplerInjector.get(LoadTileSetFactory);\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 return <LoadTileSet intl={intl} onTilesetAdded={onTilesetAdded} />;\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=\"min-w-md h-[80vh] max-w-4xl 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"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { UseDisclosureReturnValue } from '@sqlrooms/ui';
|
|
2
|
+
export type LoadTileSet = (args: {
|
|
3
|
+
tileset: {
|
|
4
|
+
name: string;
|
|
5
|
+
type: string;
|
|
6
|
+
metadata: Record<string, any>;
|
|
7
|
+
};
|
|
8
|
+
metadata?: Record<string, any>;
|
|
9
|
+
}) => Promise<void>;
|
|
10
|
+
export declare function KeplerAddTileSetDialog({ tileSetModal, loadTileSet, }: {
|
|
11
|
+
tileSetModal: Pick<UseDisclosureReturnValue, 'isOpen' | 'onClose'>;
|
|
12
|
+
loadTileSet: LoadTileSet;
|
|
13
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
//# sourceMappingURL=KeplerAddTileSetDialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeplerAddTileSetDialog.d.ts","sourceRoot":"","sources":["../../src/components/KeplerAddTileSetDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,wBAAwB,EACzB,MAAM,cAAc,CAAC;AAStB,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,OAAO,CAAC,IAAI,CAAC,CAAC;AAuBpB,wBAAgB,sBAAsB,CAAC,EACrC,YAAY,EACZ,WAAW,GACZ,EAAE;IACD,YAAY,EAAE,IAAI,CAAC,wBAAwB,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;IACnE,WAAW,EAAE,WAAW,CAAC;CAC1B,2CAuBA"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '@sqlrooms/ui';
|
|
4
|
+
import { LoadTileSetFactory } from '@kepler.gl/components';
|
|
5
|
+
import { KeplerInjector } from './KeplerInjector';
|
|
6
|
+
import { KeplerProvider } from './KeplerProvider';
|
|
7
|
+
import { useIntl } from 'react-intl';
|
|
8
|
+
const LoadTileSet = KeplerInjector.get(LoadTileSetFactory);
|
|
9
|
+
function LoadTileSetContent({ loadTileSet, onClose, }) {
|
|
10
|
+
const intl = useIntl();
|
|
11
|
+
const onTilesetAdded = useCallback((tileset, metadata) => {
|
|
12
|
+
loadTileSet({ tileset, metadata });
|
|
13
|
+
onClose?.();
|
|
14
|
+
}, [loadTileSet, onClose]);
|
|
15
|
+
return _jsx(LoadTileSet, { intl: intl, onTilesetAdded: onTilesetAdded });
|
|
16
|
+
}
|
|
17
|
+
export function KeplerAddTileSetDialog({ tileSetModal, loadTileSet, }) {
|
|
18
|
+
return (_jsx(KeplerProvider, { mapId: '', children: _jsx(Dialog, { open: tileSetModal.isOpen, onOpenChange: (isOpen) => !isOpen && tileSetModal.onClose(), children: _jsxs(DialogContent, { className: "h-[60vh] max-w-[75vw]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add Tileset" }), _jsx(DialogDescription, { children: "Add a tileset to your map. Supported: PMTiles, Vector Tiles, and Raster Tiles." })] }), _jsx(LoadTileSetContent, { loadTileSet: loadTileSet, onClose: tileSetModal.onClose })] }) }) }));
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=KeplerAddTileSetDialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeplerAddTileSetDialog.js","sourceRoot":"","sources":["../../src/components/KeplerAddTileSetDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,OAAO,CAAC;AAElC,OAAO,EACL,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,WAAW,GAEZ,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AAEnC,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;AAM3D,SAAS,kBAAkB,CAAC,EAC1B,WAAW,EACX,OAAO,GAIR;IACC,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,cAAc,GAAG,WAAW,CAChC,CACE,OAAoE,EACpE,QAA8B,EAC9B,EAAE;QACF,WAAW,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,CAAC,CAAC;QACjC,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,EACD,CAAC,WAAW,EAAE,OAAO,CAAC,CACvB,CAAC;IACF,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,GAAI,CAAC;AACrE,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,EACrC,YAAY,EACZ,WAAW,GAIZ;IACC,OAAO,CACL,KAAC,cAAc,IAAC,KAAK,EAAE,EAAE,YACvB,KAAC,MAAM,IACL,IAAI,EAAE,YAAY,CAAC,MAAM,EACzB,YAAY,EAAE,CAAC,MAAe,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,YAAY,CAAC,OAAO,EAAE,YAEpE,MAAC,aAAa,IAAC,SAAS,EAAC,uBAAuB,aAC9C,MAAC,YAAY,eACX,KAAC,WAAW,8BAA0B,EACtC,KAAC,iBAAiB,iGAGE,IACP,EACf,KAAC,kBAAkB,IACjB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,CAAC,OAAO,GAC7B,IACY,GACT,GACM,CAClB,CAAC;AACJ,CAAC","sourcesContent":["import {useCallback} from 'react';\n\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n UseDisclosureReturnValue,\n} from '@sqlrooms/ui';\n\nimport {LoadTileSetFactory} from '@kepler.gl/components';\n\nimport {KeplerInjector} from './KeplerInjector';\nimport {KeplerProvider} from './KeplerProvider';\nimport {useIntl} from 'react-intl';\n\nconst LoadTileSet = KeplerInjector.get(LoadTileSetFactory);\nexport type LoadTileSet = (args: {\n tileset: {name: string; type: string; metadata: Record<string, any>};\n metadata?: Record<string, any>;\n}) => Promise<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 return <LoadTileSet intl={intl} onTilesetAdded={onTilesetAdded} />;\n}\n\nexport function KeplerAddTileSetDialog({\n tileSetModal,\n loadTileSet,\n}: {\n tileSetModal: Pick<UseDisclosureReturnValue, 'isOpen' | 'onClose'>;\n loadTileSet: LoadTileSet;\n}) {\n return (\n <KeplerProvider mapId={''}>\n <Dialog\n open={tileSetModal.isOpen}\n onOpenChange={(isOpen: boolean) => !isOpen && tileSetModal.onClose()}\n >\n <DialogContent className=\"h-[60vh] max-w-[75vw]\">\n <DialogHeader>\n <DialogTitle>Add Tileset</DialogTitle>\n <DialogDescription>\n Add a tileset to your map. Supported: PMTiles, Vector Tiles, and\n Raster Tiles.\n </DialogDescription>\n </DialogHeader>\n <LoadTileSetContent\n loadTileSet={loadTileSet}\n onClose={tileSetModal.onClose}\n />\n </DialogContent>\n </Dialog>\n </KeplerProvider>\n );\n}\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ExportImage } from '@kepler.gl/types';
|
|
3
|
+
export interface KeplerImageExportProps {
|
|
4
|
+
setExportImageSetting: (settings: Partial<ExportImage>) => void;
|
|
5
|
+
cleanupExportImage: () => void;
|
|
6
|
+
exportImageSettings: ExportImage;
|
|
7
|
+
fileName?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare const KeplerImageExport: React.FC<KeplerImageExportProps>;
|
|
10
|
+
//# sourceMappingURL=KeplerImageExport.d.ts.map
|
|
@@ -0,0 +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;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmG9D,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect } from 'react';
|
|
3
|
+
import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Label, Switch, } from '@sqlrooms/ui';
|
|
4
|
+
import { EXPORT_IMG_RATIO_OPTIONS, EXPORT_IMG_RESOLUTION_OPTIONS, } from '@kepler.gl/constants';
|
|
5
|
+
import { FormattedMessage } from '@kepler.gl/localization';
|
|
6
|
+
import { ImagePreview } from '@kepler.gl/components';
|
|
7
|
+
import { dataURItoBlob, downloadFile } from '@kepler.gl/utils';
|
|
8
|
+
export const KeplerImageExport = ({ setExportImageSetting, cleanupExportImage, exportImageSettings, fileName, }) => {
|
|
9
|
+
const { legend, ratio, resolution, processing, imageDataUri } = exportImageSettings;
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
setExportImageSetting({
|
|
12
|
+
exporting: true,
|
|
13
|
+
});
|
|
14
|
+
return cleanupExportImage;
|
|
15
|
+
}, [setExportImageSetting, cleanupExportImage]);
|
|
16
|
+
const handleExportImage = useCallback(() => {
|
|
17
|
+
if (!processing && imageDataUri) {
|
|
18
|
+
const file = dataURItoBlob(imageDataUri);
|
|
19
|
+
downloadFile(file, `${fileName || 'Untitled'}.png`);
|
|
20
|
+
}
|
|
21
|
+
}, [processing, imageDataUri, fileName]);
|
|
22
|
+
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({
|
|
23
|
+
resolution: value,
|
|
24
|
+
}), 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({
|
|
25
|
+
ratio: value,
|
|
26
|
+
}), 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({
|
|
27
|
+
legend: checked === true,
|
|
28
|
+
}) })] }), _jsx("div", { className: "flex flex-col gap-2", children: _jsx(Button, { variant: "default", className: "w-full", onClick: handleExportImage, children: "Export Image" }) })] }));
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=KeplerImageExport.js.map
|
|
@@ -0,0 +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}\n\nexport const KeplerImageExport: React.FC<KeplerImageExportProps> = ({\n setExportImageSetting,\n cleanupExportImage,\n exportImageSettings,\n fileName,\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 const file = dataURItoBlob(imageDataUri);\n downloadFile(file, `${fileName || 'Untitled'}.png`);\n }\n }, [processing, imageDataUri, fileName]);\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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeplerInjector.d.ts","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,cAAc,8CAAiD,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { appInjector, provideRecipesToInjector, AddDataButtonFactory, PanelTitleFactory, DndContextFactory, } from '@kepler.gl/components';
|
|
3
|
+
import { CustomDndContextFactory } from './CustomDndContext';
|
|
4
|
+
const CustomAddDataButtonFactory = () => {
|
|
5
|
+
return () => null;
|
|
6
|
+
};
|
|
7
|
+
const CustomPanelTitleFactory = () => {
|
|
8
|
+
const PanelTitle = ({ children }) => (_jsx("div", { className: "flex items-center justify-end", children: children }));
|
|
9
|
+
return PanelTitle;
|
|
10
|
+
};
|
|
11
|
+
const recipes = [
|
|
12
|
+
[AddDataButtonFactory, CustomAddDataButtonFactory],
|
|
13
|
+
[PanelTitleFactory, CustomPanelTitleFactory],
|
|
14
|
+
[DndContextFactory, CustomDndContextFactory],
|
|
15
|
+
];
|
|
16
|
+
export const KeplerInjector = provideRecipesToInjector(recipes, appInjector);
|
|
17
|
+
//# sourceMappingURL=KeplerInjector.js.map
|
|
@@ -0,0 +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,GAElB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,uBAAuB,EAAC,MAAM,oBAAoB,CAAC;AAE3D,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;CACrB,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} from '@kepler.gl/components';\nimport React, {PropsWithChildren} from 'react';\nimport {CustomDndContextFactory} from './CustomDndContext';\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] as [Factory, Factory][];\n\nexport const KeplerInjector = provideRecipesToInjector(recipes, appInjector);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeplerMapContainer.d.ts","sourceRoot":"","sources":["../../src/components/KeplerMapContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAA6B,MAAM,OAAO,CAAC;AAqJrD,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf,CAMA,CAAC"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo, useRef, useEffect } from 'react';
|
|
3
|
+
import { MapContainerFactory, BottomWidgetFactory, GeocoderPanelFactory, mapFieldsSelector, bottomWidgetSelector, geoCoderPanelSelector, modalContainerSelector, MapViewStateContextProvider, RootContext, ModalContainerFactory, } from '@kepler.gl/components';
|
|
4
|
+
import { useDimensions } from '@kepler.gl/utils';
|
|
5
|
+
import styled, { useTheme } from 'styled-components';
|
|
6
|
+
import { KeplerInjector } from './KeplerInjector';
|
|
7
|
+
import { KeplerProvider } from './KeplerProvider';
|
|
8
|
+
import { useKeplerStateActions } from '../hooks/useKeplerStateActions';
|
|
9
|
+
import { useStoreWithKepler } from '../KeplerSlice';
|
|
10
|
+
const MapContainer = KeplerInjector.get(MapContainerFactory);
|
|
11
|
+
const BottomWidget = KeplerInjector.get(BottomWidgetFactory);
|
|
12
|
+
const GeoCoderPanel = KeplerInjector.get(GeocoderPanelFactory);
|
|
13
|
+
const ModalContainer = KeplerInjector.get(ModalContainerFactory);
|
|
14
|
+
const DEFAULT_DIMENSIONS = {
|
|
15
|
+
width: 0,
|
|
16
|
+
height: 0,
|
|
17
|
+
};
|
|
18
|
+
const KEPLER_PROPS = {
|
|
19
|
+
mapboxApiUrl: 'https://api.mapbox.com',
|
|
20
|
+
appName: 'kepler.gl',
|
|
21
|
+
sidePanelWidth: 0,
|
|
22
|
+
};
|
|
23
|
+
// overide kepler default style
|
|
24
|
+
const CustomWidgetcontainer = styled.div `
|
|
25
|
+
.bottom-widget--inner {
|
|
26
|
+
margin-top: 0;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.map-popover {
|
|
30
|
+
z-index: 50;
|
|
31
|
+
}
|
|
32
|
+
`;
|
|
33
|
+
const KeplerGl = ({ mapId }) => {
|
|
34
|
+
const bottomWidgetRef = useRef(null);
|
|
35
|
+
const [containerRef, size] = useDimensions();
|
|
36
|
+
const theme = useTheme();
|
|
37
|
+
const basicKeplerProps = useStoreWithKepler((state) => state.kepler.basicKeplerProps);
|
|
38
|
+
const { keplerActions, keplerState } = useKeplerStateActions({ mapId });
|
|
39
|
+
const interactionConfig = keplerState?.visState?.interactionConfig;
|
|
40
|
+
// Update export image settings when size changes
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
if (size?.width && size?.height) {
|
|
43
|
+
keplerActions.uiStateActions.setExportImageSetting({
|
|
44
|
+
mapW: size.width,
|
|
45
|
+
mapH: size.height,
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
}, [size?.width, size?.height, keplerActions.uiStateActions]);
|
|
49
|
+
const mergedKeplerProps = useMemo(() => {
|
|
50
|
+
return {
|
|
51
|
+
...KEPLER_PROPS,
|
|
52
|
+
...keplerState,
|
|
53
|
+
...keplerActions,
|
|
54
|
+
id: mapId,
|
|
55
|
+
};
|
|
56
|
+
}, [keplerState, keplerActions, mapId]);
|
|
57
|
+
const geoCoderPanelFields = keplerState?.visState
|
|
58
|
+
? geoCoderPanelSelector(mergedKeplerProps,
|
|
59
|
+
// dont need height
|
|
60
|
+
size || DEFAULT_DIMENSIONS)
|
|
61
|
+
: null;
|
|
62
|
+
const mapFields = useMemo(() => (keplerState?.visState ? mapFieldsSelector(mergedKeplerProps) : null), [keplerState, mergedKeplerProps]);
|
|
63
|
+
const bottomWidgetFields = keplerState?.visState.filters?.length
|
|
64
|
+
? bottomWidgetSelector(mergedKeplerProps, theme)
|
|
65
|
+
: null;
|
|
66
|
+
const modalContainerFields = keplerState?.visState
|
|
67
|
+
? modalContainerSelector(mergedKeplerProps, containerRef.current)
|
|
68
|
+
: null;
|
|
69
|
+
const mapboxApiAccessToken = mapFields?.mapStyle?.mapboxApiAccessToken ||
|
|
70
|
+
basicKeplerProps?.mapboxApiAccessToken;
|
|
71
|
+
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, interactionConfig?.geocoder?.enabled ? (_jsx(GeoCoderPanel, { ...geoCoderPanelFields, index: 0, unsyncedViewports: false, mapboxApiAccessToken: mapboxApiAccessToken })) : null, bottomWidgetFields ? (_jsx(BottomWidget, { rootRef: bottomWidgetRef, ...bottomWidgetFields, theme: theme, containerW: size?.width })) : null, modalContainerFields ? (_jsx(ModalContainer, { ...modalContainerFields, containerW: size?.width, containerH: size?.height })) : null] }) }));
|
|
72
|
+
};
|
|
73
|
+
export const KeplerMapContainer = ({ mapId }) => {
|
|
74
|
+
return (_jsx(KeplerProvider, { mapId: mapId, children: _jsx(KeplerGl, { mapId: mapId }) }));
|
|
75
|
+
};
|
|
76
|
+
//# sourceMappingURL=KeplerMapContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeplerMapContainer.js","sourceRoot":"","sources":["../../src/components/KeplerMapContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {FC, useMemo, useRef, useEffect} 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} 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\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 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 // 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 const bottomWidgetFields = keplerState?.visState.filters?.length\n ? bottomWidgetSelector(mergedKeplerProps, theme)\n : null;\n\n const modalContainerFields = keplerState?.visState\n ? modalContainerSelector(mergedKeplerProps, containerRef.current)\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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeplerPlotContainer.d.ts","sourceRoot":"","sources":["../../src/components/KeplerPlotContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAkB7C,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CAmCA,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
import { PlotContainerFactory, plotContainerSelector, } from '@kepler.gl/components';
|
|
4
|
+
import { useKeplerStateActions } from '../hooks/useKeplerStateActions';
|
|
5
|
+
import { KeplerInjector } from './KeplerInjector';
|
|
6
|
+
import { KeplerProvider } from './KeplerProvider';
|
|
7
|
+
const PlotContainer = KeplerInjector.get(PlotContainerFactory);
|
|
8
|
+
const KEPLER_PROPS = {
|
|
9
|
+
mapboxApiUrl: 'https://api.mapbox.com',
|
|
10
|
+
appName: 'kepler.gl',
|
|
11
|
+
sidePanelWidth: 0,
|
|
12
|
+
mapboxApiAccessToken: '',
|
|
13
|
+
};
|
|
14
|
+
export const KeplerPlotContainer = ({ mapId, logoComponent }) => {
|
|
15
|
+
const { keplerState, keplerActions } = useKeplerStateActions({ mapId });
|
|
16
|
+
const isExportingImage = keplerState?.uiState?.exportImage?.exporting;
|
|
17
|
+
const mergedKeplerProps = useMemo(() => keplerState !== undefined
|
|
18
|
+
? {
|
|
19
|
+
...KEPLER_PROPS,
|
|
20
|
+
mapboxApiAccessToken: KEPLER_PROPS.mapboxApiAccessToken ||
|
|
21
|
+
keplerState?.mapStyle?.mapboxApiAccessToken ||
|
|
22
|
+
'',
|
|
23
|
+
...keplerState,
|
|
24
|
+
...keplerActions,
|
|
25
|
+
id: mapId,
|
|
26
|
+
}
|
|
27
|
+
: null, [keplerState, keplerActions, mapId]);
|
|
28
|
+
const plotContainerFields = useMemo(() => (mergedKeplerProps ? plotContainerSelector(mergedKeplerProps) : null),
|
|
29
|
+
// include filters in deps to trigger refresh when filters change from bottom time widget
|
|
30
|
+
[mergedKeplerProps, keplerState?.visState?.filters]);
|
|
31
|
+
return isExportingImage && plotContainerFields ? (_jsx(KeplerProvider, { mapId: mapId, children: _jsx(PlotContainer, { ...plotContainerFields, logoComponent: logoComponent ?? null }) })) : null;
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=KeplerPlotContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeplerPlotContainer.js","sourceRoot":"","sources":["../../src/components/KeplerPlotContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,OAAO,EAAC,MAAM,OAAO,CAAC;AAE7C,OAAO,EACL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAEhD,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;AAC/D,MAAM,YAAY,GAAG;IACnB,YAAY,EAAE,wBAAwB;IACtC,OAAO,EAAE,WAAW;IACpB,cAAc,EAAE,CAAC;IACjB,oBAAoB,EAAE,EAAE;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAG3B,CAAC,EAAC,KAAK,EAAE,aAAa,EAAC,EAAE,EAAE;IAC9B,MAAM,EAAC,WAAW,EAAE,aAAa,EAAC,GAAG,qBAAqB,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;IAEpE,MAAM,gBAAgB,GAAG,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC;IACtE,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CACH,WAAW,KAAK,SAAS;QACvB,CAAC,CAAC;YACE,GAAG,YAAY;YACf,oBAAoB,EAClB,YAAY,CAAC,oBAAoB;gBACjC,WAAW,EAAE,QAAQ,EAAE,oBAAoB;gBAC3C,EAAE;YACJ,GAAG,WAAW;YACd,GAAG,aAAa;YAChB,EAAE,EAAE,KAAK;SACV;QACH,CAAC,CAAC,IAAI,EACV,CAAC,WAAW,EAAE,aAAa,EAAE,KAAK,CAAC,CACpC,CAAC;IAEF,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3E,yFAAyF;IACzF,CAAC,iBAAiB,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,CAAC,CACpD,CAAC;IAEF,OAAO,gBAAgB,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAC/C,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,YAC1B,KAAC,aAAa,OACR,mBAAmB,EACvB,aAAa,EAAE,aAAa,IAAI,IAAI,GACpC,GACa,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC","sourcesContent":["import {FC, ReactNode, useMemo} from 'react';\n\nimport {\n PlotContainerFactory,\n plotContainerSelector,\n} from '@kepler.gl/components';\nimport {useKeplerStateActions} from '../hooks/useKeplerStateActions';\nimport {KeplerInjector} from './KeplerInjector';\nimport {KeplerProvider} from './KeplerProvider';\n\nconst PlotContainer = KeplerInjector.get(PlotContainerFactory);\nconst KEPLER_PROPS = {\n mapboxApiUrl: 'https://api.mapbox.com',\n appName: 'kepler.gl',\n sidePanelWidth: 0,\n mapboxApiAccessToken: '',\n};\n\nexport const KeplerPlotContainer: FC<{\n mapId: string;\n logoComponent?: ReactNode;\n}> = ({mapId, logoComponent}) => {\n const {keplerState, keplerActions} = useKeplerStateActions({mapId});\n\n const isExportingImage = keplerState?.uiState?.exportImage?.exporting;\n const mergedKeplerProps = useMemo(\n () =>\n keplerState !== undefined\n ? {\n ...KEPLER_PROPS,\n mapboxApiAccessToken:\n KEPLER_PROPS.mapboxApiAccessToken ||\n keplerState?.mapStyle?.mapboxApiAccessToken ||\n '',\n ...keplerState,\n ...keplerActions,\n id: mapId,\n }\n : null,\n [keplerState, keplerActions, mapId],\n );\n\n const plotContainerFields = useMemo(\n () => (mergedKeplerProps ? plotContainerSelector(mergedKeplerProps) : null),\n // include filters in deps to trigger refresh when filters change from bottom time widget\n [mergedKeplerProps, keplerState?.visState?.filters],\n );\n\n return isExportingImage && plotContainerFields ? (\n <KeplerProvider mapId={mapId}>\n <PlotContainer\n {...plotContainerFields}\n logoComponent={logoComponent ?? null}\n />\n </KeplerProvider>\n ) : null;\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeplerProvider.d.ts","sourceRoot":"","sources":["../../src/components/KeplerProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAU,MAAM,OAAO,CAAC;AASjD,KAAK,mBAAmB,GAAG,iBAAiB,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAGH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+BxD,CAAC"}
|