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

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,6 +53,7 @@ import {
   type LabelAccessor,
   type RankAccessor
 } from '../utils/rank-grid';
+import {createGraphFromData} from '../graph/functions/create-graph-from-data';
 
 import {warn} from '../utils/log';
 
@@ -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;
@@ -821,7 +827,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) {
@@ -878,7 +884,7 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
           {
             type: 'edge',
             ...restEdgeStyle
-          } as GraphStylesheet,
+          } as GraphStyleRule,
           'edge stylesheet'
         );
         if (!stylesheet) {
@@ -910,7 +916,7 @@ export class GraphLayer extends CompositeLayer<GraphLayerProps> {
               return null;
             }
             const decoratorStylesheet = this._createStylesheetEngine(
-              decoratorStyle as unknown as GraphStylesheet,
+              decoratorStyle as unknown as GraphStyleRule,
               `edge decorator stylesheet "${decoratorStyle.type}"`
             );
             if (!decoratorStylesheet) {
@@ -1018,7 +1024,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 +1077,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'
     );
 

package/src/style/graph-layer-stylesheet.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {GraphStylesheet, GraphStyleType} from './graph-style-engine';
+import type {GraphStylesheet, GraphStyleRule, GraphStyleType} from './graph-style-engine';
 
 export type GraphNodeStyleType = Exclude<
   GraphStyleType,
@@ -11,26 +11,26 @@ export type GraphNodeStyleType = Exclude<
 
 export type GraphEdgeDecoratorType = Extract<GraphStyleType, 'edge-label' | 'flow' | 'arrow'>;
 
-export type GraphLayerNodeStyle = GraphStylesheet<GraphNodeStyleType> & {
+export type GraphLayerNodeStyle = Extract<GraphStyleRule, {type: GraphNodeStyleType}> & {
   pickable?: boolean;
   visible?: boolean;
   data?: (nodes: any[]) => any;
 };
 
-export type GraphLayerEdgeDecoratorStyle = GraphStylesheet<GraphEdgeDecoratorType>;
+export type GraphLayerEdgeDecoratorStyle = Extract<GraphStyleRule, {type: GraphEdgeDecoratorType}>;
 
 type EdgeStyleType = Extract<GraphStyleType, 'Edge' | 'edge'>;
 
 export type GraphLayerEdgeStyle = (
-  | GraphStylesheet<EdgeStyleType>
-  | (Omit<GraphStylesheet<EdgeStyleType>, 'type'> & {type?: EdgeStyleType})
+  | Extract<GraphStyleRule, {type: EdgeStyleType}>
+  | (Omit<Extract<GraphStyleRule, {type: EdgeStyleType}>, 'type'> & {type?: EdgeStyleType})
 ) & {
   decorators?: GraphLayerEdgeDecoratorStyle[];
   data?: (edges: any[]) => any;
   visible?: boolean;
 };
 
-export type GraphLayerStylesheet = {
+export type GraphLayerStylesheet = GraphStylesheet & {
   nodes?: GraphLayerNodeStyle[];
   edges?: GraphLayerEdgeStyle | GraphLayerEdgeStyle[];
 };
@@ -42,10 +42,17 @@ export type NormalizedGraphLayerStylesheet = {
   edges: GraphLayerEdgeStyle[];
 };
 
+export const DEFAULT_GRAPH_LAYER_STYLESHEET_INPUT: GraphLayerStylesheet = {
+  nodes: [],
+  edges: [{
+    type: 'edge',
+    stroke: 'black',
+    strokeWidth: 1
+  }]
+};
+
 const DEFAULT_EDGE_STYLE: GraphLayerEdgeStyle = {
-  type: 'edge',
-  stroke: 'black',
-  strokeWidth: 1,
+  ...DEFAULT_GRAPH_LAYER_STYLESHEET_INPUT.edges[0],
   decorators: []
 };
 

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

@@ -8,10 +8,10 @@ import {ZodError, type ZodIssue} from 'zod';
 
 import {StylesheetEngine, type DeckGLUpdateTriggers} from './stylesheet-engine';
 import {
-  GraphStylesheetSchema,
-  type GraphStylesheet,
-  type GraphStylesheetParsed
-} from './graph-stylesheet.schema';
+  GraphStyleRuleSchema,
+  type GraphStyleRule,
+  type GraphStyleRuleParsed
+} from './graph-stylesheet-schema';
 import {GRAPH_DECKGL_ACCESSOR_MAP} from './graph-style-accessor-map';
 import {warn} from '../utils/log';
 
@@ -40,13 +40,16 @@ function formatStylesheetError(error: ZodError) {
 }
 
 export class GraphStylesheetEngine extends StylesheetEngine {
-  constructor(style: GraphStylesheet, {stateUpdateTrigger}: {stateUpdateTrigger?: unknown} = {}) {
-    const result = GraphStylesheetSchema.safeParse(style);
+  constructor(
+    style: GraphStyleRule | GraphStyleRuleParsed,
+    {stateUpdateTrigger}: {stateUpdateTrigger?: unknown} = {}
+  ) {
+    const result = GraphStyleRuleSchema.safeParse(style);
     const parsedStyle = result.success
       ? result.data
       : sanitizeStylesheet(style, result.error.issues);
 
-    super(parsedStyle as GraphStylesheet, {
+    super(parsedStyle as GraphStyleRule, {
       deckglAccessorMap: GRAPH_DECKGL_ACCESSOR_MAP,
       deckglUpdateTriggers: GRAPH_DECKGL_UPDATE_TRIGGERS,
       stateUpdateTrigger
@@ -64,12 +67,14 @@ export {
   GraphStyleLeafValueSchema,
   GraphStyleStateMapSchema,
   GraphStyleValueSchema,
-  GraphStylesheetSchema
-} from './graph-stylesheet.schema';
+  GraphStylesheetSchema,
+  GraphStyleRuleSchema
+} from './graph-stylesheet-schema';
 
 export type {
   GraphStylesheet,
-  GraphStylesheetInput,
+  GraphStyleRule,
+  GraphStyleRuleParsed,
   GraphStylesheetParsed,
   GraphStyleSelector,
   GraphStyleType,
@@ -78,12 +83,15 @@ export type {
   GraphStyleScale,
   GraphStyleScaleType,
   GraphStyleValue
-} from './graph-stylesheet.schema';
+} from './graph-stylesheet-schema';
 
 export {GRAPH_DECKGL_ACCESSOR_MAP} from './graph-style-accessor-map';
 
 // eslint-disable-next-line max-statements, complexity
-function sanitizeStylesheet(style: GraphStylesheet, issues: ZodIssue[]): GraphStylesheetParsed {
+function sanitizeStylesheet(
+  style: GraphStyleRule | GraphStyleRuleParsed,
+  issues: ZodIssue[]
+): GraphStyleRuleParsed {
   if (issues.length) {
     const details = issues
       .map((issue) => {
@@ -139,7 +147,7 @@ function sanitizeStylesheet(style: GraphStylesheet, issues: ZodIssue[]): GraphSt
       delete sanitized[rootKey];
     }
 
-    const result = GraphStylesheetSchema.safeParse(sanitized);
+    const result = GraphStyleRuleSchema.safeParse(sanitized);
     if (result.success) {
       return result.data;
     }