@lapis-notes/graph 0.1.0

package/dist/graph-view.js

@@ -0,0 +1,553 @@
+import { createVaultSearchFilterSyntax, ItemView, Menu, Notice, } from "@lapis-notes/api";
+import { buildCanonicalLocalGraph, graphNodeIdForFile } from "./graph-data";
+import { GraphBuildGeneration } from "./graph-build-generation";
+import { graphLoadFocusNodeId } from "./graph-load-alignment";
+import { openGraphTagSearch } from "./graph-node-activation";
+import GraphControlsOverlay from "./graph-controls-overlay.svelte";
+import { GraphRenderer } from "./graph-renderer";
+import { DEFAULT_GRAPH_SETTINGS, mergeGraphSettings, patchGraphSettings, } from "./graph-settings";
+import { resolveGraphNavigationLeaf } from "./graph-navigation";
+import { mountLocalComponent, } from "./mount-local-component.svelte";
+export const GraphViewType = "graph";
+export const LocalGraphViewType = "graph-local";
+function createDebounce(callback, waitMs) {
+    let timer = null;
+    const debounced = (() => {
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(() => {
+            timer = null;
+            callback();
+        }, waitMs);
+    });
+    debounced.cancel = () => {
+        if (timer)
+            clearTimeout(timer);
+        timer = null;
+    };
+    return debounced;
+}
+class GraphViewBase extends ItemView {
+    plugin;
+    isLocal;
+    renderer = null;
+    overlay = null;
+    settings;
+    canonicalGraph = null;
+    coordinatorGraphVersion = -1;
+    unsubscribeCoordinator = null;
+    currentGraphPaths = new Set();
+    unregisterView = null;
+    buildGeneration = new GraphBuildGeneration();
+    deriveGeneration = new GraphBuildGeneration();
+    metadataFacetGeneration = 0;
+    filterSyntax = createVaultSearchFilterSyntax({
+        fileNames: [],
+        paths: [],
+        tags: [],
+    });
+    scheduleRebuild = createDebounce(() => {
+        void this.rebuild();
+    }, 120);
+    scheduleDerive = createDebounce(() => {
+        void this.deriveGraphFromSettings();
+    }, 90);
+    constructor(leaf, plugin, isLocal) {
+        super(leaf);
+        this.plugin = plugin;
+        this.isLocal = isLocal;
+        this.settings = this.plugin.getSettings();
+    }
+    onOpen() {
+        return Promise.resolve();
+    }
+    onClose() {
+        return Promise.resolve();
+    }
+    onload() {
+        this.settings = this.plugin.getSettings();
+        this.contentEl.empty();
+        this.contentEl.classList.add("graph-view");
+        this.contentEl.dataset.uiComponent = "graph";
+        this.contentEl.dataset.uiPart = this.isLocal ? "local-view" : "global-view";
+        this.contentEl.dataset.testid = this.isLocal
+            ? "local-graph-panel"
+            : "graph-panel";
+        this.overlay = mountLocalComponent(GraphControlsOverlay, {
+            target: this.contentEl,
+            props: {
+                app: this.app,
+                isLocal: this.isLocal,
+                settings: this.settings,
+                statsText: "",
+                statusText: "Loading graph…",
+                statusKind: "loading",
+                groupDiagnostics: {},
+                filterDiagnostic: null,
+                filterSyntax: this.filterSyntax,
+                preview: null,
+                isAnimating: false,
+                onFocusActiveFile: () => {
+                    this.focusActiveFile();
+                },
+                onZoomIn: () => {
+                    this.renderer?.zoomIn();
+                },
+                onZoomOut: () => {
+                    this.renderer?.zoomOut();
+                },
+                onResetView: () => {
+                    this.renderer?.resetView();
+                },
+                onRefreshGraph: () => {
+                    if (this.isLocal) {
+                        void this.rebuild();
+                    }
+                    else {
+                        void this.plugin.refreshGlobalGraph(true);
+                    }
+                },
+                onResetDefaults: () => {
+                    this.resetLocalSettings();
+                },
+                onToggleAnimation: () => {
+                    if (this.renderer?.isTimeLapseRunning()) {
+                        this.renderer.stopTimeLapse();
+                    }
+                    else {
+                        this.renderer?.startTimeLapse();
+                    }
+                },
+                onSettingsPatch: (patch) => {
+                    this.updateLocalSettings(patch);
+                },
+                onOpenPreviewFile: (preview) => {
+                    void this.openNode(preview.node, false);
+                },
+                onDismissPreview: () => {
+                    this.renderer?.dismissPreview();
+                },
+            },
+        });
+        const surfaceEl = this.getSurfaceEl();
+        this.renderer = new GraphRenderer(surfaceEl, {
+            onNodeClick: (node) => {
+                void this.openNode(node, false);
+            },
+            onNodeContextMenu: (node, event) => {
+                this.showNodeMenu(node, event);
+            },
+            onLayoutComplete: (summary) => {
+                this.app.telemetry.recordEvent("graph.layout.complete", {
+                    animated: summary.animated,
+                    "graph.layout.duration.ms": summary.durationMs,
+                    "graph.node.count": summary.nodeCount,
+                    "graph.link.count": summary.linkCount,
+                });
+            },
+            onTimeLapseStateChange: (state) => {
+                if (this.overlay)
+                    this.overlay.props.isAnimating = state.running;
+                this.app.telemetry.recordEvent("graph.timelapse", {
+                    running: state.running,
+                    reason: state.reason,
+                });
+            },
+            onNodePreviewChange: (preview) => {
+                if (this.overlay)
+                    this.overlay.props.preview = preview;
+            },
+        });
+        this.refreshFilterSyntaxFromVault();
+        void this.refreshMetadataFacets();
+        this.unregisterView = this.plugin.registerGraphView(this);
+        if (this.isLocal) {
+            this.registerEvent(this.app.workspace.on("file-open", () => {
+                this.scheduleRebuild();
+            }));
+            this.registerEvent(this.app.metadataCache.on("loaded", () => this.scheduleRebuild()));
+            this.registerEvent(this.app.metadataCache.on("index-changed", (change) => {
+                if (!change.reset && !change.domains.includes("metadata"))
+                    return;
+                if (this.shouldRebuildForMetadataPaths(change.paths, change.reset ?? false)) {
+                    this.scheduleRebuild();
+                }
+            }));
+        }
+        else {
+            this.unsubscribeCoordinator = this.plugin.subscribeToGlobalGraph((state) => this.applyCoordinatorState(state));
+        }
+        this.registerEvent(this.app.workspace.on("active-leaf-change", (leaf) => {
+            if (leaf === this.leaf) {
+                this.scheduleViewportRefreshWhenVisible();
+            }
+            if (this.isLocal) {
+                this.scheduleRebuild();
+            }
+        }));
+        this.registerEvent(this.app.metadataCache.on("loaded", () => {
+            this.refreshFilterSyntaxFromVault();
+            void this.refreshMetadataFacets();
+        }));
+        this.registerEvent(this.app.metadataCache.on("index-changed", (change) => {
+            if (!change.reset && !change.domains.includes("metadata"))
+                return;
+            this.refreshFilterSyntaxFromVault();
+            void this.refreshMetadataFacets();
+        }));
+        if (this.isLocal) {
+            requestAnimationFrame(() => {
+                void this.rebuild();
+            });
+        }
+    }
+    scheduleViewportRefreshWhenVisible() {
+        requestAnimationFrame(() => {
+            if (!this.renderer) {
+                return;
+            }
+            const surfaceEl = this.overlay?.target.querySelector("[data-graph-surface]");
+            if (!(surfaceEl instanceof HTMLDivElement)) {
+                return;
+            }
+            const { width, height } = surfaceEl.getBoundingClientRect();
+            if (width <= 0 || height <= 0) {
+                return;
+            }
+            this.renderer.refreshViewport();
+        });
+    }
+    onunload() {
+        this.scheduleRebuild.cancel();
+        this.scheduleDerive.cancel();
+        this.buildGeneration.invalidate();
+        this.deriveGeneration.invalidate();
+        this.metadataFacetGeneration += 1;
+        this.unregisterView?.();
+        this.unregisterView = null;
+        this.unsubscribeCoordinator?.();
+        this.unsubscribeCoordinator = null;
+        this.renderer?.destroy();
+        this.renderer = null;
+        this.overlay?.destroy();
+        this.overlay = null;
+        this.currentGraphPaths = new Set();
+        this.canonicalGraph = null;
+    }
+    onPaneMenu(menu) {
+        menu.addItem((item) => {
+            item
+                .setTitle("Refresh graph")
+                .setIcon("refresh-cw")
+                .onClick(() => {
+                if (this.isLocal) {
+                    void this.rebuild();
+                }
+                else {
+                    void this.plugin.refreshGlobalGraph(true);
+                }
+            });
+        });
+        menu.addItem((item) => {
+            item
+                .setTitle("Focus active file")
+                .setIcon("locate-fixed")
+                .onClick(() => {
+                this.focusActiveFile();
+            });
+        });
+    }
+    focusActiveFile() {
+        const activeFile = this.app.workspace.getActiveFile();
+        if (!activeFile) {
+            new Notice("No active file to focus in graph");
+            return;
+        }
+        this.renderer?.focusNode(graphNodeIdForFile(activeFile.path), {
+            zoom: true,
+        });
+    }
+    applyGraphSettings(settings) {
+        const previous = this.settings;
+        this.settings = mergeGraphSettings(settings);
+        if (this.overlay) {
+            this.overlay.props.settings = this.settings;
+        }
+        if (this.isLocal &&
+            previous.localGraph.depth !== this.settings.localGraph.depth) {
+            this.scheduleRebuild();
+            return;
+        }
+        if (this.canonicalGraph) {
+            this.scheduleDerive();
+        }
+    }
+    async rebuild() {
+        const generation = this.buildGeneration.next();
+        const diagnosticPath = this.isLocal
+            ? (this.app.workspace.getActiveFile()?.path ?? null)
+            : null;
+        if (this.overlay) {
+            this.overlay.props.statusText = "Loading graph…";
+            this.overlay.props.statusKind = "loading";
+        }
+        let graph;
+        try {
+            graph = await this.getGraphData(this.settings);
+        }
+        catch (error) {
+            if (!this.buildGeneration.isCurrent(generation) || !this.overlay)
+                return;
+            this.overlay.props.statusText = `Unable to load graph: ${error instanceof Error ? error.message : String(error)}`;
+            this.overlay.props.statusKind = "error";
+            this.plugin.reportGraphBuildFailure(this.isLocal ? "local" : "global", diagnosticPath, error);
+            return;
+        }
+        if (!this.buildGeneration.isCurrent(generation))
+            return;
+        this.plugin.clearGraphBuildFailure(this.isLocal ? "local" : "global");
+        this.canonicalGraph = graph;
+        const resolved = await this.plugin.resolveGraphSettings(graph, this.settings);
+        if (!this.buildGeneration.isCurrent(generation))
+            return;
+        if (this.overlay) {
+            this.overlay.props.groupDiagnostics = resolved.matches.groupDiagnostics;
+            this.overlay.props.filterDiagnostic = resolved.matches.filterDiagnostic;
+        }
+        this.renderGraph(resolved.graph);
+        if (this.overlay) {
+            this.overlay.props.settings = this.settings;
+            this.overlay.props.statsText = this.getStatsText(graph);
+            this.overlay.props.statusText = "";
+            this.overlay.props.statusKind = null;
+        }
+    }
+    applyCoordinatorState(state) {
+        if (!this.overlay)
+            return;
+        if (state.graph &&
+            (state.version !== this.coordinatorGraphVersion || !this.canonicalGraph)) {
+            this.coordinatorGraphVersion = state.version;
+            this.canonicalGraph = state.graph;
+            void this.deriveGraphFromSettings();
+        }
+        const progress = state.progress;
+        const progressText = progress?.total
+            ? ` (${Math.min(progress.processed, progress.total)} of ${progress.total})`
+            : "";
+        if (state.status === "loading" || state.status === "idle") {
+            this.overlay.props.statusText = `Loading graph${progressText}…`;
+            this.overlay.props.statusKind = "loading";
+        }
+        else if (state.status === "updating") {
+            this.overlay.props.statusText = `Updating graph${progressText}…`;
+            this.overlay.props.statusKind = "loading";
+        }
+        else if (state.status === "error") {
+            this.overlay.props.statusText = state.graph
+                ? "Unable to refresh graph; showing cached data"
+                : `Unable to load graph: ${state.error ?? "Unknown error"}`;
+            this.overlay.props.statusKind = "error";
+        }
+        else {
+            this.overlay.props.statusText = "";
+            this.overlay.props.statusKind = null;
+        }
+    }
+    async deriveGraphFromSettings() {
+        const canonical = this.canonicalGraph;
+        if (!canonical)
+            return;
+        const generation = this.deriveGeneration.next();
+        const resolved = await this.plugin.resolveGraphSettings(canonical, this.settings);
+        if (!this.deriveGeneration.isCurrent(generation))
+            return;
+        if (this.overlay) {
+            this.overlay.props.groupDiagnostics = resolved.matches.groupDiagnostics;
+            this.overlay.props.filterDiagnostic = resolved.matches.filterDiagnostic;
+        }
+        this.renderGraph(resolved.graph);
+    }
+    renderGraph(graph) {
+        this.currentGraphPaths = new Set(graph.nodes
+            .filter((node) => node.type === "note")
+            .map((node) => node.path)
+            .filter((path) => typeof path === "string"));
+        this.renderer?.setGraph(graph, this.settings);
+        const preferredCenterNodeId = graphLoadFocusNodeId(this.isLocal, graph);
+        if (preferredCenterNodeId) {
+            this.renderer?.focusNode(preferredCenterNodeId);
+        }
+        if (this.overlay) {
+            this.overlay.props.settings = this.settings;
+            this.overlay.props.statsText = this.getStatsText(graph);
+        }
+    }
+    shouldRebuildForMetadataPaths(changedPaths, reset) {
+        if (!this.isLocal) {
+            return true;
+        }
+        if (reset || changedPaths.length === 0)
+            return true;
+        const activeFile = this.app.workspace.getActiveFile();
+        if (!activeFile) {
+            return false;
+        }
+        return changedPaths.some((changedPath) => this.currentGraphPaths.has(changedPath) ||
+            this.app.metadataCache.isDirectlyAffectedByPathChange(activeFile.path, changedPath));
+    }
+    getSurfaceEl() {
+        const surfaceEl = this.overlay?.target.querySelector("[data-graph-surface]");
+        if (!(surfaceEl instanceof HTMLDivElement)) {
+            throw new Error("Graph surface root is missing");
+        }
+        return surfaceEl;
+    }
+    getStatsText(graph) {
+        const activeFile = this.app.workspace.getActiveFile();
+        const centerLabel = this.isLocal && activeFile
+            ? ` • ${activeFile.baseName ?? activeFile.path}`
+            : "";
+        return `${graph.nodes.length} nodes • ${graph.links.length} links${centerLabel}`;
+    }
+    refreshFilterSyntaxFromVault(tags = []) {
+        const files = this.app.vault.getFiles();
+        this.filterSyntax = createVaultSearchFilterSyntax({
+            fileNames: files.map((file) => file.name),
+            paths: files.flatMap((file) => file.parent?.path ? [file.parent.path] : []),
+            tags,
+        });
+        if (this.overlay)
+            this.overlay.props.filterSyntax = this.filterSyntax;
+    }
+    async refreshMetadataFacets() {
+        const generation = ++this.metadataFacetGeneration;
+        try {
+            const rows = await this.app.metadataCache.queryFacets({
+                kind: "tag",
+                limit: 100,
+            });
+            if (generation !== this.metadataFacetGeneration)
+                return;
+            const tags = rows.flatMap((row) => typeof row.value === "string"
+                ? [`#${row.value.replace(/^#/u, "")}`]
+                : []);
+            this.refreshFilterSyntaxFromVault(tags);
+        }
+        catch {
+            if (generation !== this.metadataFacetGeneration)
+                return;
+            this.refreshFilterSyntaxFromVault();
+        }
+    }
+    updateLocalSettings(patch) {
+        const nextSettings = patchGraphSettings(this.settings, patch);
+        void this.plugin.updateSettings(nextSettings);
+    }
+    resetLocalSettings() {
+        void this.plugin.updateSettings(mergeGraphSettings(DEFAULT_GRAPH_SETTINGS));
+    }
+    resolveNavigationLeaf(openInNewPane) {
+        return resolveGraphNavigationLeaf({
+            workspace: this.app.workspace,
+            graphLeaf: this.leaf,
+            isLocal: this.isLocal,
+            openInNewPane,
+        });
+    }
+    async openNode(node, openInNewPane) {
+        if (await openGraphTagSearch(this.app, node))
+            return;
+        if (!node.path || !node.exists) {
+            return;
+        }
+        const file = this.app.vault.getFileByPath(node.path);
+        if (!file) {
+            return;
+        }
+        const leaf = this.resolveNavigationLeaf(openInNewPane);
+        await leaf.openFile(file, { result: { history: true } });
+        if (leaf !== this.leaf) {
+            this.app.workspace.activeLeaf = leaf;
+            await this.app.workspace.revealLeaf(leaf);
+        }
+    }
+    showNodeMenu(node, event) {
+        const menu = new Menu();
+        if (node.type === "tag") {
+            menu
+                .addItem((item) => item
+                .setTitle("Search for tag")
+                .setIcon("search")
+                .onClick(() => {
+                void openGraphTagSearch(this.app, node);
+            }))
+                .showAtMouseEvent(event);
+            return;
+        }
+        if (!node.exists)
+            return;
+        menu.addItem((item) => {
+            item
+                .setTitle("Open")
+                .setIcon("file-text")
+                .onClick(() => {
+                void this.openNode(node, false);
+            });
+        });
+        menu.addItem((item) => {
+            item
+                .setTitle("Open in new pane")
+                .setIcon("panel-right-open")
+                .onClick(() => {
+                void this.openNode(node, true);
+            });
+        });
+        if (node.path) {
+            menu.addItem((item) => {
+                item
+                    .setTitle("Copy path")
+                    .setIcon("copy")
+                    .onClick(() => {
+                    void navigator.clipboard?.writeText(node.path ?? "");
+                });
+            });
+        }
+        menu.showAtMouseEvent(event);
+    }
+}
+export class GraphView extends GraphViewBase {
+    constructor(leaf, plugin) {
+        super(leaf, plugin, false);
+    }
+    getViewType() {
+        return GraphViewType;
+    }
+    getDisplayText() {
+        return "Graph";
+    }
+    getIcon() {
+        return "waypoints";
+    }
+    getGraphData(_settings) {
+        return Promise.resolve({ nodes: [], links: [], centerNodeId: null });
+    }
+}
+export class LocalGraphView extends GraphViewBase {
+    constructor(leaf, plugin) {
+        super(leaf, plugin, true);
+    }
+    getViewType() {
+        return LocalGraphViewType;
+    }
+    getDisplayText() {
+        return "Local graph";
+    }
+    getIcon() {
+        return "git-branch-plus";
+    }
+    getGraphData(settings) {
+        return buildCanonicalLocalGraph(this.app, settings, this.app.workspace.getActiveFile());
+    }
+}

package/dist/graph-viewport-alignment.d.ts

@@ -0,0 +1,6 @@
+export type ViewportTransform = {
+    x: number;
+    y: number;
+    k: number;
+};
+export declare function adjustTransformForViewportResize(transform: ViewportTransform, prevWidth: number, prevHeight: number, nextWidth: number, nextHeight: number): ViewportTransform;

package/dist/graph-viewport-alignment.js

@@ -0,0 +1,9 @@
+export function adjustTransformForViewportResize(transform, prevWidth, prevHeight, nextWidth, nextHeight) {
+    const worldX = (prevWidth / 2 - transform.x) / transform.k;
+    const worldY = (prevHeight / 2 - transform.y) / transform.k;
+    return {
+        k: transform.k,
+        x: nextWidth / 2 - worldX * transform.k,
+        y: nextHeight / 2 - worldY * transform.k,
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import "./styles.css";
+export { default as manifest } from "../../manifest.json";
+export { GraphControlsOverlay, GraphEmbed } from "./public-components";
+export { GraphPlugin } from "./graph-plugin";
+export { default } from "./graph-plugin";
+export { GraphRenderer } from "./graph-renderer";
+export { DEFAULT_GRAPH_SETTINGS, mergeGraphSettings, moveGraphGroup, patchGraphSettings, } from "./graph-settings";
+export { GraphView, GraphViewType, LocalGraphView, LocalGraphViewType, } from "./graph-view";
+export type { GraphData, GraphGroupRule, GraphLink, GraphLinkType, GraphNode, GraphNodeType, GraphSearchAdapter, GraphSettings, GraphSettingsPatch, } from "./graph-types";

package/dist/index.js

@@ -0,0 +1,8 @@
+import "./styles.css";
+export { default as manifest } from "../../manifest.json";
+export { GraphControlsOverlay, GraphEmbed } from "./public-components";
+export { GraphPlugin } from "./graph-plugin";
+export { default } from "./graph-plugin";
+export { GraphRenderer } from "./graph-renderer";
+export { DEFAULT_GRAPH_SETTINGS, mergeGraphSettings, moveGraphGroup, patchGraphSettings, } from "./graph-settings";
+export { GraphView, GraphViewType, LocalGraphView, LocalGraphViewType, } from "./graph-view";

package/dist/mount-local-component.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Component, type MountOptions } from "svelte";
+export interface LocalMountComponent<T extends Record<string, unknown>> {
+    readonly props: T;
+    readonly target: Document | Element | ShadowRoot;
+    destroy(): void;
+}
+export declare function mountLocalComponent<T extends Record<string, unknown>>(component: Component<T, Record<string, unknown>, any>, options: MountOptions<T>): LocalMountComponent<T>;

package/dist/mount-local-component.svelte.js

@@ -0,0 +1,12 @@
+import { mount, unmount } from "svelte";
+export function mountLocalComponent(component, options) {
+    const props = $state(options.props ?? {});
+    const instance = mount(component, { ...options, props });
+    return {
+        props,
+        target: options.target,
+        destroy() {
+            void unmount(instance);
+        },
+    };
+}

package/dist/public-components.d.ts

@@ -0,0 +1,2 @@
+export { default as GraphControlsOverlay } from "./graph-controls-overlay.svelte";
+export { default as GraphEmbed } from "./graph-embed.svelte";

package/dist/public-components.js

@@ -0,0 +1,2 @@
+export { default as GraphControlsOverlay } from "./graph-controls-overlay.svelte";
+export { default as GraphEmbed } from "./graph-embed.svelte";