npm - backpack-viewer - Versions diffs - 0.2.9 → 0.2.10 - Mend

backpack-viewer 0.2.9 → 0.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/app/assets/index-Ba3iFo5A.js +1 -0
package/dist/app/index.html +2 -2
package/dist/sidebar.js +1 -1
package/package.json +1 -1
package/dist/app/assets/index-BHUjYf4x.js +0 -1

package/dist/app/assets/index-Ba3iFo5A.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/app/index.html CHANGED Viewed

@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Backpack Ontology Viewer</title>
-    <script type="module" crossorigin src="/assets/index-BHUjYf4x.js"></script>
+    <title>Backpack Viewer</title>
+    <script type="module" crossorigin src="/assets/index-Ba3iFo5A.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CLyb9OCm.css">
   </head>
   <body>

package/dist/sidebar.js CHANGED Viewed

@@ -4,7 +4,7 @@ export function initSidebar(container, onSelectOrCallbacks) {
         : onSelectOrCallbacks;
     // Build DOM
     const heading = document.createElement("h2");
-    heading.textContent = "Backpack Ontology Viewer";
+    heading.textContent = "Backpack Viewer";
     const input = document.createElement("input");
     input.type = "text";
     input.placeholder = "Filter...";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "backpack-viewer",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Web-based graph visualizer for backpack-ontology — Canvas 2D, force-directed layout, live reload",
   "license": "Apache-2.0",
   "author": "Noah Irzinger",

package/dist/app/assets/index-BHUjYf4x.js DELETED Viewed

@@ -1 +0,0 @@

- (function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const d of document.querySelectorAll('link[rel="modulepreload"]'))t(d);new MutationObserver(d=>{for(const e of d)if(e.type==="childList")for(const c of e.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&t(c)}).observe(document,{childList:!0,subtree:!0});function o(d){const e={};return d.integrity&&(e.integrity=d.integrity),d.referrerPolicy&&(e.referrerPolicy=d.referrerPolicy),d.crossOrigin==="use-credentials"?e.credentials="include":d.crossOrigin==="anonymous"?e.credentials="omit":e.credentials="same-origin",e}function t(d){if(d.ep)return;d.ep=!0;const e=o(d);fetch(d.href,e)}})();async function ie(){const a=await fetch("/api/ontologies");return a.ok?a.json():[]}async function le(a){const n=await fetch(`/api/ontologies/${encodeURIComponent(a)}`);if(!n.ok)throw new Error(`Failed to load ontology: ${a}`);return n.json()}async function Se(a,n){if(!(await fetch(`/api/ontologies/${encodeURIComponent(a)}`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)})).ok)throw new Error(`Failed to save ontology: ${a}`)}async function Me(a,n){if(!(await fetch(`/api/ontologies/${encodeURIComponent(a)}/rename`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:n})})).ok)throw new Error(`Failed to rename ontology: ${a}`)}function Ie(a,n){const o=typeof n=="function"?{onSelect:n}:n,t=document.createElement("h2");t.textContent="Backpack Ontology Viewer";const d=document.createElement("input");d.type="text",d.placeholder="Filter...",d.id="filter";const e=document.createElement("ul");e.id="ontology-list";const c=document.createElement("div");c.className="sidebar-footer",c.innerHTML='<a href="mailto:support@backpackontology.com">support@backpackontology.com</a><span>Feedback & support</span>',a.appendChild(t),a.appendChild(d),a.appendChild(e),a.appendChild(c);let b=[],f="";return d.addEventListener("input",()=>{const h=d.value.toLowerCase();for(const m of b){const i=m.dataset.name??"";m.style.display=i.includes(h)?"":"none"}}),{setSummaries(h){e.innerHTML="",b=h.map(m=>{const i=document.createElement("li");i.className="ontology-item",i.dataset.name=m.name;const y=document.createElement("span");y.className="name",y.textContent=m.name;const M=document.createElement("span");if(M.className="stats",M.textContent=`${m.nodeCount} nodes, ${m.edgeCount} edges`,i.appendChild(y),i.appendChild(M),o.onRename){const I=document.createElement("button");I.className="sidebar-edit-btn",I.textContent="✎",I.title="Rename";const _=o.onRename;I.addEventListener("click",u=>{u.stopPropagation();const v=document.createElement("input");v.type="text",v.className="sidebar-rename-input",v.value=m.name,y.textContent="",y.appendChild(v),I.style.display="none",v.focus(),v.select();const r=()=>{const E=v.value.trim();E&&E!==m.name?_(m.name,E):(y.textContent=m.name,I.style.display="")};v.addEventListener("blur",r),v.addEventListener("keydown",E=>{E.key==="Enter"&&v.blur(),E.key==="Escape"&&(v.value=m.name,v.blur())})}),i.appendChild(I)}return i.addEventListener("click",()=>o.onSelect(m.name)),e.appendChild(i),i}),f&&this.setActive(f)},setActive(h){f=h;for(const m of b)m.classList.toggle("active",m.dataset.name===h)}}}const ke=5e3,Ae=.005,Ee=150,me=.9,fe=.01,he=30,de=50;function Te(a,n){for(const o of Object.values(a))if(typeof o=="string")return o;return n}function Oe(a){const n=Math.sqrt(a.nodes.length)*Ee*.5,o=new Map,t=a.nodes.map((e,c)=>{const b=2*Math.PI*c/a.nodes.length,f={id:e.id,x:Math.cos(b)*n,y:Math.sin(b)*n,vx:0,vy:0,label:Te(e.properties,e.id),type:e.type};return o.set(e.id,f),f}),d=a.edges.map(e=>({sourceId:e.sourceId,targetId:e.targetId,type:e.type}));return{nodes:t,edges:d,nodeMap:o}}function De(a,n){const{nodes:o,edges:t,nodeMap:d}=a;for(let e=0;e<o.length;e++)for(let c=e+1;c<o.length;c++){const b=o[e],f=o[c];let h=f.x-b.x,m=f.y-b.y,i=Math.sqrt(h*h+m*m);i<he&&(i=he);const y=ke*n/(i*i),M=h/i*y,I=m/i*y;b.vx-=M,b.vy-=I,f.vx+=M,f.vy+=I}for(const e of t){const c=d.get(e.sourceId),b=d.get(e.targetId);if(!c||!b)continue;const f=b.x-c.x,h=b.y-c.y,m=Math.sqrt(f*f+h*h);if(m===0)continue;const i=Ae*(m-Ee)*n,y=f/m*i,M=h/m*i;c.vx+=y,c.vy+=M,b.vx-=y,b.vy-=M}for(const e of o)e.vx-=e.x*fe*n,e.vy-=e.y*fe*n;for(const e of o){e.vx*=me,e.vy*=me;const c=Math.sqrt(e.vx*e.vx+e.vy*e.vy);c>de&&(e.vx=e.vx/c*de,e.vy=e.vy/c*de),e.x+=e.vx,e.y+=e.vy}return n*.995}const ye=["#d4a27f","#c17856","#b07a5e","#d4956b","#a67c5a","#cc9e7c","#c4866a","#cb8e6c","#b8956e","#a88a70","#d9b08c","#c4a882","#e8b898","#b5927a","#a8886e","#d1a990"],ge=new Map;function ee(a){const n=ge.get(a);if(n)return n;let o=0;for(let d=0;d<a.length;d++)o=(o<<5)-o+a.charCodeAt(d)|0;const t=ye[Math.abs(o)%ye.length];return ge.set(a,t),t}function q(a){return getComputedStyle(document.documentElement).getPropertyValue(a).trim()}const Q=20,Pe=.001;function Be(a,n){const o=a.querySelector("canvas"),t=o.getContext("2d"),d=window.devicePixelRatio||1;let e={x:0,y:0,scale:1},c=null,b=1,f=0,h=new Set,m=null,i=null,y=null;const M=300;function I(){o.width=o.clientWidth*d,o.height=o.clientHeight*d,r()}const _=new ResizeObserver(I);_.observe(a),I();function u(s,l){return[s/e.scale+e.x,l/e.scale+e.y]}function v(s,l){if(!c)return null;const[p,x]=u(s,l);for(let C=c.nodes.length-1;C>=0;C--){const B=c.nodes[C],L=p-B.x,R=x-B.y;if(L*L+R*R<=Q*Q)return B}return null}function r(){if(!c){t.clearRect(0,0,o.width,o.height);return}const s=q("--canvas-edge"),l=q("--canvas-edge-highlight"),p=q("--canvas-edge-dim"),x=q("--canvas-edge-label"),C=q("--canvas-edge-label-highlight"),B=q("--canvas-edge-label-dim"),L=q("--canvas-arrow"),R=q("--canvas-arrow-highlight"),Y=q("--canvas-node-label"),k=q("--canvas-node-label-dim"),G=q("--canvas-type-badge"),ne=q("--canvas-type-badge-dim"),be=q("--canvas-selection-border"),Le=q("--canvas-node-border");t.save(),t.setTransform(d,0,0,d,0,0),t.clearRect(0,0,o.clientWidth,o.clientHeight),t.save(),t.translate(-e.x*e.scale,-e.y*e.scale),t.scale(e.scale,e.scale);for(const O of c.edges){const K=c.nodeMap.get(O.sourceId),V=c.nodeMap.get(O.targetId);if(!K||!V)continue;const ce=m===null||m.has(O.sourceId),oe=m===null||m.has(O.targetId),te=ce&&oe;if(m!==null&&!ce&&!oe)continue;const J=h.size>0&&(h.has(O.sourceId)||h.has(O.targetId))||m!==null&&te,ue=m!==null&&!te;if(O.sourceId===O.targetId){S(K,O.type,J,s,l,x,C);continue}t.beginPath(),t.moveTo(K.x,K.y),t.lineTo(V.x,V.y),t.strokeStyle=J?l:ue?p:s,t.lineWidth=J?2.5:1.5,t.stroke(),E(K.x,K.y,V.x,V.y,J,L,R);const we=(K.x+V.x)/2,Ne=(K.y+V.y)/2;t.fillStyle=J?C:ue?B:x,t.font="9px system-ui, sans-serif",t.textAlign="center",t.textBaseline="bottom",t.fillText(O.type,we,Ne-4)}for(const O of c.nodes){const K=ee(O.type),V=h.has(O.id),ce=h.size>0&&c.edges.some(J=>h.has(J.sourceId)&&J.targetId===O.id||h.has(J.targetId)&&J.sourceId===O.id),oe=m!==null&&!m.has(O.id),te=oe||h.size>0&&!V&&!ce;V&&(t.save(),t.shadowColor=K,t.shadowBlur=20,t.beginPath(),t.arc(O.x,O.y,Q+3,0,Math.PI*2),t.fillStyle=K,t.globalAlpha=.3,t.fill(),t.restore()),t.beginPath(),t.arc(O.x,O.y,Q,0,Math.PI*2),t.fillStyle=K,t.globalAlpha=oe?.1:te?.3:1,t.fill(),t.strokeStyle=V?be:Le,t.lineWidth=V?3:1.5,t.stroke();const pe=O.label.length>24?O.label.slice(0,22)+"...":O.label;t.fillStyle=te?k:Y,t.font="11px system-ui, sans-serif",t.textAlign="center",t.textBaseline="top",t.fillText(pe,O.x,O.y+Q+4),t.fillStyle=te?ne:G,t.font="9px system-ui, sans-serif",t.textBaseline="bottom",t.fillText(O.type,O.x,O.y-Q-3),t.globalAlpha=1}t.restore(),t.restore()}function E(s,l,p,x,C,B,L){const R=Math.atan2(x-l,p-s),Y=p-Math.cos(R)*Q,k=x-Math.sin(R)*Q,G=8;t.beginPath(),t.moveTo(Y,k),t.lineTo(Y-G*Math.cos(R-.4),k-G*Math.sin(R-.4)),t.lineTo(Y-G*Math.cos(R+.4),k-G*Math.sin(R+.4)),t.closePath(),t.fillStyle=C?L:B,t.fill()}function S(s,l,p,x,C,B,L){const R=s.x+Q+15,Y=s.y-Q-15;t.beginPath(),t.arc(R,Y,15,0,Math.PI*2),t.strokeStyle=p?C:x,t.lineWidth=p?2.5:1.5,t.stroke(),t.fillStyle=p?L:B,t.font="9px system-ui, sans-serif",t.textAlign="center",t.fillText(l,R,Y-18)}function D(){if(!i||!y)return;const s=performance.now()-y.time,l=Math.min(s/M,1),p=1-Math.pow(1-l,3);e.x=y.x+(i.x-y.x)*p,e.y=y.y+(i.y-y.y)*p,r(),l<1?requestAnimationFrame(D):(i=null,y=null)}function X(){!c||b<Pe||(b=De(c,b),r(),f=requestAnimationFrame(X))}let F=!1,j=!1,W=0,U=0;o.addEventListener("mousedown",s=>{F=!0,j=!1,W=s.clientX,U=s.clientY}),o.addEventListener("mousemove",s=>{if(!F)return;const l=s.clientX-W,p=s.clientY-U;(Math.abs(l)>2||Math.abs(p)>2)&&(j=!0),e.x-=l/e.scale,e.y-=p/e.scale,W=s.clientX,U=s.clientY,r()}),o.addEventListener("mouseup",s=>{if(F=!1,j)return;const l=o.getBoundingClientRect(),p=s.clientX-l.left,x=s.clientY-l.top,C=v(p,x),B=s.ctrlKey||s.metaKey;if(C){B?h.has(C.id)?h.delete(C.id):h.add(C.id):h.size===1&&h.has(C.id)?h.clear():(h.clear(),h.add(C.id));const L=[...h];n==null||n(L.length>0?L:null)}else h.clear(),n==null||n(null);r()}),o.addEventListener("mouseleave",()=>{F=!1}),o.addEventListener("wheel",s=>{s.preventDefault();const l=o.getBoundingClientRect(),p=s.clientX-l.left,x=s.clientY-l.top,[C,B]=u(p,x),L=s.ctrlKey?1-s.deltaY*.01:s.deltaY>0?.9:1.1;e.scale=Math.max(.05,Math.min(10,e.scale*L)),e.x=C-p/e.scale,e.y=B-x/e.scale,r()},{passive:!1});let z=[],T=0,P=1;o.addEventListener("touchstart",s=>{s.preventDefault(),z=Array.from(s.touches),z.length===2?(T=H(z[0],z[1]),P=e.scale):z.length===1&&(W=z[0].clientX,U=z[0].clientY)},{passive:!1}),o.addEventListener("touchmove",s=>{s.preventDefault();const l=Array.from(s.touches);if(l.length===2&&z.length===2){const x=H(l[0],l[1])/T;e.scale=Math.max(.05,Math.min(10,P*x)),r()}else if(l.length===1){const p=l[0].clientX-W,x=l[0].clientY-U;e.x-=p/e.scale,e.y-=x/e.scale,W=l[0].clientX,U=l[0].clientY,r()}z=l},{passive:!1});function H(s,l){const p=s.clientX-l.clientX,x=s.clientY-l.clientY;return Math.sqrt(p*p+x*x)}const $=document.createElement("div");$.className="zoom-controls";const w=document.createElement("button");w.className="zoom-btn",w.textContent="+",w.title="Zoom in",w.addEventListener("click",()=>{const s=o.clientWidth/2,l=o.clientHeight/2,[p,x]=u(s,l);e.scale=Math.min(10,e.scale*1.3),e.x=p-s/e.scale,e.y=x-l/e.scale,r()});const A=document.createElement("button");A.className="zoom-btn",A.textContent="−",A.title="Zoom out",A.addEventListener("click",()=>{const s=o.clientWidth/2,l=o.clientHeight/2,[p,x]=u(s,l);e.scale=Math.max(.05,e.scale/1.3),e.x=p-s/e.scale,e.y=x-l/e.scale,r()});const g=document.createElement("button");return g.className="zoom-btn",g.textContent="○",g.title="Reset zoom",g.addEventListener("click",()=>{if(c){if(e={x:0,y:0,scale:1},c.nodes.length>0){let s=1/0,l=1/0,p=-1/0,x=-1/0;for(const L of c.nodes)L.x<s&&(s=L.x),L.y<l&&(l=L.y),L.x>p&&(p=L.x),L.y>x&&(x=L.y);const C=(s+p)/2,B=(l+x)/2;e.x=C-o.clientWidth/2,e.y=B-o.clientHeight/2}r()}}),$.appendChild(w),$.appendChild(g),$.appendChild(A),a.appendChild($),{loadGraph(s){if(cancelAnimationFrame(f),c=Oe(s),b=1,h=new Set,m=null,e={x:0,y:0,scale:1},c.nodes.length>0){let l=1/0,p=1/0,x=-1/0,C=-1/0;for(const k of c.nodes)k.x<l&&(l=k.x),k.y<p&&(p=k.y),k.x>x&&(x=k.x),k.y>C&&(C=k.y);const B=(l+x)/2,L=(p+C)/2,R=o.clientWidth,Y=o.clientHeight;e.x=B-R/2,e.y=L-Y/2}X()},setFilteredNodeIds(s){m=s,r()},panToNode(s){if(!c)return;const l=c.nodeMap.get(s);if(!l)return;h=new Set([s]),n==null||n([s]);const p=o.clientWidth,x=o.clientHeight;y={x:e.x,y:e.y,time:performance.now()},i={x:l.x-p/(2*e.scale),y:l.y-x/(2*e.scale)},D()},destroy(){cancelAnimationFrame(f),_.disconnect()}}}function se(a){for(const n of Object.values(a.properties))if(typeof n=="string")return n;return a.id}const Re="✎";function ze(a,n,o){const t=document.createElement("div");t.id="info-panel",t.className="info-panel hidden",a.appendChild(t);let d=!1,e=[],c=-1,b=!1,f=null;function h(){t.classList.add("hidden"),t.classList.remove("info-panel-maximized"),t.innerHTML="",d=!1,e=[],c=-1}function m(u){!f||!o||(c<e.length-1&&(e=e.slice(0,c+1)),e.push(u),c=e.length-1,b=!0,o(u),b=!1)}function i(){c<=0||!f||!o||(c--,b=!0,o(e[c]),b=!1)}function y(){c>=e.length-1||!f||!o||(c++,b=!0,o(e[c]),b=!1)}function M(){const u=document.createElement("div");u.className="info-panel-toolbar";const v=document.createElement("button");v.className="info-toolbar-btn",v.textContent="←",v.title="Back",v.disabled=c<=0,v.addEventListener("click",i),u.appendChild(v);const r=document.createElement("button");r.className="info-toolbar-btn",r.textContent="→",r.title="Forward",r.disabled=c>=e.length-1,r.addEventListener("click",y),u.appendChild(r);const E=document.createElement("button");E.className="info-toolbar-btn",E.textContent=d?"⎘":"⛶",E.title=d?"Restore":"Maximize",E.addEventListener("click",()=>{d=!d,t.classList.toggle("info-panel-maximized",d),E.textContent=d?"⎘":"⛶",E.title=d?"Restore":"Maximize"}),u.appendChild(E);const S=document.createElement("button");return S.className="info-toolbar-btn info-close-btn",S.textContent="×",S.title="Close",S.addEventListener("click",h),u.appendChild(S),u}function I(u,v){const r=v.nodes.find(w=>w.id===u);if(!r)return;const E=v.edges.filter(w=>w.sourceId===u||w.targetId===u);t.innerHTML="",t.classList.remove("hidden"),d&&t.classList.add("info-panel-maximized"),t.appendChild(M());const S=document.createElement("div");S.className="info-header";const D=document.createElement("span");if(D.className="info-type-badge",D.textContent=r.type,D.style.backgroundColor=ee(r.type),n){D.classList.add("info-editable");const w=document.createElement("button");w.className="info-inline-edit",w.textContent=Re,w.addEventListener("click",A=>{A.stopPropagation();const g=document.createElement("input");g.type="text",g.className="info-edit-inline-input",g.value=r.type,D.textContent="",D.appendChild(g),g.focus(),g.select();const s=()=>{const l=g.value.trim();l&&l!==r.type?n.onChangeNodeType(u,l):(D.textContent=r.type,D.appendChild(w))};g.addEventListener("blur",s),g.addEventListener("keydown",l=>{l.key==="Enter"&&g.blur(),l.key==="Escape"&&(g.value=r.type,g.blur())})}),D.appendChild(w)}const X=document.createElement("h3");X.className="info-label",X.textContent=se(r);const F=document.createElement("span");F.className="info-id",F.textContent=r.id,S.appendChild(D),S.appendChild(X),S.appendChild(F),t.appendChild(S);const j=Object.keys(r.properties),W=ae("Properties");if(j.length>0){const w=document.createElement("dl");w.className="info-props";for(const A of j){const g=document.createElement("dt");g.textContent=A;const s=document.createElement("dd");if(n){const l=re(r.properties[A]),p=document.createElement("input");p.type="text",p.className="info-edit-input",p.value=l,p.addEventListener("keydown",C=>{C.key==="Enter"&&p.blur()}),p.addEventListener("blur",()=>{const C=p.value;C!==l&&n.onUpdateNode(u,{[A]:$e(C)})}),s.appendChild(p);const x=document.createElement("button");x.className="info-delete-prop",x.textContent="×",x.title=`Remove ${A}`,x.addEventListener("click",()=>{const C={...r.properties};delete C[A],n.onUpdateNode(u,C)}),s.appendChild(x)}else s.appendChild(He(r.properties[A]));w.appendChild(g),w.appendChild(s)}W.appendChild(w)}if(n){const w=document.createElement("button");w.className="info-add-btn",w.textContent="+ Add property",w.addEventListener("click",()=>{const A=document.createElement("div");A.className="info-add-row";const g=document.createElement("input");g.type="text",g.className="info-edit-input",g.placeholder="key";const s=document.createElement("input");s.type="text",s.className="info-edit-input",s.placeholder="value";const l=document.createElement("button");l.className="info-add-save",l.textContent="Add",l.addEventListener("click",()=>{g.value&&n.onAddProperty(u,g.value,s.value)}),A.appendChild(g),A.appendChild(s),A.appendChild(l),W.appendChild(A),g.focus()}),W.appendChild(w)}if(t.appendChild(W),E.length>0){const w=ae(`Connections (${E.length})`),A=document.createElement("ul");A.className="info-connections";for(const g of E){const s=g.sourceId===u,l=s?g.targetId:g.sourceId,p=v.nodes.find(k=>k.id===l),x=p?se(p):l,C=document.createElement("li");if(C.className="info-connection",o&&p&&(C.classList.add("info-connection-link"),C.addEventListener("click",k=>{k.target.closest(".info-delete-edge")||m(l)})),p){const k=document.createElement("span");k.className="info-target-dot",k.style.backgroundColor=ee(p.type),C.appendChild(k)}const B=document.createElement("span");B.className="info-arrow",B.textContent=s?"→":"←";const L=document.createElement("span");L.className="info-edge-type",L.textContent=g.type;const R=document.createElement("span");R.className="info-target",R.textContent=x,C.appendChild(B),C.appendChild(L),C.appendChild(R);const Y=Object.keys(g.properties);if(Y.length>0){const k=document.createElement("div");k.className="info-edge-props";for(const G of Y){const ne=document.createElement("span");ne.className="info-edge-prop",ne.textContent=`${G}: ${re(g.properties[G])}`,k.appendChild(ne)}C.appendChild(k)}if(n){const k=document.createElement("button");k.className="info-delete-edge",k.textContent="×",k.title="Remove connection",k.addEventListener("click",G=>{G.stopPropagation(),n.onDeleteEdge(g.id)}),C.appendChild(k)}A.appendChild(C)}w.appendChild(A),t.appendChild(w)}const U=ae("Timestamps"),z=document.createElement("dl");z.className="info-props";const T=document.createElement("dt");T.textContent="created";const P=document.createElement("dd");P.textContent=Ce(r.createdAt);const H=document.createElement("dt");H.textContent="updated";const $=document.createElement("dd");if($.textContent=Ce(r.updatedAt),z.appendChild(T),z.appendChild(P),z.appendChild(H),z.appendChild($),U.appendChild(z),t.appendChild(U),n){const w=document.createElement("div");w.className="info-section info-danger";const A=document.createElement("button");A.className="info-delete-node",A.textContent="Delete node",A.addEventListener("click",()=>{n.onDeleteNode(u),h()}),w.appendChild(A),t.appendChild(w)}}function _(u,v){const r=new Set(u),E=v.nodes.filter(T=>r.has(T.id));if(E.length===0)return;const S=v.edges.filter(T=>r.has(T.sourceId)&&r.has(T.targetId));t.innerHTML="",t.classList.remove("hidden"),d&&t.classList.add("info-panel-maximized"),t.appendChild(M());const D=document.createElement("div");D.className="info-header";const X=document.createElement("h3");X.className="info-label",X.textContent=`${E.length} nodes selected`,D.appendChild(X);const F=document.createElement("div");F.style.cssText="display:flex;flex-wrap:wrap;gap:4px;margin-top:6px";const j=new Map;for(const T of E)j.set(T.type,(j.get(T.type)??0)+1);for(const[T,P]of j){const H=document.createElement("span");H.className="info-type-badge",H.style.backgroundColor=ee(T),H.textContent=P>1?`${T} (${P})`:T,F.appendChild(H)}D.appendChild(F),t.appendChild(D);const W=ae("Selected Nodes"),U=document.createElement("ul");U.className="info-connections";for(const T of E){const P=document.createElement("li");P.className="info-connection",o&&(P.classList.add("info-connection-link"),P.addEventListener("click",()=>{m(T.id)}));const H=document.createElement("span");H.className="info-target-dot",H.style.backgroundColor=ee(T.type);const $=document.createElement("span");$.className="info-target",$.textContent=se(T);const w=document.createElement("span");w.className="info-edge-type",w.textContent=T.type,P.appendChild(H),P.appendChild($),P.appendChild(w),U.appendChild(P)}W.appendChild(U),t.appendChild(W);const z=ae(S.length>0?`Connections Between Selected (${S.length})`:"Connections Between Selected");if(S.length===0){const T=document.createElement("p");T.style.cssText="font-size:12px;color:var(--text-dim)",T.textContent="No direct connections between selected nodes",z.appendChild(T)}else{const T=document.createElement("ul");T.className="info-connections";for(const P of S){const H=v.nodes.find(L=>L.id===P.sourceId),$=v.nodes.find(L=>L.id===P.targetId),w=H?se(H):P.sourceId,A=$?se($):P.targetId,g=document.createElement("li");if(g.className="info-connection",H){const L=document.createElement("span");L.className="info-target-dot",L.style.backgroundColor=ee(H.type),g.appendChild(L)}const s=document.createElement("span");s.className="info-target",s.textContent=w;const l=document.createElement("span");l.className="info-arrow",l.textContent="→";const p=document.createElement("span");p.className="info-edge-type",p.textContent=P.type;const x=document.createElement("span");if(x.className="info-arrow",x.textContent="→",g.appendChild(s),g.appendChild(l),g.appendChild(p),g.appendChild(x),$){const L=document.createElement("span");L.className="info-target-dot",L.style.backgroundColor=ee($.type),g.appendChild(L)}const C=document.createElement("span");C.className="info-target",C.textContent=A,g.appendChild(C);const B=Object.keys(P.properties);if(B.length>0){const L=document.createElement("div");L.className="info-edge-props";for(const R of B){const Y=document.createElement("span");Y.className="info-edge-prop",Y.textContent=`${R}: ${re(P.properties[R])}`,L.appendChild(Y)}g.appendChild(L)}T.appendChild(g)}z.appendChild(T)}t.appendChild(z)}return{show(u,v){if(f=v,u.length===1&&!b){const r=u[0];e[c]!==r&&(c<e.length-1&&(e=e.slice(0,c+1)),e.push(r),c=e.length-1)}u.length===1?I(u[0],v):u.length>1&&_(u,v)},hide:h,get visible(){return!t.classList.contains("hidden")}}}function ae(a){const n=document.createElement("div");n.className="info-section";const o=document.createElement("h4");return o.className="info-section-title",o.textContent=a,n.appendChild(o),n}function He(a){if(Array.isArray(a)){const o=document.createElement("div");o.className="info-array";for(const t of a){const d=document.createElement("span");d.className="info-tag",d.textContent=String(t),o.appendChild(d)}return o}if(a!==null&&typeof a=="object"){const o=document.createElement("pre");return o.className="info-json",o.textContent=JSON.stringify(a,null,2),o}const n=document.createElement("span");return n.className="info-value",n.textContent=String(a??""),n}function re(a){return Array.isArray(a)?a.map(String).join(", "):a!==null&&typeof a=="object"?JSON.stringify(a):String(a??"")}function $e(a){const n=a.trim();if(n==="true")return!0;if(n==="false")return!1;if(n!==""&&!isNaN(Number(n)))return Number(n);if(n.startsWith("[")&&n.endsWith("]")||n.startsWith("{")&&n.endsWith("}"))try{return JSON.parse(n)}catch{return a}return a}function Ce(a){try{return new Date(a).toLocaleString()}catch{return a}}function ve(a){for(const n of Object.values(a.properties))if(typeof n=="string")return n;return a.id}function xe(a,n){const o=n.toLowerCase();if(ve(a).toLowerCase().includes(o)||a.type.toLowerCase().includes(o))return!0;for(const t of Object.values(a.properties))if(typeof t=="string"&&t.toLowerCase().includes(o))return!0;return!1}function Ye(a){let n=null,o=null,t=null,d=new Set,e=null;const c=document.createElement("div");c.className="search-overlay hidden";const b=document.createElement("div");b.className="search-input-wrap";const f=document.createElement("input");f.className="search-input",f.type="text",f.placeholder="Search nodes...",f.setAttribute("autocomplete","off"),f.setAttribute("spellcheck","false");const h=document.createElement("kbd");h.className="search-kbd",h.textContent="/",b.appendChild(f),b.appendChild(h);const m=document.createElement("ul");m.className="search-results hidden";const i=document.createElement("div");i.className="type-chips",c.appendChild(b),c.appendChild(m),c.appendChild(i),a.appendChild(c);function y(){if(i.innerHTML="",!n)return;const u=new Map;for(const r of n.nodes)u.set(r.type,(u.get(r.type)??0)+1);const v=[...u.keys()].sort();d=new Set;for(const r of v){const E=document.createElement("button");E.className="type-chip",E.dataset.type=r;const S=document.createElement("span");S.className="type-chip-dot",S.style.backgroundColor=ee(r);const D=document.createElement("span");D.textContent=`${r} (${u.get(r)})`,E.appendChild(S),E.appendChild(D),E.addEventListener("click",()=>{d.has(r)?(d.delete(r),E.classList.remove("active")):(d.add(r),E.classList.add("active")),I()}),i.appendChild(E)}}function M(){if(!n)return null;const u=f.value.trim(),v=d.size===0,r=u.length===0;if(r&&v)return null;const E=new Set;for(const S of n.nodes)!v&&!d.has(S.type)||(r||xe(S,u))&&E.add(S.id);return E}function I(){const u=M();o==null||o(u),_()}function _(){m.innerHTML="";const u=f.value.trim();if(!n||u.length===0){m.classList.add("hidden");return}const v=d.size===0,r=[];for(const E of n.nodes)if(!(!v&&!d.has(E.type))&&xe(E,u)&&(r.push(E),r.length>=8))break;if(r.length===0){m.classList.add("hidden");return}for(const E of r){const S=document.createElement("li");S.className="search-result-item";const D=document.createElement("span");D.className="search-result-dot",D.style.backgroundColor=ee(E.type);const X=document.createElement("span");X.className="search-result-label";const F=ve(E);X.textContent=F.length>36?F.slice(0,34)+"...":F;const j=document.createElement("span");j.className="search-result-type",j.textContent=E.type,S.appendChild(D),S.appendChild(X),S.appendChild(j),S.addEventListener("click",()=>{t==null||t(E.id),f.value="",m.classList.add("hidden"),I()}),m.appendChild(S)}m.classList.remove("hidden")}return f.addEventListener("input",()=>{e&&clearTimeout(e),e=setTimeout(I,150)}),f.addEventListener("keydown",u=>{if(u.key==="Escape")f.value="",f.blur(),m.classList.add("hidden"),I();else if(u.key==="Enter"){const v=m.querySelector(".search-result-item");v==null||v.click()}}),document.addEventListener("click",u=>{c.contains(u.target)||m.classList.add("hidden")}),f.addEventListener("focus",()=>h.classList.add("hidden")),f.addEventListener("blur",()=>{f.value.length===0&&h.classList.remove("hidden")}),{setOntologyData(u){n=u,f.value="",m.classList.add("hidden"),n&&n.nodes.length>0?(c.classList.remove("hidden"),y()):c.classList.add("hidden")},onFilterChange(u){o=u},onNodeSelect(u){t=u},clear(){f.value="",m.classList.add("hidden"),d.clear(),o==null||o(null)},focus(){f.focus()}}}let Z="",N=null;async function Fe(){const a=document.getElementById("canvas-container"),n=window.matchMedia("(prefers-color-scheme: dark)"),t=localStorage.getItem("backpack-theme")??(n.matches?"dark":"light");document.documentElement.setAttribute("data-theme",t);const d=document.createElement("button");d.className="theme-toggle",d.textContent=t==="light"?"☾":"☼",d.title="Toggle light/dark mode",d.addEventListener("click",()=>{const y=document.documentElement.getAttribute("data-theme")==="light"?"dark":"light";document.documentElement.setAttribute("data-theme",y),localStorage.setItem("backpack-theme",y),d.textContent=y==="light"?"☾":"☼"}),a.appendChild(d);async function e(){if(!Z||!N)return;N.metadata.updatedAt=new Date().toISOString(),await Se(Z,N),c.loadGraph(N),f.setOntologyData(N);const i=await ie();h.setSummaries(i)}let c;const b=ze(a,{onUpdateNode(i,y){if(!N)return;const M=N.nodes.find(I=>I.id===i);M&&(M.properties={...M.properties,...y},M.updatedAt=new Date().toISOString(),e().then(()=>b.show([i],N)))},onChangeNodeType(i,y){if(!N)return;const M=N.nodes.find(I=>I.id===i);M&&(M.type=y,M.updatedAt=new Date().toISOString(),e().then(()=>b.show([i],N)))},onDeleteNode(i){N&&(N.nodes=N.nodes.filter(y=>y.id!==i),N.edges=N.edges.filter(y=>y.sourceId!==i&&y.targetId!==i),e())},onDeleteEdge(i){var M;if(!N)return;const y=(M=N.edges.find(I=>I.id===i))==null?void 0:M.sourceId;N.edges=N.edges.filter(I=>I.id!==i),e().then(()=>{y&&N&&b.show([y],N)})},onAddProperty(i,y,M){if(!N)return;const I=N.nodes.find(_=>_.id===i);I&&(I.properties[y]=M,I.updatedAt=new Date().toISOString(),e().then(()=>b.show([i],N)))}},i=>{c.panToNode(i)});c=Be(a,i=>{i&&i.length>0&&N?b.show(i,N):b.hide()});const f=Ye(a);f.onFilterChange(i=>{c.setFilteredNodeIds(i)}),f.onNodeSelect(i=>{c.panToNode(i),N&&b.show([i],N)});const h=Ie(document.getElementById("sidebar"),{onSelect:async i=>{Z=i,h.setActive(i),b.hide(),f.clear(),N=await le(i),c.loadGraph(N),f.setOntologyData(N)},onRename:async(i,y)=>{await Me(i,y),Z===i&&(Z=y);const M=await ie();h.setSummaries(M),h.setActive(Z),Z===y&&(N=await le(y),c.loadGraph(N),f.setOntologyData(N))}}),m=await ie();h.setSummaries(m),m.length>0&&(Z=m[0].name,h.setActive(Z),N=await le(Z),c.loadGraph(N),f.setOntologyData(N)),document.addEventListener("keydown",i=>{i.target instanceof HTMLInputElement||i.target instanceof HTMLTextAreaElement||(i.key==="/"||i.key==="k"&&(i.metaKey||i.ctrlKey))&&(i.preventDefault(),f.focus())})}Fe();