Add expanded timeline mode to show all branches at once
Adds a toggle button (▾/▴) to the timeline bar that expands it vertically, displaying every branch as its own row. The active branch is highlighted, shared ancestors are dimmed on other rows, and clicking any marker on a non-active row switches to that branch. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -45,6 +45,7 @@ let sidebarTooltipEl = null; // tooltip element for sidebar hover previews
|
||||
const lastCapturedIdMap = new Map(); // workflowKey -> id of most recent capture (for parentId chaining)
|
||||
const activeBranchSelections = new Map(); // forkPointId -> selected child index
|
||||
let branchingEnabled = true;
|
||||
let timelineExpanded = false;
|
||||
const sessionWorkflows = new Map(); // workflowKey -> { firstSeen, lastSeen }
|
||||
|
||||
// ─── Server API Layer ───────────────────────────────────────────────
|
||||
@@ -972,6 +973,58 @@ function getAncestorIds(snapshotId, parentOf) {
|
||||
return ancestors;
|
||||
}
|
||||
|
||||
function getAllBranches(tree) {
|
||||
const branches = [];
|
||||
function walk(nodeId, path) {
|
||||
const record = tree.byId.get(nodeId);
|
||||
if (!record) return;
|
||||
const currentPath = [...path, record];
|
||||
const children = tree.childrenOf.get(nodeId);
|
||||
if (!children || children.length === 0) {
|
||||
branches.push(currentPath);
|
||||
} else {
|
||||
for (const child of children) {
|
||||
walk(child.id, currentPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const root of tree.roots) {
|
||||
walk(root.id, []);
|
||||
}
|
||||
return branches;
|
||||
}
|
||||
|
||||
function selectBranchContaining(snapshotId, tree) {
|
||||
// Walk from snapshot to root, at each fork set activeBranchSelections
|
||||
const pathToRoot = [];
|
||||
const visited = new Set();
|
||||
let current = snapshotId;
|
||||
while (current) {
|
||||
if (visited.has(current)) break; // cycle detection
|
||||
visited.add(current);
|
||||
pathToRoot.push(current);
|
||||
current = tree.parentOf.get(current) || null;
|
||||
}
|
||||
pathToRoot.reverse(); // now root → snapshot
|
||||
|
||||
// Handle multiple roots
|
||||
if (pathToRoot.length > 0 && tree.roots.length > 1) {
|
||||
const rootId = pathToRoot[0];
|
||||
const rootIdx = tree.roots.findIndex(r => r.id === rootId);
|
||||
if (rootIdx >= 0) activeBranchSelections.set("__root__", rootIdx);
|
||||
}
|
||||
|
||||
for (let i = 0; i < pathToRoot.length - 1; i++) {
|
||||
const parentId = pathToRoot[i];
|
||||
const childId = pathToRoot[i + 1];
|
||||
const children = tree.childrenOf.get(parentId);
|
||||
if (children && children.length > 1) {
|
||||
const idx = children.findIndex(c => c.id === childId);
|
||||
if (idx >= 0) activeBranchSelections.set(parentId, idx);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Restore Lock ───────────────────────────────────────────────────
|
||||
|
||||
async function withRestoreLock(fn) {
|
||||
@@ -2107,6 +2160,40 @@ const CSS = `
|
||||
opacity: 1;
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
.snap-timeline-expand-btn {
|
||||
font-size: 13px;
|
||||
padding: 2px 6px;
|
||||
line-height: 1;
|
||||
}
|
||||
.snap-timeline-expanded {
|
||||
height: auto;
|
||||
align-items: flex-start;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.snap-timeline-expanded .snap-timeline-track {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
height: auto;
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
align-items: stretch;
|
||||
}
|
||||
.snap-timeline-branch-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 6px;
|
||||
border-radius: 4px;
|
||||
min-height: 24px;
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
.snap-timeline-branch-row-active {
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
border-left-color: #3b82f6;
|
||||
}
|
||||
.snap-timeline-marker-dimmed {
|
||||
opacity: 0.35;
|
||||
}
|
||||
.snap-diff-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -3447,15 +3534,68 @@ function buildTimeline() {
|
||||
snapBtn.disabled = false;
|
||||
});
|
||||
|
||||
const expandBtn = document.createElement("button");
|
||||
expandBtn.className = "snap-timeline-snap-btn snap-timeline-expand-btn";
|
||||
expandBtn.textContent = "\u25BE";
|
||||
expandBtn.title = "Expand timeline to show all branches";
|
||||
expandBtn.addEventListener("click", () => {
|
||||
timelineExpanded = !timelineExpanded;
|
||||
expandBtn.textContent = timelineExpanded ? "\u25B4" : "\u25BE";
|
||||
expandBtn.title = timelineExpanded ? "Collapse timeline" : "Expand timeline to show all branches";
|
||||
bar.classList.toggle("snap-timeline-expanded", timelineExpanded);
|
||||
refresh();
|
||||
});
|
||||
|
||||
bar.appendChild(track);
|
||||
bar.appendChild(expandBtn);
|
||||
bar.appendChild(snapBtn);
|
||||
|
||||
canvasParent.appendChild(bar);
|
||||
timelineEl = bar;
|
||||
|
||||
function buildMarker(rec, { dimmed = false, onClickBranch = null } = {}) {
|
||||
const marker = document.createElement("div");
|
||||
marker.className = "snap-timeline-marker";
|
||||
|
||||
const iconInfo = CHANGE_TYPE_ICONS[rec.changeType] || CHANGE_TYPE_ICONS.unknown;
|
||||
marker.style.setProperty("--snap-marker-color", iconInfo.color);
|
||||
marker.innerHTML = iconInfo.svg;
|
||||
|
||||
if (rec.source === "node") {
|
||||
marker.classList.add("snap-timeline-marker-node");
|
||||
marker.style.setProperty("--snap-marker-color", "#6d28d9");
|
||||
}
|
||||
if (rec.locked) marker.classList.add("snap-timeline-marker-locked");
|
||||
if (rec.id === activeSnapshotId) marker.classList.add("snap-timeline-marker-active");
|
||||
if (rec.id === currentSnapshotId) {
|
||||
marker.classList.add("snap-timeline-marker-current");
|
||||
marker.style.setProperty("--snap-marker-color", "#10b981");
|
||||
}
|
||||
if (dimmed) marker.classList.add("snap-timeline-marker-dimmed");
|
||||
|
||||
let tip = `${rec.label} — ${formatTime(rec.timestamp)}\n${iconInfo.label}`;
|
||||
if (rec.notes) tip += `\n${rec.notes}`;
|
||||
marker.title = tip;
|
||||
|
||||
marker.addEventListener("click", () => {
|
||||
if (onClickBranch) onClickBranch();
|
||||
swapSnapshot(rec);
|
||||
});
|
||||
|
||||
return marker;
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
if (!showTimeline) return;
|
||||
|
||||
// Hide/show expand button based on branching
|
||||
expandBtn.style.display = branchingEnabled ? "" : "none";
|
||||
if (!branchingEnabled && timelineExpanded) {
|
||||
timelineExpanded = false;
|
||||
bar.classList.remove("snap-timeline-expanded");
|
||||
expandBtn.textContent = "\u25BE";
|
||||
}
|
||||
|
||||
const allRecords = await db_getAllForWorkflow(getWorkflowKey());
|
||||
|
||||
track.innerHTML = "";
|
||||
@@ -3468,62 +3608,58 @@ function buildTimeline() {
|
||||
return;
|
||||
}
|
||||
|
||||
let records;
|
||||
let tree = null;
|
||||
if (branchingEnabled) {
|
||||
tree = buildSnapshotTree(allRecords);
|
||||
}
|
||||
|
||||
// ── Expanded mode: one row per branch ──
|
||||
if (timelineExpanded && branchingEnabled) {
|
||||
const allBranches = getAllBranches(tree);
|
||||
const currentPath = getDisplayPath(tree, activeBranchSelections);
|
||||
const currentIds = new Set(currentPath.map(r => r.id));
|
||||
|
||||
// Determine which branch is the active one
|
||||
const currentLeafId = currentPath.length > 0 ? currentPath[currentPath.length - 1].id : null;
|
||||
|
||||
for (const branch of allBranches) {
|
||||
const row = document.createElement("div");
|
||||
row.className = "snap-timeline-branch-row";
|
||||
|
||||
const branchLeafId = branch[branch.length - 1].id;
|
||||
const isActiveBranch = branchLeafId === currentLeafId;
|
||||
if (isActiveBranch) row.classList.add("snap-timeline-branch-row-active");
|
||||
|
||||
for (const rec of branch) {
|
||||
const isSharedAncestor = !isActiveBranch && currentIds.has(rec.id);
|
||||
const marker = buildMarker(rec, {
|
||||
dimmed: isSharedAncestor,
|
||||
onClickBranch: isActiveBranch ? null : () => {
|
||||
selectBranchContaining(branchLeafId, tree);
|
||||
},
|
||||
});
|
||||
row.appendChild(marker);
|
||||
}
|
||||
|
||||
track.appendChild(row);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// ── Collapsed mode (default) ──
|
||||
let records;
|
||||
let forkPointSet = new Set();
|
||||
if (branchingEnabled) {
|
||||
// Show only current branch's markers
|
||||
tree = buildSnapshotTree(allRecords);
|
||||
records = getDisplayPath(tree, activeBranchSelections);
|
||||
|
||||
for (const [parentId, children] of tree.childrenOf) {
|
||||
if (children.length > 1) forkPointSet.add(parentId);
|
||||
}
|
||||
} else {
|
||||
// Flat: all records in timestamp order
|
||||
records = [...allRecords].sort((a, b) => a.timestamp - b.timestamp);
|
||||
}
|
||||
|
||||
for (const rec of records) {
|
||||
const marker = document.createElement("div");
|
||||
marker.className = "snap-timeline-marker";
|
||||
|
||||
// Change-type icon and color
|
||||
const iconInfo = CHANGE_TYPE_ICONS[rec.changeType] || CHANGE_TYPE_ICONS.unknown;
|
||||
marker.style.setProperty("--snap-marker-color", iconInfo.color);
|
||||
marker.innerHTML = iconInfo.svg;
|
||||
|
||||
// Node snapshot styling — override color to purple but keep the SVG icon
|
||||
if (rec.source === "node") {
|
||||
marker.classList.add("snap-timeline-marker-node");
|
||||
marker.style.setProperty("--snap-marker-color", "#6d28d9");
|
||||
}
|
||||
|
||||
// Locked snapshot styling
|
||||
if (rec.locked) {
|
||||
marker.classList.add("snap-timeline-marker-locked");
|
||||
}
|
||||
|
||||
// Active snapshot styling (the one swapped TO)
|
||||
if (rec.id === activeSnapshotId) {
|
||||
marker.classList.add("snap-timeline-marker-active");
|
||||
}
|
||||
|
||||
// Current snapshot styling (auto-saved "you were here" bookmark)
|
||||
if (rec.id === currentSnapshotId) {
|
||||
marker.classList.add("snap-timeline-marker-current");
|
||||
marker.style.setProperty("--snap-marker-color", "#10b981");
|
||||
}
|
||||
|
||||
// Native tooltip with change-type description
|
||||
let tip = `${rec.label} — ${formatTime(rec.timestamp)}\n${iconInfo.label}`;
|
||||
if (rec.notes) tip += `\n${rec.notes}`;
|
||||
marker.title = tip;
|
||||
|
||||
// Click to swap
|
||||
marker.addEventListener("click", () => {
|
||||
swapSnapshot(rec);
|
||||
});
|
||||
const marker = buildMarker(rec);
|
||||
|
||||
// Fork point: vertical stack — up arrow, marker, down arrow
|
||||
if (branchingEnabled && forkPointSet.has(rec.id)) {
|
||||
@@ -3533,10 +3669,8 @@ function buildTimeline() {
|
||||
const group = document.createElement("div");
|
||||
group.className = "snap-timeline-fork-group";
|
||||
|
||||
// Arrow color matches the marker
|
||||
const arrowColor = marker.style.getPropertyValue("--snap-marker-color") || "#3b82f6";
|
||||
|
||||
// Up arrow (previous branch)
|
||||
const upBtn = document.createElement("button");
|
||||
upBtn.className = "snap-timeline-branch-btn";
|
||||
upBtn.textContent = "\u25B2";
|
||||
@@ -3550,7 +3684,6 @@ function buildTimeline() {
|
||||
if (sidebarRefresh) sidebarRefresh().catch(() => {});
|
||||
});
|
||||
|
||||
// Down arrow (next branch)
|
||||
const downBtn = document.createElement("button");
|
||||
downBtn.className = "snap-timeline-branch-btn";
|
||||
downBtn.textContent = "\u25BC";
|
||||
|
||||
Reference in New Issue
Block a user