From a8b932d7ded87ed5b9c4fe734922d0b1798c2ee2 Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@exaforce.com>
Date: Fri, 5 Jan 2024 10:57:00 -0800
Subject: [PATCH] Component | Graph | Nodes: Supporting SVG node icons

#319
---
 .../components/graph/modules/node/helper.ts   |  4 +++
 .../components/graph/modules/node/index.ts    | 26 ++++++++++++++-----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/ts/src/components/graph/modules/node/helper.ts b/packages/ts/src/components/graph/modules/node/helper.ts
index dae6856df..89d848bb5 100644
--- a/packages/ts/src/components/graph/modules/node/helper.ts
+++ b/packages/ts/src/components/graph/modules/node/helper.ts
@@ -161,3 +161,7 @@ export function getNodeIconColor<T> (d: T, colorAccessor: ColorAccessor<T>, inde
   const brightness = hexToBrightness(hex)
   return brightness > 0.65 ? 'var(--vis-graph-node-icon-fill-color-dark)' : 'var(--vis-graph-node-icon-fill-color-bright)'
 }
+
+export function isInternalHref (str: string): boolean {
+  return /^#[^]+/.test(str)
+}
diff --git a/packages/ts/src/components/graph/modules/node/index.ts b/packages/ts/src/components/graph/modules/node/index.ts
index 91dfc6d6f..0e0155954 100644
--- a/packages/ts/src/components/graph/modules/node/index.ts
+++ b/packages/ts/src/components/graph/modules/node/index.ts
@@ -31,6 +31,7 @@ import {
   getNodeIconColor,
   getNodeSize,
   LABEL_RECT_VERTICAL_PADDING,
+  isInternalHref,
 } from './helper'
 import { appendShape, updateShape, isCustomXml } from '../shape'
 import { ZoomLevel } from '../zoom-levels'
@@ -70,7 +71,7 @@ export function createNodes<N extends GraphInputNode, L extends GraphInputLink>
     appendShape(group, shape, nodeSelectors.node, nodeSelectors.customNode, d._index)
     appendShape(group, shape, nodeSelectors.nodeSelection, nodeSelectors.customNode, d._index)
     group.append('path').attr('class', nodeSelectors.nodeGauge)
-    group.append('text').attr('class', nodeSelectors.nodeIcon)
+    group.append('g').attr('class', nodeSelectors.nodeIcon)
 
     const label = group.append('g').attr('class', nodeSelectors.label)
     label.append('rect').attr('class', nodeSelectors.labelBackground)
@@ -213,11 +214,24 @@ export function updateNodes<N extends GraphInputNode, L extends GraphInputLink>
     updateShape(nodeSelectionOutline, nodeShape, nodeSize, d._index)
 
     // Update Node Icon
-    icon
-      .style('font-size', `${getNumber(d, nodeIconSize, d._index) ?? 2.5 * Math.sqrt(nodeSizeValue)}px`)
-      .attr('dy', '0.1em')
-      .style('fill', getNodeIconColor(d, nodeFill, d._index, selection.node()))
-      .html(getString(d, nodeIcon, d._index))
+    const nodeIconContent = getString(d, nodeIcon, d._index)
+    const nodeIconSizeValue = getNumber(d, nodeIconSize, d._index) ?? 2.5 * Math.sqrt(nodeSizeValue)
+    icon.selectAll('*').remove() // Removing all children first
+    if (isInternalHref(nodeIconContent)) { // If the icon is a href, we need to append a <use> element and render the icon with it
+      icon.append('use')
+        .attr('href', nodeIconContent)
+        .attr('x', -nodeIconSizeValue / 2)
+        .attr('y', -nodeIconSizeValue / 2)
+        .attr('width', nodeIconSizeValue)
+        .attr('height', nodeIconSizeValue)
+    } else { // If the icon is a text, we need to append a <text> element and render the icon as text
+      icon
+        .append('text')
+        .style('font-size', `${nodeIconSizeValue}px`)
+        .attr('dy', '0.1em')
+        .style('fill', getNodeIconColor(d, nodeFill, d._index, selection.node()))
+        .html(nodeIconContent)
+    }
 
     // Side Labels
     const sideLabelsData = getValue<GraphNode<N, L>, GraphCircleLabel[]>(d, nodeSideLabels, d._index) || []