From de15c7972c3d37323a01fd459fac30b590541fdf Mon Sep 17 00:00:00 2001
From: Ihor Dykhta <dikhta.igor@gmail.com>
Date: Fri, 29 Nov 2024 02:16:25 +0200
Subject: [PATCH 1/9] [feat] duckdb plugin

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
---
 .gitmodules                                   |   3 +
 examples/demo-app/esbuild.config.mjs          |   4 +-
 examples/demo-app/src/app.tsx                 |  17 +-
 .../map-control/sql-panel-control.tsx         |  59 +++++
 .../demo-app/src/constants/localization.js    |   4 +-
 .../demo-app/src/factories/map-control.js     |   9 +-
 examples/demo-app/src/reducers/index.js       |  11 +
 examples/demo-app/src/store.js                |   9 +
 package.json                                  |   5 +-
 src/components/src/container.tsx              |   1 +
 src/constants/src/default-settings.ts         |   3 +-
 src/keplergl-duckdb-plugin                    |   1 +
 src/layers/src/layer-utils.ts                 |   2 +-
 src/table/src/dataset-utils.ts                |  11 +-
 src/types/layers.d.ts                         |   2 +-
 yarn.lock                                     | 227 +++++++++++++++++-
 16 files changed, 351 insertions(+), 17 deletions(-)
 create mode 100644 .gitmodules
 create mode 100644 examples/demo-app/src/components/map-control/sql-panel-control.tsx
 create mode 160000 src/keplergl-duckdb-plugin

diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000000..3e864b6e11
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "src/keplergl-duckdb-plugin"]
+	path = src/keplergl-duckdb-plugin
+	url = git@github.com:foursquare/keplergl-duckdb-plugin.git
diff --git a/examples/demo-app/esbuild.config.mjs b/examples/demo-app/esbuild.config.mjs
index 54c49d4441..1e70151a6c 100644
--- a/examples/demo-app/esbuild.config.mjs
+++ b/examples/demo-app/esbuild.config.mjs
@@ -38,7 +38,9 @@ const RESOLVE_LOCAL_ALIASES = {
   // kepler.gl and loaders.gl need to use same apache-arrow
   'apache-arrow': `${NODE_MODULES_DIR}/apache-arrow`,
   // all react-ai-assist needs to be resolved from samenode_modules
-  'react-ai-assist': `${NODE_MODULES_DIR}/react-ai-assist`
+  'react-ai-assist': `${NODE_MODULES_DIR}/react-ai-assist`,
+  // add alias to serve from keplergl-duckdb-plugin submodule
+  'keplergl-duckdb-plugin': `${SRC_DIR}/keplergl-duckdb-plugin/src`
 };
 
 const config = {
diff --git a/examples/demo-app/src/app.tsx b/examples/demo-app/src/app.tsx
index 500c076993..a928d6f027 100644
--- a/examples/demo-app/src/app.tsx
+++ b/examples/demo-app/src/app.tsx
@@ -15,6 +15,9 @@ import {
   setScreenCaptured
 } from '@kepler.gl/ai-assistant';
 import {theme} from '@kepler.gl/styles';
+import {useSelector} from 'react-redux';
+import {ParsedConfig} from '@kepler.gl/types';
+import {SqlPanel} from 'keplergl-duckdb-plugin';
 import Banner from './components/banner';
 import Announcement, {FormLink} from './components/announcement';
 import {replaceLoadDataModal} from './factories/load-data-modal';
@@ -52,6 +55,7 @@ import sampleIconCsv from './data/sample-icon-csv';
 import sampleGpsData from './data/sample-gps-data';
 import sampleRowData, {config as rowDataConfig} from './data/sample-row-data';
 import {processCsvData, processGeojson, processRowObject} from '@kepler.gl/processors';
+
 /* eslint-enable no-unused-vars */
 
 const BannerHeight = 48;
@@ -103,6 +107,10 @@ const App = props => {
   const {params: {id, provider} = {}, location: {query = {}} = {}} = props;
   const dispatch = useDispatch();
 
+  const isSqlPanelOpen = useSelector(
+    state => state?.demo?.keplerGl?.map?.uiState.mapControls.sqlPanel.active
+  );
+
   useEffect(() => {
     // if we pass an id as part of the url
     // we ry to fetch along map configurations
@@ -309,7 +317,7 @@ const App = props => {
         options: {
           keepExistingConfig: true
         },
-        config: sampleGeojsonConfig
+        config: sampleGeojsonConfig as ParsedConfig
       })
     );
   }, [dispatch]);
@@ -368,7 +376,7 @@ const App = props => {
             data: processCsvData(sampleS2Data)
           }
         ],
-        config: s2MapConfig,
+        config: s2MapConfig as ParsedConfig,
         options: {
           keepExistingConfig: true
         }
@@ -473,6 +481,11 @@ const App = props => {
                 )}
               </AutoSizer>
             </div>
+            {isSqlPanelOpen ? (
+              <div style={{width: '50%'}}>
+                <SqlPanel />
+              </div>
+            ) : null}
           </div>
         </ScreenshotWrapper>
       </GlobalStyle>
diff --git a/examples/demo-app/src/components/map-control/sql-panel-control.tsx b/examples/demo-app/src/components/map-control/sql-panel-control.tsx
new file mode 100644
index 0000000000..d156953fc2
--- /dev/null
+++ b/examples/demo-app/src/components/map-control/sql-panel-control.tsx
@@ -0,0 +1,59 @@
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the kepler.gl project
+
+import React, {useCallback, ComponentType} from 'react';
+
+import {MapControls} from '@kepler.gl/types';
+
+import {MapControlButton, MapControlTooltipFactory} from '@kepler.gl/components';
+
+interface EffectControlIcons {
+  effectsIcon: ComponentType<any>;
+}
+
+export type SqlPanelControlProps = {
+  mapControls: MapControls;
+  onToggleMapControl: (control: string) => void;
+  actionIcons: EffectControlIcons;
+};
+
+SqlPanelControlFactory.deps = [MapControlTooltipFactory];
+
+export default function SqlPanelControlFactory(
+  MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>
+): React.FC<SqlPanelControlProps> {
+  const SqlPanelControl = ({mapControls, onToggleMapControl}) => {
+    const onClick = useCallback(
+      event => {
+        event.preventDefault();
+        onToggleMapControl('sqlPanel');
+      },
+      [onToggleMapControl]
+    );
+
+    // ! fix here!
+
+    const showControl = mapControls?.effect?.show;
+    if (!showControl) {
+      return null;
+    }
+
+    const active = mapControls?.effect?.active;
+    return (
+      <MapControlTooltip
+        id="show-sql-panel"
+        message={active ? 'tooltip.hideSQLPanel' : 'tooltip.showSQLPanel'}
+      >
+        <MapControlButton
+          className="map-control-button toggle-sql-panel"
+          onClick={onClick}
+          active={active}
+        >
+          SQL
+        </MapControlButton>
+      </MapControlTooltip>
+    );
+  };
+
+  return SqlPanelControl;
+}
diff --git a/examples/demo-app/src/constants/localization.js b/examples/demo-app/src/constants/localization.js
index 8d47277e32..4071c64447 100644
--- a/examples/demo-app/src/constants/localization.js
+++ b/examples/demo-app/src/constants/localization.js
@@ -16,7 +16,9 @@ const en = {
     '* CORS policy must be defined on your custom url domain in order to be accessible. For more info ',
   'loadRemoteMap.clickHere':
     '<a rel="noopener noreferrer" target="_blank" href="{corsLink}">click here</a>',
-  'loadRemoteMap.fetch': 'Fetch'
+  'loadRemoteMap.fetch': 'Fetch',
+  'tooltip.hideSQLPanel': 'Hide SQL Panel',
+  'tooltip.showSQLPanel': 'Show SQL Panel'
 };
 
 export const messages = {
diff --git a/examples/demo-app/src/factories/map-control.js b/examples/demo-app/src/factories/map-control.js
index 647d0290c3..7d210057d0 100644
--- a/examples/demo-app/src/factories/map-control.js
+++ b/examples/demo-app/src/factories/map-control.js
@@ -7,10 +7,12 @@ import {
   withState,
   MapControlFactory,
   EffectControlFactory,
-  EffectManagerFactory
+  EffectManagerFactory,
+  MapControlButton
 } from '@kepler.gl/components';
 import {AiAssistantControlFactory, AiAssistantManagerFactory} from '@kepler.gl/ai-assistant';
 import {SampleMapPanel} from '../components/map-control/map-control';
+import SqlPanelControlFactory from '../components/map-control/sql-panel-control';
 
 const StyledMapControlPanel = styled.div`
   position: relative;
@@ -57,6 +59,7 @@ CustomMapControlFactory.deps = [
   EffectManagerFactory,
   AiAssistantControlFactory,
   AiAssistantManagerFactory,
+  SqlPanelControlFactory,
   ...MapControlFactory.deps
 ];
 function CustomMapControlFactory(
@@ -64,13 +67,15 @@ function CustomMapControlFactory(
   EffectManager,
   AiAssistantControl,
   AiAssistantManager,
+  SqlPanelControl,
   ...deps
 ) {
   const MapControl = MapControlFactory(...deps);
   const actionComponents = [
     ...(MapControl.defaultActionComponents ?? []),
     EffectControl,
-    AiAssistantControl
+    AiAssistantControl,
+    SqlPanelControl
   ];
 
   const CustomMapControl = props => {
diff --git a/examples/demo-app/src/reducers/index.js b/examples/demo-app/src/reducers/index.js
index 24c174ed2c..7f61fba6d1 100644
--- a/examples/demo-app/src/reducers/index.js
+++ b/examples/demo-app/src/reducers/index.js
@@ -21,6 +21,8 @@ import {
 import {CLOUD_PROVIDERS_CONFIGURATION} from '../constants/default-settings';
 import {generateHashId} from '../utils/strings';
 
+const {DEFAULT_MAP_CONTROLS} = uiStateUpdaters;
+console.log(DEFAULT_MAP_CONTROLS);
 // INITIAL_APP_STATE
 const initialAppState = {
   appName: 'example',
@@ -70,6 +72,15 @@ const demoReducer = combineReducers({
           ...DEFAULT_EXPORT_MAP[[EXPORT_MAP_FORMATS.HTML]],
           exportMapboxAccessToken: CLOUD_PROVIDERS_CONFIGURATION.EXPORT_MAPBOX_TOKEN
         }
+      },
+      mapControls: {
+        ...DEFAULT_MAP_CONTROLS,
+        sqlPanel: {
+          active: false,
+          activeMapIndex: 0,
+          disableClose: false,
+          show: true
+        }
       }
     },
     visState: {
diff --git a/examples/demo-app/src/store.js b/examples/demo-app/src/store.js
index 03fc788fd1..686dc45eeb 100644
--- a/examples/demo-app/src/store.js
+++ b/examples/demo-app/src/store.js
@@ -7,6 +7,15 @@ import {browserHistory} from 'react-router';
 import {enhanceReduxMiddleware} from '@kepler.gl/reducers';
 import {createLogger} from 'redux-logger';
 import thunk from 'redux-thunk';
+import keplerGlDuckdbPlugin, {KeplerGlDuckDbTable} from 'keplergl-duckdb-plugin';
+import {initApplicationConfig} from '@kepler.gl/utils';
+
+// initialize kepler application with duckdb plugin
+initApplicationConfig({
+  plugins: [keplerGlDuckdbPlugin],
+  table: KeplerGlDuckDbTable
+});
+
 // eslint-disable-next-line no-unused-vars
 import window from 'global/window';
 
diff --git a/package.json b/package.json
index a085a9a8fc..2838a20ffd 100644
--- a/package.json
+++ b/package.json
@@ -34,14 +34,15 @@
     "./src/effects",
     "./src/reducers",
     "./src/components",
-    "./src/ai-assistant"
+    "./src/ai-assistant",
+    "./src/keplergl-duckdb-plugin"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/keplergl/kepler.gl.git"
   },
   "scripts": {
-    "bootstrap": "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true yarn install && yarn fix-dependencies",
+    "bootstrap": "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true git submodule update --init --recursive && yarn install && yarn fix-dependencies",
     "install:example": "cd examples/demo-app && NODE_OPTIONS=--openssl-legacy-provider yarn",
     "install:web": "yarn install:example && cd website && yarn",
     "install-and-start": "node ./scripts/install-and-start",
diff --git a/src/components/src/container.tsx b/src/components/src/container.tsx
index f93af11465..fb7a90dc17 100644
--- a/src/components/src/container.tsx
+++ b/src/components/src/container.tsx
@@ -90,6 +90,7 @@ export function ContainerFactory(
     } = props;
     const prevId = usePreviousId(id);
     const dispatch = useDispatch();
+    // initialize DuckDb
 
     useEffect(() => {
       // add a new entry to reducer
diff --git a/src/constants/src/default-settings.ts b/src/constants/src/default-settings.ts
index 6be844b690..0a8ef9843f 100644
--- a/src/constants/src/default-settings.ts
+++ b/src/constants/src/default-settings.ts
@@ -1160,7 +1160,8 @@ export const DATASET_FORMATS = keyMirror({
   geojson: null,
   csv: null,
   keplergl: null,
-  arrow: null
+  arrow: null,
+  duckdb: null
 });
 
 export const MAP_CONTROLS = keyMirror({
diff --git a/src/keplergl-duckdb-plugin b/src/keplergl-duckdb-plugin
new file mode 160000
index 0000000000..697db9dc71
--- /dev/null
+++ b/src/keplergl-duckdb-plugin
@@ -0,0 +1 @@
+Subproject commit 697db9dc71771cb62042497872fd1000c297be59
diff --git a/src/layers/src/layer-utils.ts b/src/layers/src/layer-utils.ts
index 2f3dbe71be..bdd16aa991 100644
--- a/src/layers/src/layer-utils.ts
+++ b/src/layers/src/layer-utils.ts
@@ -172,7 +172,7 @@ export function getGeojsonLayerMetaFromArrow({
   };
 
   // getBinaryGeometriesFromArrow doesn't support geoarrow.wkb
-  if (encoding === EXTENSION_NAME.WKB) {
+  if (encoding === 'geoarrow.wkb' /*EXTENSION_NAME.WKB*/) {
     return getBinaryGeometriesFromWKBArrow(geoColumn, options);
   }
 
diff --git a/src/table/src/dataset-utils.ts b/src/table/src/dataset-utils.ts
index 6108eb3812..5d6bdcf633 100644
--- a/src/table/src/dataset-utils.ts
+++ b/src/table/src/dataset-utils.ts
@@ -52,11 +52,12 @@ export function createNewDataEntry(
   {info, data, ...opts}: ProtoDataset,
   datasets: Datasets = {}
 ): Datasets {
-  const validatedData = validateInputData(data);
-  if (!validatedData) {
-    return {};
-  }
-
+  // ! restore
+  // const validatedData = validateInputData(data);
+  // if (!validatedData) {
+  //   return {};
+  // }
+  const validatedData = data;
   // check if dataset already exists, and update it when loading data by batches incrementally
   if (info && info.id && datasets[info.id]) {
     // get keplerTable from datasets
diff --git a/src/types/layers.d.ts b/src/types/layers.d.ts
index 15da495ce8..0ad973a973 100644
--- a/src/types/layers.d.ts
+++ b/src/types/layers.d.ts
@@ -101,7 +101,7 @@ export type Field = {
   name: string;
   displayName: string;
   type: string;
-  fieldIdx: number;
+  // fieldIdx: number;
   valueAccessor(v: {index: number}): any;
   analyzerType?: string;
   id?: string;
diff --git a/yarn.lock b/yarn.lock
index b5e615e83e..c47dbb280f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2177,6 +2177,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@duckdb/duckdb-wasm@npm:^1.28.0":
+  version: 1.29.0
+  resolution: "@duckdb/duckdb-wasm@npm:1.29.0"
+  dependencies:
+    apache-arrow: "npm:^17.0.0"
+  checksum: 10c0/caa550b09433adb709f997241ef00fd7ee93dc4cb4a03838d9d978536fdc640c80ef0f2c294248c688e4a38231be42287e4aba655e13d94bcd9aff4767a404a0
+  languageName: node
+  linkType: hard
+
 "@emotion/is-prop-valid@npm:^0.8.1":
   version: 0.8.8
   resolution: "@emotion/is-prop-valid@npm:0.8.8"
@@ -3211,6 +3220,22 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@kepler.gl/duckdb-plugin@workspace:src/keplergl-duckdb-plugin":
+  version: 0.0.0-use.local
+  resolution: "@kepler.gl/duckdb-plugin@workspace:src/keplergl-duckdb-plugin"
+  dependencies:
+    "@duckdb/duckdb-wasm": "npm:^1.28.0"
+    "@kepler.gl/common-utils": "npm:3.1.0-alpha.0"
+    "@kepler.gl/constants": "npm:3.1.0-alpha.0"
+    "@kepler.gl/processors": "npm:3.1.0-alpha.0"
+    "@kepler.gl/table": "npm:3.1.0-alpha.0"
+    "@kepler.gl/types": "npm:3.1.0-alpha.0"
+    "@monaco-editor/react": "npm:^4.6.0"
+    "@radix-ui/react-collapsible": "npm:^1.1.0"
+    apache-arrow: "npm:>=15.0.0"
+  languageName: unknown
+  linkType: soft
+
 "@kepler.gl/effects@npm:3.1.0-alpha.0, @kepler.gl/effects@workspace:src/effects":
   version: 0.0.0-use.local
   resolution: "@kepler.gl/effects@workspace:src/effects"
@@ -4784,6 +4809,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@monaco-editor/loader@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@monaco-editor/loader@npm:1.4.0"
+  dependencies:
+    state-local: "npm:^1.0.6"
+  peerDependencies:
+    monaco-editor: ">= 0.21.0 < 1"
+  checksum: 10c0/68938350adf2f42363a801d87f5d00c87d397d4cba7041141af10a9216bd35c85209b4723a26d56cb32e68eef61471deda2a450f8892891118fbdce7fa1d987d
+  languageName: node
+  linkType: hard
+
+"@monaco-editor/react@npm:^4.6.0":
+  version: 4.6.0
+  resolution: "@monaco-editor/react@npm:4.6.0"
+  dependencies:
+    "@monaco-editor/loader": "npm:^1.4.0"
+  peerDependencies:
+    monaco-editor: ">= 0.25.0 < 1"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/231e9a9b66a530db326f6732de0ebffcce6b79dcfaf4948923d78b9a3d5e2a04b7a06e1f85bbbca45a5ae15c107a124e4c5c46cabadc20a498fb5f2d05f7f379
+  languageName: node
+  linkType: hard
+
 "@nebula.gl/edit-modes@npm:1.0.2-alpha.1":
   version: 1.0.2-alpha.1
   resolution: "@nebula.gl/edit-modes@npm:1.0.2-alpha.1"
@@ -6405,6 +6454,175 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/primitive@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/primitive@npm:1.1.0"
+  checksum: 10c0/1dcc8b5401799416ff8bdb15c7189b4536c193220ad8fd348a48b88f804ee38cec7bd03e2b9641f7da24610e2f61f23a306911ce883af92c4e8c1abac634cb61
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-collapsible@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "@radix-ui/react-collapsible@npm:1.1.1"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-presence": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/e3a510c8f3a31709add35c31e3e108a2bc4db2df06e9e50cb5f25144b1cf9596b8118ad2618f851fa7c1498e057938f641a842a6770b5b7b6cd068cd2b4914f1
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-compose-refs@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-compose-refs@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/7e18706084397d9458ca3473d8565b10691da06f6499a78edbcc4bd72cde08f62e91120658d17d58c19fc39d6b1dffe0133cc4535c8f5fce470abd478f6107e5
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-context@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-context@npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/fc4ace9d79d7954c715ade765e06c95d7e1b12a63a536bcbe842fb904f03f88fc5bd6e38d44bd23243d37a270b4c44380fedddaeeae2d274f0b898a20665aba2
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-id@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-id@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/acf13e29e51ee96336837fc0cfecc306328b20b0e0070f6f0f7aa7a621ded4a1ee5537cfad58456f64bae76caa7f8769231e88dc7dc106197347ee433c275a79
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-presence@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-presence@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/777cda0406450ff5ca0e49235e486237723323d046a3382e35a0e78eededccfc95a76a9b5fecd7404dac793264762f4bc10111af1e08f8cc2d4d571d7971220e
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-primitive@npm:2.0.0":
+  version: 2.0.0
+  resolution: "@radix-ui/react-primitive@npm:2.0.0"
+  dependencies:
+    "@radix-ui/react-slot": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/00cb6ca499252ca848c299212ba6976171cea7608b10b3f9a9639d6732dea2df1197ba0d97c001a4fdb29313c3e7fc2a490f6245dd3579617a0ffd85ae964fdd
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-slot@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-slot@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/a2e8bfb70c440506dd84a1a274f9a8bc433cca37ceae275e53552c9122612e3837744d7fc6f113d6ef1a11491aa914f4add71d76de41cb6d4db72547a8e261ae
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-callback-ref@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/e954863f3baa151faf89ac052a5468b42650efca924417470efd1bd254b411a94c69c30de2fdbb90187b38cb984795978e12e30423dc41e4309d93d53b66d819
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-controllable-state@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/2af883b5b25822ac226e60a6bfde647c0123a76345052a90219026059b3f7225844b2c13a9a16fba859c1cda5fb3d057f2a04503f71780e607516492db4eb3a1
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-layout-effect@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/9bf87ece1845c038ed95863cfccf9d75f557c2400d606343bab0ab3192b9806b9840e6aa0a0333fdf3e83cf9982632852192f3e68d7d8367bc8c788dfdf8e62b
+  languageName: node
+  linkType: hard
+
 "@react-aria/breadcrumbs@npm:3.5.13":
   version: 3.5.13
   resolution: "@react-aria/breadcrumbs@npm:3.5.13"
@@ -10614,7 +10832,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"apache-arrow@npm:>= 15.0.0, apache-arrow@npm:>=15, apache-arrow@npm:>=15.0.0":
+"apache-arrow@npm:>= 15.0.0, apache-arrow@npm:>=15, apache-arrow@npm:>=15.0.0, apache-arrow@npm:^17.0.0":
   version: 17.0.0
   resolution: "apache-arrow@npm:17.0.0"
   dependencies:
@@ -26983,6 +27201,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"state-local@npm:^1.0.6":
+  version: 1.0.7
+  resolution: "state-local@npm:1.0.7"
+  checksum: 10c0/8dc7daeac71844452fafb514a6d6b6f40d7e2b33df398309ea1c7b3948d6110c57f112b7196500a10c54fdde40291488c52c875575670fb5c819602deca48bd9
+  languageName: node
+  linkType: hard
+
 "state-toggle@npm:^1.0.0":
   version: 1.0.3
   resolution: "state-toggle@npm:1.0.3"

From bf2767f9e88902165adc101e18f289b64ec440ca Mon Sep 17 00:00:00 2001
From: Ihor Dykhta <dikhta.igor@gmail.com>
Date: Fri, 29 Nov 2024 02:22:07 +0200
Subject: [PATCH 2/9] bump keplergl-duckdb-plugin module

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
---
 src/keplergl-duckdb-plugin | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/keplergl-duckdb-plugin b/src/keplergl-duckdb-plugin
index 697db9dc71..d9eb89fbea 160000
--- a/src/keplergl-duckdb-plugin
+++ b/src/keplergl-duckdb-plugin
@@ -1 +1 @@
-Subproject commit 697db9dc71771cb62042497872fd1000c297be59
+Subproject commit d9eb89fbeac441ab15462e205b3d1a67b5b2b1a2

From 8687bb22a7241ee6c137bde246e0bad57d18d445 Mon Sep 17 00:00:00 2001
From: Ilya Boyandin <ilya@boyandin.me>
Date: Tue, 3 Dec 2024 11:38:47 +0100
Subject: [PATCH 3/9] Adding production demo-app build

---
 .gitignore                           |  4 ++++
 examples/demo-app/esbuild.config.mjs | 31 ++++++++++++++++++++++--
 examples/demo-app/package.json       |  1 +
 src/keplergl-duckdb-plugin           |  2 +-
 website/webpack.config.js            | 36 +++++++++++++++++++---------
 5 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/.gitignore b/.gitignore
index e9b4a9cbba..2a28113560 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,3 +38,7 @@ npm-debug.log
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# Local Netlify folder
+.netlify
+meta.json
\ No newline at end of file
diff --git a/examples/demo-app/esbuild.config.mjs b/examples/demo-app/esbuild.config.mjs
index 1e70151a6c..160e20aba7 100644
--- a/examples/demo-app/esbuild.config.mjs
+++ b/examples/demo-app/esbuild.config.mjs
@@ -189,9 +189,36 @@ function openURL(url) {
     await esbuild
       .build({
         ...config,
-
         minify: true,
-        sourcemap: false
+        sourcemap: false,
+        // Add alias resolution for build
+        alias: {
+          ...RESOLVE_LOCAL_ALIASES,
+          'keplergl-duckdb-plugin': `${SRC_DIR}/keplergl-duckdb-plugin/src`
+        },
+        // Add these production optimizations
+        define: {
+          ...config.define,
+          'process.env.NODE_ENV': '"production"'
+        },
+        drop: ['console', 'debugger'],
+        treeShaking: true,
+        metafile: true,
+        // Optionally generate a bundle analysis
+        plugins: [
+          ...config.plugins,
+          {
+            name: 'bundle-analyzer',
+            setup(build) {
+              build.onEnd(result => {
+                if (result.metafile) {
+                  // Write bundle analysis to disk
+                  fs.writeFileSync('meta.json', JSON.stringify(result.metafile));
+                }
+              });
+            }
+          }
+        ]
       })
       .catch(e => {
         console.error(e);
diff --git a/examples/demo-app/package.json b/examples/demo-app/package.json
index 602f7b6a98..34e2bfb89a 100644
--- a/examples/demo-app/package.json
+++ b/examples/demo-app/package.json
@@ -1,6 +1,7 @@
 {
   "scripts": {
     "start": "node esbuild.config.mjs --start",
+    "build": "node esbuild.config.mjs --build",
     "start:local": "NODE_ENV=local node esbuild.config.mjs --start",
     "start:local-ai": "NODE_ENV=local node esbuild.config.mjs --start --env.ai",
     "start:local-deck": "NODE_ENV=local node esbuild.config.mjs --start --env.deck",
diff --git a/src/keplergl-duckdb-plugin b/src/keplergl-duckdb-plugin
index d9eb89fbea..476e17e65a 160000
--- a/src/keplergl-duckdb-plugin
+++ b/src/keplergl-duckdb-plugin
@@ -1 +1 @@
-Subproject commit d9eb89fbeac441ab15462e205b3d1a67b5b2b1a2
+Subproject commit 476e17e65a476b921aab056f17c8d1683028d46a
diff --git a/website/webpack.config.js b/website/webpack.config.js
index 5067791a4c..c5a95facbf 100644
--- a/website/webpack.config.js
+++ b/website/webpack.config.js
@@ -49,31 +49,33 @@ const COMMON_CONFIG = {
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
     modules: ['node_modules', SRC_DIR],
-    alias: RESOLVE_ALIASES
+    alias: {
+      ...RESOLVE_ALIASES,
+      'keplergl-duckdb-plugin': `${SRC_DIR}/keplergl-duckdb-plugin/src`
+    }
   },
 
   module: {
     rules: [
       {
-        // Compile ES2015 using bable
-        test: /\.(js|jsx|ts|tsx)$/,
+        // Compile ES2015 using babel
+        test: /\.(js|jsx|ts|tsx|mjs)$/,
         loader: 'babel-loader',
         options: BABEL_CONFIG,
         include: [
           resolve(__dirname, './src'),
           resolve(LIB_DIR, './examples'),
           resolve(LIB_DIR, './src'),
-          /node_modules\/react-ai-assist/
+          /node_modules\/react-ai-assist/,
+          /node_modules\/@monaco-editor/,
+          /node_modules\/@radix-ui/
         ],
-        exclude: [/node_modules\/(?!react-ai-assist)/]
+        exclude: [/node_modules\/(?!(@monaco-editor|@radix-ui|react-ai-assist))/]
       },
       // Add css loader for ai-assistant
       {
         test: /\.css$/,
-        use: [
-          'style-loader',
-          'css-loader'
-        ]
+        use: ['style-loader', 'css-loader']
       },
       {
         test: /\.(eot|svg|ico|ttf|woff|woff2|gif|jpe?g|png)$/,
@@ -106,6 +108,15 @@ const COMMON_CONFIG = {
           /node_modules\/@math.gl/,
           /node_modules\/@geoarrow/
         ]
+      },
+      {
+        test: /\.m?js$/,
+        include: [
+          /node_modules\/@duckdb\/duckdb-wasm/,
+          /node_modules\/@radix-ui/,
+          /node_modules\/@monaco-editor\/react/
+        ],
+        type: 'javascript/auto'
       }
     ]
   },
@@ -122,7 +133,10 @@ const COMMON_CONFIG = {
   // Optional: Enables reading mapbox token from environment variable
   plugins: [
     // Provide default values to suppress warnings
-    new webpack.EnvironmentPlugin(WEBPACK_ENV_VARIABLES)
+    new webpack.EnvironmentPlugin(WEBPACK_ENV_VARIABLES),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
   ],
 
   // Required to avoid deck.gl undefined module when code is minified
@@ -157,7 +171,7 @@ const addProdConfig = config => {
     output: {
       path: resolve(__dirname, './dist'),
       filename: 'bundle.js',
-      publicPath: "/"
+      publicPath: '/'
     }
   });
 };

From 11f5b83c93f5890a2eecbdc99c3355b4adf98e06 Mon Sep 17 00:00:00 2001
From: Ilya Boyandin <ilya@boyandin.me>
Date: Tue, 3 Dec 2024 12:42:18 +0100
Subject: [PATCH 4/9] Added monaco-editor as dep

---
 examples/demo-app/esbuild.config.mjs | 8 +++++++-
 package.json                         | 1 +
 src/keplergl-duckdb-plugin           | 2 +-
 yarn.lock                            | 9 +++++++++
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/examples/demo-app/esbuild.config.mjs b/examples/demo-app/esbuild.config.mjs
index 160e20aba7..b2a714163b 100644
--- a/examples/demo-app/esbuild.config.mjs
+++ b/examples/demo-app/esbuild.config.mjs
@@ -47,7 +47,13 @@ const config = {
   platform: 'browser',
   format: 'iife',
   logLevel: 'info',
-  loader: {'.js': 'jsx', '.css': 'css'},
+  loader: {
+    '.js': 'jsx',
+    '.css': 'css',
+    '.ttf': 'file',
+    '.woff': 'file',
+    '.woff2': 'file'
+  },
   entryPoints: ['src/main.js'],
   outfile: 'dist/bundle.js',
   bundle: true,
diff --git a/package.json b/package.json
index 2838a20ffd..0bd38c8dc5 100644
--- a/package.json
+++ b/package.json
@@ -108,6 +108,7 @@
     "@loaders.gl/polyfills": "^4.3.2",
     "@types/mapbox__geo-viewport": "^0.4.1",
     "html-webpack-plugin": "^4.3.0",
+    "monaco-editor": "^0.52.0",
     "typedoc": "^0.19.2"
   },
   "devDependencies": {
diff --git a/src/keplergl-duckdb-plugin b/src/keplergl-duckdb-plugin
index 476e17e65a..f26031a24c 160000
--- a/src/keplergl-duckdb-plugin
+++ b/src/keplergl-duckdb-plugin
@@ -1 +1 @@
-Subproject commit 476e17e65a476b921aab056f17c8d1683028d46a
+Subproject commit f26031a24cf1062b89ecf3e1ffd74dfea924d869
diff --git a/yarn.lock b/yarn.lock
index c47dbb280f..6d83a7a297 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3233,6 +3233,7 @@ __metadata:
     "@monaco-editor/react": "npm:^4.6.0"
     "@radix-ui/react-collapsible": "npm:^1.1.0"
     apache-arrow: "npm:>=15.0.0"
+    monaco-editor: "npm:^0.52.0"
   languageName: unknown
   linkType: soft
 
@@ -20270,6 +20271,7 @@ __metadata:
     json-loader: "npm:^0.5.4"
     maplibre-gl: "npm:^3.6.2"
     minimist: "npm:^1.2.6"
+    monaco-editor: "npm:^0.52.0"
     nyc: "npm:^15.1.0"
     prettier: "npm:2.8.8"
     progress-bar-webpack-plugin: "npm:^2.1.0"
@@ -22054,6 +22056,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"monaco-editor@npm:^0.52.0":
+  version: 0.52.0
+  resolution: "monaco-editor@npm:0.52.0"
+  checksum: 10c0/962c75272568eb1556835f0097da2c7768bffe1116b252bb8b3aefd34f31e2dc46baa27e3911c0a6617bf556e6d6802e6e9f0f5548edd832c33872a8a0c146d3
+  languageName: node
+  linkType: hard
+
 "moo@npm:^0.5.0":
   version: 0.5.2
   resolution: "moo@npm:0.5.2"

From 03a78241638902815d86d1a5ba779768db48872a Mon Sep 17 00:00:00 2001
From: Ilya Boyandin <ilya@boyandin.me>
Date: Tue, 3 Dec 2024 13:21:41 +0100
Subject: [PATCH 5/9] Added resizable panels for SQL

---
 examples/demo-app/package.json |  1 +
 examples/demo-app/src/app.tsx  | 78 +++++++++++++++++++---------------
 examples/demo-app/yarn.lock    | 11 +++++
 src/keplergl-duckdb-plugin     |  2 +-
 yarn.lock                      | 11 +++++
 5 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/examples/demo-app/package.json b/examples/demo-app/package.json
index 34e2bfb89a..934d1247b2 100644
--- a/examples/demo-app/package.json
+++ b/examples/demo-app/package.json
@@ -40,6 +40,7 @@
     "react-intl": "^6.3.0",
     "react-markdown": "^6.0.3",
     "react-redux": "^8.0.5",
+    "react-resizable-panels": "^2.1.7",
     "react-router": "3.2.5",
     "react-router-redux": "^4.0.8",
     "react-virtualized": "^9.21.0",
diff --git a/examples/demo-app/src/app.tsx b/examples/demo-app/src/app.tsx
index a928d6f027..c4919e7942 100644
--- a/examples/demo-app/src/app.tsx
+++ b/examples/demo-app/src/app.tsx
@@ -35,6 +35,7 @@ import {
 
 import {loadCloudMap, addDataToMap, replaceDataInMap} from '@kepler.gl/actions';
 import {CLOUD_PROVIDERS} from './cloud-providers';
+import {Panel, PanelGroup, PanelResizeHandle} from 'react-resizable-panels';
 
 const KeplerGl = require('@kepler.gl/components').injectComponents([
   replaceLoadDataModal(),
@@ -99,9 +100,20 @@ const CONTAINER_STYLE = {
   left: 0,
   top: 0,
   display: 'flex',
-  flexDirection: 'row'
+  flexDirection: 'column',
+  backgroundColor: '#333'
 };
 
+const StyledResizeHandle = styled(PanelResizeHandle)`
+  background-color: #333;
+  &:hover {
+    background-color: #555;
+  }
+  width: 100%;
+  height: 5px;
+  cursor: row-resize;
+`;
+
 const App = props => {
   const [showBanner, toggleShowBanner] = useState(false);
   const {params: {id, provider} = {}, location: {query = {}} = {}} = props;
@@ -443,14 +455,7 @@ const App = props => {
 
   return (
     <ThemeProvider theme={theme}>
-      <GlobalStyle
-      // this is to apply the same modal style as kepler.gl core
-      // because styled-components doesn't always return a node
-      // https://github.com/styled-components/styled-components/issues/617
-      // ref={node => {
-      //   node ? (this.root = node) : null;
-      // }}
-      >
+      <GlobalStyle>
         <ScreenshotWrapper
           startScreenCapture={props.demo.aiAssistant.screenshotToAsk.startScreenCapture}
           setScreenCaptured={_setScreenCaptured}
@@ -460,32 +465,35 @@ const App = props => {
             <Announcement onDisable={_disableBanner} />
           </Banner>
           <div style={CONTAINER_STYLE}>
-            <div style={{flexGrow: 1}}>
-              <AutoSizer>
-                {({height, width}) => (
-                  <KeplerGl
-                    mapboxApiAccessToken={CLOUD_PROVIDERS_CONFIGURATION.MAPBOX_TOKEN}
-                    id="map"
-                    /*
-                     * Specify path to keplerGl state, because it is not mount at the root
-                     */
-                    getState={keplerGlGetState}
-                    width={width}
-                    height={height}
-                    cloudProviders={CLOUD_PROVIDERS}
-                    localeMessages={combinedMessages}
-                    onExportToCloudSuccess={onExportFileSuccess}
-                    onLoadCloudMapSuccess={onLoadCloudMapSuccess}
-                    featureFlags={DEFAULT_FEATURE_FLAGS}
-                  />
-                )}
-              </AutoSizer>
-            </div>
-            {isSqlPanelOpen ? (
-              <div style={{width: '50%'}}>
-                <SqlPanel />
-              </div>
-            ) : null}
+            <PanelGroup direction="vertical">
+              <Panel defaultSize={isSqlPanelOpen ? 60 : 100}>
+                <AutoSizer>
+                  {({height, width}) => (
+                    <KeplerGl
+                      mapboxApiAccessToken={CLOUD_PROVIDERS_CONFIGURATION.MAPBOX_TOKEN}
+                      id="map"
+                      getState={keplerGlGetState}
+                      width={width}
+                      height={height}
+                      cloudProviders={CLOUD_PROVIDERS}
+                      localeMessages={combinedMessages}
+                      onExportToCloudSuccess={onExportFileSuccess}
+                      onLoadCloudMapSuccess={onLoadCloudMapSuccess}
+                      featureFlags={DEFAULT_FEATURE_FLAGS}
+                    />
+                  )}
+                </AutoSizer>
+              </Panel>
+
+              {isSqlPanelOpen && (
+                <>
+                  <StyledResizeHandle />
+                  <Panel defaultSize={40} minSize={20}>
+                    <SqlPanel />
+                  </Panel>
+                </>
+              )}
+            </PanelGroup>
           </div>
         </ScreenshotWrapper>
       </GlobalStyle>
diff --git a/examples/demo-app/yarn.lock b/examples/demo-app/yarn.lock
index a0a520c279..350c2c1c28 100644
--- a/examples/demo-app/yarn.lock
+++ b/examples/demo-app/yarn.lock
@@ -7389,6 +7389,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-resizable-panels@npm:^2.1.7":
+  version: 2.1.7
+  resolution: "react-resizable-panels@npm:2.1.7"
+  peerDependencies:
+    react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  checksum: 10c0/644a57960507b809f571bf8c95f07a04e3aeb9b20405a1d9d8cb6deb72d2462192e6e5e9751237347e7818179a619a6f65de4b355e276334d10b8cfe737ca4e1
+  languageName: node
+  linkType: hard
+
 "react-router-redux@npm:^4.0.8":
   version: 4.0.8
   resolution: "react-router-redux@npm:4.0.8"
@@ -7780,6 +7790,7 @@ __metadata:
     react-intl: "npm:^6.3.0"
     react-markdown: "npm:^6.0.3"
     react-redux: "npm:^8.0.5"
+    react-resizable-panels: "npm:^2.1.7"
     react-router: "npm:3.2.5"
     react-router-redux: "npm:^4.0.8"
     react-virtualized: "npm:^9.21.0"
diff --git a/src/keplergl-duckdb-plugin b/src/keplergl-duckdb-plugin
index f26031a24c..5b9249b5e8 160000
--- a/src/keplergl-duckdb-plugin
+++ b/src/keplergl-duckdb-plugin
@@ -1 +1 @@
-Subproject commit f26031a24cf1062b89ecf3e1ffd74dfea924d869
+Subproject commit 5b9249b5e8f6183877b96a98a6b59b3a1125e5cb
diff --git a/yarn.lock b/yarn.lock
index 6d83a7a297..29fe3e5c7f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3234,6 +3234,7 @@ __metadata:
     "@radix-ui/react-collapsible": "npm:^1.1.0"
     apache-arrow: "npm:>=15.0.0"
     monaco-editor: "npm:^0.52.0"
+    react-resizable-panels: "npm:^2.1.7"
   languageName: unknown
   linkType: soft
 
@@ -25087,6 +25088,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-resizable-panels@npm:^2.1.7":
+  version: 2.1.7
+  resolution: "react-resizable-panels@npm:2.1.7"
+  peerDependencies:
+    react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  checksum: 10c0/644a57960507b809f571bf8c95f07a04e3aeb9b20405a1d9d8cb6deb72d2462192e6e5e9751237347e7818179a619a6f65de4b355e276334d10b8cfe737ca4e1
+  languageName: node
+  linkType: hard
+
 "react-shallow-renderer@npm:^16.15.0":
   version: 16.15.0
   resolution: "react-shallow-renderer@npm:16.15.0"

From 6e04edcd93c5fadecd2e7bbecd437240237feea2 Mon Sep 17 00:00:00 2001
From: Ilya Boyandin <ilya@boyandin.me>
Date: Tue, 3 Dec 2024 21:43:09 +0100
Subject: [PATCH 6/9] SqlPanel improvements

---
 examples/demo-app/package.json |  2 ++
 examples/demo-app/src/app.tsx  | 19 +++++++++++++++----
 src/keplergl-duckdb-plugin     |  2 +-
 src/utils/src/browser-utils.ts |  7 +++++++
 src/utils/src/data-utils.ts    | 17 ++++++++++++++++-
 src/utils/src/index.ts         |  3 +++
 6 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/src/browser-utils.ts

diff --git a/examples/demo-app/package.json b/examples/demo-app/package.json
index 934d1247b2..047bc78d71 100644
--- a/examples/demo-app/package.json
+++ b/examples/demo-app/package.json
@@ -2,6 +2,8 @@
   "scripts": {
     "start": "node esbuild.config.mjs --start",
     "build": "node esbuild.config.mjs --build",
+    "deploy": "yarn build && netlify deploy -d dist",
+    "deploy:prod": "yarn build && netlify deploy -d dist --prod",
     "start:local": "NODE_ENV=local node esbuild.config.mjs --start",
     "start:local-ai": "NODE_ENV=local node esbuild.config.mjs --start --env.ai",
     "start:local-deck": "NODE_ENV=local node esbuild.config.mjs --start --env.deck",
diff --git a/examples/demo-app/src/app.tsx b/examples/demo-app/src/app.tsx
index c4919e7942..987df48db6 100644
--- a/examples/demo-app/src/app.tsx
+++ b/examples/demo-app/src/app.tsx
@@ -14,7 +14,7 @@ import {
   setStartScreenCapture,
   setScreenCaptured
 } from '@kepler.gl/ai-assistant';
-import {theme} from '@kepler.gl/styles';
+import {panelBorderColor, theme} from '@kepler.gl/styles';
 import {useSelector} from 'react-redux';
 import {ParsedConfig} from '@kepler.gl/types';
 import {SqlPanel} from 'keplergl-duckdb-plugin';
@@ -33,7 +33,13 @@ import {
   onLoadCloudMapSuccess
 } from './actions';
 
-import {loadCloudMap, addDataToMap, replaceDataInMap} from '@kepler.gl/actions';
+import {
+  loadCloudMap,
+  addDataToMap,
+  replaceDataInMap,
+  toggleMapControl,
+  toggleModal
+} from '@kepler.gl/actions';
 import {CLOUD_PROVIDERS} from './cloud-providers';
 import {Panel, PanelGroup, PanelResizeHandle} from 'react-resizable-panels';
 
@@ -105,7 +111,7 @@ const CONTAINER_STYLE = {
 };
 
 const StyledResizeHandle = styled(PanelResizeHandle)`
-  background-color: #333;
+  background-color: ${panelBorderColor};
   &:hover {
     background-color: #555;
   }
@@ -150,6 +156,11 @@ const App = props => {
       dispatch(loadRemoteMap({dataUrl: query.mapUrl}));
     }
 
+    if (query.sql) {
+      dispatch(toggleMapControl('sqlPanel', 0));
+      dispatch(toggleModal(null));
+    }
+
     // delay zs to show the banner
     // if (!window.localStorage.getItem(BannerKey)) {
     //   window.setTimeout(_showBanner, 3000);
@@ -489,7 +500,7 @@ const App = props => {
                 <>
                   <StyledResizeHandle />
                   <Panel defaultSize={40} minSize={20}>
-                    <SqlPanel />
+                    <SqlPanel initialSql={query.sql || ''} />
                   </Panel>
                 </>
               )}
diff --git a/src/keplergl-duckdb-plugin b/src/keplergl-duckdb-plugin
index 5b9249b5e8..42b2444731 160000
--- a/src/keplergl-duckdb-plugin
+++ b/src/keplergl-duckdb-plugin
@@ -1 +1 @@
-Subproject commit 5b9249b5e8f6183877b96a98a6b59b3a1125e5cb
+Subproject commit 42b244473106fa8286d8d7b5857896a628cc394c
diff --git a/src/utils/src/browser-utils.ts b/src/utils/src/browser-utils.ts
new file mode 100644
index 0000000000..ce01236c8b
--- /dev/null
+++ b/src/utils/src/browser-utils.ts
@@ -0,0 +1,7 @@
+/**
+ * Checks if the current device is an Apple device (Mac, iPhone, iPod, or iPad)
+ * @returns {boolean} True if the current device is an Apple device
+ */
+export function isAppleDevice(): boolean {
+  return /Mac|iPhone|iPod|iPad/.test(navigator.userAgent);
+}
diff --git a/src/utils/src/data-utils.ts b/src/utils/src/data-utils.ts
index f34364233f..63acba68be 100644
--- a/src/utils/src/data-utils.ts
+++ b/src/utils/src/data-utils.ts
@@ -251,7 +251,16 @@ export const FIELD_DISPLAY_FORMAT: {
       ? `[${String(d)}]`
       : '',
   [ALL_FIELD_TYPES.geoarrow]: d => d,
-  [ALL_FIELD_TYPES.object]: JSON.stringify,
+  [ALL_FIELD_TYPES.object]: (value: any) => {
+    if (typeof value?.toString === 'function') {
+      return value.toString();
+    }
+    try {
+      return JSON.stringify(value);
+    } catch (e) {
+      return String(value);
+    }
+  },
   [ALL_FIELD_TYPES.array]: JSON.stringify
 };
 
@@ -262,6 +271,12 @@ export const parseFieldValue = (value: any, type: string): string => {
   if (!notNullorUndefined(value)) {
     return '';
   }
+  // BigInt values cannot be serialized with JSON.stringify() directly
+  // We need to explicitly convert them to strings using .toString()
+  // See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#use_within_json
+  if (typeof value === 'bigint') {
+    return value.toString();
+  }
   return FIELD_DISPLAY_FORMAT[type] ? FIELD_DISPLAY_FORMAT[type](value) : String(value);
 };
 
diff --git a/src/utils/src/index.ts b/src/utils/src/index.ts
index 6bc80717a8..d689d16c73 100644
--- a/src/utils/src/index.ts
+++ b/src/utils/src/index.ts
@@ -144,3 +144,6 @@ export type {Centroid} from './h3-utils';
 // Application config
 export {getApplicationConfig, initApplicationConfig} from './application-config';
 export type {KeplerApplicationConfig, MapLibInstance} from './application-config';
+
+// Browser utils
+export {isAppleDevice} from './browser-utils';

From 6d8991edf116f301b0ce51173e79d3822a56a967 Mon Sep 17 00:00:00 2001
From: Ilya Boyandin <ilya@boyandin.me>
Date: Tue, 3 Dec 2024 22:00:17 +0100
Subject: [PATCH 7/9] Check empty query

---
 src/keplergl-duckdb-plugin | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/keplergl-duckdb-plugin b/src/keplergl-duckdb-plugin
index 42b2444731..430cb725d8 160000
--- a/src/keplergl-duckdb-plugin
+++ b/src/keplergl-duckdb-plugin
@@ -1 +1 @@
-Subproject commit 42b244473106fa8286d8d7b5857896a628cc394c
+Subproject commit 430cb725d8088f1232267fe79fd16412dc25ab51

From 93e5c1c40ab0e59615f17a2ab3b9d63f682f7996 Mon Sep 17 00:00:00 2001
From: Ilya Boyandin <ilya@boyandin.me>
Date: Fri, 6 Dec 2024 20:00:39 +0100
Subject: [PATCH 8/9] Fix: Add to Map didn't create table

---
 src/keplergl-duckdb-plugin | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/keplergl-duckdb-plugin b/src/keplergl-duckdb-plugin
index 430cb725d8..d4795a8a07 160000
--- a/src/keplergl-duckdb-plugin
+++ b/src/keplergl-duckdb-plugin
@@ -1 +1 @@
-Subproject commit 430cb725d8088f1232267fe79fd16412dc25ab51
+Subproject commit d4795a8a070b1a32beceb3d8e91eda7a02f09b62

From 66ac4d4b85875bb1cee8e0b34096dcb3573bcfef Mon Sep 17 00:00:00 2001
From: Ilya Boyandin <ilya@boyandin.me>
Date: Fri, 6 Dec 2024 20:18:25 +0100
Subject: [PATCH 9/9] Serialize SQL query into the url query parameter

---
 src/keplergl-duckdb-plugin | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/keplergl-duckdb-plugin b/src/keplergl-duckdb-plugin
index d4795a8a07..c2df1240a2 160000
--- a/src/keplergl-duckdb-plugin
+++ b/src/keplergl-duckdb-plugin
@@ -1 +1 @@
-Subproject commit d4795a8a070b1a32beceb3d8e91eda7a02f09b62
+Subproject commit c2df1240a22ca5b7a5ce923c95982f860620a2b5