work on mermaid dag

DataCloud-project · Jul 19, 2023 · 363a14b · 363a14b
1 parent 81d370b
commit 363a14b
Show file tree

Hide file tree

Showing 2 changed files with 178 additions and 27 deletions.
diff --git a/frontend-dev/src/routes/visualizations/ddag/+page.svelte b/frontend-dev/src/routes/visualizations/ddag/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
     // https://mermaid.js.org/intro/
     import mermaid from 'mermaid';
-    import * as workflow from './hhh.json';
-    //import jQuery from 'jquery';
+    import * as workflow from './hhh.json'; // for testing; import some local json file for the workflow
     import { CodeBlock, ProgressBar } from '@skeletonlabs/skeleton';
+    //import jQuery from 'jquery';
+	//import { bind, onMount } from 'svelte/internal';
 
     let graphOrientation = 'LR';
     let servers = {
@@ -17,15 +18,7 @@
         "failed": "#880808",
     }
 
-    async function buildDiagram(workflow: {}) {
-        let templates = workflow.spec.templates
-        console.log(templates);
-        //return diagram;
-    }
-
-    buildDiagram(workflow);
-
-    // The default diagram
+    // default diagram for testing
     let diagram = `
         graph ${graphOrientation}
             A[Client] --> B[Load Balancer]
@@ -38,42 +31,82 @@
             style A fill:${colors.running}
             style B fill:${colors.failed}
             style E fill:${colors.finished}  
-            click A call callback()
-            click B href "projects"
+            click A call callback() "Hello world"
+            click B href "javascript:console.log('A callback was triggered');"
+            click C call doSomething() "Do something!"
     `;
 
-    let element;
+    //let element;
     let container;
-
-    mermaid.initialize({
+    let mermaidConfig = {
         securityLevel: 'loose',
         theme: 'neutral',
         startOnLoad: true,
         logLevel: 4,
-        });
+        flowchart: {
+            useMaxWidth: true,
+            htmlLabels: true,
+            curve: 'basis',
+        },
+        };
 
-    const callback = function () {
-        alert('A callback was triggered');
-    };        
+    mermaid.initialize(mermaidConfig);
+
+    function changeColor(id: string, color: string) {
+        console.log(`${id} color changed to ${color}`);
+        buildDiagram(workflow);
+        
+    };
+
+    function buildDiagram( workflow: {} ) {
+        let templates = workflow.spec.templates
+        let newDiagram = `
+            graph ${graphOrientation}
+        `;
+        templates.forEach(template => {
+            //console.log(element)
+            //console.log("-----------------")
+            template.steps?.forEach(step => {
+                console.log(step)
+                newDiagram += `
+                    ${step.name}[${step.name}] --> `;
+                step.forEach(substep => {
+                    newDiagram += `${substep.name}[${substep.name}]
+                    `;
+                    //console.log(substep)
+                    //console.log("-----------------")
+                    console.log(newDiagram)
+                });
+            });
+        });
+        diagram = newDiagram;
+    }
 
     const renderDiagram = async () => {
-        element = document.querySelector('#mermaid');
-        const {svg, bindFunctions} = await mermaid.render('mermaid', diagram)
+        const {svg} = await mermaid.render('mermaid', diagram, container);
         container.innerHTML=svg;
-        if (bindFunctions) {
-            bindFunctions(element);
-        }        
+        container.addEventListener('click', function (e) {
+            if (e.target.attributes.getNamedItem('class').value === 'nodeLabel') {
+                changeColor(e.target.innerHTML, colors.finished)
+            };
+        });
+        //console.log(container)
+        // mermaid.render('mermaid', diagram).then(({ svg, bindFunctions }) => {
+        //     container.innerHTML = svg;
+        //     bindFunctions?.(container);
+        //     });  
     };
 
     $: diagram && renderDiagram()
+
 </script>
 
 <div class="container p-5">
     {#await renderDiagram}
-        <p style="font-size:20px;">Loading projects...</p>
+        <p style="font-size:20px;">Loading...</p>
         <ProgressBar />
     {:then diagram}
-        <span bind:this={container}></span>
+        <span class="mermaid" bind:this={container}></span>
         <div class="code">
             <CodeBlock language='json' code={JSON.stringify(workflow, null, 2)} text="text-xs" />
         </div>

diff --git a/frontend-dev/src/routes/visualizations/ddag/hhh.json b/frontend-dev/src/routes/visualizations/ddag/hhh.json
@@ -0,0 +1,118 @@
+{
+  "apiVersion": "argoproj.io/v1alpha1",
+  "kind": "Workflow",
+  "metadata": {
+    "generateName": "dag-diamond-steps-"
+  },
+  "spec": {
+    "entrypoint": "diamond",
+    "templates": [
+      {
+        "name": "echo",
+        "inputs": {
+          "parameters": [
+            {
+              "name": "message"
+            }
+          ]
+        },
+        "container": {
+          "image": "alpine:3.7",
+          "command": [
+            "echo",
+            "{{inputs.parameters.message}}"
+          ]
+        }
+      },
+      {
+        "name": "echo-thrice",
+        "inputs": {
+          "parameters": [
+            {
+              "name": "message"
+            }
+          ]
+        },
+        "steps": [
+          [
+            {
+              "name": "echo",
+              "template": "echo",
+              "arguments": {
+                "parameters": [
+                  {
+                    "name": "message",
+                    "value": "{{inputs.parameters.message}}{{item}}"
+                  }
+                ]
+              },
+              "withItems": [
+                1,
+                2,
+                3
+              ]
+            }
+          ]
+        ]
+      },
+      {
+        "name": "diamond",
+        "dag": {
+          "tasks": [
+            {
+              "name": "A",
+              "template": "echo-thrice",
+              "arguments": {
+                "parameters": [
+                  {
+                    "name": "message",
+                    "value": "A"
+                  }
+                ]
+              }
+            },
+            {
+              "name": "B",
+              "depends": "A",
+              "template": "echo-thrice",
+              "arguments": {
+                "parameters": [
+                  {
+                    "name": "message",
+                    "value": "B"
+                  }
+                ]
+              }
+            },
+            {
+              "name": "C",
+              "depends": "A",
+              "template": "echo-thrice",
+              "arguments": {
+                "parameters": [
+                  {
+                    "name": "message",
+                    "value": "C"
+                  }
+                ]
+              }
+            },
+            {
+              "name": "D",
+              "depends": "B && C",
+              "template": "echo-thrice",
+              "arguments": {
+                "parameters": [
+                  {
+                    "name": "message",
+                    "value": "D"
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+}