@unovis/ts 1.4.0-beta.3 → 1.4.0-version.12

package/components/chord-diagram/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/chord-diagram/index.ts"],"sourcesContent":["import { max } from 'd3-array'\nimport { partition } from 'd3-hierarchy'\nimport { Selection } from 'd3-selection'\nimport { scalePow, ScalePower } from 'd3-scale'\nimport { arc } from 'd3-shape'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { GraphData, GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { getNumber, isNumber, getString, getValue } from 'utils/data'\nimport { estimateStringPixelLength } from 'utils/text'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\n\n// Types\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { ChordInputNode, ChordInputLink, ChordDiagramData, ChordNode, ChordRibbon, ChordLabelAlignment, ChordLeafNode } from './types'\n\n// Config\nimport { ChordDiagramDefaultConfig, ChordDiagramConfigInterface } from './config'\n\n// Modules\nimport { createNode, updateNode, removeNode } from './modules/node'\nimport { createLabel, updateLabel, removeLabel, LABEL_PADDING } from './modules/label'\nimport { getHierarchyNodes, getRibbons, positionChildren } from './modules/layout'\nimport { createLink, updateLink, removeLink } from './modules/link'\n\n// Styles\nimport * as s from './style'\n\nexport class ChordDiagram<\n  N extends ChordInputNode,\n  L extends ChordInputLink,\n> extends ComponentCore<\n  ChordDiagramData<N, L>,\n  ChordDiagramConfigInterface<N, L>\n  > {\n  static selectors = s\n  protected _defaultConfig = ChordDiagramDefaultConfig as ChordDiagramConfigInterface<N, L>\n  public config: ChordDiagramConfigInterface<N, L> = this._defaultConfig\n  datamodel: GraphDataModel<N, L> = new GraphDataModel()\n\n  background: Selection<SVGRectElement, unknown, SVGGElement, unknown>\n  nodeGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  linkGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  labelGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n\n  arcGen = arc<ChordNode<N>>()\n  radiusScale: ScalePower<number, number> = scalePow()\n\n  events = {\n    [ChordDiagram.selectors.node]: {\n      mouseover: this._onNodeMouseOver.bind(this),\n      mouseout: this._onNodeMouseOut.bind(this),\n    },\n    [ChordDiagram.selectors.link]: {\n      mouseover: this._onLinkMouseOver.bind(this),\n      mouseout: this._onLinkMouseOut.bind(this),\n    },\n    [ChordDiagram.selectors.label]: {\n      mouseover: this._onNodeMouseOver.bind(this),\n      mouseout: this._onNodeMouseOut.bind(this),\n    },\n  }\n\n  private _nodes: ChordNode<N>[] = []\n  private _links: ChordRibbon<N>[] = []\n  private _rootNode: ChordNode<N>\n\n  private get _forceHighlight (): boolean {\n    return this.config.highlightedNodeId !== undefined || this.config.highlightedLinkIds?.length > 0\n  }\n\n  constructor (config?: ChordDiagramConfigInterface<N, L>) {\n    super()\n    if (config) this.setConfig(config)\n\n    this.background = this.g.append('rect').attr('class', s.background)\n    this.linkGroup = this.g.append('g').attr('class', s.links)\n    this.nodeGroup = this.g.append('g').attr('class', s.nodes)\n    this.labelGroup = this.g.append('g').attr('class', s.labels)\n  }\n\n  get bleed (): Spacing {\n    const { config } = this\n    const padding = LABEL_PADDING * 2\n    let top = 0; let bottom = 0; let right = 0; let left = 0\n    this._nodes.forEach(n => {\n      const nodeLabelAlignment = getValue(n.data, config.nodeLabelAlignment)\n      if (n.height === 0 && nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {\n        const label = getString(n.data as N, config.nodeLabel) ?? ''\n        const fontSize = getCSSVariableValueInPixels('var(--vis-chord-diagram-label-text-font-size)', this.element)\n        const labelWidth = estimateStringPixelLength(label, fontSize)\n\n        const [x, y] = this.arcGen.centroid(n)\n\n        if (x < 0) left = Math.max(left, labelWidth)\n        else right = Math.max(right, labelWidth)\n\n        if (y < 0) top = Math.max(top, labelWidth)\n        else bottom = Math.max(bottom, labelWidth)\n      }\n    })\n    left += padding\n    right += padding\n    bottom += padding\n    top += padding\n    return { top, bottom, left, right }\n  }\n\n  setSize (width: number, height: number, containerWidth: number, containerHeight: number): void {\n    super.setSize(width, height, containerWidth, containerHeight)\n\n    // Setting radius for initial bleed calculation. This ensures the correct radius is set when render is called\n    this.radiusScale\n      .exponent(this.config.radiusScaleExponent)\n      .range([0, Math.min(width, height) / 2])\n  }\n\n  setData (data: GraphData<N, L>): void {\n    super.setData(data)\n    this._layoutData()\n  }\n\n  _layoutData (): void {\n    const { nodes, links } = this.datamodel\n    const { padAngle, linkValue, nodeLevels } = this.config\n    nodes.forEach(n => { delete n._state.value })\n    links.forEach(l => {\n      delete l._state.points\n      l._state.value = getNumber(l, linkValue)\n      l.source._state.value = (l.source._state.value || 0) + getNumber(l, linkValue)\n      l.target._state.value = (l.target._state.value || 0) + getNumber(l, linkValue)\n    })\n\n    const root = getHierarchyNodes(nodes, d => d._state?.value, nodeLevels)\n\n    const partitionData = partition().size([this.config.angleRange[1], 1])(root) as ChordNode<N>\n    partitionData.each((n, i) => {\n      positionChildren(n, padAngle)\n      n.uid = `${this.uid.substr(0, 4)}-${i}`\n      n.x0 = Number.isNaN(n.x0) ? 0 : n.x0\n      n.x1 = Number.isNaN(n.x1) ? 0 : n.x1\n      n._state = {}\n    })\n\n    const partitionDataWithRoot = partitionData.descendants()\n    this._rootNode = partitionDataWithRoot.find(d => d.depth === 0)\n    this._nodes = partitionDataWithRoot.filter(d => d.depth !== 0) // Filter out the root node\n    this._links = getRibbons<N>(partitionData, links, padAngle)\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config, bleed } = this\n\n    this._layoutData()\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n    const size = Math.min(this._width, this._height)\n    const radius = size / 2 - max([bleed.top, bleed.bottom, bleed.left, bleed.right])\n\n    const numLevels = 1 + config.nodeLevels?.length\n    const maxSpace = config.nodeWidth * numLevels\n    const nodeWidth = radius > maxSpace ? config.nodeWidth : Math.max(radius / numLevels, 0)\n\n    this.radiusScale.range([0, Math.max(radius, 0)])\n\n    this.arcGen\n      .startAngle(d => d.x0 + config.padAngle / 2 - (d.value ? 0 : Math.PI / 360))\n      .endAngle(d => d.x1 - config.padAngle / 2 + (d.value ? 0 : Math.PI / 360))\n      .cornerRadius(d => getNumber(d.data, config.cornerRadius))\n      .innerRadius(d => Math.max(this.radiusScale(d.y1) - nodeWidth, 0))\n      .outerRadius(d => this.radiusScale(d.y1))\n\n    this.g.classed(s.transparent, this._forceHighlight)\n    this.background\n      .attr('width', this._width)\n      .attr('height', this._height)\n      .style('opacity', 0)\n\n    // Center the view\n    this.nodeGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n    this.labelGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n    this.linkGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    // Links\n    const linksSelection = this.linkGroup\n      .selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)\n      .data(this._links, d => String(d.data._id))\n\n    const linksEnter = linksSelection.enter().append('path')\n      .attr('class', s.link)\n      .call(createLink, this.radiusScale)\n\n    const linksMerged = linksSelection\n      .merge(linksEnter)\n      .classed(s.highlightedLink, l => {\n        const linkId = l.data.id ?? l.data._indexGlobal\n        return config.highlightedLinkIds?.includes(linkId)\n      })\n    linksMerged.call(updateLink, config, this.radiusScale, duration)\n\n    linksSelection.exit()\n      .call(removeLink, duration)\n\n    // Nodes\n    const nodesSelection = this.nodeGroup\n      .selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)\n      .data(this._nodes, d => String(d.uid))\n\n    const nodesEnter = nodesSelection.enter().append('path')\n      .attr('class', s.node)\n      .call(createNode, config)\n\n    const nodesMerged = nodesSelection\n      .merge(nodesEnter)\n      .classed(s.highlightedNode, d => config.highlightedNodeId === d.data._id)\n    nodesMerged.call(updateNode, config, this.arcGen, duration, this.bleed)\n\n    nodesSelection.exit()\n      .call(removeNode, duration)\n\n    // Labels\n    const labelWidth = size - radius\n    const labels = this.labelGroup\n      .selectAll<SVGGElement, ChordNode<N>>(`.${s.label}`)\n      .data(this._nodes, d => String(d.uid))\n\n    const labelEnter = labels.enter().append('g')\n      .attr('class', s.label)\n      .call(createLabel, config, this.radiusScale)\n\n    const labelsMerged = labels.merge(labelEnter)\n    labelsMerged.call(updateLabel, config, labelWidth, this.radiusScale, duration)\n\n    labels.exit()\n      .attr('class', s.labelExit)\n      .call(removeLabel, duration)\n  }\n\n  private _onNodeMouseOver (d: ChordNode<N>): void {\n    let ribbons: ChordRibbon<N>[]\n    if (d.children) {\n      const leaves = d.leaves() as ChordLeafNode<N>[]\n      ribbons = this._links.filter(l =>\n        leaves.find(leaf => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)\n      )\n    } else {\n      const leaf = d as ChordLeafNode<N>\n      ribbons = this._links.filter(l => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)\n    }\n\n    // Nodes without links should still be highlighted\n    if (!ribbons.length) d._state.hovered = true\n    this._highlightOnHover(ribbons)\n  }\n\n  private _onNodeMouseOut (): void {\n    this._highlightOnHover()\n  }\n\n  private _onLinkMouseOver (d: ChordRibbon<N>): void {\n    this._highlightOnHover([d])\n  }\n\n  private _onLinkMouseOut (): void {\n    this._highlightOnHover()\n  }\n\n  private _highlightOnHover (links?: ChordRibbon<N>[]): void {\n    if (this._forceHighlight) return\n    if (links) {\n      links.forEach(l => {\n        l._state.hovered = true\n        const sourcePath = (l.source as ChordNode<N>).path(this._rootNode)\n        const targetPath = (l.target as ChordNode<N>).path(this._rootNode)\n        sourcePath.forEach(n => { if (n.depth) n._state.hovered = true })\n        targetPath.forEach(n => { if (n.depth) n._state.hovered = true })\n      })\n    } else {\n      this._nodes.forEach(n => { delete n._state.hovered })\n      this._links.forEach(l => { delete l._state.hovered })\n    }\n\n    this.nodeGroup.selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)\n      .classed(s.highlightedNode, d => d._state.hovered)\n    this.linkGroup.selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)\n      .classed(s.highlightedLink, d => d._state.hovered)\n\n    this.g.classed(s.transparent, !!links)\n  }\n}\n"],"names":["s.background","s.links","s.nodes","s.labels","s.transparent","s.link","s.highlightedLink","s.node","s.highlightedNode","s.label","s.labelExit","s"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/chord-diagram/index.ts"],"sourcesContent":["import { max } from 'd3-array'\nimport { partition } from 'd3-hierarchy'\nimport { Selection } from 'd3-selection'\nimport { scalePow, ScalePower } from 'd3-scale'\nimport { arc } from 'd3-shape'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { GraphData, GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { getNumber, isNumber, getString, getValue } from 'utils/data'\nimport { estimateStringPixelLength } from 'utils/text'\n\n// Types\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { ChordInputNode, ChordInputLink, ChordDiagramData, ChordNode, ChordRibbon, ChordLabelAlignment, ChordLeafNode } from './types'\n\n// Config\nimport { ChordDiagramDefaultConfig, ChordDiagramConfigInterface } from './config'\n\n// Modules\nimport { createNode, updateNode, removeNode } from './modules/node'\nimport { createLabel, updateLabel, removeLabel, LABEL_PADDING } from './modules/label'\nimport { getHierarchyNodes, getRibbons, positionChildren } from './modules/layout'\nimport { createLink, updateLink, removeLink } from './modules/link'\n\n// Styles\nimport * as s from './style'\n\nexport class ChordDiagram<\n  N extends ChordInputNode,\n  L extends ChordInputLink,\n> extends ComponentCore<\n  ChordDiagramData<N, L>,\n  ChordDiagramConfigInterface<N, L>\n  > {\n  static selectors = s\n  protected _defaultConfig = ChordDiagramDefaultConfig as ChordDiagramConfigInterface<N, L>\n  public config: ChordDiagramConfigInterface<N, L> = this._defaultConfig\n  datamodel: GraphDataModel<N, L> = new GraphDataModel()\n\n  background: Selection<SVGRectElement, unknown, SVGGElement, unknown>\n  nodeGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  linkGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  labelGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n\n  arcGen = arc<ChordNode<N>>()\n  radiusScale: ScalePower<number, number> = scalePow()\n\n  private _nodes: ChordNode<N>[] = []\n  private _links: ChordRibbon<N>[] = []\n  private _rootNode: ChordNode<N>\n\n  events = {\n    [ChordDiagram.selectors.node]: {\n      mouseover: this._onNodeMouseOver.bind(this),\n      mouseout: this._onNodeMouseOut.bind(this),\n    },\n    [ChordDiagram.selectors.link]: {\n      mouseover: this._onLinkMouseOver.bind(this),\n      mouseout: this._onLinkMouseOut.bind(this),\n    },\n    [ChordDiagram.selectors.label]: {\n      mouseover: this._onNodeMouseOver.bind(this),\n      mouseout: this._onNodeMouseOut.bind(this),\n    },\n  }\n\n  private get _forceHighlight (): boolean {\n    return this.config.highlightedNodeId !== undefined || this.config.highlightedLinkIds?.length > 0\n  }\n\n  constructor (config?: ChordDiagramConfigInterface<N, L>) {\n    super()\n    if (config) this.setConfig(config)\n    this.background = this.g.append('rect').attr('class', s.background)\n    this.linkGroup = this.g.append('g').attr('class', s.links)\n    this.nodeGroup = this.g.append('g').attr('class', s.nodes)\n    this.labelGroup = this.g.append('g').attr('class', s.labels)\n  }\n\n  get bleed (): Spacing {\n    const { config } = this\n    const padding = 4 + LABEL_PADDING * 2\n    let top = 0; let bottom = 0; let right = 0; let left = 0\n    this._nodes.forEach(n => {\n      const nodeLabelAlignment = getValue(n.data, config.nodeLabelAlignment)\n      if (n.height === 0 && nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {\n        const labelWidth = estimateStringPixelLength(getString(n.data as N, config.nodeLabel) ?? '', 16)\n        const [x, y] = this.arcGen.centroid(n)\n\n        if (x < 0) left = Math.max(left, labelWidth)\n        else right = Math.max(right, labelWidth)\n\n        if (y < 0) top = Math.max(top, labelWidth)\n        else bottom = Math.max(bottom, labelWidth)\n      }\n    })\n    left += padding\n    right += padding\n    bottom += padding\n    top += padding\n    return { top, bottom, left, right }\n  }\n\n  setSize (width: number, height: number, containerWidth: number, containerHeight: number): void {\n    super.setSize(width, height, containerWidth, containerHeight)\n\n    // Setting radius for initial bleed calculation. This ensures the correct radius is set when render is called\n    this.radiusScale\n      .exponent(this.config.radiusScaleExponent)\n      .range([0, Math.min(width, height) / 2])\n  }\n\n  setData (data: GraphData<N, L>): void {\n    super.setData(data)\n    this._layoutData()\n  }\n\n  _layoutData (): void {\n    const { nodes, links } = this.datamodel\n    const { padAngle, linkValue, nodeLevels } = this.config\n    nodes.forEach(n => { delete n._state.value })\n    links.forEach(l => {\n      delete l._state.points\n      l._state.value = getNumber(l, linkValue)\n      l.source._state.value = (l.source._state.value || 0) + getNumber(l, linkValue)\n      l.target._state.value = (l.target._state.value || 0) + getNumber(l, linkValue)\n    })\n\n    const root = getHierarchyNodes(nodes, d => d._state?.value, nodeLevels)\n\n    const partitionData = partition().size([this.config.angleRange[1], 1])(root) as ChordNode<N>\n    partitionData.each((n, i) => {\n      positionChildren(n, padAngle)\n      n.uid = `${this.uid.substr(0, 4)}-${i}`\n      n.x0 = Number.isNaN(n.x0) ? 0 : n.x0\n      n.x1 = Number.isNaN(n.x1) ? 0 : n.x1\n      n._state = {}\n    })\n\n    const partitionDataWithRoot = partitionData.descendants()\n    this._rootNode = partitionDataWithRoot.find(d => d.depth === 0)\n    this._nodes = partitionDataWithRoot.filter(d => d.depth !== 0) // Filter out the root node\n    this._links = getRibbons<N>(partitionData, links, padAngle)\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config, bleed } = this\n\n    this._layoutData()\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n    const size = Math.min(this._width, this._height)\n    const radius = size / 2 - max([bleed.top, bleed.bottom, bleed.left, bleed.right])\n\n    this.radiusScale.range([0, radius - config.nodeWidth])\n\n    this.arcGen\n      .startAngle(d => d.x0 + config.padAngle / 2 - (d.value ? 0 : Math.PI / 360))\n      .endAngle(d => d.x1 - config.padAngle / 2 + (d.value ? 0 : Math.PI / 360))\n      .cornerRadius(d => getNumber(d.data, config.cornerRadius))\n      .innerRadius(d => this.radiusScale(d.y1) - getNumber(d, config.nodeWidth))\n      .outerRadius(d => this.radiusScale(d.y1))\n\n    this.g.classed(s.transparent, this._forceHighlight)\n    this.background\n      .attr('width', this._width)\n      .attr('height', this._height)\n      .style('opacity', 0)\n\n    // Center the view\n    this.nodeGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n    this.labelGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n    this.linkGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    // Links\n    const linksSelection = this.linkGroup\n      .selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)\n      .data(this._links, d => String(d.data._id))\n      .classed(s.highlightedLink, l => {\n        const linkId = l.data.id ?? l.data._indexGlobal\n        return config.highlightedLinkIds?.includes(linkId)\n      })\n\n    const linksEnter = linksSelection.enter().append('path')\n      .attr('class', s.link)\n      .call(createLink, this.radiusScale)\n\n    const linksMerged = linksSelection.merge(linksEnter)\n    linksMerged.call(updateLink, config, this.radiusScale, duration)\n\n    linksSelection.exit()\n      .call(removeLink, duration)\n\n    // Nodes\n    const nodesSelection = this.nodeGroup\n      .selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)\n      .data(this._nodes, d => String(d.uid))\n      .classed(s.highlightedNode, d => config.highlightedNodeId === d.data._id)\n\n    const nodesEnter = nodesSelection.enter().append('path')\n      .attr('class', s.node)\n      .call(createNode, config)\n\n    const nodesMerged = nodesSelection.merge(nodesEnter)\n    nodesMerged.call(updateNode, config, this.arcGen, duration, this.bleed)\n\n    nodesSelection.exit()\n      .call(removeNode, duration)\n\n    // Labels\n    const labelWidth = size - radius - config.nodeWidth\n    const labels = this.labelGroup\n      .selectAll<SVGGElement, ChordNode<N>>(`.${s.label}`)\n      .data(this._nodes, d => String(d.uid))\n\n    const labelEnter = labels.enter().append('g')\n      .attr('class', s.label)\n      .call(createLabel, config, this.radiusScale)\n\n    const labelsMerged = labels.merge(labelEnter)\n    labelsMerged.call(updateLabel, config, labelWidth, this.radiusScale, duration)\n\n    labels.exit()\n      .attr('class', s.labelExit)\n      .call(removeLabel, duration)\n  }\n\n  private _onNodeMouseOver (d: ChordNode<N>): void {\n    let ribbons: ChordRibbon<N>[]\n    if (d.children) {\n      const leaves = d.leaves() as ChordLeafNode<N>[]\n      ribbons = this._links.filter(l =>\n        leaves.find(leaf => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)\n      )\n    } else {\n      const leaf = d as ChordLeafNode<N>\n      ribbons = this._links.filter(l => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)\n    }\n\n    // Nodes without links should still be highlighted\n    if (!ribbons.length) d._state.hovered = true\n    this._highlightOnHover(ribbons)\n  }\n\n  private _onNodeMouseOut (): void {\n    this._highlightOnHover()\n  }\n\n  private _onLinkMouseOver (d: ChordRibbon<N>): void {\n    this._highlightOnHover([d])\n  }\n\n  private _onLinkMouseOut (): void {\n    this._highlightOnHover()\n  }\n\n  private _highlightOnHover (links?: ChordRibbon<N>[]): void {\n    if (this._forceHighlight) return\n    if (links) {\n      links.forEach(l => {\n        l._state.hovered = true\n        const sourcePath = (l.source as ChordNode<N>).path(this._rootNode)\n        const targetPath = (l.target as ChordNode<N>).path(this._rootNode)\n        sourcePath.forEach(n => { if (n.depth) n._state.hovered = true })\n        targetPath.forEach(n => { if (n.depth) n._state.hovered = true })\n      })\n    } else {\n      this._nodes.forEach(n => { delete n._state.hovered })\n      this._links.forEach(l => { delete l._state.hovered })\n    }\n\n    this.nodeGroup.selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)\n      .classed(s.highlightedNode, d => d._state.hovered)\n    this.linkGroup.selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)\n      .classed(s.highlightedLink, d => d._state.hovered)\n\n    this.g.classed(s.transparent, !!links)\n  }\n}\n"],"names":["s.background","s.links","s.nodes","s.labels","s.transparent","s.link","s.highlightedLink","s.node","s.highlightedNode","s.label","s.labelExit","s"],"mappings":"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"}

package/components/chord-diagram/modules/label.js

@@ -66,30 +66,33 @@ function updateLabel(selection, config, width, radiusScale, duration) {
         .attr('transform', d => getLabelTransform(d, config, radiusScale))
         .style('opacity', 1);
     const label = selection.select(`.${labelText}`);
-    label.selectAll('textPath').remove();
-    label.text(d => getString(d.data, nodeLabel))
+    label.select('textPath').remove();
+    label
+        .text(d => getString(d.data, nodeLabel))
         .style('fill', d => { var _a; return (_a = getColor(d.data, nodeLabelColor)) !== null && _a !== void 0 ? _a : getLabelFillColor(d, config); })
-        .style('text-anchor', d => getLabelTextAnchor(d, config))
-        .each((d, i, elements) => {
+        .style('text-anchor', d => getLabelTextAnchor(d, config));
+    label.each((d, i, elements) => {
         var _a;
         const nodeLabelAlignment = (_a = getValue(d.data, config.nodeLabelAlignment)) !== null && _a !== void 0 ? _a : ChordLabelAlignment.Along;
         const radianArcLength = d.x1 - d.x0 - getNumber(d.data, config.padAngle) * 2;
         const radius = radiusScale(d.y1) - getNumber(d, config.nodeWidth) / 2;
         const arcLength = radius * radianArcLength;
-        const maxWidth = (nodeLabelAlignment === ChordLabelAlignment.Along ? arcLength : width - LABEL_PADDING * 2);
-        const textElement = select(elements[i])
-            .call(trimSVGText, maxWidth)
+        const maxWidth = (nodeLabelAlignment === ChordLabelAlignment.Along ? arcLength : width) - LABEL_PADDING * 2;
+        const textElementSelection = select(elements[i]);
+        trimSVGText(textElementSelection, maxWidth);
+        textElementSelection
             .attr('dx', nodeLabelAlignment === ChordLabelAlignment.Along ? LABEL_PADDING : null)
             .attr('dy', nodeLabelAlignment === ChordLabelAlignment.Along ? getNumber(d.data, nodeWidth) / 2 : null);
-        const textWidth = textElement.node().getComputedTextLength();
-        const labelText = textElement.text();
         if (nodeLabelAlignment === ChordLabelAlignment.Along) {
-            textElement.text('');
-            if (textWidth <= maxWidth) {
-                textElement.append('textPath')
-                    .attr('href', `#${d.uid}`)
-                    .text(labelText);
-            }
+            const textElement = select(elements[i]);
+            const textWidth = textElement.node().getBoundingClientRect().width;
+            const labelText = textElement.text();
+            select(elements[i])
+                .text('')
+                .style('display', textWidth > maxWidth && 'none');
+            select(elements[i]).append('textPath')
+                .attr('href', `#${d.uid}`)
+                .text(labelText);
         }
     });
     smartTransition(label, duration)

package/components/chord-diagram/modules/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sources":["../../../../src/components/chord-diagram/modules/label.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { ScaleContinuousNumeric } from 'd3-scale'\nimport { color } from 'd3-color'\n\n// Utils\nimport { trimSVGText } from 'utils/text'\nimport { smartTransition } from 'utils/d3'\nimport { getNumber, getString, getValue } from 'utils/data'\nimport { getColor, hexToBrightness } from 'utils/color'\n\n// Config\nimport { ChordDiagramConfigInterface } from '../config'\n\n// Local Types\nimport { ChordInputLink, ChordInputNode, ChordLabelAlignment, ChordNode } from '../types'\n\n// Styles\nimport * as s from '../style'\n\nexport const LABEL_PADDING = 3\n\nfunction getLabelFillColor<N extends ChordInputNode, L extends ChordInputLink> (\n  d: ChordNode<N>,\n  config: ChordDiagramConfigInterface<N, L>\n): string {\n  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n  switch (nodeLabelAlignment) {\n    case ChordLabelAlignment.Perpendicular: {\n      return getColor(d.data, config.nodeColor, d.height)\n    }\n    case ChordLabelAlignment.Along: {\n      const c = getColor(d.data, config.nodeColor, d.height)\n      const colorParsed = color(c)\n      const brightness = colorParsed ? hexToBrightness(colorParsed.hex()) : 0\n      return brightness > 0.65 ? 'var(--vis-chord-diagram-label-text-fill-color-dark)' : 'var(--vis-chord-diagram-label-text-fill-color-bright)'\n    }\n  }\n}\n\nfunction getLabelTextAnchor<N extends ChordInputNode, L extends ChordInputLink> (\n  d: ChordNode<N>,\n  config: ChordDiagramConfigInterface<N, L>\n): string | null {\n  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n  switch (nodeLabelAlignment) {\n    case ChordLabelAlignment.Perpendicular: {\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angleDegree = angleCenter * 180 / Math.PI\n      return angleDegree < 180 ? 'start' : 'end'\n    }\n    case ChordLabelAlignment.Along: {\n      return null\n    }\n  }\n}\n\nfunction getLabelTransform<N extends ChordInputNode, L extends ChordInputLink> (\n  d: ChordNode<N>,\n  config: ChordDiagramConfigInterface<N, L>,\n  radiusScale: ScaleContinuousNumeric<number, number>\n): string | null {\n  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n  switch (nodeLabelAlignment) {\n    case ChordLabelAlignment.Perpendicular: {\n      const r = radiusScale(d.y1) + LABEL_PADDING\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angle = angleCenter - Math.PI / 2\n      const x = r * Math.cos(angle)\n      const y = r * Math.sin(angle)\n      return `translate(${x}, ${y})`\n    }\n    case ChordLabelAlignment.Along:\n      return null\n  }\n}\n\nexport function createLabel<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGGElement, ChordNode<N>, SVGGElement, unknown>,\n  config: ChordDiagramConfigInterface<N, L>,\n  radiusScale: ScaleContinuousNumeric<number, number>\n): void {\n  selection.style('opacity', 0)\n    .attr('transform', d => getLabelTransform(d, config, radiusScale))\n\n  selection.append('text')\n    .attr('class', s.labelText)\n    .style('fill', d => getColor(d.data, config.nodeColor, d.height))\n}\n\nexport function updateLabel<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGGElement, ChordNode<N>, SVGGElement, unknown>,\n  config: ChordDiagramConfigInterface<N, L>,\n  width: number,\n  radiusScale: ScaleContinuousNumeric<number, number>,\n  duration: number\n): void {\n  const { nodeLabel, nodeLabelColor, nodeWidth } = config\n\n  smartTransition(selection, duration)\n    .attr('transform', d => getLabelTransform(d, config, radiusScale))\n    .style('opacity', 1)\n\n  const label: Selection<SVGTextElement, ChordNode<N>, SVGElement, unknown> = selection.select(`.${s.labelText}`)\n  label.selectAll('textPath').remove()\n\n  label.text(d => getString(d.data, nodeLabel))\n    .style('fill', d => getColor(d.data, nodeLabelColor) ?? getLabelFillColor(d, config))\n    .style('text-anchor', d => getLabelTextAnchor(d, config))\n    .each((d: ChordNode<N>, i: number, elements) => {\n      const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n      const radianArcLength = d.x1 - d.x0 - getNumber(d.data, config.padAngle) * 2\n      const radius = radiusScale(d.y1) - getNumber(d, config.nodeWidth) / 2\n      const arcLength = radius * radianArcLength\n      const maxWidth = (nodeLabelAlignment === ChordLabelAlignment.Along ? arcLength : width - LABEL_PADDING * 2)\n\n      const textElement = select(elements[i])\n        .call(trimSVGText, maxWidth)\n        .attr('dx', nodeLabelAlignment === ChordLabelAlignment.Along ? LABEL_PADDING : null)\n        .attr('dy', nodeLabelAlignment === ChordLabelAlignment.Along ? getNumber(d.data, nodeWidth) / 2 : null)\n\n      const textWidth = textElement.node().getComputedTextLength()\n      const labelText = textElement.text()\n      if (nodeLabelAlignment === ChordLabelAlignment.Along) {\n        textElement.text('')\n        if (textWidth <= maxWidth) {\n          textElement.append('textPath')\n            .attr('href', `#${d.uid}`)\n            .text(labelText)\n        }\n      }\n    })\n\n  smartTransition(label, duration)\n    .attr('transform', d => {\n      const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment)\n      if (nodeLabelAlignment !== ChordLabelAlignment.Perpendicular) return null\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angleDegree = angleCenter * 180 / Math.PI\n      return `rotate(${angleDegree < 180 ? angleDegree - 90 : angleDegree + 90})`\n    })\n}\n\nexport function removeLabel (\n  selection: Selection<SVGGElement, unknown, SVGGElement, unknown>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":["s.labelText"],"mappings":"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"}
+{"version":3,"file":"label.js","sources":["../../../../src/components/chord-diagram/modules/label.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { ScaleContinuousNumeric } from 'd3-scale'\nimport { color } from 'd3-color'\n\n// Utils\nimport { trimSVGText } from 'utils/text'\nimport { smartTransition } from 'utils/d3'\nimport { getNumber, getString, getValue } from 'utils/data'\nimport { getColor, hexToBrightness } from 'utils/color'\n\n// Config\nimport { ChordDiagramConfigInterface } from '../config'\n\n// Local Types\nimport { ChordInputLink, ChordInputNode, ChordLabelAlignment, ChordNode } from '../types'\n\n// Styles\nimport * as s from '../style'\n\nexport const LABEL_PADDING = 3\n\nfunction getLabelFillColor<N extends ChordInputNode, L extends ChordInputLink> (\n  d: ChordNode<N>,\n  config: ChordDiagramConfigInterface<N, L>\n): string {\n  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n  switch (nodeLabelAlignment) {\n    case ChordLabelAlignment.Perpendicular: {\n      return getColor(d.data, config.nodeColor, d.height)\n    }\n    case ChordLabelAlignment.Along: {\n      const c = getColor(d.data, config.nodeColor, d.height)\n      const colorParsed = color(c)\n      const brightness = colorParsed ? hexToBrightness(colorParsed.hex()) : 0\n      return brightness > 0.65 ? 'var(--vis-chord-diagram-label-text-fill-color-dark)' : 'var(--vis-chord-diagram-label-text-fill-color-bright)'\n    }\n  }\n}\n\nfunction getLabelTextAnchor<N extends ChordInputNode, L extends ChordInputLink> (\n  d: ChordNode<N>,\n  config: ChordDiagramConfigInterface<N, L>\n): string | null {\n  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n  switch (nodeLabelAlignment) {\n    case ChordLabelAlignment.Perpendicular: {\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angleDegree = angleCenter * 180 / Math.PI\n      return angleDegree < 180 ? 'start' : 'end'\n    }\n    case ChordLabelAlignment.Along: {\n      return null\n    }\n  }\n}\n\nfunction getLabelTransform<N extends ChordInputNode, L extends ChordInputLink> (\n  d: ChordNode<N>,\n  config: ChordDiagramConfigInterface<N, L>,\n  radiusScale: ScaleContinuousNumeric<number, number>\n): string | null {\n  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n  switch (nodeLabelAlignment) {\n    case ChordLabelAlignment.Perpendicular: {\n      const r = radiusScale(d.y1) + LABEL_PADDING\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angle = angleCenter - Math.PI / 2\n      const x = r * Math.cos(angle)\n      const y = r * Math.sin(angle)\n      return `translate(${x}, ${y})`\n    }\n    case ChordLabelAlignment.Along:\n      return null\n  }\n}\n\nexport function createLabel<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGGElement, ChordNode<N>, SVGGElement, unknown>,\n  config: ChordDiagramConfigInterface<N, L>,\n  radiusScale: ScaleContinuousNumeric<number, number>\n): void {\n  selection.style('opacity', 0)\n    .attr('transform', d => getLabelTransform(d, config, radiusScale))\n\n  selection.append('text')\n    .attr('class', s.labelText)\n    .style('fill', d => getColor(d.data, config.nodeColor, d.height))\n}\n\nexport function updateLabel<N extends ChordInputNode, L extends ChordInputLink> (\n  selection: Selection<SVGGElement, ChordNode<N>, SVGGElement, unknown>,\n  config: ChordDiagramConfigInterface<N, L>,\n  width: number,\n  radiusScale: ScaleContinuousNumeric<number, number>,\n  duration: number\n): void {\n  const { nodeLabel, nodeLabelColor, nodeWidth } = config\n\n  smartTransition(selection, duration)\n    .attr('transform', d => getLabelTransform(d, config, radiusScale))\n    .style('opacity', 1)\n\n  const label: Selection<SVGTextElement, ChordNode<N>, SVGElement, unknown> = selection.select(`.${s.labelText}`)\n  label.select('textPath').remove()\n  label\n    .text(d => getString(d.data, nodeLabel))\n    .style('fill', d => getColor(d.data, nodeLabelColor) ?? getLabelFillColor(d, config))\n    .style('text-anchor', d => getLabelTextAnchor(d, config))\n\n  label.each((d: ChordNode<N>, i: number, elements) => {\n    const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along\n    const radianArcLength = d.x1 - d.x0 - getNumber(d.data, config.padAngle) * 2\n    const radius = radiusScale(d.y1) - getNumber(d, config.nodeWidth) / 2\n    const arcLength = radius * radianArcLength\n    const maxWidth = (nodeLabelAlignment === ChordLabelAlignment.Along ? arcLength : width) - LABEL_PADDING * 2\n\n    const textElementSelection = select(elements[i])\n    trimSVGText(textElementSelection, maxWidth)\n    textElementSelection\n      .attr('dx', nodeLabelAlignment === ChordLabelAlignment.Along ? LABEL_PADDING : null)\n      .attr('dy', nodeLabelAlignment === ChordLabelAlignment.Along ? getNumber(d.data, nodeWidth) / 2 : null)\n\n    if (nodeLabelAlignment === ChordLabelAlignment.Along) {\n      const textElement = select(elements[i])\n      const textWidth = textElement.node().getBoundingClientRect().width\n      const labelText = textElement.text()\n\n      select(elements[i])\n        .text('')\n        .style('display', textWidth > maxWidth && 'none')\n\n      select(elements[i]).append('textPath')\n        .attr('href', `#${d.uid}`)\n        .text(labelText)\n    }\n  })\n\n  smartTransition(label, duration)\n    .attr('transform', d => {\n      const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment)\n      if (nodeLabelAlignment !== ChordLabelAlignment.Perpendicular) return null\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angleDegree = angleCenter * 180 / Math.PI\n      return `rotate(${angleDegree < 180 ? angleDegree - 90 : angleDegree + 90})`\n    })\n}\n\nexport function removeLabel (\n  selection: Selection<SVGGElement, unknown, SVGGElement, unknown>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":["s.labelText"],"mappings":"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"}

package/components/chord-diagram/modules/layout.js

@@ -22,25 +22,21 @@ function getHierarchyNodes(data, value, levels = []) {
 function positionChildren(node, padding, scalingCoeff = 0.95) {
     if (!node.children)
         return;
-    // We need to ensure levels with empty links still take up full space
-    const containsLinks = node.value > 0;
     const length = node.x1 - node.x0;
-    const scaledLength = length * (node.y0 === 0 ? 1 : scalingCoeff);
+    const scaledLength = length * scalingCoeff;
     const delta = length - scaledLength;
-    const padAngle = containsLinks ? padding : scaledLength / node.children.length;
     const positions = pie()
         .startAngle(node.x0 + delta / 2)
         .endAngle(node.x1 - delta / 2)
-        .padAngle(padAngle)
-        .value(d => containsLinks ? d.value : 1)
+        .padAngle(padding)
+        .value(d => d.value)
         .sort((a, b) => node.children.indexOf(a) - node.children.indexOf(b))(node.children);
     node.children.forEach((child, i) => {
         const x0 = positions[i].startAngle;
         const x1 = positions[i].endAngle;
         const childDelta = (x1 - x0) * (1 - scalingCoeff);
-        const xmid = (x0 + x1) / 2;
-        child.x0 = containsLinks ? x0 + childDelta / 2 : xmid - padding / 2;
-        child.x1 = containsLinks ? x1 - childDelta / 2 : xmid + padding / 2;
+        child.x0 = x0 + childDelta / 2;
+        child.x1 = x1 - childDelta / 2;
     });
 }
 function getRibbons(data, links, padding) {

package/components/chord-diagram/modules/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sources":["../../../../src/components/chord-diagram/modules/layout.ts"],"sourcesContent":["import { group, index } from 'd3-array'\nimport { HierarchyNode, hierarchy } from 'd3-hierarchy'\nimport { pie } from 'd3-shape'\n\n// Utils\nimport { getNumber, groupBy } from 'utils/data'\n\n// Types\nimport { NumericAccessor } from 'types/accessor'\n\n// Local Types\nimport { ChordNode, ChordRibbon, ChordLinkDatum, ChordHierarchyNode, ChordLeafNode } from '../types'\n\nfunction transformData <T> (node: HierarchyNode<T>): void {\n  const { height, depth } = node\n  if (height > 0) {\n    const d = node.data as unknown as [string, T[]]\n    const n = node as unknown as HierarchyNode<ChordHierarchyNode<T>>\n    n.data = { key: d[0], values: d[1], depth, height, ancestors: n.ancestors().map(d => d.data.key) }\n  }\n}\n\nexport function getHierarchyNodes<N> (\n  data: N[],\n  value: NumericAccessor<N>,\n  levels: string[] = []\n): HierarchyNode<ChordHierarchyNode<N>> {\n  const nodeLevels = levels.map(level => (d: N) => d[level as keyof N]) as unknown as [(d: N) => string]\n  const nestedData = levels.length ? group<N, string>(data, ...nodeLevels) : { key: 'root', children: data }\n\n  const root = hierarchy(nestedData)\n    .sum(d => getNumber(d as unknown as N, value))\n    .each(transformData)\n\n  return root as unknown as HierarchyNode<ChordHierarchyNode<N>>\n}\n\nexport function positionChildren<N> (node: ChordNode<N>, padding: number, scalingCoeff = 0.95): void {\n  if (!node.children) return\n\n  // We need to ensure levels with empty links still take up full space\n  const containsLinks = node.value > 0\n\n  const length = node.x1 - node.x0\n  const scaledLength = length * (node.y0 === 0 ? 1 : scalingCoeff)\n  const delta = length - scaledLength\n  const padAngle = containsLinks ? padding : scaledLength / node.children.length\n\n  const positions = pie<ChordNode<N>>()\n    .startAngle(node.x0 + delta / 2)\n    .endAngle(node.x1 - delta / 2)\n    .padAngle(padAngle)\n    .value(d => containsLinks ? d.value : 1)\n    .sort((a, b) => node.children.indexOf(a) - node.children.indexOf(b))(node.children)\n\n  node.children.forEach((child, i) => {\n    const x0 = positions[i].startAngle\n    const x1 = positions[i].endAngle\n    const childDelta = (x1 - x0) * (1 - scalingCoeff)\n    const xmid = (x0 + x1) / 2\n    child.x0 = containsLinks ? x0 + childDelta / 2 : xmid - padding / 2\n    child.x1 = containsLinks ? x1 - childDelta / 2 : xmid + padding / 2\n  })\n}\n\nexport function getRibbons<N> (data: ChordNode<N>, links: ChordLinkDatum<N>[], padding: number): ChordRibbon<N>[] {\n  type LinksArrayType = typeof links\n  const groupedBySource: Record<string, LinksArrayType> = groupBy(links, d => d.source._id)\n  const groupedByTarget: Record<string, LinksArrayType> = groupBy(links, d => d.target._id)\n\n  const leafNodes = data.leaves() as ChordLeafNode<N>[]\n  const leafNodesById: Map<string, ChordLeafNode<N>> = index(leafNodes, d => d.data._id)\n\n  const getNodesInRibbon = (\n    source: ChordLeafNode<N>,\n    target: ChordLeafNode<N>,\n    partitionHeight: number,\n    nodes: ChordNode<N>[] = []\n  ): ChordNode<N>[] => {\n    nodes[source.height] = source\n    nodes[partitionHeight * 2 - target.height] = target\n    if (source.parent && target.parent) getNodesInRibbon(source.parent, target.parent, partitionHeight, nodes)\n    return nodes\n  }\n  const calculatePoints = (links: LinksArrayType, type: 'in' | 'out', depth: number, maxDepth: number): void => {\n    links.forEach(link => {\n      if (!link._state.points) link._state.points = []\n\n      const sourceLeaf = leafNodesById.get(link.source._id)\n      const targetLeaf = leafNodesById.get(link.target._id)\n      const nodesInRibbon = getNodesInRibbon(\n        type === 'out' ? sourceLeaf : targetLeaf,\n        type === 'out' ? targetLeaf : sourceLeaf,\n        maxDepth\n      )\n      const currNode = nodesInRibbon[depth]\n      const len = currNode.x1 - currNode.x0 - padding\n      const x0 = currNode._prevX1 ?? (currNode.x0 + padding / 2)\n      const x1 = x0 + len * link._state.value / currNode.value\n      currNode._prevX1 = x1\n\n      const pointIdx = type === 'out' ? depth : maxDepth * 2 - 1 - depth\n      link._state.points[pointIdx] = { a0: x0, a1: x1, r: currNode.y1 }\n    })\n  }\n\n  leafNodes.forEach(leafNode => {\n    const outLinks = groupedBySource[leafNode.data._id] || []\n    const inLinks = groupedByTarget[leafNode.data._id] || []\n    for (let depth = 0; depth < leafNode.depth; depth += 1) {\n      calculatePoints(outLinks, 'out', depth, leafNode.depth)\n      calculatePoints(inLinks, 'in', depth, leafNode.depth)\n    }\n  })\n\n  return links.map(l => ({\n    source: leafNodesById.get(l.source._id),\n    target: leafNodesById.get(l.target._id),\n    data: l,\n    points: l._state.points,\n    _state: {},\n  }))\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.js","sources":["../../../../src/components/chord-diagram/modules/layout.ts"],"sourcesContent":["import { group, index } from 'd3-array'\nimport { HierarchyNode, hierarchy } from 'd3-hierarchy'\nimport { pie } from 'd3-shape'\n\n// Utils\nimport { getNumber, groupBy } from 'utils/data'\n\n// Types\nimport { NumericAccessor } from 'types/accessor'\n\n// Local Types\nimport { ChordNode, ChordRibbon, ChordLinkDatum, ChordHierarchyNode, ChordLeafNode } from '../types'\n\nfunction transformData <T> (node: HierarchyNode<T>): void {\n  const { height, depth } = node\n  if (height > 0) {\n    const d = node.data as unknown as [string, T[]]\n    const n = node as unknown as HierarchyNode<ChordHierarchyNode<T>>\n    n.data = { key: d[0], values: d[1], depth, height, ancestors: n.ancestors().map(d => d.data.key) }\n  }\n}\n\nexport function getHierarchyNodes<N> (\n  data: N[],\n  value: NumericAccessor<N>,\n  levels: string[] = []\n): HierarchyNode<ChordHierarchyNode<N>> {\n  const nodeLevels = levels.map(level => (d: N) => d[level as keyof N]) as unknown as [(d: N) => string]\n  const nestedData = levels.length ? group<N, string>(data, ...nodeLevels) : { key: 'root', children: data }\n\n  const root = hierarchy(nestedData)\n    .sum(d => getNumber(d as unknown as N, value))\n    .each(transformData)\n\n  return root as unknown as HierarchyNode<ChordHierarchyNode<N>>\n}\n\nexport function positionChildren<N> (node: ChordNode<N>, padding: number, scalingCoeff = 0.95): void {\n  if (!node.children) return\n\n  const length = node.x1 - node.x0\n  const scaledLength = length * scalingCoeff\n  const delta = length - scaledLength\n\n  const positions = pie<ChordNode<N>>()\n    .startAngle(node.x0 + delta / 2)\n    .endAngle(node.x1 - delta / 2)\n    .padAngle(padding)\n    .value(d => d.value)\n    .sort((a, b) => node.children.indexOf(a) - node.children.indexOf(b))(node.children)\n\n  node.children.forEach((child, i) => {\n    const x0 = positions[i].startAngle\n    const x1 = positions[i].endAngle\n    const childDelta = (x1 - x0) * (1 - scalingCoeff)\n    child.x0 = x0 + childDelta / 2\n    child.x1 = x1 - childDelta / 2\n  })\n}\n\nexport function getRibbons<N> (data: ChordNode<N>, links: ChordLinkDatum<N>[], padding: number): ChordRibbon<N>[] {\n  type LinksArrayType = typeof links\n  const groupedBySource: Record<string, LinksArrayType> = groupBy(links, d => d.source._id)\n  const groupedByTarget: Record<string, LinksArrayType> = groupBy(links, d => d.target._id)\n\n  const leafNodes = data.leaves() as ChordLeafNode<N>[]\n  const leafNodesById: Map<string, ChordLeafNode<N>> = index(leafNodes, d => d.data._id)\n\n  const getNodesInRibbon = (\n    source: ChordLeafNode<N>,\n    target: ChordLeafNode<N>,\n    partitionHeight: number,\n    nodes: ChordNode<N>[] = []\n  ): ChordNode<N>[] => {\n    nodes[source.height] = source\n    nodes[partitionHeight * 2 - target.height] = target\n    if (source.parent && target.parent) getNodesInRibbon(source.parent, target.parent, partitionHeight, nodes)\n    return nodes\n  }\n  const calculatePoints = (links: LinksArrayType, type: 'in' | 'out', depth: number, maxDepth: number): void => {\n    links.forEach(link => {\n      if (!link._state.points) link._state.points = []\n\n      const sourceLeaf = leafNodesById.get(link.source._id)\n      const targetLeaf = leafNodesById.get(link.target._id)\n      const nodesInRibbon = getNodesInRibbon(\n        type === 'out' ? sourceLeaf : targetLeaf,\n        type === 'out' ? targetLeaf : sourceLeaf,\n        maxDepth\n      )\n      const currNode = nodesInRibbon[depth]\n      const len = currNode.x1 - currNode.x0 - padding\n      const x0 = currNode._prevX1 ?? (currNode.x0 + padding / 2)\n      const x1 = x0 + len * link._state.value / currNode.value\n      currNode._prevX1 = x1\n\n      const pointIdx = type === 'out' ? depth : maxDepth * 2 - 1 - depth\n      link._state.points[pointIdx] = { a0: x0, a1: x1, r: currNode.y1 }\n    })\n  }\n\n  leafNodes.forEach(leafNode => {\n    const outLinks = groupedBySource[leafNode.data._id] || []\n    const inLinks = groupedByTarget[leafNode.data._id] || []\n    for (let depth = 0; depth < leafNode.depth; depth += 1) {\n      calculatePoints(outLinks, 'out', depth, leafNode.depth)\n      calculatePoints(inLinks, 'in', depth, leafNode.depth)\n    }\n  })\n\n  return links.map(l => ({\n    source: leafNodesById.get(l.source._id),\n    target: leafNodesById.get(l.target._id),\n    data: l,\n    points: l._state.points,\n    _state: {},\n  }))\n}\n"],"names":[],"mappings":"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"}

package/components/chord-diagram/style.js

@@ -17,7 +17,7 @@ const variables = injectGlobal `
 
     --vis-chord-diagram-label-text-fill-color-bright: #ffffff;
     --vis-chord-diagram-label-text-fill-color-dark: #a5abb2;
-    --vis-chord-diagram-label-text-font-size: 1em;
+    --vis-chord-diagram-label-text-font-size: 16px;
 
     --vis-dark-chord-diagram-link-fill-color: #575c65;
   }

package/components/chord-diagram/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/chord-diagram/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: chord-diagram-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-chord-diagram-link-fill-color: #cad5f6;\n    --vis-chord-diagram-link-stroke-color: #777777;\n    --vis-chord-diagram-link-opacity: 0.5;\n    --vis-chord-diagram-link-stroke-opacity: 0.15;\n    --vis-chord-diagram-link-highlighted-opacity: 0.9;\n    --vis-chord-diagram-link-dimmed-opacity: 0.25;\n\n    --vis-chord-diagram-node-highlighted-opacity: 0.9;\n    --vis-chord-diagram-node-dimmed-opacity: 0.25;\n\n    --vis-chord-diagram-label-text-fill-color-bright: #ffffff;\n    --vis-chord-diagram-label-text-fill-color-dark: #a5abb2;\n    --vis-chord-diagram-label-text-font-size: 1em;\n\n    --vis-dark-chord-diagram-link-fill-color: #575c65;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-chord-diagram-link-fill-color: var(--vis-dark-chord-diagram-link-fill-color);\n  }\n`\n\nexport const background = css`\n  label: background;\n`\n\nexport const nodes = css`\n  label: nodes;\n`\n\nexport const links = css`\n  label: links;\n`\n\nexport const labels = css`\n  label: labels;\n`\n\nexport const node = css`\n  label: node;\n  stroke-width: 0;\n  fill: var(--vis-color-main);\n  stroke: var(--vis-color-main);\n  transition: .1s fill-opacity;\n`\n\nexport const highlightedNode = css`\n  label: highlighted;\n  fill-opacity: var(--vis-chord-diagram-node-highlighted-opacity);\n  stroke-width: 1.5;\n`\n\nexport const label = css`\n  label: label;\n`\n\nexport const labelText = css`\n  label: label-text;\n\n  dominant-baseline: middle;\n  user-select: none;\n  font-size: var(--vis-chord-diagram-label-text-font-size);\n  \n  > textPath {\n    dominant-baseline: central;\n  }\n`\n\nexport const labelExit = css`\n  label: label-exit;\n`\n\nexport const link = css`\n  label: link;\n\n  fill: var(--vis-chord-diagram-link-fill-color);\n  fill-opacity: var(--vis-chord-diagram-link-opacity);\n  stroke: var(--vis-chord-diagram-link-stroke-color);\n  stroke-opacity:  var(--vis-chord-diagram-link-stroke-opacity);\n  transition: .1s fill-opacity;\n`\nexport const highlightedLink = css`\n  label: highlighted;\n  fill-opacity: var(--vis-chord-diagram-link-highlighted-opacity);\n`\n\nexport const transparent = css`\n  label: transparent;\n\n  ${`.${link}`}:not(${`.${highlightedLink}`}) {\n    fill-opacity: var(--vis-chord-diagram-link-dimmed-opacity);\n  }\n\n  ${`.${node}`}:not(${`.${highlightedNode}`}) {\n    fill-opacity: var(--vis-chord-diagram-node-dimmed-opacity);\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;AAmBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;EAG7B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;EAMtB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;EAIjC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAU3B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQtB;AACM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;EAGjC;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;AAIvC,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/chord-diagram/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: chord-diagram-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-chord-diagram-link-fill-color: #cad5f6;\n    --vis-chord-diagram-link-stroke-color: #777777;\n    --vis-chord-diagram-link-opacity: 0.5;\n    --vis-chord-diagram-link-stroke-opacity: 0.15;\n    --vis-chord-diagram-link-highlighted-opacity: 0.9;\n    --vis-chord-diagram-link-dimmed-opacity: 0.25;\n\n    --vis-chord-diagram-node-highlighted-opacity: 0.9;\n    --vis-chord-diagram-node-dimmed-opacity: 0.25;\n\n    --vis-chord-diagram-label-text-fill-color-bright: #ffffff;\n    --vis-chord-diagram-label-text-fill-color-dark: #a5abb2;\n    --vis-chord-diagram-label-text-font-size: 16px;\n\n    --vis-dark-chord-diagram-link-fill-color: #575c65;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-chord-diagram-link-fill-color: var(--vis-dark-chord-diagram-link-fill-color);\n  }\n`\n\nexport const background = css`\n  label: background;\n`\n\nexport const nodes = css`\n  label: nodes;\n`\n\nexport const links = css`\n  label: links;\n`\n\nexport const labels = css`\n  label: labels;\n`\n\nexport const node = css`\n  label: node;\n  stroke-width: 0;\n  fill: var(--vis-color-main);\n  stroke: var(--vis-color-main);\n  transition: .1s fill-opacity;\n`\n\nexport const highlightedNode = css`\n  label: highlighted;\n  fill-opacity: var(--vis-chord-diagram-node-highlighted-opacity);\n  stroke-width: 1.5;\n`\n\nexport const label = css`\n  label: label;\n`\n\nexport const labelText = css`\n  label: label-text;\n\n  dominant-baseline: middle;\n  user-select: none;\n  font-size: var(--vis-chord-diagram-label-text-font-size);\n  \n  > textPath {\n    dominant-baseline: central;\n  }\n`\n\nexport const labelExit = css`\n  label: label-exit;\n`\n\nexport const link = css`\n  label: link;\n\n  fill: var(--vis-chord-diagram-link-fill-color);\n  fill-opacity: var(--vis-chord-diagram-link-opacity);\n  stroke: var(--vis-chord-diagram-link-stroke-color);\n  stroke-opacity:  var(--vis-chord-diagram-link-stroke-opacity);\n  transition: .1s fill-opacity;\n`\nexport const highlightedLink = css`\n  label: highlighted;\n  fill-opacity: var(--vis-chord-diagram-link-highlighted-opacity);\n`\n\nexport const transparent = css`\n  label: transparent;\n\n  ${`.${link}`}:not(${`.${highlightedLink}`}) {\n    fill-opacity: var(--vis-chord-diagram-link-dimmed-opacity);\n  }\n\n  ${`.${node}`}:not(${`.${highlightedNode}`}) {\n    fill-opacity: var(--vis-chord-diagram-node-dimmed-opacity);\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;AAmBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;EAG7B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;EAMtB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;EAIjC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAU3B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQtB;AACM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;EAGjC;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;AAIvC,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;;;;"}

package/components/graph/config.d.ts

@@ -1,8 +1,10 @@
+import { D3DragEvent } from 'd3-drag';
+import { D3ZoomEvent } from 'd3-zoom';
 import { ComponentConfigInterface } from "../../core/component/config";
 import { TrimMode } from "../../types/text";
 import { GraphInputLink, GraphInputNode } from "../../types/graph";
 import { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from "../../types/accessor";
-import { GraphLayoutType, GraphCircleLabel, GraphLinkStyle, GraphLinkArrowStyle, GraphPanelConfig, GraphForceLayoutSettings, GraphElkLayoutSettings, GraphNodeShape } from './types';
+import { GraphLayoutType, GraphCircleLabel, GraphLinkStyle, GraphLinkArrowStyle, GraphPanelConfig, GraphForceLayoutSettings, GraphElkLayoutSettings, GraphNodeShape, GraphDagreLayoutSetting, GraphNode, GraphLink } from './types';
 export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {
     /** Zoom level constraints. Default: [0.35, 1.25] */
     zoomScaleExtent?: [number, number];
@@ -12,8 +14,6 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
     disableDrag?: boolean;
     /** Interval to re-render the graph when zooming. Default: `100` */
     zoomThrottledUpdateNodeThreshold?: number;
-    /** Zoom event callback. Default: `undefined` */
-    onZoom?: (zoomScale: number, zoomScaleExtent: [number, number]) => void;
     /** 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` */
@@ -56,20 +56,11 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
      * Default: `undefined` */
     layoutParallelSortConnectionsByGroup?: string;
     /** Force Layout settings, see the `d3-force` package for more details */
-    forceLayoutSettings?: GraphForceLayoutSettings;
+    forceLayoutSettings?: GraphForceLayoutSettings<N, L>;
     /** 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;
-    };
+    dagreLayoutSettings?: GraphDagreLayoutSetting;
     /** 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
@@ -87,7 +78,7 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
     /** 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;
+    linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, 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` */
@@ -104,6 +95,12 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
     linkLabelShiftFromCenter?: BooleanAccessor<L>;
     /** Spacing between neighboring links. Default: `8` */
     linkNeighborSpacing?: number;
+    /** Curvature of the link. Recommended value range: [0:1.5].
+     * `0` - straight line,
+     * `1` - nice curvature,
+     * `1.5` - very curve.
+     * Default: `0` */
+    linkCurvature?: NumericAccessor<L>;
     /** Set selected link by its unique id. Default: `undefined` */
     selectedLinkId?: number | string;
     /** Node size accessor function or constant value. Default: `30` */
@@ -162,5 +159,15 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
     selectedNodeId?: number | string;
     /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */
     panels?: GraphPanelConfig[] | undefined;
+    /** Graph node drag start callback function. Default: `undefined` */
+    onNodeDragStart?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;
+    /** Graph node drag callback function. Default: `undefined` */
+    onNodeDrag?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;
+    /** Graph node drag end callback function. Default: `undefined` */
+    onNodeDragEnd?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;
+    /** Zoom event callback. Default: `undefined` */
+    onZoom?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined) => void;
+    /** Callback function to be called when the graph layout is calculated. Default: `undefined` */
+    onLayoutCalculated?: (n: GraphNode<N, L>[], links: GraphLink<N, L>[]) => void;
 }
 export declare const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink>;

package/components/graph/config.js

@@ -3,16 +3,18 @@ import { TrimMode } from '../../types/text.js';
 import { GraphLayoutType, GraphLinkStyle, GraphNodeShape } from './types.js';
 
 // Config
-const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { duration: 1000, zoomScaleExtent: [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.group, layoutParallelNodeSubGroup: (n) => n.subgroup, forceLayoutSettings: {
+const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { duration: 1000, zoomScaleExtent: [0.35, 1.25], disableZoom: false, disableDrag: false, zoomThrottledUpdateNodeThreshold: 100, layoutType: GraphLayoutType.Force, layoutAutofit: true, layoutAutofitTolerance: 8.0, layoutNonConnectedAside: false, layoutGroupOrder: [], layoutParallelSubGroupsPerRow: 1, layoutParallelNodesPerColumn: 6, layoutParallelGroupSpacing: undefined, layoutParallelSortConnectionsByGroup: undefined, layoutNodeGroup: (n) => n.group, layoutParallelNodeSubGroup: (n) => n.subgroup, forceLayoutSettings: {
         linkDistance: 60,
         linkStrength: 0.45,
         charge: -500,
         forceXStrength: 0.15,
         forceYStrength: 0.25,
+        numIterations: undefined,
+        fixNodePositionAfterSimulation: false,
     }, dagreLayoutSettings: {
         rankdir: 'BT',
         ranker: 'longest-path',
-    }, layoutElkSettings: undefined, layoutElkNodeGroups: 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.icon, nodeIconSize: undefined, nodeLabel: (n) => 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.fill, nodeGaugeFill: undefined, nodeStroke: (n) => n.stroke, nodeEnterPosition: undefined, nodeEnterScale: 0.75, nodeExitPosition: undefined, nodeExitScale: 0.75, nodeSort: undefined, selectedNodeId: undefined, panels: undefined });
+    }, layoutElkSettings: undefined, layoutElkNodeGroups: 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, linkCurvature: 0, selectedLinkId: undefined, nodeGaugeAnimDuration: 1500, nodeSize: 30, nodeStrokeWidth: 3, nodeShape: GraphNodeShape.Circle, nodeGaugeValue: 0, nodeIcon: (n) => n.icon, nodeIconSize: undefined, nodeLabel: (n) => 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.fill, nodeGaugeFill: undefined, nodeStroke: (n) => n.stroke, nodeEnterPosition: undefined, nodeEnterScale: 0.75, nodeExitPosition: undefined, nodeExitScale: 0.75, nodeSort: undefined, selectedNodeId: undefined, panels: undefined, onNodeDragStart: undefined, onNodeDrag: undefined, onNodeDragEnd: undefined, onZoom: undefined, onLayoutCalculated: undefined });
 
 export { GraphDefaultConfig };
 //# sourceMappingURL=config.js.map

package/components/graph/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["// Config\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { TrimMode } from 'types/text'\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\nimport { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\n\n// Local Types\nimport {\n  GraphLayoutType,\n  GraphCircleLabel,\n  GraphLinkStyle,\n  GraphLinkArrowStyle,\n  GraphPanelConfig,\n  GraphForceLayoutSettings,\n  GraphElkLayoutSettings,\n  GraphNodeShape,\n} from './types'\n\nexport interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {\n  // Zoom and drag\n  /** Zoom level constraints. Default: [0.35, 1.25] */\n  zoomScaleExtent?: [number, number];\n  /** Disable zooming. Default: `false` */\n  disableZoom?: boolean;\n  /** Disable node dragging. Default: `false` */\n  disableDrag?: boolean;\n  /** Interval to re-render the graph when zooming. Default: `100` */\n  zoomThrottledUpdateNodeThreshold?: number;\n  /** Zoom event callback. Default: `undefined` */\n  onZoom?: (zoomScale: number, zoomScaleExtent: [number, number]) => void;\n\n  // Layout general settings\n  /** Type of the graph layout. Default: `GraphLayoutType.Force` */\n  layoutType?: GraphLayoutType | string;\n  /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */\n  layoutAutofit?: boolean;\n  /** Tolerance constant defining whether the graph should be fitted to container\n   * (on data or config update, or container resize) after a zoom / pan interaction or not.\n   * `0` — Stop fitting after any pan or zoom\n   * `Number.POSITIVE_INFINITY` — Always fit\n   * Default: `8.0` */\n  layoutAutofitTolerance?: number;\n  /** Place non-connected nodes at the bottom of the graph. Default: `false` */\n  layoutNonConnectedAside?: boolean;\n\n  // Settings for Parallel and Concentric layouts\n  /** Node group accessor function.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `node => node.group` */\n  layoutNodeGroup?: StringAccessor<N>;\n  /** Order of the layout groups.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `[]` */\n  layoutGroupOrder?: string[];\n\n  // Setting for Parallel layouts only\n  /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is\n   * `GraphLayoutType.ParallelHorizontal`).\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `6` */\n  layoutParallelNodesPerColumn?: number;\n  /** Node sub-group accessor function.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `node => node.subgroup` */\n  layoutParallelNodeSubGroup?: StringAccessor<N>;\n  /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `1` */\n  layoutParallelSubGroupsPerRow?: number;\n  /** Spacing between groups.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelGroupSpacing?: number;\n  /** Set a group by name to have priority in sorting the graph links.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelSortConnectionsByGroup?: string;\n\n  // Force layout\n  /** Force Layout settings, see the `d3-force` package for more details */\n  forceLayoutSettings?: GraphForceLayoutSettings;\n\n  // Dagre layout\n  /** Darge Layout settings, see the `dagrejs` package\n   * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout\n  */\n  dagreLayoutSettings?: {\n    /** Direction for rank node. `TB`, `BT`, `LR`, or `RL`. Default: `BT` */\n    rankdir: string;\n    /** Type of algorithm to assigns a rank to each node in the input graph.\n     * `network-simplex`, `tight-tree` or `longest-path`.\n     * Default: `longest-path` */\n    ranker: string;\n    /** Other configurable Dagre settings. https://github.com/dagrejs/dagre/wiki */\n    [key: string]: any;\n  };\n\n  // ELK layout\n  /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.\n   * If you want to specify custom layout option for each node group, you can provide an accessor function that\n   * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing\n   * layout options. Default: `undefined`\n  */\n  layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;\n  /** Array of accessor functions to define nested node groups for the ELK Layered layout.\n   * E.g.: `[n => n.group, n => n.subGroup]`.\n   * Default: `undefined` */\n  layoutElkNodeGroups?: StringAccessor<N>[];\n\n  // Links\n  /** Link width accessor function ot constant value. Default: `1` */\n  linkWidth?: NumericAccessor<L>;\n  /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */\n  linkStyle?: GenericAccessor<GraphLinkStyle, L>;\n  /** Link band width accessor function or constant value. Default: `0` */\n  linkBandWidth?: NumericAccessor<L>;\n  /** Link arrow accessor function or constant value. Default: `undefined` */\n  linkArrow?: GenericAccessor<GraphLinkArrowStyle, L> | undefined;\n  /** Link stroke color accessor function or constant value. Default: `undefined` */\n  linkStroke?: ColorAccessor<L>;\n  /** Link disabled state accessor function or constant value. Default: `false` */\n  linkDisabled?: BooleanAccessor<L>;\n  /** Link flow animation accessor function or constant value. Default: `false` */\n  linkFlow?: BooleanAccessor<L>;\n  /** Animation duration of the flow (traffic) circles. Default: `20000` */\n  linkFlowAnimDuration?: number;\n  /** Size of the moving particles that represent traffic flow. Default: `2` */\n  linkFlowParticleSize?: number;\n  /** Link label accessor function or constant value. Default: `undefined` */\n  linkLabel?: GenericAccessor<GraphCircleLabel, L> | undefined;\n  /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */\n  linkLabelShiftFromCenter?: BooleanAccessor<L>;\n  /** Spacing between neighboring links. Default: `8` */\n  linkNeighborSpacing?: number;\n  /** Set selected link by its unique id. Default: `undefined` */\n  selectedLinkId?: number | string;\n\n  // Nodes\n  /** Node size accessor function or constant value. Default: `30` */\n  nodeSize?: NumericAccessor<N>;\n  /** Node stroke width accessor function or constant value. Default: `3` */\n  nodeStrokeWidth?: NumericAccessor<N>;\n  /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */\n  nodeShape?: GenericAccessor<GraphNodeShape | string, N>;\n  /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */\n  nodeGaugeValue?: NumericAccessor<N>;\n  /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */\n  nodeGaugeFill?: ColorAccessor<N>;\n  /** Animation duration of the node gauge outline. Default: `1500` */\n  nodeGaugeAnimDuration?: number;\n  /** Node central icon accessor function or constant value. Default: `node => node.icon` */\n  nodeIcon?: StringAccessor<N>;\n  /** Node central icon size accessor function or constant value. Default: `undefined` */\n  nodeIconSize?: NumericAccessor<N>;\n  /** Node label accessor function or constant value. Default: `node => node.label` */\n  nodeLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node labels or not. Default: `true` */\n  nodeLabelTrim?: BooleanAccessor<N>;\n  /** Node label trimming mode. Default: `TrimMode.Middle` */\n  nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeLabelTrimLength?: NumericAccessor<N>;\n  /** Node sub-label accessor function or constant value: Default: `''` */\n  nodeSubLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node sub-labels or not. Default: `true` */\n  nodeSubLabelTrim?: BooleanAccessor<N>;\n  /** Node sub-label trimming mode. Default: `TrimMode.Middle` */\n  nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeSubLabelTrimLength?: NumericAccessor<N>;\n  /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */\n  nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;\n  /** Node bottom icon accessor function. Default: `undefined` */\n  nodeBottomIcon?: StringAccessor<N>;\n  /** Node disabled state accessor function or constant value. Default: `false` */\n  nodeDisabled?: BooleanAccessor<N>;\n  /** Node fill color accessor function or constant value. Default: `node => node.fill` */\n  nodeFill?: ColorAccessor<N>;\n  /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */\n  nodeStroke?: ColorAccessor<N>;\n  /** Sorting function to determine node placement. Default: `undefined` */\n  nodeSort?: ((a: N, b: N) => number);\n  /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */\n  nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */\n  nodeEnterScale?: NumericAccessor<N> | undefined;\n  /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */\n  nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */\n  nodeExitScale?: NumericAccessor<N> | undefined;\n  /** Set selected node by unique id. Default: `undefined` */\n  selectedNodeId?: number | string;\n\n  /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */\n  panels?: GraphPanelConfig[] | undefined;\n}\n\nexport const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {\n  ...ComponentDefaultConfig,\n  duration: 1000,\n  zoomScaleExtent: [0.35, 1.25],\n  disableZoom: false,\n  disableDrag: false,\n  zoomThrottledUpdateNodeThreshold: 100,\n  onZoom: undefined,\n  layoutType: GraphLayoutType.Force,\n  layoutAutofit: true,\n  layoutAutofitTolerance: 8.0,\n  layoutNonConnectedAside: false,\n\n  layoutGroupOrder: [],\n  layoutParallelSubGroupsPerRow: 1,\n  layoutParallelNodesPerColumn: 6,\n  layoutParallelGroupSpacing: undefined,\n  layoutParallelSortConnectionsByGroup: undefined,\n  layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,\n  layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,\n\n  forceLayoutSettings: {\n    linkDistance: 60,\n    linkStrength: 0.45,\n    charge: -500,\n    forceXStrength: 0.15,\n    forceYStrength: 0.25,\n  },\n\n  dagreLayoutSettings: {\n    rankdir: 'BT',\n    ranker: 'longest-path',\n  },\n\n  layoutElkSettings: undefined,\n  layoutElkNodeGroups: undefined,\n\n  linkFlowAnimDuration: 20000,\n  linkFlowParticleSize: 2,\n  linkWidth: 1,\n  linkStyle: GraphLinkStyle.Solid,\n  linkBandWidth: 0,\n  linkArrow: undefined,\n  linkStroke: undefined,\n  linkFlow: false,\n  linkLabel: undefined,\n  linkLabelShiftFromCenter: true,\n  linkNeighborSpacing: 8,\n  linkDisabled: false,\n  selectedLinkId: undefined,\n  nodeGaugeAnimDuration: 1500,\n\n  nodeSize: 30,\n  nodeStrokeWidth: 3,\n  nodeShape: GraphNodeShape.Circle,\n  nodeGaugeValue: 0,\n  nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,\n  nodeIconSize: undefined,\n  nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,\n  nodeLabelTrim: true,\n  nodeLabelTrimLength: 15,\n  nodeLabelTrimMode: TrimMode.Middle,\n  nodeSubLabel: '',\n  nodeSubLabelTrim: true,\n  nodeSubLabelTrimLength: 15,\n  nodeSubLabelTrimMode: TrimMode.Middle,\n  nodeSideLabels: undefined,\n  nodeBottomIcon: undefined,\n  nodeDisabled: false,\n  nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,\n  nodeGaugeFill: undefined,\n  nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,\n  nodeEnterPosition: undefined,\n  nodeEnterScale: 0.75,\n  nodeExitPosition: undefined,\n  nodeExitScale: 0.75,\n  nodeSort: undefined,\n\n  selectedNodeId: undefined,\n  panels: undefined,\n}\n"],"names":[],"mappings":";;;;AAAA;MAuMa,kBAAkB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC1B,sBAAsB,CACzB,EAAA,EAAA,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,EAC7B,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,KAAK,EAClB,gCAAgC,EAAE,GAAG,EACrC,MAAM,EAAE,SAAS,EACjB,UAAU,EAAE,eAAe,CAAC,KAAK,EACjC,aAAa,EAAE,IAAI,EACnB,sBAAsB,EAAE,GAAG,EAC3B,uBAAuB,EAAE,KAAK,EAE9B,gBAAgB,EAAE,EAAE,EACpB,6BAA6B,EAAE,CAAC,EAChC,4BAA4B,EAAE,CAAC,EAC/B,0BAA0B,EAAE,SAAS,EACrC,oCAAoC,EAAE,SAAS,EAC/C,eAAe,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EAC9E,0BAA0B,EAAE,CAAC,CAAiB,KAAc,CAA0B,CAAC,QAAQ,EAE/F,mBAAmB,EAAE;AACnB,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,YAAY,EAAE,IAAI;QAClB,MAAM,EAAE,CAAC,GAAG;AACZ,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,cAAc,EAAE,IAAI;AACrB,KAAA,EAED,mBAAmB,EAAE;AACnB,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,MAAM,EAAE,cAAc;KACvB,EAED,iBAAiB,EAAE,SAAS,EAC5B,mBAAmB,EAAE,SAAS,EAE9B,oBAAoB,EAAE,KAAK,EAC3B,oBAAoB,EAAE,CAAC,EACvB,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,cAAc,CAAC,KAAK,EAC/B,aAAa,EAAE,CAAC,EAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,SAAS,EACpB,wBAAwB,EAAE,IAAI,EAC9B,mBAAmB,EAAE,CAAC,EACtB,YAAY,EAAE,KAAK,EACnB,cAAc,EAAE,SAAS,EACzB,qBAAqB,EAAE,IAAI,EAE3B,QAAQ,EAAE,EAAE,EACZ,eAAe,EAAE,CAAC,EAClB,SAAS,EAAE,cAAc,CAAC,MAAM,EAChC,cAAc,EAAE,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EACxE,aAAa,EAAE,IAAI,EACnB,mBAAmB,EAAE,EAAE,EACvB,iBAAiB,EAAE,QAAQ,CAAC,MAAM,EAClC,YAAY,EAAE,EAAE,EAChB,gBAAgB,EAAE,IAAI,EACtB,sBAAsB,EAAE,EAAE,EAC1B,oBAAoB,EAAE,QAAQ,CAAC,MAAM,EACrC,cAAc,EAAE,SAAS,EACzB,cAAc,EAAE,SAAS,EACzB,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,CAAC,CAAiB,KAAc,CAAwB,CAAC,MAAM,EAC3E,iBAAiB,EAAE,SAAS,EAC5B,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,SAAS,EAC3B,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,SAAS,EAEnB,cAAc,EAAE,SAAS,EACzB,MAAM,EAAE,SAAS,EAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["import { D3DragEvent } from 'd3-drag'\nimport { D3ZoomEvent } from 'd3-zoom'\n\n// Config\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { TrimMode } from 'types/text'\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\nimport { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\n\n// Local Types\nimport {\n  GraphLayoutType,\n  GraphCircleLabel,\n  GraphLinkStyle,\n  GraphLinkArrowStyle,\n  GraphPanelConfig,\n  GraphForceLayoutSettings,\n  GraphElkLayoutSettings,\n  GraphNodeShape,\n  GraphDagreLayoutSetting,\n  GraphNode,\n  GraphLink,\n} from './types'\n\nexport interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {\n  // Zoom and drag\n  /** Zoom level constraints. Default: [0.35, 1.25] */\n  zoomScaleExtent?: [number, number];\n  /** Disable zooming. Default: `false` */\n  disableZoom?: boolean;\n  /** Disable node dragging. Default: `false` */\n  disableDrag?: boolean;\n  /** Interval to re-render the graph when zooming. Default: `100` */\n  zoomThrottledUpdateNodeThreshold?: number;\n\n  // Layout general settings\n  /** Type of the graph layout. Default: `GraphLayoutType.Force` */\n  layoutType?: GraphLayoutType | string;\n  /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */\n  layoutAutofit?: boolean;\n  /** Tolerance constant defining whether the graph should be fitted to container\n   * (on data or config update, or container resize) after a zoom / pan interaction or not.\n   * `0` — Stop fitting after any pan or zoom\n   * `Number.POSITIVE_INFINITY` — Always fit\n   * Default: `8.0` */\n  layoutAutofitTolerance?: number;\n  /** Place non-connected nodes at the bottom of the graph. Default: `false` */\n  layoutNonConnectedAside?: boolean;\n\n  // Settings for Parallel and Concentric layouts\n  /** Node group accessor function.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `node => node.group` */\n  layoutNodeGroup?: StringAccessor<N>;\n  /** Order of the layout groups.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `[]` */\n  layoutGroupOrder?: string[];\n\n  // Setting for Parallel layouts only\n  /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is\n   * `GraphLayoutType.ParallelHorizontal`).\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `6` */\n  layoutParallelNodesPerColumn?: number;\n  /** Node sub-group accessor function.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `node => node.subgroup` */\n  layoutParallelNodeSubGroup?: StringAccessor<N>;\n  /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `1` */\n  layoutParallelSubGroupsPerRow?: number;\n  /** Spacing between groups.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelGroupSpacing?: number;\n  /** Set a group by name to have priority in sorting the graph links.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelSortConnectionsByGroup?: string;\n\n  // Force layout\n  /** Force Layout settings, see the `d3-force` package for more details */\n  forceLayoutSettings?: GraphForceLayoutSettings<N, L>;\n\n  // Dagre layout\n  /** Darge Layout settings, see the `dagrejs` package\n   * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout\n  */\n  dagreLayoutSettings?: GraphDagreLayoutSetting;\n\n  // ELK layout\n  /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.\n   * If you want to specify custom layout option for each node group, you can provide an accessor function that\n   * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing\n   * layout options. Default: `undefined`\n  */\n  layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;\n  /** Array of accessor functions to define nested node groups for the ELK Layered layout.\n   * E.g.: `[n => n.group, n => n.subGroup]`.\n   * Default: `undefined` */\n  layoutElkNodeGroups?: StringAccessor<N>[];\n\n  // Links\n  /** Link width accessor function ot constant value. Default: `1` */\n  linkWidth?: NumericAccessor<L>;\n  /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */\n  linkStyle?: GenericAccessor<GraphLinkStyle, L>;\n  /** Link band width accessor function or constant value. Default: `0` */\n  linkBandWidth?: NumericAccessor<L>;\n  /** Link arrow accessor function or constant value. Default: `undefined` */\n  linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, L> | undefined;\n  /** Link stroke color accessor function or constant value. Default: `undefined` */\n  linkStroke?: ColorAccessor<L>;\n  /** Link disabled state accessor function or constant value. Default: `false` */\n  linkDisabled?: BooleanAccessor<L>;\n  /** Link flow animation accessor function or constant value. Default: `false` */\n  linkFlow?: BooleanAccessor<L>;\n  /** Animation duration of the flow (traffic) circles. Default: `20000` */\n  linkFlowAnimDuration?: number;\n  /** Size of the moving particles that represent traffic flow. Default: `2` */\n  linkFlowParticleSize?: number;\n  /** Link label accessor function or constant value. Default: `undefined` */\n  linkLabel?: GenericAccessor<GraphCircleLabel, L> | undefined;\n  /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */\n  linkLabelShiftFromCenter?: BooleanAccessor<L>;\n  /** Spacing between neighboring links. Default: `8` */\n  linkNeighborSpacing?: number;\n  /** Curvature of the link. Recommended value range: [0:1.5].\n   * `0` - straight line,\n   * `1` - nice curvature,\n   * `1.5` - very curve.\n   * Default: `0` */\n  linkCurvature?: NumericAccessor<L>;\n  /** Set selected link by its unique id. Default: `undefined` */\n  selectedLinkId?: number | string;\n\n  // Nodes\n  /** Node size accessor function or constant value. Default: `30` */\n  nodeSize?: NumericAccessor<N>;\n  /** Node stroke width accessor function or constant value. Default: `3` */\n  nodeStrokeWidth?: NumericAccessor<N>;\n  /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */\n  nodeShape?: GenericAccessor<GraphNodeShape | string, N>;\n  /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */\n  nodeGaugeValue?: NumericAccessor<N>;\n  /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */\n  nodeGaugeFill?: ColorAccessor<N>;\n  /** Animation duration of the node gauge outline. Default: `1500` */\n  nodeGaugeAnimDuration?: number;\n  /** Node central icon accessor function or constant value. Default: `node => node.icon` */\n  nodeIcon?: StringAccessor<N>;\n  /** Node central icon size accessor function or constant value. Default: `undefined` */\n  nodeIconSize?: NumericAccessor<N>;\n  /** Node label accessor function or constant value. Default: `node => node.label` */\n  nodeLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node labels or not. Default: `true` */\n  nodeLabelTrim?: BooleanAccessor<N>;\n  /** Node label trimming mode. Default: `TrimMode.Middle` */\n  nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeLabelTrimLength?: NumericAccessor<N>;\n  /** Node sub-label accessor function or constant value: Default: `''` */\n  nodeSubLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node sub-labels or not. Default: `true` */\n  nodeSubLabelTrim?: BooleanAccessor<N>;\n  /** Node sub-label trimming mode. Default: `TrimMode.Middle` */\n  nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeSubLabelTrimLength?: NumericAccessor<N>;\n  /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */\n  nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;\n  /** Node bottom icon accessor function. Default: `undefined` */\n  nodeBottomIcon?: StringAccessor<N>;\n  /** Node disabled state accessor function or constant value. Default: `false` */\n  nodeDisabled?: BooleanAccessor<N>;\n  /** Node fill color accessor function or constant value. Default: `node => node.fill` */\n  nodeFill?: ColorAccessor<N>;\n  /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */\n  nodeStroke?: ColorAccessor<N>;\n  /** Sorting function to determine node placement. Default: `undefined` */\n  nodeSort?: ((a: N, b: N) => number);\n  /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */\n  nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */\n  nodeEnterScale?: NumericAccessor<N> | undefined;\n  /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */\n  nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */\n  nodeExitScale?: NumericAccessor<N> | undefined;\n  /** Set selected node by unique id. Default: `undefined` */\n  selectedNodeId?: number | string;\n\n  /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */\n  panels?: GraphPanelConfig[] | undefined;\n\n  // Events\n  /** Graph node drag start callback function. Default: `undefined` */\n  onNodeDragStart?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag callback function. Default: `undefined` */\n  onNodeDrag?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag end callback function. Default: `undefined` */\n  onNodeDragEnd?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Zoom event callback. Default: `undefined` */\n  onZoom?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined) => void;\n  /** Callback function to be called when the graph layout is calculated. Default: `undefined` */\n  onLayoutCalculated?: (n: GraphNode<N, L>[], links: GraphLink<N, L>[]) => void;\n}\n\nexport const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {\n  ...ComponentDefaultConfig,\n  duration: 1000,\n  zoomScaleExtent: [0.35, 1.25],\n  disableZoom: false,\n  disableDrag: false,\n  zoomThrottledUpdateNodeThreshold: 100,\n  layoutType: GraphLayoutType.Force,\n  layoutAutofit: true,\n  layoutAutofitTolerance: 8.0,\n  layoutNonConnectedAside: false,\n\n  layoutGroupOrder: [],\n  layoutParallelSubGroupsPerRow: 1,\n  layoutParallelNodesPerColumn: 6,\n  layoutParallelGroupSpacing: undefined,\n  layoutParallelSortConnectionsByGroup: undefined,\n  layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,\n  layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,\n\n  forceLayoutSettings: {\n    linkDistance: 60,\n    linkStrength: 0.45,\n    charge: -500,\n    forceXStrength: 0.15,\n    forceYStrength: 0.25,\n    numIterations: undefined,\n    fixNodePositionAfterSimulation: false,\n  },\n\n  dagreLayoutSettings: {\n    rankdir: 'BT',\n    ranker: 'longest-path',\n  },\n\n  layoutElkSettings: undefined,\n  layoutElkNodeGroups: undefined,\n\n  linkFlowAnimDuration: 20000,\n  linkFlowParticleSize: 2,\n  linkWidth: 1,\n  linkStyle: GraphLinkStyle.Solid,\n  linkBandWidth: 0,\n  linkArrow: undefined,\n  linkStroke: undefined,\n  linkFlow: false,\n  linkLabel: undefined,\n  linkLabelShiftFromCenter: true,\n  linkNeighborSpacing: 8,\n  linkDisabled: false,\n  linkCurvature: 0,\n  selectedLinkId: undefined,\n  nodeGaugeAnimDuration: 1500,\n\n  nodeSize: 30,\n  nodeStrokeWidth: 3,\n  nodeShape: GraphNodeShape.Circle,\n  nodeGaugeValue: 0,\n  nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,\n  nodeIconSize: undefined,\n  nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,\n  nodeLabelTrim: true,\n  nodeLabelTrimLength: 15,\n  nodeLabelTrimMode: TrimMode.Middle,\n  nodeSubLabel: '',\n  nodeSubLabelTrim: true,\n  nodeSubLabelTrimLength: 15,\n  nodeSubLabelTrimMode: TrimMode.Middle,\n  nodeSideLabels: undefined,\n  nodeBottomIcon: undefined,\n  nodeDisabled: false,\n  nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,\n  nodeGaugeFill: undefined,\n  nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,\n  nodeEnterPosition: undefined,\n  nodeEnterScale: 0.75,\n  nodeExitPosition: undefined,\n  nodeExitScale: 0.75,\n  nodeSort: undefined,\n\n  selectedNodeId: undefined,\n  panels: undefined,\n\n  onNodeDragStart: undefined,\n  onNodeDrag: undefined,\n  onNodeDragEnd: undefined,\n  onZoom: undefined,\n  onLayoutCalculated: undefined,\n}\n"],"names":[],"mappings":";;;;AAGA;AAiNa,MAAA,kBAAkB,mCAC1B,sBAAsB,CAAA,EAAA,EACzB,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,EAC7B,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,KAAK,EAClB,gCAAgC,EAAE,GAAG,EACrC,UAAU,EAAE,eAAe,CAAC,KAAK,EACjC,aAAa,EAAE,IAAI,EACnB,sBAAsB,EAAE,GAAG,EAC3B,uBAAuB,EAAE,KAAK,EAE9B,gBAAgB,EAAE,EAAE,EACpB,6BAA6B,EAAE,CAAC,EAChC,4BAA4B,EAAE,CAAC,EAC/B,0BAA0B,EAAE,SAAS,EACrC,oCAAoC,EAAE,SAAS,EAC/C,eAAe,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EAC9E,0BAA0B,EAAE,CAAC,CAAiB,KAAc,CAA0B,CAAC,QAAQ,EAE/F,mBAAmB,EAAE;AACnB,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,YAAY,EAAE,IAAI;QAClB,MAAM,EAAE,CAAC,GAAG;AACZ,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,8BAA8B,EAAE,KAAK;AACtC,KAAA,EAED,mBAAmB,EAAE;AACnB,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,MAAM,EAAE,cAAc;KACvB,EAED,iBAAiB,EAAE,SAAS,EAC5B,mBAAmB,EAAE,SAAS,EAE9B,oBAAoB,EAAE,KAAK,EAC3B,oBAAoB,EAAE,CAAC,EACvB,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,cAAc,CAAC,KAAK,EAC/B,aAAa,EAAE,CAAC,EAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,SAAS,EACpB,wBAAwB,EAAE,IAAI,EAC9B,mBAAmB,EAAE,CAAC,EACtB,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,CAAC,EAChB,cAAc,EAAE,SAAS,EACzB,qBAAqB,EAAE,IAAI,EAE3B,QAAQ,EAAE,EAAE,EACZ,eAAe,EAAE,CAAC,EAClB,SAAS,EAAE,cAAc,CAAC,MAAM,EAChC,cAAc,EAAE,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EACxE,aAAa,EAAE,IAAI,EACnB,mBAAmB,EAAE,EAAE,EACvB,iBAAiB,EAAE,QAAQ,CAAC,MAAM,EAClC,YAAY,EAAE,EAAE,EAChB,gBAAgB,EAAE,IAAI,EACtB,sBAAsB,EAAE,EAAE,EAC1B,oBAAoB,EAAE,QAAQ,CAAC,MAAM,EACrC,cAAc,EAAE,SAAS,EACzB,cAAc,EAAE,SAAS,EACzB,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,CAAC,CAAiB,KAAc,CAAwB,CAAC,MAAM,EAC3E,iBAAiB,EAAE,SAAS,EAC5B,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,SAAS,EAC3B,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,SAAS,EAEnB,cAAc,EAAE,SAAS,EACzB,MAAM,EAAE,SAAS,EAEjB,eAAe,EAAE,SAAS,EAC1B,UAAU,EAAE,SAAS,EACrB,aAAa,EAAE,SAAS,EACxB,MAAM,EAAE,SAAS,EACjB,kBAAkB,EAAE,SAAS,EAAA;;;;"}

package/components/graph/index.d.ts

@@ -18,8 +18,10 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
         nodeGauge: string;
         nodeSideLabel: string;
         nodeLabel: string;
+        dimmedNode: string;
         link: string;
         linkLine: string;
+        dimmedLink: string;
         panel: string;
         panelRect: string;
         panelSelection: string;
@@ -45,6 +47,7 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
     private _prevWidth;
     private _prevHeight;
     private _shouldRecalculateLayout;
+    private _layoutCalculationPromise;
     private _shouldFitLayout;
     private _shouldSetPanels;
     private _panels;
@@ -85,6 +88,7 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
     private _drawPanels;
     private _updatePanels;
     private _calculateLayout;
+    private _initPanelsData;
     private _fit;
     private _getTransform;
     private _selectNode;
@@ -104,12 +108,13 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
     private _onDragged;
     private _onDragEnded;
     private _shouldLayoutRecalculate;
-    private _getMarkerId;
+    private _getLinkArrowDefId;
     private _addSVGDefs;
     zoomIn(increment?: number): void;
     zoomOut(increment?: number): void;
     setZoom(zoomLevel: number): void;
-    fitView(): void;
+    getZoom(): number;
+    fitView(duration?: number): void;
     /** Enable automatic fitting to container if it was disabled due to previous zoom / pan interactions */
     resetAutofitState(): void;
     /** Get current coordinates of the nodes as an array of { id: string; x: number; y: number } objects */