Skip to content

Commit bc59e88

Browse files
karosclixun910
karosc
and
lixun910
authored
Update kepler-jupyter to use kepler.gl v3.2.0 (#3219)
* - update kepler to v3.2.0 - update webpack to v5 and migrate configs Signed-off-by: karosc <ckaros@outlook.com> * wait for map to render before loading data and config Signed-off-by: karosc <ckaros@outlook.com> * resize map after mounting (address #3045) Signed-off-by: karosc <ckaros@outlook.com> * Update root.js --------- Signed-off-by: karosc <ckaros@outlook.com> Co-authored-by: Xun Li <lixun910@gmail.com>
1 parent e375612 commit bc59e88

File tree

7 files changed

+2337
-2620
lines changed

7 files changed

+2337
-2620
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ function App() {
7272

7373
useEffect(() => {
7474
window.addEventListener('resize', resizeDelay);
75+
handleResize();
7576
return () => window.removeEventListener('resize', resizeDelay);
7677
}, []);
7778

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

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,26 @@
11
// SPDX-License-Identifier: MIT
22
// Copyright contributors to the kepler.gl project
33

4-
import React from 'react';
4+
import React, {useEffect} from 'react';
55
import ReactDOM from 'react-dom';
66
import {Provider} from 'react-redux';
77
import App from './app';
88

9-
function renderRoot({id, store, ele}) {
10-
const Root = () => (
11-
<Provider store={store}>
12-
<App />
13-
</Provider>
14-
);
9+
function renderRoot({id, store, ele, onMounted}) {
10+
const Root = () => {
11+
useEffect(() => {
12+
// Call onMounted callback after component is mounted
13+
if (onMounted && typeof onMounted === 'function') {
14+
onMounted();
15+
}
16+
}, []);
17+
18+
return (
19+
<Provider store={store}>
20+
<App />
21+
</Provider>
22+
);
23+
};
1524

1625
ReactDOM.render(<Root />, ele);
1726
}

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,18 @@ const map = (function initKeplerGl() {
1717
document.body.appendChild(divElmt);
1818

1919
return {
20-
render: () => {
21-
renderRoot({id, store, ele: divElmt});
20+
render: (onMounted) => {
21+
renderRoot({ id, store, ele: divElmt, onMounted });
2222
},
2323
store
2424
};
2525
})();
2626

27-
map.render();
27+
function loadDataConfig(keplerGlMap) {
28+
const { data, config, options } = Window.__keplerglDataConfig || {};
29+
addDataConfigToKeplerGl({ data, config, options, store: keplerGlMap.store });
30+
}
2831

29-
(function loadDataConfig(keplerGlMap) {
30-
const {data, config, options} = Window.__keplerglDataConfig || {};
31-
addDataConfigToKeplerGl({data, config, options, store: keplerGlMap.store});
32-
})(map);
32+
map.render(() => {
33+
loadDataConfig(map);
34+
});

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

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -59,28 +59,29 @@
5959
"eslint-plugin-prettier": "^3.0.1",
6060
"eslint-plugin-react": "~7.12.4",
6161
"html-webpack-plugin": "^4.3.0",
62+
"process": "^0.11.10",
6263
"react-dev-utils": "^10.2.1",
6364
"rimraf": "^2.6.1",
64-
"webpack": "^4.29.0",
65-
"webpack-cli": "^3.2.1",
66-
"webpack-dev-middleware": "^3.5.1",
67-
"webpack-dev-server": "^3.1.14",
68-
"webpack-hot-middleware": "^2.24.3",
65+
"webpack": "^5.102.1",
66+
"webpack-cli": "^6.0.1",
67+
"webpack-dev-middleware": "^7.4.5",
68+
"webpack-dev-server": "^5.2.2",
69+
"webpack-hot-middleware": "^2.26.1",
6970
"webpack-stats-plugin": "^0.2.1"
7071
},
7172
"dependencies": {
7273
"@jupyter-widgets/base": "^6",
7374
"@jupyterlab/builder": "^4.0.0",
74-
"@kepler.gl/actions": "^3.0.0",
75-
"@kepler.gl/components": "^3.0.0",
76-
"@kepler.gl/processors": "^3.0.0",
77-
"@kepler.gl/reducers": "^3.0.0",
78-
"@kepler.gl/schemas": "^3.0.0",
79-
"@kepler.gl/styles": "^3.0.0",
80-
"@loaders.gl/arrow": "^4.1.0",
81-
"@loaders.gl/core": "^4.1.0",
82-
"@loaders.gl/csv": "^4.1.0",
83-
"@loaders.gl/json": "^4.1.0",
75+
"@kepler.gl/actions": "^3.2.0",
76+
"@kepler.gl/components": "^3.2.0",
77+
"@kepler.gl/processors": "^3.2.0",
78+
"@kepler.gl/reducers": "^3.2.0",
79+
"@kepler.gl/schemas": "^3.2.0",
80+
"@kepler.gl/styles": "^3.2.0",
81+
"@loaders.gl/arrow": "^4.3.2",
82+
"@loaders.gl/core": "^4.3.2",
83+
"@loaders.gl/csv": "^4.3.2",
84+
"@loaders.gl/json": "^4.3.2",
8485
"global": "^4.3.0",
8586
"node-polyfill-webpack-plugin": "^1.1.2",
8687
"querystring": "0.2.1",

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,25 @@ module.exports = (rules, plugins) => ({
5656

5757
output: {
5858
path: path.resolve(__dirname, '../..', 'keplergl', 'static'),
59-
libraryTarget: 'umd'
59+
chunkFormat: false,
60+
library: {
61+
name: 'umd',
62+
type: 'umd'
63+
}
6064
},
6165

6266
externals,
6367

6468
module: {
6569
rules
6670
},
71+
resolve: {
72+
fallback: {
73+
fs: false,
74+
process: require.resolve('process/browser')
75+
}
76+
},
77+
6778
plugins: [
6879
// ...webpackConfig.plugins,
6980
// new webpack.optimize.UglifyJsPlugin({sourceMap: true, compressor: {comparisons: false, warnings: false}}),
@@ -95,9 +106,5 @@ module.exports = (rules, plugins) => ({
95106
title: 'Kepler.gl'
96107
}),
97108
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/main/])
98-
],
99-
100-
node: {
101-
fs: 'empty'
102-
}
109+
]
103110
});

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

Lines changed: 57 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,63 @@ const rules = [
1111
test: /\.(js|jsx|ts|tsx)$/,
1212
loader: 'babel-loader',
1313
include: path.join(__dirname, '../lib', 'keplergl'),
14-
exclude: [/node_modules/]
14+
exclude: [/node_modules\/(?!(@monaco-editor|@radix-ui))/]
1515
},
1616
// fix for arrow-related errors
1717
{
1818
test: /\.mjs$/,
19-
// include: /node_modules[\\/]apache-arrow/,
20-
include: /node_modules/,
19+
include: /node_modules[\\/]apache-arrow/,
2120
type: 'javascript/auto'
2221
},
22+
{
23+
test: /\.js$/,
24+
loader: require.resolve('@open-wc/webpack-import-meta-loader'),
25+
include: [/node_modules\/parquet-wasm/]
26+
},
2327
// for compiling @probe.gl, website build started to fail (March, 2024)
2428
{
2529
test: /\.(js|ts)$/,
2630
loader: 'babel-loader',
2731
include: [
2832
/node_modules[\\/]@probe.gl/,
2933
/node_modules[\\/]@loaders.gl/,
30-
/node_modules[\\/]@math.gl/
34+
/node_modules[\\/]@math.gl/,
35+
/node_modules[\\/]@geoarrow/
3136
]
37+
},
38+
{
39+
test: /\.m?js$/,
40+
include: [
41+
/node_modules\/@duckdb\/duckdb-wasm/,
42+
/node_modules\/@radix-ui/,
43+
/node_modules\/@monaco-editor\/react/
44+
],
45+
type: 'javascript/auto'
46+
},
47+
// Handle @loaders.gl ESM modules for webpack 5
48+
{
49+
test: /\.m?js$/,
50+
resolve: {
51+
fullySpecified: false
52+
},
53+
include: [
54+
/node_modules\/@loaders\.gl/,
55+
/node_modules\/@math\.gl/,
56+
/node_modules\/@probe\.gl/,
57+
/node_modules\/@geoarrow/
58+
],
59+
type: 'javascript/auto'
3260
}
3361
];
3462

3563
const plugins = [
36-
new webpack.EnvironmentPlugin(['MapboxAccessTokenJupyter'])
64+
new webpack.EnvironmentPlugin({
65+
MapboxAccessTokenJupyter: null
66+
}),
67+
new webpack.ProvidePlugin({
68+
process: 'process/browser'
69+
})
70+
3771
];
3872

3973
module.exports = {
@@ -50,14 +84,15 @@ module.exports = {
5084
output: {
5185
filename: 'extension.js',
5286
path: path.resolve(__dirname, '../..', 'keplergl', 'static'),
53-
libraryTarget: 'amd'
54-
},
55-
node: {
56-
fs: 'empty'
87+
library: {
88+
name: 'amd',
89+
type: 'amd'
90+
}
5791
},
5892
plugins
5993
},
6094

95+
6196
widget: {
6297
// Bundle for the notebook containing the custom widget views and models
6398
//
@@ -72,18 +107,20 @@ module.exports = {
72107
},
73108
output: {
74109
filename: 'index.js',
110+
chunkFormat: false,
75111
path: path.resolve(__dirname, '../..', 'keplergl', 'static'),
76-
libraryTarget: 'amd'
112+
library: {
113+
name: 'amd',
114+
type: 'amd'
115+
}
77116
},
78117
// adding source map significantly slows down the
79118
// devtool: 'source-map',
80119
module: {
81120
rules
82121
},
83122
externals: ['@jupyter-widgets/base'],
84-
node: {
85-
fs: 'empty'
86-
},
123+
resolve: buildHtml.resolve,
87124
plugins
88125
},
89126

@@ -107,18 +144,21 @@ module.exports = {
107144
entry: path.resolve(__dirname, '../lib/embed.js'),
108145
output: {
109146
filename: 'index.js',
147+
chunkFormat: false,
110148
path: path.resolve(__dirname, '../dist'),
111-
libraryTarget: 'amd',
149+
library: {
150+
type: 'amd',
151+
name: 'amd'
152+
},
112153
publicPath: `https://unpkg.com/keplergl-jupyter@${version}/dist/`
113154
},
114155
mode: 'production',
115156
module: {
116157
rules
117158
},
159+
118160
externals: ['@jupyter-widgets/base'],
119-
node: {
120-
fs: 'empty'
121-
},
161+
resolve: buildHtml.resolve,
122162
plugins
123163
}
124164
};

0 commit comments

Comments
 (0)