[Ivette] edited field label, added comments and changed the color transformation function

ivette/src/dome/renderer/dark.css

@@ -165,18 +165,18 @@
     --graph-fg-color-blue: black;
     --graph-fg-color-pink: white;
     /** edge colors */
-    --graph-ed-color-default: #FFFFFF;
-    --graph-ed-color-white: #FFFFFF;
+    --graph-ed-color-default: #FFFFFF; /* white */
+    --graph-ed-color-white: #FFFFFF; /* white */
     --graph-ed-color-grey: #DDDDDD;
-    --graph-ed-color-dark: #000000;
-    --graph-ed-color-primary: #1E90FF;
-    --graph-ed-color-selected: #00BFFF;
-    --graph-ed-color-green: #00FF00;
-    --graph-ed-color-orange: #FFA500;
-    --graph-ed-color-red: #FF0000;
+    --graph-ed-color-dark: #000000; /* black */
+    --graph-ed-color-primary: #1E90FF; /* dodgerblue */
+    --graph-ed-color-selected: #00BFFF; /* deepskyblue */
+    --graph-ed-color-green: #00FF00; /* green */
+    --graph-ed-color-orange: #FFA500; /* orange */
+    --graph-ed-color-red: #FF0000; /* red */
     --graph-ed-color-yellow: #E5E100;
-    --graph-ed-color-blue: #00BFFF;
-    --graph-ed-color-pink: #FF82AB;
+    --graph-ed-color-blue: #00BFFF; /* deepskyblue */
+    --graph-ed-color-pink: #FF82AB; /* palevioletred1 */
 
   }
 }

ivette/src/dome/renderer/light.css

@@ -165,17 +165,17 @@
     --graph-fg-color-blue: black;
     --graph-fg-color-pink: white;
     /** edge colors */
-    --graph-ed-color-default: #000000;
+    --graph-ed-color-default: #000000; /* black */
     --graph-ed-color-white: #CCCCCC;
     --graph-ed-color-grey: #888888;
-    --graph-ed-color-dark: #000000;
-    --graph-ed-color-primary: #1E90FF;
-    --graph-ed-color-selected: #00BFFF;
-    --graph-ed-color-green: #00FF00;
-    --graph-ed-color-orange: #FFA500;
-    --graph-ed-color-red: #FF0000;
+    --graph-ed-color-dark: #000000; /* black */
+    --graph-ed-color-primary: #1E90FF; /* dodgerblue */
+    --graph-ed-color-selected: #00BFFF; /* deepskyblue */
+    --graph-ed-color-green: #00FF00; /* green */
+    --graph-ed-color-orange: #FFA500; /* orange */
+    --graph-ed-color-red: #FF0000; /* red */
     --graph-ed-color-yellow: #E5E100;
-    --graph-ed-color-blue: #00BFFF;
-    --graph-ed-color-pink: #FF82AB;
+    --graph-ed-color-blue: #00BFFF; /* deepskyblue */
+    --graph-ed-color-pink: #FF82AB; /* palevioletred1 */
   }
 }

ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx

@@ -147,9 +147,9 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
       <Filler/>
 
       <div className='cg-spinner'>
-        edges: <Spinner
+        Edges: <Spinner
         value={linkThickness}
-        title="Tickness of edges"
+        title="Thickness of edges"
         vmin={1}
         vmax={10}
         vstep={1}

ivette/src/frama-c/plugins/callgraph/definitions.tsx

@@ -93,28 +93,35 @@ function getIDFromLink(link: LinkObject3D<CGNode, CGLink>)
   return { sourceId, targetId };
 }
 
-export function changeLinkColor(hex: string, amount: number): string {
+/**
+ * Each RGB component of the color is modified by :
+ * - adding a percentage of the (255 - component value) for lighten
+ * - removing a percentage of the component value for darken.
+ *
+ * A negative percentage darkens and a positive percentage lightens the color.
+ *
+ * @param hex color to transform
+ * @param amount percentage in [-100, 100]
+ * @returns new hexadecimal color
+*/
+export function transformColor(hex: string, amount: number): string {
+  const percentage =  Math.max(-100, Math.min(100, amount));
+
   function hexToRgb(hex: string): [number, number, number] {
     hex = hex.replace('#', '');
     const bigint = parseInt(hex, 16);
-    const r = (bigint >> 16) & 255;
-    const g = (bigint >> 8) & 255;
-    const b = bigint & 255;
-    return [r, g, b];
+    return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
   }
   function rgbToHex(r: number, g: number, b: number): string {
     return `#${((1 << 24) + (r << 16) + (g << 8) + b)
-      .toString(16)
-      .slice(1)
-      .toUpperCase()}`;
+      .toString(16).slice(1).toUpperCase()}`;
+  }
+  function newColor(color: number): number {
+    const base = percentage < 0 ? color : (255 - color);
+    return color + Math.floor(base * percentage / 100);
   }
-  let [r, g, b] = hexToRgb(hex);
-  r = Math.min(255, r + Math.round(255 * (amount / 100)));
-  g = Math.min(255, g + Math.round(255 * (amount / 100)));
-  b = Math.min(255, b + Math.round(255 * (amount / 100)));
-  r = r < 0 ? 0 : r;
-  g = g < 0 ? 0 : g;
-  b = b < 0 ? 0 : b;
+
+  const [r, g, b] = hexToRgb(hex).map(color => newColor(color));
   return rgbToHex(r, g, b);
 }
 

ivette/src/frama-c/plugins/callgraph/index.tsx

@@ -46,7 +46,7 @@ import {
   callGraphFunction, SelectedNodes, ModeDisplay,
   CGNode, CGLink, CGData,
   CallGraphFunc, SelectedNodesData,
-  changeLinkColor
+  transformColor
 } from "frama-c/plugins/callgraph/definitions";
 
 import './callgraph.css';
@@ -291,7 +291,7 @@ function Callgraph(): JSX.Element {
       return (C.getLinkWidth(link, linkThickness) * 150 / 100);
     },
     particleColor: (link) => {
-      return changeLinkColor(
+      return transformColor(
         C.getLinkColor(link), theme[0] === "light" ? -50 : 50
       );
     },