Better labels

Author: montoyo

custom.d.ts

@@ -0,0 +1,4 @@
+declare module "d3-force-3d" {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    export function forceCollide(f: number | ((n: unknown) => number)): any;
+}

src/graph-view.tsx

@@ -1,16 +1,26 @@
-import React from "react";
+import React, { RefObject } from "react";
 import * as N3 from "n3";
-import ForceGraph, { NodeObject } from "react-force-graph-2d";
+import ForceGraph, {
+    ForceGraphMethods,
+    LinkObject,
+    NodeObject
+} from "react-force-graph-2d";
 import { TTLData } from "./util";
+import { forceCollide } from "d3-force-3d";
 
 type GraphViewProps = {
     data: TTLData;
 };
 
 type Node = {
+    x?: number;
+    y?: number;
     id: string;
     name: string;
     data: N3.Quad_Object;
+    vx: number;
+    vy: number;
+    className: string | null;
 };
 
 type Link = {
@@ -19,29 +29,53 @@ type Link = {
     data: N3.Quad;
 };
 
+type GraphRef = ForceGraphMethods<
+    NodeObject<Node>,
+    LinkObject<Node, Link> | undefined
+>;
+
+function stripPrefix(name: string, prefixes: Record<string, string>): string {
+    for (const [k, v] of Object.entries(prefixes)) {
+        if (name.startsWith(v)) {
+            name = `${k}:${name.substring(v.length)}`;
+            break;
+        }
+    }
+
+    return name;
+}
+
 function mkNode(data: N3.Quad_Object, prefixes: Record<string, string>): Node {
     let name = "?";
 
     if (data.termType === "NamedNode") {
-        name = data.value;
-
-        for (const [k, v] of Object.entries(prefixes)) {
-            if (name.startsWith(v)) {
-                name = `${k}:${name.substring(v.length)}`;
-                break;
-            }
-        }
+        name = stripPrefix(data.value, prefixes);
+    } else if (data.termType === "Literal") {
+        name = "(Literal)";
     }
 
     return {
         id: data.id,
         name,
-        data
+        data,
+        vx: Math.random() * 2.0 - 1.0,
+        vy: Math.random() * 2.0 - 1.0,
+        className: null
     };
 }
 
+const LINE_HEIGHT = 16;
+
 function getNodeSize(n: Node): [number, number] {
-    return [n.name.length * 6 + 12, 24];
+    let lines = 1;
+    let len = n.name.length;
+
+    if (n.className !== null) {
+        lines++;
+        len = Math.max(len, n.className.length);
+    }
+
+    return [len * 6 + 12, lines * LINE_HEIGHT + 8];
 }
 
 function renderNode(n: NodeObject<Node>, ctx: CanvasRenderingContext2D): void {
@@ -58,8 +92,15 @@ function renderNode(n: NodeObject<Node>, ctx: CanvasRenderingContext2D): void {
     ctx.roundRect(x - width * 0.5, y - height * 0.5, width, height, 5);
     ctx.fill();
 
-    ctx.fillStyle = "white";
-    ctx.fillText(n.name, x, y);
+    if (n.className === null) {
+        ctx.fillStyle = "white";
+        ctx.fillText(n.name, x, y);
+    } else {
+        ctx.fillStyle = "#808080";
+        ctx.fillText(n.className, x, y - LINE_HEIGHT * 0.5);
+        ctx.fillStyle = "white";
+        ctx.fillText(n.name, x, y + LINE_HEIGHT * 0.5);
+    }
 }
 
 function pointerAreaPaint(
@@ -69,21 +110,32 @@ function pointerAreaPaint(
 ): void {
     const [width, height] = getNodeSize(n);
     ctx.fillStyle = color;
-    ctx.fillRect(n.x! - width * 0.5, n.y! - height, width, height);
+    ctx.fillRect(n.x! - width * 0.5, n.y! - height * 0.5, width, height);
 }
 
 const GraphView = React.memo(function GraphView({
     data
 }: GraphViewProps): React.JSX.Element {
+    const graphRef = React.useRef<GraphRef>(null);
+
     const graphData = React.useMemo(() => {
         const nodeMap = new Map<string, Node>();
+        const types: N3.Quad[] = [];
         const links: Link[] = [];
         const prefixes = {
             ...data.prefixes,
             ex: "http://example.org/"
         };
 
         for (const q of data.quads) {
+            if (
+                q.predicate.value ===
+                "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"
+            ) {
+                types.push(q);
+                continue;
+            }
+
             let subject = nodeMap.get(q.subject.id);
             if (!subject) {
                 subject = mkNode(q.subject, prefixes);
@@ -103,12 +155,38 @@ const GraphView = React.memo(function GraphView({
             });
         }
 
+        for (const q of types) {
+            const obj = nodeMap.get(q.subject.id);
+
+            if (obj && q.object.termType === "NamedNode") {
+                const cn = stripPrefix(q.object.value, prefixes);
+                obj.className = `«${cn}»`;
+            }
+        }
+
         return {
             nodes: Array.from(nodeMap.values()),
             links
         };
     }, [data]);
 
+    React.useEffect(() => {
+        const graph = graphRef.current;
+        if (!graph) {
+            return;
+        }
+
+        graph.d3Force(
+            "collide",
+            forceCollide(n => {
+                const [w, h] = getNodeSize(n as Node);
+                return Math.max(w, h) * 0.5 + 5;
+            })
+        );
+
+        graph.d3Force("charge", null);
+    }, [graphData.nodes]);
+
     return (
         <div className="w-full h-full">
             <ForceGraph
@@ -119,6 +197,9 @@ const GraphView = React.memo(function GraphView({
                 linkWidth={2}
                 linkDirectionalArrowLength={10}
                 linkDirectionalArrowRelPos={1.0}
+                linkCurvature={0.1}
+                ref={graphRef as RefObject<GraphRef>}
+                cooldownTime={Number.POSITIVE_INFINITY}
             />
         </div>
     );

tsconfig.json

@@ -46,7 +46,7 @@
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 
     /* Emit */
-    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    "declaration": true,                                 /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */