@deck.gl-community/graph-layers 9.2.0-beta.2 → 9.2.0-beta.3

package/src/loaders/json-graph-loader.ts

@@ -0,0 +1,48 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {LoaderOptions, LoaderWithParser} from '@loaders.gl/loader-utils';
+
+import type {PlainGraphData} from '../graph-data/graph-data';
+// import {PlainGraphDataBuilder} from '../graph-data/plain-graph-data-builder';
+
+// __VERSION__ is injected by babel-plugin-version-inline
+// @ts-ignore TS2304: Cannot find name '__VERSION__'.
+const VERSION = typeof __VERSION__ !== 'undefined' ? __VERSION__ : 'latest';
+
+export type JSONGraphLoaderOptions = LoaderOptions & {
+  jsongraph?: {
+  };
+};
+
+export type JSONGraphParserOptions = NonNullable<JSONGraphLoaderOptions['jsongraph']>;
+
+export const JSONGraphLoader = {
+  dataType: null as unknown as PlainGraphData,
+  batchType: null as never,
+
+  name: 'DOT Graph',
+  id: 'dot-graph',
+  module: 'graph-layers',
+  version: VERSION,
+  worker: false,
+  extensions: ['json'],
+  mimeTypes: ['application/json'],
+  text: true,
+  options: {
+    'jsongraph': {
+    }
+  },
+
+  parse: async (arrayBuffer: ArrayBuffer, options?: JSONGraphLoaderOptions) => {
+    const text = new TextDecoder().decode(arrayBuffer);
+    return Promise.resolve(JSONGraphLoader.parseTextSync(text, options));
+  },
+  
+  parseTextSync: (text: string, options?: JSONGraphLoaderOptions) => {
+    // const parseOptions = {...JSONGraphLoader.options.jsongraph, ...options?.jsongraph};
+    throw new Error('JSONGraphLoader.parseTextSync not implemented');
+    // return loadSimpleJSONGraph(text, parseOptions);
+  }
+} as const satisfies LoaderWithParser<PlainGraphData, never, JSONGraphLoaderOptions>;

package/src/loaders/parsers/create-graph-data.ts.disabled

@@ -0,0 +1,45 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {PlainGraphDataBuilder} from '../graph-data/plain-graph-data-builder';
+
+/**
+ * @deprecated Use `new ClassicGraph(name, nodes, edges)`
+ * Create a graph from a list of Nodes and edges
+ */
+export function createGraphData(props: {name; nodes; edges; nodeParser; edgeParser}): ClassicGraph {
+  const {name, nodes, edges, nodeParser, edgeParser} = props;
+  // create a new empty graph
+
+  const graphName = name || Date.now();
+
+  // add nodes
+  const glNodes = nodes.map((node) => {
+    const {id} = nodeParser(node);
+    return new Node({
+      id,
+      data: node
+    });
+  });
+  graph.batchAddNodes(glNodes);
+
+  const glEdges = edges.map((edge) => {
+    const {id, sourceId, targetId, directed} = edgeParser(edge);
+    return new Edge({
+      id,
+      sourceId,
+      targetId,
+      directed,
+      data: edge
+    });
+  });
+
+  return {
+    shape: 'plain-graph-data',
+    nodes: glNodes,
+    edges: glEdges,
+
+    graphName
+  };
+}

package/src/loaders/{edge-parsers.ts → parsers/edge-parsers.ts}

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {EdgeOptions} from '../graph/edge';
-import {error} from '../utils/log';
+import type {EdgeOptions} from '../../graph/edge';
+import {error} from '../../utils/log';
 
 export function basicEdgeParser(edge: any): Omit<EdgeOptions, 'data'> {
   const {id, directed, sourceId, targetId} = edge;

package/src/loaders/{node-parsers.ts → parsers/node-parsers.ts}

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {NodeOptions} from '../graph/node';
-import {error} from '../utils/log';
+import type {NodeOptions} from '../../graph/node';
+import {error} from '../../utils/log';
 
 export function basicNodeParser(node: any): Pick<NodeOptions, 'id'> {
   if (node.id === undefined) {

package/src/loaders/parsers/parse-json-graph.ts

@@ -0,0 +1,134 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {NodeState, EdgeState} from '../../core/constants';
+import type {PlainGraphData, GraphNodeData, GraphEdgeData} from '../../graph-data/graph-data';
+import {PlainGraphDataBuilder} from '../../graph-data/plain-graph-data-builder';
+import {basicNodeParser} from '../parsers/node-parsers';
+import {basicEdgeParser} from '../parsers/edge-parsers';
+import {error} from '../../utils/log';
+
+type GraphJSON = {
+  version?: number;
+  nodes?: unknown[] | null;
+  edges?: unknown[] | null;
+};
+
+export type ParseJSONGraphOptions = {
+  json: GraphJSON;
+  nodeParser?: (node: any) => {
+    id: string | number;
+    state?: NodeState;
+    selectable?: boolean;
+    highlightConnectedEdges?: boolean;
+    label?: string;
+    weight?: number;
+  } | null;
+  edgeParser?: (edge: any) => {
+    id: string | number;
+    directed?: boolean;
+    sourceId: string | number;
+    targetId: string | number;
+    state?: EdgeState;
+    label?: string;
+    weight?: number;
+  } | null;
+};
+
+export function parseJSONGraph({
+  json,
+  nodeParser = basicNodeParser,
+  edgeParser = basicEdgeParser
+}: ParseJSONGraphOptions): PlainGraphData | null {
+  const nodes = json?.nodes ?? null;
+  const edges = json?.edges ?? null;
+  if (!Array.isArray(nodes)) {
+    error('Invalid graph: nodes is missing.');
+    return null;
+  }
+
+  const normalizedNodes = parseNodes(nodes, nodeParser);
+  const normalizedEdges = parseEdges(Array.isArray(edges) ? edges : [], edgeParser);
+
+  const builder = new PlainGraphDataBuilder({
+    // @ts-expect-error TODO: fixme
+    nodeCapacity: normalizedNodes.length,
+    edgeCapacity: normalizedEdges.length,
+    version: json?.version
+  });
+
+  for (const node of normalizedNodes) {
+    builder.addNode(node);
+  }
+
+  for (const edge of normalizedEdges) {
+    builder.addEdge(edge);
+  }
+
+  return builder.build();
+}
+
+function parseNodes(
+  nodes: unknown[],
+  nodeParser: ParseJSONGraphOptions['nodeParser']
+): GraphNodeData[] {
+  const parsedNodes: GraphNodeData[] = [];
+
+  for (const node of nodes) {
+    const parsed = nodeParser?.(node);
+    if (parsed && typeof parsed.id !== 'undefined') {
+      const attributes = cloneRecord(node);
+      const nodeRecord: GraphNodeData = {
+        id: parsed.id,
+        state: parsed.state ?? (attributes.state as NodeState | undefined),
+        selectable: parsed.selectable ?? (attributes.selectable as boolean | undefined),
+        highlightConnectedEdges:
+          parsed.highlightConnectedEdges ?? (attributes.highlightConnectedEdges as boolean | undefined),
+        label: parsed.label ?? (attributes.label as string | undefined),
+        weight: parsed.weight ?? (attributes.weight as number | undefined),
+        attributes
+      };
+      parsedNodes.push(nodeRecord);
+    }
+  }
+
+  return parsedNodes;
+}
+
+function parseEdges(
+  edges: unknown[],
+  edgeParser: ParseJSONGraphOptions['edgeParser']
+): GraphEdgeData[] {
+  const handles: GraphEdgeData[] = [];
+
+  for (const edge of edges) {
+    const parsed = edgeParser?.(edge);
+    if (
+      parsed &&
+      typeof parsed.sourceId !== 'undefined' &&
+      typeof parsed.targetId !== 'undefined'
+    ) {
+      const attributes = cloneRecord(edge);
+      handles.push({
+        id: parsed.id,
+        directed: parsed.directed ?? (attributes.directed as boolean | undefined),
+        sourceId: parsed.sourceId,
+        targetId: parsed.targetId,
+        state: parsed.state ?? (attributes.state as EdgeState | undefined),
+        label: parsed.label ?? (attributes.label as string | undefined),
+        weight: parsed.weight ?? (attributes.weight as number | undefined),
+        attributes
+      });
+    }
+  }
+
+  return handles;
+}
+
+function cloneRecord(value: unknown): Record<string, unknown> {
+  if (value && typeof value === 'object') {
+    return {...(value as Record<string, unknown>)};
+  }
+  return {};
+}

package/src/style/graph-style-engine.ts

@@ -6,7 +6,7 @@
 
 import {ZodError, type ZodIssue} from 'zod';
 
-import {StyleEngine, type DeckGLUpdateTriggers} from './style-engine';
+import {StylesheetEngine, type DeckGLUpdateTriggers} from './stylesheet-engine';
 import {
   GraphStylesheetSchema,
   type GraphStylesheet,
@@ -39,7 +39,7 @@ function formatStylesheetError(error: ZodError) {
   return `Invalid graph stylesheet:\n${details}`;
 }
 
-export class GraphStyleEngine extends StyleEngine {
+export class GraphStylesheetEngine extends StylesheetEngine {
   constructor(style: GraphStylesheet, {stateUpdateTrigger}: {stateUpdateTrigger?: unknown} = {}) {
     const result = GraphStylesheetSchema.safeParse(style);
     const parsedStyle = result.success
@@ -54,6 +54,9 @@ export class GraphStyleEngine extends StyleEngine {
   }
 }
 
+export const GraphStyleEngine = GraphStylesheetEngine;
+export type GraphStyleEngine = GraphStylesheetEngine;
+
 export {
   GraphStyleScaleTypeEnum,
   GraphStyleScaleSchema,

package/src/style/{style-engine.ts → stylesheet-engine.ts}

@@ -16,7 +16,7 @@ export type StylePropertyConstructor<T extends StyleProperty = StyleProperty> =
 
 export type DefaultStyleValueFn = (property: string) => unknown;
 
-export type StyleEngineOptions<T extends StyleProperty = StyleProperty> = {
+export type StylesheetEngineOptions<T extends StyleProperty = StyleProperty> = {
   deckglAccessorMap: DeckGLAccessorMap;
   deckglUpdateTriggers?: DeckGLUpdateTriggers;
   stateUpdateTrigger?: unknown;
@@ -26,7 +26,7 @@ export type StyleEngineOptions<T extends StyleProperty = StyleProperty> = {
 
 const DEFAULT_UPDATE_TRIGGERS: DeckGLUpdateTriggers = {};
 
-export class StyleEngine<TStyleProperty extends StyleProperty = StyleProperty> {
+export class StylesheetEngine<TStyleProperty extends StyleProperty = StyleProperty> {
   type: string;
   properties: Record<string, TStyleProperty>;
 
@@ -36,7 +36,7 @@ export class StyleEngine<TStyleProperty extends StyleProperty = StyleProperty> {
   protected readonly StylePropertyClass: StylePropertyConstructor<TStyleProperty>;
   protected readonly getDefaultStyleValue: DefaultStyleValueFn;
 
-  constructor(style: Record<string, any>, options: StyleEngineOptions<TStyleProperty>) {
+  constructor(style: Record<string, any>, options: StylesheetEngineOptions<TStyleProperty>) {
     const {
       deckglAccessorMap,
       deckglUpdateTriggers = DEFAULT_UPDATE_TRIGGERS,

package/src/utils/collapsed-chains.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import type {GraphEngine} from '../core/graph-engine';
-import type {Node} from '../graph/node';
+import type {NodeInterface} from '../graph/graph';
 
 const OUTLINE_PADDING = 24;
 const OUTLINE_CORNER_RADIUS = 16;
@@ -77,7 +77,7 @@ export function resolveChainInteractionSource(info: any): ChainInteractionSource
   return 'node';
 }
 
-function isChainRepresentative(node: Node): boolean {
+function isChainRepresentative(node: NodeInterface): boolean {
   const chainId = node.getPropertyValue('collapsedChainId');
   const nodeIds = node.getPropertyValue('collapsedNodeIds');
   const representativeId = node.getPropertyValue('collapsedChainRepresentativeId');
@@ -90,7 +90,7 @@ function isChainRepresentative(node: Node): boolean {
   );
 }
 
-export function getRepresentativeNodes(engine: GraphEngine | null | undefined): Node[] {
+export function getRepresentativeNodes(engine: GraphEngine | null | undefined): NodeInterface[] {
   if (!engine) {
     return [];
   }
@@ -98,18 +98,17 @@ export function getRepresentativeNodes(engine: GraphEngine | null | undefined):
   return engine.getNodes().filter((node) => isChainRepresentative(node));
 }
 
-export type ChainOutlineGetter = (node: Node) => [number, number][] | null;
+export type ChainOutlineGetter = (node: NodeInterface) => [number, number][] | null;
 
 export function createChainOutlineGetter(engine: GraphEngine | null | undefined): ChainOutlineGetter {
   if (!engine) {
     return () => null;
   }
 
-  const graph = engine.props.graph;
   const cache = new Map<string, [number, number][] | null>();
 
   // eslint-disable-next-line max-statements, complexity
-  return (node: Node): [number, number][] | null => {
+  return (node: NodeInterface): [number, number][] | null => {
     const chainId = node.getPropertyValue('collapsedChainId');
     if (!chainId) {
       return null;
@@ -120,11 +119,6 @@ export function createChainOutlineGetter(engine: GraphEngine | null | undefined)
       return cache.get(cacheKey) ?? null;
     }
 
-    if (!graph) {
-      cache.set(cacheKey, null);
-      return null;
-    }
-
     const collapsedNodeIds = node.getPropertyValue('collapsedNodeIds');
     if (!Array.isArray(collapsedNodeIds) || collapsedNodeIds.length === 0) {
       cache.set(cacheKey, null);
@@ -137,7 +131,7 @@ export function createChainOutlineGetter(engine: GraphEngine | null | undefined)
     let maxY = Number.NEGATIVE_INFINITY;
 
     for (const nodeId of collapsedNodeIds) {
-      const chainNode = graph.findNode(nodeId);
+      const chainNode = engine.findNode(nodeId);
       if (chainNode) {
         const position = engine.getNodePosition(chainNode);
         if (position) {
@@ -217,11 +211,11 @@ export function createChainOutlineGetter(engine: GraphEngine | null | undefined)
 }
 
 export interface CollapsedChainLayerData {
-  representativeNodes: Node[];
-  collapsedNodes: Node[];
-  collapsedOutlineNodes: Node[];
-  expandedNodes: Node[];
-  expandedOutlineNodes: Node[];
+  representativeNodes: NodeInterface[];
+  collapsedNodes: NodeInterface[];
+  collapsedOutlineNodes: NodeInterface[];
+  expandedNodes: NodeInterface[];
+  expandedOutlineNodes: NodeInterface[];
   getChainOutlinePolygon: ChainOutlineGetter;
   outlineUpdateTrigger: string;
 }