chore: deck.gl 9.2 upgrade & loaders.gl, luma.gl upgrades

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

@@ -78,10 +78,10 @@
     "@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",
+    "@loaders.gl/arrow": "^4.1.0",
+    "@loaders.gl/core": "^4.1.0",
+    "@loaders.gl/csv": "^4.1.0",
+    "@loaders.gl/json": "^4.1.0",
     "global": "^4.3.0",
     "node-polyfill-webpack-plugin": "^1.1.2",
     "querystring": "0.2.1",

jest.config.js

@@ -22,7 +22,7 @@ const config = {
   // Some libraries (even if transitive) are transitioning to ESM and need additional transpilation. Relevant issues:
   // - tiny-sdf: https://github.com/visgl/deck.gl/issues/7735
   transformIgnorePatterns: [
-    '/node_modules\\/(?!(.*@mapbox\\/tiny-sdf\\.*|@loaders\\.gl))',
+    '/node_modules\\/(?!(.*@mapbox\\/tiny-sdf\\.*|@loaders\\.gl|@deck\\.gl|@deck\\.gl-community|@luma\\.gl|preact))',
     '\\.pnp\\.[^\\/]+$'
   ]
 };

package.json

@@ -101,13 +101,14 @@
     "umd"
   ],
   "dependencies": {
-    "@deck.gl/mapbox": "^8.9.27",
+    "@deck.gl/mapbox": "^9.2.11",
     "@hubble.gl/core": "1.4.0",
     "@hubble.gl/react": "1.4.0",
     "@kepler.gl/components": "3.2.6",
-    "@loaders.gl/polyfills": "^4.3.2",
+    "@loaders.gl/polyfills": "^4.3.4",
     "@types/mapbox__geo-viewport": "^0.4.1",
     "html-webpack-plugin": "^4.3.0",
+    "math.gl": "^4.1.0",
     "monaco-editor": "^0.52.0",
     "typedoc": "^0.19.2"
   },
@@ -133,10 +134,12 @@
     "@babel/runtime": "^7.12.1",
     "@babel/traverse": "^7.12.1",
     "@cfaester/enzyme-adapter-react-18": "^0.7.0",
-    "@deck.gl/test-utils": "^8.9.27",
-    "@loaders.gl/polyfills": "^4.3.2",
-    "@luma.gl/test-utils": "^8.5.20",
-    "@nebula.gl/layers": "1.0.2-alpha.1",
+    "@deck.gl-community/editable-layers": "9.2.8",
+    "@deck.gl-community/layers": "9.2.8",
+    "@deck.gl/test-utils": "^9.2.11",
+    "@loaders.gl/polyfills": "^4.3.4",
+    "@luma.gl/test-utils": "^9.2.6",
+    "@luma.gl/webgpu": "^9.2.6",
     "@open-wc/webpack-import-meta-loader": "0.4.7",
     "@probe.gl/env": "^3.5.0",
     "@probe.gl/test-utils": "^3.5.0",
@@ -210,7 +213,7 @@
     "tape": "^4.9.2",
     "tape-catch": "^1.0.6",
     "typedoc-plugin-markdown": "^3.0.11",
-    "typescript": "4.7.2",
+    "typescript": "5.6.3",
     "url-loader": "^4.1.1",
     "usehooks-ts": "^3.1.0",
     "watchify": "^3.6.1",
@@ -223,25 +226,35 @@
     "webpack-stats-plugin": "^0.2.1"
   },
   "resolutions": {
-    "@loaders.gl/core": "4.3.2",
-    "@loaders.gl/csv": "4.3.2",
-    "@loaders.gl/draco": "4.3.2",
-    "@loaders.gl/gltf": "4.3.2",
-    "@loaders.gl/json": "4.3.2",
-    "@loaders.gl/loader-utils": "4.3.2",
-    "@loaders.gl/polyfills": "4.3.2",
-    "@loaders.gl/arrow": "4.3.2",
-    "@loaders.gl/parquet": "4.3.2",
-    "@loaders.gl/gis": "4.3.2",
-    "@loaders.gl/schema": "4.3.2",
-    "@loaders.gl/wkt": "4.3.2",
-    "@loaders.gl/wms": "4.3.2",
-    "@luma.gl/constants": "8.5.21",
-    "@luma.gl/core": "8.5.21",
-    "@luma.gl/experimental": "8.5.21",
-    "@luma.gl/shadertools": "8.5.21",
-    "@luma.gl/test-utils": "8.5.21",
-    "@luma.gl/webgl": "8.5.21",
+    "@deck.gl/aggregation-layers": "9.2.11",
+    "@deck.gl/core": "9.2.11",
+    "@deck.gl/extensions": "9.2.11",
+    "@deck.gl/geo-layers": "9.2.11",
+    "@deck.gl/layers": "9.2.11",
+    "@deck.gl/mesh-layers": "9.2.11",
+    "@deck.gl/mapbox": "9.2.11",
+    "@deck.gl/react": "9.2.11",
+    "@deck.gl/widgets": "9.2.11",
+    "@loaders.gl/core": "4.3.4",
+    "@loaders.gl/csv": "4.3.4",
+    "@loaders.gl/draco": "4.3.4",
+    "@loaders.gl/gltf": "4.3.4",
+    "@loaders.gl/json": "4.3.4",
+    "@loaders.gl/loader-utils": "4.3.4",
+    "@loaders.gl/polyfills": "4.3.4",
+    "@loaders.gl/arrow": "4.3.4",
+    "@loaders.gl/parquet": "4.3.4",
+    "@loaders.gl/gis": "4.3.4",
+    "@loaders.gl/schema": "4.3.4",
+    "@loaders.gl/wkt": "4.3.4",
+    "@loaders.gl/wms": "4.3.4",
+    "@luma.gl/constants": "9.2.6",
+    "@luma.gl/core": "9.2.6",
+    "@luma.gl/engine": "9.2.6",
+    "@luma.gl/shadertools": "9.2.6",
+    "@luma.gl/test-utils": "9.2.6",
+    "@luma.gl/webgl": "9.2.6",
+    "@luma.gl/webgpu": "9.2.6",
     "@types/lodash": "4.17.5",
     "browserslist": "^4.17.0",
     "caniuse-lite": "^1.0.30001636",

scripts/fix-dependencies.sh

@@ -8,6 +8,16 @@
 # We use tail to avoid the first line of the the output which is the command itself
 yarn babel node_modules/@mapbox/tiny-sdf/index.js | tail -n +2 > node_modules/@mapbox/tiny-sdf/index.cjs
 
+# Make the CJS build resolvable by require() - patch package.json to add exports and remove ESM-only type
+node -e "
+const fs = require('fs');
+const p = 'node_modules/@mapbox/tiny-sdf/package.json';
+const pkg = JSON.parse(fs.readFileSync(p, 'utf8'));
+pkg.exports = { '.': { require: './index.cjs', import: './index.js', default: './index.cjs' } };
+pkg.main = './index.cjs';
+fs.writeFileSync(p, JSON.stringify(pkg, null, 2));
+"
+
 # Patch for an issue with react-virtualized output having an invalid import
 # https://github.com/bvaughn/react-virtualized/issues/1212
 if [[ -f "node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js" ]]; then

src/actions/package.json

@@ -30,7 +30,7 @@
     "umd"
   ],
   "dependencies": {
-    "@deck.gl/core": "^8.9.27",
+    "@deck.gl/core": "^9.2.11",
     "@kepler.gl/cloud-providers": "3.2.6",
     "@kepler.gl/constants": "3.2.6",
     "@kepler.gl/layers": "3.2.6",

src/actions/src/vis-state-actions.ts

@@ -2,7 +2,7 @@
 // Copyright contributors to the kepler.gl project
 
 // vis-state-reducer
-import {PickInfo} from '@deck.gl/core/lib/deck';
+import {PickingInfo} from '@deck.gl/core';
 import {default as ActionTypes} from './action-types';
 import {FileCacheItem} from '@kepler.gl/processors';
 import {Layer, LayerBaseConfig} from '@kepler.gl/layers';
@@ -1112,7 +1112,7 @@ export function toggleFilterFeature(
 }
 
 export type OnLayerHoverUpdaterAction = {
-  info: PickInfo<any> | null;
+  info: PickingInfo<any> | null;
   mapIndex?: number;
 };
 /**
@@ -1124,7 +1124,7 @@ export type OnLayerHoverUpdaterAction = {
  * @public
  */
 export function onLayerHover(
-  info: PickInfo<any> | null,
+  info: PickingInfo<any> | null,
   mapIndex?: number
 ): Merge<OnLayerHoverUpdaterAction, {type: typeof ActionTypes.LAYER_HOVER}> {
   return {
@@ -1135,7 +1135,7 @@ export function onLayerHover(
 }
 
 export type OnLayerClickUpdaterAction = {
-  info: PickInfo<any> | null;
+  info: PickingInfo<any> | null;
 };
 /**
  * Trigger layer click event with clicked object
@@ -1145,7 +1145,7 @@ export type OnLayerClickUpdaterAction = {
  * @public
  */
 export function onLayerClick(
-  info: PickInfo<any> | null
+  info: PickingInfo<any> | null
 ): Merge<OnLayerClickUpdaterAction, {type: typeof ActionTypes.LAYER_CLICK}> {
   return {
     type: ActionTypes.LAYER_CLICK,

src/ai-assistant/src/components/ai-assistant-component.tsx

@@ -72,8 +72,11 @@ export function AiAssistantComponent() {
   const instructions = `${INSTRUCTIONS}\n\n${datasetMetaData}`;
 
   // generate ideas from LLM
-  const {temporaryPrompt, restartChat: libraryRestartChat} = useAssistant({...assistantProps, instructions});
-
+  const {temporaryPrompt, restartChat: libraryRestartChat} = useAssistant({
+    ...assistantProps,
+    instructions
+  });
+
   const restartChatRef = useRef(libraryRestartChat);
   restartChatRef.current = libraryRestartChat;
 
@@ -104,13 +107,13 @@ export function AiAssistantComponent() {
 
   const onRestartAssistant = async () => {
     dispatch(updateAiAssistantMessages([]));
-    
+
     try {
       await restartChatRef.current();
     } catch (e) {
       console.error('Error restarting chat:', e);
     }
-    
+
     setRestartKey(prev => prev + 1);
   };
 

src/ai-assistant/src/config/models.ts

@@ -2,12 +2,12 @@
 // Copyright contributors to the kepler.gl project
 
 export const PROVIDER_DEFAULT_BASE_URLS = {
-  "openai": "https://api.openai.com/v1",
-  "anthropic": "https://api.anthropic.com/v1",
-  "google": "https://generativelanguage.googleapis.com/v1beta",
-  "deepseek": "https://api.deepseek.com/v1",
-  "xai": "https://api.x.ai/v1",
-  "ollama": "http://localhost:11434/api"
+  openai: 'https://api.openai.com/v1',
+  anthropic: 'https://api.anthropic.com/v1',
+  google: 'https://generativelanguage.googleapis.com/v1beta',
+  deepseek: 'https://api.deepseek.com/v1',
+  xai: 'https://api.x.ai/v1',
+  ollama: 'http://localhost:11434/api'
 };
 
 export const PROVIDER_MODELS = {

src/components/package.json

@@ -30,8 +30,10 @@
     "umd"
   ],
   "dependencies": {
-    "@deck.gl/core": "^8.9.27",
-    "@deck.gl/react": "^8.9.27",
+    "@deck.gl-community/editable-layers": "9.2.8",
+    "@deck.gl/core": "^9.2.11",
+    "@deck.gl/react": "^9.2.11",
+    "@deck.gl/widgets": "^9.2.11",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -52,11 +54,10 @@
     "@kepler.gl/table": "3.2.6",
     "@kepler.gl/types": "3.2.6",
     "@kepler.gl/utils": "3.2.6",
-    "@loaders.gl/mvt": "^4.3.2",
-    "@loaders.gl/pmtiles": "^4.3.2",
-    "@loaders.gl/wms": "4.3.2",
+    "@loaders.gl/mvt": "^4.3.4",
+    "@loaders.gl/pmtiles": "^4.3.4",
+    "@loaders.gl/wms": "4.3.4",
     "@mapbox/mapbox-sdk": "^0.15.3",
-    "@nebula.gl/edit-modes": "1.0.2-alpha.1",
     "@tippyjs/react": "^4.2.0",
     "@types/classnames": "^2.3.1",
     "@types/d3-array": "^2.8.0",
@@ -91,7 +92,7 @@
     "mapbox-gl": "1.13.1",
     "maplibre-gl": "^3.6.2",
     "markdown-to-jsx": "^7.7.6",
-    "mjolnir.js": "^2.7.0",
+    "mjolnir.js": "^3.0.0",
     "moment": "^2.10.6",
     "moment-timezone": "^0.5.35",
     "prop-types": "^15.6.0",

src/components/src/common/data-table/index.tsx

@@ -349,7 +349,7 @@ export const TableSection = ({
                 height={headerGridProps.height + browserScrollBarWidth}
                 width={headerGridWidth}
                 scrollLeft={scrollLeft}
-                onScroll={args => onScroll?.({...args, scrollTop:scrollTop ?? 0 })}
+                onScroll={args => onScroll?.({...args, scrollTop: scrollTop ?? 0})}
               />
             </div>
             <div

src/components/src/common/icons/close.tsx

@@ -14,7 +14,13 @@ export default class Close extends Component<Partial<BaseProps>> {
     return (
       <Base {...this.props}>
         <g transform="translate(32,32)">
-          <path d="M-16,-16 L16,16 M16,-16 L-16,16" stroke="currentColor" strokeWidth="5" strokeLinecap="round" fill="none" />
+          <path
+            d="M-16,-16 L16,16 M16,-16 L-16,16"
+            stroke="currentColor"
+            strokeWidth="5"
+            strokeLinecap="round"
+            fill="none"
+          />
         </g>
       </Base>
     );

src/components/src/editor/editor.tsx

@@ -18,7 +18,7 @@ import {
 } from '@kepler.gl/constants';
 import {Layer, EditorLayerUtils} from '@kepler.gl/layers';
 import {Filter, FeatureSelectionContext, Feature} from '@kepler.gl/types';
-import {FeatureOf, Polygon} from '@nebula.gl/edit-modes';
+import {Feature as EditableFeature, Polygon} from '@deck.gl-community/editable-layers';
 import {Datasets} from '@kepler.gl/table';
 
 import {RootContext} from '../context';
@@ -76,7 +76,7 @@ export default function EditorFactory(
               <StyledWrapper className={classnames('editor', className)} style={style}>
                 {visiblePanel ? (
                   <FeatureActionPanel
-                    selectedFeature={selectedFeature as FeatureOf<Polygon>}
+                    selectedFeature={selectedFeature as EditableFeature<Polygon>}
                     datasets={datasets}
                     layers={layers}
                     currentFilter={currentFilter}
@@ -191,7 +191,7 @@ export default function EditorFactory(
 
       return (
         <PortalEditor
-          selectedFeature={selectedFeature as FeatureOf<Polygon>}
+          selectedFeature={selectedFeature as EditableFeature<Polygon>}
           visiblePanel={Boolean(rightClick) && selectedFeature && index === mapIndex}
           datasets={datasets}
           layers={availableLayers}

src/components/src/editor/feature-action-panel.tsx

@@ -10,7 +10,7 @@ import styled from 'styled-components';
 
 import {Layer} from '@kepler.gl/layers';
 import {Filter} from '@kepler.gl/types';
-import {Feature} from '@nebula.gl/edit-modes';
+import {Feature} from '@deck.gl-community/editable-layers';
 import {Datasets} from '@kepler.gl/table';
 import {canApplyFeatureFilter} from '@kepler.gl/utils';
 

src/components/src/effects/effect-configurator.tsx

@@ -283,7 +283,7 @@ export default function EffectConfiguratorFactory(
     effect,
     updateEffectConfig
   }) => {
-    const uniforms = effect.deckEffect?.module.uniforms || defaultUniforms;
+    const uniforms = effect.deckEffect?.module.propTypes || defaultUniforms;
     const parameterDescriptions = effect.getParameterDescriptions();
     const {parameters, id} = effect;
     const flatParameterDescriptions = useMemo(() => {
@@ -311,17 +311,23 @@ export default function EffectConfiguratorFactory(
       return flatParameterDescriptions.map(desc => {
         const paramName = desc.name;
 
-        const uniform = uniforms[desc.name];
-        if ((!uniform && uniform !== 0) || uniform.private) {
+        const rawUniform = uniforms[desc.name];
+        if ((!rawUniform && rawUniform !== 0) || rawUniform.private) {
           return null;
         }
 
+        // luma.gl 9 wraps array propTypes as {value: [...]}
+        const uniform =
+          rawUniform && typeof rawUniform === 'object' && Array.isArray(rawUniform.value)
+            ? rawUniform.value
+            : rawUniform;
+
         const prevValue = parameters[paramName];
 
         const label = desc.label === false ? false : desc.label || desc.name;
 
         // the uniform is [number, number] array
-        if (uniform.length === 2) {
+        if (Array.isArray(uniform) && uniform.length === 2) {
           return {
             label,
             value1: prevValue[desc.index || 0] || 0,