@deck.gl-community/graph-layers 9.0.0

package/src/style/style-property.ts

@@ -0,0 +1,229 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import Color from 'color';
+import {log} from '../utils/log';
+
+/* Utils for type check */
+function getColor(value) {
+  if (typeof value === 'string') {
+    try {
+      const color = Color.rgb(value).array();
+      if (Number.isFinite(color[3])) {
+        color[3] *= 255;
+      }
+      return color;
+    } catch (error) {
+      return [0, 0, 0];
+    }
+  }
+  if (Array.isArray(value) && Number.isFinite(value[0])) {
+    return value;
+  }
+  return [0, 0, 0];
+}
+
+function getNumber(value) {
+  switch (typeof value) {
+    case 'string':
+      value = Number(value);
+      return isNaN(value) ? null : value;
+
+    case 'number':
+      return value;
+
+    default:
+      return null;
+  }
+}
+
+function getBool(value) {
+  switch (typeof value) {
+    case 'boolean':
+      return value;
+
+    case 'string':
+      return value.toLowerCase() !== 'false';
+
+    case 'number':
+      return Boolean(value);
+
+    default:
+      return null;
+  }
+}
+
+function getOffset(value) {
+  if (typeof value === 'function') {
+    return value;
+  }
+
+  if (!Array.isArray(value) || value.length !== 2) {
+    return null;
+  }
+  return value.map(getNumber);
+}
+
+const IDENTITY = (x) => x;
+const PROPERTY_FORMATTERS = {
+  opacity: getNumber,
+  zIndex: getNumber,
+
+  width: getNumber,
+  height: getNumber,
+  radius: getNumber,
+
+  fill: getColor,
+  stroke: getColor,
+  strokeWidth: getNumber,
+
+  // for marker
+  marker: String,
+  size: getNumber,
+
+  // text
+  color: getColor,
+  text: String,
+  fontSize: getNumber,
+  textAnchor: String,
+  alignmentBaseline: String,
+  angle: getNumber,
+  textMaxWidth: getNumber,
+  textWordBreak: String,
+  textSizeMinPixels: getNumber,
+
+  // edges
+  speed: getNumber,
+  tailLength: getNumber,
+
+  offset: getOffset,
+  scaleWithZoom: getBool
+};
+
+const DEFAULT_STYLES = {
+  opacity: 1,
+  zIndex: 0,
+
+  width: 0,
+  height: 0,
+  radius: 1,
+
+  fill: [0, 0, 0],
+  stroke: [0, 0, 0],
+  strokeWidth: 0,
+
+  marker: 'circle',
+  size: 12,
+
+  color: [0, 0, 0],
+  text: '',
+  fontSize: 12,
+  textAnchor: 'middle',
+  alignmentBaseline: 'center',
+  angle: 0,
+  textMaxWidth: -1,
+  textWordBreak: 'break-all',
+  textSizeMinPixels: 9,
+
+  speed: 0,
+  tailLength: 1,
+
+  offset: null,
+  scaleWithZoom: true
+};
+
+// code generation: generate a function as a layer accessor
+function generateAccessor(key, value) {
+  const formatter = PROPERTY_FORMATTERS[key] || IDENTITY;
+  // ex: key = 'fill', value = {defaut: 'red', hover: 'blue'}
+  // valueMap => {defaut: [255, 0, 0], hover: [0, 0, 255]}
+  const valueMap = Object.keys(value).reduce((res, key0) => {
+    res[key0] = value[key0];
+    return res;
+  }, {}) as any;
+
+  return (node) => {
+    const statefulValue = valueMap[node.state];
+    if (!node.state || typeof statefulValue === 'undefined') {
+      return valueMap.default || DEFAULT_STYLES[key];
+    }
+    // else has stateful value
+    // check if the value is a function
+    if (typeof statefulValue === 'function') {
+      return formatter(statefulValue(node));
+    }
+    // or just a plain value
+    return formatter(statefulValue);
+  };
+}
+
+const VALUE_TYPE = {
+  ACCESSOR: 'ACCESSOR',
+  PLAIN_VALUE: 'PLAIN_VALUE'
+};
+
+export class StyleProperty {
+  key: any;
+  _updateTrigger: boolean;
+  _value: any;
+  _valueType: any;
+
+  // for getting default style
+  static getDefault(key) {
+    return DEFAULT_STYLES[key];
+  }
+
+  // pass the key and value of the property
+  // and format the value properly.
+  constructor({key, value, updateTrigger}) {
+    this.key = key;
+    this._updateTrigger = false;
+
+    // statefule property, ex:
+    // fill: {default: 'red', hover: 'blue'}
+    // note that offset: [0, 1], the type of array is object, too.
+    if (typeof value === 'object' && !Array.isArray(value)) {
+      // generate accessor function
+      this._value = generateAccessor(key, value);
+      this._valueType = VALUE_TYPE.ACCESSOR;
+      this._updateTrigger = updateTrigger;
+    }
+    // default state property, but value = accessor
+    // fill: () => 'red'
+    else if (typeof value === 'function') {
+      const formatter = PROPERTY_FORMATTERS[key] || IDENTITY;
+      // the output of the function should be formated by
+      // the corresponding formatter again.
+      // Ex: colorAccessor might return '#f00', which needs to
+      // be formated as [255, 0, 0];
+      this._value = (d) => formatter(value(d));
+      this._valueType = VALUE_TYPE.ACCESSOR;
+      this._updateTrigger = value;
+    }
+    // default state property with plain value:
+    // fill: 'red'
+    else {
+      // format the value properly
+      const formatter = PROPERTY_FORMATTERS[key] || IDENTITY;
+      this._value = formatter(value);
+      this._valueType = VALUE_TYPE.PLAIN_VALUE;
+      this._updateTrigger = false;
+    }
+
+    // sanity check
+    if (this._value === null) {
+      log.warn(`Invalid ${key} value: ${value}`)();
+      throw new Error(`Invalid ${key} value: ${value}`);
+    }
+  }
+
+  // get the formatted value
+  getValue() {
+    return this._value;
+  }
+
+  getUpdateTrigger() {
+    return this._updateTrigger;
+  }
+}

package/src/style/style-sheet.ts

@@ -0,0 +1,277 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {StyleProperty} from './style-property';
+
+import {NODE_TYPE, EDGE_DECORATOR_TYPE} from '../core/constants';
+import {log} from '../utils/log';
+
+const COMMON_DECKGL_PROPS = {
+  getOffset: 'offset',
+  opacity: 'opacity'
+};
+
+const DECKGL_ACCESSOR_MAP = {
+  [NODE_TYPE.CIRCLE]: {
+    ...COMMON_DECKGL_PROPS,
+    getFillColor: 'fill',
+    getLineColor: 'stroke',
+    getLineWidth: 'strokeWidth',
+    getRadius: 'radius'
+  },
+
+  [NODE_TYPE.RECTANGLE]: {
+    ...COMMON_DECKGL_PROPS,
+    getWidth: 'width',
+    getHeight: 'height',
+    getFillColor: 'fill',
+    getLineColor: 'stroke',
+    getLineWidth: 'strokeWidth'
+  },
+
+  [NODE_TYPE.ROUNDED_RECTANGLE]: {
+    ...COMMON_DECKGL_PROPS,
+    getCornerRadius: 'cornerRadius',
+    getRadius: 'radius',
+    getWidth: 'width',
+    getHeight: 'height',
+    getFillColor: 'fill',
+    getLineColor: 'stroke',
+    getLineWidth: 'strokeWidth'
+  },
+
+  [NODE_TYPE.PATH_ROUNDED_RECTANGLE]: {
+    ...COMMON_DECKGL_PROPS,
+    getWidth: 'width',
+    getHeight: 'height',
+    getFillColor: 'fill',
+    getLineColor: 'stroke',
+    getLineWidth: 'strokeWidth',
+    getCornerRadius: 'cornerRadius'
+  },
+
+  [NODE_TYPE.LABEL]: {
+    ...COMMON_DECKGL_PROPS,
+    getColor: 'color',
+    getText: 'text',
+    getSize: 'fontSize',
+    getTextAnchor: 'textAnchor',
+    getAlignmentBaseline: 'alignmentBaseline',
+    getAngle: 'angle',
+    scaleWithZoom: 'scaleWithZoom',
+    textMaxWidth: 'textMaxWidth',
+    textWordBreak: 'textWordBreak',
+    textSizeMinPixels: 'textSizeMinPixels'
+  },
+
+  [NODE_TYPE.MARKER]: {
+    ...COMMON_DECKGL_PROPS,
+    getColor: 'fill',
+    getSize: 'size',
+    getMarker: 'marker',
+    scaleWithZoom: 'scaleWithZoom'
+  },
+
+  // --------- Edge related ---------
+  Edge: {
+    getColor: 'stroke',
+    getWidth: 'strokeWidth'
+  },
+  [EDGE_DECORATOR_TYPE.LABEL]: {
+    getColor: 'color',
+    getText: 'text',
+    getSize: 'fontSize',
+    getTextAnchor: 'textAnchor',
+    getAlignmentBaseline: 'alignmentBaseline',
+    scaleWithZoom: 'scaleWithZoom',
+    textMaxWidth: 'textMaxWidth',
+    textWordBreak: 'textWordBreak',
+    textSizeMinPixels: 'textSizeMinPixels'
+  },
+  [EDGE_DECORATOR_TYPE.FLOW]: {
+    getColor: 'color',
+    getWidth: 'width',
+    getSpeed: 'speed',
+    getTailLength: 'tailLength'
+  }
+};
+
+const DECKGL_UPDATE_TRIGGERS = {
+  [NODE_TYPE.CIRCLE]: ['getFillColor', 'getRadius', 'getLineColor', 'getLineWidth'],
+  [NODE_TYPE.RECTANGLE]: ['getFillColor', 'getLineColor', 'getLineWidth'],
+  [NODE_TYPE.ROUNDED_RECTANGLE]: [
+    'getFillColor',
+    'getLineColor',
+    'getLineWidth',
+    'getCornerRadius'
+  ],
+  [NODE_TYPE.PATH_ROUNDED_RECTANGLE]: [
+    'getFillColor',
+    'getLineColor',
+    'getLineWidth',
+    'getCornerRadius'
+  ],
+  [NODE_TYPE.LABEL]: [
+    'getColor',
+    'getText',
+    'getSize',
+    'getTextAnchor',
+    'getAlignmentBaseline',
+    'getAngle'
+  ],
+  [NODE_TYPE.MARKER]: ['getColor', 'getSize', 'getMarker'],
+  Edge: ['getColor', 'getWidth'],
+  [EDGE_DECORATOR_TYPE.LABEL]: [
+    'getColor',
+    'getText',
+    'getSize',
+    'getTextAnchor',
+    'getAlignmentBaseline'
+  ],
+  [EDGE_DECORATOR_TYPE.FLOW]: ['getColor', 'getWidth', 'getSpeed', 'getTailLength']
+};
+
+export class Stylesheet {
+  type: any;
+  properties: any;
+  constructor(style, updateTriggers) {
+    const {type: layerType, ...restStyle} = style;
+    if (!layerType || !(layerType in DECKGL_ACCESSOR_MAP)) {
+      throw new Error(`illegal type: ${layerType}`);
+    }
+    this.type = layerType;
+
+    // style = {
+    //  type: 'circle',
+    //  fill: 'red'
+    //  radius: 5,
+    //
+    //  ':hover': {
+    //    fill: 'blue',
+    //    stroke: 'red'
+    //  }
+    // };
+    // step 1: extract 'rules': default, hover
+    // default: {fill: 'red', radius: 5};
+    // hover: {fill: 'blue', stroke: 'red'};
+    const rules = Object.keys(restStyle).reduce(
+      (res, key) => {
+        const isSelector = key.startsWith(':');
+        if (isSelector) {
+          const state = key.substring(1);
+          res[state] = restStyle[key];
+          return res;
+        }
+        res.default[key] = restStyle[key];
+        return res;
+      },
+      {
+        default: {}
+      }
+    );
+
+    // step 2: extract all unique attributes from rules
+    // attributes: ['fill', 'radius', 'stroke']
+    const attributes = Object.values(rules).reduce((res, rule) => {
+      const attrs = Object.keys(rule);
+      const set = new Set([...(res as any), ...attrs]);
+      return Array.from(set);
+    }, []);
+    // step 3: create a attribute map as:
+    // attrMap = {
+    //  fill: {default: 'red', hover: 'blue'},
+    //  radius: {default: 5},
+    //  stroke: {hover: 'red'},
+    // }
+    const attrMap = (attributes as any).reduce((res, attr) => {
+      res[attr] = Object.entries(rules).reduce((acc, entry) => {
+        const [state, rule] = entry;
+        if (typeof rule[attr] !== 'undefined') {
+          acc[state] = rule[attr];
+        }
+        return acc;
+      }, {});
+      return res;
+    }, {});
+
+    // step 4: simplify the attribute map if only default exists for the attribute
+    // simplifiedStyleMap = {
+    //  fill: {default: 'red', hover: 'blue'},
+    //  radius: 5,
+    //  stroke: {hover: 'red'},
+    // }
+    const simplifiedStyleMap = Object.entries(attrMap).reduce((res, entry) => {
+      const [attr, valueMap] = entry as any;
+      const onlyDefault = Object.keys(valueMap).length === 1 && valueMap.default !== undefined;
+      if (onlyDefault) {
+        res[attr] = valueMap.default;
+        return res;
+      }
+      res[attr] = valueMap;
+      return res;
+    }, {});
+
+    // step 5: create style property
+    // if the propety only maps to default state => return value only
+    // if the property maps to other states => return accessor function
+
+    // start to parse properties
+    this.properties = {};
+    for (const key in simplifiedStyleMap) {
+      this.properties[key] = new StyleProperty({
+        key,
+        value: simplifiedStyleMap[key],
+        updateTrigger: updateTriggers.stateUpdateTrigger
+      });
+    }
+  }
+
+  _getProperty(deckglAccessor) {
+    const map = DECKGL_ACCESSOR_MAP[this.type];
+    if (!map) {
+      throw new Error(`illegal type: ${this.type}`);
+    }
+    const styleProp = map[deckglAccessor];
+    if (!styleProp) {
+      log.error(`Invalid DeckGL accessor: ${deckglAccessor}`)();
+      throw new Error(`Invalid DeckGL accessor: ${deckglAccessor}`);
+    }
+    return this.properties[styleProp];
+  }
+
+  getDeckGLAccessor(deckglAccessor) {
+    const property = this._getProperty(deckglAccessor);
+    // get the value
+    if (property) {
+      return property.getValue();
+    }
+    // return default value
+    const styleProp = DECKGL_ACCESSOR_MAP[this.type][deckglAccessor];
+    return StyleProperty.getDefault(styleProp);
+  }
+
+  getDeckGLAccessorUpdateTrigger(deckglAccessor) {
+    const property = this._getProperty(deckglAccessor);
+    // get the value
+    if (property) {
+      return property.getUpdateTrigger();
+    }
+    return false;
+  }
+
+  getDeckGLAccessors() {
+    const accessorMap = DECKGL_ACCESSOR_MAP[this.type];
+    return Object.keys(accessorMap).reduce((res, accessor) => {
+      res[accessor] = this.getDeckGLAccessor(accessor);
+      return res;
+    }, {});
+  }
+
+  getDeckGLUpdateTriggers() {
+    return DECKGL_UPDATE_TRIGGERS[this.type].reduce((res, accessor) => {
+      res[accessor] = this.getDeckGLAccessorUpdateTrigger(accessor);
+      return res;
+    }, {});
+  }
+}

package/src/utils/create-graph.ts

@@ -0,0 +1,38 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Edge} from '../core/edge';
+import {Node} from '../core/node';
+import {Graph} from '../core/graph';
+
+export function createGraph({name, nodes, edges, nodeParser, edgeParser}) {
+  // create a new empty graph
+  const graph = new Graph();
+
+  const graphName = name || Date.now();
+  graph.setGraphName(graphName);
+
+  // 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
+    });
+  });
+  graph.batchAddEdges(glEdges);
+  return graph;
+}

package/src/utils/layer-utils.ts

@@ -0,0 +1,23 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export const mixedGetPosition = (getPosition, getOffset) => {
+  if (!getOffset) {
+    return getPosition;
+  }
+
+  if (typeof getOffset === 'function') {
+    return (d) => {
+      const [x, y] = getPosition(d);
+      const [offX, offY] = getOffset(d);
+      return [x + offX, y + offY];
+    };
+  }
+
+  const [offX, offY] = getOffset;
+  return (d) => {
+    const [x, y] = getPosition(d);
+    return [x + offX, y + offY];
+  };
+};

package/src/utils/log.ts

@@ -0,0 +1,9 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Log, COLOR} from 'probe.gl';
+
+export const log = new Log({id: 'react-graph-layers'}).enable();
+
+log.log({color: COLOR.CYAN}, 'Initialize react-graph-layers logger.')();