@unovis/ts 1.1.1-beta.6 → 1.1.1-beta.7

package/src/components/free-brush/index.ts

@@ -0,0 +1,207 @@
+import { Selection } from 'd3-selection'
+import { brush, BrushBehavior, brushX, brushY, D3BrushEvent } from 'd3-brush'
+import { XYComponentCore } from 'core/xy-component'
+import { clamp, isNumber } from 'utils/data'
+import { smartTransition } from 'utils/d3'
+
+// Types
+import { ContinuousScale } from 'types/scale'
+import { FreeBrushMode, FreeBrushSelection, FreeBrushSelectionInPixels } from './types'
+
+// Config
+import { FreeBrushConfig, FreeBrushConfigInterface } from './config'
+
+// Styles
+import * as s from './style'
+
+export class FreeBrush<Datum> extends XYComponentCore<Datum, FreeBrushConfig<Datum>, FreeBrushConfigInterface<Datum>> {
+  static selectors = s
+  config: FreeBrushConfig<Datum> = new FreeBrushConfig()
+  private brush: Selection<SVGGElement, unknown, SVGGElement, unknown>
+  private brushBehaviour: BrushBehavior<unknown>
+  private _firstRender = true
+
+  constructor (config: FreeBrushConfigInterface<Datum>) {
+    super()
+    if (config) this.config.init(config)
+
+    this.brush = this.g
+      .append('g')
+      .attr('class', s.brush)
+  }
+
+  _render (customDuration?: number): void {
+    const { config } = this
+    const xScale = this.xScale
+    const yScale = this.yScale
+    const duration = isNumber(customDuration) ? customDuration : config.duration
+
+    if (this._firstRender) this.brush.classed(s.hide, this._firstRender && config.autoHide)
+
+    // Sometimes Brush stops emitting 'start' and 'end' events. Possible explanation:
+    // "... mouseup will only fire when performed within the browser, which can lead to losing track of the button state."
+    // https://stackoverflow.com/a/48970682
+    //
+    // D3 code related to the problem:
+    // https://github.com/d3/d3-brush/blob/ec2bce6f15074a9ead7f9a84c61335be51c123a3/src/brush.js#L301
+    //
+    // We're clearing brush's event emitter state to force it to get re-initialized
+    // Caveat of this solution: If you're doing a brush selection and a render happens
+    // (e.g. due to a data or config update), it'll reset the brush.
+    //
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (this.brush.node().__brush) this.brush.node().__brush.emitter = undefined
+
+    this.brushBehaviour = this._getBrushBehaviour(config.mode)
+
+    this.brushBehaviour
+      .handleSize(config.handleWidth)
+      .extent([[0, 0], [this._width, this._height]])
+      .on('start', this._onBrushStart.bind(this))
+      .on('brush', this._onBrushMove.bind(this))
+      .on('end', this._onBrushEnd.bind(this))
+
+    this.brush
+      .call(this.brushBehaviour)
+
+    // Calculate the brush range from configured selection and apply it
+    let brushRange: FreeBrushSelectionInPixels
+    switch (config.mode) {
+      case FreeBrushMode.XY: {
+        const xSelectionRange = this._dataRangeToPixelRange([config.selection?.[0][0], config.selection?.[0][1]], xScale)
+        const ySelectionRange = this._dataRangeToPixelRange([config.selection?.[1][0], config.selection?.[1][1]], yScale, true)
+        brushRange = (xSelectionRange && ySelectionRange) ? [[xSelectionRange[0], ySelectionRange[0]], [xSelectionRange[1], ySelectionRange[1]]] : null
+        break
+      }
+      case FreeBrushMode.X:
+      case FreeBrushMode.Y:
+      default: {
+        const scale = config.mode === FreeBrushMode.Y ? yScale : xScale
+        brushRange = this._dataRangeToPixelRange(config.selection as [number, number], scale, config.mode === FreeBrushMode.Y)
+      }
+    }
+
+    smartTransition(this.brush, duration)
+      .call(this.brushBehaviour.move, brushRange) // Sets up the brush and calls brush events
+      .on('end interrupt', () => { this._firstRender = false })
+
+    if (!duration) this._firstRender = false
+  }
+
+  private _onBrush (event: D3BrushEvent<unknown>): void {
+    const { config } = this
+    const userDriven = !!event?.sourceEvent
+
+    // Selection from the brush events is in Screen Space (pixels)
+    // In case of two dimensional brush is comes as [ [xMinPx, yMinPx], [xMaxPx, yMaxPx] ],
+    //   while in the config we'll be storing it as [ [xMin, xMax], [yMin, yMax] ]
+    const s = (event?.selection) as FreeBrushSelectionInPixels
+    if (!this._isSelectionValid(s)) {
+      config.selection = null
+      return
+    }
+
+    // Convert the raw brush selection from pixels to data units, store it in the config and trigger the onBrush callback
+    let selectedDomain: FreeBrushSelection
+    switch (config.mode) {
+      case FreeBrushMode.XY: {
+        const xSelection = this._pixelRangeToDataRange([s[0][0], s[1][0]], this.xScale, config.selectionMinLength?.[0] ?? config.selectionMinLength)
+        const ySelection = this._pixelRangeToDataRange([s[0][1], s[1][1]], this.yScale, config.selectionMinLength?.[1] ?? config.selectionMinLength, true)
+        selectedDomain = (xSelection && ySelection) ? [
+          [xSelection?.[0], xSelection?.[1]],
+          [ySelection?.[0], ySelection?.[1]],
+        ] : null
+        break
+      }
+      case FreeBrushMode.Y: {
+        selectedDomain = this._pixelRangeToDataRange(s as [number, number], this.yScale, config.selectionMinLength, true)
+        break
+      }
+      case FreeBrushMode.X:
+      default: {
+        selectedDomain = this._pixelRangeToDataRange(s as [number, number], this.xScale, config.selectionMinLength)
+        break
+      }
+    }
+
+    if (selectedDomain === null || selectedDomain[0] === null || selectedDomain[1] === null) {
+      this.brush.call(this.brushBehaviour.move, null)
+      return
+    }
+
+    config.selection = selectedDomain
+    if (!this._firstRender) config.onBrush(selectedDomain, event, userDriven)
+  }
+
+  private _pixelRangeToDataRange (selectionInPixels: [number, number], scale: ContinuousScale, constraint: number, reversed?: boolean): [number, number] | null {
+    const selectedDomain = selectionInPixels.map(n => scale.invert(n)) as [number, number]
+    if (reversed) selectedDomain.reverse()
+
+    const domain = scale.domain() as [number, number]
+    const domainLength = Math.abs(domain[1] - domain[0])
+    const selectionLength = Math.abs(selectedDomain[1] - selectedDomain[0])
+
+    if (constraint >= domainLength) {
+      console.warn('Unovis | FreeBrush: Configured domain constraint is bigger than the brush domain')
+    }
+
+    if ((selectionLength < constraint) && (constraint < domainLength)) return null
+    else return selectedDomain
+  }
+
+  private _dataRangeToPixelRange (selectionInDataUnits: [number, number], scale: ContinuousScale, reversed?: boolean): [number, number] | null {
+    if (!selectionInDataUnits) return null
+
+    const range = scale.range()
+    const s = [...selectionInDataUnits]
+    if (reversed) {
+      range.reverse()
+      s.reverse()
+    }
+    const selectionMin = clamp(scale(s[0]) ?? 0, range[0], range[1])
+    const selectionMax = clamp(scale(s[1]) ?? 0, range[0], range[1])
+    return (selectionMax - selectionMin) ? [selectionMin, selectionMax] : null
+  }
+
+  private _isSelectionValid (s: FreeBrushSelection | FreeBrushSelectionInPixels): boolean {
+    const { config } = this
+
+    if (config.mode === FreeBrushMode.XY) {
+      return s && Array.isArray(s[0]) && Array.isArray(s[1])
+    } else {
+      return s && isNumber(s[0]) && isNumber(s[1])
+    }
+  }
+
+  private _getBrushBehaviour (mode: FreeBrushMode): BrushBehavior<unknown> {
+    switch (mode) {
+      case FreeBrushMode.X: return brushX()
+      case FreeBrushMode.Y: return brushY()
+      default: return brush()
+    }
+  }
+
+  private _onBrushStart (event: D3BrushEvent<unknown>): void {
+    const { config } = this
+    const userDriven = !!event?.sourceEvent
+    this._onBrush(event)
+    if (config.autoHide && userDriven) this.brush.classed(s.hide, false)
+    if (!this._firstRender) config.onBrushStart?.(config.selection, event, userDriven)
+  }
+
+  private _onBrushMove (event: D3BrushEvent<unknown>): void {
+    const { config } = this
+
+    this._onBrush(event)
+    if (!this._firstRender) config.onBrushMove?.(config.selection, event, !!event?.sourceEvent)
+  }
+
+  private _onBrushEnd (event: D3BrushEvent<unknown>): void {
+    const { config } = this
+
+    this._onBrush(event)
+    if (config.autoHide) this.brush.classed(s.hide, true)
+    if (!this._firstRender) config.onBrushEnd?.(config.selection, event, !!event?.sourceEvent)
+  }
+}

package/{components/free-brush/style.js → src/components/free-brush/style.ts}

@@ -1,9 +1,10 @@
-import { css, injectGlobal } from '@emotion/css';
+import { css, injectGlobal } from '@emotion/css'
 
-const root = css `
+export const root = css`
   label: free-brush-component;
-`;
-const variables = injectGlobal `
+`
+
+export const variables = injectGlobal`
   :root {
     --vis-free-brush-selection-fill-color: #0b1640;
     --vis-free-brush-selection-fill-opacity: 0.4;
@@ -21,8 +22,9 @@ const variables = injectGlobal `
     --vis-free-brush-selection-stroke-color: var(--vis-dark-free-brush-selection-stroke-color);
     --vis-free-brush-handle-fill-color: var(--vis-dark-free-brush-selection-fill-color);
   }
-`;
-const brush = css `
+`
+
+export const brush = css`
   label: brush;
   fill: none;
   stroke: none;
@@ -39,12 +41,10 @@ const brush = css `
     fill: var(--vis-free-brush-handle-fill-color);
     stroke: var(--vis-free-brush-handle-stroke-color);
   }
-`;
-const hide = css `
+`
+
+export const hide = css`
   .selection, .handle {
     display: none;
   }
-`;
-
-export { brush, hide, root, variables };
-//# sourceMappingURL=style.js.map
+`

package/src/components/free-brush/types.ts

@@ -0,0 +1,8 @@
+export type FreeBrushSelection = [number, number] | [[number, number], [number, number]];
+export type FreeBrushSelectionInPixels = FreeBrushSelection
+
+export enum FreeBrushMode {
+  X = 'x',
+  Y = 'y',
+  XY = 'xy',
+}

package/src/components/graph/config.ts

@@ -0,0 +1,280 @@
+/* eslint-disable dot-notation */
+// Config
+import { ComponentConfigInterface, ComponentConfig } from 'core/component/config'
+
+// Types
+import { TrimMode } from 'types/text'
+import { GraphInputLink, GraphInputNode } from 'types/graph'
+import { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'
+
+// Local Types
+import {
+  GraphLayoutType,
+  GraphCircleLabel,
+  GraphLinkStyle,
+  GraphLinkArrowStyle,
+  GraphPanelConfig,
+  GraphForceLayoutSettings,
+  GraphElkLayoutSettings,
+  GraphNodeShape,
+} from './types'
+
+export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {
+  // Zoom and drag
+  /** Zoom level constraints. Default: [0.35, 1.25] */
+  zoomScaleExtent?: [number, number];
+  /** Disable zooming. Default: `false` */
+  disableZoom?: boolean;
+  /** Disable node dragging. Default: `false` */
+  disableDrag?: boolean;
+  /** Interval to re-render the graph when zooming. Default: `100` */
+  zoomThrottledUpdateNodeThreshold?: number;
+  /** Zoom event callback. Default: `undefined` */
+  onZoom?: (zoomScale: number, zoomScaleExtent: number) => void;
+
+  // Layout general settings
+  /** Type of the graph layout. Default: `GraphLayoutType.Force` */
+  layoutType?: GraphLayoutType | string;
+  /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */
+  layoutAutofit?: boolean;
+  /** Tolerance constant defining whether the graph should be fitted to container
+   * (on data or config update, or container resize) after a zoom / pan interaction or not.
+   * `0` — Stop fitting after any pan or zoom
+   * `Number.POSITIVE_INFINITY` — Always fit
+   * Default: `8.0` */
+  layoutAutofitTolerance?: number;
+  /** Place non-connected nodes at the bottom of the graph. Default: `false` */
+  layoutNonConnectedAside?: boolean;
+
+  // Settings for Parallel and Concentric layouts
+  /** Node group accessor function.
+   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.
+   * Default: `node => node.group` */
+  layoutNodeGroup?: StringAccessor<N>;
+  /** Order of the layout groups.
+   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.
+   * Default: `[]` */
+  layoutGroupOrder?: string[];
+
+  // Setting for Parallel layouts only
+  /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is
+   * `GraphLayoutType.ParallelHorizontal`).
+   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
+   * Default: `6` */
+  layoutParallelNodesPerColumn?: number;
+  /** Node sub-group accessor function.
+   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
+   * Default: `node => node.subgroup` */
+  layoutParallelNodeSubGroup?: StringAccessor<N>;
+  /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.
+   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
+   * Default: `1` */
+  layoutParallelSubGroupsPerRow?: number;
+  /** Spacing between groups.
+   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
+   * Default: `undefined` */
+  layoutParallelGroupSpacing?: number;
+  /** Set a group by name to have priority in sorting the graph links.
+   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
+   * Default: `undefined` */
+  layoutParallelSortConnectionsByGroup?: string;
+
+  // Force layout
+  /** Force Layout settings, see the `d3-force` package for more details */
+  forceLayoutSettings?: GraphForceLayoutSettings;
+
+  // Dagre layout
+  /** Darge Layout settings, see the `dagrejs` package
+   * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout
+  */
+  dagreLayoutSettings?: {
+    /** Direction for rank node. `TB`, `BT`, `LR`, or `RL`. Default: `BT` */
+    rankdir: string;
+    /** Type of algorithm to assigns a rank to each node in the input graph.
+     * `network-simplex`, `tight-tree` or `longest-path`.
+     * Default: `longest-path` */
+    ranker: string;
+    /** Other configurable Dagre settings. https://github.com/dagrejs/dagre/wiki */
+    [key: string]: any;
+  };
+
+  // ELK layout
+  /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.
+   * If you want to specify custom layout option for each node group, you can provide an accessor function that
+   * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing
+   * layout options. Default: `undefined`
+  */
+  layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;
+  /** Array of accessor functions to define nested node groups for the ELK Layered layout.
+   * E.g.: `[n => n.group, n => n.subGroup]`.
+   * Default: `undefined` */
+  layoutElkNodeGroups?: StringAccessor<N>[];
+
+  // Links
+  /** Link width accessor function ot constant value. Default: `1` */
+  linkWidth?: NumericAccessor<L>;
+  /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */
+  linkStyle?: GenericAccessor<GraphLinkStyle, L>;
+  /** Link band width accessor function or constant value. Default: `0` */
+  linkBandWidth?: NumericAccessor<L>;
+  /** Link arrow accessor function or constant value. Default: `undefined` */
+  linkArrow?: GenericAccessor<GraphLinkArrowStyle, L> | undefined;
+  /** Link stroke color accessor function or constant value. Default: `undefined` */
+  linkStroke?: ColorAccessor<L>;
+  /** Link disabled state accessor function or constant value. Default: `false` */
+  linkDisabled?: BooleanAccessor<L>;
+  /** Link flow animation accessor function or constant value. Default: `false` */
+  linkFlow?: BooleanAccessor<L>;
+  /** Animation duration of the flow (traffic) circles. Default: `20000` */
+  linkFlowAnimDuration?: number;
+  /** Size of the moving particles that represent traffic flow. Default: `2` */
+  linkFlowParticleSize?: number;
+  /** Link label accessor function or constant value. Default: `undefined` */
+  linkLabel?: GenericAccessor<GraphCircleLabel, L> | undefined;
+  /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */
+  linkLabelShiftFromCenter?: BooleanAccessor<L>;
+  /** Spacing between neighboring links. Default: `8` */
+  linkNeighborSpacing?: number;
+  /** Set selected link by its unique id. Default: `undefined` */
+  selectedLinkId?: number | string;
+
+  // Nodes
+  /** Node size accessor function or constant value. Default: `30` */
+  nodeSize?: NumericAccessor<N>;
+  /** Node stroke width accessor function or constant value. Default: `3` */
+  nodeStrokeWidth?: NumericAccessor<N>;
+  /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */
+  nodeShape?: GenericAccessor<GraphNodeShape | string, N>;
+  /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */
+  nodeGaugeValue?: NumericAccessor<N>;
+  /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */
+  nodeGaugeFill?: ColorAccessor<N>;
+  /** Animation duration of the node gauge outline. Default: `1500` */
+  nodeGaugeAnimDuration?: number;
+  /** Node central icon accessor function or constant value. Default: `node => node.icon` */
+  nodeIcon?: StringAccessor<N>;
+  /** Node central icon size accessor function or constant value. Default: `undefined` */
+  nodeIconSize?: NumericAccessor<N>;
+  /** Node label accessor function or constant value. Default: `node => node.label` */
+  nodeLabel?: StringAccessor<N>;
+  /** Defines whether to trim the node labels or not. Default: `true` */
+  nodeLabelTrim?: BooleanAccessor<N>;
+  /** Node label trimming mode. Default: `TrimMode.Middle` */
+  nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;
+  /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */
+  nodeLabelTrimLength?: NumericAccessor<N>;
+  /** Node sub-label accessor function or constant value: Default: `''` */
+  nodeSubLabel?: StringAccessor<N>;
+  /** Defines whether to trim the node sub-labels or not. Default: `true` */
+  nodeSubLabelTrim?: BooleanAccessor<N>;
+  /** Node sub-label trimming mode. Default: `TrimMode.Middle` */
+  nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;
+  /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */
+  nodeSubLabelTrimLength?: NumericAccessor<N>;
+  /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */
+  nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;
+  /** Node bottom icon accessor function. Default: `undefined` */
+  nodeBottomIcon?: StringAccessor<N>;
+  /** Node disabled state accessor function or constant value. Default: `false` */
+  nodeDisabled?: BooleanAccessor<N>;
+  /** Node fill color accessor function or constant value. Default: `node => node.fill` */
+  nodeFill?: ColorAccessor<N>;
+  /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */
+  nodeStroke?: ColorAccessor<N>;
+  /** Sorting function to determine node placement. Default: `undefined` */
+  nodeSort?: ((a: N, b: N) => number);
+  /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */
+  nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;
+  /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */
+  nodeEnterScale?: NumericAccessor<N> | undefined;
+  /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */
+  nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;
+  /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */
+  nodeExitScale?: NumericAccessor<N> | undefined;
+  /** Set selected node by unique id. Default: `undefined` */
+  selectedNodeId?: number | string;
+
+  /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */
+  panels?: GraphPanelConfig[] | undefined;
+}
+
+export class GraphConfig<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfig implements GraphConfigInterface<N, L> {
+  duration = 1000
+  zoomScaleExtent: [number, number] = [0.35, 1.25]
+  disableZoom = false
+  disableDrag = false
+  zoomThrottledUpdateNodeThreshold = 100
+  onZoom = undefined
+  layoutType = GraphLayoutType.Force
+  layoutAutofit = true
+  layoutAutofitTolerance = 8.0
+  layoutNonConnectedAside = false
+
+  layoutGroupOrder = []
+  layoutParallelSubGroupsPerRow = 1
+  layoutParallelNodesPerColumn = 6
+  layoutParallelGroupSpacing = undefined
+  layoutParallelSortConnectionsByGroup = undefined
+  layoutNodeGroup = (n: N): string => n['group']
+  layoutParallelNodeSubGroup = (n: N): string => n['subgroup']
+
+  forceLayoutSettings = {
+    linkDistance: 60,
+    linkStrength: 0.45,
+    charge: -500,
+    forceXStrength: 0.15,
+    forceYStrength: 0.25,
+  }
+
+  dagreLayoutSettings = {
+    rankdir: 'BT',
+    ranker: 'longest-path',
+  }
+
+  layoutElkSettings: GenericAccessor<GraphElkLayoutSettings, string> | undefined = undefined
+  layoutElkNodeGroups: StringAccessor<N>[] | undefined = undefined
+
+  linkFlowAnimDuration = 20000
+  linkFlowParticleSize = 2
+  linkWidth = 1
+  linkStyle = GraphLinkStyle.Solid
+  linkBandWidth = 0
+  linkArrow = undefined
+  linkStroke = undefined
+  linkFlow = false
+  linkLabel = undefined
+  linkLabelShiftFromCenter = true
+  linkNeighborSpacing = 8
+  linkDisabled = false
+  selectedLinkId = undefined
+  nodeGaugeAnimDuration = 1500
+
+  nodeSize = 30
+  nodeStrokeWidth = 3
+  nodeShape = GraphNodeShape.Circle
+  nodeGaugeValue = 0
+  nodeIcon = (n: N): string => n['icon']
+  nodeIconSize = undefined
+  nodeLabel = (n: N): string => n['label']
+  nodeLabelTrim = true
+  nodeLabelTrimLength = 15
+  nodeLabelTrimMode = TrimMode.Middle
+  nodeSubLabel = ''
+  nodeSubLabelTrim = true
+  nodeSubLabelTrimLength = 15
+  nodeSubLabelTrimMode = TrimMode.Middle
+  nodeSideLabels = undefined
+  nodeBottomIcon = undefined
+  nodeDisabled = false
+  nodeFill = (n: N): string => n['fill']
+  nodeGaugeFill = undefined
+  nodeStroke = (n: N): string => n['stroke']
+  nodeEnterPosition = undefined
+  nodeEnterScale = 0.75
+  nodeExitPosition = undefined
+  nodeExitScale = 0.75
+  nodeSort = undefined
+
+  selectedNodeId = undefined
+  panels: GraphPanelConfig[] | undefined = undefined
+}