From 238af28bef575bf084a04f468b99d8456684f46f Mon Sep 17 00:00:00 2001 From: Ross Keenan Date: Fri, 21 Jan 2022 21:30:46 +0200 Subject: [PATCH] refactor(Juggl): :art: Formatting --- main.js | 182 +++++++------- src/Visualisations/Juggl.ts | 466 ++++++++++++++++++------------------ 2 files changed, 326 insertions(+), 322 deletions(-) diff --git a/main.js b/main.js index 0c32967b..5ccfdeb3 100644 --- a/main.js +++ b/main.js @@ -24719,86 +24719,6 @@ class TrailPath extends SvelteComponent { } } -/* src\Components\JugglButton.svelte generated by Svelte v3.35.0 */ - -function create_fragment$i(ctx) { - let button; - let t; - let mounted; - let dispose; - - return { - c() { - button = element("button"); - t = text(/*icon*/ ctx[0]); - attr(button, "type", "button"); - attr(button, "class", "juggl-button"); - attr(button, "aria-label", /*title*/ ctx[3]); - button.disabled = /*disabled*/ ctx[2]; - }, - m(target, anchor) { - insert(target, button, anchor); - append(button, t); - - if (!mounted) { - dispose = listen(button, "click", function () { - if (is_function(/*onClick*/ ctx[1])) /*onClick*/ ctx[1].apply(this, arguments); - }); - - mounted = true; - } - }, - p(new_ctx, [dirty]) { - ctx = new_ctx; - if (dirty & /*icon*/ 1) set_data(t, /*icon*/ ctx[0]); - - if (dirty & /*title*/ 8) { - attr(button, "aria-label", /*title*/ ctx[3]); - } - - if (dirty & /*disabled*/ 4) { - button.disabled = /*disabled*/ ctx[2]; - } - }, - i: noop, - o: noop, - d(detaching) { - if (detaching) detach(button); - mounted = false; - dispose(); - } - }; -} - -function instance$i($$self, $$props, $$invalidate) { - let { icon } = $$props; - let { onClick } = $$props; - let { disabled = false } = $$props; - let { title } = $$props; - - $$self.$$set = $$props => { - if ("icon" in $$props) $$invalidate(0, icon = $$props.icon); - if ("onClick" in $$props) $$invalidate(1, onClick = $$props.onClick); - if ("disabled" in $$props) $$invalidate(2, disabled = $$props.disabled); - if ("title" in $$props) $$invalidate(3, title = $$props.title); - }; - - return [icon, onClick, disabled, title]; -} - -class JugglButton extends SvelteComponent { - constructor(options) { - super(); - - init(this, options, instance$i, create_fragment$i, safe_not_equal, { - icon: 0, - onClick: 1, - disabled: 2, - title: 3 - }); - } -} - /** * Returns a copy of `index`, doesn't mutate. * @param {string} index @@ -24886,6 +24806,86 @@ async function copyGlobalIndex(plugin) { await copy(globalIndex); } +/* src\Components\JugglButton.svelte generated by Svelte v3.35.0 */ + +function create_fragment$i(ctx) { + let button; + let t; + let mounted; + let dispose; + + return { + c() { + button = element("button"); + t = text(/*icon*/ ctx[0]); + attr(button, "type", "button"); + attr(button, "class", "juggl-button"); + attr(button, "aria-label", /*title*/ ctx[3]); + button.disabled = /*disabled*/ ctx[2]; + }, + m(target, anchor) { + insert(target, button, anchor); + append(button, t); + + if (!mounted) { + dispose = listen(button, "click", function () { + if (is_function(/*onClick*/ ctx[1])) /*onClick*/ ctx[1].apply(this, arguments); + }); + + mounted = true; + } + }, + p(new_ctx, [dirty]) { + ctx = new_ctx; + if (dirty & /*icon*/ 1) set_data(t, /*icon*/ ctx[0]); + + if (dirty & /*title*/ 8) { + attr(button, "aria-label", /*title*/ ctx[3]); + } + + if (dirty & /*disabled*/ 4) { + button.disabled = /*disabled*/ ctx[2]; + } + }, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(button); + mounted = false; + dispose(); + } + }; +} + +function instance$i($$self, $$props, $$invalidate) { + let { icon } = $$props; + let { onClick } = $$props; + let { disabled = false } = $$props; + let { title } = $$props; + + $$self.$$set = $$props => { + if ("icon" in $$props) $$invalidate(0, icon = $$props.icon); + if ("onClick" in $$props) $$invalidate(1, onClick = $$props.onClick); + if ("disabled" in $$props) $$invalidate(2, disabled = $$props.disabled); + if ("title" in $$props) $$invalidate(3, title = $$props.title); + }; + + return [icon, onClick, disabled, title]; +} + +class JugglButton extends SvelteComponent { + constructor(options) { + super(); + + init(this, options, instance$i, create_fragment$i, safe_not_equal, { + icon: 0, + onClick: 1, + disabled: 2, + title: 3 + }); + } +} + const STORE_ID = "core"; class BCStoreEvents extends obsidian.Events { } @@ -24987,7 +24987,7 @@ function zoomToSource(juggl, source) { } juggl.on("vizReady", (viz) => { // After layout is done, center on source node - viz.one('layoutstop', e => { + viz.one("layoutstop", (e) => { const viz = e.cy; const node = viz.$id(VizId.toId(source + ".md", STORE_ID)); viz.animate({ @@ -24996,14 +24996,14 @@ function zoomToSource(juggl, source) { }, duration: 250, queue: false, - zoom: 1.7 + zoom: 1.7, }); }); }); } function createJugglTrail(plugin, target, paths, source, args) { - const toolbarDiv = document.createElement('div'); - toolbarDiv.addClass('cy-toolbar'); + const toolbarDiv = document.createElement("div"); + toolbarDiv.addClass("cy-toolbar"); target.appendChild(toolbarDiv); const sectDiv = document.createElement("div"); sectDiv.addClass("cy-toolbar-section"); @@ -25024,8 +25024,8 @@ function createJugglTrail(plugin, target, paths, source, args) { } }, disabled: false, - title: "Show up graph" - } + title: "Show up graph", + }, }); new JugglButton({ target: sectDiv, @@ -25039,9 +25039,9 @@ function createJugglTrail(plugin, target, paths, source, args) { } return; } - const sub = getSubInDirs(plugin.mainG, 'down', 'up'); + const sub = getSubInDirs(plugin.mainG, "down", "up"); const closed = getReflexiveClosure(sub, plugin.settings.userHiers); - const subClosed = getSubInDirs(closed, 'down'); + const subClosed = getSubInDirs(closed, "down"); const allPaths = dfsAllPaths(subClosed, source); const index = createIndex(allPaths, false); const lines = index @@ -25054,7 +25054,7 @@ function createJugglTrail(plugin, target, paths, source, args) { .filter((pair) => pair && pair !== ""); let nodesS = new Set(lines); nodesS.add(source); - const nodes = Array.from(nodesS).map(s => s + ".md"); + const nodes = Array.from(nodesS).map((s) => s + ".md"); console.log({ nodes }); jugglDown = createJuggl(plugin, target, nodes, args); if (jugglUp) { @@ -25063,8 +25063,8 @@ function createJugglTrail(plugin, target, paths, source, args) { zoomToSource(jugglDown, source); }, disabled: false, - title: "Show down graph" - } + title: "Show down graph", + }, }); // new JugglButton({ // target: sectDiv, diff --git a/src/Visualisations/Juggl.ts b/src/Visualisations/Juggl.ts index f1ca1835..b41b856d 100644 --- a/src/Visualisations/Juggl.ts +++ b/src/Visualisations/Juggl.ts @@ -1,273 +1,277 @@ -import {Component, Events, MetadataCache, TFile} from "obsidian"; +import type { EdgeDefinition, NodeSingular } from "cytoscape"; +import type { MultiGraph } from "graphology"; import { - DataStoreEvents, getPlugin, - ICoreDataStore, - IJuggl, - IJugglPlugin, - IJugglSettings, IJugglStores, - nodeDangling, - nodeFromFile, - VizId + DataStoreEvents, + getPlugin, + ICoreDataStore, + IJuggl, + IJugglPlugin, + IJugglSettings, + IJugglStores, + nodeDangling, + nodeFromFile, + VizId, } from "juggl-api"; -import type {MultiGraph} from "graphology"; -import type {EdgeDefinition, NodeSingular} from "cytoscape"; +import { Component, Events, MetadataCache, TFile } from "obsidian"; +import { createIndex } from "../Commands/CreateIndex"; +import JugglButton from "../Components/JugglButton.svelte"; +import { JUGGL_CB_DEFAULTS } from "../constants"; +import { dfsAllPaths, getReflexiveClosure, getSubInDirs } from "../graphUtils"; import type BCPlugin from "../main"; -import {JUGGL_CB_DEFAULTS} from "../constants"; const STORE_ID = "core"; -import JugglButton from "../Components/JugglButton.svelte"; -import {dfsAllPaths, getReflexiveClosure, getSubInDirs} from "../graphUtils"; -import {createIndex} from "../Commands/CreateIndex"; - class BCStoreEvents extends Events implements DataStoreEvents {} class BCStore extends Component implements ICoreDataStore { - graph: MultiGraph; - cache: MetadataCache; - plugin: IJugglPlugin; - constructor( - graph: MultiGraph, - metadata: MetadataCache, - plugin: IJugglPlugin - ) { - super(); - this.graph = graph; - this.cache = metadata; - this.plugin = plugin; - } + graph: MultiGraph; + cache: MetadataCache; + plugin: IJugglPlugin; + constructor( + graph: MultiGraph, + metadata: MetadataCache, + plugin: IJugglPlugin + ) { + super(); + this.graph = graph; + this.cache = metadata; + this.plugin = plugin; + } - asString(node: NodeSingular): string { - const id = VizId.fromNode(node); - return id.id.slice(0, -3); - } + asString(node: NodeSingular): string { + const id = VizId.fromNode(node); + return id.id.slice(0, -3); + } - getFile(nodeId: VizId): TFile { - return this.cache.getFirstLinkpathDest(nodeId.id, ""); - } + getFile(nodeId: VizId): TFile { + return this.cache.getFirstLinkpathDest(nodeId.id, ""); + } - async connectNodes( - allNodes: cytoscape.NodeCollection, - newNodes: cytoscape.NodeCollection, - graph: IJuggl - ): Promise { - const edges: EdgeDefinition[] = []; - const nodesListS = new Set( - allNodes.map((node) => this.asString(node)).filter((s) => s) - ); - newNodes.forEach((node) => { - this.graph.forEachOutEdge( - this.asString(node), - (key, attr, source, target) => { - if (nodesListS.has(target)) { - edges.push({ - data: { - id: `BC:${source}->${target}`, - source: VizId.toId(source, STORE_ID) + ".md", - target: VizId.toId(target, STORE_ID) + ".md", - type: attr.field, - dir: attr.dir, - }, - classes: `type-${attr.field} dir-${attr.dir} breadcrumbs$`, - }); - } - } - ); - }); - return Promise.resolve(edges); - } + async connectNodes( + allNodes: cytoscape.NodeCollection, + newNodes: cytoscape.NodeCollection, + graph: IJuggl + ): Promise { + const edges: EdgeDefinition[] = []; + const nodesListS = new Set( + allNodes.map((node) => this.asString(node)).filter((s) => s) + ); + newNodes.forEach((node) => { + this.graph.forEachOutEdge( + this.asString(node), + (key, attr, source, target) => { + if (nodesListS.has(target)) { + edges.push({ + data: { + id: `BC:${source}->${target}`, + source: VizId.toId(source, STORE_ID) + ".md", + target: VizId.toId(target, STORE_ID) + ".md", + type: attr.field, + dir: attr.dir, + }, + classes: `type-${attr.field} dir-${attr.dir} breadcrumbs$`, + }); + } + } + ); + }); + return Promise.resolve(edges); + } - getEvents(view: IJuggl): DataStoreEvents { - return new BCStoreEvents(); - } + getEvents(view: IJuggl): DataStoreEvents { + return new BCStoreEvents(); + } - getNeighbourhood(nodeId: VizId[]): Promise { - // TODO - return Promise.resolve([]); - } + getNeighbourhood(nodeId: VizId[]): Promise { + // TODO + return Promise.resolve([]); + } - refreshNode(id: VizId, view: IJuggl): void | Promise { - return; - } + refreshNode(id: VizId, view: IJuggl): void | Promise { + return; + } - storeId(): string { - return STORE_ID; - } + storeId(): string { + return STORE_ID; + } - get(nodeId: VizId, view: IJuggl): Promise { - const file = this.getFile(nodeId); - if (file === null) { - const dangling = nodeDangling(nodeId.id); - console.log({ dangling }); - return Promise.resolve(nodeDangling(nodeId.id)); - } - const cache = this.cache.getFileCache(file); - if (cache === null) { - console.log("returning empty cache", nodeId); - return Promise.resolve(nodeDangling(nodeId.id)); - } - return Promise.resolve(nodeFromFile(file, this.plugin, view.settings, nodeId.toId())); + get(nodeId: VizId, view: IJuggl): Promise { + const file = this.getFile(nodeId); + if (file === null) { + const dangling = nodeDangling(nodeId.id); + console.log({ dangling }); + return Promise.resolve(nodeDangling(nodeId.id)); } + const cache = this.cache.getFileCache(file); + if (cache === null) { + console.log("returning empty cache", nodeId); + return Promise.resolve(nodeDangling(nodeId.id)); + } + + return Promise.resolve( + nodeFromFile(file, this.plugin, view.settings, nodeId.toId()) + ); + } } export function createJuggl( - plugin: BCPlugin, - target: HTMLElement, - initialNodes: string[], - args: IJugglSettings + plugin: BCPlugin, + target: HTMLElement, + initialNodes: string[], + args: IJugglSettings ): IJuggl { - try { - const jugglPlugin = getPlugin(plugin.app); - if (!jugglPlugin) { - // TODO: Error handling - return; - } - for (let key in JUGGL_CB_DEFAULTS) { - if (key in args && args[key] === undefined) { - args[key] = JUGGL_CB_DEFAULTS[key]; - } - } + try { + const jugglPlugin = getPlugin(plugin.app); + if (!jugglPlugin) { + // TODO: Error handling + return; + } + for (let key in JUGGL_CB_DEFAULTS) { + if (key in args && args[key] === undefined) { + args[key] = JUGGL_CB_DEFAULTS[key]; + } + } - const bcStore = new BCStore( - plugin.mainG, - plugin.app.metadataCache, - jugglPlugin - ); - const stores: IJugglStores = { - coreStore: bcStore, - dataStores: [bcStore], - }; + const bcStore = new BCStore( + plugin.mainG, + plugin.app.metadataCache, + jugglPlugin + ); + const stores: IJugglStores = { + coreStore: bcStore, + dataStores: [bcStore], + }; - console.log({ args }, { initialNodes }); - const juggl = jugglPlugin.createJuggl(target, args, stores, initialNodes); - plugin.addChild(juggl); - // juggl.load(); - console.log({ juggl }); - return juggl; - } catch (error) { - console.log({ error }); - return null; - } + console.log({ args }, { initialNodes }); + const juggl = jugglPlugin.createJuggl(target, args, stores, initialNodes); + plugin.addChild(juggl); + // juggl.load(); + console.log({ juggl }); + return juggl; + } catch (error) { + console.log({ error }); + return null; + } } function zoomToSource(juggl: IJuggl, source: string) { - if (!juggl) { - return; - } - juggl.on("vizReady", (viz) => { - // After layout is done, center on source node - viz.one('layoutstop', e => { - const viz = e.cy; - const node = viz.$id(VizId.toId(source + ".md", STORE_ID)); - viz.animate({ - center: { - eles: node, - }, - duration: 250, - queue: false, - zoom: 1.7 - }); - }) + if (!juggl) { + return; + } + juggl.on("vizReady", (viz) => { + // After layout is done, center on source node + viz.one("layoutstop", (e) => { + const viz = e.cy; + const node = viz.$id(VizId.toId(source + ".md", STORE_ID)); + viz.animate({ + center: { + eles: node, + }, + duration: 250, + queue: false, + zoom: 1.7, + }); }); + }); } export function createJugglTrail( - plugin: BCPlugin, - target: HTMLElement, - paths: string[][], - source: string, - args: IJugglSettings + plugin: BCPlugin, + target: HTMLElement, + paths: string[][], + source: string, + args: IJugglSettings ) { - const toolbarDiv = document.createElement('div'); - toolbarDiv.addClass('cy-toolbar'); - target.appendChild(toolbarDiv); + const toolbarDiv = document.createElement("div"); + toolbarDiv.addClass("cy-toolbar"); + target.appendChild(toolbarDiv); - const sectDiv = document.createElement("div"); - sectDiv.addClass("cy-toolbar-section"); - toolbarDiv.appendChild(sectDiv); + const sectDiv = document.createElement("div"); + sectDiv.addClass("cy-toolbar-section"); + toolbarDiv.appendChild(sectDiv); - const amtChildren = target.children.length; + const amtChildren = target.children.length; - let jugglUp: IJuggl = null; - let jugglDown: IJuggl = null; + let jugglUp: IJuggl = null; + let jugglDown: IJuggl = null; - new JugglButton({ - target: sectDiv, - props: { - icon: "↑", - onClick: () => { - if (jugglUp) { - target.children[amtChildren].classList.remove("juggl-hide") - } - if (jugglDown) { - target.children[amtChildren + 1].classList.add("juggl-hide"); - } - }, - disabled: false, - title: "Show up graph" + new JugglButton({ + target: sectDiv, + props: { + icon: "↑", + onClick: () => { + if (jugglUp) { + target.children[amtChildren].classList.remove("juggl-hide"); } - }); - new JugglButton({ - target: sectDiv, - props: { - icon: "↓", - onClick: () => { - if (jugglDown) { - target.children[amtChildren + 1].classList.remove("juggl-hide"); - if (jugglUp) { - target.children[amtChildren].classList.add("juggl-hide"); - } - return; - } - const sub = getSubInDirs(plugin.mainG, 'down', 'up') - const closed = getReflexiveClosure(sub, plugin.settings.userHiers); - const subClosed = getSubInDirs(closed, 'down'); + if (jugglDown) { + target.children[amtChildren + 1].classList.add("juggl-hide"); + } + }, + disabled: false, + title: "Show up graph", + }, + }); + new JugglButton({ + target: sectDiv, + props: { + icon: "↓", + onClick: () => { + if (jugglDown) { + target.children[amtChildren + 1].classList.remove("juggl-hide"); + if (jugglUp) { + target.children[amtChildren].classList.add("juggl-hide"); + } + return; + } + const sub = getSubInDirs(plugin.mainG, "down", "up"); + const closed = getReflexiveClosure(sub, plugin.settings.userHiers); + const subClosed = getSubInDirs(closed, "down"); - const allPaths = dfsAllPaths(subClosed, source); - const index = createIndex(allPaths, false); - const lines = index - .split("\n") - .map((line) => { - const pair = line.split("- "); - console.log({pair}) - return pair[1]; - }) - .filter((pair) => pair && pair !== ""); - let nodesS = new Set(lines); - nodesS.add(source); - const nodes = Array.from(nodesS).map(s => s + ".md"); - console.log({nodes}); + const allPaths = dfsAllPaths(subClosed, source); + const index = createIndex(allPaths, false); + const lines = index + .split("\n") + .map((line) => { + const pair = line.split("- "); + console.log({ pair }); + return pair[1]; + }) + .filter((pair) => pair && pair !== ""); + let nodesS = new Set(lines); + nodesS.add(source); + const nodes = Array.from(nodesS).map((s) => s + ".md"); + console.log({ nodes }); - jugglDown = createJuggl(plugin, target, nodes, args); + jugglDown = createJuggl(plugin, target, nodes, args); - if (jugglUp) { - target.children[amtChildren].addClass("juggl-hide") - } - zoomToSource(jugglDown, source); - }, - disabled: false, - title: "Show down graph" + if (jugglUp) { + target.children[amtChildren].addClass("juggl-hide"); } - }); - // new JugglButton({ - // target: sectDiv, - // props: { - // icon: "⛶", - // onClick: () => { - // console.log("here") - // target.children[1].addClass("juggl-full-screen") - // target.children[1].setAttr("style", ""); - // }, - // disabled: false, - // title: "Full height" - // } - // }); - let nodes = Array.from( - new Set(paths.reduce((prev, curr) => prev.concat(curr), [])) - ); - nodes.push(source); - nodes = nodes.map((s) => s + ".md"); + zoomToSource(jugglDown, source); + }, + disabled: false, + title: "Show down graph", + }, + }); + // new JugglButton({ + // target: sectDiv, + // props: { + // icon: "⛶", + // onClick: () => { + // console.log("here") + // target.children[1].addClass("juggl-full-screen") + // target.children[1].setAttr("style", ""); + // }, + // disabled: false, + // title: "Full height" + // } + // }); + let nodes = Array.from( + new Set(paths.reduce((prev, curr) => prev.concat(curr), [])) + ); + nodes.push(source); + nodes = nodes.map((s) => s + ".md"); - jugglUp = createJuggl(plugin, target, nodes, args); + jugglUp = createJuggl(plugin, target, nodes, args); - zoomToSource(jugglUp, source); -} \ No newline at end of file + zoomToSource(jugglUp, source); +}