34:null 35:["$","title",null,{"children":"Arc diagram as UI for navigating workflow dependencies | Ross Mills | Observable"}] 3b:T15c4,{ const container = html`

`; const nodeContainer = html`

`; const detailContainer = html`

`; const nodeDivElements = {}; const marginLeft = 100; let selectedNode = null; function detailTemplate(detailData) { const { name, status, data } = detailData; return html`

${name}

${status}

This is the detail for the ${name} Task

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

` } // For example function getDetail(id) { const templates = { 'Receive RFQ': detailTemplate({name: 'Receive RFQ', status: 'DONE'}), 'Add initial data': detailTemplate({name: 'Add initial data', status: 'IN PROGRESS'}) }; return templates[id] || detailTemplate({name: id, status: 'NOT STARTED'}); } function renderDetail(id) { const detailElement = getDetail(id); detailContainer.innerHTML = ''; if (detailElement) { detailContainer.appendChild(detailElement); } } for (let node of data.nodes) { function selectNode() { for (let key of Object.keys(nodeDivElements)) { if (key !== node) { nodeDivElements[key].classList.remove('selected'); } else { nodeDivElements[node].classList.add('selected'); selectedNode = node; renderDetail(node); } } updateLinks(); } const newEl = html`

${node}

`; newEl.addEventListener('click', selectNode); invalidation.then(() => newEl.removeEventListener('click', selectNode)); nodeDivElements[node] = newEl; } for (let el of Object.values(nodeDivElements)) { nodeContainer.appendChild(el); } const style = html` `; container.appendChild(style); container.appendChild(nodeContainer); container.appendChild(detailContainer); // render nodeDivs first, so we can calculate positions based on the rendered HTML yield container; const height = document.getElementById('node-container').offsetHeight; const svgLayer = html`