Undirected graphs support in the orbits strategy (#69)

* Improve disconnected graph placement for circular strategy

* Start working on batch graph updates

* Add graph batch updates

* Fix orbits strategy

* Fix replaceBatch

* Improve batch updates types

* Finish orbits placement strategy for diesconnected undirected graphs

* Fix distances between vertices

---------

Co-authored-by: kacperklusek <kacperklusek70@gmail.com>

Author: MatiPl01

src/App.tsx

@@ -1,11 +1,13 @@
+import { useEffect } from 'react';
 import { SafeAreaView, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
-import DirectedGraphComponent from '@/components/graphs/DirectedGraphComponent';
 import DefaultEdgeLabelRenderer from '@/components/graphs/labels/renderers/DefaultEdgeLabelRenderer';
-import { DirectedGraph } from '@/models/graphs';
+import { UndirectedGraph } from '@/models/graphs';
 import PannableScalableView from '@/views/PannableScalableView';
 
+import UndirectedGraphComponent from './components/graphs/UndirectedGraphComponent';
+
 const GRAPH1 = {
   vertices: [
     { key: 'A', data: 'A' },
@@ -15,10 +17,10 @@ const GRAPH1 = {
     { key: 'E', data: 'E' }
   ],
   edges: [
-    { key: 'AB', from: 'A', to: 'B', data: 'AB' },
-    { key: 'AC', from: 'A', to: 'C', data: 'AC' },
-    { key: 'AD', from: 'A', to: 'D', data: 'AD' },
-    { key: 'AE', from: 'A', to: 'E', data: 'AE' }
+    { key: 'AB', vertices: ['A', 'B'], data: 'AB' },
+    { key: 'AC', vertices: ['A', 'C'], data: 'AC' },
+    { key: 'AD', vertices: ['A', 'D'], data: 'AD' },
+    { key: 'AE', vertices: ['A', 'E'], data: 'AE' }
   ]
 };
 
@@ -36,15 +38,15 @@ const GRAPH2 = {
     { key: 'O', data: 'O' }
   ],
   edges: [
-    { key: 'FG', from: 'F', to: 'G', data: 'FG' },
-    { key: 'FH', from: 'F', to: 'H', data: 'FH' },
-    { key: 'FI', from: 'F', to: 'I', data: 'FI' },
-    { key: 'GJ', from: 'G', to: 'J', data: 'GJ' },
-    { key: 'GK', from: 'G', to: 'K', data: 'GK' },
-    { key: 'GL', from: 'G', to: 'L', data: 'GL' },
-    { key: 'GM', from: 'G', to: 'M', data: 'GM' },
-    { key: 'GN', from: 'G', to: 'N', data: 'GN' },
-    { key: 'GO', from: 'G', to: 'O', data: 'GO' }
+    { key: 'FG', vertices: ['F', 'G'], data: 'FG' },
+    { key: 'FH', vertices: ['F', 'H'], data: 'FH' },
+    { key: 'FI', vertices: ['F', 'I'], data: 'FI' },
+    { key: 'GJ', vertices: ['G', 'J'], data: 'GJ' },
+    { key: 'GK', vertices: ['G', 'K'], data: 'GK' },
+    { key: 'GL', vertices: ['G', 'L'], data: 'GL' },
+    { key: 'GM', vertices: ['G', 'M'], data: 'GM' },
+    { key: 'GN', vertices: ['G', 'N'], data: 'GN' },
+    { key: 'GO', vertices: ['G', 'O'], data: 'GO' }
   ]
 };
 
@@ -54,8 +56,8 @@ const GRAPH3 = {
     { key: 'Q', data: 'Q' }
   ],
   edges: [
-    { key: 'PQ1', from: 'P', to: 'Q', data: 'PQ1' },
-    { key: 'PQ2', from: 'P', to: 'Q', data: 'PQ2' }
+    { key: 'PQ1', vertices: ['P', 'Q'], data: 'PQ1' },
+    { key: 'PQ2', vertices: ['P', 'Q'], data: 'PQ2' }
   ]
 };
 
@@ -64,23 +66,41 @@ const DISCONNECTED_GRAPH = {
   edges: [...GRAPH1.edges, ...GRAPH2.edges, ...GRAPH3.edges]
 };
 
+let phase = 0;
+
 export default function App() {
-  const graph = DirectedGraph.fromData(
+  const graph = UndirectedGraph.fromData(
     DISCONNECTED_GRAPH.vertices,
     DISCONNECTED_GRAPH.edges
   );
 
+  useEffect(() => {
+    setInterval(() => {
+      if (phase === 0) {
+        graph.insertEdge('PC', '', 'P', 'C');
+      } else if (phase === 1) {
+        graph.insertEdge('CI', '', 'C', 'I');
+      } else if (phase === 2) {
+        graph.removeEdge('PC');
+      } else if (phase === 3) {
+        graph.removeEdge('CI');
+      }
+      phase = (phase + 1) % 4;
+    }, 1000);
+  }, [graph]);
+
   return (
     <SafeAreaView className='grow'>
       <GestureHandlerRootView className='grow'>
         <View className='grow bg-black'>
           <PannableScalableView objectFit='contain' controls>
-            <DirectedGraphComponent
+            <UndirectedGraphComponent
               graph={graph}
               settings={{
                 // TODO - fix orbits strategy padding
                 placement: {
-                  strategy: 'circles',
+                  strategy: 'orbits',
+                  layerSizing: 'equal',
                   minVertexSpacing: 100
                 },
                 components: {

src/components/graphs/GraphComponent.tsx

@@ -389,8 +389,22 @@ export default function GraphComponent<
     [verticesData]
   );
 
+  const containerWidth = useDerivedValue(
+    () => boundingRect.right.value - boundingRect.left.value
+  );
+  const containerHeight = useDerivedValue(
+    () => boundingRect.bottom.value - boundingRect.top.value
+  );
+
   return (
     <Group>
+      <Rect
+        x={boundingRect.left}
+        y={boundingRect.top}
+        width={containerWidth}
+        height={containerHeight}
+        color='#222'
+      />
       {renderEdges()}
       {renderVertices()}
     </Group>

src/components/graphs/edges/curved/DirectedCurvedEdgeComponent.tsx

@@ -5,7 +5,7 @@ import {
   useSharedValue
 } from 'react-native-reanimated';
 
-import { Vector, rotate } from '@shopify/react-native-skia';
+import { rotate } from '@shopify/react-native-skia';
 
 import { LABEL_COMPONENT_SETTINGS } from '@/constants/components';
 import { DirectedCurvedEdgeComponentProps } from '@/types/components/edges';

src/models/graphs/DirectedGraph.ts

@@ -51,8 +51,8 @@ export default class DirectedGraph<V, E> extends Graph<
     targetKey: string,
     notifyObservers?: boolean
   ): DirectedEdge<E, V> {
-    const source = this.vertex(sourceKey);
-    const target = this.vertex(targetKey);
+    const source = this.getVertex(sourceKey);
+    const target = this.getVertex(targetKey);
 
     if (!source) {
       throw new Error(`Vertex ${sourceKey} does not exist`);
@@ -70,7 +70,7 @@ export default class DirectedGraph<V, E> extends Graph<
   }
 
   override removeEdge(key: string, notifyObservers?: boolean): E {
-    const edge = this.edge(key);
+    const edge = this.getEdge(key);
 
     if (!edge) {
       throw new Error(`Edge ${key} does not exist`);

src/models/graphs/Graph.ts

@@ -154,12 +154,12 @@ export default abstract class Graph<
     return !!this.edges$[key];
   }
 
-  vertex(key: string) {
-    return this.vertices$[key];
+  getVertex(key: string): GV | null {
+    return this.vertices$[key] ?? null;
   }
 
-  edge(key: string) {
-    return this.edges$[key];
+  getEdge(key: string): GE | null {
+    return this.edges$[key] ?? null;
   }
 
   getEdgesBetween(vertex1key: string, vertex2key: string): Array<GE> {

src/models/graphs/UndirectedGraph.ts

@@ -49,8 +49,8 @@ export default class UndirectedGraph<V, E> extends Graph<
     vertex2key: string,
     notifyObservers = true
   ): UndirectedEdge<E, V> {
-    const vertex1 = this.vertex(vertex1key);
-    const vertex2 = this.vertex(vertex2key);
+    const vertex1 = this.getVertex(vertex1key);
+    const vertex2 = this.getVertex(vertex2key);
 
     if (!vertex1) {
       throw new Error(`Vertex ${vertex1key} does not exist`);
@@ -71,7 +71,7 @@ export default class UndirectedGraph<V, E> extends Graph<
   }
 
   override removeEdge(key: string, notifyObservers = true): E {
-    const edge = this.edge(key);
+    const edge = this.getEdge(key);
 
     if (!edge) {
       throw new Error(`Edge ${key} does not exist`);

src/types/data/index.ts

@@ -12,6 +12,6 @@ export type DirectedEdgeData<E> = {
 
 export type UndirectedEdgeData<E> = {
   key: string;
-  vertices: [string, string];
+  vertices: string[];
   data: E;
 };

src/types/graphs/shared.ts

@@ -36,8 +36,8 @@ export interface Graph<V, E> {
   hasVertex(key: string): boolean;
   hasEdge(key: string): boolean;
   getEdgesBetween(vertex1key: string, vertex2key: string): Array<Edge<E, V>>;
-  vertex(key: string): Vertex<V, E> | undefined;
-  edge(key: string): Edge<E, V> | undefined;
+  getVertex(key: string): Vertex<V, E> | null;
+  getEdge(key: string): Edge<E, V> | null;
   insertVertex(key: string, value: V, notifyObservers?: boolean): Vertex<V, E>;
   insertEdge(
     key: string,

src/types/settings/placement.ts

@@ -17,7 +17,8 @@ export type DirectedGraphPlacementSettings<V, E> =
 
 export type UndirectedGraphPlacementSettings<V, E> =
   | RandomPlacementSettings
-  | CircularPlacementSettings<V, E>;
+  | CircularPlacementSettings<V, E>
+  | OrbitsPlacementSettings;
 
 export type PlacementSettings<V, E> =
   | DirectedGraphPlacementSettings<V, E>
@@ -78,6 +79,7 @@ export type OrbitsLayerSizingSettings =
 // TODO - maybe add orbits vertices sorting
 export type OrbitsPlacementSettings = (SharedPlacementSettings & {
   strategy: 'orbits';
+  roots?: Array<string>;
 }) &
   OrbitsLayerSizingSettings;
 

src/utils/algorithms/graphs.ts

@@ -1,19 +1,17 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import Queue from '@/data/Queue';
-import { Graph, Vertex } from '@/types/graphs';
+import { Vertex } from '@/types/graphs';
 
-const bfs = <V, E>(
-  graph: Graph<V, E>,
+export const bfs = <V, E>(
+  startVertices: Array<Vertex<V, E>>,
   callback: (data: {
     vertex: Vertex<V, E>;
     parent: Vertex<V, E> | null;
     startVertex: Vertex<V, E>;
     depth: number;
-  }) => boolean,
-  startVertex?: string
+  }) => boolean
 ): Record<string, Vertex<V, E> | null> => {
   const parents: Record<string, Vertex<V, E> | null> = {};
-  const startVertexNode = startVertex && graph.vertex(startVertex);
-  const startVertices = startVertexNode ? [startVertexNode] : graph.vertices;
 
   for (const sv of startVertices) {
     const queue = new Queue<{
@@ -53,11 +51,11 @@ const bfs = <V, E>(
 };
 
 export const findGraphComponents = <V, E>(
-  graph: Graph<V, E>
+  vertices: Array<Vertex<V, E>>
 ): Array<Array<Vertex<V, E>>> => {
   const components: Record<string, Array<Vertex<V, E>>> = {};
 
-  bfs(graph, ({ vertex, startVertex }) => {
+  bfs(vertices, ({ vertex, startVertex }) => {
     if (!components[startVertex.key]) {
       components[startVertex.key] = [];
     }
@@ -67,3 +65,47 @@ export const findGraphComponents = <V, E>(
 
   return Object.values(components);
 };
+
+export const findGraphDiameter = <V, E>(
+  graphComponent: Array<Vertex<V, E>>
+): { diameter: number; path: Array<Vertex<V, E>> } => {
+  // Start from the last vertex in the component (it always will be
+  // the farthest vertex from the vertex where BFS started as it
+  // was inserted last)
+  const startVertex = graphComponent[graphComponent.length - 1]!;
+
+  // Find the farthest vertex from the start vertex and the path
+  // between them
+  let farthestDistance = 0;
+  let farthestVertex: Vertex<V, E> | null = null;
+
+  const parents = bfs([startVertex], ({ vertex, depth }) => {
+    if (depth > farthestDistance) {
+      farthestDistance = depth;
+      farthestVertex = vertex;
+    }
+    return false;
+  });
+
+  // Find the path between the start vertex and the farthest vertex
+  const path: Array<Vertex<V, E>> = [];
+
+  let currentVertex = farthestVertex as Vertex<V, E> | null;
+
+  while (currentVertex) {
+    path.push(currentVertex);
+    currentVertex = parents[currentVertex.key] as Vertex<V, E> | null;
+  }
+
+  return {
+    diameter: farthestDistance,
+    path
+  };
+};
+
+export const findGraphCenter = <V, E>(
+  graphComponent: Array<Vertex<V, E>>
+): Vertex<V, E> => {
+  const { path, diameter } = findGraphDiameter(graphComponent);
+  return path[Math.floor(diameter / 2)]!;
+};