improve upon the refactoring to fix resulting errors

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<MenuItem>, 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<MenuItem>;
+	onClickFunction?(event: Event | { target: any }): void;
+}
+
 /** context menu for nodes and edges */
 export class ContextMenu {
 	graph: Graph;

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<Graph> {
+		//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;
+	}
 }

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";

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";

js/browser/save.ts

@@ -1,15 +1,26 @@
 /** 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";
 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<TabContent>;
+	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,

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<ContentItem> {
 	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<Graph> {
-		//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;
-	}
 }

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);