viewof treeExplorer = { // Use data from previous cell const { root: dataRoot, minYear: minTimelineYear, maxLevel: maxLevelFound } = parsedData; const currentYear = 2026; const pxPerYear = 3; const yearToPx = (y) => (y - minTimelineYear) * pxPerYear; // State let searchQuery = ""; let lastProcessedQuery = ""; let manualToggles = new Set(); let showSpouses = true; let showPlaces = false; let showTimeline = false; let debounceTimer; // Helpers const normalize = (s) => s ? s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase() : ""; const highlight = (text, tokens) => { if (!tokens.length || !text) return text; const normalizedText = normalize(text); let matchRanges = []; tokens.forEach(token => { const t = normalize(token); if (!t) return; let pos = normalizedText.indexOf(t); while (pos !== -1) { matchRanges.push({ start: pos, end: pos + t.length }); pos = normalizedText.indexOf(t, pos + 1); } }); if (!matchRanges.length) return text; matchRanges.sort((a, b) => a.start - b.start); const merged = []; let current = matchRanges[0]; for (let j = 1; j < matchRanges.length; j++) { if (matchRanges[j].start <= current.end) current.end = Math.max(current.end, matchRanges[j].end); else { merged.push(current); current = matchRanges[j]; } } merged.push(current); let result = "", lastIdx = 0; merged.forEach(r => { result += text.substring(lastIdx, r.start) + `${text.substring(r.start, r.end)}`; lastIdx = r.end; }); return result + text.substring(lastIdx); }; // UI const container = html`

Show Spouses Show Places

Timeline View

`; const treeContent = container.querySelector('#tree-container'); const ruler = container.querySelector('#ruler'); const searchInput = container.querySelector('#search-input'); const exportBtn = container.querySelector('#btn-export'); function update() { if (searchQuery !== lastProcessedQuery) { manualToggles.clear(); lastProcessedQuery = searchQuery; } treeContent.innerHTML = ""; ruler.innerHTML = ""; // Ruler if (showTimeline) { for (let y = Math.floor(minTimelineYear/10)*10; y <= currentYear; y += 10) { const x = yearToPx(y); ruler.appendChild(html`

`); if (y%20===0) ruler.appendChild(html`

${y}

`); } const nowX = yearToPx(currentYear); ruler.appendChild(html`

NOW: ${currentYear}

`); const nowLine = document.createElement('div'); nowLine.style.cssText = `position:absolute;top:0;bottom:0;left:${nowX+50}px;border-left:2.5px solid #0277bd;opacity:0.4;z-index:100;pointer-events:none;`; treeContent.appendChild(nowLine); } else { for (let g = 1; g <= maxLevelFound; g++) { const x = (g-1) * 20; ruler.appendChild(html`

${g}

`); } ruler.appendChild(html`

`); } container.querySelector('#check-place').disabled = showTimeline; showTimeline ? container.querySelector('#label-place').classList.add('disabled-opt') : container.querySelector('#label-place').classList.remove('disabled-opt'); // Search const tokens = []; const tokenRegex = /[^\s"']+|"([^"]*)"|'([^']*)'/g; let m; while ((m = tokenRegex.exec(searchQuery.trim())) !== null) tokens.push(m[1] || m[2] || m[0]); const isSearchEmpty = tokens.length === 0; function calc(node) { // If node type is spouse, we check match. // But in mixedList, spouses are processed inside the loop of the parent calc. // Wait, we need to be careful with the recursive structure of mixedList. // Actually, calc should run on the main nodes, and check their mixedList content. let nodeS = normalize(`${node.name} ${node.life}${showPlaces && !showTimeline ? ' ' + node.bPlace + ' ' + node.dPlace : ''}`); let matchMe = !isSearchEmpty && tokens.some(t => nodeS.includes(normalize(t))); node.hasMatchBelow = false; // Check mixed list content node.mixedList.forEach(item => { if (item.type === 'node') { if (calc(item)) node.hasMatchBelow = true; } else if (item.type === 'spouse') { if (showSpouses) { let sS = normalize(`${item.name} ${item.life} ${item.mLife}${showPlaces && !showTimeline ? ' ' + item.bPlace + ' ' + item.dPlace : ''}`); if (!isSearchEmpty && tokens.some(t => sS.includes(normalize(t)))) node.hasMatchBelow = true; } } }); node.matchesSelf = matchMe; return node.matchesSelf || node.hasMatchBelow; } if (dataRoot) calc(dataRoot); function render(item, depth, isLastChild, ancestorFlags, timelineLines) { const isNode = item.type === 'node'; const isSpouse = item.type === 'spouse'; if (isSpouse && !showSpouses) return; // Determine if there is content to expand (children OR spouses) // "Child" means any node in mixedList that is type 'node' or 'spouse' // But typically we collapse "descendants". // Request: "hide spouses along with children when node collapsed". // So if mixedList > 0, we can collapse. const hasContent = isNode && item.mixedList.length > 0; const autoOpen = isSearchEmpty ? true : item.hasMatchBelow; const isOpen = isNode ? (manualToggles.has(item.id) ? !autoOpen : autoOpen) : true; // Indentation let visualDepth = depth; if (isSpouse && item.explicitGen) visualDepth = item.explicitGen - 1; const genColor = visualDepth % 2 === 0 ? "#e3f2fd" : "#f1f8e9"; const rowWrapper = document.createElement('div'); rowWrapper.style.cssText = "display: flex; align-items: stretch; position: relative;"; // GUTTERS const lineGutter = document.createElement('div'); lineGutter.style.cssText = "position: absolute; left: 0; top: 0; bottom: 0; width: 100%; pointer-events: none; z-index: 0;"; if (!showTimeline) { for (let i = 1; i <= visualDepth; i++) { const x = (i-1)*20 + 10; let drawLine = false; if (i <= depth) { if (ancestorFlags[i]) drawLine = true; else if (i === depth && !isLastChild) drawLine = true; } if (drawLine) lineGutter.innerHTML += `

`; } // Elbow for Node if (isNode && depth > 0) { const x = (depth-1)*20 + 10; if (isLastChild) lineGutter.innerHTML += `

`; lineGutter.innerHTML += `

`; } } else { timelineLines.forEach(line => { const isStop = (line.stopId === item.id); lineGutter.innerHTML += `

`; if (line.targetIds.includes(item.id)) { lineGutter.innerHTML += `

`; } }); // Outgoing line from Parent to its MixedList contents if (isNode && isOpen && hasContent) { // Find earliest year among mixedList contents (spouses + children) to start line // Actually, standard is usually just children. But if we want spouses to align... // Let's stick to Children for the vertical line logic in Timeline. const childrenNodes = item.mixedList.filter(i => i.type === 'node'); if (childrenNodes.length > 0) { const earliestB = Math.min(...childrenNodes.map(c => c.effectiveBYear)); const outX = yearToPx(earliestB) - 15; const parX = yearToPx(item.effectiveBYear); lineGutter.innerHTML += `

`; } } } rowWrapper.appendChild(lineGutter); // CONTENT const content = document.createElement('div'); const startX = showTimeline ? yearToPx(item.effectiveBYear) : visualDepth * 20; const endYear = item.dYear || currentYear; // Unified heights let rowHeight = 36; if (!showTimeline && showPlaces) rowHeight = 52; if (isSpouse && !showTimeline && showPlaces) rowHeight = 42; if (isSpouse && !showPlaces) rowHeight = 30; content.style.cssText = `position: relative; margin-left: ${startX}px; display: flex; flex-direction: column; justify-content: center; height: ${rowHeight}px; z-index: 10; cursor: ${hasContent ? 'pointer' : 'default'}; transition: all 0.1s; flex-grow: ${showTimeline ? '0' : '1'}; margin-right: 20px;`; const box = document.createElement('div'); box.style.cssText = `position: absolute; left: 0; top: 0; bottom: 0; transition: all 0.1s; z-index: -1;`; if (isNode) { box.style.backgroundColor = genColor; box.style.border = "1px solid rgba(0,0,0,0.15)"; box.style.borderRadius = showTimeline ? "2px" : "0 2px 2px 0"; } else { box.style.backgroundColor = "white"; box.style.border = "1px solid rgba(0,0,0,0.15)"; box.style.borderRadius = "2px"; } if (showTimeline) { box.style.width = `${Math.max(yearToPx(endYear) - startX, 2)}px`; box.style.top = isSpouse ? "2px" : "4px"; box.style.bottom = isSpouse ? "2px" : "4px"; } else { box.style.right = "0"; if (isSpouse) { content.style.width = "fit-content"; content.style.display = "inline-block"; content.style.border = "none"; content.style.borderBottom = "1px solid rgba(0,0,0,0.03)"; content.style.paddingTop = "4px"; box.style.top = "2px"; box.style.bottom = "2px"; } } content.appendChild(box); const text = document.createElement('div'); text.style.cssText = `padding: 4px 8px; white-space: nowrap; display: flex; align-items: baseline; font-size: 14px;`; const toggleIcon = hasContent ? `${isOpen ? '⊟' : '⊞'}` : ``; const prefix = isSpouse ? (item.isDivorced ? '± ' : '+ ') : ''; const nameStyle = isSpouse ? "font-style:italic;" : ""; const dateColor = "#2e7d32"; text.innerHTML = `${toggleIcon} ${prefix}${highlight(item.name, tokens)} ${highlight(item.life, tokens)}`; content.appendChild(text); if (!showTimeline && showPlaces) { const p = document.createElement('div'); p.style.cssText = "font-size: 11px; color: #666; padding: 0 8px 6px 26px; line-height: 1.2; margin-top: -2px;"; let parts = []; if (isNode) { if (item.bPlace) parts.push(`b. ${highlight(item.bPlace, tokens)}`); if (item.dPlace) parts.push(`d. ${highlight(item.dPlace, tokens)}`); } else { if (item.bPlace) parts.push(`b. ${highlight(item.bPlace, tokens)}`); if (item.dPlace) parts.push(`d. ${highlight(item.dPlace, tokens)}`); if (item.mPlace) parts.push(`m. ${highlight(item.mPlace, tokens)}`); if (item.divPlace) parts.push(`div. ${highlight(item.divPlace, tokens)}`); } p.innerHTML = parts.join(" | "); content.appendChild(p); } if (hasContent) { content.onclick = () => { if (manualToggles.has(item.id)) manualToggles.delete(item.id); else manualToggles.add(item.id); update(); }; content.onmouseenter = () => { box.style.borderWidth = "2px"; box.style.borderColor = "#0277bd"; }; content.onmouseleave = () => { box.style.borderWidth = "1px"; box.style.borderColor = "rgba(0,0,0,0.15)"; }; } rowWrapper.appendChild(content); treeContent.appendChild(rowWrapper); // --- RECURSE MIXED LIST --- if (isOpen && isNode) { // Identify last actual child NODE for vertical line termination let lastChildNodeId = null; for(let k=item.mixedList.length-1; k>=0; k--) { if (item.mixedList[k].type === 'node') { lastChildNodeId = item.mixedList[k].id; break; } } const childrenNodes = item.mixedList.filter(i => i.type === 'node'); const childTargetIds = childrenNodes.map(c => c.id); const earliestB = childrenNodes.length ? Math.min(...childrenNodes.map(c => c.effectiveBYear)) : 0; const outX = yearToPx(earliestB) - 15; const nextTimelineLines = showTimeline ? [ ...timelineLines.filter(l => l.stopId !== item.id), { x: outX, stopId: lastChildNodeId, targetIds: childTargetIds } ] : []; const nextAncestors = [...ancestorFlags]; nextAncestors[depth] = !isLastChild; item.mixedList.forEach((subItem) => { const isSubItemLastChild = (subItem.id === lastChildNodeId); render(subItem, depth + 1, isSubItemLastChild, nextAncestors, nextTimelineLines); }); } } if (dataRoot) render(dataRoot, 0, true, [], []); } searchInput.oninput = (e) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { searchQuery = e.target.value; update(); }, 800); }; container.querySelector('#check-spouse').onchange = (e) => { showSpouses = e.target.checked; update(); }; container.querySelector('#check-place').onchange = (e) => { showPlaces = e.target.checked; update(); }; container.querySelector('#check-timeline').onchange = (e) => { showTimeline = e.target.checked; update(); }; exportBtn.onclick = async () => { const orig = exportBtn.textContent; exportBtn.textContent = "Processing..."; exportBtn.disabled = true; try { const { toJpeg } = await import("https://cdn.skypack.dev/html-to-image"); const style = window.getComputedStyle(treeContent); const pBot = parseFloat(style.paddingBottom), pLeft = parseFloat(style.paddingLeft), pRight = parseFloat(style.paddingRight); const realHeight = treeContent.scrollHeight - pBot + 50; const realWidth = treeContent.scrollWidth; const dataUrl = await toJpeg(container.querySelector('#export-container'), { backgroundColor: '#fff', quality: 0.98, width: realWidth, height: realHeight + ruler.offsetHeight, pixelRatio: 2, style: { margin: '0', padding: '30px', height: 'auto', minWidth: '0' } }); const link = document.createElement('a'); link.download = `tree_${new Date().getTime()}.jpg`; link.href = dataUrl; link.click(); } catch (err) { alert("Export failed."); } finally { exportBtn.textContent = orig; exportBtn.disabled = false; } }; update(); return container; }