feat: add option to always show edge labels with the properties, resolve

 #404

js/browser/colorschemeday.ts

@@ -27,6 +27,12 @@ const colorschemeday = [
 			"border-color": "rgb(0,165,165)",
 		},
 	},
+	{
+		selector: "edge",
+		css: {
+			color: "black", // label color
+		},
+	},
 	{
 		selector: "edge[!selected]",
 		css: {

js/browser/colorschemenight.ts

@@ -21,6 +21,12 @@ const colorschemenight = [
 		selector: "node.target",
 		css: { "border-color": "rgb(255,90,90)" },
 	},
+	{
+		selector: "edge",
+		css: {
+			color: "white", // label color
+		},
+	},
 	{
 		selector: "edge:unselected",
 		css: {

js/browser/graph.ts

@@ -1,6 +1,6 @@
 /** Provides graph operations such as initialization, wayfinding and highlighting.*/
 /*eslint no-unused-vars: ["warn", { "argsIgnorePattern": "^_" }]*/
-import { coloredEdgeStyle, style } from "./style";
+import { coloredEdgeStyle, showPropertyStyle, style } from "./style";
 import { colorschemenight } from "./colorschemenight";
 import { colorschemeday } from "./colorschemeday";
 import { timer } from "../timer";
@@ -373,8 +373,9 @@ export class Graph {
 	/** Inverts the screen colors in the canvas for day mode. Uses an inverted node js style file to keep node colors.
 	 * @param dayScheme - whether the canvas colors should be inverted.
 	 * @param coloredEdges - Give every edge-type a certain color.
+	 * @param showProperty - Show the property as edge label even on all edges, else only show edge labels on unselected edges.
 	 */
-	applyStyle(dayScheme: boolean, coloredEdges: boolean): void {
+	applyStyle(dayScheme: boolean, coloredEdges: boolean, showProperty: boolean): void {
 		let baseStyle = style.style as any;
 		if (dayScheme) {
 			this.container.style.backgroundColor = "white";
@@ -386,6 +387,9 @@ export class Graph {
 		if (coloredEdges) {
 			baseStyle = baseStyle.concat(coloredEdgeStyle);
 		}
+		if (showProperty) {
+			baseStyle = baseStyle.concat(showPropertyStyle);
+		}
 		this.cy.style().fromJson(baseStyle).update();
 	}
 	/** Center and highlight the given URI.

js/browser/menu.ts

@@ -70,6 +70,7 @@ export class Menu {
 	separateSubsBox;
 	dayModeBox;
 	coloredEdgesBox;
+	showPropertyBox;
 	/** Construct the main menu bar. */
 	constructor() {
 		if (menu) {
@@ -83,7 +84,7 @@ export class Menu {
 		menu = this;
 	}
 
-	/** @returns hether subontologies are to be displayed separately. */
+	/** @returns whether subontologies are to be displayed separately. */
 	separateSubs(): boolean {
 		return this.separateSubsBox.checked;
 	}
@@ -95,6 +96,13 @@ export class Menu {
 		return this.coloredEdgesBox.checked;
 	}
 
+	/**
+	 * @returns if edge labels with the property names should always be shown
+	 */
+	showProperty(): boolean {
+		return this.showPropertyBox.checked;
+	}
+
 	///** @returns {boolean} whether star operations should be shown in a new view. */
 	// starNewView() {return this.starNewViewBox.checked;}
 	/** Sets the preferred node label language attribute. Use the values from node.js.
@@ -329,7 +337,7 @@ ${Menu.gitInfo()}`,
 	 * @param as - an empty array that will be filled with the anchor elements */
 	addOptions(as: Array<HTMLAnchorElement>): void {
 		const optionsContent = util.getElementById("options-menu-content");
-		const names = ["separateSubs", "cumulativeSearch", "grid", "combineMatchMode", "dayMode", "coloredEdges"]; // ,"starNewView"
+		const names = ["separateSubs", "cumulativeSearch", "grid", "combineMatchMode", "dayMode", "coloredEdges", "showProperty"]; // ,"starNewView"
 		(this as any).optionBoxes = {};
 		for (const name of names) {
 			log.trace("Add option " + name);
@@ -353,17 +361,26 @@ ${Menu.gitInfo()}`,
 		});
 		this.dayModeBox.addEventListener("change", () => {
 			for (const view of View.views()) {
-				view.state.graph.applyStyle(this.dayModeBox.checked, this.coloredEdgesBox.checked);
+				view.state.graph.applyStyle(this.dayModeBox.checked, this.coloredEdgesBox.checked, this.showPropertyBox.checked);
 			}
 			log.debug("Set dayMode to " + this.dayModeBox.checked);
 		});
+		this.showPropertyBox.addEventListener("change", () => {
+			for (const view of View.views()) {
+				view.state.graph.applyStyle(this.dayModeBox.checked, this.coloredEdgesBox.checked, this.showPropertyBox.checked);
+			}
+			log.debug("Set showProperty to " + this.showPropertyBox.checked);
+		});
 		(this as any).gridBox.addEventListener("change", () => {
 			document.body.classList[(this as any).gridBox.checked ? "add" : "remove"]("grid");
 			log.debug("set gridBox to " + (this as any).gridBox.checked);
 		});
 		if (config.activeOptions.includes("day")) {
 			this.dayModeBox.click();
 		}
+		if (config.activeOptions.includes("showproperty")) {
+			this.showPropertyBox.click();
+		}
 		// is only used by the main tab
 		((this as any).cumulativeSearchBox as HTMLInputElement).addEventListener("change", () => {
 			log.debug("Set cumulative search to " + (this as any).cumulativeSearchBox.checked);
@@ -388,7 +405,7 @@ ${Menu.gitInfo()}`,
 			(config as any).edgesColorized = colorize;
 			// redraw all canvas
 			for (const view of View.views()) {
-				view.state.graph.applyStyle(this.dayModeBox.checked, this.coloredEdgesBox.checked);
+				view.state.graph.applyStyle(this.dayModeBox.checked, this.coloredEdgesBox.checked, this.showPropertyBox.checked);
 			}
 		});
 		if (config.activeOptions.includes("edgecolor")) {

js/browser/style.ts

@@ -133,6 +133,10 @@ export const style = {
 				"z-compound-depth": "bottom",
 				width: 2.0,
 				opacity: 0.22,
+				"edge-text-rotation": "autorotate",
+				"text-margin-y": "-1em",
+				"min-zoomed-font-size": 5,
+				"font-size": 11,
 			},
 		},
 		{
@@ -151,10 +155,6 @@ export const style = {
 					}
 					return "triangle";
 				},
-				"edge-text-rotation": "autorotate",
-				"text-margin-y": "-1em",
-				"min-zoomed-font-size": 5,
-				"font-size": 11,
 				label: function (edge) {
 					let label = edge.data(EDGE.PROPERTY_LABEL);
 					const SHOW_QUALITY = true;
@@ -218,14 +218,38 @@ export const style = {
 	],
 };
 
+function edgeColor(edge) {
+	const edgeType = edge.data(EDGE.PROPERTY);
+	const color = stringToColor(edgeType); // maybe adjust the v of the hsv color for day mode
+	return color;
+}
+
 export const coloredEdgeStyle = [
+	{
+		selector: "edge",
+		css: {
+			color: edgeColor,
+		},
+	},
 	{
 		selector: "edge:unselected",
 		css: {
-			"line-color": function (edge) {
-				const edgeType = edge.data(EDGE.PROPERTY);
-				const color = stringToColor(edgeType); // maybe adjust the v of the hsv color for day mode
-				return color;
+			"line-color": edgeColor,
+		},
+	},
+];
+
+export const showPropertyStyle = [
+	{
+		selector: "edge",
+		css: {
+			label: function (edge) {
+				let label = edge.data(EDGE.PROPERTY_LABEL);
+				const SHOW_QUALITY = true;
+				if (SHOW_QUALITY && edge.data(EDGE.GRAPH) === "http://www.snik.eu/ontology/limes-exact") {
+					label += " \u26A0";
+				}
+				return label;
 			},
 		},
 	},

js/browser/view.ts

@@ -133,7 +133,8 @@ export class View {
 
 		this.initialized = initialize ? this.fill() : Promise.resolve();
 		this.initialized.then(() => {
-			this.state.graph.applyStyle(toJSON().options.dayMode, toJSON().options.edgesColorized);
+			const options = toJSON().options;
+			this.state.graph.applyStyle(options.dayMode, options.edgesColorized, options.showProperty);
 			const menuItems = [...nodeCommands(graph), ...edgeCommands(graph)];
 			this.cxtMenu = new ContextMenu(this.state.graph, menuItems);
 		});

js/lang/en.ts

@@ -23,6 +23,7 @@ export const en = {
 		grid: "show grid",
 		dayMode: "day mode",
 		coloredEdges: "Colorize edges by type",
+		showProperty: "Always show properties",
 		devMode: "developer mode",
 		extMode: "extended mode",
 		combineMatchMode: "Combine Matches",