Improve disconnected graph placement for circular strategy (#70)

Author: MatiPl01

package.json

@@ -21,6 +21,7 @@
     "@shopify/react-native-skia": "^0.1.185",
     "nativewind": "^2.0.11",
     "postcss": "^8.0.9",
+    "potpack": "^2.0.0",
     "react": "18.2.0",
     "react-native": "0.71.5",
     "react-native-gesture-handler": "^2.9.0",

src/App.tsx

@@ -6,101 +6,94 @@ import DefaultEdgeLabelRenderer from '@/components/graphs/labels/renderers/Defau
 import { DirectedGraph } from '@/models/graphs';
 import PannableScalableView from '@/views/PannableScalableView';
 
-import GraphEventsProvider from './context/graphEvents';
-
-const CATEGORIES_GRAPH = {
+const GRAPH1 = {
   vertices: [
-    { key: 'Root', data: [] },
-    { key: 'Sport', data: [] },
-    { key: 'Health', data: [] },
-    { key: 'Diet', data: [] },
-    { key: 'Sleep', data: [] },
-    { key: 'Work', data: [] }
+    { key: 'A', data: 'A' },
+    { key: 'B', data: 'B' },
+    { key: 'C', data: 'C' },
+    { key: 'D', data: 'D' },
+    { key: 'E', data: 'E' }
   ],
   edges: [
-    { from: 'Root', to: 'Sport', key: 'E1', data: [] },
-    { from: 'Root', to: 'Health', key: 'E2', data: [] },
-    { from: 'Root', to: 'Diet', key: 'E3', data: [] },
-    { from: 'Root', to: 'Sleep', key: 'E4', data: [] },
-    { from: 'Root', to: 'Work', key: 'E5', data: [] }
+    { 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' }
   ]
 };
 
-const SPORT_GRAPH = {
+const GRAPH2 = {
   vertices: [
-    { key: 'Sport', data: [] },
-    { key: 'Football', data: [] },
-    { key: 'Basketball', data: [] },
-    { key: 'Gym', data: [] },
-    { key: 'Running', data: [] },
-    { key: 'Cycling', data: [] },
-    { key: 'Root', data: [] }
+    { key: 'F', data: 'F' },
+    { key: 'G', data: 'G' },
+    { key: 'H', data: 'H' },
+    { key: 'I', data: 'I' },
+    { key: 'J', data: 'J' },
+    { key: 'K', data: 'K' },
+    { key: 'L', data: 'L' },
+    { key: 'M', data: 'M' },
+    { key: 'N', data: 'N' },
+    { key: 'O', data: 'O' }
   ],
   edges: [
-    { from: 'Sport', to: 'Football', key: 'E1', data: [] },
-    { from: 'Sport', to: 'Basketball', key: 'E2', data: [] },
-    { from: 'Sport', to: 'Gym', key: 'E3', data: [] },
-    { from: 'Sport', to: 'Running', key: 'E4', data: [] },
-    { from: 'Sport', to: 'Cycling', key: 'E5', data: [] },
-    { from: 'Root', to: 'Sport', key: 'E6', data: [] }
+    { 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' }
   ]
 };
 
-const GYM_GRAPH = {
+const GRAPH3 = {
   vertices: [
-    { key: 'Gym', data: [] },
-    { key: 'Bench Press', data: [] },
-    { key: 'Squats', data: [] },
-    { key: 'Deadlift', data: [] },
-    { key: 'Push Ups', data: [] },
-    { key: 'Sport', data: [] }
+    { key: 'P', data: 'P' },
+    { key: 'Q', data: 'Q' }
   ],
   edges: [
-    { from: 'Gym', to: 'Bench Press', key: 'E1', data: [] },
-    { from: 'Gym', to: 'Squats', key: 'E2', data: [] },
-    { from: 'Gym', to: 'Deadlift', key: 'E3', data: [] },
-    { from: 'Gym', to: 'Push Ups', key: 'E5', data: [] },
-    { from: 'Sport', to: 'Gym', key: 'E6', data: [] }
+    { key: 'PQ1', from: 'P', to: 'Q', data: 'PQ1' },
+    { key: 'PQ2', from: 'P', to: 'Q', data: 'PQ2' }
   ]
 };
 
+const DISCONNECTED_GRAPH = {
+  vertices: [...GRAPH1.vertices, ...GRAPH2.vertices, ...GRAPH3.vertices],
+  edges: [...GRAPH1.edges, ...GRAPH2.edges, ...GRAPH3.edges]
+};
+
 export default function App() {
   const graph = DirectedGraph.fromData(
-    CATEGORIES_GRAPH.vertices,
-    CATEGORIES_GRAPH.edges
+    DISCONNECTED_GRAPH.vertices,
+    DISCONNECTED_GRAPH.edges
   );
 
   return (
     <SafeAreaView className='grow'>
       <GestureHandlerRootView className='grow'>
         <View className='grow bg-black'>
-          <GraphEventsProvider
-            onVertexPress={({ key }) => {
-              if (key === 'Sport') {
-                graph.replaceBatch(SPORT_GRAPH);
-              } else if (key === 'Gym') {
-                graph.replaceBatch(GYM_GRAPH);
-              } else if (key === 'Root') {
-                graph.replaceBatch(CATEGORIES_GRAPH);
-              }
-            }}>
-            <PannableScalableView objectFit='contain' controls>
-              <DirectedGraphComponent
-                graph={graph}
-                settings={{
-                  // TODO - fix orbits strategy padding
-                  placement: {
-                    strategy: 'orbits',
-                    layerSizing: 'equal',
-                    minVertexSpacing: 125
+          <PannableScalableView objectFit='contain' controls>
+            <DirectedGraphComponent
+              graph={graph}
+              settings={{
+                // TODO - fix orbits strategy padding
+                placement: {
+                  strategy: 'circles',
+                  minVertexSpacing: 100
+                },
+                components: {
+                  edge: {
+                    type: 'curved'
                   }
-                }}
-                renderers={{
-                  label: DefaultEdgeLabelRenderer
-                }}
-              />
-            </PannableScalableView>
-          </GraphEventsProvider>
+                }
+              }}
+              renderers={{
+                label: DefaultEdgeLabelRenderer
+              }}
+            />
+          </PannableScalableView>
         </View>
       </GestureHandlerRootView>
     </SafeAreaView>

src/types/settings/placement.ts

@@ -2,13 +2,18 @@ import { Vector } from '@shopify/react-native-skia';
 
 import { Vertex } from '../graphs';
 
-export type PlacementStrategy = 'random' | 'circular' | 'orbits' | 'tree';
+export type PlacementStrategy =
+  | 'random'
+  | 'circle'
+  | 'circles'
+  | 'orbits'
+  | 'trees';
 
 export type DirectedGraphPlacementSettings<V, E> =
   | RandomPlacementSettings
   | CircularPlacementSettings<V, E>
   | OrbitsPlacementSettings
-  | TreePlacementSettings;
+  | TreesPlacementSettings;
 
 export type UndirectedGraphPlacementSettings<V, E> =
   | RandomPlacementSettings
@@ -78,11 +83,11 @@ export type OrbitsPlacementSettings = (SharedPlacementSettings & {
 
 export type CircularPlacementSettings<V, E> = SharedPlacementSettings &
   SortablePlacementSettings<V, E> & {
-    strategy: 'circular';
+    strategy: 'circle' | 'circles';
   };
 
-export type TreePlacementSettings = SharedPlacementSettings & {
-  strategy: 'tree';
+export type TreesPlacementSettings = SharedPlacementSettings & {
+  strategy: 'trees';
 };
 
 export type PlacedVerticesPositions = Record<string, Vector>;

src/utils/algorithms/graphs.ts

@@ -0,0 +1,69 @@
+import Queue from '@/data/Queue';
+import { Graph, Vertex } from '@/types/graphs';
+
+const bfs = <V, E>(
+  graph: Graph<V, E>,
+  callback: (data: {
+    vertex: Vertex<V, E>;
+    parent: Vertex<V, E> | null;
+    startVertex: Vertex<V, E>;
+    depth: number;
+  }) => boolean,
+  startVertex?: string
+): 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<{
+      vertex: Vertex<V, E>;
+      parent: Vertex<V, E> | null;
+      depth: number;
+    }>();
+    queue.enqueue({ vertex: sv, parent: null, depth: 0 });
+
+    while (!queue.isEmpty()) {
+      const { vertex, parent, depth } = queue.dequeue() as {
+        vertex: Vertex<V, E>;
+        parent: Vertex<V, E>;
+        depth: number;
+      };
+      if (parents[vertex.key] !== undefined) {
+        continue;
+      }
+      parents[vertex.key] = parent;
+      if (callback({ vertex, parent, depth, startVertex: sv })) {
+        return parents;
+      }
+      vertex.edges.forEach(edge => {
+        const nextVertex = edge.vertices.find(v => v.key !== vertex.key);
+        if (nextVertex) {
+          queue.enqueue({
+            vertex: nextVertex,
+            parent: vertex,
+            depth: depth + 1
+          });
+        }
+      });
+    }
+  }
+
+  return parents;
+};
+
+export const findGraphComponents = <V, E>(
+  graph: Graph<V, E>
+): Array<Array<Vertex<V, E>>> => {
+  const components: Record<string, Array<Vertex<V, E>>> = {};
+
+  bfs(graph, ({ vertex, startVertex }) => {
+    if (!components[startVertex.key]) {
+      components[startVertex.key] = [];
+    }
+    components[startVertex.key]!.push(vertex);
+    return false;
+  });
+
+  return Object.values(components);
+};

src/utils/placement/index.ts

@@ -1,7 +1,10 @@
+import { DirectedGraph } from '@/models/graphs';
 import { Graph } from '@/types/graphs';
 import { GraphLayout, PlacementSettings } from '@/types/settings';
 
-import placeVerticesCircular from './strategies/circular.placement';
+import { findGraphComponents } from '../algorithms/graphs';
+import placeVerticesOnCircle from './strategies/circle.placement';
+import placeVerticesOnCircles from './strategies/circles.placement';
 import placeVerticesOnOrbits from './strategies/orbits.placement';
 import placeVerticesRandomly from './strategies/random.placement';
 import placeVerticesOnTree from './strategies/tree.placement';
@@ -12,14 +15,24 @@ export const placeVertices = <V, E>(
   settings?: PlacementSettings<V, E>
 ): GraphLayout => {
   switch (settings?.strategy) {
-    case 'circular':
-      return placeVerticesCircular(graph, vertexRadius, settings);
+    case 'circle':
+      return placeVerticesOnCircle(graph.vertices, vertexRadius, settings);
+    case 'circles':
+      return placeVerticesOnCircles(
+        findGraphComponents(graph),
+        vertexRadius,
+        settings
+      );
     case 'orbits':
-      return placeVerticesOnOrbits(graph, vertexRadius, settings);
-    case 'tree':
-      return placeVerticesOnTree(graph, vertexRadius, settings);
+      return placeVerticesOnOrbits(
+        graph as DirectedGraph<V, E>, // TODO - change this to take graph components after adding undirected graphs
+        vertexRadius,
+        settings
+      );
+    case 'trees':
+      return placeVerticesOnTree(graph, vertexRadius, settings); // TODO - change this to take graph components after adding undirected graphs support
     default:
     case 'random':
-      return placeVerticesRandomly(graph, vertexRadius, settings);
+      return placeVerticesRandomly(graph.vertices, vertexRadius, settings);
   }
 };

src/utils/placement/shared.ts

@@ -1,4 +1,7 @@
+import potpack from 'potpack';
+
 import { Vertex } from '@/types/graphs';
+import { GraphLayout } from '@/types/settings/placement';
 
 export const defaultSortComparator = <V, E>(
   u: Vertex<V, E>,
@@ -12,3 +15,36 @@ export const defaultSortComparator = <V, E>(
   }
   return 0;
 };
+
+export const arrangeGraphComponents = (
+  graphComponents: Array<GraphLayout>
+): GraphLayout => {
+  // Prepare graph components for packing
+  const preparedComponents = graphComponents.map(
+    ({ width: w, height: h, verticesPositions }) => ({
+      w,
+      h,
+      x: 0,
+      y: 0,
+      verticesPositions
+    })
+  );
+  // Pack graph components on the screen
+  const packed = potpack(preparedComponents);
+  // Translate graph components to correct positions on the screen
+  return {
+    width: packed.w,
+    height: packed.h,
+    verticesPositions: Object.fromEntries(
+      preparedComponents.flatMap(({ verticesPositions, x, y, w, h }) =>
+        Object.entries(verticesPositions).map(([key, { x: vx, y: vy }]) => [
+          key,
+          {
+            x: vx + x + (w - packed.w) / 2,
+            y: vy + y + (h - packed.h) / 2
+          }
+        ])
+      )
+    )
+  };
+};