From e0135eafec8cfefcacb84f62db36a8dc2bb987e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Konrad=20H=C3=B6ffner?= Date: Thu, 26 Oct 2023 13:48:20 +0200 Subject: [PATCH] feat: add option to always show edge labels with the properties, resolve #404 --- js/browser/colorschemeday.ts | 6 +++++ js/browser/colorschemenight.ts | 6 +++++ js/browser/graph.ts | 8 +++++-- js/browser/menu.ts | 25 +++++++++++++++++---- js/browser/style.ts | 40 +++++++++++++++++++++++++++------- js/browser/view.ts | 3 ++- js/lang/en.ts | 1 + 7 files changed, 74 insertions(+), 15 deletions(-) diff --git a/js/browser/colorschemeday.ts b/js/browser/colorschemeday.ts index 746b2b7a..e6b3dbc7 100644 --- a/js/browser/colorschemeday.ts +++ b/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: { diff --git a/js/browser/colorschemenight.ts b/js/browser/colorschemenight.ts index f99793cc..0ad43f77 100644 --- a/js/browser/colorschemenight.ts +++ b/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: { diff --git a/js/browser/graph.ts b/js/browser/graph.ts index da8724c7..82e1bcdd 100644 --- a/js/browser/graph.ts +++ b/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. diff --git a/js/browser/menu.ts b/js/browser/menu.ts index 77ccefb2..9c3386ad 100644 --- a/js/browser/menu.ts +++ b/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): 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,10 +361,16 @@ ${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); @@ -364,6 +378,9 @@ ${Menu.gitInfo()}`, 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")) { diff --git a/js/browser/style.ts b/js/browser/style.ts index 4bcc7c3d..420c40d9 100644 --- a/js/browser/style.ts +++ b/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; }, }, }, diff --git a/js/browser/view.ts b/js/browser/view.ts index 54ed0d03..ff58a7a2 100644 --- a/js/browser/view.ts +++ b/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); }); diff --git a/js/lang/en.ts b/js/lang/en.ts index 487a2e00..03ca41d9 100644 --- a/js/lang/en.ts +++ b/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",