From b75fe543107a67ff8c2528bf8f6b812c065426ac Mon Sep 17 00:00:00 2001
From: "brian.mulier" <bmmulier@hotmail.fr>
Date: Mon, 25 Sep 2023 10:14:40 +0200
Subject: [PATCH] feat(ui): reduced opacity on unused paths

closes #241
---
 ui/src/components/executions/Topology.vue | 45 +++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/ui/src/components/executions/Topology.vue b/ui/src/components/executions/Topology.vue
index 1b6605443e3..e2cdeaa5515 100644
--- a/ui/src/components/executions/Topology.vue
+++ b/ui/src/components/executions/Topology.vue
@@ -70,6 +70,35 @@
             },
             loadData(){
                 this.loadGraph();
+            },
+            isUnused: function (nodeByUid, nodeUid) {
+                let nodeToCheck = nodeByUid[nodeUid];
+
+                if(!nodeToCheck) {
+                    return false;
+                }
+
+                if(!nodeToCheck.task) {
+                    // check if parent is unused (current node is probably a cluster root or end)
+                    const splitUid = nodeToCheck.uid.split(".");
+                    splitUid.pop();
+                    return this.isUnused(nodeByUid, splitUid.join("."));
+                }
+
+                if (!nodeToCheck.executionId) {
+                    return true;
+                }
+
+                const nodeExecution = nodeToCheck.executionId === this.execution?.id ? this.execution
+                    : Object.values(this.subflowsExecutions).filter(execution => execution.id === this.data.executionId)?.[0];
+
+                if (!nodeExecution) {
+                    return true;
+                }
+
+                return !nodeExecution.taskRunList.some(taskRun => taskRun.taskId === nodeToCheck.task?.id);
+
+
             },
             loadGraph(force) {
                 if (this.execution && (force || (this.flowGraph === undefined || this.previousExecutionId !== this.execution.id))) {
@@ -89,8 +118,14 @@
                             ?.filter(cluster => cluster.type.endsWith("SubflowGraphCluster"))
                             ?.map(cluster => cluster.uid.replace(CLUSTER_PREFIX, ""))
                             ?? [];
+                        const nodeByUid = {};
+
                         this.flowGraph.nodes
+                            // lowest depth first to be available in nodeByUid map for child-to-parent unused check
+                            .sort((a, b) => a.uid.length - b.uid.length)
                             .forEach(node => {
+                                nodeByUid[node.uid] = node;
+
                                 const parentSubflow = subflowPaths.filter(subflowPath => node.uid.startsWith(subflowPath + "."))
                                     .sort((a, b) => b.length - a.length)?.[0]
 
@@ -103,8 +138,18 @@
                                 }
 
                                 node.executionId = this.execution.id;
+
+                                if(this.isUnused(nodeByUid, node.uid)) {
+                                    node.unused = true;
+                                }
                             });
 
+                        this.flowGraph.edges
+                            // keep only unused (or skipped) paths
+                            .filter(edge => {
+                                return this.isUnused(nodeByUid, edge.target) || this.isUnused(nodeByUid, edge.source);
+                            }).forEach(edge => edge.unused = true);
+
                         // force refresh
                         this.$store.commit("flow/setFlowGraph", Object.assign({}, this.flowGraph));
                     })