feat(graph-layers): Simplified graph-viewer example (#167)

examples/graph-layers/graph-viewer-legacy/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2015 - 2021 Uber Technologies, Inc.
+Copyright (c) 2022 - 2023 vis.gl contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

examples/graph-layers/graph-viewer-legacy/app.tsx

@@ -0,0 +1,91 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import React, {Component} from 'react';
+import {createRoot} from 'react-dom/client';
+
+import {D3ForceLayout, JSONLoader, NODE_TYPE} from '@deck.gl-community/graph-layers';
+import {GraphGL} from './react-graph-layers/graph-gl';
+
+// eslint-disable-next-line import/no-unresolved
+import {SAMPLE_GRAPH_DATASETS} from '../../../modules/graph-layers/test/data/graphs/sample-datasets';
+
+const DEFAULT_NODE_SIZE = 5;
+
+const DEFAULT_DATASET = 'Random (20, 40)';
+
+const LAYOUTS = ['D3ForceLayout', 'GPUForceLayout', 'SimpleLayout'];
+
+export class App extends Component {
+  state = {
+    selectedDataset: DEFAULT_DATASET,
+    selectedLayout: DEFAULT_DATASET
+  };
+
+  handleChangeGraph = ({target: {value}}) => this.setState({selectedDataset: value});
+
+  handleChangeLayout = ({target: {value}}) => this.setState({selectedLayout: value});
+
+  render() {
+    const {selectedDataset} = this.state;
+    const graphData = SAMPLE_GRAPH_DATASETS[selectedDataset]();
+    const graph = JSONLoader({json: graphData});
+
+    // return (
+    //    <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>
+    //         Layout:
+    //         <select value={this.state.selectedLayout} onChange={this.handleChangeLayout}>
+    //           {LAYOUTS.map((data) => (
+    //             <option key={data} value={data}>
+    //               {data}
+    //             </option>
+    //           ))}
+    //         </select>
+    //       </div>
+    //     </div>
+
+    return (
+      <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
+        <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 function renderToDOM() {
+  if (document.body) {
+    document.body.style.margin = '0';
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    root.render(<App />);
+  }
+}

examples/graph-layers/graph-viewer-legacy/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>deck.gl Community Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body></body>
+  <script type="module">
+    import {renderToDOM} from "./app.tsx";
+    renderToDOM(document.body);
+  </script>
+</html>

examples/graph-layers/graph-viewer-legacy/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "graph-layers-legacy-example",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "start": "vite --open",
+    "start-local": "vite --config ../vite.config.local.mjs"
+  },
+  "dependencies": {
+    "@deck.gl-community/graph-layers": "9.0.2",
+    "@deck.gl-community/react": "9.0.2",
+    "deck.gl": "^9.0.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.12"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  }
+}

examples/graph-layers/graph-viewer-legacy/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": "../../../tsconfig.json",
+    "include": ["./*.tsx"]
+}

examples/graph-layers/graph-viewer-legacy/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import fs from 'fs';
+
+/** Run against local source */
+const getAliases = async (frameworkName, frameworkRootDir) => {
+  const modules = await fs.promises.readdir(`${frameworkRootDir}/modules`)
+  const aliases = {}
+  modules.forEach(module => {
+    aliases[`${frameworkName}/${module}`] = `${frameworkRootDir}/modules/${module}/src`;
+  })
+  // console.log(aliases);
+  return aliases
+}
+
+const alias = await getAliases('@deck.gl-community', `${__dirname}/../../..`);
+
+// https://vitejs.dev/config/
+export default defineConfig(async () => ({
+  resolve: {alias},
+  server: {open: true}
+}))