Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Workflow Visualizer</title> | |
| <link rel="icon" href="data:,"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script type="module"> | |
| import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; | |
| window.mermaid = mermaid; | |
| mermaid.initialize({ | |
| startOnLoad: true, | |
| theme: 'base', | |
| themeVariables: { | |
| 'primaryColor': '#ffffff', | |
| 'primaryTextColor': '#000000', | |
| 'primaryBorderColor': '#000000', | |
| 'lineColor': '#000000', | |
| 'secondaryColor': '#ffffff', | |
| 'tertiaryColor': '#ffffff', | |
| } | |
| }); | |
| </script> | |
| <style> | |
| .mermaid svg { | |
| max-width: 100%; | |
| max-height: 100%; | |
| } | |
| textarea { | |
| font-family: monospace; | |
| } | |
| </style> | |
| <script type="module" src="temporal-graph-timestep.js"></script> | |
| <script type="module" src="temporal-graph-canva.js"></script> | |
| </head> | |
| <body class="bg-white min-h-screen flex flex-col relative"> | |
| <div class="container mx-auto px-4 py-8 h-screen flex flex-col"> | |
| <h1 class="text-3xl font-bold mb-4 text-center shrink-0">Workflow Visualizer</h1> | |
| <temporal-graph-canva id="mygraph" class="h-full flex-grow flex flex-col" current-timestep="0" view-mode="single"></temporal-graph-canva> | |
| </div> | |
| <div class="absolute top-4 right-4 z-50 bg-white rounded-lg shadow-2xl border border-gray-200 w-1/3 max-w-lg"> | |
| <button id="toggleInputBtn" class="w-full text-left p-3 font-bold text-lg hover:bg-gray-50 rounded-t-lg"> | |
| Workflow Data ✏️ | |
| </button> | |
| <div id="inputContainer" class="p-4 border-t border-gray-200"> | |
| <label for="tsvInput" class="block text-sm font-medium text-gray-700 mb-1">Paste your TSV data here:</label> | |
| <textarea id="tsvInput" rows="10" class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-[#8590F8] focus:border-[#8590F8]"></textarea> | |
| <button id="visualizeBtn" class="mt-2 px-4 py-2 bg-[#8590F8] text-white rounded hover:bg-[#7E7E7E] transition-colors">Visualize</button> | |
| </div> | |
| </div> | |
| <script> | |
| const tsvInput = document.getElementById('tsvInput'); | |
| const visualizeBtn = document.getElementById('visualizeBtn'); | |
| const graphCanva = document.getElementById('mygraph'); | |
| function parseTSVToKnowledgeGraph(tsvText) { | |
| if (!tsvText) return []; | |
| const lines = tsvText.trim().split('\n').slice(1); | |
| return lines.map(line => { | |
| const parts = line.split('\t'); | |
| if (parts.length < 4) return null; | |
| const [subject, relation, object, stageStr] = parts; | |
| const stage = parseInt(stageStr.replace(/\D/g, ''), 10) || 0; | |
| return [subject.trim(), relation.trim(), object.trim(), stage]; | |
| }).filter(Boolean); | |
| } | |
| function renderGraph() { | |
| try { | |
| const knowledge_graph = parseTSVToKnowledgeGraph(tsvInput.value); | |
| graphCanva.render(knowledge_graph); | |
| } catch (error) { | |
| console.error('Error parsing or rendering the graph:', error); | |
| alert('Could not parse or render the graph. Please check the console for errors.'); | |
| } | |
| } | |
| visualizeBtn.addEventListener('click', renderGraph); | |
| const toggleInputBtn = document.getElementById('toggleInputBtn'); | |
| const inputContainer = document.getElementById('inputContainer'); | |
| toggleInputBtn.addEventListener('click', () => { | |
| inputContainer.classList.toggle('hidden'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| <!-- /* All rights reserved Michael Anthony 2025 */--> |