[chore] DuckDB demo app

examples/demo-app/esbuild.config.mjs

@@ -3,6 +3,7 @@
 
 import esbuild from 'esbuild';
 import {replace} from 'esbuild-plugin-replace';
+import copy from 'esbuild-plugin-copy';
 import {dotenvRun} from '@dotenv-run/esbuild';
 
 import process from 'node:process';
@@ -62,6 +63,44 @@ const getProductionReactAliases = nodeModulesDir => ({
   'react-dom/client': `${nodeModulesDir}/react-dom/cjs/react-dom-client.production.js`
 });
 
+// Workspace packages to load from source when NODE_ENV=local.
+// Must include package subpaths (e.g. duckdb/components) — the monorepo
+// tsconfig only maps `@kepler.gl/*` (one segment), so subpath imports would
+// otherwise resolve to demo-app/node_modules and create a second utils singleton.
+const KEPLER_WORKSPACE_PACKAGES = [
+  'actions',
+  'ai-assistant',
+  'cloud-providers',
+  'common-utils',
+  'components',
+  'constants',
+  'deckgl-arrow-layers',
+  'deckgl-layers',
+  'duckdb',
+  'effects',
+  'layers',
+  'localization',
+  'processors',
+  'reducers',
+  'schemas',
+  'styles',
+  'table',
+  'tasks',
+  'utils'
+];
+
+const getKeplerLocalAliases = () => {
+  const aliases = {};
+  for (const pkg of KEPLER_WORKSPACE_PACKAGES) {
+    aliases[`@kepler.gl/${pkg}`] = join(SRC_DIR, pkg, 'src');
+  }
+  aliases['@kepler.gl/duckdb/components'] = join(SRC_DIR, 'duckdb/src/components');
+  aliases['@kepler.gl/duckdb/table'] = join(SRC_DIR, 'duckdb/src/table');
+  return aliases;
+};
+
+const isLocalEnv = process.env.NODE_ENV === 'local';
+
 // Env variables required for demo app
 const requiredEnvVariables = [
   'MapboxAccessToken',
@@ -95,6 +134,10 @@ const config = {
   logOverride: {
     'unsupported-jsx-comment': 'silent'
   },
+  // Use demo-app tsconfig (no path mappings). Walking up to the monorepo
+  // tsconfig would rewrite `@kepler.gl/pkg` → `src/pkg/src` but not subpaths
+  // like `@kepler.gl/duckdb/components`, splitting the applicationConfig singleton.
+  tsconfig: join(__dirname, 'tsconfig.json'),
   inject: ['src/react19-shim.js'],
   loader: {
     '.js': 'jsx',
@@ -146,7 +189,34 @@ const config = {
           return result;
         });
       }
-    }
+    },
+    // Force a single @kepler.gl/* copy from demo-app/node_modules (published
+    // packages on Netlify/production). Local monorepo source is handled via
+    // getKeplerLocalAliases() instead — do not resolve from the repo root
+    // node_modules here (workspace dist/ is often missing on CI).
+    {
+      name: 'dedupe-kepler',
+      setup(build) {
+        if (isLocalEnv) return;
+        build.onResolve({filter: /^@kepler\.gl\//}, async args => {
+          if (args.pluginData?.deduped) return;
+          const result = await build.resolve(args.path, {
+            resolveDir: __dirname,
+            kind: 'import-statement',
+            pluginData: {deduped: true}
+          });
+          return result;
+        });
+      }
+    },
+    // copy files to dist
+    copy({
+      resolveFrom: 'cwd',
+      assets: {
+        from: ['./src/static/_redirects'],
+        to: ['./dist/']
+      }
+    })
   ]
 };
 
@@ -309,7 +379,8 @@ function openURL(url) {
         sourcemap: false,
         // Add alias resolution for build
         alias: {
-          ...getThirdPartyLibraryAliases(true)
+          ...getThirdPartyLibraryAliases(true),
+          ...(isLocalEnv ? getKeplerLocalAliases() : {})
         },
         // Add these production optimizations
         define: {
@@ -348,7 +419,7 @@ function openURL(url) {
   if (args.includes('--start')) {
     const isLocal = process.env.NODE_ENV === 'local';
     const baseAliases = isLocal
-      ? localAliases
+      ? {...localAliases, ...getKeplerLocalAliases()}
       : getThirdPartyLibraryAliases(false);
     const nodeModulesDir = isLocal ? NODE_MODULES_DIR : BASE_NODE_MODULES_DIR;
     // Skip dedupe-webgl when a local deck.gl source override is active so that

examples/demo-app/package.json

@@ -63,6 +63,7 @@
   "packageManager": "yarn@4.4.0",
   "devDependencies": {
     "@dotenv-run/esbuild": "^1.5.0",
+    "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-replace": "^1.4.0"
   }
 }

examples/demo-app/src/actions.js

@@ -298,6 +298,15 @@ export function loadSampleConfigurations(sampleMapId = null) {
         }
       })
       .then(samples => {
+        if (samples.length > 10) {
+          // For DuckDB preview:  move tiled examples to the top
+          let removed = samples.splice(4, 2);
+          samples.splice(1, 0, ...removed);
+
+          // For DuckDB preview: filter out the example with trips as 4th timecoordinate is dropped in GEOMETRY
+          samples = samples.filter(s => s.id !== 'world_flights');
+        }
+
         dispatch(loadMapSampleFile(samples));
         // Load the specified map
         const map = sampleMapId && samples.find(s => s.id === sampleMapId);

examples/demo-app/src/app.tsx

@@ -20,6 +20,7 @@
 import {panelBorderColor, theme} from '@kepler.gl/styles';
 import {ParsedConfig} from '@kepler.gl/types';
 import {getApplicationConfig} from '@kepler.gl/utils';
+import {injectComponents} from '@kepler.gl/components';
 import {SqlPanel} from '@kepler.gl/duckdb/components';
 import Banner from './components/banner';
 import Announcement, {FormLink} from './components/announcement';
@@ -46,7 +47,7 @@
 import {CLOUD_PROVIDERS} from './cloud-providers';
 import {Panel, PanelGroup, PanelResizeHandle} from 'react-resizable-panels';
 
-const KeplerGl = require('@kepler.gl/components').injectComponents([
+const KeplerGl = injectComponents([
   replaceLoadDataModal(),
   replaceMapControl(),
   replacePanelHeader()
@@ -150,7 +151,7 @@
   }
 `;
 
 const App = props => {
   const [showBanner, toggleShowBanner] = useState(false);
   const {id, provider} = useParams();
   const [searchParams] = useSearchParams();

examples/demo-app/src/cloud-providers/index.js

@@ -3,20 +3,20 @@
 
 import {CLOUD_PROVIDERS_CONFIGURATION} from '../constants/default-settings';
 
-import DropboxProvider from './dropbox/dropbox-provider';
-import CartoProvider from './carto/carto-provider';
+// import DropboxProvider from './dropbox/dropbox-provider';
+// import CartoProvider from './carto/carto-provider';
 import FoursquareProvider from './foursquare/foursquare-provider';
 
 const {
-  DROPBOX_CLIENT_ID,
-  CARTO_CLIENT_ID,
+  // DROPBOX_CLIENT_ID,
+  // CARTO_CLIENT_ID,
   FOURSQUARE_CLIENT_ID,
   FOURSQUARE_DOMAIN,
   FOURSQUARE_API_URL,
   FOURSQUARE_USER_MAPS_URL
 } = CLOUD_PROVIDERS_CONFIGURATION;
 
-const DROPBOX_CLIENT_NAME = 'Kepler.gl Demo App';
+// const DROPBOX_CLIENT_NAME = 'Kepler.gl Demo App';
 
 export const DEFAULT_CLOUD_PROVIDER = 'dropbox';
 
@@ -26,9 +26,11 @@ export const CLOUD_PROVIDERS = [
     authDomain: FOURSQUARE_DOMAIN,
     apiURL: FOURSQUARE_API_URL,
     userMapsURL: FOURSQUARE_USER_MAPS_URL
-  }),
-  new DropboxProvider(DROPBOX_CLIENT_ID, DROPBOX_CLIENT_NAME),
-  new CartoProvider(CARTO_CLIENT_ID)
+  })
+  // TODO DuckDB preview only
+  // Disable Dropbox and Carto providers in DuckDb-preview as the domain isn't whitelisted for them.
+  // new DropboxProvider(DROPBOX_CLIENT_ID, DROPBOX_CLIENT_NAME),
+  // new CartoProvider(CARTO_CLIENT_ID)
 ];
 
 export function getCloudProvider(providerName) {

examples/demo-app/src/components/load-data-modal/sample-data-viewer.js

@@ -5,7 +5,7 @@ import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import {format} from 'd3-format';
-import {LoadingDialog} from '@kepler.gl/components';
+import {LoadingDialog, Icons} from '@kepler.gl/components';
 import {FormattedMessage} from 'react-intl';
 
 const numFormat = format(',');
@@ -72,6 +72,24 @@ const StyledError = styled.div`
   margin-bottom: 16px;
 `;
 
+const AddDataHelper = styled.div`
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: -25px;
+  margin-bottom: 6px;
+  cursor: pointer;
+
+  color: ${props => props.theme.subtextColorLT};
+  &:hover {
+    color: ${props => props.theme.textColorLT};
+  }
+`;
+
+const StyledAddIcon = styled(Icons.Add)`
+  display: inline;
+  margin-top: -3px;
+`;
+
 const SampleMap = ({id, sample, onClick}) => (
   <StyledSampleMap id={id} className="sample-map-gallery__item">
     <div className="sample-map">
@@ -98,7 +116,8 @@ const SampleMapGallery = ({
   error,
   isMapLoading,
   locale,
-  loadSampleConfigurations
+  loadSampleConfigurations,
+  enableLoadDataModal
 }) => {
   useEffect(() => {
     if (!sampleMaps.length) {
@@ -107,27 +126,34 @@ const SampleMapGallery = ({
   }, [sampleMaps, loadSampleConfigurations]);
 
   return (
-    <div className="sample-data-modal">
-      {error ? (
-        <StyledError>{error.message}</StyledError>
-      ) : isMapLoading ? (
-        <LoadingDialog size={64} />
-      ) : (
-        <StyledSampleGallery className="sample-map-gallery">
-          {sampleMaps
-            .filter(sp => sp.visible)
-            .map(sp => (
-              <SampleMap
-                id={sp.id}
-                sample={sp}
-                key={sp.id}
-                onClick={() => onLoadSample(sp)}
-                locale={locale}
-              />
-            ))}
-        </StyledSampleGallery>
-      )}
-    </div>
+    <>
+      {!error && !isMapLoading ? (
+        <AddDataHelper onClick={enableLoadDataModal}>
+          Add data <StyledAddIcon />
+        </AddDataHelper>
+      ) : null}
+      <div className="sample-data-modal">
+        {error ? (
+          <StyledError>{error.message}</StyledError>
+        ) : isMapLoading ? (
+          <LoadingDialog size={64} />
+        ) : (
+          <StyledSampleGallery className="sample-map-gallery">
+            {sampleMaps
+              .filter(sp => sp.visible)
+              .map(sp => (
+                <SampleMap
+                  id={sp.id}
+                  sample={sp}
+                  key={sp.id}
+                  onClick={() => onLoadSample(sp)}
+                  locale={locale}
+                />
+              ))}
+          </StyledSampleGallery>
+        )}
+      </div>
+    </>
   );
 };
 

examples/demo-app/src/components/load-data-modal/sample-maps-tab.js

@@ -2,6 +2,7 @@
 // Copyright contributors to the kepler.gl project
 
 import React from 'react';
+import classnames from 'classnames';
 import styled from 'styled-components';
 import {Icons} from '@kepler.gl/components';
 import {media} from '@kepler.gl/styles';
@@ -25,10 +26,13 @@ const StyledMapIcon = styled.div`
 
 const StyledTrySampleData = styled.div`
   display: flex;
-  margin-bottom: 12px;
+  margin-bottom: 0px;
+  margin-left: 84px;
+  padding-bottom: 9px;
   flex-grow: 1;
   justify-content: flex-end;
   color: ${props => props.theme.subtextColorLT};
+  border-bottom: 3px solid transparent;
 
   .demo-map-title {
     margin-left: 16px;
@@ -37,6 +41,12 @@ const StyledTrySampleData = styled.div`
     justify-content: flex-end;
   }
 
+  .load-data-modal__tab__item.active {
+    color: ${props => props.theme.textColorLT};
+    border-bottom: 3px solid ${props => props.theme.textColorLT};
+    font-weight: 500;
+  }
+
   .demo-map-label {
     font-size: 11px;
 
@@ -70,9 +80,9 @@ const StyledTrySampleData = styled.div`
   }
 `;
 
-const SampleMapsTab = ({onClick}) => {
+const SampleMapsTab = ({onClick, className}) => {
   return (
-    <StyledTrySampleData className="try-sample-data">
+    <StyledTrySampleData className={classnames('try-sample-data', className)}>
       <StyledMapIcon className="demo-map-icon" />
       <div className="demo-map-title">
         <div className="demo-map-label">

examples/demo-app/src/reducers/index.js

@@ -10,12 +10,8 @@ import {processGeojson, processRowObject, processArrowTable} from '@kepler.gl/pr
 import keplerGlReducer, {combinedUpdaters, uiStateUpdaters} from '@kepler.gl/reducers';
 import KeplerGlSchema from '@kepler.gl/schemas';
 import {KeplerTable} from '@kepler.gl/table';
-import {getApplicationConfig} from '@kepler.gl/utils';
-
-// import {getApplicationConfig, initApplicationConfig} from '@kepler.gl/utils';
-// import keplerGlDuckdbPlugin, {KeplerGlDuckDbTable, DuckDBWasmAdapter} from '@kepler.gl/duckdb';
-
-import {initApplicationConfig} from '@kepler.gl/utils';
+import {getApplicationConfig, initApplicationConfig} from '@kepler.gl/utils';
+import keplerGlDuckdbPlugin, {KeplerGlDuckDbTable, DuckDBWasmAdapter} from '@kepler.gl/duckdb';
 
 import {
   INIT,
@@ -31,7 +27,7 @@ import {CLOUD_PROVIDERS_CONFIGURATION} from '../constants/default-settings';
 import {generateHashId} from '../utils/strings';
 
 // initialize kepler demo-app with DuckDB plugin
-/*
+
 initApplicationConfig({
   // Custom UI for DuckDB
   plugins: [keplerGlDuckdbPlugin],
@@ -46,9 +42,9 @@ initApplicationConfig({
     }
   }),
   // progressive loading is sync, doesn't wait properly for a dataset to be created in DuckDB
-  useArrowProgressiveLoading: false
+  useArrowProgressiveLoading: false,
+  showReleaseBanner: false
 });
-*/
 
 // Example: Register custom icons for the icon layer.
 // These will be merged with the default icons fetched from CDN.

examples/demo-app/src/static/_redirects

@@ -0,0 +1 @@
+/* / 200