@lapis-notes/graph 0.1.0

package/dist/graph-data.js

@@ -0,0 +1,493 @@
+const GLOBAL_GRAPH_PAGE_SIZE = 256;
+const LOCAL_GRAPH_QUERY_LIMIT = 10_000;
+const LOCAL_GRAPH_PATH_BATCH_SIZE = 200;
+function graphPathBatches(paths) {
+    const unique = [...new Set(paths)];
+    const batches = [];
+    for (let index = 0; index < unique.length; index += LOCAL_GRAPH_PATH_BATCH_SIZE) {
+        batches.push(unique.slice(index, index + LOCAL_GRAPH_PATH_BATCH_SIZE));
+    }
+    return batches;
+}
+function basename(path) {
+    return path.split("/").at(-1) ?? path;
+}
+function labelForPath(path) {
+    return basename(path).replace(/\.[^.]+$/, "");
+}
+function fileNodeId(path) {
+    return `note:${path}`;
+}
+function attachmentNodeId(path) {
+    return `attachment:${path}`;
+}
+function unresolvedNodeId(target) {
+    return `unresolved:${target}`;
+}
+function tagNodeId(tag) {
+    return `tag:${tag}`;
+}
+function parseLinkText(linkText) {
+    const [value] = linkText.split("|", 1);
+    const [path] = value.split("#", 1);
+    return path.trim();
+}
+export function normalizeGraphTag(tag) {
+    const value = tag.trim().replace(/^#+/, "");
+    return value.length ? `#${value}` : "";
+}
+function isMarkdownPath(path) {
+    return /\.(?:md|markdown)$/i.test(path);
+}
+function cloneNode(node) {
+    return {
+        ...node,
+        tags: [...node.tags],
+        groupIds: [...node.groupIds],
+    };
+}
+function ensureNoteNodeFromRow(nodes, row) {
+    const { file } = row;
+    const id = fileNodeId(file.path);
+    let node = nodes.get(id);
+    if (!node) {
+        node = {
+            id,
+            label: labelForPath(file.path),
+            path: file.path,
+            type: "note",
+            exists: true,
+            refCount: 0,
+            outgoingCount: 0,
+            tags: [],
+            groupIds: [],
+            mtime: file.mtime,
+            extension: file.extension.toLowerCase(),
+        };
+        nodes.set(id, node);
+    }
+    node.tags = [
+        ...new Set(row.tags.map((record) => normalizeGraphTag(record.tag)).filter(Boolean)),
+    ];
+    node.mtime = file.mtime;
+    node.extension = file.extension.toLowerCase();
+    return node;
+}
+function ensureNoteNodeFromFile(nodes, file) {
+    const id = fileNodeId(file.path);
+    let node = nodes.get(id);
+    if (!node) {
+        node = {
+            id,
+            label: labelForPath(file.path),
+            path: file.path,
+            type: "note",
+            exists: true,
+            refCount: 0,
+            outgoingCount: 0,
+            tags: [],
+            groupIds: [],
+            ctime: file.stat?.ctime,
+            mtime: file.stat?.mtime,
+            extension: file.extension?.toLowerCase(),
+        };
+        nodes.set(id, node);
+    }
+    return node;
+}
+function ensureAttachmentNode(nodes, path, file) {
+    const id = attachmentNodeId(path);
+    let node = nodes.get(id);
+    if (!node) {
+        node = {
+            id,
+            label: basename(path),
+            path,
+            type: "attachment",
+            exists: true,
+            refCount: 0,
+            outgoingCount: 0,
+            tags: [],
+            groupIds: [],
+            ctime: file?.stat?.ctime,
+            mtime: file?.stat?.mtime,
+            extension: file?.extension?.toLowerCase() ?? basename(path).split(".").at(-1),
+        };
+        nodes.set(id, node);
+    }
+    return node;
+}
+function ensureUnresolvedNode(nodes, target) {
+    const id = unresolvedNodeId(target);
+    let node = nodes.get(id);
+    if (!node) {
+        node = {
+            id,
+            label: target,
+            path: target,
+            type: "unresolved",
+            exists: false,
+            refCount: 0,
+            outgoingCount: 0,
+            tags: [],
+            groupIds: [],
+        };
+        nodes.set(id, node);
+    }
+    return node;
+}
+function ensureTagNode(nodes, tag) {
+    const normalized = normalizeGraphTag(tag);
+    const id = tagNodeId(normalized);
+    let node = nodes.get(id);
+    if (!node) {
+        node = {
+            id,
+            label: normalized,
+            path: normalized,
+            type: "tag",
+            exists: true,
+            refCount: 0,
+            outgoingCount: 0,
+            tags: [],
+            groupIds: [],
+        };
+        nodes.set(id, node);
+    }
+    return node;
+}
+function addLink(links, source, target, type, count, directed) {
+    const id = `${type}:${source}:${target}`;
+    const existing = links.get(id);
+    if (existing) {
+        existing.count += count;
+        return;
+    }
+    links.set(id, { id, source, target, count, type, directed });
+}
+function applyNodeCounts(nodes, links) {
+    for (const node of nodes.values()) {
+        node.refCount = 0;
+        node.outgoingCount = 0;
+    }
+    for (const link of links) {
+        const source = nodes.get(link.source);
+        const target = nodes.get(link.target);
+        if (source)
+            source.outgoingCount += link.count;
+        if (target)
+            target.refCount += link.count;
+    }
+}
+function assignGroups(nodes, settings, groupPathMatches) {
+    if (!settings.groups.length)
+        return nodes.map(cloneNode);
+    return nodes.map((node) => {
+        const nextNode = cloneNode(node);
+        nextNode.groupIds = [];
+        nextNode.primaryColor = undefined;
+        for (const group of settings.groups) {
+            const query = group.query.trim().toLowerCase();
+            if (!query)
+                continue;
+            const resolvedPaths = groupPathMatches?.get(group.id);
+            const matches = groupPathMatches
+                ? Boolean(resolvedPaths && nextNode.path && resolvedPaths.has(nextNode.path))
+                : [nextNode.label, nextNode.path ?? "", ...nextNode.tags]
+                    .join(" ")
+                    .toLowerCase()
+                    .includes(query);
+            if (!matches)
+                continue;
+            nextNode.groupIds.push(group.id);
+            nextNode.primaryColor ??= group.color;
+        }
+        return nextNode;
+    });
+}
+function matchesSearch(node, query) {
+    const value = query.trim().toLowerCase();
+    if (!value)
+        return true;
+    return [node.label, node.path ?? "", ...node.tags]
+        .join(" ")
+        .toLowerCase()
+        .includes(value);
+}
+export function filterGraphBySettings(graph, settings, matches = {}) {
+    const visibleNodes = new Map();
+    for (const node of graph.nodes) {
+        if (node.type === "tag" && !settings.filters.showTags)
+            continue;
+        if (node.type === "attachment" && !settings.filters.showAttachments)
+            continue;
+        if (settings.filters.existingFilesOnly && !node.exists)
+            continue;
+        if (matches.filterPaths) {
+            if (!node.path || !matches.filterPaths.has(node.path))
+                continue;
+        }
+        else if (!matchesSearch(node, settings.filters.searchQuery)) {
+            continue;
+        }
+        visibleNodes.set(node.id, cloneNode(node));
+    }
+    let visibleLinks = graph.links.filter((link) => visibleNodes.has(link.source) && visibleNodes.has(link.target));
+    if (!settings.filters.showOrphans) {
+        const connected = new Set();
+        for (const link of visibleLinks) {
+            connected.add(link.source);
+            connected.add(link.target);
+        }
+        for (const nodeId of [...visibleNodes.keys()]) {
+            if (connected.has(nodeId) || nodeId === graph.centerNodeId)
+                continue;
+            visibleNodes.delete(nodeId);
+        }
+        visibleLinks = visibleLinks.filter((link) => visibleNodes.has(link.source) && visibleNodes.has(link.target));
+    }
+    return {
+        nodes: assignGroups([...visibleNodes.values()], settings, matches.groupPaths),
+        links: visibleLinks.map((link) => ({ ...link })),
+        centerNodeId: graph.centerNodeId ?? null,
+    };
+}
+function buildSingleFileGraph(settings, file) {
+    const nodes = new Map();
+    const node = ensureNoteNodeFromFile(nodes, file);
+    return {
+        nodes: assignGroups([node], settings),
+        links: [],
+        centerNodeId: node.id,
+    };
+}
+function resolvedFile(app, path) {
+    const file = app.vault.getFileByPath(path);
+    if (!file || !("extension" in file))
+        return null;
+    return file;
+}
+function canIncludeExpandedEdge(sourcePath, depthByPath, maxDepth) {
+    if (!depthByPath || maxDepth == null)
+        return true;
+    return (depthByPath.get(sourcePath) ?? maxDepth) < maxDepth;
+}
+function buildCanonicalGraphFromRows(app, rows, options = {}) {
+    const nodes = new Map();
+    const links = new Map();
+    const rowsByPath = new Map(rows.map((row) => [row.file.path, row]));
+    const allowedMarkdownPaths = new Set(rows.map((row) => row.file.path));
+    for (const row of rows) {
+        const node = ensureNoteNodeFromRow(nodes, row);
+        const file = resolvedFile(app, row.file.path);
+        node.ctime = file?.stat?.ctime;
+        node.mtime = file?.stat?.mtime ?? row.file.mtime;
+    }
+    for (const row of rows) {
+        const sourceNode = ensureNoteNodeFromRow(nodes, row);
+        const includeExpanded = canIncludeExpandedEdge(row.file.path, options.depthByPath, options.maxDepth);
+        if (includeExpanded) {
+            for (const tag of sourceNode.tags) {
+                const tagNode = ensureTagNode(nodes, tag);
+                addLink(links, sourceNode.id, tagNode.id, "tag", 1, false);
+            }
+        }
+        for (const record of row.links) {
+            const targetText = parseLinkText(record.targetText);
+            if (record.resolvedTargetPath) {
+                const targetPath = record.resolvedTargetPath;
+                if (isMarkdownPath(targetPath)) {
+                    if (!allowedMarkdownPaths.has(targetPath))
+                        continue;
+                    const targetRow = rowsByPath.get(targetPath);
+                    const targetNode = targetRow
+                        ? ensureNoteNodeFromRow(nodes, targetRow)
+                        : ensureNoteNodeFromFile(nodes, resolvedFile(app, targetPath) ?? {
+                            path: targetPath,
+                            extension: "md",
+                            stat: { ctime: 0, mtime: 0, size: 0 },
+                        });
+                    addLink(links, sourceNode.id, targetNode.id, record.type === "embed" ? "embed" : "internal-link", record.count, true);
+                    continue;
+                }
+                if (!includeExpanded)
+                    continue;
+                const targetNode = ensureAttachmentNode(nodes, targetPath, resolvedFile(app, targetPath));
+                addLink(links, sourceNode.id, targetNode.id, record.type === "embed" ? "embed" : "internal-link", record.count, true);
+                continue;
+            }
+            if (!includeExpanded || !targetText)
+                continue;
+            const targetNode = ensureUnresolvedNode(nodes, targetText);
+            addLink(links, sourceNode.id, targetNode.id, record.type === "embed" ? "embed" : "internal-link", record.count, true);
+        }
+    }
+    const nextLinks = [...links.values()].map((link) => ({ ...link }));
+    applyNodeCounts(nodes, nextLinks);
+    return {
+        nodes: [...nodes.values()].map(cloneNode),
+        links: nextLinks,
+        centerNodeId: null,
+    };
+}
+async function queryGlobalRows(app, options = {}) {
+    const rows = [];
+    let total = 0;
+    if (typeof app.vault.iterateFiles === "function") {
+        for (const file of app.vault.iterateFiles()) {
+            if (!isMarkdownPath(file.path))
+                continue;
+            if (file.path.split("/").some((segment) => segment.startsWith("."))) {
+                continue;
+            }
+            total += 1;
+        }
+    }
+    let after;
+    let pages = 0;
+    do {
+        throwIfGraphBuildCancelled(options.signal);
+        const page = await app.metadataCache.queryMetadataPage({
+            after,
+            limit: GLOBAL_GRAPH_PAGE_SIZE,
+            include: ["tags", "links"],
+            query: {
+                extensions: ["md", "markdown"],
+                excludeHiddenPaths: true,
+            },
+        });
+        rows.push(...page.rows);
+        pages += 1;
+        options.onProgress?.({
+            processed: rows.length,
+            total: Math.max(total, rows.length),
+            pages,
+        });
+        after = page.nextCursor;
+        if (after) {
+            await new Promise((resolve) => setTimeout(resolve, 0));
+        }
+    } while (after);
+    return rows;
+}
+function throwIfGraphBuildCancelled(signal) {
+    if (!signal?.aborted)
+        return;
+    const error = new Error("Graph build cancelled");
+    error.name = "AbortError";
+    throw error;
+}
+async function queryRowsForPaths(app, paths) {
+    if (!paths.length)
+        return [];
+    const requestedPaths = [...new Set(paths)];
+    const pathSet = new Set(requestedPaths);
+    const rowsByPath = new Map();
+    for (const batch of graphPathBatches(requestedPaths)) {
+        const rows = await app.metadataCache.queryMetadata({
+            extensions: ["md", "markdown"],
+            pathPrefixes: batch,
+            excludeHiddenPaths: true,
+            limit: Math.max(LOCAL_GRAPH_QUERY_LIMIT, batch.length),
+        });
+        for (const row of rows) {
+            if (pathSet.has(row.file.path))
+                rowsByPath.set(row.file.path, row);
+        }
+    }
+    return requestedPaths.flatMap((path) => {
+        const row = rowsByPath.get(path);
+        return row ? [row] : [];
+    });
+}
+async function queryLocalLinks(app, query) {
+    const records = [];
+    for (const paths of graphPathBatches(query.paths)) {
+        const remaining = LOCAL_GRAPH_QUERY_LIMIT - records.length;
+        if (remaining <= 0)
+            break;
+        records.push(...(await app.metadataCache.queryLinks({
+            ...query,
+            paths,
+            limit: remaining,
+        })));
+    }
+    return records.slice(0, LOCAL_GRAPH_QUERY_LIMIT);
+}
+function markdownNeighbors(records) {
+    const paths = new Set();
+    for (const record of records) {
+        if (isMarkdownPath(record.sourcePath))
+            paths.add(record.sourcePath);
+        if (record.resolvedTargetPath &&
+            isMarkdownPath(record.resolvedTargetPath)) {
+            paths.add(record.resolvedTargetPath);
+        }
+    }
+    return [...paths];
+}
+async function collectLocalRows(app, settings, activeFile) {
+    const depthByPath = new Map([[activeFile.path, 0]]);
+    const rowsByPath = new Map();
+    let frontier = [activeFile.path];
+    for (let depth = 0; depth <= settings.localGraph.depth && frontier.length; depth++) {
+        const rows = await queryRowsForPaths(app, frontier);
+        for (const row of rows)
+            rowsByPath.set(row.file.path, row);
+        if (depth >= settings.localGraph.depth)
+            break;
+        const [incoming, outgoing] = await Promise.all([
+            queryLocalLinks(app, {
+                direction: "incoming",
+                paths: frontier,
+                resolution: "resolved",
+            }),
+            queryLocalLinks(app, {
+                direction: "outgoing",
+                paths: frontier,
+                resolution: "all",
+            }),
+        ]);
+        const candidates = new Set(markdownNeighbors([...incoming, ...outgoing]));
+        frontier = [...candidates].filter((path) => {
+            if (depthByPath.has(path))
+                return false;
+            depthByPath.set(path, depth + 1);
+            return true;
+        });
+    }
+    return { rows: [...rowsByPath.values()], depthByPath };
+}
+export async function buildCanonicalGraph(app, options = {}) {
+    const rows = await queryGlobalRows(app, options);
+    throwIfGraphBuildCancelled(options.signal);
+    return buildCanonicalGraphFromRows(app, rows);
+}
+export async function buildGlobalGraph(app, settings) {
+    return filterGraphBySettings(await buildCanonicalGraph(app), settings);
+}
+export async function buildLocalGraph(app, settings, activeFile) {
+    return filterGraphBySettings(await buildCanonicalLocalGraph(app, settings, activeFile), settings);
+}
+export async function buildCanonicalLocalGraph(app, settings, activeFile) {
+    if (!activeFile)
+        return { nodes: [], links: [], centerNodeId: null };
+    const { rows, depthByPath } = await collectLocalRows(app, settings, activeFile);
+    if (!rows.some((row) => row.file.path === activeFile.path)) {
+        return buildSingleFileGraph(settings, activeFile);
+    }
+    const canonical = buildCanonicalGraphFromRows(app, rows, {
+        depthByPath,
+        maxDepth: settings.localGraph.depth,
+    });
+    const scoped = {
+        ...canonical,
+        centerNodeId: fileNodeId(activeFile.path),
+    };
+    return scoped.nodes.length
+        ? scoped
+        : buildSingleFileGraph(settings, activeFile);
+}
+export function graphNodeIdForFile(path) {
+    return fileNodeId(path);
+}

package/dist/graph-embed.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import { GraphRenderer } from "./graph-renderer";
+  import { DEFAULT_GRAPH_SETTINGS, mergeGraphSettings } from "./graph-settings";
+  import type { GraphData, GraphNode, GraphSettings } from "./graph-types";
+
+  type Props = {
+    data: GraphData;
+    settings?: Partial<GraphSettings> | GraphSettings | null;
+    focusedNodeId?: string | null;
+    class?: string;
+    onNodeClick?: (node: GraphNode, event: MouseEvent) => void;
+    onNodeContextMenu?: (node: GraphNode, event: MouseEvent) => void;
+  };
+
+  let {
+    data,
+    settings = DEFAULT_GRAPH_SETTINGS,
+    focusedNodeId = null,
+    class: className = "",
+    onNodeClick = () => {},
+    onNodeContextMenu = () => {},
+  }: Props = $props();
+
+  let surfaceEl: HTMLDivElement | null = null;
+  let renderer: GraphRenderer | null = null;
+
+  const resolvedSettings = $derived(mergeGraphSettings(settings));
+  const preferredCenterNodeId = $derived(
+    focusedNodeId ?? data.centerNodeId ?? null,
+  );
+
+  onMount(() => {
+    if (!surfaceEl) {
+      return;
+    }
+
+    renderer = new GraphRenderer(surfaceEl, {
+      onNodeClick: (node, event) => {
+        onNodeClick(node, event);
+      },
+      onNodeContextMenu: (node, event) => {
+        onNodeContextMenu(node, event);
+      },
+    });
+
+    renderer.setGraph(data, resolvedSettings);
+    renderer.focusNode(preferredCenterNodeId);
+
+    return () => {
+      renderer?.destroy();
+      renderer = null;
+    };
+  });
+
+  $effect(() => {
+    if (!renderer) {
+      return;
+    }
+
+    renderer.setGraph(data, resolvedSettings);
+  });
+
+  $effect(() => {
+    if (!renderer) {
+      return;
+    }
+
+    renderer.focusNode(preferredCenterNodeId);
+  });
+
+  function mergeClassName(
+    baseClassName: string,
+    extraClassName: string,
+  ): string {
+    return `${baseClassName} ${extraClassName}`.trim();
+  }
+</script>
+
+<div
+  class={mergeClassName("graph-view", className)}
+  data-graph-embed
+  data-ui-component="graph"
+  data-ui-part="embed"
+>
+  <div
+    class="graph-view__surface"
+    data-ui-part="surface"
+    bind:this={surfaceEl}
+  ></div>
+</div>

package/dist/graph-embed.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { GraphData, GraphNode, GraphSettings } from "./graph-types";
+type Props = {
+    data: GraphData;
+    settings?: Partial<GraphSettings> | GraphSettings | null;
+    focusedNodeId?: string | null;
+    class?: string;
+    onNodeClick?: (node: GraphNode, event: MouseEvent) => void;
+    onNodeContextMenu?: (node: GraphNode, event: MouseEvent) => void;
+};
+declare const GraphEmbed: import("svelte").Component<Props, {}, "">;
+type GraphEmbed = ReturnType<typeof GraphEmbed>;
+export default GraphEmbed;

package/dist/graph-file-preview.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { TFile, type App } from "@lapis-notes/api";
+  import { FileEmbed } from "@lapis-notes/markdown/embed";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
+  import { onDestroy } from "svelte";
+  import type { GraphNodePreview, GraphPreviewAnchor } from "./graph-renderer";
+
+  let {
+    app,
+    preview,
+    closeDelayMs,
+    onOpenFile,
+    onDismiss,
+  }: {
+    app: App;
+    preview: GraphNodePreview | null;
+    closeDelayMs: number;
+    onOpenFile: (preview: GraphNodePreview, event: MouseEvent) => void;
+    onDismiss: () => void;
+  } = $props();
+
+  let visiblePreview = $state<GraphNodePreview | null>(null);
+  let previewAnchor = $state<GraphPreviewAnchor | null>(null);
+  let closeTimer: ReturnType<typeof setTimeout> | null = null;
+  let pointerInside = false;
+  const file = $derived.by(() => {
+    const path = visiblePreview?.node.path;
+    const resolved = path ? app.vault.getFileByPath(path) : null;
+    return resolved instanceof TFile ? resolved : null;
+  });
+
+  $effect(() => {
+    if (preview) {
+      cancelClose();
+      previewAnchor = preview.anchor;
+      visiblePreview = preview;
+      return;
+    }
+    scheduleClose();
+  });
+
+  onDestroy(cancelClose);
+
+  function cancelClose(): void {
+    if (closeTimer !== null) clearTimeout(closeTimer);
+    closeTimer = null;
+  }
+
+  function scheduleClose(): void {
+    cancelClose();
+    if (pointerInside) return;
+    const delay = Math.max(0, closeDelayMs);
+    if (delay === 0) {
+      visiblePreview = null;
+      return;
+    }
+    closeTimer = setTimeout(() => {
+      closeTimer = null;
+      visiblePreview = null;
+    }, delay);
+  }
+
+  function closeImmediately(): void {
+    cancelClose();
+    pointerInside = false;
+    visiblePreview = null;
+    onDismiss();
+  }
+
+  function handlePointerEnter(): void {
+    pointerInside = true;
+    cancelClose();
+  }
+
+  function handlePointerLeave(): void {
+    pointerInside = false;
+    scheduleClose();
+  }
+</script>
+
+<Popover.Root
+  open={visiblePreview !== null && file !== null}
+  onOpenChange={(open) => {
+    if (!open && visiblePreview) closeImmediately();
+  }}
+>
+  {#if visiblePreview && file && previewAnchor}
+    <Popover.Content
+      class="graph-file-preview"
+      customAnchor={previewAnchor}
+      updatePositionStrategy="always"
+      side="right"
+      align="center"
+      sideOffset={8}
+      collisionPadding={12}
+      onOpenAutoFocus={(event) => event.preventDefault()}
+      onCloseAutoFocus={(event) => event.preventDefault()}
+      onpointerenter={handlePointerEnter}
+      onpointerleave={handlePointerLeave}
+      onkeydown={(event) => {
+        if (event.key === "Escape") closeImmediately();
+      }}
+    >
+      <ScrollArea.Root class="graph-file-preview__scroll">
+        <FileEmbed
+          {app}
+          {file}
+          frontmatterOpen={false}
+          onopen={(event) => onOpenFile(visiblePreview!, event)}
+        />
+      </ScrollArea.Root>
+    </Popover.Content>
+  {/if}
+</Popover.Root>