[Ivette] improved style link

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: white;
-    --graph-ed-color-white: #fff;
-    --graph-ed-color-grey: #ddd;
-    --graph-ed-color-dark: black;
-    --graph-ed-color-primary: dodgerblue;
-    --graph-ed-color-selected: deepskyblue;
-    --graph-ed-color-green: green;
-    --graph-ed-color-orange: orange;
-    --graph-ed-color-red: red;
-    --graph-ed-color-yellow: #e5e100;
-    --graph-ed-color-blue: deepskyblue;
-    --graph-ed-color-pink: palevioletred1;
+    --graph-ed-color-default: #FFFFFF;
+    --graph-ed-color-white: #FFFFFF;
+    --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-yellow: #E5E100;
+    --graph-ed-color-blue: #00BFFF;
+    --graph-ed-color-pink: #FF82AB;
 
   }
 }

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: black;
-    --graph-ed-color-white: #ccc;
-    --graph-ed-color-grey: #888;
-    --graph-ed-color-dark: black;
-    --graph-ed-color-primary: dodgerblue;
-    --graph-ed-color-selected: deepskyblue;
-    --graph-ed-color-green: green;
-    --graph-ed-color-orange: orange;
-    --graph-ed-color-red: red;
-    --graph-ed-color-yellow: #e5e100;
-    --graph-ed-color-blue: deepskyblue;
-    --graph-ed-color-pink: palevioletred1;
+    --graph-ed-color-default: #000000;
+    --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-yellow: #E5E100;
+    --graph-ed-color-blue: #00BFFF;
+    --graph-ed-color-pink: #FF82AB;
   }
 }

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

@@ -47,6 +47,7 @@ interface CallgraphToolsBarProps {
   panelVisibleState: [boolean, () => void],
   verticalSpacingState: State<number>,
   horizontalSpacingState: State<number>,
+  linkThicknessState: State<number>,
   selectedFunctions:SelectedNodesData,
   taintedFunctions: string[],
   unprovenPropertiesFunctions: SelectedNodesData,
@@ -60,7 +61,7 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
   const {
     displayModeState, selectedParentsState,
     selectedChildrenState, panelVisibleState,
-    verticalSpacingState, horizontalSpacingState,
+    verticalSpacingState, horizontalSpacingState, linkThicknessState,
     selectedFunctions, taintedFunctions,
     unprovenPropertiesFunctions, cycleFunctions, dagMode,
     updateNodes
@@ -70,6 +71,7 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
   const [showInfos, flipShowInfos] = panelVisibleState;
   const [verticalSpacing, setVerticalSpacing] = verticalSpacingState;
   const [horizontalSpacing, setHorizontalSpacing] = horizontalSpacingState;
+  const [linkThickness, setLinkThickness] = linkThicknessState;
 
   function menuItem(label: string, onClick: ()=>void, enabled?: boolean)
     : Dome.PopupMenuItem {
@@ -144,6 +146,16 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
 
       <Filler/>
 
+      <div className='cg-spinner'>
+        edges: <Spinner
+        value={linkThickness}
+        title="Tickness of edges"
+        vmin={1}
+        vmax={10}
+        vstep={1}
+        onChange={setLinkThickness}
+        />
+      </div>
       <div className='cg-spinner'>
         hor: <Spinner
         value={horizontalSpacing}

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

@@ -55,7 +55,9 @@ export interface CallGraphFunc {
   /** Get link visibility */
   getLinkVisibility: (node: LinkObject3D<CGNode, CGLink>) => boolean;
   /** Get link width */
-  getLinkWidth: (node: LinkObject3D<CGNode, CGLink>) => number;
+  getLinkWidth: (
+    node: LinkObject3D<CGNode, CGLink>, linkThickness: number
+  ) => number;
   /** Get node visibility */
   getNodeVisibility: (id: string) => boolean;
 }
@@ -91,6 +93,31 @@ function getIDFromLink(link: LinkObject3D<CGNode, CGLink>)
   return { sourceId, targetId };
 }
 
+export function changeLinkColor(hex: string, amount: number): string {
+  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];
+  }
+  function rgbToHex(r: number, g: number, b: number): string {
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b)
+      .toString(16)
+      .slice(1)
+      .toUpperCase()}`;
+  }
+  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;
+  return rgbToHex(r, g, b);
+}
+
 export const callGraphFunction = (
   selectNodes: [SelectedNodes, SetSelectedNodes],
   graphData: CGData,
@@ -199,9 +226,13 @@ export const callGraphFunction = (
     }
   };
 
-  const getLinkWidth = (node: LinkObject3D<CGNode, CGLink>): number => {
+  const getLinkWidth = (
+    node: LinkObject3D<CGNode, CGLink>, linkThickness: number
+  ): number => {
     const { sourceId, targetId } = getIDFromLink(node);
-    return (isSelectedNode(sourceId) || isSelectedNode(targetId)) ? 2 : 1;
+    return (isSelectedNode(sourceId) || isSelectedNode(targetId)) ?
+      (linkThickness + 1):
+      linkThickness;
   };
 
   const getNodeVisibility = (id: string): boolean => {

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

@@ -45,7 +45,8 @@ import * as Eva from 'frama-c/plugins/eva/api/general';
 import {
   callGraphFunction, SelectedNodes, ModeDisplay,
   CGNode, CGLink, CGData,
-  CallGraphFunc, SelectedNodesData
+  CallGraphFunc, SelectedNodesData,
+  changeLinkColor
 } from "frama-c/plugins/callgraph/definitions";
 
 import './callgraph.css';
@@ -219,11 +220,13 @@ function Callgraph(): JSX.Element {
   const panelVisibleState = Dome.useFlipSettings("ivette.callgraph.panelVisible", true);
   const [ verticalSpacing, setVerticalSpacing ] = Dome.useNumberSettings("ivette.callgraph.verticalspacing", 75);
   const [ horizontalSpacing, setHorizontalSpacing ] = Dome.useNumberSettings("ivette.callgraph.horizontalspacing", 500);
+  const [ linkThickness, setLinkThickness ] = Dome.useNumberSettings("ivette.callgraph.linkThickness", 1);
   const [ autoCenter, flipAutoCenter ] = Dome.useFlipSettings("eva.callgraph.autocenter", true);
   const [ autoSelect, flipAutoSelect ] = Dome.useFlipSettings('eva.callgraph.autoselect', true);
   /* eslint-enable max-len */
 
   const style = Themes.useStyle();
+  const theme = Themes.useColorTheme();
 
   const C = React.useMemo<CallGraphFunc>(() => {
     return callGraphFunction(
@@ -279,13 +282,19 @@ function Callgraph(): JSX.Element {
   };
 
   const linkOptions: ILinksOptions = {
-    width: (link) => { return C.getLinkWidth(link); },
+    width: (link) => { return C.getLinkWidth(link, linkThickness); },
     color: (link) => { return C.getLinkColor(link); },
     visibility: (link) => { return C.getLinkVisibility(link); },
     directionalArrow: 3,
     directionalParticle: 3,
-    particleWidth: (link) => { return C.getLinkWidth(link); },
-    particleColor: (link) => { return C.getLinkColor(link); },
+    particleWidth: (link) => {
+      return (C.getLinkWidth(link, linkThickness) * 150 / 100);
+    },
+    particleColor: (link) => {
+      return changeLinkColor(
+        C.getLinkColor(link), theme[0] === "light" ? -50 : 50
+      );
+    },
   };
 
   const options3D: IGraphOptions3D = {
@@ -315,6 +324,7 @@ function Callgraph(): JSX.Element {
         panelVisibleState={panelVisibleState}
         verticalSpacingState={[ verticalSpacing, setVerticalSpacing ]}
         horizontalSpacingState={[ horizontalSpacing, setHorizontalSpacing ]}
+        linkThicknessState={[ linkThickness, setLinkThickness ]}
         selectedFunctions={selectedFunctions}
         taintedFunctions={taintedFunctions}
         unprovenPropertiesFunctions={unprovenPropertiesFunctions}