Fix/deckgl scenegraphlayer (#264)

MlScenegraphLayer props handling & deck.gl storybook demos

Fixes a "Maximum update depth exceeded" bug in MlScenegraphLayer caused
by improper props handling (the full props object was passed directly
into useMemo, triggering infinite re-renders). Also fixes deck.gl
storybook demos that were broken as a result.

Author: cioddi

eslint.config.mjs

@@ -102,7 +102,16 @@ export default [
 			'**/*.cjs',
 			'**/*.mjs',
 		],
-		rules: {},
+		rules: {
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{
+					argsIgnorePattern: '^_',
+					varsIgnorePattern: '^_',
+					destructuredArrayIgnorePattern: '^_',
+				},
+			],
+		},
 	},
 	...storybook.configs['flat/recommended'],
 ];

packages/deck-gl/package.json

@@ -9,7 +9,10 @@
 		"test": "echo \"Error: no test specified\" && exit 1"
 	},
 	"dependencies": {
+		"@emotion/react": "^11.14.0",
+		"@emotion/styled": "^11.14.1",
 		"@mui/icons-material": "^7.3.2",
+		"@mui/system": "^7.3.2",
 		"@mui/material": "^7.3.2",
 		"@storybook/react": "^9.1.4",
 		"uuid": "^11.1.0"

packages/deck-gl/src/components/Ml3DTileLayer/Ml3DTileLayer.stories.tsx

@@ -23,7 +23,6 @@ PointCloudExample.parameters = {
 	},
 };
 PointCloudExample.args = {
-	mapId: 'map_1',
 	id: 'PointCould',
 	data: 'assets/tiles/tileset.json',
 	pointSize: 2,
@@ -38,6 +37,5 @@ HamburgExample.parameters = {
 	},
 };
 HamburgExample.args = {
-	mapId: 'map_1',
 	data: 'https://3dtiles.wheregroup.com/tileset.json',
 };

packages/deck-gl/src/components/MlHexagonLayer/MlHexagonLayer.stories.tsx

@@ -69,7 +69,6 @@ const Template = (context: any) => {
 export const DefaultSettings: { [key: string]: any } = Template.bind({});
 DefaultSettings.parameters = {};
 DefaultSettings.args = {
-	mapId: 'map_1',
 	type: HexagonLayer,
 	layerOpacity: 0.8,
 	elevationRange: [30, 75],
@@ -93,7 +92,6 @@ DefaultSettings.args = {
 export const CustomColorAndHeightProfile: { [key: string]: any } = Template.bind({});
 CustomColorAndHeightProfile.parameters = {};
 CustomColorAndHeightProfile.args = {
-	mapId: 'map_1',
 	type: HexagonLayer,
 	layerOpacity: 0.8,
 	specularColor: [51, 51, 51],

packages/deck-gl/src/components/MlSceneGraphLayer/MlScenegraphLayer.stories.tsx

@@ -78,7 +78,6 @@ DeckglExample.parameters = {
 	},
 };
 DeckglExample.args = {
-	mapId: 'map_1',
 	id: 'ScenegraphLayer',
 	data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json',
 	getPosition: (d: BartStation) => d.coordinates,
@@ -102,7 +101,6 @@ WhereGroupLocationExample.parameters = {
 	},
 };
 WhereGroupLocationExample.args = {
-	mapId: 'map_1',
 	id: 'ScenegraphLayer',
 	data: wgLocations,
 	getPosition: (d: any) => d.geometry.coordinates,

packages/deck-gl/src/components/MlSceneGraphLayer/MlScenegraphLayer.tsx

@@ -16,20 +16,17 @@ export interface MlScenegraphLayerProps extends ScenegraphLayerProps {
 }
 
 const MlScenegraphLayer = (props: MlScenegraphLayerProps) => {
-	const { mapId, ...ScenegraphLayerProps } = props;
-
 	const mapHook = useMap({
-		mapId: mapId,
-		waitForLayer: ScenegraphLayerProps.beforeId,
+		mapId: props.mapId,
+		waitForLayer: props.beforeId,
 	});
 	const deckGlHook = useDeckGl();
-	const scenegraphLayer = useMemo(
-		() =>
-			new ScenegraphLayer({
-				...ScenegraphLayerProps,
-			}),
-		[ScenegraphLayerProps]
-	);
+	const scenegraphLayer = useMemo(() => {
+		const { mapId: _mapId, ...ScenegraphLayerProps } = props;
+		return new ScenegraphLayer({
+			...ScenegraphLayerProps,
+		});
+	}, [props]);
 
 	useEffect(() => {
 		if (!mapHook.map || !scenegraphLayer) return;

packages/deck-gl/vite.config.ts

@@ -9,6 +9,16 @@ import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
 export default defineConfig(() => ({
 	root: __dirname,
 	cacheDir: '../../node_modules/.vite/packages/deck-gl',
+	resolve: {
+		dedupe: [
+			'react',
+			'react-dom',
+			'@mui/material',
+			'@mui/system',
+			'@emotion/react',
+			'@emotion/styled',
+		],
+	},
 	plugins: [
 		react(),
 		nxViteTsPaths(),
@@ -50,6 +60,11 @@ export default defineConfig(() => ({
 				'@deck.gl/geo-layers',
 				'@deck.gl/mapbox',
 				'@deck.gl/mesh-layers',
+				'@mui/material',
+				'@mui/system',
+				'@mui/icons-material',
+				'@emotion/react',
+				'@emotion/styled',
 			],
 		},
 	},

packages/three/package.json

@@ -20,7 +20,10 @@
 		"react-dom": "^19.1.0"
 	},
 	"dependencies": {
+		"@emotion/react": "^11.14.0",
+		"@emotion/styled": "^11.14.1",
 		"@mui/material": "^7.3.2",
+		"@mui/system": "^7.3.2",
 		"maplibre-gl": "^5.16.0",
 		"three": "^0.182.0"
 	},

packages/three/vite.config.ts

@@ -9,6 +9,16 @@ import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
 export default defineConfig(() => ({
 	root: __dirname,
 	cacheDir: '../../node_modules/.vite/packages/three',
+	resolve: {
+		dedupe: [
+			'react',
+			'react-dom',
+			'@mui/material',
+			'@mui/system',
+			'@emotion/react',
+			'@emotion/styled',
+		],
+	},
 	plugins: [
 		react(),
 		nxViteTsPaths(),
@@ -51,6 +61,9 @@ export default defineConfig(() => ({
 				'three',
 				'maplibre-gl',
 				'@mui/material',
+				'@mui/system',
+				'@emotion/react',
+				'@emotion/styled',
 			],
 		},
 	},