Add better self-loops error, fix multiple edges in trees strategy (#83)

Author: MatiPl01

src/components/graphs/GraphComponent.tsx

@@ -1,6 +1,6 @@
-import { Group, Rect, Vector } from '@shopify/react-native-skia';
+import { Group, Vector } from '@shopify/react-native-skia';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useAnimatedReaction, useDerivedValue } from 'react-native-reanimated';
+import { useAnimatedReaction } from 'react-native-reanimated';
 
 import {
   ARROW_COMPONENT_SETTINGS,
@@ -388,22 +388,8 @@ 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/examples/Development.tsx

@@ -94,7 +94,7 @@ let idx = 0;
 let mode = 0;
 
 export default function App() {
-  const graph = DirectedGraph.fromData([{ key: 'A', data: 'A' }]);
+  const graph = DirectedGraph.fromData({ vertices: [{ key: 'A', data: 'A' }] });
 
   // TODO - remove this useEffect after testing
   useEffect(() => {

src/models/graphs/DirectedGraph.ts

@@ -12,12 +12,12 @@ export default class DirectedGraph<V, E> extends Graph<
   DirectedEdgeData<E>
 > {
   // eslint-disable-next-line no-shadow
-  static fromData<V, E>(
-    vertices: Array<VertexData<V>>,
-    edges?: Array<DirectedEdgeData<E>>
-  ): DirectedGraph<V, E> {
+  static fromData<V, E>(data: {
+    vertices: Array<VertexData<V>>;
+    edges?: Array<DirectedEdgeData<E>>;
+  }): DirectedGraph<V, E> {
     const instance = new DirectedGraph<V, E>();
-    instance.insertBatch({ vertices, edges });
+    instance.insertBatch(data);
     return instance;
   }
 
@@ -43,6 +43,7 @@ export default class DirectedGraph<V, E> extends Graph<
     targetKey: string,
     notifyObservers?: boolean
   ): DirectedEdge<E, V> {
+    this.checkSelfLoop(sourceKey, targetKey);
     const source = this.getVertex(sourceKey);
     const target = this.getVertex(targetKey);
 

src/models/graphs/Graph.ts

@@ -256,4 +256,13 @@ export default abstract class Graph<
       observer.graphChanged();
     });
   }
+
+  // TODO - remove this method after adding self-loop edges support
+  protected checkSelfLoop(vertex1key: string, vertex2key: string): void {
+    if (vertex1key === vertex2key) {
+      throw new Error(
+        `Self-loop edges are not yet supported. Vertex key: ${vertex1key}`
+      );
+    }
+  }
 }

src/models/graphs/UndirectedGraph.ts

@@ -12,12 +12,12 @@ export default class UndirectedGraph<V, E> extends Graph<
   UndirectedEdgeData<E>
 > {
   // eslint-disable-next-line no-shadow
-  static fromData<V, E>(
-    vertices: Array<VertexData<V>>,
-    edges?: Array<UndirectedEdgeData<E>>
-  ): UndirectedGraph<V, E> {
+  static fromData<V, E>(data: {
+    vertices: Array<VertexData<V>>;
+    edges?: Array<UndirectedEdgeData<E>>;
+  }): UndirectedGraph<V, E> {
     const instance = new UndirectedGraph<V, E>();
-    instance.insertBatch({ vertices, edges });
+    instance.insertBatch(data);
     return instance;
   }
 
@@ -43,6 +43,7 @@ export default class UndirectedGraph<V, E> extends Graph<
     vertex2key: string,
     notifyObservers = true
   ): UndirectedEdge<E, V> {
+    this.checkSelfLoop(vertex1key, vertex2key);
     const vertex1 = this.getVertex(vertex1key);
     const vertex2 = this.getVertex(vertex2key);
 

src/utils/placement/strategies/trees.placement.ts

@@ -69,12 +69,23 @@ const arrangeVertices = <V, E>(
 const arrangeVerticesRecur = <V, E>(
   arrangedVertices: Record<string, { row: number; col: number }>,
   vertex: Vertex<V, E>,
+  visitedVertices: Set<string> = new Set(),
   currentColumn = 0,
   currentDepth = 0
 ): number => {
-  const unusedVertexNeighbors = vertex.neighbors.filter(
-    neighbor => !arrangedVertices[neighbor.key]
-  );
+  visitedVertices.add(vertex.key);
+  const unusedVertexNeighbors: Array<Vertex<V, E>> = [];
+  const alreadyCheckedNeighbors = new Set<string>();
+
+  vertex.neighbors.forEach(neighbor => {
+    if (
+      !alreadyCheckedNeighbors.has(neighbor.key) &&
+      !visitedVertices.has(neighbor.key)
+    ) {
+      alreadyCheckedNeighbors.add(neighbor.key);
+      unusedVertexNeighbors.push(neighbor);
+    }
+  });
 
   if (unusedVertexNeighbors.length === 0) {
     return 1;
@@ -86,6 +97,7 @@ const arrangeVerticesRecur = <V, E>(
     const childSubtreeWidth = arrangeVerticesRecur(
       arrangedVertices,
       neighbor,
+      visitedVertices,
       currentColumn + subtreeWidth,
       currentDepth + 1
     );