add color to visualisation, and metadata changes

bercivarga · Mar 10, 2024 · 332ebe8 · 332ebe8
1 parent 653495b
commit 332ebe8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/app/(platform)/map/interactive-map.tsx b/app/(platform)/map/interactive-map.tsx
@@ -54,15 +54,16 @@ export default function InteractiveMap({ notes }: Props) {
     setData(graphData);
   }, [notes]);
 
-  if (!data)
+  if (!data) {
     return (
       <div
         className="absolute inset-0 flex items-center justify-center bg-slate-900 text-white"
         ref={containerRef}
       >
-        <div>Loading...</div>
+        <div>Preparing your graph...</div>
       </div>
     );
+  }
 
   return (
     <div
@@ -73,11 +74,10 @@ export default function InteractiveMap({ notes }: Props) {
         width={containerRef.current?.clientWidth ?? 0}
         height={containerRef.current?.clientHeight ?? 0}
         graphData={data}
-        nodeAutoColorBy="group"
-        linkDirectionalParticles={2}
-        linkDirectionalParticleWidth={2}
-        linkDirectionalParticleSpeed={0.005}
-        linkDirectionalParticleColor={() => "rgba(255, 255, 255, 0.5)"}
+        nodeAutoColorBy="name"
+        linkDirectionalParticles="value"
+        linkDirectionalParticleSpeed={(d) => d.value * 0.001}
+        linkDirectionalParticleResolution={3}
       />
     </div>
   );

diff --git a/app/(platform)/map/layout.tsx b/app/(platform)/map/layout.tsx
@@ -1,7 +1,7 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Interactive map",
+  title: "Map of your notes",
   description: "Explore your notes and their relationships.",
 };