From 79145b945cfae5c00be736e28d5067b9351df2b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <contact@maciejpedzi.ch>
Date: Mon, 29 Apr 2024 21:18:25 +0200
Subject: [PATCH] Merge Graph and PathVisualiser components

---
 src/components/DriversList.astro              |  16 ---
 src/components/PathVisualiser.astro           | 121 ------------------
 .../{Graph.astro => ShortestPathsGraph.astro} |  60 ++++++---
 3 files changed, 43 insertions(+), 154 deletions(-)
 delete mode 100644 src/components/DriversList.astro
 delete mode 100644 src/components/PathVisualiser.astro
 rename src/components/{Graph.astro => ShortestPathsGraph.astro} (53%)

diff --git a/src/components/DriversList.astro b/src/components/DriversList.astro
deleted file mode 100644
index af70500..0000000
--- a/src/components/DriversList.astro
+++ /dev/null
@@ -1,16 +0,0 @@
----
-import { db } from '@/db';
-
-const { records } = await db.executeQuery(
-  `MATCH (d:Driver)
-  RETURN
-    (d.forename + " " + d.surname) AS fullname
-  ORDER BY
-    toUpper(d.surname),
-    toUpper(d.forename)`
-);
----
-
-<datalist id="drivers">
-  {records.map((rec) => <option value={rec.get('fullname')} />)}
-</datalist>
diff --git a/src/components/PathVisualiser.astro b/src/components/PathVisualiser.astro
deleted file mode 100644
index d20f869..0000000
--- a/src/components/PathVisualiser.astro
+++ /dev/null
@@ -1,121 +0,0 @@
----
-import type { Path } from 'neo4j-driver';
-import type { Edge, Node } from 'vis-network';
-
-import Graph from '@/components/Graph.astro';
-
-import { db } from '@/db';
-import type { Driver } from '@/models/driver';
-
-interface Props {
-  source: string;
-  dest: string;
-}
-
-const { source, dest } = Astro.props;
-
-const pluralise = (word: string, num: number) =>
-  num + ' ' + word + (num > 1 ? 's' : '');
-
-let paramsNotEqual = source !== dest;
-let numPaths = 0;
-let degsOfSeparation = 0;
-
-let nodes: Node[] = [];
-let edges: Edge[] = [];
-
-if (paramsNotEqual) {
-  const { records } = await db.executeQuery(
-    `MATCH (n:Driver)
-    WHERE
-      (n.forename + " " + n.surname) = $source
-      OR (n.forename + " " + n.surname) = $dest
-    WITH collect(n) AS nodes
-    UNWIND nodes AS s
-    UNWIND nodes AS d
-    WITH *
-    WHERE
-      (s.forename + " " + s.surname) = $source
-      AND (d.forename + " " + d.surname) = $dest
-    MATCH path = allShortestPaths((s)-[*..20]-(d))
-    RETURN path`,
-    { source, dest }
-  );
-
-  numPaths = records.length;
-  degsOfSeparation =
-    records.length > 0 ? (records[0].get('path') as Path).length : 0;
-
-  const pairsOfRelatedDrivers = records.flatMap((rec) =>
-    (rec.get('path') as Path).segments.map(
-      ({ start, end }) => [start.properties, end.properties] as Driver[]
-    )
-  );
-
-  nodes = [
-    ...new Map(
-      pairsOfRelatedDrivers.flatMap((pair) =>
-        pair.map(({ driverId, forename, surname }) => [
-          driverId.toNumber(),
-          forename + ' ' + surname
-        ])
-      )
-    ).entries()
-  ].map(([id, label]) => ({ id, label }));
-
-  edges = [
-    ...new Set(
-      pairsOfRelatedDrivers.map(
-        ([from, to]) => from.driverId.toString() + '-' + to.driverId.toString()
-      )
-    ).values()
-  ].map((pair) => {
-    const [from, to] = pair.split('-').map(Number);
-
-    return { from, to };
-  });
-}
----
-
-<p>
-  {
-    paramsNotEqual ? (
-      nodes.length > 0 ? (
-        degsOfSeparation == 1 ? (
-          'Colosally, these drivers were teammates!'
-        ) : (
-          <span>
-            Found <strong>{pluralise('path', numPaths)}</strong> with
-            <strong>{pluralise('degree', degsOfSeparation)}</strong>
-            of separation.
-          </span>
-        )
-      ) : (
-        'No paths were found!'
-      )
-    ) : (
-      "There's nothing wrong with the inputs, except they're identical."
-    )
-  }
-</p>
-{
-  nodes.length > 0 && (
-    <>
-      <div id="graph-container">
-        <Graph nodes={nodes} edges={edges} />
-      </div>
-      <small>
-        Drag to pan, scroll to zoom. Click on a node to highlight it and its
-        links.
-      </small>
-    </>
-  )
-}
-
-<style>
-  #graph-container {
-    height: 600px;
-    border: 1px solid gray;
-    margin-bottom: 0.5rem;
-  }
-</style>
diff --git a/src/components/Graph.astro b/src/components/ShortestPathsGraph.astro
similarity index 53%
rename from src/components/Graph.astro
rename to src/components/ShortestPathsGraph.astro
index d7fe0b2..8802c5b 100644
--- a/src/components/Graph.astro
+++ b/src/components/ShortestPathsGraph.astro
@@ -1,21 +1,46 @@
 ---
-import type { Node, Edge } from 'vis-network/esnext';
+import { getShortestPaths } from '@/db/getShortestPaths';
+import { pluralise } from '@/utils/pluralise';
 
-interface Props {
-  nodes: Node[];
-  edges: Edge[];
+type Props = Awaited<ReturnType<typeof getShortestPaths>>;
+
+const { nodes, edges, numPaths, degsOfSeparation } = Astro.props;
+---
+
+<p>
+  {
+    nodes.length > 0 ? (
+      degsOfSeparation == 1 ? (
+        'Colosally, these drivers were teammates!'
+      ) : (
+        <span>
+          Found <strong>{pluralise('path', numPaths)}</strong> with
+          <strong>{pluralise('degree', degsOfSeparation)}</strong>
+          of separation.
+        </span>
+      )
+    ) : (
+      'No paths were found!'
+    )
+  }
+</p>
+{
+  nodes.length > 0 && (
+    <>
+      <vis-graph
+        data-nodes={JSON.stringify(nodes)}
+        data-edges={JSON.stringify(edges)}
+      >
+        <div id="graph-container" />
+      </vis-graph>
+      <small>
+        Drag to pan, scroll to zoom. Click on a node to highlight it and its
+        links.
+      </small>
+    </>
+  )
 }
 
-const { nodes, edges } = Astro.props;
----
-
-<vis-graph
-  data-nodes={JSON.stringify(nodes)}
-  data-edges={JSON.stringify(edges)}
->
-  <div></div>
-</vis-graph>
-
 <script>
   import type { Node, Data, Edge, Options } from 'vis-network/esnext';
   import { DataSet } from 'vis-data/esnext';
@@ -46,7 +71,6 @@ const { nodes, edges } = Astro.props;
           }
         },
         edges: {
-          arrows: 'to',
           color: '#4178e7'
         },
         layout: {
@@ -68,8 +92,10 @@ const { nodes, edges } = Astro.props;
 </script>
 
 <style>
-  div {
+  #graph-container {
     width: 100%;
-    height: 100%;
+    height: 600px;
+    border: 1px solid gray;
+    margin-bottom: 1rem;
   }
 </style>