Add visualization based on pygraphviz (requires graphviz installed locally)

.github/workflows/ci.yaml

@@ -28,6 +28,8 @@ jobs:
       run: |
         pip install --upgrade pip
         pip install hatch
+    - name: Install Graphviz
+      run: sudo apt-get install graphviz graphviz-dev
     - name: Install package
       run: |
         pip install .
@@ -51,6 +53,8 @@ jobs:
       run: |
         pip install --upgrade pip
         pip install hatch
+    - name: Install Graphviz
+      run: sudo apt-get install graphviz graphviz-dev
     - name: Install package
       run: |
         pip install .
@@ -71,6 +75,8 @@ jobs:
       run: |
         pip install --upgrade pip
         pip install hatch
+    - name: Install Graphviz
+      run: sudo apt-get install graphviz graphviz-dev
     - name: Install package
       run: |
         pip install .

pyproject.toml

@@ -1,3 +1,4 @@
+
 [build-system]
 requires = ["hatchling"]
 build-backend = "hatchling.build"
@@ -29,6 +30,8 @@ dependencies = [
   "pydantic",
   "pydantic-yaml",
   "aiida-core>=2.5",
+  "pygraphviz",
+  "lxml",
   "termcolor"
 ]
 [project.urls]

src/sirocco/core.py

@@ -258,6 +258,7 @@ class Workflow:
     """Internal reprensentation of a workflow"""
 
     def __init__(self, workflow_config: ConfigWorkflow) -> None:
+        self.name = workflow_config.name
         self.tasks = Store()
         self.data = Store()
         self.cycles = Store()

src/sirocco/svg-interactive-script.js

@@ -0,0 +1,171 @@
+function addInteractivity(evt) {
+
+    var svg = evt.target;
+    var edges = document.getElementsByClassName('edge');
+    var nodes = document.getElementsByClassName('node');
+    var clusters = document.getElementsByClassName('cluster');
+    var selectedElement, offset, transform, nodrag, origmousepos;
+
+    svg.addEventListener('mousedown', startDrag);
+    svg.addEventListener('mousemove', drag);
+    svg.addEventListener('mouseup', endDrag);
+    svg.addEventListener('mouseleave', endDrag);
+    svg.addEventListener('touchstart', startDrag);
+    svg.addEventListener('touchmove', drag);
+    svg.addEventListener('touchend', endDrag);
+    svg.addEventListener('touchleave', endDrag);
+    svg.addEventListener('touchcancel', endDrag);
+
+    for (var i = 0; i < edges.length; i++) {
+        edges[i].addEventListener('click', clickEdge);
+    }
+
+    for (var i = 0; i < nodes.length; i++) {
+        nodes[i].addEventListener('click', clickNode);
+    }
+
+    var svg = document.querySelector('svg');
+    var viewBox = svg.viewBox.baseVal;
+    adjustViewBox(svg);
+
+    function getMousePosition(evt) {
+        var CTM = svg.getScreenCTM();
+        if (evt.touches) { evt = evt.touches[0]; }
+        return {
+            x: (evt.clientX - CTM.e) / CTM.a,
+            y: (evt.clientY - CTM.f) / CTM.d
+        };
+    }
+
+    function startDrag(evt) {
+        origmousepos = getMousePosition(evt);
+        nodrag=true;
+        selectedElement = evt.target.parentElement;
+        if (selectedElement){
+            offset = getMousePosition(evt);
+
+            // Make sure the first transform on the element is a translate transform
+            var transforms = selectedElement.transform.baseVal;
+
+            if (transforms.length === 0 || transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE) {
+                // Create an transform that translates by (0, 0)
+                var translate = svg.createSVGTransform();
+                translate.setTranslate(0, 0);
+                selectedElement.transform.baseVal.insertItemBefore(translate, 0);
+            }
+
+            // Get initial translation
+            transform = transforms.getItem(0);
+            offset.x -= transform.matrix.e;
+            offset.y -= transform.matrix.f;
+        }
+    }
+
+    function drag(evt) {
+        if (selectedElement) {
+            evt.preventDefault();
+            var coord = getMousePosition(evt);
+            transform.setTranslate(coord.x - offset.x, coord.y - offset.y);
+        }
+    }
+
+    function endDrag(evt) {
+            <!-- comment out the following line if you wnat drags to stay in place, with this line they snap back to their original position after drag end -->
+            //if statement to avoid the header section being affected of the translate (0,0)
+        if (selectedElement){
+            if (selectedElement.classList.contains('header')){
+                selectedElement = false;
+            } else {
+                selectedElement = false;
+                transform.setTranslate(0,0);
+            }
+        }
+        var currentmousepos=getMousePosition(evt);
+        if (currentmousepos.x===origmousepos.x|currentmousepos.y===origmousepos.y){
+            nodrag=true;
+        } else {
+            nodrag=false;
+        }
+
+    }
+
+    function clickEdge() {
+        if (nodrag) {
+            if (this.classList.contains("edge-highlight")){
+                this.classList.remove("edge-highlight");
+                this.classList.remove("text-highlight-edges");
+            }
+            else {
+                this.classList.add("edge-highlight");
+                this.classList.add("text-highlight-edges");
+                animateEdge(this);
+            }
+        }
+    }
+
+    function clickNode() {
+        if (nodrag) {
+            var nodeName = this.childNodes[1].textContent;
+            // Escape special characters in the node name
+            var nodeNameEscaped = nodeName.replace(/[-[\]{}()*+!<=:?.\/\\^$|#\s,]/g, '\\$&');
+
+            var patroon = new RegExp('^' + nodeNameEscaped + '->|->' + nodeNameEscaped + '$|' + nodeNameEscaped + '--|--' + nodeNameEscaped + '$')
+
+            if (this.classList.contains("node-highlight")) {
+                this.classList.remove("node-highlight");
+                this.classList.remove("text-highlight-nodes");
+                var edges = document.getElementsByClassName('edge');
+                for (var i = 0; i < edges.length; i++) {
+                    if (patroon.test(edges[i].childNodes[1].textContent)) {
+                        edges[i].classList.remove("edge-highlight");
+                        edges[i].classList.remove("text-highlight-edges");
+                    }
+                }
+            } else {
+                this.classList.add("node-highlight");
+                this.classList.add("text-highlight-nodes");
+                var edges = document.getElementsByClassName('edge');
+                for (var i = 0; i < edges.length; i++) {
+                    if (patroon.test(edges[i].childNodes[1].textContent)) {
+                        edges[i].classList.add("edge-highlight");
+                        edges[i].classList.add("text-highlight-edges");
+                        animateEdge(edges[i]);
+                    }
+                }
+            }
+        }
+    }
+
+    function animateEdge(edge){
+        var path = edge.querySelector('path');
+        var polygon = edge.querySelector('polygon');
+        var length = path.getTotalLength();
+        // Clear any previous transition
+        path.style.transition = path.style.WebkitTransition = 'none';
+        if (polygon){polygon.style.transition = polygon.style.WebkitTransition = 'none';};
+        // Set up the starting positions
+        path.style.strokeDasharray = length + ' ' + length;
+        path.style.strokeDashoffset = length;
+        if(polygon){polygon.style.opacity='0';};
+        // Trigger a layout so styles are calculated & the browser
+        // picks up the starting position before animating
+        path.getBoundingClientRect();
+        // Define our transition
+        path.style.transition = path.style.WebkitTransition =
+            'stroke-dashoffset 2s ease-in-out';
+        if (polygon){polygon.style.transition = polygon.style.WebkitTransition =
+                     'fill-opacity 1s ease-in-out 2s';};
+        // Go!
+        path.style.strokeDashoffset = '0';
+        if (polygon){setTimeout(function(){polygon.style.opacity='1';},2000)};
+    }
+}
+
+function adjustViewBox(svg) {
+    var viewBoxParts = svg.getAttribute("viewBox").split(" ");
+    var newYMin = parseFloat(viewBoxParts[1]) - 30; // Adjust this value as needed
+    var newYMax = parseFloat(viewBoxParts[3]) + 30; // Adjust this value as needed
+    var newXMax = Math.max(parseFloat(viewBoxParts[2]),240);
+    var newViewBox = viewBoxParts[0] + " " + newYMin + " " + newXMax + " " + newYMax;
+    svg.setAttribute("viewBox", newViewBox);
+}

src/sirocco/svg-interactive-style.css

@@ -0,0 +1,60 @@
+/* The first 2 styles are hiding longer description texts on */
+/* nodes and edges, that are shown when nodes are clicked */
+/* .edge text{ */
+/*     opacity: 0; */
+/* } */
+/* .node text:not(:first-of-type){ */
+/*     opacity: 0; */
+/* } */
+
+.text-highlight-nodes text{
+    opacity: 1 !important;
+    stroke-width: 5;
+    font-size: 20px;
+    font-weight: bold;
+    fill: black;
+}
+.text-highlight-edges text{
+    opacity: 1 !important;
+    stroke-width: 5;
+    font-size: 20px;
+    font-weight: bold;
+    fill: Indigo;
+}
+.edge-highlight path{
+    opacity: 1;
+    stroke-width: 5;
+    stroke: crimson;
+}
+.edge-highlight polygon{
+    opacity: 1;
+    stroke-width: 5;
+    stroke: crimson;
+}
+.node-highlight polygon{
+    opacity: 1;
+    stroke-width: 5;
+    stroke: crimson;
+    z-index:99999;
+}
+.node-highlight ellipse{
+    opacity: 1;
+    stroke-width: 5;
+    stroke: crimson;
+    z-index:99999;
+}
+.node-highlight path{
+    opacity: 1;
+    stroke-width: 5;
+    stroke: crimson;
+    z-index:99999;
+}
+.compass {
+    fill: #fff;
+    stroke: #000;
+    stroke-width: 1;
+}
+.plus-minus {
+    fill: #fff;
+    pointer-events: none;
+}

src/sirocco/vizgraph.py

@@ -0,0 +1,113 @@
+from __future__ import annotations
+
+from colorsys import hsv_to_rgb
+from pathlib import Path
+from typing import TYPE_CHECKING, Any, ClassVar
+
+from lxml import etree
+from pygraphviz import AGraph
+
+if TYPE_CHECKING:
+    from sirocco.core import Store
+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: ClassVar[dict[str:Any]] = {"style": "filled", "fontname": "Fira Sans", "fontsize": 14, "penwidth": 2}
+    edge_base_kw: ClassVar[dict[str:Any]] = {"color": "#77767B", "penwidth": 1.5}
+    data_node_base_kw: ClassVar[dict[str:Any]] = node_base_kw | {"shape": "ellipse"}
+
+    data_av_node_kw: ClassVar[dict[str:Any]] = data_node_base_kw | node_colors(116)
+    data_gen_node_kw: ClassVar[dict[str:Any]] = data_node_base_kw | node_colors(214)
+    task_node_kw: ClassVar[dict[str:Any]] = node_base_kw | {"shape": "box"} | node_colors(354)
+    io_edge_kw: ClassVar[dict[str:Any]] = edge_base_kw
+    wait_on_edge_kw: ClassVar[dict[str:Any]] = edge_base_kw | {"style": "dashed"}
+    cluster_kw: ClassVar[dict[str:Any]] = {"bgcolor": "#F6F5F4", "color": None, "fontsize": 16}
+
+    def __init__(self, name: str, cycles: Store, data: Store) -> None:
+        self.name = name
+        self.agraph = AGraph(name=name, fontname="Fira Sans", newrank=True)
+        for data_node in data.values():
+            gv_kw = self.data_av_node_kw if data_node.available else self.data_gen_node_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():
+            # NOTE: For some reason, clusters need to have a unique name that starts with 'cluster'
+            #       otherwise they are not taken into account. Hence the k index.
+            cluster_nodes = []
+            for task_node in cycle.tasks:
+                cluster_nodes.append(task_node)
+                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:
+                    self.agraph.add_edge(task_node, data_node, **self.io_edge_kw)
+                    cluster_nodes.append(data_node)
+                for wait_task_node in task_node.wait_on:
+                    self.agraph.add_edge(wait_task_node, task_node, **self.wait_on_edge_kw)
+            cluster_label = cycle.name
+            if cycle.date is not None:
+                cluster_label += "\n" + cycle.date.isoformat()
+            self.agraph.add_subgraph(
+                cluster_nodes,
+                name=f"cluster_{cycle.name}_{k}",
+                clusterrank="global",
+                label=cluster_label,
+                tooltip=cluster_label,
+                **self.cluster_kw,
+            )
+            k += 1
+
+    def draw(self, **kwargs):
+        # draw graphviz dot graph to svg file
+        self.agraph.layout(prog="dot")
+        file_path = Path(f"./{self.name}.svg")
+        self.agraph.draw(path=file_path, format="svg", **kwargs)
+
+        # Add interactive capabilities to the svg graph thanks to
+        # https://github.com/BartBrood/dynamic-SVG-from-Graphviz
+
+        # Parse svg
+        svg = etree.parse(file_path)  # noqa: S320 this svg is safe as generated internaly
+        svg_root = svg.getroot()
+        # Add 'onload' tag
+        svg_root.set("onload", "addInteractivity(evt)")
+        # Add css style for interactivity
+        this_dir = Path(__file__).parent
+        style_file_path = this_dir / "svg-interactive-style.css"
+        node = etree.Element("style")
+        node.text = style_file_path.read_text()
+        svg_root.append(node)
+        # Add scripts
+        js_file_path = this_dir / "svg-interactive-script.js"
+        node = etree.Element("script")
+        node.text = etree.CDATA(js_file_path.read_text())
+        svg_root.append(node)
+
+        # write svg again
+        svg.write(file_path)
+
+    @classmethod
+    def from_core_workflow(cls, workflow: Workflow):
+        return cls(workflow.name, workflow.cycles, workflow.data)
+
+    @classmethod
+    def from_yaml(cls, config_path: str):
+        return cls.from_core_workflow(Workflow.from_yaml(config_path))