@deck.gl-community/graph-layers 9.2.0-beta.6 → 9.2.5

package/src/graph-data/arrow-graph-data-builder.ts

@@ -6,7 +6,7 @@
 import * as arrow from 'apache-arrow';
 
 import type {EdgeState, NodeState} from '../core/constants';
-import type {GraphEdgeData, GraphNodeData,ArrowGraphData} from './graph-data';
+import type {GraphEdgeData, GraphNodeData, ArrowGraphData} from './graph-data';
 import {
   cloneRecord,
   normalizeEdgeState,
@@ -130,7 +130,11 @@ export class ArrowGraphDataBuilder {
     builder.append(value);
   }
 
-  private appendJson(builders: ColumnBuilderMap, columnName: string, value: Record<string, unknown>): void {
+  private appendJson(
+    builders: ColumnBuilderMap,
+    columnName: string,
+    value: Record<string, unknown>
+  ): void {
     const builder = this.getOrCreateBuilder(builders, columnName, () =>
       arrow.makeBuilder({type: new arrow.Utf8(), nullValues: [null, undefined]})
     );
@@ -162,4 +166,3 @@ function tableFromBuilders(builders: ColumnBuilderMap): arrow.Table {
 
   return arrow.tableFromArrays(columns);
 }
-

package/src/graph-data/graph-data-builder.ts

@@ -1,4 +1,4 @@
-import type { GraphData } from "./graph-data";
+import type {GraphData} from './graph-data';
 
 export interface GraphDataBuilder {
   addNode(node: Record<string, unknown>): number;

package/src/graph-data/plain-graph-data-builder.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import type {PlainGraphData, GraphEdgeData, GraphNodeData} from './graph-data';
-import { GraphDataBuilder } from './graph-data-builder';
+import {GraphDataBuilder} from './graph-data-builder';
 import {cloneRecord, normalizeVersion} from '../graph/graph-normalization';
 
 export type PlainGraphDataBuilderOptions = {

package/src/index.ts

@@ -4,14 +4,19 @@
 
 // Graph Data - output from loaders, input to writers
 
-export type {GraphData, PlainGraphData, ArrowGraphData /* , GraphNodeData, GraphEdgeData */} from './graph-data/graph-data';
-export type {GraphDataBuilder /* , GraphDataBuilderOptions */} from './graph-data/graph-data-builder';
+export type {
+  GraphData,
+  PlainGraphData,
+  ArrowGraphData /* , GraphNodeData, GraphEdgeData */
+} from './graph-data/graph-data';
+export type {
+  GraphDataBuilder /* , GraphDataBuilderOptions */
+} from './graph-data/graph-data-builder';
 export {
   ArrowGraphDataBuilder,
   type ArrowGraphDataBuilderOptions
 } from './graph-data/arrow-graph-data-builder';
 
-
 // core - Graph representation and layout
 export type {Graph, NodeInterface, EdgeInterface} from './graph/graph';
 export {Node} from './graph/node';
@@ -36,11 +41,7 @@ export {ArrowGraph} from './graph/arrow-graph';
 export {GraphEngine} from './core/graph-engine';
 
 // graph-layers layouts
-export type {
-  GraphLayoutProps,
-  GraphLayoutState,
-  GraphLayoutEventDetail
-} from './core/graph-layout';
+export type {GraphLayoutProps, GraphLayoutState, GraphLayoutEventDetail} from './core/graph-layout';
 export {GraphLayout} from './core/graph-layout';
 
 export {SimpleLayout} from './layouts/simple-layout';
@@ -52,18 +53,30 @@ export {RadialLayout} from './layouts/experimental/radial-layout';
 export {ForceMultiGraphLayout} from './layouts/experimental/force-multi-graph-layout';
 export {HivePlotLayout} from './layouts/experimental/hive-plot-layout';
 
-export type {Marker, NodeState, NodeType, EdgeType, EdgeDecoratorType, LayoutState} from './core/constants';
+export type {
+  Marker,
+  NodeState,
+  NodeType,
+  EdgeType,
+  EdgeDecoratorType,
+  LayoutState
+} from './core/constants';
 
 // deck.gl components
 export {GraphLayer} from './layers/graph-layer';
 export type {RankGridConfig} from './layers/graph-layer';
 export {EdgeLayer} from './layers/edge-layer';
-export {GridLayer, type GridLayerProps, type GridLineDatum} from './layers/common-layers/grid-layer/grid-layer';
+export {
+  GridLayer,
+  type GridLayerProps,
+  type GridLineDatum
+} from './layers/common-layers/grid-layer/grid-layer';
 export {StylesheetEngine} from './style/stylesheet-engine';
 export {GraphStylesheetEngine, GraphStyleEngine} from './style/graph-style-engine';
 export type {
   GraphStylesheet,
-  GraphStylesheetInput,
+  GraphStyleRule,
+  GraphStyleRuleParsed,
   GraphStylesheetParsed,
   GraphStyleAttributeReference,
   GraphStyleScale,
@@ -92,16 +105,21 @@ export {
 } from './utils/rank-grid';
 
 // graph format loaders
-export {
-  JSONGraphLoader,
-  type JSONGraphLoaderOptions,
-} from './loaders/json-graph-loader';
+export {JSONGraphLoader, type JSONGraphLoaderOptions} from './loaders/json-graph-loader';
 
 export {
   DOTGraphLoader,
   type DOTGraphLoaderOptions,
-  type DOTGraphLoaderMetadata,
+  type DOTGraphLoaderMetadata
 } from './loaders/dot-graph-loader';
 
 // Deprecated exports
-export {MARKER_TYPE, NODE_STATE,EDGE_STATE,NODE_TYPE,EDGE_TYPE,EDGE_DECORATOR_TYPE,LAYOUT_STATE} from './_deprecated/old-constants';
+export {
+  MARKER_TYPE,
+  NODE_STATE,
+  EDGE_STATE,
+  NODE_TYPE,
+  EDGE_TYPE,
+  EDGE_DECORATOR_TYPE,
+  LAYOUT_STATE
+} from './_deprecated/old-constants';

package/src/layers/common-layers/grid-layer/grid-layer.ts

@@ -49,10 +49,25 @@ const DEFAULT_OFFSET: [number, number] = [8, 0];
 const DEFAULT_MIN = -1e6;
 const DEFAULT_MAX = 1e6;
 
-export class GridLayer<DatumT extends GridLineDatum = GridLineDatum> extends CompositeLayer<GridLayerProps<DatumT>> {
+export class GridLayer<DatumT extends GridLineDatum = GridLineDatum> extends CompositeLayer<
+  GridLayerProps<DatumT>
+> {
   static override layerName = 'GridLayer';
 
-  static override defaultProps: Required<Pick<GridLayerProps<GridLineDatum>, 'direction' | 'width' | 'color' | 'xMin' | 'xMax' | 'yMin' | 'yMax' | 'showLabels' | 'labelOffset'>> = {
+  static override defaultProps: Required<
+    Pick<
+      GridLayerProps<GridLineDatum>,
+      | 'direction'
+      | 'width'
+      | 'color'
+      | 'xMin'
+      | 'xMax'
+      | 'yMin'
+      | 'yMax'
+      | 'showLabels'
+      | 'labelOffset'
+    >
+  > = {
     direction: 'horizontal',
     width: DEFAULT_WIDTH,
     color: DEFAULT_COLOR,
@@ -66,7 +81,9 @@ export class GridLayer<DatumT extends GridLineDatum = GridLineDatum> extends Com
 
   override shouldUpdateState(params: UpdateParameters<this>): boolean {
     const {changeFlags} = params;
-    return Boolean(changeFlags.dataChanged || changeFlags.propsChanged || changeFlags.viewportChanged);
+    return Boolean(
+      changeFlags.dataChanged || changeFlags.propsChanged || changeFlags.viewportChanged
+    );
   }
 
   override renderLayers() {
@@ -151,21 +168,13 @@ export class GridLayer<DatumT extends GridLineDatum = GridLineDatum> extends Com
 
     const [bxMin, byMin, bxMax, byMax] = viewportBounds;
     const minX =
-      Number.isFinite(bxMin) && Number.isFinite(bxMax)
-        ? Math.min(bounds.xMin, bxMin)
-        : bounds.xMin;
+      Number.isFinite(bxMin) && Number.isFinite(bxMax) ? Math.min(bounds.xMin, bxMin) : bounds.xMin;
     const maxX =
-      Number.isFinite(bxMin) && Number.isFinite(bxMax)
-        ? Math.max(bounds.xMax, bxMax)
-        : bounds.xMax;
+      Number.isFinite(bxMin) && Number.isFinite(bxMax) ? Math.max(bounds.xMax, bxMax) : bounds.xMax;
     const minY =
-      Number.isFinite(byMin) && Number.isFinite(byMax)
-        ? Math.min(bounds.yMin, byMin)
-        : bounds.yMin;
+      Number.isFinite(byMin) && Number.isFinite(byMax) ? Math.min(bounds.yMin, byMin) : bounds.yMin;
     const maxY =
-      Number.isFinite(byMin) && Number.isFinite(byMax)
-        ? Math.max(bounds.yMax, byMax)
-        : bounds.yMax;
+      Number.isFinite(byMin) && Number.isFinite(byMax) ? Math.max(bounds.yMax, byMax) : bounds.yMax;
 
     return {minX, maxX, minY, maxY};
   }
@@ -222,12 +231,10 @@ export class GridLayer<DatumT extends GridLineDatum = GridLineDatum> extends Com
     const isHorizontal = direction === 'horizontal';
 
     for (const {datum, sourcePosition} of lines) {
-      const rawLabel = getLabel ? getLabel(datum) : datum.label ?? null;
+      const rawLabel = getLabel ? getLabel(datum) : (datum.label ?? null);
       if (rawLabel !== null && rawLabel !== undefined && rawLabel !== '') {
         const [sx, sy] = sourcePosition;
-        const position: [number, number] = isHorizontal
-          ? [bounds.minX, sy]
-          : [sx, bounds.minY];
+        const position: [number, number] = isHorizontal ? [bounds.minX, sy] : [sx, bounds.minY];
         labels.push({position, text: String(rawLabel), datum});
       }
     }

package/src/layers/edge-attachment-helper.ts

@@ -6,12 +6,13 @@ import type {InteractionManager} from '../core/interaction-manager';
 import type {GraphEngine} from '../core/graph-engine';
 import type {NodeInterface} from '../graph/graph';
 
-import {
-  GraphStylesheetEngine,
-  type GraphStylesheet
-} from '../style/graph-style-engine';
+import {GraphStylesheetEngine, type GraphStyleRule} from '../style/graph-style-engine';
 import type {GraphLayerNodeStyle} from '../style/graph-layer-stylesheet';
-import {getNodeBoundaryIntersection, type GeometryNodeType, type NodeGeometry} from '../utils/node-boundary';
+import {
+  getNodeBoundaryIntersection,
+  type GeometryNodeType,
+  type NodeGeometry
+} from '../utils/node-boundary';
 import {warn} from '../utils/log';
 
 type NumericAccessor = ((node: NodeInterface) => number) | number | null | undefined;
@@ -39,7 +40,10 @@ const GEOMETRY_NODE_TYPES: GeometryNodeType[] = [
   'marker'
 ];
 
-function evaluateNumericAccessor(accessor: NumericAccessor, node: NodeInterface): number | undefined {
+function evaluateNumericAccessor(
+  accessor: NumericAccessor,
+  node: NodeInterface
+): number | undefined {
   if (typeof accessor === 'function') {
     const value = accessor(node);
     return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
@@ -130,12 +134,20 @@ const GEOMETRY_APPLIERS: Record<
   },
   'rounded-rectangle': (node, accessors, geometry) => {
     assignRectangleDimensions(node, accessors, geometry);
-    assignDimension(geometry, 'cornerRadius', resolveAccessorValue(accessors.getCornerRadius, node));
+    assignDimension(
+      geometry,
+      'cornerRadius',
+      resolveAccessorValue(accessors.getCornerRadius, node)
+    );
     assignDimension(geometry, 'radius', resolveAccessorValue(accessors.getRadius, node));
   },
   'path-rounded-rectangle': (node, accessors, geometry) => {
     assignRectangleDimensions(node, accessors, geometry);
-    assignDimension(geometry, 'cornerRadius', resolveAccessorValue(accessors.getCornerRadius, node));
+    assignDimension(
+      geometry,
+      'cornerRadius',
+      resolveAccessorValue(accessors.getCornerRadius, node)
+    );
   }
 };
 
@@ -166,8 +178,7 @@ export class EdgeAttachmentHelper {
         new Map<string | number, NodeInterface>()
       );
 
-    return (edge: any) =>
-      this._getAdjustedEdgeLayout(engine, nodeAccessorMap, nodeMap, edge);
+    return (edge: any) => this._getAdjustedEdgeLayout(engine, nodeAccessorMap, nodeMap, edge);
   }
 
   private _buildNodeStyleAccessorMap({
@@ -187,45 +198,43 @@ export class EdgeAttachmentHelper {
 
     const styles = Array.isArray(nodeStyle) ? nodeStyle : [nodeStyle];
 
-    styles
-      .filter(Boolean)
-      .forEach((style) => {
-        const {data = (nodes) => nodes, ...restStyle} = style;
-        const type = restStyle.type;
-
-        if (!type || !GEOMETRY_NODE_TYPES.includes(type as GeometryNodeType)) {
-          return;
-        }
-
-        let stylesheet: GraphStylesheetEngine | null = null;
-        try {
-          stylesheet = engine.createStylesheetEngine(restStyle as GraphStylesheet, {
-            stateUpdateTrigger: (interactionManager as any).getLastInteraction()
-          });
-        } catch (error) {
-          warn(
-            `GraphLayer: Failed to evaluate node stylesheet for edge attachment (${String(
-              (error as Error).message ?? error
-            )}).`
-          );
-          return;
-        }
-
-        const nodes = data(engine.getNodes());
-        if (!Array.isArray(nodes)) {
-          return;
-        }
+    styles.filter(Boolean).forEach((style) => {
+      const {data = (nodes) => nodes, ...restStyle} = style;
+      const type = restStyle.type;
 
-        const geometryType = type as GeometryNodeType;
-        const accessors = this._createAccessorsForType(geometryType, stylesheet);
+      if (!type || !GEOMETRY_NODE_TYPES.includes(type as GeometryNodeType)) {
+        return;
+      }
 
-        nodes.forEach((node: NodeInterface) => {
-          const id = node.getId();
-          if (!nodeAccessorMap.has(id)) {
-            nodeAccessorMap.set(id, accessors);
-          }
+      let stylesheet: GraphStylesheetEngine | null = null;
+      try {
+        stylesheet = engine.createStylesheetEngine(restStyle as GraphStyleRule, {
+          stateUpdateTrigger: (interactionManager as any).getLastInteraction()
         });
+      } catch (error) {
+        warn(
+          `GraphLayer: Failed to evaluate node stylesheet for edge attachment (${String(
+            (error as Error).message ?? error
+          )}).`
+        );
+        return;
+      }
+
+      const nodes = data(engine.getNodes());
+      if (!Array.isArray(nodes)) {
+        return;
+      }
+
+      const geometryType = type as GeometryNodeType;
+      const accessors = this._createAccessorsForType(geometryType, stylesheet);
+
+      nodes.forEach((node: NodeInterface) => {
+        const id = node.getId();
+        if (!nodeAccessorMap.has(id)) {
+          nodeAccessorMap.set(id, accessors);
+        }
       });
+    });
 
     return nodeAccessorMap;
   }

package/src/layers/edge-layer.ts

@@ -9,8 +9,8 @@ import {PathEdgeLayer} from './edge-layers/path-edge-layer';
 import {CurvedEdgeLayer} from './edge-layers/curved-edge-layer';
 
 const EDGE_LAYER_MAP = {
-  'line': StraightLineEdgeLayer,
-  'path': PathEdgeLayer,
+  line: StraightLineEdgeLayer,
+  path: PathEdgeLayer,
   'spline-curve': CurvedEdgeLayer
 };
 
@@ -46,8 +46,8 @@ export class EdgeLayer extends CompositeLayer {
         return res;
       },
       {
-        'line': [],
-        'path': [],
+        line: [],
+        path: [],
         'spline-curve': []
       }
     );

package/src/layers/edge-layers/arrow-2d-geometry.ts

@@ -34,14 +34,7 @@ function getArrowAttributes({length = 1, headWidth = 1}) {
 
   const normals = new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1]);
 
-  const texCoords = new Float32Array([
-    0.5,
-    1,
-    0,
-    0,
-    1,
-    0
-  ]);
+  const texCoords = new Float32Array([0.5, 1, 0, 0, 1, 0]);
 
   return {
     positions: {size: 3, value: positions},