From 8ac73155869585dda3ac48b9b8e1e29f8be65380 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Konrad=20H=C3=B6ffner?= Date: Tue, 24 Oct 2023 15:04:41 +0200 Subject: [PATCH] improve upon the refactoring to fix resulting errors --- js/browser/contextmenu.ts | 10 +++++++++- js/browser/graph.ts | 34 ++++++++++++++++++++++++++++++++-- js/browser/interface.ts | 11 ----------- js/browser/load.ts | 2 +- js/browser/menu.ts | 1 + js/browser/menuItem.ts | 8 -------- js/browser/save.ts | 17 ++++++++++++++--- js/browser/view.ts | 33 +++------------------------------ js/layout.ts | 2 +- 9 files changed, 61 insertions(+), 57 deletions(-) delete mode 100644 js/browser/interface.ts delete mode 100644 js/browser/menuItem.ts diff --git a/js/browser/contextmenu.ts b/js/browser/contextmenu.ts index 14c955d9..2a86afa6 100644 --- a/js/browser/contextmenu.ts +++ b/js/browser/contextmenu.ts @@ -1,7 +1,6 @@ /** Creates the circular context menu that can be opened on top of a node/edge. Needs to be initialized before it can be used via the default export function.*/ import { flatHelp } from "../help"; -import type { MenuItem } from "./menuItem"; import cytoscape from "cytoscape"; //{ Collection, EdgeSingular, NodeSingular, SingularElementReturnValue } from "cytoscape"; import contextMenus from "cytoscape-context-menus"; @@ -14,6 +13,15 @@ import { sub } from "../rdf"; const config = { menuItems: [] as Array, evtType: "cxttap" }; +// cytoscape-context-menus extension does not have type hints +export interface MenuItem { + content: string; + id: string; + selector?: "node" | "node:compound" | "edge"; + submenu?: Array; + onClickFunction?(event: Event | { target: any }): void; +} + /** context menu for nodes and edges */ export class ContextMenu { graph: Graph; diff --git a/js/browser/graph.ts b/js/browser/graph.ts index 702a28d7..da8724c7 100644 --- a/js/browser/graph.ts +++ b/js/browser/graph.ts @@ -10,7 +10,6 @@ import * as rdf from "../rdf"; import * as language from "../lang/language"; import { progress } from "./progress"; import { View } from "./view"; -import MicroModal from "micromodal"; import type { Core, Collection, NodeCollection, EdgeCollection, NodeSingular } from "cytoscape"; import cytoscape from "cytoscape"; //eslint-disable-line no-duplicate-imports import type { Menu } from "./menu"; @@ -55,7 +54,7 @@ export class Graph { this.selectedNode = event.target; }); // bind this to the class instance instead of the event source - const binds = ["resetStyle", "presentUri", "showPath", "showStar", "showWorm", "showDoubleStar", "combineMatch", "showCloseMatch"]; + const binds = ["resetStyle", "presentUri", "showPath", "showStar", "showWorm", "showDoubleStar", "combineMatch", "showCloseMatch", "newGraph"]; for (const bind of binds) { this[bind] = this[bind].bind(this); } @@ -166,6 +165,23 @@ export class Graph { return this.multiplex((nodes) => this.showStar(nodes, changeLayout, direction), undefined, true); } + /** Multiplex star operations into a new view. + @param changeLayout - arrange the given node and its close matches in the center and the connected nodes in a circle around them. + @param direction - only show edges that originate from node, not those that end in it. Optional and defaults to false. + @returns show star function applied to multiple nodes */ + async showStarMultiplexedNew(changeLayout: boolean = false, direction: Direction) { + const graph = await this.newGraph(); + const f = (_node: NodeSingular) => { + graph.multiplex( + (nodes: NodeCollection) => graph.showStar(graph.assimilateNodes(nodes), changeLayout, direction), + graph.assimilateNodes(this.cy.nodes(":selected")), + true + )(_node); + return graph; + }; + return f; + } + /** Highlight the give node and all its directly connected nodes (in both directions). Hide all other nodes except when in star mode. @param center - node or collection of nodes. center of the star @@ -586,6 +602,7 @@ export class Graph { this.cy.endBatch(); }); } + /**Show close matches of the given nodes. * @param nodes - the nodes whose close matches are shown */ showCloseMatch(nodes: NodeCollection): void { @@ -598,4 +615,17 @@ export class Graph { Graph.setVisible(eles, true); Graph.starStyle(eles); } + + /** Create and return a new graph if the option is set to create star operations in a new view. + * @param title - optional view title + * @returns this iff the option to create stars in a new view is unset, a new view's graph if it is set */ + async newGraph(title?: string): Promise { + //if(!mainView.state.graph.menu.starNewView()) {return this;} // using the menu option to determine whether to create a new graph + if (this !== View.mainView.state.graph) { + return this; + } // span new views only from the main view + const view = new View(true, title); + await view.initialized; + return view.state.graph; + } } diff --git a/js/browser/interface.ts b/js/browser/interface.ts deleted file mode 100644 index 28b0199c..00000000 --- a/js/browser/interface.ts +++ /dev/null @@ -1,11 +0,0 @@ -export interface ViewJson { - version: string; - title: string; - graph: object; -} - -export interface Session { - tabs: Array; - state: any; - mainGraph: any; -} diff --git a/js/browser/load.ts b/js/browser/load.ts index 1596f510..12d6ca7e 100644 --- a/js/browser/load.ts +++ b/js/browser/load.ts @@ -1,6 +1,6 @@ /** Module for loading files both locally from the server and via upload from the client.*/ import { View } from "./view"; -import type { ViewJson, Session } from "./interface"; +import type { ViewJson, Session } from "./save"; import { config } from "../config"; import { fromJSON } from "./state"; import { VERSION } from "./util"; diff --git a/js/browser/menu.ts b/js/browser/menu.ts index 200df5f0..77ccefb2 100644 --- a/js/browser/menu.ts +++ b/js/browser/menu.ts @@ -4,6 +4,7 @@ import { NODE } from "../node"; import { loadGraphFromSparql } from "../loadGraphFromSparql"; import * as language from "../lang/language"; import * as util from "./util"; +import MicroModal from "micromodal"; import { config } from "../config"; import { progress } from "./progress"; import { showChapterSearch } from "./chaptersearch"; diff --git a/js/browser/menuItem.ts b/js/browser/menuItem.ts deleted file mode 100644 index 98fe491a..00000000 --- a/js/browser/menuItem.ts +++ /dev/null @@ -1,8 +0,0 @@ -// cytoscape-context-menus extension does not have type hints -export interface MenuItem { - content: string; - id: string; - selector?: "node" | "node:compound" | "edge"; - submenu?: Array; - onClickFunction?(event: Event | { target: any }): void; -} diff --git a/js/browser/save.ts b/js/browser/save.ts index e1444257..3692d5e0 100644 --- a/js/browser/save.ts +++ b/js/browser/save.ts @@ -1,8 +1,7 @@ /** Lets the user save files generated from the loaded graph. */ -import type { ViewJson, Session } from "./interface"; import { config } from "../config"; import { toJSON } from "./state"; -import { View, type State } from "./view"; +import { View, type ViewState } from "./view"; import { VERSION } from "./util"; import type { Graph } from "./graph"; import log from "loglevel"; @@ -10,6 +9,18 @@ import c from "cytoscape"; import svg from "cytoscape-svg"; c.use(svg); +export interface ViewJson { + version: string; + title: string; + graph: object; +} + +export interface Session { + tabs: Array; + state: any; + mainGraph: any; +} + const a = document.createElement("a"); // reused for all saving, not visible to the user document.body.appendChild(a); a.style.display = "none"; @@ -83,7 +94,7 @@ export function saveSession(options): void { /** Saves the contents of the current view as a custom JSON file. * @param state - a GoldenLayout view state */ -export function saveView(state: State): void { +export function saveView(state: ViewState): void { const json: ViewJson = { version: VERSION, title: state.title, diff --git a/js/browser/view.ts b/js/browser/view.ts index a71ef86f..54ed0d03 100644 --- a/js/browser/view.ts +++ b/js/browser/view.ts @@ -1,9 +1,10 @@ -import { Graph } from "./graph"; +import { Graph, type Direction } from "./graph"; import { fillInitialGraph } from "./init"; import { ContextMenu } from "./contextmenu"; import { nodeCommands } from "./contextmenuNodes"; import { edgeCommands } from "./contextmenuEdges"; import { goldenLayout } from "./viewLayout"; +import type { NodeCollection, NodeSingular } from "cytoscape"; import { toJSON } from "./state"; import log from "loglevel"; import type { ComponentConfig, ContentItem } from "golden-layout"; @@ -31,7 +32,7 @@ function traverse(x: ContentItem, depth: number): Array { return removeTabsArray; } -interface ViewState { +export interface ViewState { title: string; graph: Graph; name: string; @@ -149,32 +150,4 @@ export class View { viewLayout.destroy(); viewLayout = goldenLayout(); } - /** Create and return a new graph if the option is set to create star operations in a new view. - * @param title - optional view title - * @returns this iff the option to create stars in a new view is unset, a new view's graph if it is set */ - async newGraph(title?: string): Promise { - //if(!mainView.state.graph.menu.starNewView()) {return this;} // using the menu option to determine whether to create a new graph - if (this !== View.mainView.state.graph) { - return this; - } // span new views only from the main view - const view = new View(true, title); - await view.initialized; - return view.state.graph; - } - /** Multiplex star operations into a new view. - @param changeLayout - arrange the given node and its close matches in the center and the connected nodes in a circle around them. - @param direction - only show edges that originate from node, not those that end in it. Optional and defaults to false. - @returns show star function applied to multiple nodes */ - async showStarMultiplexedNew(changeLayout: boolean = false, direction: Direction) { - const graph = await this.newGraph(); - const f = (_node: NodeSingular) => { - graph.multiplex( - (nodes: NodeCollection) => graph.showStar(graph.assimilateNodes(nodes), changeLayout, direction), - graph.assimilateNodes(this.cy.nodes(":selected")), - true - )(_node); - return graph; - }; - return f; - } } diff --git a/js/layout.ts b/js/layout.ts index 0e58fc5c..c5c666c5 100644 --- a/js/layout.ts +++ b/js/layout.ts @@ -7,7 +7,7 @@ import { timer } from "./timer"; import { NODE } from "./node"; import { config } from "./config"; import log from "loglevel"; -import type { ElementDefinition, LayoutOptions, NodeCollection, Layouts, Position } from "cytoscape"; +import type { Core, ElementDefinition, LayoutOptions, NodeCollection, Layouts, Position } from "cytoscape"; import cytoscape from "cytoscape"; //eslint-disable-line no-duplicate-imports import cytoscapeeuler from "cytoscape-euler"; cytoscape.use(cytoscapeeuler);