ref:add: tooltips for nodes, color calculation

C2SM · Nov 6, 2024 · 3f3cbc4 · 3f3cbc4
1 parent 549f7bc
commit 3f3cbc4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 23 deletions.
diff --git a/src/sirocco/svg-interactive-style.css b/src/sirocco/svg-interactive-style.css
@@ -9,43 +9,43 @@
 
 .text-highlight-nodes text{
     opacity: 1 !important;
-    stroke-width: 10;
+    stroke-width: 5;
     font-size: 20px;
     font-weight: bold;
     fill: black;
 }
 .text-highlight-edges text{
     opacity: 1 !important;
-    stroke-width: 10;
+    stroke-width: 5;
     font-size: 20px;
     font-weight: bold;
     fill: Indigo;
 }
 .edge-highlight path{
     opacity: 1;
-    stroke-width: 10;
+    stroke-width: 5;
     stroke: crimson;
 }
 .edge-highlight polygon{
     opacity: 1;
-    stroke-width: 10;
+    stroke-width: 5;
     stroke: crimson;
 }
 .node-highlight polygon{
     opacity: 1;
-    stroke-width: 10;
+    stroke-width: 5;
     stroke: crimson;
     z-index:99999;
 }
 .node-highlight ellipse{
     opacity: 1;
-    stroke-width: 10;
+    stroke-width: 5;
     stroke: crimson;
     z-index:99999;
 }
 .node-highlight path{
     opacity: 1;
-    stroke-width: 10;
+    stroke-width: 5;
     stroke: crimson;
     z-index:99999;
 }
@@ -54,16 +54,6 @@
     stroke: #000;
     stroke-width: 1;
 }
-.button {
-    fill: #225EA8;
-    stroke: #0C2C84;
-    stroke-width: 0.5;
-    stroke-miterlimit:6;
-    stroke-linecap: round;
-}
-.button:hover {
-    stroke-width: 1;
-}
 .plus-minus {
     fill: #fff;
     pointer-events: none;

diff --git a/src/sirocco/vizgraph.py b/src/sirocco/vizgraph.py
@@ -2,6 +2,7 @@
 
 from pathlib import Path
 from typing import TYPE_CHECKING
+from colorsys import hsv_to_rgb
 
 from lxml import etree
 from pygraphviz import AGraph
@@ -11,17 +12,30 @@
 from sirocco.core import Workflow
 
 
+def hsv_to_hex(h: float, s: float, v: float) -> str:
+    r, g, b = hsv_to_rgb(h, s, v)
+    return "#{:02x}{:02x}{:02x}".format(*map(round,(255*r, 255*g, 255*b)))
+
+def node_colors(h: float) -> dict[str: str]:
+    fill = hsv_to_hex(h/365, 0.15, 1)
+    border = hsv_to_hex(h/365, 1, 0.20)
+    font = hsv_to_hex(h/365, 1, 0.15)
+    return {'fillcolor': fill, 'color': border , 'fontcolor': font}
+
+
 class VizGraph:
     """Class for visualizing a Sirocco workflow"""
 
     node_base_kw = {'style': 'filled', 'fontname': 'Fira Sans', 'fontsize': 14, 'penwidth': 2}
     edge_base_kw = {'color': '#77767B', 'penwidth': 1.5}
-    task_node_kw = node_base_kw | {'shape': 'box', 'fillcolor': '#ffd8dc', 'fontcolor': '#330005', 'color': '#4F161D'}
-    data_gen_node_kw = node_base_kw | {'shape': 'ellipse', 'fillcolor': '#d8e9ff', 'fontcolor': '#001633', 'color': '#001633'}
-    data_av_node_kw = node_base_kw | {'shape': 'ellipse', 'fillcolor': '#c5e5c3', 'fontcolor': '#001633', 'color': '#2d3d2c'}
-    cluster_kw = {'bgcolor': '#F6F5F4', 'color': None, 'fontsize': 16}
+    data_node_base_kw = node_base_kw | {'shape': 'ellipse'}
+
+    data_av_node_kw = data_node_base_kw | node_colors(116)
+    data_gen_node_kw = data_node_base_kw | node_colors(214)
+    task_node_kw = node_base_kw | {'shape': 'box'} | node_colors(354)
     io_edge_kw = edge_base_kw
     wait_on_edge_kw = edge_base_kw | {'style': 'dashed'}
+    cluster_kw = {'bgcolor': '#F6F5F4', 'color': None, 'fontsize': 16}
 
     def __init__(self, name:str, cycles: Store, data: Store) -> None:
 
@@ -32,7 +46,8 @@ def __init__(self, name:str, cycles: Store, data: Store) -> None:
                 gv_kw = self.data_av_node_kw
             else:
                 gv_kw = self.data_gen_node_kw
-            self.agraph.add_node(data_node, label=data_node.name, **gv_kw)
+            tooltip = data_node.name if data_node.date is None else f"{data_node.name}\n {data_node.date}"
+            self.agraph.add_node(data_node, tooltip=tooltip,label=data_node.name, **gv_kw)
 
         k = 1
         for cycle in cycles.values():
@@ -41,7 +56,8 @@ def __init__(self, name:str, cycles: Store, data: Store) -> None:
             cluster_nodes = []
             for task_node in cycle.tasks:
                 cluster_nodes.append(task_node)
-                self.agraph.add_node(task_node, label=task_node.name, **self.task_node_kw)
+                tooltip = task_node.name if task_node.date is None else f"{task_node.name}\n {task_node.date}"
+                self.agraph.add_node(task_node, label=task_node.name, tooltip=tooltip, **self.task_node_kw)
                 for data_node in task_node.inputs:
                     self.agraph.add_edge(data_node, task_node, **self.io_edge_kw)
                 for data_node in task_node.outputs: