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

package/src/layers/graph-layer.ts

@@ -15,15 +15,15 @@ import {GraphEngine} from '../core/graph-engine';
 
 import {
   GraphStylesheetEngine,
-  type GraphStylesheet
+  type GraphStylesheet,
+  type GraphStyleRule
 } from '../style/graph-style-engine';
 
 import {
-  DEFAULT_GRAPH_LAYER_STYLESHEET,
+  DEFAULT_GRAPH_LAYER_STYLESHEET_INPUT,
   normalizeGraphLayerStylesheet,
   type GraphLayerEdgeStyle,
   type GraphLayerNodeStyle,
-  type GraphLayerStylesheet,
   type NormalizedGraphLayerStylesheet
 } from '../style/graph-layer-stylesheet';
 
@@ -44,8 +44,6 @@ import {EdgeArrowLayer} from './edge-layers/edge-arrow-layer';
 import {EdgeAttachmentHelper} from './edge-attachment-helper';
 import {GridLayer, type GridLayerProps} from './common-layers/grid-layer/grid-layer';
 
-import {JSONGraphLoader} from '../loaders/json-graph-loader';
-
 import {mixedGetPosition} from '../utils/layer-utils';
 import {InteractionManager} from '../core/interaction-manager';
 import {buildCollapsedChainLayers} from '../utils/collapsed-chains';
@@ -55,23 +53,24 @@ import {
   type LabelAccessor,
   type RankAccessor
 } from '../utils/rank-grid';
+import {createGraphFromData} from '../graph/functions/create-graph-from-data';
 
 import {warn} from '../utils/log';
 
 const NODE_LAYER_MAP = {
-  'rectangle': RectangleLayer,
+  rectangle: RectangleLayer,
   'rounded-rectangle': RoundedRectangleLayer,
   'path-rounded-rectangle': PathBasedRoundedRectangleLayer,
-  'icon': ImageLayer,
-  'circle': CircleLayer,
-  'label': LabelLayer,
-  'marker': ZoomableMarkerLayer
+  icon: ImageLayer,
+  circle: CircleLayer,
+  label: LabelLayer,
+  marker: ZoomableMarkerLayer
 };
 
 const EDGE_DECORATOR_LAYER_MAP = {
   'edge-label': EdgeLabelLayer,
-  'flow': FlowLayer,
-  'arrow': EdgeArrowLayer
+  flow: FlowLayer,
+  arrow: EdgeArrowLayer
 };
 
 type GridLayerOverrides = Partial<Omit<GridLayerProps, 'id' | 'data' | 'direction'>>;
@@ -106,6 +105,13 @@ let NODE_STYLE_DEPRECATION_WARNED = false;
 let EDGE_STYLE_DEPRECATION_WARNED = false;
 let GRAPH_PROP_DEPRECATION_WARNED = false;
 let LAYOUT_REQUIRED_WARNED = false;
+const DEFAULT_GRAPH_LOADER = ({json}: {json: unknown}) => {
+  if (!json || typeof json !== 'object') {
+    return null;
+  }
+
+  return createGraphFromData(json as any);
+};
 
 export type GraphLayerRawData = {
   name?: string;
@@ -146,7 +152,7 @@ export type _GraphLayerProps = {
   onLayoutDone?: (detail?: GraphLayoutEventDetail) => void;
   onLayoutError?: (error?: unknown) => void;
 
-  stylesheet?: GraphLayerStylesheet;
+  stylesheet?: GraphStylesheet;
   /** @deprecated Use `stylesheet.nodes`. */
   nodeStyle?: GraphLayerNodeStyle[];
   /** @deprecated Use `stylesheet.edges`. */
@@ -171,18 +177,18 @@ export type _GraphLayerProps = {
 export class GraphLayer extends CompositeLayer<GraphLayerProps> {
   static layerName = 'GraphLayer';
 
-  static defaultProps: Required<_GraphLayerProps> & {
-    data: {type: string; value: null; async: true};
-  } = {
+  static defaultProps: _GraphLayerProps &
+    Pick<CompositeLayerProps, 'pickable'> & {
+      data: {type: string; value: null; async: true};
+    } = {
     // Composite layer props
-    // @ts-expect-error composite layer props
     pickable: true,
     data: {type: 'object', value: null, async: true},
 
     // Graph props
-    graphLoader: JSONGraphLoader,
+    graphLoader: DEFAULT_GRAPH_LOADER,
 
-    stylesheet: DEFAULT_GRAPH_LAYER_STYLESHEET,
+    stylesheet: DEFAULT_GRAPH_LAYER_STYLESHEET_INPUT,
     nodeStyle: undefined as unknown as GraphLayerNodeStyle[],
     nodeEvents: {
       onMouseLeave: () => {},
@@ -316,7 +322,7 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
   }
 
   private _createStylesheetEngine(
-    style: GraphStylesheet,
+    style: GraphStyleRule,
     context: string
   ): GraphStylesheetEngine | null {
     try {
@@ -485,7 +491,7 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
     }
 
     if (Array.isArray(data) || isPlainObject(data)) {
-      const loader = props.graphLoader ?? JSONGraphLoader;
+      const loader = props.graphLoader ?? DEFAULT_GRAPH_LOADER;
       const graph = loader({json: data});
       if (!graph) {
         return null;
@@ -563,9 +569,7 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
     }
 
     const candidate = value as Graph;
-    return (
-      typeof candidate.getNodes === 'function' && typeof candidate.getEdges === 'function'
-    );
+    return typeof candidate.getNodes === 'function' && typeof candidate.getEdges === 'function';
   }
 
   private _coerceGraph(value: unknown): Graph | null {
@@ -590,7 +594,10 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
       try {
         return candidate.toClassicGraph() ?? null;
       } catch (error) {
-        warn('GraphLayer: failed to convert graph to ClassicGraph for layout compatibility.', error);
+        warn(
+          'GraphLayer: failed to convert graph to ClassicGraph for layout compatibility.',
+          error
+        );
       }
     }
 
@@ -719,9 +726,10 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
     });
   }
 
-  private _normalizeRankGridConfig(
-    value: GraphLayerProps['rankGrid']
-  ): {enabled: boolean; config?: RankGridConfig} {
+  private _normalizeRankGridConfig(value: GraphLayerProps['rankGrid']): {
+    enabled: boolean;
+    config?: RankGridConfig;
+  } {
     if (typeof value === 'boolean') {
       return {enabled: value};
     }
@@ -733,9 +741,9 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
     return {enabled: false};
   }
 
-  private _resolveRankGridBounds(engine: GraphEngine):
-    | {xMin: number; xMax: number; yMin: number; yMax: number}
-    | null {
+  private _resolveRankGridBounds(
+    engine: GraphEngine
+  ): {xMin: number; xMax: number; yMin: number; yMax: number} | null {
     const bounds = engine.getLayoutBounds();
     if (!bounds) {
       return null;
@@ -759,7 +767,12 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
     engine: GraphEngine,
     config: RankGridConfig | undefined,
     bounds: {yMin: number; yMax: number}
-  ): Array<{label: string; rank: number; originalLabel?: string | number; yPosition: number}> | null {
+  ): Array<{
+    label: string;
+    rank: number;
+    originalLabel?: string | number;
+    yPosition: number;
+  }> | null {
     const rankLabelPrefix = this._resolveRankFieldLabel(config?.rankAccessor);
     // @ts-ignore iterator type
     const rankPositions = mapRanksToYPositions(engine.getNodes(), engine.getNodePosition, {
@@ -821,7 +834,7 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
           return null;
         }
         const stylesheet = this._createStylesheetEngine(
-          restStyle as unknown as GraphStylesheet,
+          restStyle as unknown as GraphStyleRule,
           `node stylesheet "${style.type}"`
         );
         if (!stylesheet) {
@@ -870,66 +883,64 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
       nodeStyle: nodeStyles
     });
 
-    return edgeStyleArray
-      .filter(Boolean)
-      .flatMap((style, idx) => {
-        const {decorators, data = (edges) => edges, visible = true, ...restEdgeStyle} = style;
-        const stylesheet = this._createStylesheetEngine(
-          {
-            type: 'edge',
-            ...restEdgeStyle
-          } as GraphStylesheet,
-          'edge stylesheet'
-        );
-        if (!stylesheet) {
-          return [];
-        }
+    return edgeStyleArray.filter(Boolean).flatMap((style, idx) => {
+      const {decorators, data = (edges) => edges, visible = true, ...restEdgeStyle} = style;
+      const stylesheet = this._createStylesheetEngine(
+        {
+          type: 'edge',
+          ...restEdgeStyle
+        } as GraphStyleRule,
+        'edge stylesheet'
+      );
+      if (!stylesheet) {
+        return [];
+      }
 
-        const edgeLayer = new EdgeLayer({
-          ...SHARED_LAYER_PROPS,
-          id: `edge-layer-${idx}`,
-          data: data(engine.getEdges()),
-          getLayoutInfo,
-          pickable: true,
-          positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
-          stylesheet,
-          visible
-        } as any);
+      const edgeLayer = new EdgeLayer({
+        ...SHARED_LAYER_PROPS,
+        id: `edge-layer-${idx}`,
+        data: data(engine.getEdges()),
+        getLayoutInfo,
+        pickable: true,
+        positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
+        stylesheet,
+        visible
+      } as any);
+
+      if (!decorators || !Array.isArray(decorators) || decorators.length === 0) {
+        return [edgeLayer];
+      }
 
-        if (!decorators || !Array.isArray(decorators) || decorators.length === 0) {
-          return [edgeLayer];
-        }
+      const decoratorLayers = decorators
+        .filter(Boolean)
+        // @ts-ignore eslint-disable-next-line @typescript-eslint/no-unused-vars
+        .map((decoratorStyle, idx2) => {
+          const DecoratorLayer = EDGE_DECORATOR_LAYER_MAP[decoratorStyle.type];
+          if (!DecoratorLayer) {
+            warn(`GraphLayer: Invalid edge decorator type "${decoratorStyle.type}".`);
+            return null;
+          }
+          const decoratorStylesheet = this._createStylesheetEngine(
+            decoratorStyle as unknown as GraphStyleRule,
+            `edge decorator stylesheet "${decoratorStyle.type}"`
+          );
+          if (!decoratorStylesheet) {
+            return null;
+          }
+          return new DecoratorLayer({
+            ...SHARED_LAYER_PROPS,
+            id: `edge-decorator-${idx2}`,
+            data: data(engine.getEdges()),
+            getLayoutInfo,
+            pickable: true,
+            positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
+            stylesheet: decoratorStylesheet
+          } as any);
+        })
+        .filter(Boolean);
 
-        const decoratorLayers = decorators
-          .filter(Boolean)
-          // @ts-ignore eslint-disable-next-line @typescript-eslint/no-unused-vars
-          .map((decoratorStyle, idx2) => {
-            const DecoratorLayer = EDGE_DECORATOR_LAYER_MAP[decoratorStyle.type];
-            if (!DecoratorLayer) {
-              warn(`GraphLayer: Invalid edge decorator type "${decoratorStyle.type}".`);
-              return null;
-            }
-            const decoratorStylesheet = this._createStylesheetEngine(
-              decoratorStyle as unknown as GraphStylesheet,
-              `edge decorator stylesheet "${decoratorStyle.type}"`
-            );
-            if (!decoratorStylesheet) {
-              return null;
-            }
-            return new DecoratorLayer({
-              ...SHARED_LAYER_PROPS,
-              id: `edge-decorator-${idx2}`,
-              data: data(engine.getEdges()),
-              getLayoutInfo,
-              pickable: true,
-              positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
-              stylesheet: decoratorStylesheet
-            } as any);
-          })
-          .filter(Boolean);
-
-        return [edgeLayer, ...decoratorLayers];
-      });
+      return [edgeLayer, ...decoratorLayers];
+    });
   }
 
   onClick(info, event): boolean {
@@ -1018,7 +1029,7 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
         marker: 'circle-plus-filled',
         offset: [24, -24],
         scaleWithZoom: false
-      } as GraphStylesheet<'marker'>,
+      } as GraphStyleRule,
       'collapsed chain marker stylesheet'
     );
 
@@ -1071,7 +1082,7 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
         marker: 'circle-minus-filled',
         offset: [24, -24],
         scaleWithZoom: false
-      } as GraphStylesheet<'marker'>,
+      } as GraphStyleRule,
       'expanded chain marker stylesheet'
     );
 
@@ -1099,12 +1110,11 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
   }
 }
 
-  function isPlainObject(value: unknown): value is Record<string | number | symbol, unknown> {
-    if (!value || typeof value !== 'object') {
-      return false;
-    }
-
-    const prototype = Object.getPrototypeOf(value);
-    return prototype === Object.prototype || prototype === null;
+function isPlainObject(value: unknown): value is Record<string | number | symbol, unknown> {
+  if (!value || typeof value !== 'object') {
+    return false;
   }
 
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}

package/src/layouts/d3-dag/collapsable-d3-dag-layout.ts

@@ -19,13 +19,13 @@ type CollapsedChainDescriptor = {
 export type CollapsableD3DagLayoutProps = D3DagLayoutProps & {
   /** Whether to collapse linear chains of nodes into a single representative. */
   collapseLinearChains?: boolean;
-}
+};
 
 export class CollapsableD3DagLayout extends D3DagLayout<CollapsableD3DagLayoutProps> {
   static override defaultProps: Required<CollapsableD3DagLayoutProps> = {
     ...D3DagLayout.defaultProps,
     collapseLinearChains: false
-  }
+  };
 
   private _chainDescriptors = new Map<string, CollapsedChainDescriptor>();
   private _nodeToChainId = new Map<string | number, string>();
@@ -61,7 +61,10 @@ export class CollapsableD3DagLayout extends D3DagLayout<CollapsableD3DagLayoutPr
     }
 
     if (!this._chainDescriptors.has(chainId)) {
-      log.log(1, `CollapsableD3DagLayout: toggleCollapsedChain(${chainId}) skipped (unknown chain)`);
+      log.log(
+        1,
+        `CollapsableD3DagLayout: toggleCollapsedChain(${chainId}) skipped (unknown chain)`
+      );
       return;
     }
 
@@ -102,9 +105,14 @@ export class CollapsableD3DagLayout extends D3DagLayout<CollapsableD3DagLayoutPr
     }
 
     if (changed) {
-      log.log(0, 'CollapsableD3DagLayout: setCollapsedChains -> changes detected, rerunning layout');
+      log.log(
+        0,
+        'CollapsableD3DagLayout: setCollapsedChains -> changes detected, rerunning layout'
+      );
       // eslint-disable-next-line no-console
-      console.log('CollapsableD3DagLayout: setCollapsedChains -> changes detected, rerunning layout');
+      console.log(
+        'CollapsableD3DagLayout: setCollapsedChains -> changes detected, rerunning layout'
+      );
       this._runLayout();
     } else {
       log.log(1, 'CollapsableD3DagLayout: setCollapsedChains -> no changes');
@@ -138,8 +146,7 @@ export class CollapsableD3DagLayout extends D3DagLayout<CollapsableD3DagLayoutPr
       `CollapsableD3DagLayout: refreshing collapsed chains (previous=${previousChainCount})`
     );
 
-    const collapseDefault =
-      this.props.collapseLinearChains;
+    const collapseDefault = this.props.collapseLinearChains;
 
     const previousStates = new Map(this._collapsedChainState);
 

package/src/layouts/d3-dag/d3-dag-layout.ts

@@ -153,7 +153,9 @@ function isEdgeInterface(value: unknown): value is EdgeInterface {
 /**
  * Layout that orchestrates d3-dag operators from declarative options.
  */
-export class D3DagLayout<PropsT extends D3DagLayoutProps = D3DagLayoutProps> extends GraphLayout<PropsT> {
+export class D3DagLayout<
+  PropsT extends D3DagLayoutProps = D3DagLayoutProps
+> extends GraphLayout<PropsT> {
   static defaultProps: Readonly<Required<D3DagLayoutProps>> = {
     ...GraphLayout.defaultProps,
     layout: 'sugiyama',
@@ -213,7 +215,6 @@ export class D3DagLayout<PropsT extends D3DagLayoutProps = D3DagLayoutProps> ext
     }
   }
 
-
   initializeGraph(graph: Graph): void {
     this.updateGraph(graph);
   }
@@ -277,14 +278,12 @@ export class D3DagLayout<PropsT extends D3DagLayoutProps = D3DagLayoutProps> ext
     return this._nodePositions.get(mappedId) || null;
   }
 
-  getEdgePosition(edge: EdgeInterface):
-    | {
-        type: string;
-        sourcePosition: [number, number];
-        targetPosition: [number, number];
-        controlPoints: [number, number][];
-      }
-    | null {
+  getEdgePosition(edge: EdgeInterface): {
+    type: string;
+    sourcePosition: [number, number];
+    targetPosition: [number, number];
+    controlPoints: [number, number][];
+  } | null {
     const mappedSourceId = this._mapNodeId(edge.getSourceNodeId());
     const mappedTargetId = this._mapNodeId(edge.getTargetNodeId());
     if (mappedSourceId === mappedTargetId) {
@@ -407,7 +406,9 @@ export class D3DagLayout<PropsT extends D3DagLayoutProps = D3DagLayoutProps> ext
     const connect = graphConnect()
       .sourceId(({source}: ConnectDatum): string => source)
       .targetId(({target}: ConnectDatum): string => target)
-      .nodeDatum((id: string): NodeInterface => this._nodeLookup.get(this._fromDagId(id)) ?? new Node({id}))
+      .nodeDatum(
+        (id: string): NodeInterface => this._nodeLookup.get(this._fromDagId(id)) ?? new Node({id})
+      )
       .single(true);
 
     const edges = Array.from(this._graph.getEdges());
@@ -508,7 +509,9 @@ export class D3DagLayout<PropsT extends D3DagLayoutProps = D3DagLayoutProps> ext
       .filter((edge) => edge.isDirected() && edge.getSourceNodeId() === nodeId);
   }
 
-  private _ensureEdgeData<T>(dag: MutGraph<NodeInterface, T>): MutGraph<NodeInterface, EdgeInterface> {
+  private _ensureEdgeData<T>(
+    dag: MutGraph<NodeInterface, T>
+  ): MutGraph<NodeInterface, EdgeInterface> {
     for (const link of dag.links()) {
       if (isEdgeInterface(link.data)) {
         continue;
@@ -551,7 +554,10 @@ export class D3DagLayout<PropsT extends D3DagLayoutProps = D3DagLayoutProps> ext
         // @ts-expect-error TS2345 - Argument of type '(dagNode: MutGraphNode<NodeInterface, EdgeInterface>) => number | undefined' is not assignable to parameter of type '(dagNode: MutGraphNode<NodeInterface, EdgeInterface>) => number'.
         layeringOperator = layeringOperator.rank((dagNode) => {
           const node = dagNode.data as NodeInterface;
-          const rank = typeof nodeRank === 'function' ? nodeRank?.(node) : node?.getPropertyValue(nodeRank) || undefined;
+          const rank =
+            typeof nodeRank === 'function'
+              ? nodeRank?.(node)
+              : node?.getPropertyValue(nodeRank) || undefined;
           // if (rank !== undefined) {
           //   console.log(`Node ${node.getId()} assigned to rank ${rank}`);
           // }
@@ -644,8 +650,17 @@ export class D3DagLayout<PropsT extends D3DagLayoutProps = D3DagLayoutProps> ext
       if (!edge) {
         continue;
       }
-      const points = (link.points && link.points.length ? link.points : [[link.source.x ?? 0, link.source.y ?? 0], [link.target.x ?? 0, link.target.y ?? 0]]);
-      this._rawEdgePoints.set(edge.getId(), points.map((point) => [...point] as [number, number]));
+      const points =
+        link.points && link.points.length
+          ? link.points
+          : [
+              [link.source.x ?? 0, link.source.y ?? 0],
+              [link.target.x ?? 0, link.target.y ?? 0]
+            ];
+      this._rawEdgePoints.set(
+        edge.getId(),
+        points.map((point) => [...point] as [number, number])
+      );
     }
 
     this._updateTransformedGeometry();
@@ -687,10 +702,7 @@ export class D3DagLayout<PropsT extends D3DagLayoutProps = D3DagLayoutProps> ext
     for (const [edgeId, points] of this._rawEdgePoints) {
       const transformed = points.map(([x, y]) => transform(x, y));
       this._edgePoints.set(edgeId, transformed);
-      this._edgeControlPoints.set(
-        edgeId,
-        transformed.length > 2 ? transformed.slice(1, -1) : []
-      );
+      this._edgeControlPoints.set(edgeId, transformed.length > 2 ? transformed.slice(1, -1) : []);
     }
 
     for (const [id, position] of this._lockedNodePositions) {

package/src/layouts/experimental/radial-layout.ts

@@ -10,7 +10,10 @@ export type RadialLayoutProps = GraphLayoutProps & {
   tree?: any;
 };
 
-const getTreeNode = (nodeId: string, nodeMap: Record<string, {children?: string[]; isLeaf?: boolean}>) => {
+const getTreeNode = (
+  nodeId: string,
+  nodeMap: Record<string, {children?: string[]; isLeaf?: boolean}>
+) => {
   const node = nodeMap[nodeId];
   if (node) {
     return node;

package/src/layouts/simple-layout.ts

@@ -35,7 +35,7 @@ export class SimpleLayout extends GraphLayout<SimpleLayoutProps> {
     this._notifyLayoutComplete();
   }
 
-  stop() : void {}
+  stop(): void {}
 
   update(): void {
     this._notifyLayoutComplete();
@@ -50,7 +50,10 @@ export class SimpleLayout extends GraphLayout<SimpleLayoutProps> {
     const nodes = Array.from(graph.getNodes());
     this._nodeMap = new Map(nodes.map((node) => [node.getId(), node]));
     this._nodePositionMap = new Map(
-      nodes.map((node) => [node.getId(), this._normalizePosition(this.props.nodePositionAccessor(node))])
+      nodes.map((node) => [
+        node.getId(),
+        this._normalizePosition(this.props.nodePositionAccessor(node))
+      ])
     );
   }
 
@@ -63,7 +66,7 @@ export class SimpleLayout extends GraphLayout<SimpleLayoutProps> {
       return [0, 0] as [number, number];
     }
     const position = this._nodePositionMap.get(node.getId());
-    return position ?? [0, 0] as [number, number];
+    return position ?? ([0, 0] as [number, number]);
   };
 
   getEdgePosition = (edge: EdgeInterface) => {
@@ -91,7 +94,6 @@ export class SimpleLayout extends GraphLayout<SimpleLayoutProps> {
     this._onLayoutDone();
   }
 
-
   protected override _updateBounds(): void {
     const positions = Array.from(this._nodePositionMap.values(), (position) =>
       this._normalizePosition(position)

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

@@ -55,13 +55,12 @@ export type DOTGraphLoaderMetadata = {
 
 export type DOTGraphLoaderOptions = LoaderOptions & {
   dot?: {
-   version?: number;
+    version?: number;
   };
 };
 
 export type DOTGraphParserOptions = NonNullable<DOTGraphLoaderOptions['dot']>;
 
-
 export const DOTGraphLoader = {
   dataType: null as unknown as ArrowGraphData,
   batchType: null as never,
@@ -89,7 +88,6 @@ export const DOTGraphLoader = {
   }
 } as const satisfies LoaderWithParser<ArrowGraphData, never, DOTGraphLoaderOptions>;
 
-
 export function loadDOTGraph(dot: string, options: DOTGraphParserOptions = {}): ArrowGraphData {
   const parsed = parseDOT(dot);
   return buildArrowGraphData(parsed, options);
@@ -121,7 +119,9 @@ function buildArrowGraphData(
   for (const node of parsed.nodes.values()) {
     const attributes: DOTAttributeMap = {...node.attributes};
     if (node.subgraphs.size > 0) {
-      attributes.subgraphs = Array.from(node.subgraphs, (id) => describeSubgraph(id, subgraphDescriptors));
+      attributes.subgraphs = Array.from(node.subgraphs, (id) =>
+        describeSubgraph(id, subgraphDescriptors)
+      );
     }
     builder.addNode({
       id: node.id,
@@ -428,7 +428,11 @@ class DOTParser {
       graphAttributes: {}
     };
     this.scopes.push(context);
-    this.result.subgraphs.set(subgraphId, {id: subgraphId, attributes: context.graphAttributes, parentId});
+    this.result.subgraphs.set(subgraphId, {
+      id: subgraphId,
+      attributes: context.graphAttributes,
+      parentId
+    });
 
     let shouldContinue = true;
     while (shouldContinue) {
@@ -702,7 +706,10 @@ function readQuotedString(input: string, startIndex: number): {value: string; ne
   throw new Error('Unterminated string literal in DOT source.');
 }
 
-function readEscapedCharacter(input: string, startIndex: number): {value: string; nextIndex: number} {
+function readEscapedCharacter(
+  input: string,
+  startIndex: number
+): {value: string; nextIndex: number} {
   const next = input[startIndex];
   switch (next) {
     case 'n':
@@ -807,7 +814,12 @@ function isIdentifierLike(token: Token): boolean {
 }
 
 function isStructuralToken(token: Token): boolean {
-  return token.type === 'lbrace' || token.type === 'rbrace' || token.type === 'lbrack' || token.type === 'rbrack';
+  return (
+    token.type === 'lbrace' ||
+    token.type === 'rbrace' ||
+    token.type === 'lbrack' ||
+    token.type === 'rbrack'
+  );
 }
 
 function parseIdentifierValue(token: Token): string {

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

@@ -12,8 +12,7 @@ import type {PlainGraphData} from '../graph-data/graph-data';
 const VERSION = typeof __VERSION__ !== 'undefined' ? __VERSION__ : 'latest';
 
 export type JSONGraphLoaderOptions = LoaderOptions & {
-  jsongraph?: {
-  };
+  jsongraph?: {};
 };
 
 export type JSONGraphParserOptions = NonNullable<JSONGraphLoaderOptions['jsongraph']>;
@@ -31,15 +30,14 @@ export const JSONGraphLoader = {
   mimeTypes: ['application/json'],
   text: true,
   options: {
-    'jsongraph': {
-    }
+    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');

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

@@ -84,7 +84,8 @@ function parseNodes(
         state: parsed.state ?? (attributes.state as NodeState | undefined),
         selectable: parsed.selectable ?? (attributes.selectable as boolean | undefined),
         highlightConnectedEdges:
-          parsed.highlightConnectedEdges ?? (attributes.highlightConnectedEdges as boolean | undefined),
+          parsed.highlightConnectedEdges ??
+          (attributes.highlightConnectedEdges as boolean | undefined),
         label: parsed.label ?? (attributes.label as string | undefined),
         weight: parsed.weight ?? (attributes.weight as number | undefined),
         attributes