feat: add color legend to both SNIK and HITO: resolve #455

Author: KonradHoeffner

js/config/config.dist.ts

@@ -3,8 +3,8 @@ Copy to js/config/config.ts after checkout and adapt to your preferences.
 */
 
 import type { LogLevelDesc } from "loglevel";
-import snikConf from "./config.snik";
-//import hitoConf from "./config.hito";
+import ontologyConf from "./config.snik";
+//import ontologyConf from "./config.hito";
 
 export const config = {
 	nodeSize: 39,
@@ -24,7 +24,7 @@ export const config = {
 		},
 	},
 	// Change this when you want to use a different ontology. Refer to ./config.snik.ts and ./config.hito.ts for examples.
-	ontology: snikConf,
+	ontology: ontologyConf,
 	multiview: {
 		initialTabs: 1,
 		warnOnSessionLoad: true,

js/config/config.hito.ts

@@ -31,10 +31,12 @@ function getMapKeyIncludedInString<V>(search: string, map: Map<string, V>): stri
 	return undefined;
 }
 
+const colorLegend = () => Array.from(colorMap.entries()).reduce((ac, [n, c]) => ac + ` <span style='color:${c}'>&#9632;</span> ${n}`, "");
+
 export default {
 	id: "hito",
 	name: "HITO",
-	legend: "<span>&#9632; Citation</span> <span>&#9650; Classification</span> <span>&#9679; Catalogue</span>",
+	legend: "<span>&#9632; Citation</span> <span>&#9650; Classification</span> <span>&#9679; Catalogue</span> " + colorLegend(),
 	title: "Health IT Ontology Graph",
 	initialView: hitoView,
 	snik: null,

js/config/config.snik.ts

@@ -22,10 +22,12 @@ const colorMap = new Map([
 	["bb2", "rgb(0, 255, 255)"],
 ]);
 
+const colorLegend = () => Array.from(colorMap.entries()).reduce((ac, [n, c]) => ac + ` <span style='color:${c}'>&#9632;</span> ${n}`, "");
+
 export default {
 	id: "snik",
 	name: "SNIK",
-	legend: "<span>&#9632; Entity Type</span> <span>&#9650; Role</span> <span>&#9679; Function</span> <span>* has Instances</span>",
+	legend: "<span>&#9632; Entity Type</span> <span>&#9650; Role</span> <span>&#9679; Function</span> <span>* has Instances</span>" + colorLegend(),
 	title: "SNIK Ontology Graph",
 	initialView: snikView,
 	snik: {