(async () => { /* ---------- CONFIG — edit these four ---------- */ const API = 'https://api.baserow.io'; // self-hosted? use your host const TOKEN = 'Jn23CcEikRdcGtkFeMuAaO35maLOAIuD'; // Settings -> Database tokens const NODES_TABLE = 1065417; // FlowNodes table ID const EDGES_TABLE = 1065417; // FlowEdges table ID const TEAM = ['Ravi Shah','Priya Anand','Tom Fletcher','Sara Boyd','Dr. Kwame Osei']; /* fields shown in the inspector, per node type */ const SCHEMA = { machine: [ { k:'cycle', label:'Cycle time (min)' }, { k:'setup', label:'Setup / changeover (min)' }, { k:'availability', label:'Availability (%)' }, ], buffer: [ { k:'capacity', label:'Capacity (units)' }, { k:'reorder', label:'Reorder point (units)' }, ], }; /* ---------- imports (React 18 pinned so React Flow shares it) ---------- */ const React = (await import('https://esm.sh/react@18.3.1')).default; const { createRoot } = await import('https://esm.sh/react-dom@18.3.1/client'); const XY = await import('https://esm.sh/@xyflow/react@12?deps=react@18.3.1,react-dom@18.3.1'); const htm = (await import('https://esm.sh/htm@3.1.1')).default; const html = htm.bind(React.createElement); const { useState, useEffect, useCallback } = React; const { ReactFlow, ReactFlowProvider, useReactFlow, Background, Controls, MiniMap, Panel, Handle, Position, useNodesState, useEdgesState, addEdge, } = XY; /* ---------- React Flow stylesheet + our own styles ---------- */ if (!document.getElementById('rf-style')) { const link = document.createElement('link'); link.id = 'rf-style'; link.rel = 'stylesheet'; link.href = 'https://cdn.jsdelivr.net/npm/@xyflow/react@12/dist/style.css'; document.head.appendChild(link); } if (!document.getElementById('rf-node-style')) { const s = document.createElement('style'); s.id = 'rf-node-style'; s.textContent = ` .rf-root{display:flex;height:100%;width:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1f2328} .rf-canvas{flex:1;height:100%;position:relative} .rf-inspector{width:300px;height:100%;border-left:1px solid #e2e2df;background:#fafaf8;padding:16px;overflow:auto;box-sizing:border-box} .rf-palette{display:flex;gap:8px} .rf-chip{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#fff;border:1px solid #d9d9d4;border-radius:8px;font-size:12px;font-weight:500;cursor:grab;box-shadow:0 1px 2px rgba(0,0,0,.05);user-select:none} .rf-chip:active{cursor:grabbing} .node-card{min-width:150px;background:#fff;border:1px solid #d9d9d4;border-radius:10px;padding:8px 10px;box-shadow:0 1px 3px rgba(0,0,0,.08);border-left-width:4px} .node-card.machine{border-left-color:#B87C00} .node-card.buffer{border-left-color:#3C7A5A} .node-card.sel{border-color:#111;box-shadow:0 0 0 2px rgba(0,0,0,.15)} .nc-head{display:flex;align-items:center;gap:7px} .nc-ico{color:#555;display:flex} .nc-label{font-size:13px;font-weight:600} .nc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-size:10.5px;color:#777;gap:8px} .nc-who{flex:none;width:20px;height:20px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#444} .rf-field{margin:10px 0} .rf-field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#888;margin-bottom:3px} .rf-field input,.rf-field select,.rf-field textarea{width:100%;box-sizing:border-box;font-size:13px;padding:7px 8px;border:1px solid #d9d9d4;border-radius:6px;background:#fff} .rf-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:20px} .rf-badge.machine{background:#f6ecd6;color:#8a5a00} .rf-badge.buffer{background:#e2efe7;color:#2c5b42} .rf-row{display:flex;gap:8px;margin-top:14px;align-items:center} .rf-btn{font-size:13px;font-weight:600;padding:8px 12px;border-radius:7px;border:none;cursor:pointer} .rf-btn.save{background:#111;color:#fff} .rf-btn.del{background:none;color:#b4472e;border:1px solid #e3c3ba} .rf-empty{color:#999;font-size:13px;margin-top:24px;line-height:1.55} .rf-saved{font-size:11px;color:#3C7A5A;margin-left:4px} `; document.head.appendChild(s); } /* ---------- tiny REST helpers ---------- */ const hdr = { Authorization:`Token ${TOKEN}`, 'Content-Type':'application/json' }; const url = (t, id) => `${API}/api/database/rows/table/${t}/${id?id+'/':''}?user_field_names=true`; const apiList = async (t) => (await (await fetch(url(t), {headers:hdr})).json()).results || []; const apiCreate = async (t, b) => (await fetch(url(t), {method:'POST', headers:hdr, body:JSON.stringify(b)})).json(); const apiPatch = async (t,id,b) => fetch(url(t,id), {method:'PATCH', headers:hdr, body:JSON.stringify(b)}); const apiDelete = async (t,id) => fetch(url(t,id), {method:'DELETE',headers:hdr}); const initials = (n) => n ? n.split(' ').map(x=>x[0]).slice(0,2).join('').toUpperCase() : '–'; /* ---------- icons ---------- */ const MachineIcon = () => html``; const BufferIcon = () => html``; /* ---------- custom node (stable module-scope component) ---------- */ function Card(props){ const d = props.data, t = d.type; const Icon = t === 'machine' ? MachineIcon : BufferIcon; const summary = t === 'machine' ? (d.fields.cycle ? `${d.fields.cycle} min cycle` : 'cycle time not set') : (d.fields.capacity ? `cap ${d.fields.capacity}` : 'capacity not set'); return html`

<${Handle} type="target" position=${Position.Left} />

<${Icon}/>${d.label}

${summary} ${initials(d.assignee)}

<${Handle} type="source" position=${Position.Right} />

`; } const nodeTypes = { machine: Card, buffer: Card }; /* ---------- canvas ---------- */ function Canvas(){ const [nodes, setNodes, onNodesChange] = useNodesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]); const [selId, setSelId] = useState(null); const [saved, setSaved] = useState(false); const rf = useReactFlow(); /* load from Baserow once */ useEffect(() => { (async () => { try { const [nRows, eRows] = await Promise.all([apiList(NODES_TABLE), apiList(EDGES_TABLE)]); setNodes(nRows.map(r => ({ id: String(r.id), type: (r.Type || 'machine'), position: { x: Number(r.PosX)||0, y: Number(r.PosY)||0 }, data: { label: r.Label || 'Untitled', type: (r.Type||'machine'), assignee: r.Assignee || '', fields: safeJSON(r.Data) }, }))); setEdges(eRows.map(r => ({ id:String(r.id), source:String(r.Source), target:String(r.Target) }))); } catch (e) { console.error('Baserow load failed', e); } })(); }, []); const flash = () => { setSaved(true); setTimeout(()=>setSaved(false), 1200); }; /* palette drag -> drop creates + persists a node */ const onDragOver = useCallback((e)=>{ e.preventDefault(); e.dataTransfer.dropEffect='move'; }, []); const onDrop = useCallback(async (e) => { e.preventDefault(); const type = e.dataTransfer.getData('application/reactflow'); if (!type) return; const position = rf.screenToFlowPosition({ x:e.clientX, y:e.clientY }); const label = type === 'machine' ? 'New machine' : 'New buffer'; try { const row = await apiCreate(NODES_TABLE, { Label:label, Type:type, PosX:Math.round(position.x), PosY:Math.round(position.y), Assignee:'', Data:'{}', }); const id = String(row.id); setNodes(nds => nds.concat({ id, type, position, data:{ label, type, assignee:'', fields:{} } })); setSelId(id); } catch (err) { console.error('create node failed', err); } }, [rf, setNodes]); /* persist position after a drag */ const onNodeDragStop = useCallback((_e, node) => { apiPatch(NODES_TABLE, node.id, { PosX:Math.round(node.position.x), PosY:Math.round(node.position.y) }); }, []); /* persist a new connection */ const onConnect = useCallback(async (params) => { try { const row = await apiCreate(EDGES_TABLE, { Source:params.source, Target:params.target }); setEdges(eds => addEdge({ ...params, id:String(row.id) }, eds)); } catch (err) { console.error('create edge failed', err); } }, [setEdges]); /* live edits (update canvas immediately; DB write on Save) */ const patchData = (id, patch) => setNodes(nds => nds.map(n => n.id===id ? { ...n, data:{ ...n.data, ...patch } } : n)); const patchField = (id, k, v) => setNodes(nds => nds.map(n => n.id===id ? { ...n, data:{ ...n.data, fields:{ ...n.data.fields, [k]:v } } } : n)); const saveNode = async (id) => { const n = nodes.find(x => x.id===id); if (!n) return; try { await apiPatch(NODES_TABLE, id, { Label:n.data.label, Assignee:n.data.assignee, Data:JSON.stringify(n.data.fields||{}), }); flash(); } catch (err) { console.error('save failed', err); } }; const deleteNode = async (id) => { try { await apiDelete(NODES_TABLE, id); const dead = edges.filter(e => e.source===id || e.target===id); await Promise.all(dead.map(e => apiDelete(EDGES_TABLE, e.id))); setEdges(eds => eds.filter(e => e.source!==id && e.target!==id)); setNodes(nds => nds.filter(n => n.id!==id)); setSelId(null); } catch (err) { console.error('delete failed', err); } }; const sel = nodes.find(n => n.id === selId); return html`

<${ReactFlow} nodes=${nodes} edges=${edges} nodeTypes=${nodeTypes} onNodesChange=${onNodesChange} onEdgesChange=${onEdgesChange} onConnect=${onConnect} onNodeDragStop=${onNodeDragStop} onNodeClick=${(_e,n)=>setSelId(n.id)} onPaneClick=${()=>setSelId(null)} deleteKeyCode=${null} fitView> <${Background} /> <${Controls} /> <${MiniMap} pannable zoomable /> <${Panel} position="top-left">

{e.dataTransfer.setData('application/reactflow','machine');e.dataTransfer.effectAllowed='move';}}> <${MachineIcon}/> Machine

{e.dataTransfer.setData('application/reactflow','buffer');e.dataTransfer.effectAllowed='move';}}> <${BufferIcon}/> Buffer

${sel ? html` ${sel.data.type}

Name patchData(sel.id,{label:e.target.value})}/>

${SCHEMA[sel.data.type].map(f => html`

${f.label} patchField(sel.id,f.k,e.target.value)}/>

`)}

Assigned to

${saved ? html`✓ saved` : ''}

` : html`

Drag a Machine or Buffer from the palette onto the canvas.

Drag from a node's right edge to another node's left edge to connect them.

Click a node to edit its fields and assign someone here.

`; } function safeJSON(s){ try { return s ? JSON.parse(s) : {}; } catch { return {}; } } function App(){ return html`<${ReactFlowProvider}><${Canvas}/>`; } /* ---------- mount into the Column with class reactflow-slot ---------- */ function mountInto(slot){ if (slot.__rfRoot && slot.querySelector('.rf-root')) return; if (slot.__rfRoot) { try { slot.__rfRoot.unmount(); } catch(e){} } const c = document.createElement('div'); c.className = 'rf-root-host'; c.style.width = '100%'; c.style.height = '100%'; slot.innerHTML = ''; slot.appendChild(c); const root = createRoot(c); root.render(React.createElement(App)); slot.__rfRoot = root; } const scan = () => document.querySelectorAll('.reactflow-slot').forEach(mountInto); scan(); let queued = false; new MutationObserver(() => { if (queued) return; queued = true; requestAnimationFrame(() => { queued = false; scan(); }); }).observe(document.body, { childList:true, subtree:true }); })();