chore(react): port data part of server API

apps/client/src/widgets/note_map/NoteMap.tsx

@@ -1,6 +1,11 @@
 import { useEffect, useRef, useState } from "preact/hooks";
 import "./NoteMap.css";
-import { rgb2hex } from "./utils";
+import { getMapRootNoteId, NoteMapWidgetMode, rgb2hex } from "./utils";
+import { RefObject } from "preact";
+import FNote from "../../entities/fnote";
+import { useNoteContext, useNoteLabel } from "../react/hooks";
+import ForceGraph, { LinkObject, NodeObject } from "force-graph";
+import { loadNotesAndRelations, NotesAndRelationsData } from "./data";
 
 interface CssData {
     fontFamily: string;
@@ -8,11 +13,20 @@ interface CssData {
     mutedTextColor: string;
 }
 
-export default function NoteMap() {
+interface NoteMapProps {
+    note: FNote;
+    widgetMode: NoteMapWidgetMode;
+}
+
+type MapType = "tree" | "link";
+
+export default function NoteMap({ note, widgetMode }: NoteMapProps) {
+    console.log("Got note", note);
     const containerRef = useRef<HTMLDivElement>(null);
     const styleResolverRef = useRef<HTMLDivElement>(null);
     const [ cssData, setCssData ] = useState<CssData>();
-    console.log("Got CSS ", cssData);
+    const [ mapTypeRaw ] = useNoteLabel(note, "mapType");
+    const mapType: MapType = mapTypeRaw === "tree" ? "tree" : "link";
 
     useEffect(() => {
         if (!containerRef.current || !styleResolverRef.current) return;
@@ -22,14 +36,54 @@ export default function NoteMap() {
     return (
         <div className="note-map-widget">
             <div ref={styleResolverRef} class="style-resolver" />
-
-            <div ref={containerRef} className="note-map-container">
-                Container goes here.
-            </div>
+            <NoteGraph containerRef={containerRef} note={note} widgetMode={widgetMode} mapType={mapType} />
         </div>
     )
 }
 
+function NoteGraph({ containerRef, note, widgetMode, mapType }: {
+    containerRef: RefObject<HTMLDivElement>;
+    note: FNote;
+    widgetMode: NoteMapWidgetMode;
+    mapType: MapType;
+}) {
+    const graphRef = useRef<ForceGraph<NodeObject, LinkObject<NodeObject>>>();
+    const [ data, setData ] = useState<NotesAndRelationsData>();
+    console.log("Got data ", data);
+
+    // Build the note graph instance.
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+        const { width, height } = container.getBoundingClientRect();
+        const graph = new ForceGraph(container)
+            .width(width)
+            .height(height);
+        graphRef.current = graph;
+
+        const mapRootId = getMapRootNoteId(note.noteId, note, widgetMode);
+        if (!mapRootId) return;
+
+        const labelValues = (name: string) => note.getLabels(name).map(l => l.value) ?? [];
+        const excludeRelations = labelValues("mapExcludeRelation");
+        const includeRelations = labelValues("mapIncludeRelation");
+        loadNotesAndRelations(mapRootId, excludeRelations, includeRelations, mapType).then((data) => {
+            console.log("Got data ", data);
+        });
+
+        return () => container.replaceChildren();
+    }, [ note ]);
+
+    // Render the data.
+    useEffect(() => {
+        if (!graphRef.current || !data) return;
+        graphRef.current.graphData(data);
+    }, [ data ]);
+
+
+    return <div ref={containerRef} className="note-map-container" />;
+}
+
 function getCssData(container: HTMLElement, styleResolver: HTMLElement): CssData {
     const containerStyle = window.getComputedStyle(container);
     const styleResolverStyle = window.getComputedStyle(styleResolver);