Component | Graph: Allow user to set node positions

packages/dev/src/examples/networks-and-flows/graph/graph-node-positions/index.tsx

@@ -0,0 +1,24 @@
+import React, { useCallback, useMemo, useRef } from 'react'
+import { VisSingleContainer, VisGraph, VisGraphRef } from '@unovis/react'
+import { generatePrecalculatedNodeLinkData, NodeDatum, LinkDatum } from '@src/utils/data'
+
+export const title = 'Graph: Node Positions'
+export const subTitle = 'Pass in node positions'
+
+export const component = (): JSX.Element => {
+  const data = useMemo(() => generatePrecalculatedNodeLinkData(), [])
+  const ref = useRef<VisGraphRef<NodeDatum, LinkDatum>>(null)
+
+
+  return (
+    <VisSingleContainer data={data} height={600}>
+      <VisGraph
+        ref={ref}
+        layoutType="precalculated"
+        linkCurvature={1}
+        nodeIcon={useCallback((n: NodeDatum) => n.id, [])}
+      />
+    </VisSingleContainer>
+  )
+}
+

packages/dev/src/utils/data.ts

@@ -90,6 +90,37 @@ export function generateNodeLinkData (n = 10, numNeighbourLinks = () => 1): Node
   return { nodes, links }
 }
 
+
+export function generatePrecalculatedNodeLinkData (n = 10, numNeighbourLinks = () => 1): NodeLinkData {
+  const nodes = Array(n).fill(0).map((_, i) => ({
+    i,
+    id: (i + 1).toString(),
+    value: 100 * Math.random(),
+    x: 50 * i,
+    y: 50 * i,
+  }))
+  const options = [...nodes].slice(1)
+  const links = nodes.reduce((arr, n) => {
+    if (options.length) {
+      const num = Math.max(1, Math.random() * options.length)
+      for (let i = 0; i < num; i++) {
+        const targetId = options.shift()?.id
+        for (let k = 0; k < numNeighbourLinks(); k++) {
+          const link = {
+            id: `${n.id}-${targetId}`,
+            source: n.id,
+            target: targetId,
+            value: Math.random(),
+          }
+          arr.push(link)
+        }
+      }
+    }
+    return arr
+  }, Array(0))
+  return { nodes, links }
+}
+
 export function generateNestedData (n: number, numGroups: number, excludeValues?: string[]): NestedDatum[] {
   const groups = Array(numGroups).fill(0).map((_, i) => String.fromCharCode(i + 65))
   const subgroups = Object.fromEntries(groups.map((g, i) => [g, Array(Math.floor(numGroups * 1.5)).fill(0).map((_, j) => `${g}${j}`)]))

packages/ts/src/types/graph.ts

@@ -1,5 +1,7 @@
 export interface GraphInputNode {
   id?: number | string;
+  x?: number;
+  y?: number;
 }
 
 export interface GraphInputLink {

packages/website/docs/networks-and-flows/Graph.mdx

@@ -62,13 +62,15 @@ type GraphData = {
 ```
 
 The `NodeDatum` object type in generic and doesn't have any mandatory fields, however we recommend adding unique `id`s to
-each node to support better graph animations. Your links will need to have the `source` and `target` properties referencing
-specific nodes either by their index in the `nodes` array or by their unique `id`; or they can be references to the
+each node to support better graph animations. Your links will need to have the `source` and `target`
+properties referencing specific nodes either by their index in the `nodes` array or by their unique `id`; or they can be references to the
 actual node objects.
 
 ```ts
 type NodeDatum = {
   id?: string;
+  x?: number;
+  y?: number;
 }
 
 type LinkDatum = {
@@ -519,6 +521,13 @@ in the gallery to learn more.
   ]}
 />
 
+### Precalculated
+
+If you want to specify node locations, set `layoutType` to `GraphLayoutType.Precalculated`(or `"precalculated"`).
+Then pass in node positions (`x` and `y`) as part of graph data. 
+
+Note: if you selected `GraphLayoutType.Precalculated` but fail to pass in `x` and `y`, all your nodes will render at the default positions.
+
 ### Non-connected nodes aside
 If you want non-connected graph nodes to be placed below the layout, set `layoutNonConnectedAside` to `true`.