From 98498567e8502d2b02d566dd6b08f0590dab1bef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20Marussy?= <kristof@marussy.com>
Date: Sun, 28 Apr 2024 01:29:46 +0200
Subject: [PATCH] feat(frontend): icon for error edges

Make error edges more visible even in black&white printouts.
---
 subprojects/frontend/src/graph/dotSource.ts   | 27 ++++++++++++++++---
 .../frontend/src/graph/postProcessSVG.ts      | 25 ++++++++++-------
 2 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/subprojects/frontend/src/graph/dotSource.ts b/subprojects/frontend/src/graph/dotSource.ts
index bcd386cfe..ce504c37d 100644
--- a/subprojects/frontend/src/graph/dotSource.ts
+++ b/subprojects/frontend/src/graph/dotSource.ts
@@ -227,6 +227,25 @@ function binarySerach(
   return undefined;
 }
 
+function getEdgeLabel(
+  name: string,
+  containment: boolean,
+  value: string,
+): string {
+  if (value !== 'ERROR') {
+    return containment ? `<<b>${name}</b>>` : `"${name}"`;
+  }
+  // No need to set an id for the image for animation,
+  // because it will be the only `<use>` element in its group.
+  return `<<table fixedsize="TRUE" align="left" border="0" cellborder="0" cellspacing="0" cellpadding="0">
+    <tr>
+      <td><img src="#ERROR"/></td>
+      <td width="3.9375"></td>
+      <td align="left">${containment ? `<b>${name}</b>` : name}</td>
+    </tr>
+  </table>>`;
+}
+
 function createRelationEdges(
   graph: GraphStore,
   nodeData: NodeData[],
@@ -243,10 +262,10 @@ function createRelationEdges(
   let weight = EDGE_WEIGHT;
   let penwidth = 1;
   const name = graph.getName(relation);
-  let label = `"${name}"`;
+  let containment = false;
   if (detail.type === 'reference' && detail.containment) {
     weight = CONTAINMENT_WEIGHT;
-    label = `<<b>${name}</b>>`;
+    containment = true;
     penwidth = 2;
   } else if (
     detail.type === 'opposite' &&
@@ -311,8 +330,10 @@ function createRelationEdges(
       edgeWeight *= UNKNOWN_WEIGHT_FACTOR;
     }
 
+    const id = `${fromNode.name},${toNode.name},${relation.name}`;
+    const label = getEdgeLabel(name, containment, value);
     lines.push(`n${from} -> n${to} [
-      id="${fromNode.name},${toNode.name},${relation.name}",
+      id="${id}",
       dir="${dir}",
       constraint=${edgeConstraint},
       weight=${edgeWeight},
diff --git a/subprojects/frontend/src/graph/postProcessSVG.ts b/subprojects/frontend/src/graph/postProcessSVG.ts
index 97130012b..90dfbf616 100644
--- a/subprojects/frontend/src/graph/postProcessSVG.ts
+++ b/subprojects/frontend/src/graph/postProcessSVG.ts
@@ -135,6 +135,10 @@ function hrefToClass(node: SVGGElement) {
   });
 }
 
+function parseCoordinate(element: SVGElement, attribute: string): number {
+  return Number(element.getAttribute(attribute)?.replace('px', '') ?? '0');
+}
+
 function replaceImages(node: SVGGElement) {
   node.querySelectorAll<SVGImageElement>('image').forEach((image) => {
     const href =
@@ -142,13 +146,17 @@ function replaceImages(node: SVGGElement) {
     if (href === 'undefined' || !href?.startsWith('#')) {
       return;
     }
-    const width = image.getAttribute('width')?.replace('px', '') ?? '';
-    const height = image.getAttribute('height')?.replace('px', '') ?? '';
+    const width = parseCoordinate(image, 'width');
+    const height = parseCoordinate(image, 'height');
+    const x = parseCoordinate(image, 'x');
+    const y = parseCoordinate(image, 'y');
+    const size = Math.min(width, height);
+    const sizeString = String(size);
     const use = document.createElementNS(SVG_NS, 'use');
-    use.setAttribute('x', image.getAttribute('x') ?? '');
-    use.setAttribute('y', image.getAttribute('y') ?? '');
-    use.setAttribute('width', width);
-    use.setAttribute('height', height);
+    use.setAttribute('x', String(x + (width - size) / 2));
+    use.setAttribute('y', String(y + (height - size) / 2));
+    use.setAttribute('width', sizeString);
+    use.setAttribute('height', sizeString);
     const iconName = `icon-${href.replace('#', '')}`;
     use.setAttribute('href', `#refinery-${iconName}`);
     use.classList.add('icon', iconName);
@@ -193,14 +201,11 @@ function markerColorToClass(svg: SVGSVGElement) {
 }
 
 export default function postProcessSvg(svg: SVGSVGElement) {
-  // svg
-  //   .querySelectorAll<SVGTitleElement>('title')
-  //   .forEach((title) => title.parentElement?.removeChild(title));
   svg.querySelectorAll<SVGGElement>('g.node').forEach((node) => {
     optimizeNodeShapes(node);
     hrefToClass(node);
-    replaceImages(node);
   });
+  replaceImages(svg);
   // Increase padding to fit box shadows for multi-objects.
   const viewBox = [
     svg.viewBox.baseVal.x - 6,