diff --git a/examples/graph-layers/dag-simple/app.tsx b/examples/graph-layers/dag-simple/app.tsx deleted file mode 100644 index 650a013a..00000000 --- a/examples/graph-layers/dag-simple/app.tsx +++ /dev/null @@ -1,149 +0,0 @@ -// deck.gl-community -// SPDX-License-Identifier: MIT - -import React, {useMemo} from 'react'; -import DeckGL from '@deck.gl/react'; -import {OrthographicView} from '@deck.gl/core'; -import { - GraphLayer, - Graph, - D3DagLayout, - Node, - Edge, -} from '@deck.gl-community/graph-layers'; - -type DagRecord = { - id: string; - label: string; - parentIds?: string[]; -}; - -const DAG_DATA: DagRecord[] = [ - {id: 'collect', label: 'Collect events'}, - {id: 'ingest', label: 'Ingest', parentIds: ['collect']}, - {id: 'quality', label: 'Quality checks', parentIds: ['ingest']}, - {id: 'clean', label: 'Clean data', parentIds: ['quality']}, - {id: 'warehouse', label: 'Warehouse sync', parentIds: ['clean']}, - {id: 'feature', label: 'Feature store', parentIds: ['warehouse']}, - {id: 'training', label: 'Train models', parentIds: ['feature']}, - {id: 'serving', label: 'Serve models', parentIds: ['training']}, - {id: 'monitor', label: 'Monitor', parentIds: ['serving']}, - {id: 'alert', label: 'Alerting', parentIds: ['monitor']}, - {id: 'feedback', label: 'Feedback', parentIds: ['alert', 'monitor']}, - {id: 'experiments', label: 'Experimentation', parentIds: ['feature', 'feedback']} -]; - -const INITIAL_VIEW_STATE = { - target: [0, 0, 0], - zoom: -1 -}; - -const NODE_SPACING: [number, number] = [140, 120]; - -type DagGraphResult = { - graph: Graph; - layout: D3DagLayout; -}; - -function createDagGraph(): DagGraphResult { - const nodes = DAG_DATA.map( - (entry) => - new Node({ - id: entry.id, - data: {label: entry.label} - }) - ); - - const edges: Edge[] = []; - for (const entry of DAG_DATA) { - if (!entry.parentIds) { - continue; - } - for (const parentId of entry.parentIds) { - edges.push( - new Edge({ - id: `${parentId}->${entry.id}`, - sourceId: parentId, - targetId: entry.id, - directed: true - }) - ); - } - } - - const graph = new Graph({nodes, edges}); - const layout = new D3DagLayout({ - nodeSize: NODE_SPACING, - layering: 'topological', - decross: 'twoLayer', - coord: 'greedy' - }); - - return {graph, layout}; -} - -export default function App(): React.ReactElement { - const {graph, layout} = useMemo(() => createDagGraph(), []); - - const layers = useMemo( - () => [ - new GraphLayer({ - id: 'dag-layer', - graph, - layout, - stylesheet: { - nodes: [ - { - type: 'circle', - radius: 18, - fill: '#4c6ef520', - stroke: '#102a8220', - strokeWidth: 2 - }, - { - type: 'label', - text: '@label', - fontSize: 16, - color: '#102a82', - offset: [0, 28], - textAnchor: 'middle', - alignmentBaseline: 'top' - } - ], - edges: { - stroke: '#8da2fb', - strokeWidth: 2, - decorators: [ - { - type: 'arrow', - size: 6, - fill: '#8da2fb' - } - ] - } - } - }) - ], - [graph, layout] - ); - - return ( - { - const {object} = info; - if (!object) { - return null; - } - if (object.isNode) { - return `Node: ${object.getPropertyValue('label')}`; - } - return `Edge: ${object.getSourceNodeId()} → ${object.getTargetNodeId()}`; - }} - /> - ); -} diff --git a/examples/graph-layers/dag-simple/index.html b/examples/graph-layers/dag-simple/index.html deleted file mode 100644 index 1a7c65ee..00000000 --- a/examples/graph-layers/dag-simple/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Graph DAG + d3-dag - - - - - diff --git a/examples/graph-layers/dag-simple/index.tsx b/examples/graph-layers/dag-simple/index.tsx deleted file mode 100644 index 37b32aac..00000000 --- a/examples/graph-layers/dag-simple/index.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import {createRoot} from 'react-dom/client'; -import App from './app'; - -const container = document.body.appendChild(document.createElement('div')); -container.style.margin = '0'; -container.style.height = '100vh'; -container.style.width = '100vw'; - -createRoot(container).render(); diff --git a/examples/graph-layers/dag-simple/package.json b/examples/graph-layers/dag-simple/package.json deleted file mode 100644 index 019a67db..00000000 --- a/examples/graph-layers/dag-simple/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "graph-dag-simple-example", - "version": "0.0.0", - "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.2.0", - "@deck.gl/core": "~9.2.1", - "@deck.gl/react": "~9.2.1", - "@deck.gl/widgets": "~9.2.1", - "@luma.gl/core": "~9.2.0", - "react": "^18.3.1", - "react-dom": "^18.3.1" - }, - "devDependencies": { - "@types/react": "^18.3.3", - "@types/react-dom": "^18.3.0", - "vite": "7.1.1" - } -} diff --git a/examples/graph-layers/dag-simple/tsconfig.json b/examples/graph-layers/dag-simple/tsconfig.json deleted file mode 100644 index 43954af5..00000000 --- a/examples/graph-layers/dag-simple/tsconfig.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "../../../tsconfig.json", - "include": ["./*.tsx", "./*.ts"] -} diff --git a/examples/graph-layers/graph-viewer/app.tsx b/examples/graph-layers/graph-viewer/app.tsx index 894f1f8f..42209ed2 100644 --- a/examples/graph-layers/graph-viewer/app.tsx +++ b/examples/graph-layers/graph-viewer/app.tsx @@ -9,7 +9,7 @@ import DeckGL from '@deck.gl/react'; import {OrthographicView} from '@deck.gl/core'; import {PanWidget, ZoomRangeWidget} from '@deck.gl-community/experimental'; -import '@deck.gl/widgets/stylesheet.css'; +// import '@deck.gl/widgets/stylesheet.css'; import { GraphEngine, GraphLayer, diff --git a/examples/graph-layers/graph-viewer/examples.ts b/examples/graph-layers/graph-viewer/examples.ts index dac87966..6f09725e 100644 --- a/examples/graph-layers/graph-viewer/examples.ts +++ b/examples/graph-layers/graph-viewer/examples.ts @@ -611,7 +611,7 @@ const DAG_PIPELINE_STYLE: ExampleStyles = { { type: 'arrow', size: 6, - fill: '#8da2fb' + color: '#8da2fb' } ] } diff --git a/yarn.lock b/yarn.lock index 41837e97..15ff1956 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12495,23 +12495,6 @@ __metadata: languageName: node linkType: hard -"graph-dag-simple-example@workspace:examples/graph-layers/dag-simple": - version: 0.0.0-use.local - resolution: "graph-dag-simple-example@workspace:examples/graph-layers/dag-simple" - dependencies: - "@deck.gl-community/graph-layers": "npm:~9.2.0" - "@deck.gl/core": "npm:~9.2.1" - "@deck.gl/react": "npm:~9.2.1" - "@deck.gl/widgets": "npm:~9.2.1" - "@luma.gl/core": "npm:~9.2.0" - "@types/react": "npm:^18.3.3" - "@types/react-dom": "npm:^18.3.0" - react: "npm:^18.3.1" - react-dom: "npm:^18.3.1" - vite: "npm:7.1.1" - languageName: unknown - linkType: soft - "graph-layers-example@workspace:examples/graph-layers/graph-viewer": version: 0.0.0-use.local resolution: "graph-layers-example@workspace:examples/graph-layers/graph-viewer"