@kestra-io/ui-libs 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "v0.0.14",
+  "version": "v0.0.16",
   "type": "module",
   "files": [
     "src",

package/src/assets/icons/SplitCellsHorizontal.vue

@@ -5,7 +5,7 @@
         </g>
         <defs>
             <clipPath id="clip0_796_3996">
-                <rect width="16" height="16" fill="white" />
+                <rect width="16" height="16" fill="currentColor" />
             </clipPath>
         </defs>
     </svg>

package/src/assets/icons/SplitCellsVertical.vue

@@ -5,7 +5,7 @@
         </g>
         <defs>
             <clipPath id="clip0_1111_7266">
-                <rect width="16" height="16" fill="white" transform="translate(0 16) rotate(-90)" />
+                <rect width="16" height="16" fill="currentColor" transform="translate(0 16) rotate(-90)" />
             </clipPath>
         </defs>
     </svg>

package/src/components/buttons/AddTaskButton.vue

@@ -20,6 +20,8 @@
 </template>
 
 <style scoped lang="scss">
+    @import "../../scss/variables";
+
     .add-task-div {
         margin: 0.2rem;
         width: 25px;
@@ -29,5 +31,9 @@
         html.dark & {
             background-color: var(--card-bg);
         }
+
+        &.text-danger {
+            border-color: $red;
+        }
     }
 </style>

package/src/components/misc/Duration.vue

@@ -1,5 +1,5 @@
 <template>
-    <tooltip>
+    <tooltip :key="lastStep.date">
         <template #content>
             <span v-for="(history, index) in filteredHistories" :key="'tt-' + index" class="duration-tt">
                 <span class="square" :class="squareClass(history.state)" />

package/src/components/misc/ExecutionInformations.vue

@@ -10,6 +10,7 @@
     import moment from "moment";
     import Duration from "./Duration.vue";
     import State from "../../utils/state.js";
+    import Utils from "../../utils/Utils.js";
 
     export default {
         name: "ExecutionInformations",
@@ -21,7 +22,7 @@
                 return this.execution && this.execution.taskRunList ? this.execution.taskRunList : []
             },
             taskRuns() {
-                return this.taskRunList.filter(t => t.taskId === this.task.id)
+                return this.taskRunList.filter(t => t.taskId === Utils.afterLastDot(this.task.id))
             },
             state() {
                 if (!this.taskRuns) {
@@ -90,7 +91,6 @@
                 default: null
             }
         }
-
     }
 </script>
 <style scoped>

package/src/components/misc/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-    <span ref="tooltip">
+    <span ref="tooltip" v-bind="$attrs">
         <slot name="default" />
     </span>
     <span class="d-none" ref="tooltipContent">

package/src/components/nodes/BasicNode.vue

@@ -7,24 +7,24 @@
     >
         <div v-if="state" class="status-div" :class="[`bg-${stateColor}`]" />
         <div class="icon rounded">
-            <TaskIcon :icon="data.icon" :cls="cls" :class="taskIconBg" class="rounded bg-white" theme="light" />
+            <TaskIcon :cls="cls" :class="taskIconBg" class="rounded bg-white" theme="light" />
         </div>
         <div class="node-content">
             <div class="d-flex node-title">
                 <div
                     class="text-truncate task-title"
                 >
-                    <tooltip :title="id">
-                        {{ id }}
+                    <tooltip :title="hoverTooltip">
+                        {{ trimmedId }}
                     </tooltip>
                 </div>
                 <span
                     class="d-flex"
                     v-if="description"
                 >
-                    <tooltip :title="$t('show description')">
+                    <tooltip :title="$t('show description')" class="d-flex align-items-center">
                         <InformationOutline
-                            @click="$emit(EVENTS.SHOW_DESCRIPTION, {id: id, description:description})"
+                            @click="$emit(EVENTS.SHOW_DESCRIPTION, {id: trimmedId, description:description})"
                             class="description-button ms-2"
                         />
                     </tooltip>
@@ -35,10 +35,10 @@
         <div class="text-white top-button-div">
             <slot name="badge-button-before" />
             <span
-                v-if="link"
+                v-if="data.link"
                 class="rounded-button"
                 :class="[`bg-${data.color}`]"
-                @click="$emit(EVENTS.OPEN_LINK, linkData)"
+                @click="$emit(EVENTS.OPEN_LINK, {link: data.link})"
             >
                 <tooltip :title="$t('open')">
                     <OpenInNew class="button-icon" alt="Open in new tab" />
@@ -66,8 +66,8 @@
     import ArrowExpand from "vue-material-design-icons/ArrowExpand.vue";
     import OpenInNew from "vue-material-design-icons/OpenInNew.vue";
     import Tooltip from "../misc/Tooltip.vue";
-    import {VueFlowUtils} from "../../index.js";
     import {mapState} from "vuex";
+    import Utils from "../../utils/Utils.js";
 
     export default {
         components: {
@@ -144,9 +144,6 @@
             expandable() {
                 return this.data?.expandable || false
             },
-            link() {
-                return this.data?.link || false
-            },
             description() {
                 const node = this.data.node.task ?? this.data.node.trigger ?? null
                 if (node) {
@@ -154,6 +151,9 @@
                 }
                 return null
             },
+            trimmedId() {
+                return Utils.afterLastDot(this.id);
+            },
             taskIconBg() {
                 return !["default", "danger"].includes(this.data.color) ? this.data.color : "";
             },
@@ -178,16 +178,27 @@
                     [this.$attrs.class]: true
                 }
             },
-            linkData() {
-                if(this.data.node.task) {
-                    return {link: VueFlowUtils.linkDatas(this.data.node.task, this.execution)}
+            cls() {
+                if (this.data.node.trigger) {
+                    return this.data.node.trigger.type;
                 }
-                return null
+
+                if (!this.data.node?.task) {
+                    return undefined;
+                }
+
+                return this.data.node.task.type;
             },
-            cls() {
-                return this.data.node?.task ? this.data.node.task.type : this.data.node?.trigger ? this.data.node.trigger.type : null
+            hoverTooltip() {
+                if (this.data.node.type.endsWith("SubflowGraphTask")) {
+                    const subflowTask = this.data.node.task;
+
+                    return subflowTask.namespace + " " + subflowTask.flowId;
+                }
+
+                return this.trimmedId;
             }
-        },
+        }
     }
 </script>
 

package/src/components/nodes/ClusterNode.vue

@@ -1,12 +1,11 @@
 <template>
-    <span class="badge rounded-pill text-color" :class="[`bg-${data.color}`]">{{ id.replace("cluster_", "") }}</span>
+    <span class="badge rounded-pill text-color" :class="[`bg-${data.color}`]">{{ clusterName }}</span>
     <div class="top-button-div text-white d-flex">
         <span
             v-if="data.collapsable"
             class="rounded-button"
             :class="[`bg-${data.color}`]"
             @click="collapse()"
-
         >
             <tooltip :title="$t('collapse')">
                 <ArrowCollapse class="button-icon" alt="Collapse task" />
@@ -17,17 +16,35 @@
 <script setup>
     import ArrowCollapse from "vue-material-design-icons/ArrowCollapse.vue"
     import {EVENTS} from "../../utils/constants.js";
+    import {Position} from "@vue-flow/core";
 
-    const props = defineProps(["data", "sourcePosition", "targetPosition", "label", "id"]);
+    const props = defineProps({
+        "data": {
+            type: Object,
+            default: undefined
+        },
+        "sourcePosition": {
+            type: Position,
+            default: undefined
+        },
+        "targetPosition": {
+            type: Position,
+            default: undefined
+        },
+        "id": {
+            type: String,
+            default: undefined
+        }
+    });
     const emit = defineEmits([EVENTS.COLLAPSE])
 
     const collapse = () => {
         emit(EVENTS.COLLAPSE, props.id)
     };
-
 </script>
 <script>
     import Tooltip from "../misc/Tooltip.vue";
+    import Utils from "../../utils/Utils.js";
 
     export default {
         inheritAttrs: false,
@@ -37,6 +54,16 @@
                 tooltips: [],
             }
         },
+        computed: {
+            clusterName() {
+                const taskNode = this.data.taskNode;
+                if (taskNode?.type?.endsWith("SubflowGraphTask")) {
+                    return taskNode.task.namespace + " " + taskNode.task.flowId;
+                }
+
+                return Utils.afterLastDot(this.id);
+            }
+        }
     }
 </script>
 <style scoped lang="scss">

package/src/components/nodes/CollapsedClusterNode.vue

@@ -1,34 +1,42 @@
 <template>
-    <Handle type="source" :position="sourcePosition"/>
-    <div class="collapsed-cluster-node">
+    <Handle type="source" :position="sourcePosition" />
+    <div class="collapsed-cluster-node d-flex">
         <span class="node-text">
             <component v-if="data.iconComponent" :is="data.iconComponent" :class="`text-${data.color} me-2`" />
-            {{ id }}
+            {{ Utils.afterLastDot(id) }}
         </span>
         <div class="text-white top-button-div">
-            <slot name="badge-button-before"/>
+            <slot name="badge-button-before" />
             <span
                 v-if="expandable"
                 class="rounded-button"
                 :class="[`bg-${data.color}`]"
-                @click="$emit(EVENTS.EXPAND, id)"
+                @click="$emit(EVENTS.EXPAND, {id})"
             >
-                <ArrowExpand class="button-icon" alt="Expand task"/>
+                <tooltip :title="$t('expand')">
+                    <ArrowExpand class="button-icon" alt="Expand task" />
+                </tooltip>
             </span>
-            <slot name="badge-button-after"/>
+            <slot name="badge-button-after" />
         </div>
     </div>
-    <Handle type="target" :position="targetPosition"/>
+    <Handle type="target" :position="targetPosition" />
 </template>
 
+<script setup>
+    import Utils from "../../utils/Utils.js";
+</script>
+
 <script>
     import {EVENTS} from "../../utils/constants.js";
     import ArrowExpand from "vue-material-design-icons/ArrowExpand.vue";
     import Webhook from "vue-material-design-icons/Webhook.vue";
     import {Handle} from "@vue-flow/core";
+    import Tooltip from "../misc/Tooltip.vue";
 
     export default {
         components: {
+            Tooltip,
             Handle,
             ArrowExpand,
             Webhook
@@ -87,6 +95,8 @@
         color: black;
         font-size: 0.90rem;
         display: flex;
+        align-items: center;
+
         html.dark & {
             color: white;
         }

package/src/components/nodes/DotNode.vue

@@ -1,18 +1,18 @@
 <template>
     <Handle type="source" class="custom-handle" :position="sourcePosition" />
     <div class="dot">
-        <Circle class="circle" alt="circle" />
+        <CircleIcon :class="{'text-danger': data.node.error}" class="circle" alt="circle" />
     </div>
     <Handle type="target" class="custom-handle" :position="targetPosition" />
 </template>
 
 <script>
     import {Handle} from "@vue-flow/core";
-    import Circle from "vue-material-design-icons/Circle.vue"
+    import CircleIcon from "vue-material-design-icons/Circle.vue"
 
     export default {
         name: "Dot",
-        components: {Handle, Circle},
+        components: {Handle, CircleIcon},
         inheritAttrs: false,
         props: {
             data: {

package/src/components/nodes/EdgeNode.vue

@@ -72,9 +72,10 @@
         >
             <tooltip :title="$t('add task')">
                 <AddTaskButton
-                    v-if="!data.disabled && data.haveAdd != undefined"
+                    v-if="data.haveAdd"
                     :add-task="true"
                     @click="$emit(EVENTS.ADD_TASK, data.haveAdd)"
+                    :class="{'text-danger': data.color}"
                 />
             </tooltip>
 

package/src/components/nodes/TaskNode.vue

@@ -2,31 +2,31 @@
     <Handle type="source" :position="sourcePosition" />
     <basic-node
         :id="id"
-        :data="data"
+        :data="dataWithLink"
         :state="state"
         :class="classes"
         @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
-        @expand="forwardEvent(EVENTS.EXPAND, id)"
+        @expand="forwardEvent(EVENTS.EXPAND, expandData)"
         @open-link="forwardEvent(EVENTS.OPEN_LINK, $event)"
         @mouseover="forwardEvent(EVENTS.MOUSE_OVER, $event)"
         @mouseleave="forwardEvent(EVENTS.MOUSE_LEAVE)"
     >
         <template #content>
-            <execution-informations v-if="execution" :execution="execution" :task="data.node.task" :color="color" />
+            <execution-informations v-if="taskExecution" :execution="taskExecution" :task="data.node.task" :color="color" />
         </template>
         <template #badge-button-before>
             <span
-                v-if="execution"
+                v-if="taskExecution"
                 class="rounded-button"
                 :class="[`bg-${color}`]"
-                @click="$emit(EVENTS.SHOW_LOGS, {id, taskRuns})"
+                @click="$emit(EVENTS.SHOW_LOGS, {id: taskId, execution: taskExecution, taskRuns})"
             >
                 <tooltip :title="$t('show task logs')">
                     <TextBoxSearch class="button-icon" alt="Show logs" />
                 </tooltip>
             </span>
             <span
-                v-if="!execution && !data.isReadOnly && data.isFlowable"
+                v-if="!taskExecution && !data.isReadOnly && data.isFlowable"
                 class="rounded-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.ADD_ERROR, {task: data.node.task})"
@@ -36,7 +36,7 @@
                 </tooltip>
             </span>
             <span
-                v-if="!execution && !data.isReadOnly"
+                v-if="!taskExecution && !data.isReadOnly"
                 class="rounded-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.EDIT, {task: data.node.task, section: SECTIONS.TASKS})"
@@ -46,10 +46,10 @@
                 </tooltip>
             </span>
             <span
-                v-if="!execution && !data.isReadOnly"
+                v-if="!taskExecution && !data.isReadOnly"
                 class="rounded-button"
                 :class="[`bg-${color}`]"
-                @click="$emit(EVENTS.DELETE, {id, section: SECTIONS.TASKS})"
+                @click="$emit(EVENTS.DELETE, {id: taskId, section: SECTIONS.TASKS})"
             >
                 <tooltip :title="$t('delete')">
                     <Delete class="button-icon" alt="Delete task" />
@@ -71,8 +71,9 @@
     import Delete from "vue-material-design-icons/Delete.vue";
     import TextBoxSearch from "vue-material-design-icons/TextBoxSearch.vue";
     import AlertOutline from "vue-material-design-icons/AlertOutline.vue"
-    import {mapState} from "vuex";
+    import {mapGetters, mapState} from "vuex";
     import Tooltip from "../misc/Tooltip.vue"
+    import Utils from "../../utils/Utils.js";
 
     export default {
         name: "Task",
@@ -88,6 +89,7 @@
         inheritAttrs: false,
         computed: {
             ...mapState("execution", ["execution"]),
+            ...mapGetters("execution", ["subflowsExecutions"]),
             SECTIONS() {
                 return SECTIONS
             },
@@ -97,11 +99,23 @@
             color() {
                 return this.data.color ?? "primary"
             },
+            taskId() {
+                return Utils.afterLastDot(this.id);
+            },
             taskRunList() {
-                return this.execution && this.execution.taskRunList ? this.execution.taskRunList : []
+                return this.taskExecution && this.taskExecution.taskRunList ? this.taskExecution.taskRunList : []
+            },
+            taskExecution() {
+                const executionId = this.data.executionId;
+                if(executionId) {
+                    return executionId === this.execution?.id ? this.execution
+                        : Object.values(this.subflowsExecutions).filter(execution => execution.id === this.data.executionId)?.[0];
+                }
+
+                return undefined;
             },
             taskRuns() {
-                return this.taskRunList.filter(t => t.taskId === this.data.node.task.id)
+                return this.taskRunList.filter(t => t.taskId === Utils.afterLastDot(this.data.node.task.id))
             },
             state() {
                 if (!this.taskRuns) {
@@ -138,9 +152,31 @@
             },
             classes() {
                 return {
-                    "execution-no-taskrun": this.execution && this.taskRuns && this.taskRuns.length === 0,
+                    "execution-no-taskrun": this.taskExecution && this.taskRuns && this.taskRuns.length === 0,
+                }
+            },
+            expandData() {
+                return {
+                    id: this.id,
+                    type: this.data.node.task.type
                 }
             },
+            dataWithLink() {
+                if(this.data.node.type.endsWith("SubflowGraphTask")){
+                    return {
+                        ...this.data,
+                        link: {
+                            namespace: this.data.node.task.namespace,
+                            id: this.data.node.task.flowId,
+                            executionId: this.taskExecution?.taskRunList
+                                .filter(taskRun => taskRun.taskId === this.data.node.task.id && taskRun.outputs?.executionId)
+                                ?.[0]?.outputs?.executionId
+                        }
+                    }
+                }
+
+                return this.data;
+            }
         },
         emits: [
             EVENTS.EXPAND,

package/src/components/nodes/TriggerNode.vue

@@ -5,7 +5,7 @@
         :data="data"
         :color="color"
         @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
-        @expand="forwardEvent(EVENTS.EXPAND, id)"
+        @expand="forwardEvent(EVENTS.EXPAND, {id})"
     >
         <template #badge-button-before>
             <span

package/src/components/topology/Topology.vue

@@ -1,28 +1,16 @@
 <script setup>
-    import {
-        ref,
-        watch,
-        nextTick,
-        onMounted
-    } from "vue";
-    import {
-        ClusterNode,
-        DotNode,
-        TaskNode,
-        TriggerNode,
-        CollapsedClusterNode,
-        EdgeNode,
-    } from "../index.js";
+    import {computed, nextTick, onMounted, ref, watch} from "vue";
+    import {ClusterNode, CollapsedClusterNode, DotNode, EdgeNode, TaskNode, TriggerNode,} from "../index.js";
     import {useVueFlow, VueFlow} from "@vue-flow/core";
     import {ControlButton, Controls} from "@vue-flow/controls";
     import SplitCellsVertical from "../../assets/icons/SplitCellsVertical.vue";
     import SplitCellsHorizontal from "../../assets/icons/SplitCellsHorizontal.vue";
     import {cssVariable} from "../../utils/global.js";
     import {VueFlowUtils, YamlUtils} from "../../index.js";
-    import Utils from "../../utils/Utils.js";
     import VueflowUtils from "../../utils/VueFlowUtils.js";
-    import {CLUSTER_UID_SEPARATOR, EVENTS} from "../../utils/constants.js";
+    import {CLUSTER_PREFIX, EVENTS} from "../../utils/constants.js";
     import {Background} from "@vue-flow/background";
+    import Utils from "../../utils/Utils.js";
 
     const props = defineProps({
         id: {
@@ -41,10 +29,6 @@
             type: Boolean,
             default: false,
         },
-        flowables: {
-            type: Array,
-            default: () => [],
-        },
         source: {
             type: String,
             default: undefined,
@@ -68,6 +52,10 @@
             required: false,
             default: undefined
         },
+        expandedSubflows: {
+            type: Array,
+            default: () => []
+        }
     });
 
     const dragging = ref(false);
@@ -75,7 +63,7 @@
     const {getNodes, onNodeDrag, onNodeDragStart, onNodeDragStop, fitView, setElements} = useVueFlow({id: props.id});
     const edgeReplacer = ref({});
     const hiddenNodes = ref([]);
-    const collapsed = ref([]);
+    const collapsed = ref(new Set());
     const clusterToNode = ref([])
 
     const emit = defineEmits(
@@ -90,11 +78,12 @@
             "toggle-orientation",
             "loading",
             "swapped-task",
-            "message"
+            "message",
+            "expand-subflow"
         ]
     )
 
-    onMounted( () => {
+    onMounted(() => {
         generateGraph();
     })
 
@@ -123,8 +112,7 @@
                 collapsed.value,
                 clusterToNode.value,
                 props.isReadOnly,
-                props.isAllowedEdit,
-                flowables()
+                props.isAllowedEdit
             );
             setElements(elements);
             fitView();
@@ -176,7 +164,10 @@
             const taskNode2 = e.intersections.find(n => n.type === "task");
             if (taskNode2) {
                 try {
-                    emit("swapped-task", YamlUtils.swapTasks(props.source, taskNode1.id, taskNode2.id))
+                    emit("swapped-task", {
+                        newSource: YamlUtils.swapTasks(props.source, Utils.afterLastDot(taskNode1.id), Utils.afterLastDot(taskNode2.id)),
+                        swappedTasks: [taskNode1.id, taskNode2.id]
+                    })
                 } catch (e) {
                     emit("message", {
                         variant: "error",
@@ -196,10 +187,21 @@
         lastPosition.value = null;
     })
 
+    const subflowNestedTasks = computed(() => {
+        if(!props.flowGraph) {
+            return [];
+        }
+
+        return props.flowGraph.clusters.filter(cluster => cluster.cluster.type.endsWith("SubflowGraphCluster"))
+            .flatMap(cluster =>
+                cluster.nodes.filter(node => node !== cluster.cluster.taskNode.uid)
+            );
+    })
+
     onNodeDrag((e) => {
         resetNodesStyle();
-        getNodes.value.filter(n => n.id !== e.node.id).forEach(n => {
-            if (n.type === "trigger" || (n.type === "task" && YamlUtils.isParentChildrenRelation(props.source, n.id, e.node.id))) {
+        getNodes.value.filter(n => Utils.afterLastDot(n.id) !== Utils.afterLastDot(e.node.id)).forEach(n => {
+            if (n.type === "trigger" || (n.type === "task" && n.id.startsWith(e.node.id + ".")) || subflowNestedTasks.value.includes(n.id)) {
                 n.style = {...n.style, opacity: "0.5"}
             } else {
                 n.style = {...n.style, opacity: "1"}
@@ -218,11 +220,15 @@
     })
 
     const checkIntersections = (intersections, node) => {
-        const tasksMeet = intersections.filter(n => n.type === "task").map(n => n.id);
+        const tasksMeet = intersections.filter(n => n.type === "task").map(n => Utils.afterLastDot(n.id));
         if (tasksMeet.length > 1) {
             return "toomuchtaskerror";
         }
-        if (tasksMeet.length === 1 && YamlUtils.isParentChildrenRelation(props.source, tasksMeet[0], node.id)) {
+        try {
+            if (tasksMeet.length === 1 && YamlUtils.isParentChildrenRelation(props.source, Utils.afterLastDot(tasksMeet[0]), Utils.afterLastDot(node.id))) {
+                return "parentchildrenerror";
+            }
+        } catch (e) {
             return "parentchildrenerror";
         }
         if (intersections.filter(n => n.type === "trigger").length > 0) {
@@ -232,13 +238,12 @@
     }
 
     const collapseCluster = (clusterUid, regenerate, recursive) => {
-
-        const cluster = props.flowGraph.clusters.find(cluster => cluster.cluster.uid === clusterUid)
-        const nodeId = clusterUid === "Triggers" ? "Triggers" : Utils.splitFirst(clusterUid, CLUSTER_UID_SEPARATOR);
-        collapsed.value = collapsed.value.concat([nodeId])
+        const cluster = props.flowGraph.clusters.find(cluster => cluster.cluster.uid.endsWith(clusterUid));
+        const nodeId = clusterUid === "root.Triggers" ? "root.Triggers" : clusterUid.replace(CLUSTER_PREFIX, "");
+        collapsed.value.add(nodeId)
 
         hiddenNodes.value = hiddenNodes.value.concat(cluster.nodes.filter(e => e !== nodeId || recursive));
-        if (clusterUid !== "Triggers") {
+        if (clusterUid !== "root.Triggers") {
             hiddenNodes.value = hiddenNodes.value.concat([cluster.cluster.uid])
             edgeReplacer.value = {
                 ...edgeReplacer.value,
@@ -265,21 +270,21 @@
         }
     }
 
-    const expand = (taskId) => {
-        edgeReplacer.value = {}
-        hiddenNodes.value = []
-        clusterToNode.value = []
-        collapsed.value = collapsed.value.filter(n => n != taskId)
+    const expand = (expandData) => {
+        if (expandData.type === "io.kestra.core.tasks.flows.Flow" && !props.expandedSubflows.includes(expandData.id)) {
+            forwardEvent("expand-subflow", [...props.expandedSubflows, expandData.id]);
+            return;
+        }
+        edgeReplacer.value = {};
+        hiddenNodes.value = [];
+        clusterToNode.value = [];
+        collapsed.value.delete(expandData.id);
 
-        collapsed.value.forEach(n => collapseCluster(CLUSTER_UID_SEPARATOR + n, false, false))
+        collapsed.value.forEach(n => collapseCluster(n, false, false));
 
         generateGraph();
     }
 
-    const flowables = () => {
-        return props.flowGraph && props.flowGraph.flowables ? props.flowGraph.flowables : [];
-    }
-
     const darkTheme = document.getElementsByTagName("html")[0].className.indexOf("dark") >= 0;
 
 </script>
@@ -311,12 +316,12 @@
         <template #node-task="taskProps">
             <TaskNode
                 v-bind="taskProps"
-                @edit="forwardEvent('edit', $event)"
-                @delete="forwardEvent('delete', $event)"
+                @edit="forwardEvent(EVENTS.EDIT, $event)"
+                @delete="forwardEvent(EVENTS.DELETE, $event)"
                 @expand="expand($event)"
-                @open-link="forwardEvent('open-link', $event)"
-                @show-logs="forwardEvent('show-logs', $event)"
-                @show-description="forwardEvent('show-description', $event)"
+                @open-link="forwardEvent(EVENTS.OPEN_LINK, $event)"
+                @show-logs="forwardEvent(EVENTS.SHOW_LOGS, $event)"
+                @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
                 @mouseover="onMouseOver($event)"
                 @mouseleave="onMouseLeave()"
                 @add-error="forwardEvent('on-add-flowable-error', $event)"
@@ -328,9 +333,9 @@
                 v-bind="triggerProps"
                 :is-read-only="isReadOnly"
                 :is-allowed-edit="isAllowedEdit"
-                @delete="forwardEvent('delete', $event)"
-                @edit="forwardEvent('edit', $event)"
-                @show-description="forwardEvent('show-description', $event)"
+                @delete="forwardEvent(EVENTS.DELETE, $event)"
+                @edit="forwardEvent(EVENTS.EDIT, $event)"
+                @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
             />
         </template>
 
@@ -345,8 +350,7 @@
             <EdgeNode
                 v-bind="EdgeProps"
                 :yaml-source="source"
-                :flowables-ids="flowables"
-                @add-task="forwardEvent('add-task', $event)"
+                @add-task="forwardEvent(EVENTS.ADD_TASK, $event)"
                 :is-read-only="isReadOnly"
                 :is-allowed-edit="isAllowedEdit"
             />

package/src/scss/app.scss

@@ -20,6 +20,10 @@
     font-size: 0.66rem;
 }
 
+.vue-flow__controls-button {
+    color: black;
+}
+
 .vue-flow__container {
     .top-button-div {
         position: absolute;
@@ -35,14 +39,15 @@
         pointer-events: none !important;
     }
 
+
     marker[id*='id=marker-custom&type=arrowclosed'] polyline {
         stroke: #9A8EB4;
         fill: #9A8EB4;
     }
 
     marker[id*='id=marker-danger&type=arrowclosed'] polyline {
-        stroke: #9A8EB4;
-        fill: #9A8EB4;
+        stroke: $red;
+        fill: $red;
     }
 
     .vue-flow__handle {

package/src/utils/Utils.js

@@ -1,4 +1,5 @@
 import humanizeDuration from "humanize-duration";
+import moment from "moment";
 
 const humanizeDurationLanguages = {
     "en" : {
@@ -44,4 +45,8 @@ export default class Utils {
 
         return humanizeDuration(value * 1000, options).replace(/\.([0-9])s$/i, ".$10s")
     }
+
+    static afterLastDot(str) {
+        return str.split(".").pop();
+    }
 }

package/src/utils/VueFlowUtils.js

@@ -2,8 +2,9 @@ import {MarkerType, Position, useVueFlow} from "@vue-flow/core"
 import dagre from "dagre";
 import {YamlUtils} from "../index.js";
 import Utils from "./Utils.js";
-import {CLUSTER_UID_SEPARATOR, NODE_SIZES} from "./constants.js";
+import {CLUSTER_PREFIX, NODE_SIZES} from "./constants.js";
 
+const TRIGGERS_NODE_UID = "root.Triggers";
 export default class VueFlowUtils {
 
     static predecessorsEdge(vueFlowId, nodeUid) {
@@ -87,7 +88,7 @@ export default class VueFlowUtils {
         ])
     }
 
-    static generateDagreGraph(flowGraph, hiddenNodes, isHorizontal, clusterCollapseToNode, edgeReplacer, collapsed, clusterToNode) {
+    static generateDagreGraph(flowGraph, hiddenNodes, isHorizontal, clustersWithoutRootNode, edgeReplacer, collapsed, clusterToNode) {
         const dagreGraph = new dagre.graphlib.Graph({compound: true})
         dagreGraph.setDefaultEdgeLabel(() => ({}))
         dagreGraph.setGraph({rankdir: isHorizontal ? "LR" : "TB"})
@@ -102,9 +103,10 @@ export default class VueFlowUtils {
         }
 
         for (let cluster of (flowGraph.clusters || [])) {
-            if (clusterCollapseToNode.includes(cluster.cluster.uid) && collapsed.includes(cluster.cluster.uid)) {
-                const node = {uid: cluster.cluster.uid, type: "collapsedcluster"};
-                dagreGraph.setNode(cluster.cluster.uid, {
+            const nodeUid = cluster.cluster.uid.replace(CLUSTER_PREFIX, "");
+            if (clustersWithoutRootNode.includes(cluster.cluster.uid) && collapsed.has(nodeUid)) {
+                const node = {uid: nodeUid, type: "collapsedcluster"};
+                dagreGraph.setNode(nodeUid, {
                     width: this.getNodeWidth(node),
                     height: this.getNodeHeight(node)
                 });
@@ -156,15 +158,15 @@ export default class VueFlowUtils {
     }
 
     static getNodeHeight(node) {
-        return this.isTaskNode(node) || this.isTriggerNode(node) ? NODE_SIZES.TASK_HEIGHT : this.isCollapsedCluster(node) ?  NODE_SIZES.COLLAPSED_CLUSTER_HEIGHT : NODE_SIZES.DOT_HEIGHT;
+        return this.isTaskNode(node) || this.isTriggerNode(node) ? NODE_SIZES.TASK_HEIGHT : this.isCollapsedCluster(node) ? NODE_SIZES.COLLAPSED_CLUSTER_HEIGHT : NODE_SIZES.DOT_HEIGHT;
     }
 
     static isTaskNode(node) {
-        return node.task !== undefined && (node.type === "io.kestra.core.models.hierarchies.GraphTask")
+        return node.task !== undefined && ["GraphTask", "SubflowGraphTask"].some(t => node.type.endsWith(t));
     }
 
     static isTriggerNode(node) {
-        return node.trigger !== undefined && (node.type === "io.kestra.core.models.hierarchies.GraphTrigger");
+        return node.trigger !== undefined && node.type.endsWith("GraphTrigger");
     }
 
     static isCollapsedCluster(node) {
@@ -199,98 +201,107 @@ export default class VueFlowUtils {
         return source ? YamlUtils.flowHaveTasks(source) : false;
     }
 
-    static linkDatas(task, execution) {
-        const data = {id: task.flowId, namespace: task.namespace}
-        if (execution) {
-            const taskrun = execution.taskRunList.find(r => r.taskId === task.id && r.outputs.executionId)
-            if (taskrun) {
-                data.executionId = taskrun?.outputs.executionId
-            }
+    static nodeColor(node, collapsed) {
+        if (node.uid === TRIGGERS_NODE_UID) {
+            return "success";
         }
-        return data
-    }
 
-    static nodeColor(node, collapsed, flowSource) {
-        if (this.isTaskNode(node)) {
-            if (YamlUtils.isTaskError(flowSource, node.task.id)) {
-                return "danger"
-            }
-            if (collapsed.includes(node.uid)) {
-                return "blue";
-            }
-            if (node.task.type === "io.kestra.core.tasks.flows.Flow") {
-                return "primary"
-            }
-        } else if (this.isTriggerNode(node) || this.isCollapsedCluster(node)) {
-            return "success";
+        if (node.type === "dot") {
+            return null;
         }
-        return "default"
-    }
 
-    static getClusterTaskIdWithEndNodeUid (nodeUid, flowGraph) {
-        const cluster = flowGraph.clusters.find(cluster => cluster.end === nodeUid);
-        if (cluster) {
+        if (this.isTriggerNode(node) || this.isCollapsedCluster(node)) {
+            return "success";
+        }
 
-            return Utils.splitFirst(cluster.cluster.uid, CLUSTER_UID_SEPARATOR);
+        if (node.type.endsWith("SubflowGraphTask")) {
+            return "primary";
+        }
+        if (node.error) {
+            return "danger";
+        }
+        if (collapsed.has(node.uid)) {
+            return "blue";
         }
 
-        return undefined;
+        return "default";
     }
 
-    static haveAdd(edge, flowSource, flowGraph, flowables) {
-        if (edge.target === YamlUtils.getFirstTask(flowSource)) {
-            return [YamlUtils.getNextTaskId(edge.target, flowSource, flowGraph), "before"];
-        }
-        if (YamlUtils.isTaskParallel(edge.target, flowSource) || YamlUtils.isTrigger(flowSource, edge.target) || YamlUtils.isTrigger(flowSource, edge.source)) {
+    static haveAdd(edge, nodeByUid, clustersRootTaskUids, readOnlyUidPrefixes) {
+        // prevent subflow edit (edge = subflowNode -> subflowNode)
+        if(readOnlyUidPrefixes.some(prefix => edge.source.startsWith(prefix) && edge.target.startsWith(prefix))) {
             return undefined;
         }
-        if (YamlUtils.extractTask(flowSource, edge.source) && YamlUtils.extractTask(flowSource, edge.target)) {
-            return [edge.source, "after"];
+
+        // edge = clusterRoot -> clusterRootTask
+        if (clustersRootTaskUids.includes(edge.target)) {
+            return undefined;
         }
-        // Check if edge is an ending flowable
-        // If true, enable add button to add a task
-        // under the flowable task
-        if (edge.source.endsWith("_end") && edge.target.endsWith("_end")) {
-            // Cluster uid contains the flowable task id
-            // So we look for the cluster having this end edge
-            // to return his flowable id
-            return [this.getClusterTaskIdWithEndNodeUid(edge.source, flowGraph), "after"];
+
+        // edge = Triggers cluster -> something || edge = something -> Triggers cluster
+        if(edge.source.startsWith(TRIGGERS_NODE_UID) || edge.target.startsWith(TRIGGERS_NODE_UID)) {
+            return undefined;
         }
-        if (flowables.includes(edge.source)) {
-            return [YamlUtils.getNextTaskId(edge.target, flowSource, flowGraph), "before"];
+
+        const dotSplitTarget = edge.target.split(".");
+        dotSplitTarget.pop();
+        const targetNodeClusterUid = dotSplitTarget.join(".");
+        const clusterRootTaskId = Utils.afterLastDot(targetNodeClusterUid);
+
+        // edge = task of parallel -> end of parallel, we only add + symbol right after the parallel cluster root task node
+        const targetNode = nodeByUid[edge.target];
+        if(targetNode.type.endsWith("GraphClusterEnd") && nodeByUid[targetNodeClusterUid]?.task?.type?.endsWith("Parallel")) {
+            return undefined;
         }
-        if (YamlUtils.extractTask(flowSource, edge.source) && edge.target.endsWith("_end")) {
-            return [edge.source, "after"];
+
+        // edge = something -> clusterRoot ==> we insert before the cluster
+        // clusterUid = clusterTraversalPrefix.{rootTaskUid}
+        // clusterRoot.uid = clusterUid.someUid = clusterTraversalPrefix.{rootTaskUid}.someUid
+        if(targetNode.type.endsWith("GraphClusterRoot")) {
+            return [clusterRootTaskId, "before"];
         }
-        if (YamlUtils.extractTask(flowSource, edge.source) && edge.target.endsWith("_start")) {
-            return [edge.source, "after"];
+
+        const sourceIsEndOfCluster = nodeByUid[edge.source].type.endsWith("GraphClusterEnd");
+        // edge = clusterTask -> clusterEnd ==> we insert after the previous task
+        if(!sourceIsEndOfCluster && targetNode.type.endsWith("GraphClusterEnd")) {
+            return [Utils.afterLastDot(edge.source), "after"]
         }
-        if (YamlUtils.extractTask(flowSource, edge.target) && edge.source.endsWith("_end")) {
-            return [edge.target, "before"];
+
+        // edge = cluster1End -> something ==> we insert after cluster1
+        if(sourceIsEndOfCluster) {
+            const dotSplitSource = edge.source.split(".");
+            return [dotSplitSource[dotSplitSource.length - 2], "after"];
         }
 
-        return undefined;
+        return [Utils.afterLastDot(edge.target), "before"];
     }
 
-    static getEdgeColor(edge, flowSource) {
-        if (YamlUtils.isTaskError(flowSource, edge.source) || YamlUtils.isTaskError(flowSource, edge.target)) {
+    static getEdgeColor(edge, nodeByUid) {
+        const sourceNode = nodeByUid[edge.source];
+        const targetNode = nodeByUid[edge.target];
+        if (sourceNode.error && targetNode.error) {
             return "danger"
         }
-        if (this.isClusterError(flowSource, edge.source) || this.isClusterError(flowSource, edge.target)) {
+
+        if (sourceNode.type.endsWith("GraphClusterRoot") && targetNode.error) {
+            return "danger"
+        }
+
+        if (sourceNode.error && targetNode.type.endsWith("GraphClusterEnd")) {
             return "danger"
         }
+
         return null;
     }
 
-    static generateGraph(vueFlowId, flowId, namespace, flowGraph, flowSource, hiddenNodes, isHorizontal, edgeReplacer, collapsed, clusterToNode, isReadOnly, isAllowedEdit, flowables) {
+    static generateGraph(vueFlowId, flowId, namespace, flowGraph, flowSource, hiddenNodes, isHorizontal, edgeReplacer, collapsed, clusterToNode, isReadOnly, isAllowedEdit) {
         const elements = [];
 
-        const clusterCollapseToNode = ["Triggers"];
+        const clustersWithoutRootNode = [CLUSTER_PREFIX + TRIGGERS_NODE_UID];
 
         if (!flowGraph || !this.flowHaveTasks(flowSource)) {
             elements.push({
                 id: "start",
-                label: "",
                 type: "dot",
                 position: {x: 0, y: 0},
                 style: {
@@ -304,7 +315,6 @@ export default class VueFlowUtils {
             })
             elements.push({
                 id: "end",
-                label: "",
                 type: "dot",
                 position: isHorizontal ? {x: 50, y: 0} : {x: 0, y: 50},
                 style: {
@@ -335,92 +345,98 @@ export default class VueFlowUtils {
 
             return;
         }
-        const dagreGraph = this.generateDagreGraph(flowGraph, hiddenNodes, isHorizontal, clusterCollapseToNode, edgeReplacer, collapsed, clusterToNode);
-        const clusters = {};
-        for (let cluster of (flowGraph.clusters || [])) {
-            if (!edgeReplacer[cluster.cluster.uid] && !collapsed.includes(cluster.cluster.uid)) {
+
+        const dagreGraph = this.generateDagreGraph(flowGraph, hiddenNodes, isHorizontal, clustersWithoutRootNode, edgeReplacer, collapsed, clusterToNode);
+
+        const clusterByNodeUid = {};
+
+        const clusters = flowGraph.clusters || [];
+        const rawClusters = clusters.map(c => c.cluster);
+        const readOnlyUidPrefixes = rawClusters.filter(c => c.type.endsWith("SubflowGraphCluster")).map(c => c.taskNode.uid);
+        for (let cluster of clusters) {
+            if (!edgeReplacer[cluster.cluster.uid] && !collapsed.has(cluster.cluster.uid)) {
+                if (cluster.cluster.taskNode?.task?.type === "io.kestra.core.tasks.flows.Dag") {
+                    readOnlyUidPrefixes.push(cluster.cluster.taskNode.uid);
+                }
+
                 for (let nodeUid of cluster.nodes) {
-                    clusters[nodeUid] = cluster.cluster;
+                    clusterByNodeUid[nodeUid] = cluster.cluster;
                 }
 
                 const clusterUid = cluster.cluster.uid;
-                const isClusterError = YamlUtils.isTaskError(flowSource, Utils.splitFirst(clusterUid, CLUSTER_UID_SEPARATOR))
                 const dagreNode = dagreGraph.node(clusterUid)
                 const parentNode = cluster.parents ? cluster.parents[cluster.parents.length - 1] : undefined;
 
+                const clusterColor = this.computeClusterColor(cluster.cluster);
+
                 elements.push({
                     id: clusterUid,
                     type: "cluster",
                     parentNode: parentNode,
                     position: this.getNodePosition(dagreNode, parentNode ? dagreGraph.node(parentNode) : undefined),
                     style: {
-                        width: clusterUid === "Triggers" && isHorizontal ? NODE_SIZES.TRIGGER_CLUSTER_WIDTH + "px" : dagreNode.width + "px",
-                        height: clusterUid === "Triggers" && !isHorizontal ? NODE_SIZES.TRIGGER_CLUSTER_HEIGHT + "px" : dagreNode.height + "px"
+                        width: clusterUid === TRIGGERS_NODE_UID && isHorizontal ? NODE_SIZES.TRIGGER_CLUSTER_WIDTH + "px" : dagreNode.width + "px",
+                        height: clusterUid === TRIGGERS_NODE_UID && !isHorizontal ? NODE_SIZES.TRIGGER_CLUSTER_HEIGHT + "px" : dagreNode.height + "px"
                     },
                     data: {
                         collapsable: true,
-                        color: clusterUid === "Triggers" ? "success" : isClusterError ? "danger" : "blue"
+                        color: clusterColor,
+                        taskNode: cluster.cluster.taskNode
                     },
-                    class: `bg-light-${clusterUid === "Triggers" ? "success" : isClusterError ? "danger" : "blue"}-border rounded p-2`,
+                    class: `bg-light-${clusterColor}-border rounded p-2`,
                 })
             }
         }
 
-        let disabledLowCode = [];
+        const nodeByUid = {};
         for (const node of flowGraph.nodes.concat(clusterToNode)) {
+            nodeByUid[node.uid] = node;
+
             if (!hiddenNodes.includes(node.uid)) {
                 const dagreNode = dagreGraph.node(node.uid);
                 let nodeType = "task";
-                if (node.type.includes("GraphClusterEnd")) {
-                    nodeType = "dot";
-                } else if (clusters[node.uid] === undefined && node.type.includes("GraphClusterRoot")) {
-                    nodeType = "dot";
-                } else if (node.type.includes("GraphClusterRoot")) {
+                if (this.isClusterRootOrEnd(node)) {
                     nodeType = "dot";
                 } else if (node.type.includes("GraphTrigger")) {
                     nodeType = "trigger";
                 } else if (node.type === "collapsedcluster") {
                     nodeType = "collapsedcluster";
                 }
-                // Disable interaction for Dag task
-                // because our low code editor can not handle it for now
-                if (this.isTaskNode(node) && node.task.type === "io.kestra.core.tasks.flows.Dag") {
-                    disabledLowCode.push(node.task.id);
-                    YamlUtils.getChildrenTasks(flowSource, node.task.id).forEach(child => {
-                        disabledLowCode.push(child);
-                    })
-                }
 
-                const taskId = node?.task?.id;
+                const color = this.nodeColor(node, collapsed, flowSource);
+                const isReadOnlyTask = isReadOnly || readOnlyUidPrefixes.some(prefix => node.uid.startsWith(prefix + "."));
                 elements.push({
                     id: node.uid,
-                    label: this.isTaskNode(node) ? taskId : "",
                     type: nodeType,
-                    position: this.getNodePosition(dagreNode, clusters[node.uid] ? dagreGraph.node(clusters[node.uid].uid) : undefined),
+                    position: this.getNodePosition(dagreNode, clusterByNodeUid[node.uid] ? dagreGraph.node(clusterByNodeUid[node.uid].uid) : undefined),
                     style: {
                         width: this.getNodeWidth(node) + "px",
                         height: this.getNodeHeight(node) + "px"
                     },
                     sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
                     targetPosition: isHorizontal ? Position.Left : Position.Top,
-                    parentNode: clusters[node.uid] ? clusters[node.uid].uid : undefined,
-                    draggable: nodeType === "task" && !isReadOnly && this.isTaskNode(node) ? !disabledLowCode.includes(taskId) : false,
+                    parentNode: clusterByNodeUid[node.uid] ? clusterByNodeUid[node.uid].uid : undefined,
+                    draggable: nodeType === "task" ? !isReadOnlyTask : false,
                     data: {
                         node: node,
-                        namespace: namespace,
-                        flowId: flowId,
-                        isFlowable: this.isTaskNode(node) ? flowables.includes(taskId) : false,
-                        color: nodeType != "dot" ? this.nodeColor(node, collapsed, flowSource) : null,
-                        expandable: taskId ? edgeReplacer[CLUSTER_UID_SEPARATOR + taskId] !== undefined : this.isCollapsedCluster(node),
-                        isReadOnly: isReadOnly,
-                        link: node.task?.type === "io.kestra.core.tasks.flows.Flow" ? this.linkDatas(node.task) : false,
-                        iconComponent: this.isCollapsedCluster(node) ? "webhook" : null
+                        namespace: clusterByNodeUid[node.uid]?.taskNode?.task?.namespace ?? namespace,
+                        flowId: clusterByNodeUid[node.uid]?.taskNode?.task?.flowId ?? flowId,
+                        isFlowable: clusterByNodeUid[node.uid]?.uid === CLUSTER_PREFIX + node.uid && !node.type.endsWith("SubflowGraphTask"),
+                        color: color,
+                        expandable: this.isExpandableTask(node, clusterByNodeUid, edgeReplacer),
+                        isReadOnly: isReadOnlyTask,
+                        iconComponent: this.isCollapsedCluster(node) ? "webhook" : null,
+                        executionId: node.executionId
                     },
-                    class: node.type === "collapsedcluster" ? `bg-light-${node.uid === "Triggers" ? "success" : YamlUtils.isTaskError(flowSource, taskId) ? "danger" : "blue"}-border rounded` : "",
+                    class: node.type === "collapsedcluster" ? `bg-light-${color}-border rounded` : "",
                 })
             }
         }
-        for (const edge of (flowGraph.edges || [])) {
+
+        const clusterRootTaskNodeUids = rawClusters.filter(c => c.taskNode).map(c => c.taskNode.uid);
+        const edges = flowGraph.edges ?? [];
+
+        for (const edge of edges) {
             const newEdge = this.replaceIfCollapsed(edge.source, edge.target, edgeReplacer, hiddenNodes);
             if (newEdge) {
                 elements.push({
@@ -428,17 +444,17 @@ export default class VueFlowUtils {
                     source: newEdge.source,
                     target: newEdge.target,
                     type: "edge",
-                    markerEnd: YamlUtils.extractTask(flowSource, newEdge.target) ? {
-                        id: YamlUtils.isTaskError(flowSource, newEdge.target) ? "marker-danger" : "marker-custom",
-                        type: MarkerType.ArrowClosed,
-                    } : "",
+                    markerEnd: this.isClusterRootOrEnd(nodeByUid[newEdge.target]) ? ""
+                        : {
+                            id: nodeByUid[newEdge.target].error ? "marker-danger" : "marker-custom",
+                            type: MarkerType.ArrowClosed,
+                        },
                     data: {
-                        haveAdd: this.haveAdd(edge, flowSource, flowGraph, flowables),
-                        isFlowable: flowables.includes(edge.source) || flowables.includes(edge.target),
-                        haveDashArray: YamlUtils.isTrigger(flowSource, edge.source) || YamlUtils.isTrigger(flowSource, edge.target),
-                        nextTaskId: YamlUtils.getNextTaskId(edge.target, flowSource, flowGraph),
-                        disabled: disabledLowCode.includes(edge.source) || isReadOnly || !isAllowedEdit,
-                        color: this.getEdgeColor(edge, flowSource)
+                        haveAdd: !isReadOnly && isAllowedEdit && this.haveAdd(edge, nodeByUid, clusterRootTaskNodeUids, readOnlyUidPrefixes),
+                        haveDashArray: nodeByUid[edge.source].type.endsWith("GraphTrigger")
+                            || nodeByUid[edge.target].type.endsWith("GraphTrigger")
+                            || edge.source.startsWith(TRIGGERS_NODE_UID),
+                        color: this.getEdgeColor(edge, nodeByUid)
                     },
                     style: {
                         zIndex: 10,
@@ -449,19 +465,35 @@ export default class VueFlowUtils {
         return elements;
     }
 
-    static isClusterError(flowSource, clusterUid) {
-        if(clusterUid.startsWith(CLUSTER_UID_SEPARATOR)) {
-            if(clusterUid.endsWith("_end")) {
+    static isClusterRootOrEnd(node) {
+        return ["GraphClusterRoot", "GraphClusterEnd"].some(s => node.type.endsWith(s));
+    }
 
-                return YamlUtils.isTaskError(flowSource, Utils.splitFirst(clusterUid.substring(0, clusterUid.length - 4), CLUSTER_UID_SEPARATOR));
-            }
-            if(clusterUid.endsWith("_start")) {
+    static computeClusterColor(cluster) {
+        if (cluster.uid === CLUSTER_PREFIX + TRIGGERS_NODE_UID) {
+            return "success";
+        }
 
-                return YamlUtils.isTaskError(flowSource, Utils.splitFirst(clusterUid.substring(0, clusterUid.length - 6), CLUSTER_UID_SEPARATOR));
-            }
+        if (cluster.type.endsWith("SubflowGraphCluster")) {
+            return "primary";
         }
 
-        return false
+        if (cluster.error) {
+            return "danger";
+        }
+
+        return "blue";
     }
 
+    static isExpandableTask(node, clusterByNodeUid, edgeReplacer) {
+        if (Object.values(edgeReplacer).includes(node.uid)) {
+            return true;
+        }
+
+        if (this.isCollapsedCluster(node)) {
+            return true;
+        }
+
+        return node.type.endsWith("SubflowGraphTask") && clusterByNodeUid[node.uid]?.uid?.replace(CLUSTER_PREFIX, "") !== node.uid;
+    }
 }

package/src/utils/constants.js

@@ -18,7 +18,7 @@ export const EVENTS = {
     "EXPAND_DEPENDENCIES": "expandDependencies",
 }
 
-export const CLUSTER_UID_SEPARATOR = "cluster_";
+export const CLUSTER_PREFIX = "cluster_";
 
 export const NODE_SIZES = {
     TASK_WIDTH: 184,