Refactor/upgrade add react graph gl (visgl#7)

* refactor: upgrade dependencies * refactor: add react-graph-gl and fix build and lint * refactor: make react-graph-gl unit tests work * refactor: organize into graph-gl and react-graph-gl modules * remove extraneous comment --------- Co-authored-by: Ed Hager <[email protected]>
hadbn · Mar 4, 2023 · d9544cc · d9544cc
1 parent 753b128
commit d9544cc
Show file tree

Hide file tree

Showing 245 changed files with 15,469 additions and 5,672 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,4 @@
+deprecated/
 dist/
 node_modules/
 dist.*.js

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,47 @@
+module.exports = {
+  "plugins": [
+    "import"
+  ],
+  "extends": [
+    "prettier", "plugin:import/errors"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.spec.js", "webpack.config.js"
+      ],
+      "rules": {
+        "import/no-extraneous-dependencies": 0
+      }
+    }
+  ],
+  "settings": {},
+  "rules": {
+    "guard-for-in": 0,
+    "no-inline-comments": 0,
+    "import/no-unresolved": [
+      "error", {
+        "ignore": [
+          "test"
+        ]}],
+    "import/no-extraneous-dependencies": [
+      "error", {
+        "devDependencies": true, "peerDependencies": true}]
+  },
+  "env" : {
+    "browser" : true,
+    "node" : true,
+    "es6" : true
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2022,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    babelOptions: {
+      rootMode: "upward"
+    },
+  }
+};
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,4 @@
+deprecated/
 dist/
 node_modules/
 dist.*.js

diff --git a/babel.config.cjs b/babel.config.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ],
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        loader: {
+          '.js': 'jsx'
+        }
+      }
+    ]
+  ]
+};
diff --git a/babel.config.js b/babel.config.js
diff --git a/deprecated/README.md b/deprecated/README.md
@@ -0,0 +1 @@
+Included here are imcomplete or old examples.
diff --git a/modules/viv/layers/BitmapLayer.js → deprecated/viv/layers/BitmapLayer.js b/modules/viv/layers/BitmapLayer.js → deprecated/viv/layers/BitmapLayer.js
diff --git a/modules/viv/layers/ImageLayer.js → deprecated/viv/layers/ImageLayer.js b/modules/viv/layers/ImageLayer.js → deprecated/viv/layers/ImageLayer.js
diff --git a/...tiscaleImageLayer/MultiscaleImageLayer.js → ...tiscaleImageLayer/MultiscaleImageLayer.js b/...tiscaleImageLayer/MultiscaleImageLayer.js → ...tiscaleImageLayer/MultiscaleImageLayer.js
diff --git a/...aleImageLayer/MultiscaleImageLayerBase.js → ...aleImageLayer/MultiscaleImageLayerBase.js b/...aleImageLayer/MultiscaleImageLayerBase.js → ...aleImageLayer/MultiscaleImageLayerBase.js
diff --git a/.../viv/layers/MultiscaleImageLayer/index.js → .../viv/layers/MultiscaleImageLayer/index.js b/.../viv/layers/MultiscaleImageLayer/index.js → .../viv/layers/MultiscaleImageLayer/index.js
diff --git a/.../viv/layers/MultiscaleImageLayer/utils.js → .../viv/layers/MultiscaleImageLayer/utils.js b/.../viv/layers/MultiscaleImageLayer/utils.js → .../viv/layers/MultiscaleImageLayer/utils.js
diff --git a/modules/viv/layers/OverviewLayer.js → deprecated/viv/layers/OverviewLayer.js b/modules/viv/layers/OverviewLayer.js → deprecated/viv/layers/OverviewLayer.js
diff --git a/modules/viv/layers/ScaleBarLayer.js → deprecated/viv/layers/ScaleBarLayer.js b/modules/viv/layers/ScaleBarLayer.js → deprecated/viv/layers/ScaleBarLayer.js
diff --git a/...les/viv/layers/VolumeLayer/VolumeLayer.js → ...ted/viv/layers/VolumeLayer/VolumeLayer.js b/...les/viv/layers/VolumeLayer/VolumeLayer.js → ...ted/viv/layers/VolumeLayer/VolumeLayer.js
diff --git a/modules/viv/layers/VolumeLayer/index.js → deprecated/viv/layers/VolumeLayer/index.js b/modules/viv/layers/VolumeLayer/index.js → deprecated/viv/layers/VolumeLayer/index.js
diff --git a/modules/viv/layers/VolumeLayer/utils.js → deprecated/viv/layers/VolumeLayer/utils.js b/modules/viv/layers/VolumeLayer/utils.js → deprecated/viv/layers/VolumeLayer/utils.js
diff --git a/modules/viv/layers/XR3DLayer/XR3DLayer.js → deprecated/viv/layers/XR3DLayer/XR3DLayer.js b/modules/viv/layers/XR3DLayer/XR3DLayer.js → deprecated/viv/layers/XR3DLayer/XR3DLayer.js
diff --git a/...ers/XR3DLayer/channel-intensity-module.js → ...ers/XR3DLayer/channel-intensity-module.js b/...ers/XR3DLayer/channel-intensity-module.js → ...ers/XR3DLayer/channel-intensity-module.js
diff --git a/...v/layers/XR3DLayer/channel-intensity.glsl → ...v/layers/XR3DLayer/channel-intensity.glsl b/...v/layers/XR3DLayer/channel-intensity.glsl → ...v/layers/XR3DLayer/channel-intensity.glsl
diff --git a/modules/viv/layers/XR3DLayer/index.js → deprecated/viv/layers/XR3DLayer/index.js b/modules/viv/layers/XR3DLayer/index.js → deprecated/viv/layers/XR3DLayer/index.js
diff --git a/...s/viv/layers/XR3DLayer/rendering-modes.js → ...d/viv/layers/XR3DLayer/rendering-modes.js b/...s/viv/layers/XR3DLayer/rendering-modes.js → ...d/viv/layers/XR3DLayer/rendering-modes.js
diff --git a/...v/layers/XR3DLayer/xr-layer-fragment.glsl → ...v/layers/XR3DLayer/xr-layer-fragment.glsl b/...v/layers/XR3DLayer/xr-layer-fragment.glsl → ...v/layers/XR3DLayer/xr-layer-fragment.glsl
diff --git a/...viv/layers/XR3DLayer/xr-layer-vertex.glsl → ...viv/layers/XR3DLayer/xr-layer-vertex.glsl b/...viv/layers/XR3DLayer/xr-layer-vertex.glsl → ...viv/layers/XR3DLayer/xr-layer-vertex.glsl
diff --git a/modules/viv/layers/XRLayer/XRLayer.js → deprecated/viv/layers/XRLayer/XRLayer.js b/modules/viv/layers/XRLayer/XRLayer.js → deprecated/viv/layers/XRLayer/XRLayer.js
diff --git a/modules/viv/layers/XRLayer/index.js → deprecated/viv/layers/XRLayer/index.js b/modules/viv/layers/XRLayer/index.js → deprecated/viv/layers/XRLayer/index.js
diff --git a/...hader-modules/channel-intensity-module.js → ...hader-modules/channel-intensity-module.js b/...hader-modules/channel-intensity-module.js → ...hader-modules/channel-intensity-module.js
diff --git a/...yer/shader-modules/channel-intensity.glsl → ...yer/shader-modules/channel-intensity.glsl b/...yer/shader-modules/channel-intensity.glsl → ...yer/shader-modules/channel-intensity.glsl
diff --git a/...iv/layers/XRLayer/shader-modules/index.js → ...iv/layers/XRLayer/shader-modules/index.js b/...iv/layers/XRLayer/shader-modules/index.js → ...iv/layers/XRLayer/shader-modules/index.js
diff --git a/...ers/XRLayer/shader-modules/lens-module.js → ...ers/XRLayer/shader-modules/lens-module.js b/...ers/XRLayer/shader-modules/lens-module.js → ...ers/XRLayer/shader-modules/lens-module.js
diff --git a/...v/layers/XRLayer/shader-modules/lens.glsl → ...v/layers/XRLayer/shader-modules/lens.glsl b/...v/layers/XRLayer/shader-modules/lens.glsl → ...v/layers/XRLayer/shader-modules/lens.glsl
diff --git a/...er/xr-layer-fragment-colormap.webgl1.glsl → ...er/xr-layer-fragment-colormap.webgl1.glsl b/...er/xr-layer-fragment-colormap.webgl1.glsl → ...er/xr-layer-fragment-colormap.webgl1.glsl
diff --git a/...er/xr-layer-fragment-colormap.webgl2.glsl → ...er/xr-layer-fragment-colormap.webgl2.glsl b/...er/xr-layer-fragment-colormap.webgl2.glsl → ...er/xr-layer-fragment-colormap.webgl2.glsl
diff --git a/...ers/XRLayer/xr-layer-fragment.webgl1.glsl → ...ers/XRLayer/xr-layer-fragment.webgl1.glsl b/...ers/XRLayer/xr-layer-fragment.webgl1.glsl → ...ers/XRLayer/xr-layer-fragment.webgl1.glsl
diff --git a/...ers/XRLayer/xr-layer-fragment.webgl2.glsl → ...ers/XRLayer/xr-layer-fragment.webgl2.glsl b/...ers/XRLayer/xr-layer-fragment.webgl2.glsl → ...ers/XRLayer/xr-layer-fragment.webgl2.glsl
diff --git a/...ayers/XRLayer/xr-layer-vertex.webgl1.glsl → ...ayers/XRLayer/xr-layer-vertex.webgl1.glsl b/...ayers/XRLayer/xr-layer-vertex.webgl1.glsl → ...ayers/XRLayer/xr-layer-vertex.webgl1.glsl
diff --git a/...ayers/XRLayer/xr-layer-vertex.webgl2.glsl → ...ayers/XRLayer/xr-layer-vertex.webgl2.glsl b/...ayers/XRLayer/xr-layer-vertex.webgl2.glsl → ...ayers/XRLayer/xr-layer-vertex.webgl2.glsl
diff --git a/modules/viv/layers/index.js → deprecated/viv/layers/index.js b/modules/viv/layers/index.js → deprecated/viv/layers/index.js
diff --git a/modules/viv/layers/utils.js → deprecated/viv/layers/utils.js b/modules/viv/layers/utils.js → deprecated/viv/layers/utils.js
diff --git a/examples/.eslintrc b/examples/.eslintrc
diff --git a/examples/.eslintrc.cjs b/examples/.eslintrc.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  rules: {
+    'import/no-unresolved': 0,
+    'import/no-extraneous-dependencies': 0
+  }
+};
diff --git a/examples/bing-maps/app.js b/examples/bing-maps/app.js
@@ -33,28 +33,28 @@ loadModule().then(({Map, MapTypeId, Location, DeckOverlay}) => {
         filled: true,
         pointRadiusMinPixels: 2,
         pointRadiusScale: 2000,
-        getRadius: f => 11 - f.properties.scalerank,
+        getRadius: (f) => 11 - f.properties.scalerank,
         getFillColor: [200, 0, 80, 180],
         // Interactive props
         pickable: true,
         autoHighlight: true,
-        onClick: info =>
+        onClick: (info) =>
           // eslint-disable-next-line
           info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
       }),
       new ArcLayer({
         id: 'arcs',
         data: AIR_PORTS,
-        dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
+        dataTransform: (d) => d.features.filter((f) => f.properties.scalerank < 4),
         // Styles
-        getSourcePosition: f => [-0.4531566, 51.4709959], // London
-        getTargetPosition: f => f.geometry.coordinates,
+        getSourcePosition: (f) => [-0.4531566, 51.4709959], // London
+        getTargetPosition: (f) => f.geometry.coordinates,
         getSourceColor: [0, 128, 200],
         getTargetColor: [200, 0, 80],
         getWidth: 1
       })
     ],
-    getTooltip: info => info.object && info.object.properties.name
+    getTooltip: (info) => info.object && info.object.properties.name
   });
   map.layers.insert(deckOverlay);
 });
diff --git a/examples/bing-maps/index.html b/examples/bing-maps/index.html
@@ -1,7 +1,7 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
-    <meta charset='UTF-8' />
+    <meta charset="UTF-8" />
     <title>deck.gl w/ Bing Maps example</title>
     <style>
       #map {
@@ -18,6 +18,6 @@
   </head>
   <body>
     <div id="map"></div>
-    <script src='app.js'></script>
+    <script src="app.js"></script>
   </body>
 </html>
diff --git a/examples/bing-maps/package.json b/examples/bing-maps/package.json
@@ -1,16 +1,17 @@
 {
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "start": "webpack-dev-server --progress --hot --open",
     "start-local": "webpack-dev-server --env.local --progress --hot --open",
     "build": "webpack -p"
   },
   "dependencies": {
-    "deck.gl": "^8.4.0"
+    "deck.gl": "^8.8.26"
   },
   "devDependencies": {
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.11"
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
   }
 }
diff --git a/examples/bing-maps/webpack.config.js b/examples/bing-maps/webpack.config.js
@@ -10,4 +10,4 @@ const config = {
   plugins: [new webpack.EnvironmentPlugin(['BingMapsAPIKey'])]
 };
 
-module.exports = env => (env && env.local ? require('../webpack.config.local')(config) : config);
+module.exports = (env) => (env && env.local ? require('../webpack.config.local')(config) : config);
diff --git a/examples/minimal/app.js b/examples/minimal/app.js
@@ -1,10 +1,12 @@
 import React from 'react';
-import {add} from '@visgl-project-template/submodule';
+import {add} from '@deck.gl-community/submodule';
 
 export default function App() {
   const a = 1;
   const b = 2;
   return (
-    <div>{a} + {b} = {add(a, b)}</div>
+    <div>
+      {a} + {b} = {add(a, b)}
+    </div>
   );
 }
diff --git a/examples/minimal/package.json b/examples/minimal/package.json
@@ -6,15 +6,16 @@
   },
   "dependencies": {
     "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react-dom": "^16.0.0",
+    "@deck.gl-community/submodule": "^0.0.1"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.5",
-    "html-webpack-plugin": "^3.0.7",
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.11"
+    "babel-loader": "^9.1.2",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
   }
 }
diff --git a/examples/minimal/webpack.config.js b/examples/minimal/webpack.config.js
@@ -25,4 +25,4 @@ const config = {
   plugins: [new HtmlWebpackPlugin({title: 'deck.gl example'})]
 };
 
-module.exports = env => env && env.local ? require('../webpack.config.local')(config) : config;
+module.exports = (env) => (env && env.local ? require('../webpack.config.local')(config) : config);
diff --git a/examples/react-graph-gl/simple-graph-viewer/index.js b/examples/react-graph-gl/simple-graph-viewer/index.js
@@ -0,0 +1,59 @@
+import React, {Component} from 'react';
+
+import GraphGL, {D3ForceLayout, JSONLoader, NODE_TYPE} from '@deck.gl-community/react-graph-gl';
+
+import SAMPLE_GRAPH_DATASETS from '../../utils/data/sample-datasets';
+
+const DEFAULT_NODE_SIZE = 5;
+
+const DEFAULT_DATASET = 'Random (20, 40)';
+
+class Root extends Component {
+  state = {
+    selectedDataset: DEFAULT_DATASET
+  };
+
+  handleChangeGraph = ({target: {value}}) => this.setState({selectedDataset: value});
+
+  render() {
+    const {selectedDataset} = this.state;
+    const graphData = SAMPLE_GRAPH_DATASETS[selectedDataset]();
+    const graph = JSONLoader({json: graphData});
+
+    return (
+      <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
+        <div style={{width: '100%', zIndex: 999}}>
+          <div>
+            Dataset:
+            <select value={this.state.selectedDataset} onChange={this.handleChangeGraph}>
+              {Object.keys(SAMPLE_GRAPH_DATASETS).map((data) => (
+                <option key={data} value={data}>
+                  {data}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div style={{width: '100%', flex: 1}}>
+          <GraphGL
+            graph={graph}
+            layout={new D3ForceLayout()}
+            nodeStyle={[
+              {
+                type: NODE_TYPE.CIRCLE,
+                radius: DEFAULT_NODE_SIZE,
+                fill: 'red'
+              }
+            ]}
+            edgeStyle={{
+              stroke: '#000',
+              strokeWidth: 1
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Root;
diff --git a/examples/react-graph-gl/simple-graph-viewer/package.json b/examples/react-graph-gl/simple-graph-viewer/package.json
@@ -0,0 +1,7 @@
+{
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "deck.gl": "^@deck.gl-community/react-graph-gl"
+  }
+}
diff --git a/examples/webpack.config.local.js → examples/webpack.config.local.cjs b/examples/webpack.config.local.js → examples/webpack.config.local.cjs
@@ -35,7 +35,7 @@ const LOCAL_DEVELOPMENT_CONFIG = {
   }
 };
 
-module.exports = config => {
+module.exports = (config) => {
   config.resolve = config.resolve || {};
   config.resolve.alias = Object.assign(
     {},

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,4 @@
 {
-  "lerna": "2.0.0",
   "version": "independent",
   "npmClient": "yarn",
   "useWorkspaces": true,

diff --git a/modules/bing-maps/package.json b/modules/bing-maps/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "deck.gl-bing-maps",
+  "name": "@deck.gl-community/bing-maps",
   "description": "deck.gl integration with Bing Maps",
   "license": "MIT",
   "version": "0.1.0-beta.0",
@@ -15,16 +15,15 @@
     "type": "git",
     "url": "https://github.com/visgl/deck.gl-community.gl.git"
   },
-  "main": "dist/es5/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "files": [
     "dist",
     "src"
   ],
   "sideEffects": false,
   "scripts": {},
-  "dependencies": {},
-  "peerDependencies": {
-    "@deck.gl/core": "^8.0.0"
+  "dependencies": {
+    "@deck.gl/core": "^8.8.26"
   }
 }