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

package/src/components/graph/modules/layout-helpers.ts

@@ -1,96 +0,0 @@
-// Types
-import type { ElkNode } from 'elkjs/lib/elk.bundled.js'
-import { GraphInputLink, GraphInputNode } from 'types/graph'
-import { GenericAccessor } from 'types/accessor'
-
-// Utils
-import { getValue, isPlainObject, merge } from 'utils/data'
-
-// Local Types
-import { GraphNode, GraphElkLayoutSettings } from '../types'
-
-export const DEFAULT_ELK_SETTINGS = {
-  hierarchyHandling: 'INCLUDE_CHILDREN',
-  'nodePlacement.strategy': 'NETWORK_SIMPLEX',
-  'elk.padding': '[top=15.0,left=15.0,bottom=15.0,right=15.0]',
-  'spacing.nodeNodeBetweenLayers': '50',
-  'spacing.edgeNodeBetweenLayers': '50',
-  'spacing.nodeNode': '10',
-}
-
-export function positionNonConnectedNodes<N extends GraphInputNode, L extends GraphInputLink> (
-  nodes: GraphNode<N, L>[],
-  y: number,
-  spacing: number,
-  width: number,
-  xStart = 0
-): void {
-  nodes.forEach((d, i) => {
-    const x = spacing / 2 + i * spacing
-    const rowIdx = width ? Math.floor(x / width) : 0
-    d.y = (y + rowIdx * spacing) || 0
-    d.x = width ? x % width + xStart : x + xStart
-  })
-}
-
-export type GraphElkHierarchyNode<N extends GraphInputNode, L extends GraphInputLink> = {
-  id: string;
-  children: GraphNode<N, L>[] | GraphElkHierarchyNode<N, L>;
-  layoutOptions: GraphElkLayoutSettings;
-}
-
-export type GraphElkHierarchyNodeMap<N extends GraphInputNode, L extends GraphInputLink>
-  = Map<string | undefined | null, GraphNode<N, L>[] | GraphElkHierarchyNodeMap<N, L>>
-
-
-export function toElkHierarchy<N extends GraphInputNode, L extends GraphInputLink> (
-  d: GraphElkHierarchyNodeMap<N, L> | GraphNode<N, L>[],
-  layoutOptions: GenericAccessor<GraphElkLayoutSettings, string> | undefined
-): (GraphElkHierarchyNode<N, L> | GraphNode<N, L>)[] {
-  if (!(d instanceof Map)) return d
-
-  const hierarchyNode = Array.from(d.entries()).map(([key, value]) => {
-    const children = toElkHierarchy(value, layoutOptions)
-    if (key) {
-      const layoutOps = isPlainObject(layoutOptions) ? DEFAULT_ELK_SETTINGS : merge(DEFAULT_ELK_SETTINGS, getValue(key, layoutOptions))
-      return {
-        id: key,
-        layoutOptions: layoutOps,
-        children,
-      } as GraphElkHierarchyNode<N, L>
-    } else {
-      return children
-    }
-  }).flat()
-
-  return hierarchyNode
-}
-
-export function adjustElkHierarchyCoordinates (node: ElkNode): void {
-  const parentX = node.x
-  const parentY = node.y
-
-  node.edges?.forEach(edge => {
-    edge.sections?.forEach(section => {
-      section.startPoint.x += parentX
-      section.startPoint.y += parentY
-      section.endPoint.x += parentX
-      section.endPoint.y += parentY
-      section.bendPoints?.forEach(bendPoint => {
-        bendPoint.x += parentX
-        bendPoint.y += parentY
-      })
-    })
-
-    edge.labels?.forEach(label => {
-      label.x += parentX
-      label.y += parentY
-    })
-  })
-
-  node.children?.forEach(child => {
-    child.x += parentX
-    child.y += parentY
-    adjustElkHierarchyCoordinates(child)
-  })
-}

package/src/components/graph/modules/layout.ts

@@ -1,502 +0,0 @@
-import { min, max, group } from 'd3-array'
-import type { ElkNode } from 'elkjs/lib/elk.bundled.js'
-
-// Core
-import { GraphDataModel } from 'data-models/graph'
-
-// Utils
-import { without, clamp, groupBy, unique, sortBy, getString, getNumber, getValue, merge } from 'utils/data'
-
-// Types
-import { GraphInputLink, GraphInputNode } from 'types/graph'
-
-// Local Types
-import { GraphNode, GraphLink } from '../types'
-
-// Config
-import { GraphConfig } from '../config'
-
-// Helpers
-import { getMaxNodeSize, configuredNodeSize, getNodeSize, getAverageNodeSize } from './node/helper'
-import {
-  DEFAULT_ELK_SETTINGS,
-  adjustElkHierarchyCoordinates,
-  positionNonConnectedNodes,
-  toElkHierarchy,
-  GraphElkHierarchyNode,
-} from './layout-helpers'
-
-export function applyLayoutCircular<N extends GraphInputNode, L extends GraphInputLink> (
-  datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>,
-  config: GraphConfig<N, L>,
-  width: number,
-  height: number
-): void {
-  const { nonConnectedNodes, connectedNodes, nodes } = datamodel
-  const { layoutNonConnectedAside, nodeSize } = config
-
-  const activeWidth = width
-  const activeHeight = height
-
-  // Handle layout nodes
-  const layoutNodes = layoutNonConnectedAside ? connectedNodes : nodes
-  const maxNodeSize = getMaxNodeSize(layoutNodes, nodeSize)
-  const yRatio = activeHeight / maxNodeSize
-  const yScaling = yRatio < layoutNodes.length / 2 ? layoutNodes.length / 2 / yRatio : 1
-  const xRatio = activeWidth / maxNodeSize
-  const xScaling = xRatio < layoutNodes.length / 2 ? layoutNodes.length / 2 / xRatio : 1
-  const scaling = Math.max(xScaling, yScaling)
-
-  layoutNodes.forEach((d, i) => {
-    const rX = scaling * activeWidth / 2
-    const rY = scaling * activeHeight / 2 // maxNodeSize * layoutNodes.length / 4
-    const angle = 2 * i * Math.PI / layoutNodes.length
-    d.x = activeWidth / 2 + rX * Math.cos(angle)
-    d.y = activeHeight / 2 + rY * Math.sin(angle)
-  })
-
-  // Handle non-connected nodes
-  if (layoutNonConnectedAside) {
-    const maxSize = getMaxNodeSize(nonConnectedNodes, nodeSize)
-    const maxY = max<number>(connectedNodes.map(d => d.y))
-    const maxX = max<number>(connectedNodes.map(d => d.x))
-    const minX = min<number>(connectedNodes.map(d => d.x))
-    const graphWidth = maxX - minX
-    positionNonConnectedNodes(nonConnectedNodes, maxY + maxSize * 3, maxSize * 2.25, Math.max(graphWidth, width), minX)
-  }
-}
-
-export function applyLayoutParallel<N extends GraphInputNode, L extends GraphInputLink> (
-  datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>,
-  config: GraphConfig<N, L>,
-  width: number,
-  height: number,
-  orientation?: string
-): void {
-  const { nonConnectedNodes, connectedNodes, nodes } = datamodel
-  const {
-    layoutNonConnectedAside, layoutGroupOrder, layoutParallelSortConnectionsByGroup, layoutParallelNodesPerColumn,
-    layoutParallelSubGroupsPerRow, nodeSize, layoutNodeGroup, layoutParallelNodeSubGroup, layoutParallelGroupSpacing,
-  } = config
-
-  const activeWidth = width - configuredNodeSize(nodeSize)
-  const activeHeight = height - configuredNodeSize(nodeSize) - (nonConnectedNodes.length ? configuredNodeSize(nodeSize) * 5 : 0)
-
-  // Handle connected nodes
-  const layoutNodes = layoutNonConnectedAside ? connectedNodes : nodes
-  const groupNames = unique(layoutNodes.map(d => getString(d, layoutNodeGroup, d._index)))
-  const groupNamesSorted: string[] = sortBy(groupNames, d => layoutGroupOrder.indexOf(d))
-
-  const groups = groupNamesSorted.map(groupName => {
-    const groupNodes = layoutNodes.filter(d => getString(d, layoutNodeGroup, d._index) === groupName)
-    const groupedBySubgroup = groupBy(groupNodes, d => getString(d, layoutParallelNodeSubGroup, d._index))
-    const subgroups = Object.keys(groupedBySubgroup).map(name => ({
-      nodes: groupedBySubgroup[name],
-      name,
-    }))
-
-    return {
-      name: groupName,
-      nodes: groupNodes,
-      subgroups,
-    }
-  })
-
-  // Sort
-  const group = groups.find(g => g.name === layoutParallelSortConnectionsByGroup)
-  if (group) {
-    const sortMap = {}
-    let idx = 0
-    group.subgroups.forEach(subgroup => {
-      subgroup.nodes.forEach(node => {
-        node.links.forEach(link => {
-          const linkTargetId = link?.target._id
-          sortMap[linkTargetId] = idx
-          idx = idx + 1
-        })
-      })
-    })
-
-    without(groups, group).forEach(g => {
-      g.subgroups.forEach(subgroup => {
-        subgroup.nodes.sort((a, b) => {
-          return (sortMap[a._id] || 0) - (sortMap[b._id] || 0)
-        })
-      })
-    })
-  }
-
-  const maxN = max(groups, d => d.nodes?.length)
-  const labelApprxHeight = 40
-  const labelMargin = 10
-  const subgroupMargin = 40
-  const maxNodeSize = getMaxNodeSize(layoutNodes, nodeSize)
-
-  if (orientation === 'horizontal') {
-    const minHorizontalStep = 2 * maxNodeSize + labelMargin
-    const maxHorizontalStep = 3.5 * maxNodeSize + labelMargin
-    const horizontalStep = clamp(activeWidth / (maxN - 1), minHorizontalStep, maxHorizontalStep)
-
-    const maxVerticalStep = maxNodeSize * 4 + labelApprxHeight
-    const minVerticalStep = maxNodeSize * 1.5 + labelApprxHeight
-    const verticalStep = (maxNodeSize + layoutParallelGroupSpacing) || clamp(activeHeight / (groups.length - 1), minVerticalStep, maxVerticalStep)
-    const subgroupNodeStep = maxNodeSize + labelApprxHeight + labelMargin
-
-    let y0 = (groups.length < 2) ? height / 2 : 0
-    groups.forEach(group => {
-      let x0 = 0
-      let dy = 0
-      let subgroupMaxWidth = 0
-      let groupWidth = 0
-      let groupHeight = 0
-      let k = 0
-      group.subgroups.forEach(subgroup => {
-        const subgroupRows = Math.ceil(subgroup.nodes.length / layoutParallelNodesPerColumn)
-        let n = 0
-        let x = x0
-        let y = y0 + dy
-        subgroup.nodes.forEach(d => {
-          x = x + horizontalStep
-          d.x = x
-          d.y = y
-          groupWidth = Math.max(groupWidth, x)
-
-          n = n + 1
-          if (n >= layoutParallelNodesPerColumn) {
-            n = 0
-            y += subgroupNodeStep
-            x = x0
-          }
-        })
-
-        const subgroupWidth = Math.min(subgroup.nodes.length, layoutParallelNodesPerColumn) * horizontalStep
-        const subgroupHeight = subgroupRows * subgroupNodeStep
-        subgroupMaxWidth = Math.max(subgroupMaxWidth, subgroupWidth)
-        dy = dy + subgroupHeight + subgroupMargin
-        k = k + 1
-        if (k >= layoutParallelSubGroupsPerRow) {
-          k = 0
-          dy = 0
-          x0 = x0 + subgroupMaxWidth + subgroupMargin
-          subgroupMaxWidth = 0
-        }
-
-        groupHeight = Math.max(groupHeight, y)
-        // x0 += Math.min(subgroup.nodes.length, layoutParallelNodesPerColumn) * horizontalStep + subgroupMargin
-      })
-
-      // Center group horizontally
-      group.subgroups.forEach(subgroup => {
-        subgroup.nodes.forEach(d => {
-          d.x -= groupWidth / 2
-        })
-      })
-      groupWidth = 0
-
-      // Update y0 for the next group
-      y0 = groupHeight + verticalStep
-    })
-  } else {
-    const minHorizontalStep = 6 * maxNodeSize + labelMargin
-    const maxHorizontalStep = 10 * maxNodeSize + labelMargin
-    const horizontalStep = (maxNodeSize + layoutParallelGroupSpacing) || clamp(activeWidth / (maxN - 1), minHorizontalStep, maxHorizontalStep)
-
-    const maxVerticalStep = maxNodeSize * 2.0 + labelApprxHeight
-    const minVerticalStep = maxNodeSize * 1.5 + labelApprxHeight
-    const verticalStep = clamp(activeHeight / (groups.length - 1), minVerticalStep, maxVerticalStep)
-    const subgroupNodeStep = maxNodeSize * 2.0
-
-    let x0 = (groups.length < 2) ? width / 2 : 0
-    groups.forEach(group => {
-      let y0 = 0
-      let dx = 0 // Horizontal shift inside the group (column)
-      let subgroupMaxHeight = 0
-      let groupWidth = 0
-      let groupHeight = 0
-
-      let k = 0
-      group.subgroups.forEach(subgroup => {
-        const subgroupColumns = Math.ceil(subgroup.nodes.length / layoutParallelNodesPerColumn)
-        let n = 0
-        let y = y0
-        let x = x0 + dx
-        subgroup.nodes.forEach(d => {
-          y = y + verticalStep
-          d.x = x
-          d.y = y
-          groupHeight = Math.max(groupHeight, y)
-
-          n = n + 1
-          if (n >= layoutParallelNodesPerColumn) {
-            n = 0
-            x += subgroupNodeStep
-            y = y0
-          }
-        })
-
-        const subgroupHeight = Math.min(subgroup.nodes.length, layoutParallelNodesPerColumn) * verticalStep
-        const subgroupWidth = subgroupColumns * subgroupNodeStep
-        subgroupMaxHeight = Math.max(subgroupMaxHeight, subgroupHeight)
-        dx = dx + subgroupWidth + subgroupMargin
-        k = k + 1
-        if (k >= layoutParallelSubGroupsPerRow) {
-          k = 0
-          dx = 0
-          y0 = y0 + subgroupMaxHeight + subgroupMargin
-          subgroupMaxHeight = 0
-        }
-
-        groupWidth = Math.max(groupWidth, x)
-      })
-
-      // Center group vertically
-      group.subgroups.forEach(subgroup => {
-        subgroup.nodes.forEach(d => {
-          d.y -= groupHeight / 2
-        })
-      })
-      groupHeight = 0
-
-      // Update x0 for the next group
-      x0 = groupWidth + horizontalStep
-    })
-  }
-
-  // Handle non-connected nodes
-  if (layoutNonConnectedAside) {
-    const maxSize = getMaxNodeSize(nonConnectedNodes, nodeSize)
-    const maxY = max<number>(connectedNodes.map(d => d.y)) || 0
-    const maxX = max<number>(connectedNodes.map(d => d.x)) || 0
-    const minX = min<number>(connectedNodes.map(d => d.x)) || 0
-    const graphWidth = (maxX - minX) || width
-    positionNonConnectedNodes(nonConnectedNodes, maxY + maxSize * 3, maxSize * 2.25, Math.max(graphWidth, width))
-  }
-}
-
-export async function applyLayoutDagre<N extends GraphInputNode, L extends GraphInputLink> (
-  datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>,
-  config: GraphConfig<N, L>,
-  width: number
-): Promise<void> {
-  const { nonConnectedNodes, connectedNodes, nodes, links } = datamodel
-  const { nodeSize, layoutNonConnectedAside, dagreLayoutSettings, nodeStrokeWidth, nodeLabel } = config
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const { Graph } = await import('@unovis/graphlibrary')
-  const { layout } = await import('@unovis/dagre-layout')
-
-  // https://github.com/dagrejs/dagre/wiki
-  const dagreGraph = new Graph()
-
-  // Set an object for the graph label
-  dagreGraph.setGraph(dagreLayoutSettings)
-
-  // Default to assigning a new object as a label for each new edge.
-  dagreGraph.setDefaultEdgeLabel(() => ({}))
-
-  // Add nodes to the graph. The first argument is the node id. The second is
-  // metadata about the node. In this case we're going to add labels to each of
-  // our nodes.
-  const labelApprxHeight = 40
-  const nds = (layoutNonConnectedAside ? connectedNodes : nodes)
-  nds.forEach(node => {
-    dagreGraph.setNode(node._index, {
-      label: getString(node, nodeLabel, node._index),
-      width: getNumber(node, nodeSize, node._index) * 1.5 + getNumber(node, nodeStrokeWidth, node._index),
-      height: labelApprxHeight + getNumber(node, nodeSize, node._index) * 1.5,
-      originalNode: node,
-    })
-  })
-
-  // Add edges to the graph.
-  links.forEach(link => {
-    dagreGraph.setEdge((link.source as GraphNode)._index, (link.target as GraphNode)._index)
-  })
-
-  // Calculate the layout
-  layout(dagreGraph)
-
-  // Apply coordinates to the graph
-  dagreGraph.nodes().forEach(d => {
-    const node = dagreGraph.node(d)
-    node.originalNode.x = node.x // width * d.x / dagreGraph._label.width
-    node.originalNode.y = node.y // height * d.y / dagreGraph._label.height
-  })
-
-  // Handle non-connected nodes
-  if (layoutNonConnectedAside) {
-    const maxNodeSize = getMaxNodeSize(nonConnectedNodes, nodeSize)
-    const maxY = max<number>(connectedNodes.map(d => d.y))
-    const maxX = max<number>(connectedNodes.map(d => d.x))
-    const minX = min<number>(connectedNodes.map(d => d.x))
-    const graphWidth = maxX - minX
-    positionNonConnectedNodes(nonConnectedNodes, maxY + maxNodeSize * 3, maxNodeSize * 2.25, Math.max(graphWidth, width), 0)
-  }
-}
-
-export function applyLayoutConcentric<N extends GraphInputNode, L extends GraphInputLink> (
-  datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>,
-  config: GraphConfig<N, L>,
-  width: number,
-  height: number
-): void {
-  const { nonConnectedNodes, connectedNodes, nodes } = datamodel
-  const { layoutNonConnectedAside, layoutGroupOrder, nodeSize, layoutNodeGroup } = config
-
-  const layoutNodes = layoutNonConnectedAside ? connectedNodes : nodes
-
-  const groupNames: string[] = unique(layoutNodes.map(d => getString(d, layoutNodeGroup, d._index)))
-  const groupNamesSorted: string[] = sortBy(groupNames, d => layoutGroupOrder.indexOf(d))
-
-  const groups = groupNamesSorted.map(groupName => ({
-    name: groupName,
-    nodes: layoutNodes.filter(d => getString(d, layoutNodeGroup, d._index) === groupName),
-  }))
-
-  // Handle connected nodes
-  let r = 2 * getAverageNodeSize(groups[0]?.nodes ?? [], nodeSize)
-  const widthToHeightRatio = width / height
-
-  groups.forEach((group, i) => {
-    const avgNodeSize = getAverageNodeSize(group.nodes, nodeSize)
-    const requiredRadius = 1.1 * avgNodeSize * group.nodes.length / Math.PI
-    if (r < requiredRadius) r = requiredRadius
-
-    group.nodes.forEach((node, j) => {
-      // If the first (central) group has only one node
-      if (i === 0 && group.nodes.length === 1) {
-        node.x = width / 2
-        node.y = height / 2
-      } else {
-        let dAngle = 0
-        if (i === 0 && group.nodes.length === 3) dAngle = Math.PI / 6
-        if (i === 0 && group.nodes.length === 4) dAngle = Math.PI / 4
-        const angle = 2 * j * Math.PI / group.nodes.length + i * Math.PI / 12 + dAngle
-        node.x = width / 2 + r * Math.cos(angle) * widthToHeightRatio
-        node.y = height / 2 + r * Math.sin(angle)
-      }
-    })
-
-    const groupSpacing = avgNodeSize * 3
-    r += groupSpacing
-  })
-
-  // Handle non-connected nodes
-  if (layoutNonConnectedAside) {
-    const maxSize = getMaxNodeSize(nonConnectedNodes, nodeSize)
-    const maxY = max<number>(connectedNodes.map(d => d.y))
-    const maxX = max<number>(connectedNodes.map(d => d.x))
-    const minX = min<number>(connectedNodes.map(d => d.x))
-    const graphWidth = maxX - minX
-    positionNonConnectedNodes(nonConnectedNodes, maxY + maxSize * 3, maxSize * 2.25, graphWidth, minX)
-  }
-}
-
-export async function applyLayoutForce<N extends GraphInputNode, L extends GraphInputLink> (
-  datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>,
-  config: GraphConfig<N, L>,
-  width: number
-): Promise<void> {
-  const { layoutNonConnectedAside, forceLayoutSettings: { linkDistance, linkStrength, charge, forceXStrength, forceYStrength }, nodeSize } = config
-
-  const { forceSimulation, forceLink, forceManyBody, forceX, forceY, forceCollide } = await import('d3-force')
-
-  const { nonConnectedNodes, connectedNodes, nodes, links } = datamodel
-  const simulation = forceSimulation(layoutNonConnectedAside ? connectedNodes : nodes)
-    .force('link', forceLink(links)
-      .id((d) => String((d as GraphNode<N, L>)._id))
-      .distance(linkDistance)
-      .strength(linkStrength)
-    )
-    .force('charge', forceManyBody().strength(d => {
-      const linkCount = links.reduce((count, l) => count + Number((l.source === d) || (l.target === d)), 0)
-      return charge * Math.sqrt(linkCount)
-    }))
-    .force('x', forceX().strength(forceXStrength))
-    .force('y', forceY().strength(forceYStrength))
-    .force('collide', forceCollide().radius((d, i) => getNodeSize(d, nodeSize, i)).iterations(1))
-    .stop()
-
-  // See https://bl.ocks.org/mbostock/1667139, https://github.com/d3/d3-force/blob/master/README.md#simulation_tick
-  for (let i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
-    simulation.tick()
-  }
-
-  // Translate coordinates to values > 0 for better animated transition between layout
-  const yMin = min<number>(connectedNodes.map(d => d.y)) ?? 0
-  const xMin = min<number>(connectedNodes.map(d => d.x)) ?? 0
-  nodes.forEach(d => {
-    d.x -= xMin
-    d.y -= yMin
-  })
-
-  // Handle non-connected nodes
-  if (layoutNonConnectedAside) {
-    const maxSize = getMaxNodeSize(nonConnectedNodes, nodeSize)
-    const maxY = max<number>(connectedNodes.map(d => d.y))
-    const maxX = max<number>(connectedNodes.map(d => d.x))
-    const minX = min<number>(connectedNodes.map(d => d.x))
-    const graphWidth = maxX - minX
-    positionNonConnectedNodes(nonConnectedNodes, maxY + maxSize * 6, maxSize * 2.25, Math.max(graphWidth, width), minX)
-  }
-}
-
-export async function applyELKLayout<N extends GraphInputNode, L extends GraphInputLink> (
-  datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>,
-  config: GraphConfig<N, L>,
-  width: number
-): Promise<void> {
-  const ELK = (await import('elkjs/lib/elk.bundled.js')).default
-  const elk = new ELK()
-
-  const labelApprxHeight = 30
-  const nodes = datamodel.nodes.map(n => ({
-    ...n,
-    id: n._id,
-    width: getNumber(n, config.nodeSize, n._index) + getNumber(n, config.nodeStrokeWidth, n._index),
-    height: getNumber(n, config.nodeSize, n._index) + labelApprxHeight,
-  }))
-
-  let elkNodes: (GraphNode<N, L> | GraphElkHierarchyNode<N, L>)[]
-  if (config.layoutElkNodeGroups) {
-    const groupingFunctions = config.layoutElkNodeGroups
-      .map(accessor => (d: GraphNode<N, L>) => getString(d, accessor, d._index)) as [(d: GraphNode<N, L>) => string]
-    const grouped = group(nodes, ...groupingFunctions)
-    elkNodes = toElkHierarchy(grouped, config.layoutElkSettings)
-  } else {
-    elkNodes = nodes
-  }
-
-  const rootNodeId = 'root'
-  const elkGraph: ElkNode = {
-    id: rootNodeId,
-    layoutOptions: merge(DEFAULT_ELK_SETTINGS, getValue(rootNodeId, config.layoutElkSettings)),
-    children: elkNodes as ElkNode[],
-    edges: datamodel.links.map(l => ({
-      id: l._id,
-      sources: [l.source._id],
-      targets: [l.target._id],
-    })),
-  }
-
-  const layout = await elk.layout(elkGraph)
-  adjustElkHierarchyCoordinates(layout)
-
-  nodes.forEach((node, i) => {
-    const found = datamodel.nodes.find(n => n._id === node.id)
-    if (!found) return
-
-    found.x = node.x
-    found.y = node.y
-  })
-
-  // Handle non-connected nodes
-  if (config.layoutNonConnectedAside) {
-    const maxSize = getMaxNodeSize(datamodel.nonConnectedNodes, config.nodeSize)
-    const maxY = max<number>(datamodel.connectedNodes.map(d => d.y)) || 0
-    const maxX = max<number>(datamodel.connectedNodes.map(d => d.x)) || 0
-    const minX = min<number>(datamodel.connectedNodes.map(d => d.x)) || 0
-    const graphWidth = (maxX - minX) || width
-    positionNonConnectedNodes(datamodel.nonConnectedNodes, maxY + maxSize * 3, maxSize * 2.25, Math.max(graphWidth, width))
-  }
-}

package/src/components/graph/modules/link/helper.ts

@@ -1,105 +0,0 @@
-// Utils
-import { getNumber, getString, getValue } from 'utils/data'
-import { getColor, hexToBrightness } from 'utils/color'
-import { color } from 'd3-color'
-
-// Types
-import { GraphInputLink, GraphInputNode } from 'types/graph'
-
-// Local Types
-import { GraphLink, GraphLinkArrowStyle, GraphCircleLabel } from '../../types'
-
-// Config
-import { GraphConfig } from '../../config'
-
-// Helpers
-import { getX, getY } from '../node/helper'
-import { ZoomLevel } from '../zoom-levels'
-
-export const getPolylineData = (d: { x1: number; x2: number; y1: number; y2: number}): string => `${d.x1},${d.y1} ${(d.x1 + d.x2) / 2},${(d.y1 + d.y2) / 2} ${d.x2},${d.y2}`
-
-export const LINK_LABEL_RADIUS = 8
-export const LINK_MARKER_WIDTH = 12
-export const LINK_MARKER_HEIGHT = 8
-
-export function getLinkShift (link: GraphLink, spacing: number): { dx: number; dy: number } {
-  const sourceNode = link.source
-  const targetNode = link.target
-  const angle = Math.atan2(getY(targetNode) - getY(sourceNode), getX(targetNode) - getX(sourceNode)) - Math.PI / 2
-  const dx = Math.cos(angle) * spacing * link._direction * (link._index - (link._neighbours - 1) / 2)
-  const dy = Math.sin(angle) * spacing * link._direction * (link._index - (link._neighbours - 1) / 2)
-  return { dx, dy }
-}
-
-export function getLinkShiftTransform (link: GraphLink, spacing: number): string {
-  const { dx, dy } = getLinkShift(link, spacing)
-  return `translate(${dx}, ${dy})`
-}
-
-export function getLinkLabelShift (link: GraphLink, linkSpacing: number, shiftFromCenter = 0): string {
-  const x1 = getX(link.source)
-  const y1 = getY(link.source)
-  const x2 = getX(link.target)
-  const y2 = getY(link.target)
-  const angle = Math.atan2(y2 - y1, x2 - x1)
-  const perpendicularShift = getLinkShift(link, linkSpacing)
-
-  const x = x1 + 0.5 * (x2 - x1) + shiftFromCenter * Math.cos(angle) + perpendicularShift.dx
-  const y = y1 + 0.5 * (y2 - y1) + shiftFromCenter * Math.sin(angle) + perpendicularShift.dy
-  return `translate(${x}, ${y})`
-}
-
-export function getLinkStrokeWidth<N extends GraphInputNode, L extends GraphInputLink> (
-  d: GraphLink,
-  scale: number,
-  config: GraphConfig<N, L>
-): number {
-  const m = getNumber(d, config.linkWidth, d._indexGlobal)
-  return m / Math.pow(scale, 0.5)
-}
-
-export function getLinkBandWidth<N extends GraphInputNode, L extends GraphInputLink> (
-  d: GraphLink,
-  scale: number,
-  config: GraphConfig<N, L>
-): number {
-  const { nodeSize, linkBandWidth } = config
-  const sourceNodeSize = getNumber(d.source, nodeSize, d.source._index)
-  const targetNodeSize = getNumber(d.target, nodeSize, d.target._index)
-  const minNodeSize = Math.min(sourceNodeSize, targetNodeSize)
-  return Math.min(minNodeSize, getNumber(d, linkBandWidth, d._indexGlobal) / Math.pow(scale || 1, 0.5)) || 0
-}
-
-export function getLinkColor<N extends GraphInputNode, L extends GraphInputLink> (link: GraphLink, config: GraphConfig<N, L>): string {
-  const { linkStroke } = config
-  const c = getColor(link, linkStroke, link._indexGlobal, true) ?? 'var(--vis-graph-link-stroke-color)'
-  return c || null
-}
-
-export function getLinkArrow<N extends GraphInputNode, L extends GraphInputLink> (
-  d: GraphLink,
-  scale: number,
-  config: GraphConfig<N, L>
-): string {
-  const { linkArrow } = config
-  if (scale > ZoomLevel.Level2 && getString(d, linkArrow, d._indexGlobal)) {
-    return getValue<GraphLink, GraphLinkArrowStyle>(d, linkArrow, d._indexGlobal)
-  }
-  return null
-}
-
-export function getArrowPath (): string {
-  return `M0,0 V${LINK_MARKER_HEIGHT} L${LINK_MARKER_WIDTH},${LINK_MARKER_HEIGHT / 2} Z`
-}
-
-export function getDoubleArrowPath (): string {
-  return `M0,${LINK_MARKER_HEIGHT / 2} L${LINK_MARKER_WIDTH},0 L${LINK_MARKER_WIDTH * 2},${LINK_MARKER_HEIGHT / 2} L${LINK_MARKER_WIDTH},${LINK_MARKER_HEIGHT} Z`
-}
-
-export function getLinkLabelTextColor (label: GraphCircleLabel): string {
-  if (!label.color) return null
-
-  const hex = color(label.color).hex()
-  const brightness = hexToBrightness(hex)
-  return brightness > 0.65 ? 'var(--vis-graph-link-label-text-color-dark)' : 'var(--vis-graph-link-label-text-color-bright)'
-}