From 5b0d979a233a24da3d26afdb03df66f267b42d18 Mon Sep 17 00:00:00 2001
From: Henning Dieterichs <hdieterichs@microsoft.com>
Date: Sun, 19 Nov 2023 14:03:11 +0100
Subject: [PATCH] Adds border color

---
 .../graph/graph-visjs-visualizer/VisJsGraphViewer.tsx     | 8 ++++----
 visualization-bundle/src/visualizers/graph/sGraph.ts      | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/visualization-bundle/src/visualizers/graph/graph-visjs-visualizer/VisJsGraphViewer.tsx b/visualization-bundle/src/visualizers/graph/graph-visjs-visualizer/VisJsGraphViewer.tsx
index d786dea..6c873fd 100644
--- a/visualization-bundle/src/visualizers/graph/graph-visjs-visualizer/VisJsGraphViewer.tsx
+++ b/visualization-bundle/src/visualizers/graph/graph-visjs-visualizer/VisJsGraphViewer.tsx
@@ -1,7 +1,7 @@
-import { Network, Options, DataSet } from "vis-network/standalone";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { NodeGraphData, EdgeGraphData } from "../sGraph";
+import { DataSet, Network, Options } from "vis-network/standalone";
+import { EdgeGraphData, NodeGraphData } from "../sGraph";
 
 @observer
 export class VisJsGraphViewer extends React.Component<{
@@ -12,7 +12,7 @@ export class VisJsGraphViewer extends React.Component<{
 	private readonly nodes = new DataSet<{
 		id: string;
 		label?: string;
-		color?: string;
+		color?: { border: string; background: string } | string;
 		shape?: string;
 	}>();
 	private readonly edges = new DataSet<{
@@ -42,7 +42,7 @@ export class VisJsGraphViewer extends React.Component<{
 			this.nodes.update({
 				id: n.id,
 				label: n.label !== undefined ? n.label : n.id,
-				color: n.color,
+				color: { background: n.color, border: n.borderColor },
 				shape: n.shape,
 			});
 		}
diff --git a/visualization-bundle/src/visualizers/graph/sGraph.ts b/visualization-bundle/src/visualizers/graph/sGraph.ts
index 141a3a9..15900b1 100644
--- a/visualization-bundle/src/visualizers/graph/sGraph.ts
+++ b/visualization-bundle/src/visualizers/graph/sGraph.ts
@@ -1,11 +1,10 @@
 import {
-	sOpenObject,
-	sLiteral,
 	sArrayOf,
-	sString,
+	sLiteral,
+	sOpenObject,
 	sOptionalProp,
+	sString,
 	sUnion,
-	sBoolean,
 } from "@hediet/semantic-json";
 import { visualizationNs } from "../../consts";
 
@@ -16,6 +15,7 @@ export const sGraphNode = sOpenObject({
 	id: sString(),
 	label: sOptionalProp(sString(), {}),
 	color: sOptionalProp(sString(), {}),
+	borderColor: sOptionalProp(sString(), {}),
 	shape: sOptionalProp(sUnion([sLiteral("ellipse"), sLiteral("box")]), {}),
 }).defineAs(visualizationNs("GraphNode"));