Merge branch 'stage' of https://github.com/DataCloud-project/SIM-PIPE …

…into stage
DataCloud-project · Jul 18, 2023 · 81d370b · 81d370b
2 parents d67fed3 + d885c80
commit 81d370b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 6 deletions.
diff --git a/frontend-dev/package-lock.json b/frontend-dev/package-lock.json
diff --git a/frontend-dev/package.json b/frontend-dev/package.json
@@ -28,6 +28,7 @@
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.26.0",
+		"jquery": "^3.7.0",
 		"postcss": "^8.4.23",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",

diff --git a/frontend-dev/src/routes/visualizations/ddag/+page.svelte b/frontend-dev/src/routes/visualizations/ddag/+page.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
     // https://mermaid.js.org/intro/
     import mermaid from 'mermaid';
+    import * as workflow from './hhh.json';
+    //import jQuery from 'jquery';
+    import { CodeBlock, ProgressBar } from '@skeletonlabs/skeleton';
 
     let graphOrientation = 'LR';
     let servers = {
@@ -14,6 +17,14 @@
         "failed": "#880808",
     }
 
+    async function buildDiagram(workflow: {}) {
+        let templates = workflow.spec.templates
+        console.log(templates);
+        //return diagram;
+    }
+
+    buildDiagram(workflow);
+
     // The default diagram
     let diagram = `
         graph ${graphOrientation}
@@ -26,24 +37,45 @@
             E --> B
             style A fill:${colors.running}
             style B fill:${colors.failed}
-            style E fill:${colors.finished}
+            style E fill:${colors.finished}  
+            click A call callback()
+            click B href "projects"
     `;
 
+    let element;
     let container;
 
     mermaid.initialize({
         securityLevel: 'loose',
         theme: 'neutral',
+        startOnLoad: true,
+        logLevel: 4,
         });
 
-    async function renderDiagram() {
-      const {svg} = await mermaid.render('mermaid', diagram)
-      container.innerHTML=svg;
-    }
+    const callback = function () {
+        alert('A callback was triggered');
+    };        
+
+    const renderDiagram = async () => {
+        element = document.querySelector('#mermaid');
+        const {svg, bindFunctions} = await mermaid.render('mermaid', diagram)
+        container.innerHTML=svg;
+        if (bindFunctions) {
+            bindFunctions(element);
+        }        
+    };
 
     $: diagram && renderDiagram()
 </script>
 
 <div class="container p-5">
-  <span bind:this={container}>
+    {#await renderDiagram}
+        <p style="font-size:20px;">Loading projects...</p>
+        <ProgressBar />
+    {:then diagram}
+        <span bind:this={container}></span>
+        <div class="code">
+            <CodeBlock language='json' code={JSON.stringify(workflow, null, 2)} text="text-xs" />
+        </div>
+    {/await}
 </div>