[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';
@@ -105,6 +106,14 @@ const config = {
     replace({
       __PACKAGE_VERSION__: KeplerPackage.version,
       include: /constants\/src\/default-settings\.ts/
+    }),
+    // copy files to dist
+    copy({
+      resolveFrom: 'cwd',
+      assets: {
+        from: ['./src/static/_redirects'],
+        to: ['./dist/']
+      }
     })
   ]
 };

examples/demo-app/package.json

@@ -75,6 +75,7 @@
   "packageManager": "[email protected]",
   "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

@@ -303,6 +303,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/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

@@ -11,7 +11,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} from '@kepler.gl/duckdb';
 
 import {
   INIT,
@@ -26,6 +27,17 @@ import {
 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],
+  // async data ingestion to DuckDb
+  table: KeplerGlDuckDbTable,
+  // progressive loading is sync, doesn't wait properly for a dataset to be created in DuckDB
+  useArrowProgressiveLoading: false,
+  showReleaseBanner: false
+});
+
 const {DEFAULT_MAP_CONTROLS} = uiStateUpdaters;
 
 // INITIAL_APP_STATE

examples/demo-app/src/static/_redirects

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