Spaces:

MikeDoes
/

TKG-visualiser

Running

App Files Files Community

MikeDoes commited on 1 day ago

Commit

0cdd242

verified ·

1 Parent(s): 8a25df3

Upload 3 files

Browse files

Files changed (3) hide show

index.html +92 -18
temporal-graph-canva.js +217 -0
temporal-graph-timestep.js +128 -0

index.html CHANGED Viewed

@@ -1,19 +1,93 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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 */-->

temporal-graph-canva.js ADDED Viewed

	@@ -0,0 +1,217 @@

+/* ===========================================================
+   temporal-graph-canva.js
+   =========================================================== */
+   import './temporal-graph-timestep.js';
+   class TemporalGraphCanva extends HTMLElement {
+       constructor() {
+           super();
+           this._knowledge_graph = [];
+           this._maxTimestep     = 0;
+           this._cursorIndex     = -1;
+           this._keyHandler      = this._keyHandler.bind(this);
+       }
+       /* ---------- observed attributes ---------- */
+       static get observedAttributes() { return ['current-timestep','view-mode']; }
+       get currentTimestep() { return parseInt(this.getAttribute('current-timestep') || '0'); }
+       set currentTimestep(v){ this.setAttribute('current-timestep', v); this._cursorIndex=-1; }
+       get viewMode()        { return this.getAttribute('view-mode') || 'single'; }
+       set viewMode(v)       { this.setAttribute('view-mode', v); this._cursorIndex=-1; }
+       /* ---------- lifecycle ---------- */
+       connectedCallback()   { document.addEventListener('keydown', this._keyHandler); }
+       disconnectedCallback(){ document.removeEventListener('keydown', this._keyHandler); }
+       async attributeChangedCallback(n,o,v){ if(o!==v) await this._render(); }
+       async render(kg){
+           this._knowledge_graph=kg;
+           if (!kg || kg.length === 0) {
+               this._maxTimestep = 0;
+           } else {
+               this._maxTimestep=Math.max(...kg.map(r=>r[3]));
+           }
+           await this._render();
+       }
+       /* ---------- keyboard ---------- */
+       _keyHandler(e){
+           const k=e.key.toLowerCase();
+           if(this.viewMode==='single' && (k==='q'||k==='e')){
+               const total=this._relationCount();
+               if(total){
+                   if(k==='e'){ this._cursorIndex++; if(this._cursorIndex>total-1) this._cursorIndex=-1; }
+                   else      { this._cursorIndex--; if(this._cursorIndex< -1)     this._cursorIndex=total-1; }
+                   this._render();
+               }
+               return;
+           }
+           if(this.viewMode==='single'){
+               if(k==='arrowleft'||k==='a') this._navigate(-1);
+               else if(k==='arrowright'||k==='d') this._navigate(1);
+               else if(k==='s') this.currentTimestep=this._maxTimestep+1;
+           }
+           if(k==='f') this._toggleView();
+       }
+       /* ---------- helpers ---------- */
+       _relationCount(){
+           const t=this.currentTimestep;
+           if(t===this._maxTimestep+1){
+               return new Set(this._knowledge_graph.map(([s,r,t])=>`${s}|${r}|${t}`)).size;
+           }
+           if(t<0 || t>this._maxTimestep) return 0;
+           return new Set(
+               this._knowledge_graph.filter(r=>r[3]===t).map(([s,r,t])=>`${s}|${r}|${t}`)
+           ).size;
+       }
+       /* ---------- render ---------- */
+       async _render(){
+           this.innerHTML='';
+           const wrapper=document.createElement('div');
+           wrapper.className='h-full flex flex-col bg-white rounded-lg shadow-lg p-4 flex-grow overflow-hidden';
+           const container=document.createElement('div');
+           container.className=this.viewMode==='single'
+               ? 'flex justify-center items-center w-full h-full'
+               : 'grid grid-cols-1 md:grid-cols-2 gap-0 w-full h-full overflow-auto';
+           if (!this._knowledge_graph || this._knowledge_graph.length === 0) {
+               container.innerHTML = `<div class="flex items-center justify-center h-full text-gray-500">Paste TSV data and click Visualize.</div>`;
+           } else {
+               /* each real timestep */
+               for(let ts=0;ts<=this._maxTimestep;ts++){
+                   const el=document.createElement('temporal-graph-timestep');
+                   el.data={
+                       knowledge_graph:this._knowledge_graph,
+                       timestep:ts,
+                       cursorIndex:(this.viewMode==='single' && ts===this.currentTimestep) ? this._cursorIndex : -1
+                   };
+                   if(this.viewMode==='single') el.style.display = ts===this.currentTimestep ? 'flex':'none';
+                   container.appendChild(el);
+               }
+               /* summary page */
+               const summary=document.createElement('temporal-graph-timestep');
+               summary.data={
+                   knowledge_graph:this._knowledge_graph,
+                   timestep:'summary',
+                   cursorIndex:(this.viewMode==='single' && this.currentTimestep===this._maxTimestep+1)
+                                ? this._cursorIndex : -1
+               };
+               if(this.viewMode==='single')
+                   summary.style.display = this.currentTimestep===this._maxTimestep+1 ? 'flex':'none';
+               container.appendChild(summary);
+           }
+           wrapper.appendChild(container);
+           this.appendChild(wrapper);
+           this.appendChild(this._buildNav());
+           this._updateNavState();
+           /* run Mermaid only on visible diagrams */
+           try {
+               const sel='.mermaid:not([style*="display: none"])';
+               if(this.querySelector(sel)) await window.mermaid.run({querySelector:sel});
+           } catch(err) { console.warn('Mermaid render warning:', err); }
+       }
+       /* ---------- navigation bar ---------- */
+       _buildNav(){
+           const nav=document.createElement('div');
+           nav.className='bg-white shadow-lg p-4 flex flex-wrap justify-center items-center space-x-4';
+           const mkBtn=(txt,fn)=>{
+               const b=document.createElement('button'); b.textContent=txt;
+               b.className='px-4 py-2 bg-[#8590F8] text-white rounded hover:bg-[#7E7E7E] transition-colors disabled:opacity-50 disabled:cursor-not-allowed';
+               b.addEventListener('click',fn); return b;
+           };
+           const prev = mkBtn('Previous', ()=>this._navigate(-1));
+           const next = mkBtn('Next',     ()=>this._navigate( 1));
+           const toggle=mkBtn(this.viewMode==='single'?'View All':'View Single', ()=>this._toggleView());
+           const dl   = mkBtn('Download SVG', ()=>this._downloadSVG());
+           const indicators=document.createElement('div');
+           indicators.className='flex flex-wrap justify-center space-x-2 my-2';
+           for(let i=0;i<=this._maxTimestep+1;i++){
+               const b=document.createElement('button');
+               b.textContent=i===this._maxTimestep+1?'S':i+1;
+               b.className='w-8 h-8 rounded-full bg-[#C5C5C5] text-[#1A1A1A] flex items-center justify-center font-bold hover:bg-[#7E7E7E] hover:text-white transition-colors m-1';
+               b.addEventListener('click',()=>{this.currentTimestep=i;});
+               indicators.appendChild(b);
+           }
+           nav.append(prev,indicators,next,toggle,dl);
+           this._prevB=prev; this._nextB=next; this._toggleB=toggle; this._indWrap=indicators;
+           return nav;
+       }
+       _navigate(dx){
+           const total=this._maxTimestep+2;
+           let n=this.currentTimestep+dx;
+           if(n<0) n=0; if(n>=total) n=total-1;
+           this.currentTimestep=n;
+       }
+       _toggleView(){
+           this.viewMode = this.viewMode==='single' ? 'all' : 'single';
+           this._toggleB.textContent = this.viewMode==='single' ? 'View All' : 'View Single';
+       }
+       _updateNavState(){
+           const total=this._maxTimestep+2;
+           const noData = !this._knowledge_graph || this._knowledge_graph.length === 0;
+           if(this.viewMode==='all' || noData){
+               this._prevB.disabled=this._nextB.disabled=true;
+               if(this._indWrap) this._indWrap.querySelectorAll('button').forEach(b=>b.disabled=true);
+           } else {
+               this._prevB.disabled = this.currentTimestep===0;
+               this._nextB.disabled = this.currentTimestep===total-1;
+               if (this._indWrap) this._indWrap.querySelectorAll('button').forEach((b,i)=>{
+                   b.disabled=false;
+                   if(i===this.currentTimestep){
+                       b.classList.replace('bg-[#C5C5C5]','bg-[#8590F8]');
+                       b.classList.replace('text-[#1A1A1A]','text-white');
+                   } else {
+                       b.classList.replace('bg-[#8590F8]','bg-[#C5C5C5]');
+                       b.classList.replace('text-white','text-[#1A1A1A]');
+                   }
+               });
+           }
+       }
+       /* ---------- download SVG ---------- */
+       async _downloadSVG(){
+           let svg;
+           if(this.viewMode==='single'){
+               svg=this.querySelector('.mermaid:not([style*="display: none"]) svg');
+           } else {
+               const svgs=[...this.querySelectorAll('.mermaid svg')];
+               const combo=document.createElementNS('http://www.w3.org/2000/svg','svg');
+               let y=0;
+               svgs.forEach(s=>{
+                   const g=document.createElementNS('http://www.w3.org/2000/svg','g');
+                   g.innerHTML=s.innerHTML;
+                   g.setAttribute('transform',`translate(0,${y})`);
+                   combo.appendChild(g);
+                   y+=parseInt(s.getAttribute('height'))+20||20;
+               });
+               combo.setAttribute('width',Math.max(...svgs.map(s=>parseInt(s.getAttribute('width'))||0)));
+               combo.setAttribute('height',y);
+               svg=combo;
+           }
+           if(!svg) return console.error('downloadSVG: no SVG element');
+           const xml=new XMLSerializer().serializeToString(svg);
+           const src=/^<svg[^>]+xmlns=/.test(xml)?xml:xml.replace(/^<svg/,'<svg xmlns="http://www.w3.org/2000/svg"');
+           const url='data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<?xml version="1.0"?>\n'+src);
+           const a=document.createElement('a'); a.href=url; a.download='temporal_graph.svg';
+           document.body.appendChild(a); a.click(); document.body.removeChild(a);
+       }
+   }
+   customElements.define('temporal-graph-canva', TemporalGraphCanva);
+/* All rights reserved Michael Anthony 2025 */

temporal-graph-timestep.js ADDED Viewed

	@@ -0,0 +1,128 @@

+/* ===========================================================
+   temporal-graph-timestep.js
+   =========================================================== */
+   class TemporalGraphTimestep extends HTMLElement {
+    constructor() {
+        super();
+        this._knowledge_graph = [];
+        this._timestep        = 0;
+        this._cursorIndex     = -1;
+    }
+    connectedCallback() {
+        this.className =
+            'mermaid w-[100%] h-[100%] flex items-center justify-center';
+    }
+    /** Accepts { knowledge_graph, timestep, cursorIndex } */
+    set data(v) {
+        this._knowledge_graph = v.knowledge_graph;
+        this._timestep        = v.timestep;
+        this._cursorIndex     = 'cursorIndex' in v ? v.cursorIndex : -1;
+        this.render();
+    }
+    generateMermaidDiagram() {
+        /* ---------- Mermaid init block: 36px with !important ---------- */
+        const initCSS = `%%{init:{
+  "themeCSS": ".node text{font-size:36px !important;} .edgeLabel text{font-size:36px !important;}"
+}}%%`;
+        const first = this._knowledge_graph.find(r => r[3] === 0);
+        const title = first ? first[2] : 'Temporal Graph';
+        /* ---------- preprocess ---------- */
+        const unique = [];
+        const times  = {};
+        const seq    = {};
+        const firstOcc = {};
+        const allNodes = new Set();
+        this._knowledge_graph.forEach(([s,r,t,ts])=>{
+            const k=`${s}|${r}|${t}`;
+            allNodes.add(s); allNodes.add(t);
+            if(!times[k]){unique.push({s,r,t});times[k]=[];}
+            times[k].push(ts);
+            if(!seq[ts]) seq[ts]={cnt:1};
+            if(!seq[ts][k]){
+                seq[ts][k]=seq[ts].cnt++;
+                if(!firstOcc[k]) firstOcc[k]={ts,seq:seq[ts][k]};
+            }
+        });
+        const global=unique.map(o=>{
+            const k=`${o.s}|${o.r}|${o.t}`;return {...o,...firstOcc[k]};
+        }).sort((a,b)=>a.ts===b.ts? a.seq-b.seq : a.ts-b.ts);
+        // **FIXED HERE**: The bug from before was a typo in this line.
+        const orderIdx={}; global.forEach((o,i)=>orderIdx[`${o.s}|${o.r}|${o.t}`]=i);
+        /* ---------- build diagram ---------- */
+        let code = `${initCSS}
+---
+title: ${title}
+---
+graph LR
+subgraph " "
+direction LR
+`;
+        let linkStyle='', nodeStyle='', linkIdx=0;
+        const activeNodes=new Set();
+        unique.forEach(({s,r,t})=>{
+            const k=`${s}|${r}|${t}`;
+            // **RESTORED**: Using original logic for node IDs.
+            const sId=s.replace(/\s+/g,'');
+            const tId=t.replace(/\s+/g,'');
+            const active=(this._timestep==='summary')||times[k].includes(this._timestep);
+            let lb=r, sq, stp;
+            if(active){
+                if(this._timestep==='summary'){sq=firstOcc[k].seq;stp=firstOcc[k].ts+1;}
+                else{sq=seq[this._timestep][k];stp=this._timestep+1;}
+                lb=`${stp}.${sq} ${r}`;
+            }
+            const highlight=
+                active && this._cursorIndex>=0 &&
+                (
+                    (this._timestep==='summary' && orderIdx[k]===this._cursorIndex) ||
+                    (this._timestep!=='summary' && sq-1===this._cursorIndex)
+                );
+            // **RESTORED**: Using original logic for creating nodes and links.
+            if(active){
+                code += `    ${sId}[${s}] -->|${lb}| ${tId}[${t}]\n`;
+                activeNodes.add(s); activeNodes.add(t);
+                if(highlight){
+                    linkStyle+=`    linkStyle ${linkIdx} stroke:#8590F8,stroke-width:4px,color:#8590F8\n`;
+                    nodeStyle+=
+                        `    style ${sId} fill:#1A1A1A,stroke:#1A1A1A,color:#ffffff\n`+
+                        `    style ${tId} fill:#8590F8,stroke:#8590F8,color:#ffffff\n`;
+                }
+            } else {
+                code += `    ${sId}[${s}] -.-|${lb}| ${tId}[${t}]\n`;
+                linkStyle+=`    linkStyle ${linkIdx} stroke:#ffffff,stroke-width:2px,color:#ffffff\n`;
+            }
+            linkIdx++;
+        });
+        // **RESTORED**: Using original logic for hiding inactive nodes.
+        allNodes.forEach(n=>{
+            if(!activeNodes.has(n)){
+                nodeStyle+=`    style ${n.replace(/\s+/g,'')} fill:#ffffff,stroke:#ffffff,color:#ffffff\n`;
+            }
+        });
+        return code + nodeStyle + linkStyle + 'end\n';
+    }
+    // **RESTORED**: Using original, simple render method.
+    render() { this.textContent = this.generateMermaidDiagram(); }
+}
+customElements.define('temporal-graph-timestep', TemporalGraphTimestep);
+/* All rights reserved Michael Anthony  */