Update kepler-jupyter to use kepler.gl v3.2.0

bindings/kepler.gl-jupyter/js/lib/keplergl/components/app.js

@@ -72,6 +72,7 @@ function App() {
 
   useEffect(() => {
     window.addEventListener('resize', resizeDelay);
+    handleResize();
     return () => window.removeEventListener('resize', resizeDelay);
   }, []);
 

bindings/kepler.gl-jupyter/js/lib/keplergl/components/root.js

@@ -1,19 +1,28 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React from 'react';
+import React, {useEffect} from 'react';
 import ReactDOM from 'react-dom';
 import {Provider} from 'react-redux';
 import App from './app';
 
-function renderRoot({id, store, ele}) {
-  const Root = () => (
-    <Provider store={store}>
-      <App />
-    </Provider>
-  );
+function renderRoot({id, store, ele, onMounted}) {
+  const Root = () => {
+    useEffect(() => {
+      // Call onMounted callback after component is mounted
+      if (onMounted && typeof onMounted === 'function') {
+        onMounted();
+      }
+    }, []);
 
-  ReactDOM.render(<Root />, ele);
-}
+    return (
+      <Provider store={store}>
+        <App />
+      </Provider>
+    );
+  };
+
+    ReactDOM.render(<Root />, ele);
+  }
 
 export default renderRoot;

bindings/kepler.gl-jupyter/js/lib/keplergl/main.js

@@ -17,16 +17,18 @@ const map = (function initKeplerGl() {
   document.body.appendChild(divElmt);
 
   return {
-    render: () => {
-      renderRoot({id, store, ele: divElmt});
+    render: (onMounted) => {
+      renderRoot({ id, store, ele: divElmt, onMounted });
     },
     store
   };
 })();
 
-map.render();
+function loadDataConfig(keplerGlMap) {
+  const { data, config, options } = Window.__keplerglDataConfig || {};
+  addDataConfigToKeplerGl({ data, config, options, store: keplerGlMap.store });
+}
 
-(function loadDataConfig(keplerGlMap) {
-  const {data, config, options} = Window.__keplerglDataConfig || {};
-  addDataConfigToKeplerGl({data, config, options, store: keplerGlMap.store});
-})(map);
+map.render(() => {
+  loadDataConfig(map);
+});

bindings/kepler.gl-jupyter/js/package.json

@@ -59,28 +59,29 @@
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "~7.12.4",
     "html-webpack-plugin": "^4.3.0",
+    "process": "^0.11.10",
     "react-dev-utils": "^10.2.1",
     "rimraf": "^2.6.1",
-    "webpack": "^4.29.0",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-middleware": "^3.5.1",
-    "webpack-dev-server": "^3.1.14",
-    "webpack-hot-middleware": "^2.24.3",
+    "webpack": "^5.102.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-middleware": "^7.4.5",
+    "webpack-dev-server": "^5.2.2",
+    "webpack-hot-middleware": "^2.26.1",
     "webpack-stats-plugin": "^0.2.1"
   },
   "dependencies": {
     "@jupyter-widgets/base": "^6",
     "@jupyterlab/builder": "^4.0.0",
-    "@kepler.gl/actions": "^3.0.0",
-    "@kepler.gl/components": "^3.0.0",
-    "@kepler.gl/processors": "^3.0.0",
-    "@kepler.gl/reducers": "^3.0.0",
-    "@kepler.gl/schemas": "^3.0.0",
-    "@kepler.gl/styles": "^3.0.0",
-    "@loaders.gl/arrow": "^4.1.0",
-    "@loaders.gl/core": "^4.1.0",
-    "@loaders.gl/csv": "^4.1.0",
-    "@loaders.gl/json": "^4.1.0",
+    "@kepler.gl/actions": "^3.2.0",
+    "@kepler.gl/components": "^3.2.0",
+    "@kepler.gl/processors": "^3.2.0",
+    "@kepler.gl/reducers": "^3.2.0",
+    "@kepler.gl/schemas": "^3.2.0",
+    "@kepler.gl/styles": "^3.2.0",
+    "@loaders.gl/arrow": "^4.3.2",
+    "@loaders.gl/core": "^4.3.2",
+    "@loaders.gl/csv": "^4.3.2",
+    "@loaders.gl/json": "^4.3.2",
     "global": "^4.3.0",
     "node-polyfill-webpack-plugin": "^1.1.2",
     "querystring": "0.2.1",

bindings/kepler.gl-jupyter/js/webpack/build-html.js

@@ -56,14 +56,25 @@ module.exports = (rules, plugins) => ({
 
   output: {
     path: path.resolve(__dirname, '../..', 'keplergl', 'static'),
-    libraryTarget: 'umd'
+    chunkFormat: false,
+    library: {
+      name: 'umd',
+      type: 'umd'
+    }
   },
 
   externals,
 
   module: {
     rules
   },
+  resolve: {
+    fallback: {
+      fs: false,
+      process: require.resolve('process/browser')
+    }
+  },
+
   plugins: [
     // ...webpackConfig.plugins,
     // new webpack.optimize.UglifyJsPlugin({sourceMap: true, compressor: {comparisons: false, warnings: false}}),
@@ -95,9 +106,5 @@ module.exports = (rules, plugins) => ({
       title: 'Kepler.gl'
     }),
     new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/main/])
-  ],
-
-  node: {
-    fs: 'empty'
-  }
+  ]
 });

bindings/kepler.gl-jupyter/js/webpack/config.js

@@ -11,29 +11,63 @@ const rules = [
     test: /\.(js|jsx|ts|tsx)$/,
     loader: 'babel-loader',
     include: path.join(__dirname, '../lib', 'keplergl'),
-    exclude: [/node_modules/]
+    exclude: [/node_modules\/(?!(@monaco-editor|@radix-ui))/]
   },
   // fix for arrow-related errors
   {
     test: /\.mjs$/,
-    // include: /node_modules[\\/]apache-arrow/,
-    include: /node_modules/,
+    include: /node_modules[\\/]apache-arrow/,
     type: 'javascript/auto'
   },
+  {
+    test: /\.js$/,
+    loader: require.resolve('@open-wc/webpack-import-meta-loader'),
+    include: [/node_modules\/parquet-wasm/]
+  },
   // for compiling @probe.gl, website build started to fail (March, 2024)
   {
     test: /\.(js|ts)$/,
     loader: 'babel-loader',
     include: [
       /node_modules[\\/]@probe.gl/,
       /node_modules[\\/]@loaders.gl/,
-      /node_modules[\\/]@math.gl/
+      /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'
+  },
+  // Handle @loaders.gl ESM modules for webpack 5
+  {
+    test: /\.m?js$/,
+    resolve: {
+      fullySpecified: false
+    },
+    include: [
+      /node_modules\/@loaders\.gl/,
+      /node_modules\/@math\.gl/,
+      /node_modules\/@probe\.gl/,
+      /node_modules\/@geoarrow/
+    ],
+    type: 'javascript/auto'
   }
 ];
 
 const plugins = [
-  new webpack.EnvironmentPlugin(['MapboxAccessTokenJupyter'])
+  new webpack.EnvironmentPlugin({
+    MapboxAccessTokenJupyter: null
+  }),
+  new webpack.ProvidePlugin({
+    process: 'process/browser'
+  })
+
 ];
 
 module.exports = {
@@ -50,14 +84,15 @@ module.exports = {
     output: {
       filename: 'extension.js',
       path: path.resolve(__dirname, '../..', 'keplergl', 'static'),
-      libraryTarget: 'amd'
-    },
-    node: {
-      fs: 'empty'
+      library: {
+        name: 'amd',
+        type: 'amd'
+      }
     },
     plugins
   },
 
+
   widget: {
     // Bundle for the notebook containing the custom widget views and models
     //
@@ -72,18 +107,20 @@ module.exports = {
     },
     output: {
       filename: 'index.js',
+      chunkFormat: false,
       path: path.resolve(__dirname, '../..', 'keplergl', 'static'),
-      libraryTarget: 'amd'
+      library: {
+        name: 'amd',
+        type: 'amd'
+      }
     },
     // adding source map significantly slows down the
     // devtool: 'source-map',
     module: {
       rules
     },
     externals: ['@jupyter-widgets/base'],
-    node: {
-      fs: 'empty'
-    },
+    resolve: buildHtml.resolve,
     plugins
   },
 
@@ -107,18 +144,21 @@ module.exports = {
     entry: path.resolve(__dirname, '../lib/embed.js'),
     output: {
       filename: 'index.js',
+      chunkFormat: false,
       path: path.resolve(__dirname, '../dist'),
-      libraryTarget: 'amd',
+      library: {
+        type: 'amd',
+        name: 'amd'
+      },
       publicPath: `https://unpkg.com/keplergl-jupyter@${version}/dist/`
     },
     mode: 'production',
     module: {
       rules
     },
+
     externals: ['@jupyter-widgets/base'],
-    node: {
-      fs: 'empty'
-    },
+    resolve: buildHtml.resolve,
     plugins
   }
 };