chore: rename seperate subontologies references to separate colours; r…

…esolves #454

html/manual.html

@@ -105,7 +105,7 @@ <h3>EntityType</h3>
 		...and which information is therefore needed.
 		<h2>Options</h2>
 		Here you can find different checkboxes that toggle the behaviour of SNIK Graph. These are applied to all open views.
-		<h3>Separate Subs</h3>
+		<h3>Separate Colours/Subs</h3>
 		Spread the SNIK Graph into subgraphs of the subontologies.
 		<h3>Cumulative Search</h3>
 		Keep previous search results visible when searching again.

js/browser/menu.ts

@@ -75,7 +75,7 @@ export interface MenuEntry {
 
 /** Populates the menu bar on the top and initializes the context menu.*/
 export class Menu {
-	separateSubsBox: HTMLInputElement;
+	separateColoursBox: HTMLInputElement;
 	dayModeBox: HTMLInputElement;
 	coloredEdgesBox: HTMLInputElement;
 	showPropertyBox: HTMLInputElement;
@@ -93,8 +93,8 @@ export class Menu {
 	}
 
 	/** @returns whether subontologies are to be displayed separately. */
-	separateSubs(): boolean {
-		return this.separateSubsBox?.checked; // prevent undefined property access, box only exists for SNIK
+	separateColours(): boolean {
+		return this.separateColoursBox?.checked; // prevent undefined property access, box only exists for SNIK
 	}
 
 	/**
@@ -180,7 +180,8 @@ export class Menu {
 						action: async () => {
 							await loadGraphFromSparql(View.activeState().graph.cy, []);
 							progress(
-								async () => await layout.runCached(View.activeState().graph.cy, layout.euler, config.ontology?.snik?.defaultSubOntologies, this.separateSubs())
+								async () =>
+									await layout.runCached(View.activeState().graph.cy, layout.euler, config.ontology?.snik?.defaultSubOntologies, this.separateColours())
 							);
 						},
 						i18n: "load-sparql",
@@ -192,7 +193,7 @@ export class Menu {
 					{ action: () => save.saveLayout(View.activeState()), i18n: "save-layout" },
 					{
 						action: () => {
-							progress(() => layout.run(View.activeState().cy, layout.euler, config.ontology?.snik?.defaultSubOntologies, this.separateSubs(), true));
+							progress(() => layout.run(View.activeState().cy, layout.euler, config.ontology?.snik?.defaultSubOntologies, this.separateColours(), true));
 						},
 						i18n: "recalculate-layout-replace",
 					},
@@ -243,7 +244,7 @@ export class Menu {
 								View.activeState().graph.cy,
 								layout.euler,
 								config.ontology?.snik?.defaultSubOntologies,
-								this.separateSubs() && !View.activeState().graph.starMode,
+								this.separateColours() && !View.activeState().graph.starMode,
 								true
 							);
 						},
@@ -256,7 +257,7 @@ export class Menu {
 								View.activeState().graph.cy,
 								layout.eulerTight,
 								config.ontology?.snik?.defaultSubOntologies,
-								this.separateSubs() && !View.activeState().graph.starMode,
+								this.separateColours() && !View.activeState().graph.starMode,
 								false
 							);
 						},
@@ -269,7 +270,7 @@ export class Menu {
 								View.activeState().graph.cy,
 								layout.cose,
 								config.ontology?.snik?.defaultSubOntologies,
-								this.separateSubs() && !View.activeState().graph.starMode,
+								this.separateColours() && !View.activeState().graph.starMode,
 								false
 							);
 						},
@@ -348,7 +349,7 @@ export class Menu {
 		const optionsContent = util.getElementById("options-menu-content");
 
 		// names of options to be added
-		const names = ["cumulativeSearch", "separateSubs", "grid", "combineMatchMode", "dayMode", "coloredEdges", "showProperty"]; // ,"starNewView"
+		const names = ["separateColours", "cumulativeSearch", "grid", "combineMatchMode", "dayMode", "coloredEdges", "showProperty"]; // ,"starNewView"
 
 		(this as any).optionBoxes = {};
 		for (const name of names) {
@@ -378,8 +379,8 @@ export class Menu {
 			a.appendChild(util.checkboxClickableDiv(box, language.getString(name), name));
 		}
 
-		this.separateSubsBox.addEventListener("change", () => {
-			log.debug("Set separate Subontologies to " + this.separateSubs());
+		this.separateColoursBox.addEventListener("change", () => {
+			log.debug("Set separate colours to " + this.separateColours());
 		});
 		this.dayModeBox.addEventListener("change", () => {
 			for (const view of View.views()) {
@@ -579,7 +580,7 @@ export class Menu {
 	}
 	/** Save session-based options (not user preferences) to JSON. */
 	optionsToJSON(): object {
-		const sessionOptions = ["cumulativeSearch", "separateSubs", "grid", "combineMatchMode", "dayMode", "coloredEdges"];
+		const sessionOptions = ["separateColours", "cumulativeSearch", "grid", "combineMatchMode", "dayMode", "coloredEdges"];
 		const options = {};
 
 		for (const option of sessionOptions) {

js/browser/viewLayout.ts

@@ -45,7 +45,7 @@ export function goldenLayout(): GoldenLayout {
 		const stackState = () => (stack as any).getActiveContentItem().config.componentState;
 		const cy = () => stackState().cy;
 		const controls = (stack as any).header.controlsContainer[0];
-		const separateSubs = () => View.getMenu().separateSubs() && !stackState().graph.starMode;
+		const separateColours = () => View.getMenu().separateColours() && !stackState().graph.starMode;
 		const data = [
 			[
 				".plussign",
@@ -68,16 +68,16 @@ export function goldenLayout(): GoldenLayout {
 			[
 				".recalculatesign",
 				() => {
-					layout.run(cy(), layout.euler, (layoutConfig as any).defaultSubOntologies, separateSubs(), true);
+					layout.run(cy(), layout.euler, (layoutConfig as any).defaultSubOntologies, separateColours(), true);
 				},
 			],
 			[
 				".tightlayoutsign",
 				() => {
-					layout.run(cy(), layout.eulerTight, (layoutConfig as any).defaultSubOntologies, separateSubs(), true);
+					layout.run(cy(), layout.eulerTight, (layoutConfig as any).defaultSubOntologies, separateColours(), true);
 				},
 			],
-			// The compound layout does not work with separate subs so set the latter always to false.
+			// The compound layout does not work with separate colours so set the latter always to false.
 			[
 				".compoundlayoutsign",
 				() => {

js/help.ts

@@ -54,7 +54,7 @@ export const help = {
 		},
 		options: {
 			"": "Here you can find different checkboxes that toggle the behaviour of SNIK Graph. These are applied to all open views.",
-			"separate-subs": "Spread the SNIK Graph into subgraphs of the subontologies.",
+			"separate-colours": "Separate the nodes by their colours when selecting a new layout.",
 			"cumulative-search": "Keep previous search results visible when searching again.",
 			grid: "shows a grid that supports better organizing of nodes.",
 			"combine-match": `Highlights groups of classes representing the same concept from different subontologies (matches) by placing them in boxes. Use "move matches on top of each other" or "move matches nearby" to shrink those boxes.`,

js/lang/de.ts

@@ -40,7 +40,7 @@ export const de = {
 		"intra-ontology-relations": "Beziehungen innerhalb von (Teil-)Ontologien",
 		// options********************************************
 		options: "Optionen",
-		separateSubs: "Nach Subontologien aufspalten",
+		separateColours: "Nach Farben trennen",
 		cumulativeSearch: "Kumulative Suche",
 		grid: "Raster anzeigen",
 		dayMode: "Tag-Modus",

js/lang/en.ts

@@ -40,7 +40,7 @@ export const en = {
 		"intra-ontology-relations": "Intra-Ontology Relations",
 		// options********************************************
 		options: "Options",
-		separateSubs: "Separate Subontologies",
+		separateColours: "Separate Colours",
 		cumulativeSearch: "Cumulative Search",
 		grid: "Show Grid",
 		dayMode: "Day Mode",

js/layout.ts

@@ -19,19 +19,19 @@ let activeLayout: Layouts;
 /**
 @param layoutName - Cytoscape.js layout name
 @param subs - the subontology identifiers included in the graph. Used to retrieve the correct layout later.
-@param separateSubs - Whether to separate the graph based on the subontologies.
+@param separateColours - Whether to separate the graph based on its colours.
 @returns the storage name coded by the layout and the subontologies
 @example storageName("euler",new Set(["meta","ob","bb"]));
 */
-function storageName(layoutName: string, subs: Array<string>, separateSubs: boolean = false): string {
+function storageName(layoutName: string, subs: Array<string>, separateColours: boolean = false): string {
 	return (
 		"layout" +
 		layoutName +
 		subs
 			.sort()
 			.toString()
 			.replace(/[^a-z]/g, "") +
-		!!separateSubs
+		!!separateColours
 	);
 }
 
@@ -69,21 +69,27 @@ function center(nodes: NodeCollection): Position {
 @param cy - the Cytoscape.js graph to run the layout on
 @param layoutConfig - the layout configuration, which includes the layout name and options
 @param  subs - Set of subontologies. If the subs are not given the layout still works but it is not saved.
-@param  separateSubs - Whether to separate the graph based on the subontologies.
+@param  separateColours - Whether to separate the graph based on its colours.
 @param  save - Whether to save the layout on local storage.
 @returns whether the layout could successfully be applied. Does not indicate success of saving to cache.
 @example
 ```
 run(cy,{"name":"grid"},new Set(["meta","ciox"]))
 ```
 */
-export async function run(cy: Core, layoutConfig: LayoutOptions, subs?: Array<string>, separateSubs: boolean = false, save: boolean = false): Promise<boolean> {
+export async function run(
+	cy: Core,
+	layoutConfig: LayoutOptions,
+	subs?: Array<string>,
+	separateColours: boolean = false,
+	save: boolean = false
+): Promise<boolean> {
 	if (cy.nodes().size() === 0) {
 		log.warn("layout.js#run: Graph empty. Nothing to layout.");
 		return false;
 	}
 	const layoutTimer = timer("layout");
-	if (separateSubs) {
+	if (separateColours) {
 		const sources: Set<string> = new Set();
 		const virtualEdges: Array<ElementDefinition> = [];
 
@@ -98,11 +104,11 @@ export async function run(cy: Core, layoutConfig: LayoutOptions, subs?: Array<st
 				virtualEdges.push({ group: "edges", data: { source: node.data(NODE.ID), target: source, springLength: 180 } });
 			}
 		}
-		log.debug("Separate subontologies checked");
+		log.debug("Separate colours checked");
 		log.debug(`Adding ${virtualEdges.length} virtual edges.`);
 		cy.add(virtualEdges);
 	} else {
-		log.debug("Separate subontologies unchecked");
+		log.debug("Separate colours unchecked");
 	}
 	activeLayout && activeLayout.stop();
 
@@ -124,7 +130,7 @@ export async function run(cy: Core, layoutConfig: LayoutOptions, subs?: Array<st
 			elements.nodes().shift({ x: oldCenter.x - newCenter.x, y: oldCenter.y - newCenter.y });
 		}
 		layoutTimer.stop();
-		if (separateSubs) {
+		if (separateColours) {
 			const virtualNodes = cy.nodes("[type='virtual']");
 			log.debug(`Removing ${virtualNodes.length} virtual nodes.`);
 			cy.remove(virtualNodes); // connected edges should go away automatically
@@ -135,7 +141,7 @@ export async function run(cy: Core, layoutConfig: LayoutOptions, subs?: Array<st
 				return true;
 			}
 			const pos = positions(cy.nodes());
-			const name = storageName(layoutConfig.name, subs, separateSubs);
+			const name = storageName(layoutConfig.name, subs, separateColours);
 			localStorage.setItem(name, JSON.stringify(pos));
 			log.info("Replaced layout cache.");
 		}
@@ -201,24 +207,24 @@ export interface LayoutConfig {
 @param cy - the Cytoscape.js graph to run the layout on
 @param layoutConfig - the layout configuration, which includes the layout name and options
 @param subs - Set of subontologies. If the subs are not given the layout still works but it is not cached.
-@param separateSubs - Whether to separate the graph based on the subontologies.
+@param separateColours - Whether to separate the graph based on its colours.
 @returns whether the layout could successfully be applied. Does not indicate success of loading from cache, in which case it is calculated anew.
 */
 export async function runCached(
 	cy: cytoscape.Core,
 	layoutConfig: cytoscape.LayoutOptions,
 	subs: Array<string>,
-	separateSubs: boolean = false
+	separateColours: boolean = false
 ): Promise<boolean> {
 	if (typeof localStorage === "undefined") {
 		log.error("Web storage not available, could not access browser-based cache.");
-		return run(cy, layoutConfig, subs, separateSubs, false);
+		return run(cy, layoutConfig, subs, separateColours, false);
 	}
 	if (!subs) {
 		log.debug("subs not supplied, run layout without cache");
 		return run(cy, layoutConfig, undefined, false, false);
 	}
-	const name = storageName(layoutConfig.name, subs, separateSubs);
+	const name = storageName(layoutConfig.name, subs, separateColours);
 	// web storage
 	const cacheItem = localStorage.getItem(name);
 	if (cacheItem) {
@@ -238,7 +244,7 @@ export async function runCached(
 	else {
 		log.warn("Layout not in cache, recalculating layout...");
 	}
-	return run(cy, layoutConfig, subs, separateSubs, true);
+	return run(cy, layoutConfig, subs, separateColours, true);
 }
 
 /** Very fast but useless for most purposes except for testing.*/