// Tines Workflow Capability Matrix — local interactive rebuild. // Loads /api/matrix + /api/meta, renders columns, wires Venn / search / category // filters, draws connection lines from the Venn to each card, and persists // "already built" selections in localStorage. const $ = (sel, root = document) => root.querySelector(sel); const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel)); const STORE_KEY = 'tines-matrix:built-v1'; const slug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, ''); // --- Team classification --------------------------------------------------- // Cards' `team` chip text is one of "Security", "IT", "Security & IT", or null. // The Venn has three bubbles: Security, IT operations, Other. // Mapping: // "Security" → security only // "IT" → it only // "Security & IT" → both security AND it // null → other const teamFlags = (team) => { if (team === 'Security') return { security: true, it: false, other: false }; if (team === 'IT') return { security: false, it: true, other: false }; if (team === 'Security & IT') return { security: true, it: true, other: false }; return { security: false, it: false, other: true }; }; // --- State ----------------------------------------------------------------- const state = { matrix: null, meta: null, builtSet: new Set(), search: '', team: null, // 'security' | 'it' | 'other' | null (no team filter) category: null, // category name | null (= all) linesOn: true, zoom: 1, }; // --- Boot ------------------------------------------------------------------ (async function boot() { const [matrix, meta] = await Promise.all([ fetch('/api/matrix').then((r) => r.json()), fetch('/api/meta').then((r) => r.json()), ]); state.matrix = matrix; state.meta = meta; loadBuilt(); renderCategoryMenu(); renderColumns(); applyFilters(); computeTeamCounts(); drawConnections(); wireUi(); // Recompute lines after fonts settle if (document.fonts && document.fonts.ready) { document.fonts.ready.then(() => drawConnections()); } })(); // --- Persistence ------------------------------------------------------------ function loadBuilt() { try { const raw = localStorage.getItem(STORE_KEY); if (raw) state.builtSet = new Set(JSON.parse(raw)); } catch {} } function saveBuilt() { localStorage.setItem(STORE_KEY, JSON.stringify([...state.builtSet])); $('#builtCount').textContent = state.builtSet.size; $('#selectionLine').hidden = state.builtSet.size === 0; } // --- Render: category menu -------------------------------------------------- function renderCategoryMenu() { const menu = $('#categoryMenu'); menu.innerHTML = ''; const all = document.createElement('li'); all.dataset.value = ''; all.setAttribute('role', 'option'); all.innerHTML = `All 14 capabilities${totalCapCount()}`; menu.appendChild(all); for (const col of state.matrix.columns) { const li = document.createElement('li'); li.dataset.value = col.category; li.setAttribute('role', 'option'); li.innerHTML = ` ${col.category} ${col.areaCount} `; menu.appendChild(li); } menu.addEventListener('click', (e) => { const li = e.target.closest('li'); if (!li) return; state.category = li.dataset.value || null; $('#categoryBtnLabel').textContent = state.category || 'All 14 capabilities'; closeCategoryMenu(); applyFilters(); }); } function totalCapCount() { return state.matrix.columns.reduce((n, c) => n + c.areas.reduce((m, a) => m + a.capabilities.length, 0), 0); } // --- Render: columns + cards ----------------------------------------------- function renderColumns() { const canvas = $('#canvas'); canvas.innerHTML = ''; for (const col of state.matrix.columns) { const colKey = slug(col.category); const cssVar = `var(--col-${colKey})`; const colEl = document.createElement('div'); colEl.className = 'column'; colEl.dataset.category = col.category; colEl.dataset.colkey = colKey; colEl.style.setProperty('--col', cssVar); colEl.innerHTML = `

${escapeHtml(col.category)}

${col.areaCount} areas

`; for (const area of col.areas) { const subjob = document.createElement('div'); subjob.className = 'subjob'; if (area.name && area.name !== '(uncategorized)') { const lbl = document.createElement('div'); lbl.className = 'subjob-label'; lbl.textContent = area.name; subjob.appendChild(lbl); } for (const cap of area.capabilities) { const flags = teamFlags(cap.team); const card = document.createElement('div'); card.className = 'card'; card.dataset.slug = cap.slug || ''; card.dataset.name = (cap.name || '').toLowerCase(); card.dataset.team = cap.team || ''; card.dataset.area = area.name; card.dataset.category = col.category; card.dataset.flagSecurity = flags.security ? '1' : '0'; card.dataset.flagIt = flags.it ? '1' : '0'; card.dataset.flagOther = flags.other ? '1' : '0'; card.tabIndex = 0; card.innerHTML = `

${escapeHtml(cap.name)}

${cap.team ? `

${escapeHtml(cap.team)}

` : '

Other

'} `; if (state.builtSet.has(cap.slug)) { card.classList.add('built'); card.querySelector('.check').classList.add('on'); } card.addEventListener('click', (e) => { if (e.target.closest('.check')) return; openDetail(cap, col.category, area.name); }); card.addEventListener('mouseenter', () => highlightCard(card, true)); card.addEventListener('mouseleave', () => highlightCard(card, false)); card.addEventListener('focus', () => highlightCard(card, true)); card.addEventListener('blur', () => highlightCard(card, false)); card.querySelector('.check').addEventListener('click', (e) => { e.stopPropagation(); toggleBuilt(cap.slug, card); }); subjob.appendChild(card); } colEl.appendChild(subjob); } canvas.appendChild(colEl); } $('#builtCount').textContent = state.builtSet.size; $('#selectionLine').hidden = state.builtSet.size === 0; } function colColor(category) { return getComputedStyle(document.documentElement).getPropertyValue(`--col-${slug(category)}`).trim() || '#888'; } // --- Filtering -------------------------------------------------------------- function applyFilters() { const q = state.search.trim().toLowerCase(); let visible = 0; for (const col of $$('#canvas .column')) { const catMatch = !state.category || col.dataset.category === state.category; let colVisibleCards = 0; for (const card of $$('.card', col)) { const teamMatch = !state.team || card.dataset[`flag${cap(state.team)}`] === '1'; const textMatch = !q || card.dataset.name.includes(q) || (card.dataset.area || '').toLowerCase().includes(q); const show = catMatch && teamMatch && textMatch; card.hidden = !show; if (show) colVisibleCards++; } // Also hide subjob labels that have no visible cards under them for (const sj of $$('.subjob', col)) { const anyVisible = $$('.card', sj).some((c) => !c.hidden); sj.style.display = anyVisible ? '' : 'none'; } col.hidden = colVisibleCards === 0; if (!col.hidden) visible += colVisibleCards; } $('#visibleCount').textContent = visible; drawConnections(); } const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1); // --- Built tracking --------------------------------------------------------- function toggleBuilt(slugId, card) { if (!slugId) return; if (state.builtSet.has(slugId)) state.builtSet.delete(slugId); else state.builtSet.add(slugId); card.classList.toggle('built'); card.querySelector('.check').classList.toggle('on'); card.querySelector('.check').setAttribute('aria-pressed', state.builtSet.has(slugId) ? 'true' : 'false'); saveBuilt(); } // --- Detail panel ----------------------------------------------------------- function openDetail(cap, category, areaName) { const url = cap.href ? (cap.href.startsWith('http') ? cap.href : 'https://www.tines.com' + cap.href) : null; const cross = findCrossListings(cap.slug, category); const built = state.builtSet.has(cap.slug); $('#detailBody').innerHTML = `

${escapeHtml(cap.name)}

Category: ${escapeHtml(category)} Area: ${escapeHtml(areaName)} Team: ${escapeHtml(cap.team || 'Other')} Slug: ${escapeHtml(cap.slug || '—')}

${url ? `Open on tines.com ↗` : ''}

${cross.length ? `

Also categorised under:

${escapeHtml(c.category)} → ${escapeHtml(c.area)}

` : ''} `; $('#detailToggleBuilt')?.addEventListener('click', () => { const card = $(`.card[data-slug="${cap.slug}"]`); if (card) toggleBuilt(cap.slug, card); openDetail(cap, category, areaName); }); $('#detail').hidden = false; } function findCrossListings(slugId, excludeCategory) { if (!slugId) return []; const out = []; for (const col of state.matrix.columns) { if (col.category === excludeCategory) continue; for (const area of col.areas) { for (const c of area.capabilities) { if (c.slug === slugId) out.push({ category: col.category, area: area.name }); } } } return out; } // --- Connection lines ------------------------------------------------------- // Each line emanates from the perimeter of its team's Venn circle pointing // toward the target card (sun-ray style), instead of all lines starting at one // shared point. function drawConnections() { const svg = $('#connectionsSvg'); const wrap = $('#connections'); if (!svg || !wrap || !state.linesOn) { if (svg) svg.innerHTML = ''; return; } const venn = $('#venn'); if (!venn) return; const vennBox = venn.getBoundingClientRect(); const vbw = venn.viewBox.baseVal.width; const scale = vennBox.width / vbw; // SVG is rendered with preserveAspectRatio meet → uniform scale const docTop = window.scrollY; const docLeft = window.scrollX; // Translate each Venn circle's center+radius into document-space coords. const circles = {}; for (const c of $$('.vcircle', venn)) { const cx = +c.getAttribute('cx'); const cy = +c.getAttribute('cy'); const r = +c.getAttribute('r'); circles[c.dataset.team] = { cx: vennBox.left + cx * scale + docLeft, cy: vennBox.top + cy * scale + docTop, r: r * scale, }; } // Make the overlay SVG span the whole document so screen-space coords line up. const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth); wrap.style.height = `${docHeight}px`; wrap.style.width = `${docWidth}px`; svg.setAttribute('viewBox', `0 0 ${docWidth} ${docHeight}`); svg.setAttribute('width', docWidth); svg.setAttribute('height', docHeight); // For a card target, return the point on the given circle's edge that lies // on the line from circle center to card. const perimeterPoint = (circle, tx, ty) => { const dx = tx - circle.cx; const dy = ty - circle.cy; const d = Math.hypot(dx, dy) || 1; return { x: circle.cx + (dx / d) * circle.r, y: circle.cy + (dy / d) * circle.r }; }; let svgFrag = ''; const cards = $$('#canvas .card').filter((c) => !c.hidden); for (const card of cards) { const rect = card.getBoundingClientRect(); const tx = rect.left + rect.width / 2 + docLeft; const ty = rect.top + docTop; const teams = []; if (card.dataset.flagSecurity === '1') teams.push('security'); if (card.dataset.flagIt === '1') teams.push('it'); if (card.dataset.flagOther === '1') teams.push('other'); for (const team of teams) { const circle = circles[team]; if (!circle) continue; const o = perimeterPoint(circle, tx, ty); // Subtle quadratic curve: control point is on the line from circle center // through perimeter, pushed outward a small amount, so rays look organic // rather than perfectly straight without fanning back through the bubble. const midX = (o.x + tx) / 2; const midY = (o.y + ty) / 2; // Pull control point slightly toward circle center axis (gentle bow) const bowX = midX + (o.x - circle.cx) * 0.08; const bowY = midY + (o.y - circle.cy) * 0.08; svgFrag += ``; } } svg.innerHTML = svgFrag; } let drawScheduled = false; function scheduleDraw() { if (drawScheduled) return; drawScheduled = true; requestAnimationFrame(() => { drawScheduled = false; drawConnections(); }); } // --- Highlighting ----------------------------------------------------------- function highlightCard(card, on) { const slugId = card.dataset.slug; const svg = $('#connectionsSvg'); if (!svg) return; if (!on) { $$('path', svg).forEach((p) => p.classList.remove('hot', 'dim')); return; } $$('path', svg).forEach((p) => { if (p.dataset.slug === slugId) p.classList.add('hot'); else p.classList.add('dim'); }); } function highlightTeam(team, on) { const svg = $('#connectionsSvg'); if (!svg) return; if (!on) { $$('path', svg).forEach((p) => p.classList.remove('hot', 'dim')); return; } $$('path', svg).forEach((p) => { if (p.classList.contains(team)) p.classList.add('hot'); else p.classList.add('dim'); }); } // --- Counts under Venn ------------------------------------------------------ function computeTeamCounts() { let s = 0, i = 0, o = 0; for (const col of state.matrix.columns) { for (const area of col.areas) { for (const c of area.capabilities) { const f = teamFlags(c.team); if (f.security) s++; if (f.it) i++; if (f.other) o++; } } } $('#cnt-security').textContent = s; $('#cnt-it').textContent = i; $('#cnt-other').textContent = o; } // --- UI wiring -------------------------------------------------------------- function wireUi() { // Search let t; $('#searchInput').addEventListener('input', (e) => { state.search = e.target.value; clearTimeout(t); t = setTimeout(applyFilters, 80); }); // Category dropdown const btn = $('#categoryBtn'); btn.addEventListener('click', (e) => { e.stopPropagation(); const open = !$('#categoryMenu').hidden; open ? closeCategoryMenu() : openCategoryMenu(); }); document.addEventListener('click', (e) => { if (!e.target.closest('#categorySelectWrap')) closeCategoryMenu(); }); // Venn click → team filter (circles AND labels — labels are easier targets in // the overlap region) const onVennActivate = (team) => { state.team = state.team === team ? null : team; updateVennActiveStyles(); applyFilters(); }; const vennTargets = [...$$('.vcircle'), ...$$('.vlabel')]; vennTargets.forEach((el) => { el.addEventListener('click', () => onVennActivate(el.dataset.team)); el.addEventListener('mouseenter', () => highlightTeam(el.dataset.team, true)); el.addEventListener('mouseleave', () => highlightTeam(el.dataset.team, false)); }); // Lines toggle $('#linesToggle').addEventListener('click', () => { state.linesOn = !state.linesOn; $('#linesToggle').textContent = `Lines: ${state.linesOn ? 'on' : 'off'}`; $('#linesToggle').classList.toggle('on', state.linesOn); if (state.linesOn) drawConnections(); else $('#connectionsSvg').innerHTML = ''; }); // Zoom $('#zoomIn').addEventListener('click', () => setZoom(state.zoom + 0.1)); $('#zoomOut').addEventListener('click', () => setZoom(state.zoom - 0.1)); // Theme $('#themeToggle').addEventListener('click', () => { const next = document.body.dataset.theme === 'dark' ? 'light' : 'dark'; document.body.dataset.theme = next; $('#themeToggle').textContent = next === 'dark' ? '☾' : '☼'; localStorage.setItem('tines-matrix:theme', next); scheduleDraw(); }); const savedTheme = localStorage.getItem('tines-matrix:theme'); if (savedTheme) { document.body.dataset.theme = savedTheme; $('#themeToggle').textContent = savedTheme === 'dark' ? '☾' : '☼'; } // Detail close $('#detailClose').addEventListener('click', () => { $('#detail').hidden = true; }); document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { $('#detail').hidden = true; closeCategoryMenu(); } }); // Arrow-key navigation between cards document.addEventListener('keydown', (e) => { if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) return; if (e.target.matches('input, textarea')) return; const cards = $$('#canvas .card').filter((c) => !c.hidden); if (!cards.length) return; const cur = document.activeElement?.classList.contains('card') ? document.activeElement : null; if (!cur) { cards[0].focus(); e.preventDefault(); return; } const target = nextCard(cur, cards, e.key); if (target) { target.focus(); target.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' }); e.preventDefault(); } }); // Export $('#exportBtn').addEventListener('click', exportSelection); // Recompute lines on resize / scroll window.addEventListener('resize', scheduleDraw); window.addEventListener('scroll', scheduleDraw, { passive: true }); $('#canvas').addEventListener('scroll', scheduleDraw, { passive: true }); } function nextCard(cur, cards, key) { const r = cur.getBoundingClientRect(); const cx = r.left + r.width / 2; const cy = r.top + r.height / 2; let best = null; let bestScore = Infinity; for (const c of cards) { if (c === cur) continue; const rr = c.getBoundingClientRect(); const dx = rr.left + rr.width / 2 - cx; const dy = rr.top + rr.height / 2 - cy; let score; if (key === 'ArrowRight' && dx > 4) score = dx + Math.abs(dy) * 2; else if (key === 'ArrowLeft' && dx < -4) score = -dx + Math.abs(dy) * 2; else if (key === 'ArrowDown' && dy > 4) score = dy + Math.abs(dx) * 2; else if (key === 'ArrowUp' && dy < -4) score = -dy + Math.abs(dx) * 2; else continue; if (score < bestScore) { bestScore = score; best = c; } } return best; } function openCategoryMenu() { $('#categoryMenu').hidden = false; $('#categoryBtn').setAttribute('aria-expanded', 'true'); // Highlight current selection $$('#categoryMenu li').forEach((li) => { li.setAttribute('aria-selected', (li.dataset.value || null) === state.category ? 'true' : 'false'); }); } function closeCategoryMenu() { $('#categoryMenu').hidden = true; $('#categoryBtn').setAttribute('aria-expanded', 'false'); } function updateVennActiveStyles() { $$('.vcircle').forEach((c) => { c.classList.toggle('active', c.dataset.team === state.team); c.classList.toggle('dim', state.team && c.dataset.team !== state.team); }); } function setZoom(z) { state.zoom = Math.max(0.5, Math.min(1.6, z)); $('#canvas').style.transform = `scale(${state.zoom})`; $('#canvas').style.width = `${100 / state.zoom}%`; $('#zoomLabel').textContent = `${Math.round(state.zoom * 100)}%`; scheduleDraw(); } function exportSelection() { const rows = [['category', 'area', 'capability', 'team', 'slug', 'href']]; for (const col of state.matrix.columns) { for (const area of col.areas) { for (const c of area.capabilities) { if (state.builtSet.has(c.slug)) { rows.push([col.category, area.name, c.name, c.team || '', c.slug || '', c.href || '']); } } } } const csv = rows.map((r) => r.map((v) => `"${String(v).replace(/"/g, '""')}"`).join(',')).join('\n'); const blob = new Blob([csv], { type: 'text/csv' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `tines-matrix-built-${new Date().toISOString().slice(0,10)}.csv`; a.click(); } function escapeHtml(s) { return String(s ?? '').replace(/[&<>"']/g, (m) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[m])); }