Spaces:
Running
Running
File size: 3,994 Bytes
0cdd242 8a25df3 0cdd242 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!DOCTYPE html>
<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 */--> |