Add note relation visualisation page (#6)

* add safeguard for tag search

* add base visualisation

* add color to visualisation, and metadata changes

app/(platform)/map/interactive-map.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { ForceGraph3D } from "react-force-graph";
+
+import { getAllNotes } from "@/helpers/notes/getAllNotes";
+import { prepareNoteRelations } from "@/helpers/notes/prepareNoteRelations";
+
+type Props = {
+  notes: NonNullable<Awaited<ReturnType<typeof getAllNotes>>>;
+};
+
+type GraphData = {
+  nodes: {
+    id: string;
+    name: string;
+    val: number;
+  }[];
+  links: {
+    source: string;
+    target: string;
+  }[];
+};
+
+function createLinksFromAllNotes(notes: Props["notes"]): GraphData["links"] {
+  return notes
+    .map((note) => {
+      return prepareNoteRelations(note).map((link) => ({
+        source: note.id,
+        target: link.id,
+      }));
+    })
+    .flat();
+}
+
+function prepareNotesForGraph(notes: Props["notes"]): GraphData {
+  const nodes = notes.map((note) => ({
+    id: note.id,
+    name: note.title,
+    val: 1,
+  }));
+
+  const links = createLinksFromAllNotes(notes);
+
+  return { nodes, links };
+}
+
+export default function InteractiveMap({ notes }: Props) {
+  const [data, setData] = useState<GraphData | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const graphData = prepareNotesForGraph(notes);
+    setData(graphData);
+  }, [notes]);
+
+  if (!data) {
+    return (
+      <div
+        className="absolute inset-0 flex items-center justify-center bg-slate-900 text-white"
+        ref={containerRef}
+      >
+        <div>Preparing your graph...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="absolute inset-0 hover:cursor-grab active:cursor-grabbing"
+      ref={containerRef}
+    >
+      <ForceGraph3D
+        width={containerRef.current?.clientWidth ?? 0}
+        height={containerRef.current?.clientHeight ?? 0}
+        graphData={data}
+        nodeAutoColorBy="name"
+        linkDirectionalParticles="value"
+        linkDirectionalParticleSpeed={(d) => d.value * 0.001}
+        linkDirectionalParticleResolution={3}
+      />
+    </div>
+  );
+}

app/(platform)/map/layout.tsx

@@ -1,45 +1,14 @@
 import { Metadata } from "next";
 
-import {
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarTrigger,
-} from "@/components/ui/menubar";
-
 export const metadata: Metadata = {
-  title: "Map",
-  description: "Map",
+  title: "Map of your notes",
+  description: "Explore your notes and their relationships.",
 };
 
 export default function MapLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return (
-    <div className="relative h-screen w-full">
-      {children}
-      <div className="absolute bottom-6 left-1/2 -translate-x-1/2">
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>Save raster output</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-          <MenubarMenu>
-            <MenubarTrigger>View</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>2D</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>3D</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      </div>
-    </div>
-  );
+  return <div className="relative h-screen w-full">{children}</div>;
 }

app/(platform)/map/page.tsx

@@ -1,7 +1,16 @@
-export default function MapPage() {
+import { getAllNotes } from "@/helpers/notes/getAllNotes";
+
+import InteractiveMap from "./interactive-map";
+
+export default async function MapPage() {
+  const notes = await getAllNotes();
+
   return (
-    <main>
-      <h2>Map</h2>
+    <main className="relative h-screen w-full">
+      <InteractiveMap notes={notes ?? []} />
     </main>
   );
 }
+
+export const dynamic = "force-dynamic";
+export const fetchCache = "force-no-store";

app/(platform)/notes/[noteId]/tag-manager.tsx

@@ -63,7 +63,11 @@ export default function TagManager({ note, open, setOpen }: Props) {
     setOpen(false);
   }
 
-  const showTagCreationSuggestion = !!localSearch;
+  const showTagCreationSuggestion =
+    !!localSearch &&
+    !results.some(
+      (tag) => tag.name.toLowerCase() === localSearch.toLowerCase()
+    );
 
   return (
     <CommandDialog open={open} onOpenChange={handleClose}>

app/(platform)/notes/page.tsx

@@ -63,5 +63,6 @@ export default async function AllNotesPage() {
     </main>
   );
 }
+
 export const dynamic = "force-dynamic";
 export const fetchCache = "force-no-store";

helpers/notes/getAllNotes.ts

@@ -22,7 +22,7 @@ export async function getAllNotes() {
 
     const notes = await prisma.note.findMany({
       where: { authorId: dbUser.id, deleted: false },
-      include: { tags: true },
+      include: { tags: true, relatedNotes: true, relatedTo: true },
       orderBy: { updatedAt: "desc" },
       take: 10,
     });