+27 -2342

apps/desktop/src/components/RevisionGraph.tsx

reviewed

··· 1 1 - import { useAtom } from "@effect-atom/atom-react"; 2 2 - import { useLiveQuery } from "@tanstack/react-db"; 3 3 - import { useNavigate, useSearch } from "@tanstack/react-router"; 4 4 - import { useVirtualizer } from "@tanstack/react-virtual"; 5 5 - import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react"; 6 6 - import { expandedStacksAtom, focusPanelAtom, hoveredStackIdAtom, inlineJumpQueryAtom, viewModeAtom } from "@/atoms"; 7 7 - import { ChangedFilesList } from "@/components/ChangedFilesList"; 8 8 - import { 9 9 - reorderForGraph, 10 10 - detectStacks, 11 11 - computeRevisionAncestry, 12 12 - type RevisionStack, 13 13 - } from "@/components/revision-graph-utils"; 14 14 - import { emptyChangesCollection, getRevisionChangesCollection, prefetchRevisionDiffs } from "@/db"; 15 15 - import { useKeyboardShortcut } from "@/hooks/useKeyboard"; 16 16 - import type { Revision } from "@/tauri-commands"; 1 1 + /** 2 2 + * RevisionGraph - Re-export from modular components 3 3 + * 4 4 + * The component has been refactored into smaller modules in ./revision-graph/ 5 5 + * This file maintains backwards compatibility for existing imports. 6 6 + */ 7 7 + export { 8 8 + RevisionGraph, 9 9 + type RevisionGraphHandle, 10 10 + } from "./revision-graph"; 17 11 18 18 - // Debug overlay - toggle with Ctrl+Shift+D 19 19 - const DEBUG_OVERLAY_DEFAULT = false; 12 12 + // Re-export types and constants for consumers that may need them 13 13 + export type { 14 14 + EdgeBinding, 15 15 + GraphNode, 16 16 + GraphRow, 17 17 + GraphData, 18 18 + GraphEdgeType, 19 19 + } from "./revision-graph"; 20 20 21 21 - function DebugOverlay({ 22 22 - enabled, 23 23 - scrollRef, 24 24 - selectedIndex, 25 25 - visibleStartRow, 26 26 - visibleEndRow, 27 27 - totalRows, 28 28 - wcIndex, 29 29 - selectedChangeId, 30 30 - wcChangeId, 31 31 - }: { 32 32 - enabled: boolean; 33 33 - scrollRef: React.RefObject<HTMLDivElement | null>; 34 34 - selectedIndex: number | undefined; 35 35 - visibleStartRow: number; 36 36 - visibleEndRow: number; 37 37 - totalRows: number; 38 38 - wcIndex: number | undefined; 39 39 - selectedChangeId: string | undefined; 40 40 - wcChangeId: string | undefined; 41 41 - }) { 42 42 - // Force re-render on scroll/resize/focus 43 43 - const [, forceUpdate] = useState(0); 44 44 - 45 45 - const prevScrollTop = useRef<number>(0); 46 46 - 47 47 - useEffect(() => { 48 48 - if (!enabled) return; 49 49 - const el = scrollRef.current; 50 50 - if (!el) return; 51 51 - 52 52 - const update = () => { 53 53 - const newScrollTop = el.scrollTop; 54 54 - if (Math.abs(newScrollTop - prevScrollTop.current) > 100) { 55 55 - console.log("[scroll] jump detected:", { 56 56 - from: prevScrollTop.current.toFixed(0), 57 57 - to: newScrollTop.toFixed(0), 58 58 - delta: (newScrollTop - prevScrollTop.current).toFixed(0), 59 59 - }); 60 60 - } 61 61 - prevScrollTop.current = newScrollTop; 62 62 - forceUpdate((n) => n + 1); 63 63 - }; 64 64 - el.addEventListener("scroll", update); 65 65 - window.addEventListener("resize", update); 66 66 - document.addEventListener("focusin", update); 67 67 - return () => { 68 68 - el.removeEventListener("scroll", update); 69 69 - window.removeEventListener("resize", update); 70 70 - document.removeEventListener("focusin", update); 71 71 - }; 72 72 - }, [scrollRef, enabled]); 73 73 - 74 74 - if (!enabled) return null; 75 75 - 76 76 - const el = scrollRef.current; 77 77 - const scrollTop = el?.scrollTop ?? 0; 78 78 - const clientHeight = el?.clientHeight ?? 0; 79 79 - const scrollHeight = el?.scrollHeight ?? 0; 80 80 - 81 81 - const selectedItemTop = selectedIndex !== undefined ? selectedIndex * ROW_HEIGHT : 0; 82 82 - const selectedItemBottom = selectedItemTop + ROW_HEIGHT; 83 83 - const distanceFromTop = selectedItemTop - scrollTop; 84 84 - const distanceFromBottom = scrollTop + clientHeight - selectedItemBottom; 85 85 - const isInViewport = distanceFromTop >= 0 && distanceFromBottom >= 0; 86 86 - 87 87 - const active = document.activeElement; 88 88 - const activeElement = active 89 89 - ? `${active.tagName}${active.className ? `.${active.className.split(" ")[0]}` : ""}` 90 90 - : "none"; 91 91 - 92 92 - const info = { 93 93 - scrollTop, 94 94 - clientHeight, 95 95 - scrollHeight, 96 96 - viewportEnd: scrollTop + clientHeight, 97 97 - selectedIndex, 98 98 - wcIndex, 99 99 - itemTop: selectedItemTop, 100 100 - itemBottom: selectedItemBottom, 101 101 - distFromTop: distanceFromTop, 102 102 - distFromBottom: distanceFromBottom, 103 103 - isInViewport, 104 104 - virtualRange: `${visibleStartRow}-${visibleEndRow}`, 105 105 - totalRows, 106 106 - ROW_HEIGHT, 107 107 - activeElement, 108 108 - selected: selectedChangeId?.slice(0, 4), 109 109 - wc: wcChangeId?.slice(0, 4), 110 110 - }; 111 111 - 112 112 - return ( 113 113 - <div 114 114 - className="fixed bottom-12 right-4 z-50 bg-black/90 text-green-400 font-mono text-xs p-3 rounded-lg shadow-lg max-w-xs cursor-pointer hover:bg-black/95 active:scale-95 transition-transform" 115 115 - onClick={() => navigator.clipboard.writeText(JSON.stringify(info, null, 2))} 116 116 - title="Click to copy" 117 117 - > 118 118 - <div className="font-bold text-green-300 mb-2"> 119 119 - Debug Info <span className="text-green-600">(click to copy)</span> 120 120 - </div> 121 121 - <div className="space-y-1"> 122 122 - <div>scrollTop: {scrollTop.toFixed(0)}</div> 123 123 - <div>clientHeight: {clientHeight.toFixed(0)}</div> 124 124 - <div>scrollHeight: {scrollHeight}</div> 125 125 - <div>viewportEnd: {(scrollTop + clientHeight).toFixed(0)}</div> 126 126 - <div className="border-t border-green-800 my-2" /> 127 127 - <div>selectedIndex: {selectedIndex ?? "none"}</div> 128 128 - <div>wcIndex: {wcIndex ?? "none"}</div> 129 129 - <div>selected: {selectedChangeId?.slice(0, 4) ?? "none"}</div> 130 130 - <div>wc: {wcChangeId?.slice(0, 4) ?? "none"}</div> 131 131 - <div className="border-t border-green-800 my-2" /> 132 132 - <div>itemTop: {selectedItemTop}</div> 133 133 - <div>itemBottom: {selectedItemBottom}</div> 134 134 - <div>distFromTop: {distanceFromTop.toFixed(0)}</div> 135 135 - <div>distFromBottom: {distanceFromBottom.toFixed(0)}</div> 136 136 - <div className={isInViewport ? "text-green-400" : "text-red-400"}> 137 137 - inViewport: {isInViewport ? "YES" : "NO"} 138 138 - </div> 139 139 - <div className="border-t border-green-800 my-2" /> 140 140 - <div> 141 141 - virtualRange: {visibleStartRow}-{visibleEndRow} 142 142 - </div> 143 143 - <div>totalRows: {totalRows}</div> 144 144 - <div>ROW_HEIGHT: {ROW_HEIGHT}</div> 145 145 - <div className="border-t border-green-800 my-2" /> 146 146 - <div className="truncate" title={activeElement}> 147 147 - focus: {activeElement} 148 148 - </div> 149 149 - </div> 150 150 - </div> 151 151 - ); 152 152 - } 153 153 - 154 154 - export interface RevisionGraphHandle { 155 155 - scrollToChangeId: ( 156 156 - changeId: string, 157 157 - options?: { align?: "auto" | "center"; smooth?: boolean }, 158 158 - ) => void; 159 159 - } 160 160 - 161 161 - interface RevisionGraphProps { 162 162 - revisions: Revision[]; 163 163 - selectedRevision: Revision | null; 164 164 - onSelectRevision: (revision: Revision) => void; 165 165 - isLoading: boolean; 166 166 - flash?: { changeId: string; key: number } | null; 167 167 - repoPath: string | null; 168 168 - pendingAbandon?: Revision | null; 169 169 - } 170 170 - 171 171 - const ROW_HEIGHT = 64; 172 172 - const LANE_WIDTH = 20; 173 173 - const LANE_PADDING = 8; 174 174 - const NODE_RADIUS = 5; 175 175 - const MAX_LANES = 2; 176 176 - 177 177 - const LANE_COLORS = [ 178 178 - "var(--chart-1)", 179 179 - "var(--chart-2)", 180 180 - "var(--chart-3)", 181 181 - "var(--chart-4)", 182 182 - "var(--chart-5)", 183 183 - "var(--primary)", 184 184 - ]; 185 185 - 186 186 - type GraphEdgeType = "direct" | "indirect" | "missing"; 187 187 - 188 188 - // ============================================================================ 189 189 - // Semantic Graph Components (tldraw-inspired architecture) 190 190 - // ============================================================================ 191 191 - 192 192 - // Represents a semantic binding between two revisions (like tldraw's shape bindings) 193 193 - interface EdgeBinding { 194 194 - id: string; 195 195 - sourceRevisionId: string; 196 196 - targetRevisionId: string; 197 197 - sourceLane: number; 198 198 - targetLane: number; 199 199 - edgeType: GraphEdgeType; 200 200 - isDeemphasized?: boolean; 201 201 - isMissingStub?: boolean; 202 202 - /** If set, this edge represents a collapsed stack and clicking it should expand */ 203 203 - collapsedStackId?: string; 204 204 - /** Number of hidden revisions in the collapsed stack */ 205 205 - collapsedCount?: number; 206 206 - /** If set, this edge is part of an expanded stack and clicking it should collapse */ 207 207 - expandedStackId?: string; 208 208 - } 209 209 - 210 210 - interface GraphNodeProps { 211 211 - revision: Revision; 212 212 - lane: number; 213 213 - isSelected: boolean; 214 214 - color: string; 215 215 - } 216 216 - 217 217 - // GraphNode - Semantic node component rendered inline with each row 218 218 - // Uses inline SVG for proper accessibility (avoids role="img" on divs) 219 219 - function GraphNode({ revision, lane, isSelected, color }: GraphNodeProps) { 220 220 - const isWorkingCopy = revision.is_working_copy; 221 221 - const isImmutable = revision.is_immutable; 222 222 - 223 223 - const size = isWorkingCopy ? NODE_RADIUS * 2 + 6 : NODE_RADIUS * 2; 224 224 - const selectedRingSize = isWorkingCopy ? NODE_RADIUS + 6 : NODE_RADIUS + 4; 225 225 - 226 226 - // Working copy: @ symbol with glow 227 227 - if (isWorkingCopy) { 228 228 - return ( 229 229 - <svg 230 230 - width={size + 8} 231 231 - height={size + 8} 232 232 - viewBox={`0 0 ${size + 8} ${size + 8}`} 233 233 - className="shrink-0" 234 234 - aria-label={`Working copy revision ${revision.change_id_short}`} 235 235 - data-revision-id={revision.change_id} 236 236 - data-lane={lane} 237 237 - > 238 238 - <title>Working copy: {revision.change_id_short}</title> 239 239 - {isSelected && ( 240 240 - <circle 241 241 - cx={(size + 8) / 2} 242 242 - cy={(size + 8) / 2} 243 243 - r={selectedRingSize} 244 244 - fill={color} 245 245 - fillOpacity={0.3} 246 246 - /> 247 247 - )} 248 248 - <circle 249 249 - cx={(size + 8) / 2} 250 250 - cy={(size + 8) / 2} 251 251 - r={NODE_RADIUS + 3} 252 252 - fill={color} 253 253 - fillOpacity={0.2} 254 254 - /> 255 255 - <text 256 256 - x={(size + 8) / 2} 257 257 - y={(size + 8) / 2} 258 258 - textAnchor="middle" 259 259 - dominantBaseline="central" 260 260 - fill={color} 261 261 - fontWeight="bold" 262 262 - fontSize="12" 263 263 - > 264 264 - @ 265 265 - </text> 266 266 - </svg> 267 267 - ); 268 268 - } 269 269 - 270 270 - // Immutable: diamond shape 271 271 - if (isImmutable) { 272 272 - return ( 273 273 - <svg 274 274 - width={size + 8} 275 275 - height={size + 8} 276 276 - viewBox={`0 0 ${size + 8} ${size + 8}`} 277 277 - className="shrink-0" 278 278 - aria-label={`Immutable revision ${revision.change_id_short}`} 279 279 - data-revision-id={revision.change_id} 280 280 - data-lane={lane} 281 281 - > 282 282 - <title>Immutable: {revision.change_id_short}</title> 283 283 - {isSelected && ( 284 284 - <circle 285 285 - cx={(size + 8) / 2} 286 286 - cy={(size + 8) / 2} 287 287 - r={selectedRingSize} 288 288 - fill={color} 289 289 - fillOpacity={0.3} 290 290 - /> 291 291 - )} 292 292 - <rect 293 293 - x={(size + 8) / 2 - NODE_RADIUS} 294 294 - y={(size + 8) / 2 - NODE_RADIUS} 295 295 - width={NODE_RADIUS * 2} 296 296 - height={NODE_RADIUS * 2} 297 297 - fill={color} 298 298 - transform={`rotate(45 ${(size + 8) / 2} ${(size + 8) / 2})`} 299 299 - /> 300 300 - </svg> 301 301 - ); 302 302 - } 303 303 - 304 304 - // Regular mutable: circle 305 305 - return ( 306 306 - <svg 307 307 - width={size + 8} 308 308 - height={size + 8} 309 309 - viewBox={`0 0 ${size + 8} ${size + 8}`} 310 310 - className="shrink-0" 311 311 - aria-label={`Revision ${revision.change_id_short}`} 312 312 - data-revision-id={revision.change_id} 313 313 - data-lane={lane} 314 314 - > 315 315 - <title>Revision: {revision.change_id_short}</title> 316 316 - {isSelected && ( 317 317 - <circle 318 318 - cx={(size + 8) / 2} 319 319 - cy={(size + 8) / 2} 320 320 - r={selectedRingSize} 321 321 - fill={color} 322 322 - fillOpacity={0.3} 323 323 - /> 324 324 - )} 325 325 - <circle cx={(size + 8) / 2} cy={(size + 8) / 2} r={NODE_RADIUS} fill={color} /> 326 326 - </svg> 327 327 - ); 328 328 - } 329 329 - 330 330 - interface GraphEdgeProps { 331 331 - binding: EdgeBinding; 332 332 - sourceY: number; 333 333 - targetY: number; 334 334 - sourceRevision: Revision; 335 335 - targetRevision: Revision | null; 336 336 - stackTopY?: number; 337 337 - stackBottomY?: number; 338 338 - hoveredStackId: string | null; 339 339 - onHoverStack: (stackId: string | null) => void; 340 340 - onToggleStack?: (stackId: string) => void; 341 341 - } 342 342 - 343 343 - // GraphEdge - Semantic edge component with source/target revision bindings 344 344 - function GraphEdge({ 345 345 - binding, 346 346 - sourceY, 347 347 - targetY, 348 348 - sourceRevision, 349 349 - targetRevision, 350 350 - stackTopY, 351 351 - stackBottomY, 352 352 - hoveredStackId, 353 353 - onHoverStack, 354 354 - onToggleStack, 355 355 - }: GraphEdgeProps) { 356 356 - const { 357 357 - sourceLane, 358 358 - targetLane, 359 359 - edgeType, 360 360 - isDeemphasized, 361 361 - isMissingStub, 362 362 - collapsedStackId, 363 363 - collapsedCount, 364 364 - expandedStackId, 365 365 - } = binding; 366 366 - 367 367 - // Check if this edge's stack is currently hovered 368 368 - const isStackHovered = expandedStackId !== undefined && hoveredStackId === expandedStackId; 369 369 - 370 370 - const sourceX = laneToX(sourceLane); 371 371 - const targetX = laneToX(targetLane); 372 372 - const sourceColor = laneColor(sourceLane); 373 373 - const targetColor = laneColor(targetLane); 374 374 - 375 375 - // Style based on edge type 376 376 - const isDashed = edgeType === "indirect"; 377 377 - const isMissing = edgeType === "missing"; 378 378 - const strokeWidth = isDeemphasized ? 1 : 2; 379 379 - const strokeOpacity = isDeemphasized ? 0.4 : isMissing ? 0.3 : 0.8; 380 380 - const strokeColor = isDeemphasized ? "var(--muted-foreground)" : targetColor; 381 381 - 382 382 - // Accessibility label describing the connection 383 383 - const ariaLabel = isMissingStub 384 384 - ? `${sourceRevision.change_id_short} has parent outside current view` 385 385 - : targetRevision 386 386 - ? `${sourceRevision.change_id_short} → ${targetRevision.change_id_short}${edgeType === "indirect" ? " (indirect)" : ""}` 387 387 - : `Edge from ${sourceRevision.change_id_short}`; 388 388 - 389 389 - // Missing stub: short dashed line indicating parent outside view 390 390 - if (isMissingStub) { 391 391 - const stubLength = ROW_HEIGHT * 0.4; 392 392 - return ( 393 393 - <g aria-label={ariaLabel} style={{ pointerEvents: "none" }}> 394 394 - <title>{ariaLabel}</title> 395 395 - <line 396 396 - x1={sourceX} 397 397 - y1={sourceY + NODE_RADIUS} 398 398 - x2={sourceX} 399 399 - y2={sourceY + NODE_RADIUS + stubLength} 400 400 - stroke={sourceColor} 401 401 - strokeWidth={1.5} 402 402 - strokeOpacity={0.4} 403 403 - strokeDasharray="3 3" 404 404 - data-edge-type="missing-stub" 405 405 - data-source-revision={sourceRevision.change_id} 406 406 - /> 407 407 - </g> 408 408 - ); 409 409 - } 410 410 - 411 411 - // Same lane: straight vertical line (or dotted for collapsed stacks) 412 412 - if (sourceLane === targetLane) { 413 413 - const isCollapsedStack = !!collapsedStackId; 414 414 - const y1 = sourceY + NODE_RADIUS; 415 415 - const y2 = targetY - NODE_RADIUS; 416 416 - 417 417 - // For collapsed stacks, draw a dotted line with clickable area 418 418 - if (isCollapsedStack) { 419 419 - const collapsedLabel = `${collapsedCount ?? 0} hidden revision${(collapsedCount ?? 0) !== 1 ? "s" : ""} - click to expand`; 420 420 - 421 421 - return ( 422 422 - <g 423 423 - aria-label={collapsedLabel} 424 424 - className="cursor-pointer group" 425 425 - style={{ pointerEvents: "auto" }} 426 426 - onClick={() => onToggleStack?.(collapsedStackId)} 427 427 - > 428 428 - <title>{collapsedLabel}</title> 429 429 - {/* Invisible wider hitbox for easier clicking */} 430 430 - <line x1={sourceX} y1={y1} x2={sourceX} y2={y2} stroke="transparent" strokeWidth={16} /> 431 431 - {/* Visible dotted line */} 432 432 - <line 433 433 - x1={sourceX} 434 434 - y1={y1} 435 435 - x2={sourceX} 436 436 - y2={y2} 437 437 - stroke={sourceColor} 438 438 - strokeWidth={strokeWidth} 439 439 - strokeOpacity={0.7} 440 440 - strokeDasharray="3 6" 441 441 - strokeLinecap="round" 442 442 - className="group-hover:[stroke-width:3] group-hover:[stroke-opacity:1] transition-[stroke-width,stroke-opacity] duration-150" 443 443 - data-edge-type="collapsed-stack" 444 444 - data-stack-id={collapsedStackId} 445 445 - data-source-revision={sourceRevision.change_id} 446 446 - data-target-revision={targetRevision?.change_id} 447 447 - /> 448 448 - </g> 449 449 - ); 450 450 - } 451 451 - 452 452 - // For expanded stacks, make the edge clickable to collapse 453 453 - if (expandedStackId) { 454 454 - const expandedLabel = `Click to collapse stack`; 455 455 - // Use full stack bounds if available, otherwise fall back to node bounds 456 456 - const hitboxY1 = stackTopY !== undefined ? stackTopY : y1; 457 457 - const hitboxY2 = stackBottomY !== undefined ? stackBottomY : y2; 458 458 - 459 459 - // Apply hover styling reactively based on atom state 460 460 - const hoverStrokeWidth = isStackHovered ? 3 : strokeWidth; 461 461 - const hoverStrokeOpacity = isStackHovered ? 1 : strokeOpacity; 462 462 - 463 463 - return ( 464 464 - <g 465 465 - aria-label={expandedLabel} 466 466 - className="cursor-pointer" 467 467 - style={{ pointerEvents: "auto" }} 468 468 - onClick={() => onToggleStack?.(expandedStackId)} 469 469 - onMouseEnter={() => onHoverStack(expandedStackId)} 470 470 - onMouseLeave={() => onHoverStack(null)} 471 471 - > 472 472 - <title>{expandedLabel}</title> 473 473 - {/* Invisible wider hitbox covering full stack height */} 474 474 - <line 475 475 - x1={sourceX} 476 476 - y1={hitboxY1} 477 477 - x2={targetX} 478 478 - y2={hitboxY2} 479 479 - stroke="transparent" 480 480 - strokeWidth={16} 481 481 - /> 482 482 - <line 483 483 - x1={sourceX} 484 484 - y1={y1} 485 485 - x2={targetX} 486 486 - y2={y2} 487 487 - stroke={isDeemphasized ? strokeColor : sourceColor} 488 488 - strokeWidth={hoverStrokeWidth} 489 489 - strokeOpacity={hoverStrokeOpacity} 490 490 - strokeDasharray={isDashed ? "4 4" : undefined} 491 491 - className="transition-[stroke-width,stroke-opacity] duration-150" 492 492 - data-edge-type={edgeType} 493 493 - data-source-revision={sourceRevision.change_id} 494 494 - data-target-revision={targetRevision?.change_id} 495 495 - /> 496 496 - </g> 497 497 - ); 498 498 - } 499 499 - 500 500 - return ( 501 501 - <g aria-label={ariaLabel} style={{ pointerEvents: "none" }}> 502 502 - <title>{ariaLabel}</title> 503 503 - <line 504 504 - x1={sourceX} 505 505 - y1={y1} 506 506 - x2={targetX} 507 507 - y2={y2} 508 508 - stroke={isDeemphasized ? strokeColor : sourceColor} 509 509 - strokeWidth={strokeWidth} 510 510 - strokeOpacity={strokeOpacity} 511 511 - strokeDasharray={isDashed ? "4 4" : undefined} 512 512 - data-edge-type={edgeType} 513 513 - data-source-revision={sourceRevision.change_id} 514 514 - data-target-revision={targetRevision?.change_id} 515 515 - /> 516 516 - </g> 517 517 - ); 518 518 - } 519 519 - 520 520 - // Cross-lane: horizontal from source, curve down into target's lane 521 521 - const goingRight = targetX > sourceX; 522 522 - const arcRadius = 10; 523 523 - 524 524 - return ( 525 525 - <g aria-label={ariaLabel} style={{ pointerEvents: "none" }}> 526 526 - <title>{ariaLabel}</title> 527 527 - <path 528 528 - d={`M ${sourceX} ${sourceY + NODE_RADIUS} 529 529 - L ${targetX - arcRadius * (goingRight ? 1 : -1)} ${sourceY + NODE_RADIUS} 530 530 - Q ${targetX} ${sourceY + NODE_RADIUS} ${targetX} ${sourceY + NODE_RADIUS + arcRadius} 531 531 - L ${targetX} ${targetY - NODE_RADIUS}`} 532 532 - fill="none" 533 533 - stroke={strokeColor} 534 534 - strokeWidth={strokeWidth} 535 535 - strokeOpacity={strokeOpacity} 536 536 - strokeDasharray={isDashed ? "4 4" : undefined} 537 537 - data-edge-type={edgeType} 538 538 - data-source-revision={sourceRevision.change_id} 539 539 - data-target-revision={targetRevision?.change_id} 540 540 - /> 541 541 - </g> 542 542 - ); 543 543 - } 544 544 - 545 545 - interface EdgeLayerProps { 546 546 - bindings: EdgeBinding[]; 547 547 - revisionMap: Map<string, Revision>; 548 548 - getRowCenter: (row: number) => number; 549 549 - commitToRow: Map<string, number>; 550 550 - totalHeight: number; 551 551 - width: number; 552 552 - visibleStartRow: number; 553 553 - visibleEndRow: number; 554 554 - stackById: Map<string, RevisionStack>; 555 555 - changeIdToCommitId: Map<string, string>; 556 556 - onToggleStack?: (stackId: string) => void; 557 557 - } 558 558 - 559 559 - // EdgeLayer - Renders all semantic edge components 560 560 - function EdgeLayer({ 561 561 - bindings, 562 562 - revisionMap, 563 563 - getRowCenter, 564 564 - commitToRow, 565 565 - totalHeight, 566 566 - width, 567 567 - visibleStartRow, 568 568 - visibleEndRow, 569 569 - stackById, 570 570 - changeIdToCommitId, 571 571 - onToggleStack, 572 572 - }: EdgeLayerProps) { 573 573 - // Use atom for hover state - automatically syncs with stack toggling and view mode changes 574 574 - const [hoveredStackId, setHoveredStackId] = useAtom(hoveredStackIdAtom); 575 575 - 576 576 - // Add overscan for edges that might span across viewport boundary 577 577 - // Use larger overscan to handle collapsed stack edges that span many rows 578 578 - const overscan = 15; 579 579 - const startRow = Math.max(0, visibleStartRow - overscan); 580 580 - const endRow = visibleEndRow + overscan; 581 581 - 582 582 - // Filter bindings to those visible in the viewport 583 583 - const visibleBindings = bindings.filter((binding) => { 584 584 - const sourceRow = commitToRow.get(binding.sourceRevisionId); 585 585 - const targetRow = commitToRow.get(binding.targetRevisionId); 586 586 - if (sourceRow === undefined) return false; 587 587 - 588 588 - // For missing stubs, just check if source is near visible range 589 589 - if (binding.isMissingStub) { 590 590 - return sourceRow >= startRow && sourceRow <= endRow; 591 591 - } 592 592 - 593 593 - if (targetRow === undefined) return false; 594 594 - 595 595 - // Check if edge passes through visible area 596 596 - const minRow = Math.min(sourceRow, targetRow); 597 597 - const maxRow = Math.max(sourceRow, targetRow); 598 598 - return maxRow >= startRow && minRow <= endRow; 599 599 - }); 600 600 - 601 601 - return ( 602 602 - <svg 603 603 - width={width} 604 604 - height={totalHeight} 605 605 - className="shrink-0 absolute top-0 left-0 z-20" 606 606 - role="img" 607 607 - aria-label="Revision connections" 608 608 - > 609 609 - <title>Revision graph edges</title> 610 610 - {visibleBindings.map((binding) => { 611 611 - const sourceRow = commitToRow.get(binding.sourceRevisionId); 612 612 - const targetRow = binding.isMissingStub 613 613 - ? sourceRow !== undefined 614 614 - ? sourceRow + 1 615 615 - : undefined 616 616 - : commitToRow.get(binding.targetRevisionId); 617 617 - 618 618 - if (sourceRow === undefined) return null; 619 619 - 620 620 - const sourceRevision = revisionMap.get(binding.sourceRevisionId); 621 621 - const targetRevision = binding.targetRevisionId 622 622 - ? (revisionMap.get(binding.targetRevisionId) ?? null) 623 623 - : null; 624 624 - 625 625 - if (!sourceRevision) return null; 626 626 - 627 627 - // For expanded stacks, calculate full stack bounds 628 628 - let stackTopY: number | undefined; 629 629 - let stackBottomY: number | undefined; 630 630 - if (binding.expandedStackId) { 631 631 - const stack = stackById.get(binding.expandedStackId); 632 632 - if (stack) { 633 633 - const topCommitId = changeIdToCommitId.get(stack.topChangeId); 634 634 - const bottomCommitId = changeIdToCommitId.get(stack.bottomChangeId); 635 635 - const topRow = topCommitId ? commitToRow.get(topCommitId) : undefined; 636 636 - const bottomRow = bottomCommitId ? commitToRow.get(bottomCommitId) : undefined; 637 637 - if (topRow !== undefined && bottomRow !== undefined) { 638 638 - stackTopY = getRowCenter(topRow) - NODE_RADIUS; 639 639 - stackBottomY = getRowCenter(bottomRow) + NODE_RADIUS; 640 640 - } 641 641 - } 642 642 - } 643 643 - 644 644 - // Use a key that captures the edge's structural identity: 645 645 - // source, target (which changes when collapsed), and stack state 646 646 - const edgeKey = `${binding.sourceRevisionId}->${binding.targetRevisionId}:${binding.collapsedStackId ?? binding.expandedStackId ?? "none"}`; 647 647 - 648 648 - return ( 649 649 - <GraphEdge 650 650 - key={edgeKey} 651 651 - binding={binding} 652 652 - sourceY={getRowCenter(sourceRow)} 653 653 - targetY={ 654 654 - targetRow !== undefined 655 655 - ? getRowCenter(targetRow) 656 656 - : getRowCenter(sourceRow) + ROW_HEIGHT 657 657 - } 658 658 - sourceRevision={sourceRevision} 659 659 - targetRevision={targetRevision} 660 660 - stackTopY={stackTopY} 661 661 - stackBottomY={stackBottomY} 662 662 - hoveredStackId={hoveredStackId} 663 663 - onHoverStack={setHoveredStackId} 664 664 - onToggleStack={onToggleStack} 665 665 - /> 666 666 - ); 667 667 - })} 668 668 - </svg> 669 669 - ); 670 670 - } 671 671 - 672 672 - // ============================================================================ 673 673 - // End of Semantic Graph Components 674 674 - // ============================================================================ 675 675 - 676 676 - interface ParentConnection { 677 677 - parentRow: number; 678 678 - parentLane: number; 679 679 - edgeType: GraphEdgeType; 680 680 - isDeemphasized?: boolean; 681 681 - isMissingStub?: boolean; 682 682 - } 683 683 - 684 684 - interface GraphNode { 685 685 - revision: Revision; 686 686 - row: number; 687 687 - lane: number; 688 688 - parentConnections: ParentConnection[]; 689 689 - } 690 690 - 691 691 - interface GraphRow { 692 692 - revision: Revision; 693 693 - lane: number; 694 694 - maxLaneOnRow: number; // Rightmost lane occupied by any graph element (node or edge) on this row 695 695 - } 696 696 - 697 697 - interface GraphData { 698 698 - nodes: GraphNode[]; 699 699 - laneCount: number; 700 700 - rows: GraphRow[]; 701 701 - edgeBindings: EdgeBinding[]; 702 702 - } 703 703 - 704 704 - // Get the set of commit IDs in the working copy's ancestor chain (for lane 0) 705 705 - function getWorkingCopyChain(revisions: Revision[]): Set<string> { 706 706 - const commitMap = new Map(revisions.map((r) => [r.commit_id, r])); 707 707 - const workingCopy = revisions.find((r) => r.is_working_copy); 708 708 - const chain = new Set<string>(); 709 709 - 710 710 - if (workingCopy) { 711 711 - const queue = [workingCopy.commit_id]; 712 712 - while (queue.length > 0) { 713 713 - const id = queue.shift(); 714 714 - if (!id || chain.has(id)) continue; 715 715 - chain.add(id); 716 716 - const rev = commitMap.get(id); 717 717 - if (rev) { 718 718 - // Follow first non-missing parent edge for the main chain 719 719 - const firstEdge = rev.parent_edges.find((e) => e.edge_type !== "missing"); 720 720 - if (firstEdge && commitMap.has(firstEdge.parent_id)) { 721 721 - queue.push(firstEdge.parent_id); 722 722 - } 723 723 - } 724 724 - } 725 725 - } 726 726 - 727 727 - return chain; 728 728 - } 729 729 - 730 730 - function buildGraph(revisions: Revision[]): GraphData { 731 731 - if (revisions.length === 0) return { nodes: [], laneCount: 1, rows: [], edgeBindings: [] }; 732 732 - 733 733 - // Map commit_id -> Revision for ancestry lookups 734 734 - const commitMap = new Map(revisions.map((r) => [r.commit_id, r])); 735 735 - 736 736 - // Compute ancestry relationships within the visible revset 737 737 - // This determines which revisions are actually related and should be connected 738 738 - const ancestry = computeRevisionAncestry(revisions); 739 739 - 740 740 - // Create rows for all revisions (no elision) 741 741 - const orderedRevisions = reorderForGraph(revisions); 742 742 - const rows: GraphRow[] = orderedRevisions.map((rev) => ({ 743 743 - revision: rev, 744 744 - lane: 0, 745 745 - maxLaneOnRow: 0, 746 746 - })); 747 747 - 748 748 - // Get working copy chain - these commits should all be in lane 0 749 749 - const workingCopyChain = getWorkingCopyChain(revisions); 750 750 - 751 751 - // Build row index map 752 752 - const commitToRow = new Map<string, number>(); 753 753 - rows.forEach((row, idx) => { 754 754 - commitToRow.set(row.revision.commit_id, idx); 755 755 - }); 756 756 - 757 757 - const commitToLane = new Map<string, number>(); 758 758 - const nodes: GraphNode[] = []; 759 759 - 760 760 - // Simple 2-lane system: 761 761 - // Lane 0: trunk commits and working copy chain 762 762 - // Lane 1: everything else (all feature branches) 763 763 - for (const rev of orderedRevisions) { 764 764 - const isOnWorkingCopyChain = workingCopyChain.has(rev.commit_id); 765 765 - if (rev.is_trunk || isOnWorkingCopyChain) { 766 766 - commitToLane.set(rev.commit_id, 0); 767 767 - } else { 768 768 - commitToLane.set(rev.commit_id, 1); 769 769 - } 770 770 - } 771 771 - 772 772 - // Second pass: build nodes with parent connections 773 773 - for (let rowIdx = 0; rowIdx < rows.length; rowIdx++) { 774 774 - const row = rows[rowIdx]; 775 775 - const revision = row.revision; 776 776 - const lane = commitToLane.get(revision.commit_id) ?? 0; 777 777 - 778 778 - const parentConnections: ParentConnection[] = []; 779 779 - 780 780 - // Use ancestry.parents which only includes parents within the visible revset 781 781 - // This ensures we only draw edges to actual ancestors, not to unrelated revisions 782 782 - const visibleParents = ancestry.parents.get(revision.commit_id) ?? []; 783 783 - 784 784 - // Also check original parent_edges for edge type info and missing edges 785 785 - const parentEdgeMap = new Map(revision.parent_edges.map((e) => [e.parent_id, e])); 786 786 - 787 787 - // Detect "main merges into branch" scenario 788 788 - const isMerge = visibleParents.length > 1; 789 789 - const isMutableCommit = !revision.is_immutable; 790 790 - 791 791 - // Process visible parents (ancestors within our revset) 792 792 - for (let i = 0; i < visibleParents.length; i++) { 793 793 - const parentId = visibleParents[i]; 794 794 - const parentEdge = parentEdgeMap.get(parentId); 795 795 - const edgeType = parentEdge?.edge_type ?? "direct"; 796 796 - 797 797 - const parentRow = commitToRow.get(parentId); 798 798 - if (parentRow === undefined) continue; 799 799 - 800 800 - let parentLane = commitToLane.get(parentId); 801 801 - if (parentLane === undefined) { 802 802 - // This shouldn't happen after first pass, but handle gracefully 803 803 - parentLane = lane; 804 804 - commitToLane.set(parentId, parentLane); 805 805 - } 806 806 - 807 807 - // Check if parent is immutable (look up the actual parent revision) 808 808 - const parentRev = commitMap.get(parentId); 809 809 - const parentIsImmutable = parentRev?.is_immutable ?? false; 810 810 - 811 811 - // De-emphasize if: merge commit, mutable commit, immutable parent 812 812 - // IMPORTANT: Don't de-emphasize first parent (i === 0) - that's the mainline 813 813 - const isDeemphasized = isMerge && isMutableCommit && parentIsImmutable && i > 0; 814 814 - 815 815 - parentConnections.push({ parentRow, parentLane, edgeType, isDeemphasized }); 816 816 - } 817 817 - 818 818 - // Handle missing edges (parents outside our revset) 819 819 - // Only show stub if we have original parents but no visible parents 820 820 - const hasMissingParents = revision.parent_edges.some((e) => e.edge_type === "missing"); 821 821 - const hasParentsOutsideView = revision.parent_ids.length > visibleParents.length; 822 822 - 823 823 - if ((hasMissingParents || hasParentsOutsideView) && parentConnections.length === 0) { 824 824 - // All parents are outside the view - show a stub 825 825 - parentConnections.push({ 826 826 - parentRow: rowIdx + 1, // Just one row down for the stub 827 827 - parentLane: lane, 828 828 - edgeType: "missing", 829 829 - isMissingStub: true, 830 830 - }); 831 831 - } else if (hasMissingParents && parentConnections.length > 0) { 832 832 - // Some parents are visible, some are missing - add stub for missing ones 833 833 - parentConnections.push({ 834 834 - parentRow: rowIdx + 1, 835 835 - parentLane: lane, 836 836 - edgeType: "missing", 837 837 - isMissingStub: true, 838 838 - }); 839 839 - } 840 840 - 841 841 - nodes.push({ 842 842 - revision, 843 843 - row: rowIdx, 844 844 - lane, 845 845 - parentConnections, 846 846 - }); 847 847 - } 848 848 - 849 849 - // Update rows with computed lane info from nodes 850 850 - let maxLaneUsed = 0; 851 851 - for (const node of nodes) { 852 852 - const row = rows[node.row]; 853 853 - if (row) { 854 854 - row.lane = node.lane; 855 855 - row.maxLaneOnRow = node.lane; // Initialize with node's lane 856 856 - } 857 857 - maxLaneUsed = Math.max(maxLaneUsed, node.lane); 858 858 - } 859 859 - 860 860 - // Calculate maxLaneOnRow using sweep line algorithm O(n log n) instead of O(n³) 861 861 - // Collect edge spans as events for efficient processing 862 862 - type SpanEvent = { row: number; isStart: boolean; lane: number }; 863 863 - const events: SpanEvent[] = []; 864 864 - 865 865 - for (const node of nodes) { 866 866 - for (const conn of node.parentConnections) { 867 867 - const nodeRow = node.row; 868 868 - const parentRow = conn.parentRow; 869 869 - const nodeLane = node.lane; 870 870 - const parentLane = conn.parentLane; 871 871 - 872 872 - // Cross-lane edge: horizontal segment at node's row uses both lanes 873 873 - if (nodeLane !== parentLane) { 874 874 - const row = rows[nodeRow]; 875 875 - if (row) { 876 876 - row.maxLaneOnRow = Math.max(row.maxLaneOnRow, nodeLane, parentLane); 877 877 - } 878 878 - } 879 879 - 880 880 - // Vertical segment: create start/end events instead of iterating rows 881 881 - const minRow = Math.min(nodeRow, parentRow); 882 882 - const maxRow = Math.max(nodeRow, parentRow); 883 883 - if (maxRow > minRow + 1) { 884 884 - // Edge spans rows [minRow+1, maxRow-1] inclusive 885 885 - events.push({ row: minRow + 1, isStart: true, lane: parentLane }); 886 886 - events.push({ row: maxRow, isStart: false, lane: parentLane }); 887 887 - } 888 888 - } 889 889 - } 890 890 - 891 891 - // Sort events: by row, with starts before ends at same row 892 892 - events.sort((a, b) => a.row - b.row || (a.isStart ? -1 : 1)); 893 893 - 894 894 - // Sweep through rows, tracking active lane counts 895 895 - const laneCounts = new Array(MAX_LANES).fill(0); 896 896 - let eventIdx = 0; 897 897 - 898 898 - for (let r = 0; r < rows.length; r++) { 899 899 - // Process all events at this row 900 900 - while (eventIdx < events.length && events[eventIdx].row === r) { 901 901 - const { isStart, lane } = events[eventIdx]; 902 902 - laneCounts[lane] += isStart ? 1 : -1; 903 903 - eventIdx++; 904 904 - } 905 905 - 906 906 - // Find max active lane for this row (check from highest lane down) 907 907 - for (let lane = MAX_LANES - 1; lane >= 0; lane--) { 908 908 - if (laneCounts[lane] > 0) { 909 909 - rows[r].maxLaneOnRow = Math.max(rows[r].maxLaneOnRow, lane); 910 910 - break; 911 911 - } 912 912 - } 913 913 - } 914 914 - 915 915 - // Ensure global consistency - propagate lane usage through connected sections 916 916 - // This handles cases where disconnected branches exist 917 917 - const globalMaxLane = maxLaneUsed; 918 918 - for (const row of rows) { 919 919 - // Ensure every row accounts for at least its own node's lane 920 920 - row.maxLaneOnRow = Math.max(row.maxLaneOnRow, row.lane); 921 921 - } 922 922 - 923 923 - // Generate semantic edge bindings from nodes' parent connections 924 924 - const edgeBindings: EdgeBinding[] = []; 925 925 - let edgeCounter = 0; 926 926 - 927 927 - for (const node of nodes) { 928 928 - for (const conn of node.parentConnections) { 929 929 - // For missing stubs, use commit_id of source and empty target 930 930 - const targetCommitId = conn.isMissingStub 931 931 - ? "" 932 932 - : (rows[conn.parentRow]?.revision.commit_id ?? ""); 933 933 - 934 934 - edgeBindings.push({ 935 935 - id: `edge-${node.revision.commit_id}-${edgeCounter++}`, 936 936 - sourceRevisionId: node.revision.commit_id, 937 937 - targetRevisionId: targetCommitId, 938 938 - sourceLane: node.lane, 939 939 - targetLane: conn.parentLane, 940 940 - edgeType: conn.edgeType, 941 941 - isDeemphasized: conn.isDeemphasized, 942 942 - isMissingStub: conn.isMissingStub, 943 943 - }); 944 944 - } 945 945 - } 946 946 - 947 947 - return { nodes, laneCount: globalMaxLane + 1, rows, edgeBindings }; 948 948 - } 949 949 - 950 950 - function laneToX(lane: number): number { 951 951 - return LANE_PADDING + lane * LANE_WIDTH + LANE_WIDTH / 2; 952 952 - } 953 953 - 954 954 - function laneColor(lane: number): string { 955 955 - return LANE_COLORS[lane % LANE_COLORS.length]; 956 956 - } 957 957 - 958 958 - function RevisionRow({ 959 959 - revision, 960 960 - lane, 961 961 - maxLaneOnRow, 962 962 - isSelected, 963 963 - isChecked, 964 964 - onSelect, 965 965 - isFlashing, 966 966 - isDimmed, 967 967 - isExpanded, 968 968 - isFocused, 969 969 - repoPath, 970 970 - isPendingAbandon, 971 971 - jumpHint, 972 972 - jumpModeActive, 973 973 - jumpQuery, 974 974 - }: { 975 975 - revision: Revision; 976 976 - lane: number; 977 977 - maxLaneOnRow: number; 978 978 - isSelected: boolean; 979 979 - isChecked: boolean; 980 980 - onSelect: (changeId: string, modifiers: { shift: boolean; meta: boolean }) => void; 981 981 - isFlashing: boolean; 982 982 - isDimmed: boolean; 983 983 - isExpanded: boolean; 984 984 - isFocused: boolean; 985 985 - repoPath: string | null; 986 986 - isPendingAbandon: boolean; 987 987 - jumpHint: string | null; 988 988 - jumpModeActive: boolean; 989 989 - jumpQuery: string; 990 990 - }) { 991 991 - const firstLine = revision.description.split("\n")[0] || "(no description)"; 992 992 - const fullDescription = revision.description || "(no description)"; 993 993 - 994 994 - // Calculate the node position area - leaves space for graph edges on the left 995 995 - const nodeAreaWidth = LANE_PADDING + (maxLaneOnRow + 1) * LANE_WIDTH; 996 996 - const nodeOffset = laneToX(lane); 997 997 - const color = laneColor(lane); 998 998 - 999 999 - const selectedFile = useSearch({ strict: false, select: (s) => s.file ?? null }); 1000 1000 - const search = useSearch({ strict: false }); 1001 1001 - const navigate = useNavigate(); 1002 1002 - 1003 1003 - const changedFilesCollection = 1004 1004 - isExpanded && repoPath 1005 1005 - ? getRevisionChangesCollection(repoPath, revision.change_id) 1006 1006 - : emptyChangesCollection; 1007 1007 - const changedFilesQuery = useLiveQuery(changedFilesCollection); 1008 1008 - 1009 1009 - function handleSelectFile(filePath: string) { 1010 1010 - navigate({ 1011 1011 - // biome-ignore lint/suspicious/noExplicitAny: TanStack Router search params require loose typing 1012 1012 - search: { ...search, file: filePath } as any, 1013 1013 - }); 1014 1014 - } 1015 1015 - 1016 1016 - // Constants matching edge layer calculations 1017 1017 - const TOP_PADDING = 16; 1018 1018 - const CONTENT_MIN_HEIGHT = 56; 1019 1019 - const nodeSize = revision.is_working_copy ? NODE_RADIUS * 2 + 14 : NODE_RADIUS * 2 + 8; 1020 1020 - 1021 1021 - return ( 1022 1022 - <div style={{ height: isExpanded ? "auto" : ROW_HEIGHT }} className="flex flex-col relative"> 1023 1023 - {/* Graph node - absolutely positioned to align with edge layer */} 1024 1024 - <div 1025 1025 - className="absolute z-20 flex items-center justify-center" 1026 1026 - style={{ 1027 1027 - left: nodeOffset - nodeSize / 2, 1028 1028 - top: TOP_PADDING + CONTENT_MIN_HEIGHT / 2 - nodeSize / 2, 1029 1029 - }} 1030 1030 - > 1031 1031 - <GraphNode revision={revision} lane={lane} isSelected={isSelected} color={color} /> 1032 1032 - </div> 1033 1033 - <div className="flex items-start min-h-[56px] pt-4"> 1034 1034 - {/* Spacer for graph area */} 1035 1035 - <div className="shrink-0" style={{ width: nodeAreaWidth }} /> 1036 1036 - <div 1037 1037 - className={`relative flex-1 mr-2 min-w-0 overflow-hidden rounded my-2 mx-1 select-none border ${ 1038 1038 - isFocused || isChecked 1039 1039 - ? "bg-accent/40 border-accent/60 hover:bg-accent/50" 1040 1040 - : "bg-card hover:bg-muted border-border" 1041 1041 - } text-card-foreground shadow-sm hover:shadow hover:cursor-pointer ${ 1042 1042 - revision.is_immutable ? "opacity-60" : "" 1043 1043 - } ${isDimmed ? "opacity-40" : ""}`} 1044 1044 - data-focused={isFocused || undefined} 1045 1045 - data-selected={isSelected || undefined} 1046 1046 - data-checked={isChecked || undefined} 1047 1047 - data-expanded={isExpanded || undefined} 1048 1048 - data-change-id={revision.change_id} 1049 1049 - onClick={(e) => { 1050 1050 - // Prevent text selection on shift+click 1051 1051 - if (e.shiftKey) { 1052 1052 - e.preventDefault(); 1053 1053 - window.getSelection()?.removeAllRanges(); 1054 1054 - } 1055 1055 - onSelect(revision.change_id, { shift: e.shiftKey, meta: e.metaKey || e.ctrlKey }); 1056 1056 - }} 1057 1057 - > 1058 1058 - <div className={`px-3 py-2 min-w-0 ${isPendingAbandon ? "blur-sm" : ""}`}> 1059 1059 - <div className="flex items-center gap-2 flex-nowrap min-w-0"> 1060 1060 - <code 1061 1061 - className={`text-xs font-mono rounded px-0.5 shrink-0 ${ 1062 1062 - isFlashing ? "bg-primary/40 animate-pulse" : "" 1063 1063 - } text-muted-foreground`} 1064 1064 - > 1065 1065 - {jumpModeActive && jumpHint ? ( 1066 1066 - <> 1067 1067 - {/* Already matched portion */} 1068 1068 - {jumpQuery && ( 1069 1069 - <span className="bg-primary/30 text-primary font-semibold"> 1070 1070 - {revision.change_id_short.slice(0, jumpQuery.length)} 1071 1071 - </span> 1072 1072 - )} 1073 1073 - {/* Next character to type (the hint) */} 1074 1074 - <span className="bg-primary text-primary-foreground font-semibold rounded-sm"> 1075 1075 - {revision.change_id_short[jumpQuery.length]} 1076 1076 - </span> 1077 1077 - {/* Rest of the ID */} 1078 1078 - <span>{revision.change_id_short.slice(jumpQuery.length + 1)}</span> 1079 1079 - </> 1080 1080 - ) : ( 1081 1081 - revision.change_id_short 1082 1082 - )} 1083 1083 - </code> 1084 1084 - {revision.bookmarks.length > 0 && ( 1085 1085 - <span 1086 1086 - className="text-xs text-primary font-medium truncate min-w-0 whitespace-nowrap" 1087 1087 - title={revision.bookmarks.join(", ")} 1088 1088 - > 1089 1089 - {revision.bookmarks.join(", ")} 1090 1090 - </span> 1091 1091 - )} 1092 1092 - <span className="text-xs text-muted-foreground truncate min-w-0 shrink-0"> 1093 1093 - {revision.author.split("@")[0]} · {revision.timestamp} 1094 1094 - </span> 1095 1095 - </div> 1096 1096 - <div className={`text-sm mt-1 ${isExpanded ? "" : "truncate"}`}>{firstLine}</div> 1097 1097 - </div> 1098 1098 - {isExpanded && ( 1099 1099 - <div className={`px-3 pb-3 pt-0 space-y-3 ${isPendingAbandon ? "blur-sm" : ""}`}> 1100 1100 - <pre className="text-xs text-muted-foreground whitespace-pre-wrap break-words font-mono bg-muted/40 border border-border/60 rounded p-2"> 1101 1101 - {fullDescription} 1102 1102 - </pre> 1103 1103 - <div className="border border-border rounded-lg overflow-hidden bg-background"> 1104 1104 - <ChangedFilesList 1105 1105 - files={changedFilesQuery.data ?? []} 1106 1106 - selectedFile={selectedFile} 1107 1107 - onSelectFile={handleSelectFile} 1108 1108 - isLoading={changedFilesQuery.isLoading} 1109 1109 - /> 1110 1110 - </div> 1111 1111 - </div> 1112 1112 - )} 1113 1113 - {isPendingAbandon && ( 1114 1114 - <div className="absolute inset-0 flex items-center justify-center bg-destructive/10 rounded"> 1115 1115 - <div className="text-sm font-medium text-destructive-foreground bg-destructive/90 px-3 py-1.5 rounded"> 1116 1116 - Abandon this revision? <kbd className="ml-1 px-1 bg-background/20 rounded">Y</kbd> /{" "} 1117 1117 - <kbd className="px-1 bg-background/20 rounded">N</kbd> 1118 1118 - </div> 1119 1119 - </div> 1120 1120 - )} 1121 1121 - </div> 1122 1122 - </div> 1123 1123 - </div> 1124 1124 - ); 1125 1125 - } 1126 1126 - 1127 1127 - // Compute related revisions (ancestors + descendants) of a selected revision 1128 1128 - function getRelatedRevisions(revisions: Revision[], selectedChangeId: string | null): Set<string> { 1129 1129 - if (!selectedChangeId) return new Set(); 1130 1130 - 1131 1131 - const related = new Set<string>(); 1132 1132 - const commitIdToChangeId = new Map<string, string>(); 1133 1133 - const changeIdToCommitId = new Map<string, string>(); 1134 1134 - const childrenMap = new Map<string, string[]>(); // commit_id -> child commit_ids 1135 1135 - const parentMap = new Map<string, string[]>(); // commit_id -> parent commit_ids 1136 1136 - 1137 1137 - // Build maps 1138 1138 - for (const rev of revisions) { 1139 1139 - commitIdToChangeId.set(rev.commit_id, rev.change_id); 1140 1140 - changeIdToCommitId.set(rev.change_id, rev.commit_id); 1141 1141 - const parents: string[] = []; 1142 1142 - for (const edge of rev.parent_edges) { 1143 1143 - if (edge.edge_type === "missing") continue; 1144 1144 - parents.push(edge.parent_id); 1145 1145 - const children = childrenMap.get(edge.parent_id) ?? []; 1146 1146 - children.push(rev.commit_id); 1147 1147 - childrenMap.set(edge.parent_id, children); 1148 1148 - } 1149 1149 - parentMap.set(rev.commit_id, parents); 1150 1150 - } 1151 1151 - 1152 1152 - const selectedCommitId = changeIdToCommitId.get(selectedChangeId); 1153 1153 - if (!selectedCommitId) return new Set(); 1154 1154 - 1155 1155 - // BFS to find ancestors 1156 1156 - const ancestorQueue = [selectedCommitId]; 1157 1157 - const visited = new Set<string>(); 1158 1158 - while (ancestorQueue.length > 0) { 1159 1159 - const id = ancestorQueue.shift()!; 1160 1160 - if (visited.has(id)) continue; 1161 1161 - visited.add(id); 1162 1162 - const changeId = commitIdToChangeId.get(id); 1163 1163 - if (changeId) related.add(changeId); 1164 1164 - const parents = parentMap.get(id) ?? []; 1165 1165 - for (const parentId of parents) { 1166 1166 - ancestorQueue.push(parentId); 1167 1167 - } 1168 1168 - } 1169 1169 - 1170 1170 - // BFS to find descendants 1171 1171 - const descendantQueue = [selectedCommitId]; 1172 1172 - visited.clear(); 1173 1173 - while (descendantQueue.length > 0) { 1174 1174 - const id = descendantQueue.shift()!; 1175 1175 - if (visited.has(id)) continue; 1176 1176 - visited.add(id); 1177 1177 - const changeId = commitIdToChangeId.get(id); 1178 1178 - if (changeId) related.add(changeId); 1179 1179 - const children = childrenMap.get(id) ?? []; 1180 1180 - for (const childId of children) { 1181 1181 - descendantQueue.push(childId); 1182 1182 - } 1183 1183 - } 1184 1184 - 1185 1185 - return related; 1186 1186 - } 1187 1187 - 1188 1188 - export const RevisionGraph = forwardRef<RevisionGraphHandle, RevisionGraphProps>( 1189 1189 - function RevisionGraph( 1190 1190 - { revisions, selectedRevision, onSelectRevision, isLoading, flash, repoPath, pendingAbandon }, 1191 1191 - ref, 1192 1192 - ) { 1193 1193 - const parentRef = useRef<HTMLDivElement>(null); 1194 1194 - const { 1195 1195 - nodes, 1196 1196 - laneCount, 1197 1197 - rows: allRows, 1198 1198 - edgeBindings, 1199 1199 - } = useMemo(() => buildGraph(revisions), [revisions]); 1200 1200 - const expanded = useSearch({ strict: false, select: (s) => s.expanded }); 1201 1201 - const search = useSearch({ strict: false }); 1202 1202 - const navigate = useNavigate(); 1203 1203 - const [inlineJumpQuery, setInlineJumpQuery] = useAtom(inlineJumpQueryAtom); 1204 1204 - const inlineJumpMode = inlineJumpQuery !== null; 1205 1205 - const [viewMode] = useAtom(viewModeAtom); 1206 1206 - const [, setFocusPanel] = useAtom(focusPanelAtom); 1207 1207 - 1208 1208 - // Detect collapsible stacks 1209 1209 - const stacks = useMemo(() => detectStacks(revisions), [revisions]); 1210 1210 - 1211 1211 - // Prefetch diffs for all revisions in background 1212 1212 - // This eagerly creates TanStack DB collections which trigger async fetches 1213 1213 - useMemo(() => { 1214 1214 - if (repoPath && revisions.length > 0) { 1215 1215 - const changeIds = revisions.map((r) => r.change_id); 1216 1216 - prefetchRevisionDiffs(repoPath, changeIds); 1217 1217 - } 1218 1218 - }, [repoPath, revisions]); 1219 1219 - 1220 1220 - // Track which stacks are expanded (empty = all collapsed by default) 1221 1221 - const [expandedStacks, setExpandedStacks] = useAtom(expandedStacksAtom); 1222 1222 - // Track hovered stack for coordinated edge highlighting 1223 1223 - const [, setHoveredStackId] = useAtom(hoveredStackIdAtom); 1224 1224 - 1225 1225 - // Read focused stack and selection from URL params 1226 1226 - const focusedStackId = useSearch({ strict: false, select: (s) => s.stack ?? null }); 1227 1227 - const selectedParam = useSearch({ strict: false, select: (s) => s.selected ?? "" }); 1228 1228 - const selectionAnchor = useSearch({ strict: false, select: (s) => s.selectionAnchor ?? null }); 1229 1229 - const selectedRevisions = useMemo(() => { 1230 1230 - if (!selectedParam) return new Set<string>(); 1231 1231 - return new Set(selectedParam.split(",").filter(Boolean)); 1232 1232 - }, [selectedParam]); 1233 1233 - const hasSelection = selectedRevisions.size > 0; 1234 1234 - 1235 1235 - // Update URL with new selection 1236 1236 - function setSelectedRevisions(updater: Set<string> | ((prev: Set<string>) => Set<string>)) { 1237 1237 - const newSelection = typeof updater === "function" ? updater(selectedRevisions) : updater; 1238 1238 - const selected = newSelection.size > 0 ? [...newSelection].join(",") : undefined; 1239 1239 - navigate({ 1240 1240 - search: { ...search, selected } as any, 1241 1241 - replace: true, 1242 1242 - }); 1243 1243 - } 1244 1244 - 1245 1245 - // Toggle a revision's checked state 1246 1246 - function toggleRevisionCheck(changeId: string) { 1247 1247 - const next = new Set(selectedRevisions); 1248 1248 - if (next.has(changeId)) { 1249 1249 - next.delete(changeId); 1250 1250 - } else { 1251 1251 - next.add(changeId); 1252 1252 - } 1253 1253 - setSelectedRevisions(next); 1254 1254 - } 1255 1255 - 1256 1256 - // Clear selection when Escape is pressed (when not in jump mode) 1257 1257 - useKeyboardShortcut({ 1258 1258 - key: "Escape", 1259 1259 - modifiers: {}, 1260 1260 - onPress: () => { 1261 1261 - navigate({ 1262 1262 - search: { 1263 1263 - ...search, 1264 1264 - selected: undefined, 1265 1265 - selectionAnchor: undefined, 1266 1266 - stack: undefined, 1267 1267 - } as any, 1268 1268 - replace: true, 1269 1269 - }); 1270 1270 - }, 1271 1271 - enabled: (hasSelection || !!focusedStackId) && !inlineJumpMode, 1272 1272 - }); 1273 1273 - 1274 1274 - // Build lookup maps for stacks 1275 1275 - const { stackByChangeId, stackById, intermediateChangeIds } = useMemo(() => { 1276 1276 - const byChangeId = new Map<string, RevisionStack>(); 1277 1277 - const byId = new Map<string, RevisionStack>(); 1278 1278 - const intermediates = new Set<string>(); 1279 1279 - 1280 1280 - for (const stack of stacks) { 1281 1281 - byId.set(stack.id, stack); 1282 1282 - for (const changeId of stack.changeIds) { 1283 1283 - byChangeId.set(changeId, stack); 1284 1284 - } 1285 1285 - for (const changeId of stack.intermediateChangeIds) { 1286 1286 - intermediates.add(changeId); 1287 1287 - } 1288 1288 - } 1289 1289 - return { stackByChangeId: byChangeId, stackById: byId, intermediateChangeIds: intermediates }; 1290 1290 - }, [stacks]); 1291 1291 - 1292 1292 - // Build node lane lookup by change_id (needed for display row construction) 1293 1293 - const changeIdToLane = useMemo(() => { 1294 1294 - const map = new Map<string, number>(); 1295 1295 - for (const node of nodes) { 1296 1296 - map.set(node.revision.change_id, node.lane); 1297 1297 - } 1298 1298 - return map; 1299 1299 - }, [nodes]); 1300 1300 - 1301 1301 - // Display row can be either a revision row or a collapsed stack row 1302 1302 - type DisplayRow = 1303 1303 - | { type: "revision"; row: GraphRow } 1304 1304 - | { type: "collapsed-stack"; stack: RevisionStack; lane: number }; 1305 1305 - 1306 1306 - // Filter rows to hide collapsed intermediate revisions and replace with a single collapsed stack row 1307 1307 - const displayRows = useMemo(() => { 1308 1308 - const result: DisplayRow[] = []; 1309 1309 - 1310 1310 - for (const row of allRows) { 1311 1311 - const changeId = row.revision.change_id; 1312 1312 - const stack = stackByChangeId.get(changeId); 1313 1313 - 1314 1314 - if (stack && intermediateChangeIds.has(changeId)) { 1315 1315 - // This is an intermediate revision in a stack 1316 1316 - if (expandedStacks.has(stack.id)) { 1317 1317 - // Stack is expanded - show the revision 1318 1318 - result.push({ type: "revision", row }); 1319 1319 - } 1320 1320 - // If collapsed, skip this row 1321 1321 - } else { 1322 1322 - // Not an intermediate or not in a stack - always show 1323 1323 - result.push({ type: "revision", row }); 1324 1324 - 1325 1325 - // If this is the top of a collapsed stack, insert a collapsed stack row after it 1326 1326 - if (stack && changeId === stack.topChangeId && !expandedStacks.has(stack.id)) { 1327 1327 - const lane = changeIdToLane.get(changeId) ?? 0; 1328 1328 - result.push({ type: "collapsed-stack", stack, lane }); 1329 1329 - } 1330 1330 - } 1331 1331 - } 1332 1332 - 1333 1333 - return result; 1334 1334 - }, [allRows, stackByChangeId, intermediateChangeIds, expandedStacks, changeIdToLane]); 1335 1335 - 1336 1336 - // Extract just revision rows for edge positioning and other logic 1337 1337 - const rows = useMemo( 1338 1338 - () => 1339 1339 - displayRows 1340 1340 - .filter((d): d is { type: "revision"; row: GraphRow } => d.type === "revision") 1341 1341 - .map((d) => d.row), 1342 1342 - [displayRows], 1343 1343 - ); 1344 1344 - 1345 1345 - // Toggle stack expansion 1346 1346 - function toggleStackExpansion(stackId: string) { 1347 1347 - // Clear hover state since stack structure is changing 1348 1348 - setHoveredStackId(null); 1349 1349 - setExpandedStacks((prev) => { 1350 1350 - const next = new Set(prev); 1351 1351 - if (next.has(stackId)) { 1352 1352 - next.delete(stackId); 1353 1353 - } else { 1354 1354 - next.add(stackId); 1355 1355 - } 1356 1356 - return next; 1357 1357 - }); 1358 1358 - } 1359 1359 - 1360 1360 - // Toggle stack expansion and focus the top of newly revealed revisions when expanding 1361 1361 - function handleToggleStack(stackId: string) { 1362 1362 - const stack = stackById.get(stackId); 1363 1363 - const isCurrentlyExpanded = expandedStacks.has(stackId); 1364 1364 - toggleStackExpansion(stackId); 1365 1365 - 1366 1366 - // If expanding (not currently expanded), focus the first intermediate revision 1367 1367 - // (the top of the newly revealed revisions, not the already-visible top of the stack) 1368 1368 - if (!isCurrentlyExpanded && stack && stack.intermediateChangeIds.length > 0) { 1369 1369 - navigate({ 1370 1370 - search: { 1371 1371 - ...search, 1372 1372 - stack: undefined, 1373 1373 - rev: stack.intermediateChangeIds[0], 1374 1374 - selected: undefined, 1375 1375 - selectionAnchor: undefined, 1376 1376 - } as any, 1377 1377 - replace: true, 1378 1378 - }); 1379 1379 - } 1380 1380 - } 1381 1381 - 1382 1382 - // Maps for lookups - by change_id for UI, by commit_id for graph edges 1383 1383 - const revisionMapByChangeId = new Map(revisions.map((r) => [r.change_id, r])); 1384 1384 - const revisionMapByCommitId = new Map(revisions.map((r) => [r.commit_id, r])); 1385 1385 - 1386 1386 - // Compute related revisions for dimming logic 1387 1387 - // When a stack is focused, use the stack's top and bottom as the "selected" revisions 1388 1388 - const focusedStack = focusedStackId ? stackById.get(focusedStackId) : null; 1389 1389 - const relatedRevisions = useMemo(() => { 1390 1390 - if (focusedStack) { 1391 1391 - // When stack is focused, highlight the stack endpoints and their ancestors/descendants 1392 1392 - const topRelated = getRelatedRevisions(revisions, focusedStack.topChangeId); 1393 1393 - const bottomRelated = getRelatedRevisions(revisions, focusedStack.bottomChangeId); 1394 1394 - // Union of both sets 1395 1395 - return new Set([...topRelated, ...bottomRelated]); 1396 1396 - } 1397 1397 - return getRelatedRevisions(revisions, selectedRevision?.change_id ?? null); 1398 1398 - }, [revisions, focusedStack, selectedRevision?.change_id]); 1399 1399 - 1400 1400 - // Build change_id -> displayRow index map for scrolling and edge positioning 1401 1401 - // IMPORTANT: Use displayRows indices (not rows) to match virtualizer positioning 1402 1402 - const changeIdToIndex = new Map<string, number>(); 1403 1403 - const commitToRowIndex = new Map<string, number>(); 1404 1404 - for (let i = 0; i < displayRows.length; i++) { 1405 1405 - const displayRow = displayRows[i]; 1406 1406 - if (displayRow.type === "revision") { 1407 1407 - changeIdToIndex.set(displayRow.row.revision.change_id, i); 1408 1408 - commitToRowIndex.set(displayRow.row.revision.commit_id, i); 1409 1409 - } 1410 1410 - } 1411 1411 - 1412 1412 - // Create a mapping of change_id -> commit_id for edge remapping 1413 1413 - const changeIdToCommitId = useMemo(() => { 1414 1414 - const map = new Map<string, string>(); 1415 1415 - for (const rev of revisions) { 1416 1416 - map.set(rev.change_id, rev.commit_id); 1417 1417 - } 1418 1418 - return map; 1419 1419 - }, [revisions]); 1420 1420 - 1421 1421 - // Filter edge bindings to handle collapsed/expanded stacks 1422 1422 - // When a stack is collapsed, edges from/to intermediates should be remapped 1423 1423 - // When a stack is expanded, edges within it should be clickable to collapse 1424 1424 - const filteredEdgeBindings = useMemo(() => { 1425 1425 - // Maps for collapsed stacks: intermediate commits -> bottom commit 1426 1426 - const hiddenToVisible = new Map<string, { targetCommitId: string; stack: RevisionStack }>(); 1427 1427 - const topCommitToStack = new Map<string, RevisionStack>(); 1428 1428 - // Map for expanded stacks: all commits in expanded stacks 1429 1429 - const commitToExpandedStack = new Map<string, RevisionStack>(); 1430 1430 - 1431 1431 - for (const stack of stacks) { 1432 1432 - const isExpanded = expandedStacks.has(stack.id); 1433 1433 - 1434 1434 - if (isExpanded) { 1435 1435 - for (const changeId of stack.changeIds) { 1436 1436 - const commitId = changeIdToCommitId.get(changeId); 1437 1437 - if (commitId) commitToExpandedStack.set(commitId, stack); 1438 1438 - } 1439 1439 - } else { 1440 1440 - const bottomCommitId = changeIdToCommitId.get(stack.bottomChangeId); 1441 1441 - const topCommitId = changeIdToCommitId.get(stack.topChangeId); 1442 1442 - if (!bottomCommitId || !topCommitId) continue; 1443 1443 - 1444 1444 - topCommitToStack.set(topCommitId, stack); 1445 1445 - for (const intermediateChangeId of stack.intermediateChangeIds) { 1446 1446 - const intermediateCommitId = changeIdToCommitId.get(intermediateChangeId); 1447 1447 - if (intermediateCommitId) { 1448 1448 - hiddenToVisible.set(intermediateCommitId, { targetCommitId: bottomCommitId, stack }); 1449 1449 - } 1450 1450 - } 1451 1451 - } 1452 1452 - } 1453 1453 - 1454 1454 - const remapped: EdgeBinding[] = []; 1455 1455 - const seen = new Set<string>(); 1456 1456 - 1457 1457 - for (const binding of edgeBindings) { 1458 1458 - const { sourceRevisionId, targetRevisionId } = binding; 1459 1459 - const sourceExpandedStack = commitToExpandedStack.get(sourceRevisionId); 1460 1460 - 1461 1461 - // Skip hidden intermediates (unless in an expanded stack) 1462 1462 - if (hiddenToVisible.has(sourceRevisionId) && !sourceExpandedStack) continue; 1463 1463 - 1464 1464 - let targetId = targetRevisionId; 1465 1465 - let collapsedStackId: string | undefined; 1466 1466 - let collapsedCount: number | undefined; 1467 1467 - let expandedStackId: string | undefined; 1468 1468 - 1469 1469 - if (sourceExpandedStack) { 1470 1470 - // Source is in expanded stack - check if edge is within same stack 1471 1471 - const targetExpandedStack = commitToExpandedStack.get(targetRevisionId); 1472 1472 - if (targetExpandedStack?.id === sourceExpandedStack.id) { 1473 1473 - expandedStackId = sourceExpandedStack.id; 1474 1474 - } 1475 1475 - } else { 1476 1476 - // Source not in expanded stack - apply collapsed stack remapping 1477 1477 - const hiddenInfo = hiddenToVisible.get(targetId); 1478 1478 - if (hiddenInfo) { 1479 1479 - const isFromStackTop = topCommitToStack.has(sourceRevisionId); 1480 1480 - targetId = hiddenInfo.targetCommitId; 1481 1481 - if (isFromStackTop) { 1482 1482 - collapsedStackId = hiddenInfo.stack.id; 1483 1483 - collapsedCount = hiddenInfo.stack.intermediateChangeIds.length; 1484 1484 - } 1485 1485 - } 1486 1486 - } 1487 1487 - 1488 1488 - // Deduplicate 1489 1489 - const key = `${sourceRevisionId}->${targetId}`; 1490 1490 - if (seen.has(key)) continue; 1491 1491 - seen.add(key); 1492 1492 - 1493 1493 - remapped.push({ 1494 1494 - ...binding, 1495 1495 - targetRevisionId: targetId, 1496 1496 - collapsedStackId, 1497 1497 - collapsedCount, 1498 1498 - expandedStackId, 1499 1499 - }); 1500 1500 - } 1501 1501 - 1502 1502 - return remapped; 1503 1503 - }, [edgeBindings, stacks, expandedStacks, changeIdToCommitId]); 1504 1504 - 1505 1505 - const [debugEnabled, setDebugEnabled] = useState(DEBUG_OVERLAY_DEFAULT); 1506 1506 - const debugEnabledRef = useRef(debugEnabled); 1507 1507 - debugEnabledRef.current = debugEnabled; 1508 1508 - 1509 1509 - // Ref to hold scroll function - only scrolls if item is outside visible range 1510 1510 - const scrollToIndexIfNeededRef = useRef<((index: number) => void) | null>(null); 1511 1511 - 1512 1512 - // Determine if selected revision is expanded based on URL search params 1513 1513 - const isSelectedExpanded = expanded === true && !!selectedRevision; 1514 1514 - 1515 1515 - // Toggle debug overlay with Ctrl+Shift+D 1516 1516 - useKeyboardShortcut({ 1517 1517 - key: "D", 1518 1518 - modifiers: { ctrl: true, shift: true }, 1519 1519 - onPress: () => setDebugEnabled((prev) => !prev), 1520 1520 - }); 1521 1521 - 1522 1522 - // Expand selected revision with 'l' or ArrowRight key 1523 1523 - // In overview mode: expands revision inline 1524 1524 - // In split mode: moves focus to diff panel 1525 1525 - useKeyboardShortcut({ 1526 1526 - key: "l", 1527 1527 - modifiers: {}, 1528 1528 - onPress: () => { 1529 1529 - if (viewMode === 2) { 1530 1530 - // Split mode: move focus to diff panel 1531 1531 - setFocusPanel("diff"); 1532 1532 - return; 1533 1533 - } 1534 1534 - // Overview mode: expand inline 1535 1535 - if (!selectedRevision) return; 1536 1536 - if (isSelectedExpanded) return; 1537 1537 - navigate({ 1538 1538 - search: { ...search, expanded: true } as any, 1539 1539 - }); 1540 1540 - }, 1541 1541 - }); 1542 1542 - 1543 1543 - useKeyboardShortcut({ 1544 1544 - key: "ArrowRight", 1545 1545 - modifiers: {}, 1546 1546 - onPress: () => { 1547 1547 - if (viewMode === 2) { 1548 1548 - setFocusPanel("diff"); 1549 1549 - return; 1550 1550 - } 1551 1551 - if (!selectedRevision) return; 1552 1552 - if (isSelectedExpanded) return; 1553 1553 - navigate({ 1554 1554 - search: { ...search, expanded: true } as any, 1555 1555 - }); 1556 1556 - }, 1557 1557 - }); 1558 1558 - 1559 1559 - // Collapse selected revision with 'h' or ArrowLeft key 1560 1560 - // In overview mode: collapses revision inline 1561 1561 - // In split mode: moves focus to revision list 1562 1562 - useKeyboardShortcut({ 1563 1563 - key: "h", 1564 1564 - modifiers: {}, 1565 1565 - onPress: () => { 1566 1566 - if (viewMode === 2) { 1567 1567 - // Split mode: move focus back to revisions (but don't do anything if already there) 1568 1568 - // Note: This handler runs in RevisionGraph, so focus is already here 1569 1569 - return; 1570 1570 - } 1571 1571 - // Overview mode: collapse inline 1572 1572 - if (!selectedRevision) return; 1573 1573 - if (!isSelectedExpanded) return; 1574 1574 - navigate({ 1575 1575 - search: { ...search, expanded: undefined } as any, 1576 1576 - }); 1577 1577 - }, 1578 1578 - }); 1579 1579 - 1580 1580 - useKeyboardShortcut({ 1581 1581 - key: "ArrowLeft", 1582 1582 - modifiers: {}, 1583 1583 - onPress: () => { 1584 1584 - if (viewMode === 2) { 1585 1585 - return; 1586 1586 - } 1587 1587 - if (!selectedRevision) return; 1588 1588 - if (!isSelectedExpanded) return; 1589 1589 - navigate({ 1590 1590 - search: { ...search, expanded: undefined } as any, 1591 1591 - }); 1592 1592 - }, 1593 1593 - }); 1594 1594 - 1595 1595 - // Helper to extend selection in a direction (macOS-style anchor-based selection) 1596 1596 - const extendSelection = (direction: "down" | "up") => { 1597 1597 - if (!selectedRevision) return; 1598 1598 - const currentIndex = changeIdToIndex.get(selectedRevision.change_id); 1599 1599 - if (currentIndex === undefined) return; 1600 1600 - 1601 1601 - const step = direction === "down" ? 1 : -1; 1602 1602 - const limit = direction === "down" ? displayRows.length : -1; 1603 1603 - 1604 1604 - // Find the next revision in the given direction 1605 1605 - let targetChangeId: string | null = null; 1606 1606 - let targetIndex: number | null = null; 1607 1607 - for (let i = currentIndex + step; direction === "down" ? i < limit : i > limit; i += step) { 1608 1608 - const row = displayRows[i]; 1609 1609 - if (row.type === "revision") { 1610 1610 - targetChangeId = row.row.revision.change_id; 1611 1611 - targetIndex = i; 1612 1612 - break; 1613 1613 - } 1614 1614 - } 1615 1615 - 1616 1616 - if (!targetChangeId || targetIndex === null) return; 1617 1617 - 1618 1618 - // Determine anchor: use existing anchor or set it to current position 1619 1619 - const anchorChangeId = selectionAnchor ?? selectedRevision.change_id; 1620 1620 - const anchorIndex = changeIdToIndex.get(anchorChangeId); 1621 1621 - if (anchorIndex === undefined) return; 1622 1622 - 1623 1623 - // Select all revisions between anchor and target (inclusive) 1624 1624 - const startIndex = Math.min(anchorIndex, targetIndex); 1625 1625 - const endIndex = Math.max(anchorIndex, targetIndex); 1626 1626 - const newSelection = new Set<string>(); 1627 1627 - for (let i = startIndex; i <= endIndex; i++) { 1628 1628 - const row = displayRows[i]; 1629 1629 - if (row.type === "revision") { 1630 1630 - newSelection.add(row.row.revision.change_id); 1631 1631 - } 1632 1632 - } 1633 1633 - 1634 1634 - const selected = [...newSelection].join(","); 1635 1635 - // Update URL with new selection, anchor, and move focus 1636 1636 - navigate({ 1637 1637 - search: { 1638 1638 - ...search, 1639 1639 - selected, 1640 1640 - selectionAnchor: anchorChangeId, 1641 1641 - rev: targetChangeId, 1642 1642 - stack: undefined, 1643 1643 - } as any, 1644 1644 - replace: true, 1645 1645 - }); 1646 1646 - 1647 1647 - // Scroll to keep item visible 1648 1648 - scrollToIndexIfNeededRef.current?.(targetIndex); 1649 1649 - }; 1650 1650 - 1651 1651 - // Shift+j: extend selection downward 1652 1652 - useKeyboardShortcut({ 1653 1653 - key: "j", 1654 1654 - modifiers: { shift: true }, 1655 1655 - onPress: () => extendSelection("down"), 1656 1656 - enabled: !!selectedRevision && !inlineJumpMode, 1657 1657 - }); 1658 1658 - 1659 1659 - // Shift+k: extend selection upward 1660 1660 - useKeyboardShortcut({ 1661 1661 - key: "k", 1662 1662 - modifiers: { shift: true }, 1663 1663 - onPress: () => extendSelection("up"), 1664 1664 - enabled: !!selectedRevision && !inlineJumpMode, 1665 1665 - }); 1666 1666 - 1667 1667 - // Shift+ArrowDown: extend selection downward 1668 1668 - useKeyboardShortcut({ 1669 1669 - key: "ArrowDown", 1670 1670 - modifiers: { shift: true }, 1671 1671 - onPress: () => extendSelection("down"), 1672 1672 - enabled: !!selectedRevision && !inlineJumpMode, 1673 1673 - }); 1674 1674 - 1675 1675 - // Shift+ArrowUp: extend selection upward 1676 1676 - useKeyboardShortcut({ 1677 1677 - key: "ArrowUp", 1678 1678 - modifiers: { shift: true }, 1679 1679 - onPress: () => extendSelection("up"), 1680 1680 - enabled: !!selectedRevision && !inlineJumpMode, 1681 1681 - }); 1682 1682 - 1683 1683 - // Get current focused index in displayRows (either revision or collapsed stack) 1684 1684 - const getCurrentDisplayIndex = (): number => { 1685 1685 - if (focusedStackId) { 1686 1686 - return displayRows.findIndex( 1687 1687 - (row) => row.type === "collapsed-stack" && row.stack.id === focusedStackId, 1688 1688 - ); 1689 1689 - } 1690 1690 - if (selectedRevision) { 1691 1691 - return displayRows.findIndex( 1692 1692 - (row) => 1693 1693 - row.type === "revision" && row.row.revision.change_id === selectedRevision.change_id, 1694 1694 - ); 1695 1695 - } 1696 1696 - return -1; 1697 1697 - }; 1698 1698 - 1699 1699 - // Navigate to a display row (revision or collapsed stack) 1700 1700 - // Clears selection and anchor (regular navigation without shift) 1701 1701 - const navigateToDisplayRow = (index: number) => { 1702 1702 - const row = displayRows[index]; 1703 1703 - if (!row) return; 1704 1704 - 1705 1705 - if (row.type === "revision") { 1706 1706 - // Clear stack focus, selection, anchor and set revision 1707 1707 - navigate({ 1708 1708 - search: { 1709 1709 - ...search, 1710 1710 - stack: undefined, 1711 1711 - rev: row.row.revision.change_id, 1712 1712 - selected: undefined, 1713 1713 - selectionAnchor: undefined, 1714 1714 - } as any, 1715 1715 - replace: true, 1716 1716 - }); 1717 1717 - } else if (row.type === "collapsed-stack") { 1718 1718 - // Set stack focus and clear rev, selection, anchor 1719 1719 - navigate({ 1720 1720 - search: { 1721 1721 - ...search, 1722 1722 - stack: row.stack.id, 1723 1723 - rev: undefined, 1724 1724 - selected: undefined, 1725 1725 - selectionAnchor: undefined, 1726 1726 - } as any, 1727 1727 - replace: true, 1728 1728 - }); 1729 1729 - } 1730 1730 - 1731 1731 - // Scroll to keep item visible (only if outside viewport) 1732 1732 - scrollToIndexIfNeededRef.current?.(index); 1733 1733 - }; 1734 1734 - 1735 1735 - // j / ArrowDown: navigate to next display row 1736 1736 - useKeyboardShortcut({ 1737 1737 - key: "j", 1738 1738 - modifiers: {}, 1739 1739 - onPress: () => { 1740 1740 - const currentIndex = getCurrentDisplayIndex(); 1741 1741 - if (currentIndex < 0) { 1742 1742 - // No current focus, start from first 1743 1743 - if (displayRows.length > 0) navigateToDisplayRow(0); 1744 1744 - } else if (currentIndex < displayRows.length - 1) { 1745 1745 - navigateToDisplayRow(currentIndex + 1); 1746 1746 - } 1747 1747 - }, 1748 1748 - enabled: !inlineJumpMode, 1749 1749 - }); 1750 1750 - 1751 1751 - useKeyboardShortcut({ 1752 1752 - key: "ArrowDown", 1753 1753 - modifiers: {}, 1754 1754 - onPress: () => { 1755 1755 - const currentIndex = getCurrentDisplayIndex(); 1756 1756 - if (currentIndex < 0) { 1757 1757 - if (displayRows.length > 0) navigateToDisplayRow(0); 1758 1758 - } else if (currentIndex < displayRows.length - 1) { 1759 1759 - navigateToDisplayRow(currentIndex + 1); 1760 1760 - } 1761 1761 - }, 1762 1762 - enabled: !inlineJumpMode, 1763 1763 - }); 1764 1764 - 1765 1765 - // k / ArrowUp: navigate to previous display row 1766 1766 - useKeyboardShortcut({ 1767 1767 - key: "k", 1768 1768 - modifiers: {}, 1769 1769 - onPress: () => { 1770 1770 - const currentIndex = getCurrentDisplayIndex(); 1771 1771 - if (currentIndex > 0) { 1772 1772 - navigateToDisplayRow(currentIndex - 1); 1773 1773 - } 1774 1774 - }, 1775 1775 - enabled: !inlineJumpMode, 1776 1776 - }); 1777 1777 - 1778 1778 - useKeyboardShortcut({ 1779 1779 - key: "ArrowUp", 1780 1780 - modifiers: {}, 1781 1781 - onPress: () => { 1782 1782 - const currentIndex = getCurrentDisplayIndex(); 1783 1783 - if (currentIndex > 0) { 1784 1784 - navigateToDisplayRow(currentIndex - 1); 1785 1785 - } 1786 1786 - }, 1787 1787 - enabled: !inlineJumpMode, 1788 1788 - }); 1789 1789 - 1790 1790 - // Space/Enter on collapsed stack: expand it and focus the top revision 1791 1791 - useKeyboardShortcut({ 1792 1792 - key: " ", 1793 1793 - modifiers: {}, 1794 1794 - onPress: () => { 1795 1795 - if (focusedStackId) { 1796 1796 - handleToggleStack(focusedStackId); 1797 1797 - } else if (selectedRevision) { 1798 1798 - toggleRevisionCheck(selectedRevision.change_id); 1799 1799 - } 1800 1800 - }, 1801 1801 - enabled: !inlineJumpMode, 1802 1802 - }); 1803 1803 - 1804 1804 - useKeyboardShortcut({ 1805 1805 - key: "Enter", 1806 1806 - modifiers: {}, 1807 1807 - onPress: () => { 1808 1808 - if (focusedStackId) { 1809 1809 - handleToggleStack(focusedStackId); 1810 1810 - } 1811 1811 - }, 1812 1812 - enabled: !!focusedStackId && !inlineJumpMode, 1813 1813 - }); 1814 1814 - 1815 1815 - // Track if we just activated jump mode to ignore the same 'f' keypress 1816 1816 - const justActivatedRef = useRef(false); 1817 1817 - 1818 1818 - // Activate inline jump mode with 'f' key 1819 1819 - useKeyboardShortcut({ 1820 1820 - key: "f", 1821 1821 - modifiers: {}, 1822 1822 - onPress: () => { 1823 1823 - justActivatedRef.current = true; 1824 1824 - setInlineJumpQuery(""); 1825 1825 - // Clear the flag after a short delay (same event loop tick protection) 1826 1826 - requestAnimationFrame(() => { 1827 1827 - justActivatedRef.current = false; 1828 1828 - }); 1829 1829 - }, 1830 1830 - enabled: !inlineJumpMode, 1831 1831 - }); 1832 1832 - 1833 1833 - // Cancel inline jump mode with Escape 1834 1834 - useKeyboardShortcut({ 1835 1835 - key: "Escape", 1836 1836 - modifiers: {}, 1837 1837 - onPress: () => setInlineJumpQuery(null), 1838 1838 - enabled: inlineJumpMode, 1839 1839 - }); 1840 1840 - 1841 1841 - const rowVirtualizer = useVirtualizer({ 1842 1842 - count: displayRows.length, 1843 1843 - getScrollElement: () => parentRef.current, 1844 1844 - estimateSize: (index: number) => { 1845 1845 - const displayRow = displayRows[index]; 1846 1846 - if (displayRow.type === "collapsed-stack") { 1847 1847 - // Same height as a regular revision row 1848 1848 - return ROW_HEIGHT; 1849 1849 - } 1850 1850 - const row = displayRow.row; 1851 1851 - const isExpanded = 1852 1852 - isSelectedExpanded && row.revision.change_id === selectedRevision?.change_id; 1853 1853 - return isExpanded ? ROW_HEIGHT * 3 : ROW_HEIGHT; 1854 1854 - }, 1855 1855 - overscan: 10, 1856 1856 - debug: debugEnabled, 1857 1857 - }); 1858 1858 - 1859 1859 - // scrollToIndexIfNeededRef is updated below after virtualItems is computed 1860 1860 - 1861 1861 - // Expose scrollToChangeId method via ref 1862 1862 - useImperativeHandle(ref, () => ({ 1863 1863 - scrollToChangeId: ( 1864 1864 - changeId: string, 1865 1865 - options?: { align?: "auto" | "center"; smooth?: boolean }, 1866 1866 - ) => { 1867 1867 - const debug = debugEnabledRef.current; 1868 1868 - const index = changeIdToIndex.get(changeId); 1869 1869 - if (index === undefined) { 1870 1870 - if (debug) console.log("[scroll] changeId not found:", changeId); 1871 1871 - return; 1872 1872 - } 1873 1873 - 1874 1874 - const scrollElement = parentRef.current; 1875 1875 - if (!scrollElement) { 1876 1876 - if (debug) console.log("[scroll] scrollElement is null"); 1877 1877 - return; 1878 1878 - } 1879 1879 - 1880 1880 - const scrollTop = scrollElement.scrollTop; 1881 1881 - const viewportHeight = scrollElement.clientHeight; 1882 1882 - const scrollHeight = scrollElement.scrollHeight; 1883 1883 - const itemTop = index * ROW_HEIGHT; 1884 1884 - const itemBottom = itemTop + ROW_HEIGHT; 1885 1885 - 1886 1886 - if (debug) { 1887 1887 - console.log("[scroll] called:", { 1888 1888 - index, 1889 1889 - options, 1890 1890 - scrollTop, 1891 1891 - viewportHeight, 1892 1892 - scrollHeight, 1893 1893 - itemTop, 1894 1894 - itemBottom, 1895 1895 - }); 1896 1896 - } 1897 1897 - 1898 1898 - // For jump commands (smooth/center), always scroll 1899 1899 - if (options?.smooth || options?.align === "center") { 1900 1900 - if (debug) console.log("[scroll] using scrollToIndex (jump)"); 1901 1901 - rowVirtualizer.scrollToIndex(index, { 1902 1902 - align: "center", 1903 1903 - behavior: "smooth", 1904 1904 - }); 1905 1905 - return; 1906 1906 - } 1907 1907 - 1908 1908 - // For step navigation, manually scroll only if item is outside viewport 1909 1909 - const isAboveViewport = itemTop < scrollTop; 1910 1910 - const isBelowViewport = itemBottom > scrollTop + viewportHeight; 1911 1911 - 1912 1912 - if (debug) { 1913 1913 - console.log("[scroll] visibility:", { isAboveViewport, isBelowViewport }); 1914 1914 - } 1915 1915 - 1916 1916 - if (isAboveViewport) { 1917 1917 - const newScrollTop = itemTop; 1918 1918 - if (debug) console.log("[scroll] scrolling UP to:", newScrollTop); 1919 1919 - scrollElement.scrollTop = newScrollTop; 1920 1920 - } else if (isBelowViewport) { 1921 1921 - const newScrollTop = itemBottom - viewportHeight; 1922 1922 - if (debug) console.log("[scroll] scrolling DOWN to:", newScrollTop); 1923 1923 - scrollElement.scrollTop = newScrollTop; 1924 1924 - } else { 1925 1925 - if (debug) console.log("[scroll] item already visible, no scroll needed"); 1926 1926 - } 1927 1927 - }, 1928 1928 - })); 1929 1929 - 1930 1930 - function handleSelect(changeId: string, modifiers: { shift: boolean; meta: boolean }) { 1931 1931 - const revision = revisionMapByChangeId.get(changeId); 1932 1932 - if (!revision) return; 1933 1933 - 1934 1934 - // Cmd/Ctrl+click: toggle selection 1935 1935 - if (modifiers.meta) { 1936 1936 - toggleRevisionCheck(changeId); 1937 1937 - return; 1938 1938 - } 1939 1939 - 1940 1940 - // Shift+click: range select from focused to clicked 1941 1941 - if (modifiers.shift && selectedRevision) { 1942 1942 - const focusedIndex = changeIdToIndex.get(selectedRevision.change_id); 1943 1943 - const clickedIndex = changeIdToIndex.get(changeId); 1944 1944 - if (focusedIndex !== undefined && clickedIndex !== undefined) { 1945 1945 - const startIdx = Math.min(focusedIndex, clickedIndex); 1946 1946 - const endIdx = Math.max(focusedIndex, clickedIndex); 1947 1947 - const newSelection = new Set<string>(); 1948 1948 - for (let i = startIdx; i <= endIdx; i++) { 1949 1949 - const displayRow = displayRows[i]; 1950 1950 - if (displayRow.type === "revision") { 1951 1951 - newSelection.add(displayRow.row.revision.change_id); 1952 1952 - } 1953 1953 - } 1954 1954 - // Update selection in URL 1955 1955 - const selected = newSelection.size > 0 ? [...newSelection].join(",") : undefined; 1956 1956 - navigate({ 1957 1957 - search: { ...search, selected, stack: undefined } as any, 1958 1958 - replace: true, 1959 1959 - }); 1960 1960 - } 1961 1961 - return; 1962 1962 - } 1963 1963 - 1964 1964 - // Plain click: focus revision (clear selection, anchor, and stack focus) 1965 1965 - navigate({ 1966 1966 - search: { 1967 1967 - ...search, 1968 1968 - selected: undefined, 1969 1969 - selectionAnchor: undefined, 1970 1970 - stack: undefined, 1971 1971 - rev: changeId, 1972 1972 - } as any, 1973 1973 - replace: true, 1974 1974 - }); 1975 1975 - } 1976 1976 - 1977 1977 - const virtualItems = rowVirtualizer.getVirtualItems(); 1978 1978 - const visibleStartRow = virtualItems[0]?.index ?? 0; 1979 1979 - const visibleEndRow = virtualItems[virtualItems.length - 1]?.index ?? 0; 1980 1980 - const totalHeight = rowVirtualizer.getTotalSize(); 1981 1981 - 1982 1982 - // Update scroll ref - compute actually visible range based on scroll position 1983 1983 - scrollToIndexIfNeededRef.current = (index: number) => { 1984 1984 - const scrollEl = parentRef.current; 1985 1985 - if (!scrollEl) return; 1986 1986 - 1987 1987 - const scrollTop = scrollEl.scrollTop; 1988 1988 - const clientHeight = scrollEl.clientHeight; 1989 1989 - 1990 1990 - // Calculate which rows are fully visible (not just rendered with overscan) 1991 1991 - // Use ceil for start (first fully visible) and floor-1 for end (last fully visible) 1992 1992 - const visibleStart = Math.ceil(scrollTop / ROW_HEIGHT); 1993 1993 - const visibleEnd = Math.floor((scrollTop + clientHeight) / ROW_HEIGHT) - 1; 1994 1994 - 1995 1995 - const shouldScroll = index < visibleStart || index > visibleEnd; 1996 1996 - 1997 1997 - // Only scroll if the item is outside the fully visible range 1998 1998 - if (shouldScroll) { 1999 1999 - rowVirtualizer.scrollToIndex(index, { align: "auto" }); 2000 2000 - } 2001 2001 - }; 2002 2002 - const rowOffsets = new Map<number, number>(); 2003 2003 - for (const item of virtualItems) { 2004 2004 - rowOffsets.set(item.index, item.start); 2005 2005 - } 2006 2006 - 2007 2007 - // Compute jump hints for visible rows based on change ID prefix matching 2008 2008 - const jumpHintsMap = new Map<string, string>(); 2009 2009 - const matchingRevisions: Array<{ changeId: string; shortId: string }> = []; 2010 2010 - 2011 2011 - if (inlineJumpMode && revisions.length > 0) { 2012 2012 - const query = inlineJumpQuery ?? ""; 2013 2013 - 2014 2014 - // First, collect all visible revisions that match the current query 2015 2015 - for (const item of virtualItems) { 2016 2016 - const row = rows[item.index]; 2017 2017 - if (row) { 2018 2018 - const shortId = row.revision.change_id_short.toLowerCase(); 2019 2019 - if (shortId.startsWith(query.toLowerCase())) { 2020 2020 - matchingRevisions.push({ 2021 2021 - changeId: row.revision.change_id, 2022 2022 - shortId: row.revision.change_id_short, 2023 2023 - }); 2024 2024 - } 2025 2025 - } 2026 2026 - } 2027 2027 - 2028 2028 - // Assign hints based on the next character in the change ID 2029 2029 - if (query === "") { 2030 2030 - // Initial state: show first letter of each change ID 2031 2031 - for (const { changeId, shortId } of matchingRevisions) { 2032 2032 - jumpHintsMap.set(changeId, shortId[0].toLowerCase()); 2033 2033 - } 2034 2034 - } else { 2035 2035 - // After typing: show the next letter to type, or secondary hints if needed 2036 2036 - const nextCharIndex = query.length; 2037 2037 - const nextChars = new Map<string, Array<{ changeId: string; shortId: string }>>(); 2038 2038 - 2039 2039 - // Group by next character 2040 2040 - for (const rev of matchingRevisions) { 2041 2041 - const nextChar = rev.shortId[nextCharIndex]?.toLowerCase() ?? ""; 2042 2042 - if (nextChar) { 2043 2043 - const group = nextChars.get(nextChar) ?? []; 2044 2044 - group.push(rev); 2045 2045 - nextChars.set(nextChar, group); 2046 2046 - } 2047 2047 - } 2048 2048 - 2049 2049 - // Assign hints 2050 2050 - for (const { changeId, shortId } of matchingRevisions) { 2051 2051 - const nextChar = shortId[nextCharIndex]?.toLowerCase() ?? ""; 2052 2052 - if (nextChar) { 2053 2053 - jumpHintsMap.set(changeId, nextChar); 2054 2054 - } 2055 2055 - } 2056 2056 - } 2057 2057 - } 2058 2058 - 2059 2059 - // Store matching revisions in a ref for use in the effect 2060 2060 - const matchingRevisionsRef = useRef(matchingRevisions); 2061 2061 - matchingRevisionsRef.current = matchingRevisions; 2062 2062 - 2063 2063 - // Handle jump hint letter key presses 2064 2064 - useEffect(() => { 2065 2065 - if (!inlineJumpMode) return; 2066 2066 - 2067 2067 - function handleJumpKey(event: KeyboardEvent) { 2068 2068 - const activeElement = document.activeElement; 2069 2069 - if (activeElement?.tagName === "INPUT" || activeElement?.tagName === "TEXTAREA") { 2070 2070 - return; 2071 2071 - } 2072 2072 - 2073 2073 - const key = event.key.toLowerCase(); 2074 2074 - 2075 2075 - // Ignore the activation key 'f' if we just activated (prevents same event capture) 2076 2076 - if (key === "f" && justActivatedRef.current) { 2077 2077 - return; 2078 2078 - } 2079 2079 - 2080 2080 - // Handle backspace to remove last character 2081 2081 - if (event.key === "Backspace") { 2082 2082 - event.preventDefault(); 2083 2083 - const currentQuery = inlineJumpQuery ?? ""; 2084 2084 - if (currentQuery.length > 0) { 2085 2085 - setInlineJumpQuery(currentQuery.slice(0, -1)); 2086 2086 - } else { 2087 2087 - setInlineJumpQuery(null); // Cancel if already empty 2088 2088 - } 2089 2089 - return; 2090 2090 - } 2091 2091 - 2092 2092 - // Only accept alphanumeric characters for the query 2093 2093 - if (/^[a-z0-9]$/i.test(key)) { 2094 2094 - event.preventDefault(); 2095 2095 - const newQuery = (inlineJumpQuery ?? "") + key; 2096 2096 - 2097 2097 - // Find matching revisions with the new query 2098 2098 - const matches = matchingRevisionsRef.current.filter(({ shortId }) => 2099 2099 - shortId.toLowerCase().startsWith(newQuery.toLowerCase()), 2100 2100 - ); 2101 2101 - 2102 2102 - if (matches.length === 1) { 2103 2103 - // Single match - jump directly 2104 2104 - setInlineJumpQuery(null); 2105 2105 - const revision = revisionMapByChangeId.get(matches[0].changeId); 2106 2106 - if (revision) { 2107 2107 - onSelectRevision(revision); 2108 2108 - } 2109 2109 - } else if (matches.length === 0) { 2110 2110 - // No matches - cancel 2111 2111 - setInlineJumpQuery(null); 2112 2112 - } else { 2113 2113 - // Multiple matches - update query to filter 2114 2114 - setInlineJumpQuery(newQuery); 2115 2115 - } 2116 2116 - return; 2117 2117 - } 2118 2118 - 2119 2119 - // Any other non-modifier key cancels jump mode 2120 2120 - if (!["Shift", "Control", "Alt", "Meta", "CapsLock"].includes(event.key)) { 2121 2121 - setInlineJumpQuery(null); 2122 2122 - } 2123 2123 - } 2124 2124 - 2125 2125 - window.addEventListener("keydown", handleJumpKey); 2126 2126 - return () => window.removeEventListener("keydown", handleJumpKey); 2127 2127 - }, [ 2128 2128 - inlineJumpMode, 2129 2129 - inlineJumpQuery, 2130 2130 - setInlineJumpQuery, 2131 2131 - revisionMapByChangeId, 2132 2132 - onSelectRevision, 2133 2133 - ]); 2134 2134 - 2135 2135 - if (revisions.length === 0) { 2136 2136 - return ( 2137 2137 - <div className="flex items-center justify-center h-full bg-background text-muted-foreground text-sm"> 2138 2138 - {isLoading ? "Loading revisions..." : "Select a project to view revisions"} 2139 2139 - </div> 2140 2140 - ); 2141 2141 - } 2142 2142 - 2143 2143 - const selectedIndex = selectedRevision 2144 2144 - ? changeIdToIndex.get(selectedRevision.change_id) 2145 2145 - : undefined; 2146 2146 - 2147 2147 - const workingCopy = revisions.find((r) => r.is_working_copy); 2148 2148 - const wcIndex = workingCopy ? changeIdToIndex.get(workingCopy.change_id) : undefined; 2149 2149 - 2150 2150 - // Calculate edge layer dimensions and row center positions 2151 2151 - const TOP_PADDING = 16; // Matches pt-4 on RevisionRow 2152 2152 - const CONTENT_MIN_HEIGHT = 56; // Matches min-h-[56px] on RevisionRow content 2153 2153 - const getRowStart = (row: number) => rowOffsets.get(row) ?? row * ROW_HEIGHT; 2154 2154 - const getRowCenter = (row: number) => getRowStart(row) + TOP_PADDING + CONTENT_MIN_HEIGHT / 2; 2155 2155 - const graphWidth = LANE_PADDING + laneCount * LANE_WIDTH + NODE_RADIUS + 2; 2156 2156 - 2157 2157 - return ( 2158 2158 - <div 2159 2159 - ref={parentRef} 2160 2160 - className="h-full overflow-auto ascii-bg" 2161 2161 - style={{ overflowAnchor: "none" }} 2162 2162 - > 2163 2163 - <div 2164 2164 - className="relative" 2165 2165 - style={{ 2166 2166 - height: `${totalHeight}px`, 2167 2167 - width: "100%", 2168 2168 - }} 2169 2169 - > 2170 2170 - {/* Edge layer - semantic edge components positioned absolutely */} 2171 2171 - {/* Key includes expandedStacks to force remount when stack state changes */} 2172 2172 - <EdgeLayer 2173 2173 - key={`edges-${[...expandedStacks].sort().join(",")}`} 2174 2174 - bindings={filteredEdgeBindings} 2175 2175 - revisionMap={revisionMapByCommitId} 2176 2176 - getRowCenter={getRowCenter} 2177 2177 - commitToRow={commitToRowIndex} 2178 2178 - totalHeight={totalHeight} 2179 2179 - width={graphWidth} 2180 2180 - visibleStartRow={visibleStartRow} 2181 2181 - visibleEndRow={visibleEndRow} 2182 2182 - stackById={stackById} 2183 2183 - changeIdToCommitId={changeIdToCommitId} 2184 2184 - onToggleStack={handleToggleStack} 2185 2185 - /> 2186 2186 - 2187 2187 - {/* Virtualized rows with inline graph nodes */} 2188 2188 - <div className="relative z-10"> 2189 2189 - {virtualItems.map((virtualRow) => { 2190 2190 - const displayRow = displayRows[virtualRow.index]; 2191 2191 - 2192 2192 - // Collapsed stack row - styled as stacked cards 2193 2193 - if (displayRow.type === "collapsed-stack") { 2194 2194 - const { stack, lane } = displayRow; 2195 2195 - const nodeAreaWidth = LANE_PADDING + (lane + 1) * LANE_WIDTH; 2196 2196 - const count = stack.intermediateChangeIds.length; 2197 2197 - // Show up to 3 stacked card layers 2198 2198 - const layers = Math.min(count, 3); 2199 2199 - 2200 2200 - // Check if this stack is related to the selected revision (for dimming) 2201 2201 - const isStackRelated = stack.changeIds.some((id) => relatedRevisions.has(id)); 2202 2202 - const isStackDimmed = selectedRevision !== null && !isStackRelated; 2203 2203 - const isStackFocused = focusedStackId === stack.id; 2204 2204 - 2205 2205 - return ( 2206 2206 - <div 2207 2207 - key={`collapsed-${stack.id}`} 2208 2208 - ref={rowVirtualizer.measureElement} 2209 2209 - data-index={virtualRow.index} 2210 2210 - className="absolute left-0 w-full" 2211 2211 - style={{ 2212 2212 - transform: `translateY(${virtualRow.start}px)`, 2213 2213 - height: ROW_HEIGHT, 2214 2214 - }} 2215 2215 - > 2216 2216 - <div className="flex flex-col relative" style={{ height: ROW_HEIGHT }}> 2217 2217 - <div className="flex items-start min-h-[56px] pt-4"> 2218 2218 - {/* Spacer for graph area */} 2219 2219 - <div className="shrink-0" style={{ width: nodeAreaWidth }} /> 2220 2220 - <button 2221 2221 - type="button" 2222 2222 - onClick={() => handleToggleStack(stack.id)} 2223 2223 - className={`relative flex-1 mr-2 min-w-0 my-2 mx-1 cursor-pointer group ${isStackDimmed ? "opacity-40" : ""}`} 2224 2224 - style={{ height: 40 }} 2225 2225 - data-focused={isStackFocused || undefined} 2226 2226 - data-stack-id={stack.id} 2227 2227 - > 2228 2228 - {/* Stacked card layers */} 2229 2229 - {Array.from({ length: layers }).map((_, i) => { 2230 2230 - const layerIndex = layers - 1 - i; // Render back layers first 2231 2231 - const offset = layerIndex * 4; 2232 2232 - const isTopLayer = layerIndex === 0; 2233 2233 - const scale = 1 - layerIndex * 0.02; 2234 2234 - 2235 2235 - return ( 2236 2236 - <div 2237 2237 - key={layerIndex} 2238 2238 - className={`absolute left-0 right-0 rounded border shadow-sm group-hover:border-muted-foreground/50 ${ 2239 2239 - isStackFocused && isTopLayer 2240 2240 - ? "bg-accent/40 border-accent/60" 2241 2241 - : "bg-card border-border" 2242 2242 - } text-card-foreground`} 2243 2243 - style={{ 2244 2244 - top: 0, 2245 2245 - height: 40, 2246 2246 - transform: `translateY(${offset}px) scaleX(${scale})`, 2247 2247 - transformOrigin: "top center", 2248 2248 - opacity: 1 - layerIndex * 0.2, 2249 2249 - zIndex: layers - layerIndex, 2250 2250 - }} 2251 2251 - /> 2252 2252 - ); 2253 2253 - })} 2254 2254 - {/* Content overlay on top card */} 2255 2255 - <div 2256 2256 - className="absolute inset-0 flex items-center justify-center gap-2 rounded" 2257 2257 - style={{ zIndex: layers + 1, height: 40 }} 2258 2258 - > 2259 2259 - <svg 2260 2260 - className="w-3.5 h-3.5 text-muted-foreground" 2261 2261 - fill="none" 2262 2262 - viewBox="0 0 24 24" 2263 2263 - stroke="currentColor" 2264 2264 - > 2265 2265 - <path 2266 2266 - strokeLinecap="round" 2267 2267 - strokeLinejoin="round" 2268 2268 - strokeWidth={2} 2269 2269 - d="M19 9l-7 7-7-7" 2270 2270 - /> 2271 2271 - </svg> 2272 2272 - <span className="text-xs text-muted-foreground group-hover:text-foreground"> 2273 2273 - {count} hidden revision{count !== 1 ? "s" : ""} 2274 2274 - </span> 2275 2275 - </div> 2276 2276 - </button> 2277 2277 - </div> 2278 2278 - </div> 2279 2279 - </div> 2280 2280 - ); 2281 2281 - } 2282 2282 - 2283 2283 - // Regular revision row 2284 2284 - const { row } = displayRow; 2285 2285 - const lane = changeIdToLane.get(row.revision.change_id) ?? 0; 2286 2286 - const isFlashing = flash?.changeId === row.revision.change_id; 2287 2287 - const isDimmed = 2288 2288 - (selectedRevision !== null || focusedStackId !== null) && 2289 2289 - !relatedRevisions.has(row.revision.change_id); 2290 2290 - // Only show focus if no stack is focused 2291 2291 - const isFocused = 2292 2292 - !focusedStackId && selectedRevision?.change_id === row.revision.change_id; 2293 2293 - const isSelected = isFocused; 2294 2294 - const isExpanded = isSelectedExpanded && isFocused; 2295 2295 - 2296 2296 - return ( 2297 2297 - <div 2298 2298 - key={row.revision.change_id} 2299 2299 - ref={rowVirtualizer.measureElement} 2300 2300 - data-index={virtualRow.index} 2301 2301 - className="absolute left-0 w-full" 2302 2302 - style={{ 2303 2303 - transform: `translateY(${virtualRow.start}px)`, 2304 2304 - }} 2305 2305 - > 2306 2306 - <RevisionRow 2307 2307 - revision={row.revision} 2308 2308 - lane={lane} 2309 2309 - maxLaneOnRow={row.maxLaneOnRow} 2310 2310 - isSelected={isSelected} 2311 2311 - isChecked={selectedRevisions.has(row.revision.change_id)} 2312 2312 - isFocused={isFocused} 2313 2313 - onSelect={handleSelect} 2314 2314 - isFlashing={isFlashing} 2315 2315 - isDimmed={isDimmed} 2316 2316 - isExpanded={isExpanded} 2317 2317 - repoPath={repoPath} 2318 2318 - isPendingAbandon={pendingAbandon?.change_id === row.revision.change_id} 2319 2319 - jumpHint={jumpHintsMap.get(row.revision.change_id) ?? null} 2320 2320 - jumpModeActive={inlineJumpMode} 2321 2321 - jumpQuery={inlineJumpQuery ?? ""} 2322 2322 - /> 2323 2323 - </div> 2324 2324 - ); 2325 2325 - })} 2326 2326 - </div> 2327 2327 - </div> 2328 2328 - 2329 2329 - {/* Debug overlay - toggle with Ctrl+Shift+D */} 2330 2330 - <DebugOverlay 2331 2331 - enabled={debugEnabled} 2332 2332 - scrollRef={parentRef} 2333 2333 - selectedIndex={selectedIndex} 2334 2334 - visibleStartRow={visibleStartRow} 2335 2335 - visibleEndRow={visibleEndRow} 2336 2336 - totalRows={rows.length} 2337 2337 - wcIndex={wcIndex} 2338 2338 - selectedChangeId={selectedRevision?.change_id} 2339 2339 - wcChangeId={workingCopy?.change_id} 2340 2340 - /> 2341 2341 - </div> 2342 2342 - ); 2343 2343 - }, 2344 2344 - ); 21 21 + export { 22 22 + ROW_HEIGHT, 23 23 + LANE_WIDTH, 24 24 + LANE_PADDING, 25 25 + NODE_RADIUS, 26 26 + MAX_LANES, 27 27 + laneToX, 28 28 + laneColor, 29 29 + } from "./revision-graph";

+137

apps/desktop/src/components/revision-graph/DebugOverlay.tsx

reviewed

··· 1 1 + import { useAtom } from "@effect-atom/atom-react"; 2 2 + import { useEffect, useRef, useState } from "react"; 3 3 + import { debugOverlayEnabledAtom } from "@/atoms"; 4 4 + import { ROW_HEIGHT } from "./constants"; 5 5 + 6 6 + interface DebugOverlayProps { 7 7 + scrollRef: React.RefObject<HTMLDivElement | null>; 8 8 + selectedIndex: number | undefined; 9 9 + visibleStartRow: number; 10 10 + visibleEndRow: number; 11 11 + totalRows: number; 12 12 + wcIndex: number | undefined; 13 13 + selectedChangeId: string | undefined; 14 14 + wcChangeId: string | undefined; 15 15 + } 16 16 + 17 17 + /** 18 18 + * Debug overlay for RevisionGraph - toggle with Ctrl+Shift+D 19 19 + * Displays scroll position, viewport info, and selection state 20 20 + */ 21 21 + export function DebugOverlay({ 22 22 + scrollRef, 23 23 + selectedIndex, 24 24 + visibleStartRow, 25 25 + visibleEndRow, 26 26 + totalRows, 27 27 + wcIndex, 28 28 + selectedChangeId, 29 29 + wcChangeId, 30 30 + }: DebugOverlayProps) { 31 31 + const [enabled] = useAtom(debugOverlayEnabledAtom); 32 32 + 33 33 + // Force re-render on scroll/resize/focus 34 34 + const [, forceUpdate] = useState(0); 35 35 + 36 36 + const prevScrollTop = useRef<number>(0); 37 37 + 38 38 + useEffect(() => { 39 39 + if (!enabled) return; 40 40 + const el = scrollRef.current; 41 41 + if (!el) return; 42 42 + 43 43 + const update = () => { 44 44 + const newScrollTop = el.scrollTop; 45 45 + prevScrollTop.current = newScrollTop; 46 46 + forceUpdate((n) => n + 1); 47 47 + }; 48 48 + el.addEventListener("scroll", update); 49 49 + window.addEventListener("resize", update); 50 50 + document.addEventListener("focusin", update); 51 51 + return () => { 52 52 + el.removeEventListener("scroll", update); 53 53 + window.removeEventListener("resize", update); 54 54 + document.removeEventListener("focusin", update); 55 55 + }; 56 56 + }, [scrollRef, enabled]); 57 57 + 58 58 + if (!enabled) return null; 59 59 + 60 60 + const el = scrollRef.current; 61 61 + const scrollTop = el?.scrollTop ?? 0; 62 62 + const clientHeight = el?.clientHeight ?? 0; 63 63 + const scrollHeight = el?.scrollHeight ?? 0; 64 64 + 65 65 + const selectedItemTop = selectedIndex !== undefined ? selectedIndex * ROW_HEIGHT : 0; 66 66 + const selectedItemBottom = selectedItemTop + ROW_HEIGHT; 67 67 + const distanceFromTop = selectedItemTop - scrollTop; 68 68 + const distanceFromBottom = scrollTop + clientHeight - selectedItemBottom; 69 69 + const isInViewport = distanceFromTop >= 0 && distanceFromBottom >= 0; 70 70 + 71 71 + const active = document.activeElement; 72 72 + const activeElement = active 73 73 + ? `${active.tagName}${active.className ? `.${active.className.split(" ")[0]}` : ""}` 74 74 + : "none"; 75 75 + 76 76 + const info = { 77 77 + scrollTop, 78 78 + clientHeight, 79 79 + scrollHeight, 80 80 + viewportEnd: scrollTop + clientHeight, 81 81 + selectedIndex, 82 82 + wcIndex, 83 83 + itemTop: selectedItemTop, 84 84 + itemBottom: selectedItemBottom, 85 85 + distFromTop: distanceFromTop, 86 86 + distFromBottom: distanceFromBottom, 87 87 + isInViewport, 88 88 + virtualRange: `${visibleStartRow}-${visibleEndRow}`, 89 89 + totalRows, 90 90 + ROW_HEIGHT, 91 91 + activeElement, 92 92 + selected: selectedChangeId?.slice(0, 4), 93 93 + wc: wcChangeId?.slice(0, 4), 94 94 + }; 95 95 + 96 96 + return ( 97 97 + <button 98 98 + type="button" 99 99 + className="fixed bottom-12 right-4 z-50 bg-black/90 text-green-400 font-mono text-xs p-3 rounded-lg shadow-lg max-w-xs cursor-pointer hover:bg-black/95 active:scale-95 transition-transform text-left" 100 100 + onClick={() => navigator.clipboard.writeText(JSON.stringify(info, null, 2))} 101 101 + title="Click to copy" 102 102 + > 103 103 + <div className="font-bold text-green-300 mb-2"> 104 104 + Debug Info <span className="text-green-600">(click to copy)</span> 105 105 + </div> 106 106 + <div className="space-y-1"> 107 107 + <div>scrollTop: {scrollTop.toFixed(0)}</div> 108 108 + <div>clientHeight: {clientHeight.toFixed(0)}</div> 109 109 + <div>scrollHeight: {scrollHeight}</div> 110 110 + <div>viewportEnd: {(scrollTop + clientHeight).toFixed(0)}</div> 111 111 + <div className="border-t border-green-800 my-2" /> 112 112 + <div>selectedIndex: {selectedIndex ?? "none"}</div> 113 113 + <div>wcIndex: {wcIndex ?? "none"}</div> 114 114 + <div>selected: {selectedChangeId?.slice(0, 4) ?? "none"}</div> 115 115 + <div>wc: {wcChangeId?.slice(0, 4) ?? "none"}</div> 116 116 + <div className="border-t border-green-800 my-2" /> 117 117 + <div>itemTop: {selectedItemTop}</div> 118 118 + <div>itemBottom: {selectedItemBottom}</div> 119 119 + <div>distFromTop: {distanceFromTop.toFixed(0)}</div> 120 120 + <div>distFromBottom: {distanceFromBottom.toFixed(0)}</div> 121 121 + <div className={isInViewport ? "text-green-400" : "text-red-400"}> 122 122 + inViewport: {isInViewport ? "YES" : "NO"} 123 123 + </div> 124 124 + <div className="border-t border-green-800 my-2" /> 125 125 + <div> 126 126 + virtualRange: {visibleStartRow}-{visibleEndRow} 127 127 + </div> 128 128 + <div>totalRows: {totalRows}</div> 129 129 + <div>ROW_HEIGHT: {ROW_HEIGHT}</div> 130 130 + <div className="border-t border-green-800 my-2" /> 131 131 + <div className="truncate" title={activeElement}> 132 132 + focus: {activeElement} 133 133 + </div> 134 134 + </div> 135 135 + </button> 136 136 + ); 137 137 + }

+135

apps/desktop/src/components/revision-graph/EdgeLayer.tsx

reviewed

··· 1 1 + import { useAtom } from "@effect-atom/atom-react"; 2 2 + import { hoveredStackIdAtom } from "@/atoms"; 3 3 + import type { Revision } from "@/tauri-commands"; 4 4 + import type { RevisionStack } from "@/components/revision-graph-utils"; 5 5 + import type { EdgeBinding } from "./types"; 6 6 + import { NODE_RADIUS } from "./constants"; 7 7 + import { GraphEdge } from "./GraphEdge"; 8 8 + 9 9 + interface EdgeLayerProps { 10 10 + bindings: EdgeBinding[]; 11 11 + commitToRow: Map<string, number>; 12 12 + revisionMap: Map<string, Revision>; 13 13 + getRowCenter: (row: number) => number; 14 14 + totalHeight: number; 15 15 + width: number; 16 16 + visibleStartRow: number; 17 17 + visibleEndRow: number; 18 18 + stackById: Map<string, RevisionStack>; 19 19 + changeIdToCommitId: Map<string, string>; 20 20 + onToggleStack?: (stackId: string) => void; 21 21 + } 22 22 + 23 23 + /** 24 24 + * EdgeLayer - Renders all semantic edge components as an SVG overlay 25 25 + * Handles visibility filtering for virtualization 26 26 + */ 27 27 + export function EdgeLayer({ 28 28 + bindings, 29 29 + commitToRow, 30 30 + revisionMap, 31 31 + getRowCenter, 32 32 + totalHeight, 33 33 + width, 34 34 + visibleStartRow, 35 35 + visibleEndRow, 36 36 + stackById, 37 37 + changeIdToCommitId, 38 38 + onToggleStack, 39 39 + }: EdgeLayerProps) { 40 40 + // Use atom for hover state - automatically syncs with stack toggling and view mode changes 41 41 + const [hoveredStackId, setHoveredStackId] = useAtom(hoveredStackIdAtom); 42 42 + 43 43 + // Add overscan for edges that might span across viewport boundary 44 44 + // Use larger overscan to handle collapsed stack edges that span many rows 45 45 + const overscan = 15; 46 46 + const startRow = Math.max(0, visibleStartRow - overscan); 47 47 + const endRow = visibleEndRow + overscan; 48 48 + 49 49 + // Filter bindings to those visible in the viewport 50 50 + const visibleBindings = bindings.filter((binding) => { 51 51 + const sourceRow = commitToRow.get(binding.sourceRevisionId); 52 52 + const targetRow = commitToRow.get(binding.targetRevisionId); 53 53 + if (sourceRow === undefined) return false; 54 54 + 55 55 + // For missing stubs, just check if source is near visible range 56 56 + if (binding.isMissingStub) { 57 57 + return sourceRow >= startRow && sourceRow <= endRow; 58 58 + } 59 59 + 60 60 + if (targetRow === undefined) return false; 61 61 + 62 62 + // Check if edge passes through visible area 63 63 + const minRow = Math.min(sourceRow, targetRow); 64 64 + const maxRow = Math.max(sourceRow, targetRow); 65 65 + return maxRow >= startRow && minRow <= endRow; 66 66 + }); 67 67 + 68 68 + return ( 69 69 + <svg 70 70 + width={width} 71 71 + height={totalHeight} 72 72 + className="shrink-0 absolute top-0 left-0 z-20" 73 73 + role="img" 74 74 + aria-label="Revision connections" 75 75 + > 76 76 + <title>Revision graph edges</title> 77 77 + {visibleBindings.map((binding) => { 78 78 + const sourceRow = commitToRow.get(binding.sourceRevisionId); 79 79 + const targetRow = binding.isMissingStub 80 80 + ? sourceRow !== undefined 81 81 + ? sourceRow + 1 82 82 + : undefined 83 83 + : commitToRow.get(binding.targetRevisionId); 84 84 + 85 85 + if (sourceRow === undefined) return null; 86 86 + 87 87 + const sourceRevision = revisionMap.get(binding.sourceRevisionId); 88 88 + const targetRevision = binding.targetRevisionId 89 89 + ? (revisionMap.get(binding.targetRevisionId) ?? null) 90 90 + : null; 91 91 + 92 92 + if (!sourceRevision) return null; 93 93 + 94 94 + // For expanded stacks, calculate full stack bounds 95 95 + let stackTopY: number | undefined; 96 96 + let stackBottomY: number | undefined; 97 97 + if (binding.expandedStackId) { 98 98 + const stack = stackById.get(binding.expandedStackId); 99 99 + if (stack) { 100 100 + const topCommitId = changeIdToCommitId.get(stack.topChangeId); 101 101 + const bottomCommitId = changeIdToCommitId.get(stack.bottomChangeId); 102 102 + const topRow = topCommitId ? commitToRow.get(topCommitId) : undefined; 103 103 + const bottomRow = bottomCommitId ? commitToRow.get(bottomCommitId) : undefined; 104 104 + if (topRow !== undefined && bottomRow !== undefined) { 105 105 + stackTopY = getRowCenter(topRow) - NODE_RADIUS; 106 106 + stackBottomY = getRowCenter(bottomRow) + NODE_RADIUS; 107 107 + } 108 108 + } 109 109 + } 110 110 + 111 111 + // Use a key that captures the edge's structural identity: 112 112 + // source, target (which changes when collapsed), and stack state 113 113 + const edgeKey = `${binding.sourceRevisionId}->${binding.targetRevisionId}:${binding.collapsedStackId ?? binding.expandedStackId ?? "none"}`; 114 114 + 115 115 + return ( 116 116 + <GraphEdge 117 117 + key={edgeKey} 118 118 + binding={binding} 119 119 + sourceY={getRowCenter(sourceRow)} 120 120 + targetY={ 121 121 + targetRow !== undefined ? getRowCenter(targetRow) : getRowCenter(sourceRow) + 64 // ROW_HEIGHT fallback 122 122 + } 123 123 + sourceRevision={sourceRevision} 124 124 + targetRevision={targetRevision} 125 125 + stackTopY={stackTopY} 126 126 + stackBottomY={stackBottomY} 127 127 + hoveredStackId={hoveredStackId} 128 128 + onHoverStack={setHoveredStackId} 129 129 + onToggleStack={onToggleStack} 130 130 + /> 131 131 + ); 132 132 + })} 133 133 + </svg> 134 134 + ); 135 135 + }

+238

apps/desktop/src/components/revision-graph/GraphEdge.tsx

reviewed

··· 1 1 + import type { Revision } from "@/tauri-commands"; 2 2 + import { NODE_RADIUS, ROW_HEIGHT, laneToX, laneColor } from "./constants"; 3 3 + import type { EdgeBinding } from "./types"; 4 4 + 5 5 + interface GraphEdgeProps { 6 6 + binding: EdgeBinding; 7 7 + sourceY: number; 8 8 + targetY: number; 9 9 + sourceRevision: Revision; 10 10 + targetRevision: Revision | null; 11 11 + stackTopY?: number; 12 12 + stackBottomY?: number; 13 13 + hoveredStackId: string | null; 14 14 + onHoverStack: (stackId: string | null) => void; 15 15 + onToggleStack?: (stackId: string) => void; 16 16 + } 17 17 + 18 18 + /** 19 19 + * GraphEdge - Semantic edge component with source/target revision bindings 20 20 + * Handles different edge types: direct, indirect (dashed), missing stub 21 21 + * Supports collapsed/expanded stack interactions 22 22 + */ 23 23 + export function GraphEdge({ 24 24 + binding, 25 25 + sourceY, 26 26 + targetY, 27 27 + sourceRevision, 28 28 + targetRevision, 29 29 + stackTopY, 30 30 + stackBottomY, 31 31 + hoveredStackId, 32 32 + onHoverStack, 33 33 + onToggleStack, 34 34 + }: GraphEdgeProps) { 35 35 + const { 36 36 + sourceLane, 37 37 + targetLane, 38 38 + edgeType, 39 39 + isDeemphasized, 40 40 + isMissingStub, 41 41 + collapsedStackId, 42 42 + collapsedCount, 43 43 + expandedStackId, 44 44 + } = binding; 45 45 + 46 46 + // Check if this edge's stack is currently hovered 47 47 + const isStackHovered = expandedStackId !== undefined && hoveredStackId === expandedStackId; 48 48 + 49 49 + const sourceX = laneToX(sourceLane); 50 50 + const targetX = laneToX(targetLane); 51 51 + const sourceColor = laneColor(sourceLane); 52 52 + const targetColor = laneColor(targetLane); 53 53 + 54 54 + // Style based on edge type 55 55 + const isDashed = edgeType === "indirect"; 56 56 + const isMissing = edgeType === "missing"; 57 57 + const strokeWidth = isDeemphasized ? 1 : 2; 58 58 + const strokeOpacity = isDeemphasized ? 0.4 : isMissing ? 0.3 : 0.8; 59 59 + const strokeColor = isDeemphasized ? "var(--muted-foreground)" : targetColor; 60 60 + 61 61 + // Accessibility label describing the connection 62 62 + const ariaLabel = isMissingStub 63 63 + ? `${sourceRevision.change_id_short} has parent outside current view` 64 64 + : targetRevision 65 65 + ? `${sourceRevision.change_id_short} → ${targetRevision.change_id_short}${edgeType === "indirect" ? " (indirect)" : ""}` 66 66 + : `Edge from ${sourceRevision.change_id_short}`; 67 67 + 68 68 + // Missing stub: short dashed line indicating parent outside view 69 69 + if (isMissingStub) { 70 70 + const stubLength = ROW_HEIGHT * 0.4; 71 71 + return ( 72 72 + <g aria-label={ariaLabel} style={{ pointerEvents: "none" }}> 73 73 + <title>{ariaLabel}</title> 74 74 + <line 75 75 + x1={sourceX} 76 76 + y1={sourceY + NODE_RADIUS} 77 77 + x2={sourceX} 78 78 + y2={sourceY + NODE_RADIUS + stubLength} 79 79 + stroke={sourceColor} 80 80 + strokeWidth={1.5} 81 81 + strokeOpacity={0.4} 82 82 + strokeDasharray="3 3" 83 83 + data-edge-type="missing-stub" 84 84 + data-source-revision={sourceRevision.change_id} 85 85 + /> 86 86 + </g> 87 87 + ); 88 88 + } 89 89 + 90 90 + // Same lane: straight vertical line (or dotted for collapsed stacks) 91 91 + if (sourceLane === targetLane) { 92 92 + const isCollapsedStack = !!collapsedStackId; 93 93 + const y1 = sourceY + NODE_RADIUS; 94 94 + const y2 = targetY - NODE_RADIUS; 95 95 + 96 96 + // For collapsed stacks, draw a dotted line with clickable area 97 97 + if (isCollapsedStack) { 98 98 + const collapsedLabel = `${collapsedCount ?? 0} hidden revision${(collapsedCount ?? 0) !== 1 ? "s" : ""} - click to expand`; 99 99 + 100 100 + return ( 101 101 + // biome-ignore lint/a11y/useSemanticElements: Cannot use button inside SVG 102 102 + <g 103 103 + role="button" 104 104 + tabIndex={0} 105 105 + aria-label={collapsedLabel} 106 106 + className="cursor-pointer group" 107 107 + style={{ pointerEvents: "auto" }} 108 108 + onClick={() => onToggleStack?.(collapsedStackId)} 109 109 + onKeyDown={(e) => { 110 110 + if (e.key === "Enter" || e.key === " ") { 111 111 + onToggleStack?.(collapsedStackId); 112 112 + } 113 113 + }} 114 114 + > 115 115 + <title>{collapsedLabel}</title> 116 116 + {/* Invisible wider hitbox for easier clicking */} 117 117 + <line x1={sourceX} y1={y1} x2={sourceX} y2={y2} stroke="transparent" strokeWidth={16} /> 118 118 + {/* Visible dotted line */} 119 119 + <line 120 120 + x1={sourceX} 121 121 + y1={y1} 122 122 + x2={sourceX} 123 123 + y2={y2} 124 124 + stroke={sourceColor} 125 125 + strokeWidth={strokeWidth} 126 126 + strokeOpacity={0.7} 127 127 + strokeDasharray="3 6" 128 128 + strokeLinecap="round" 129 129 + className="group-hover:[stroke-width:3] group-hover:[stroke-opacity:1] transition-[stroke-width,stroke-opacity] duration-150" 130 130 + data-edge-type="collapsed-stack" 131 131 + data-stack-id={collapsedStackId} 132 132 + data-source-revision={sourceRevision.change_id} 133 133 + data-target-revision={targetRevision?.change_id} 134 134 + /> 135 135 + </g> 136 136 + ); 137 137 + } 138 138 + 139 139 + // For expanded stacks, make the edge clickable to collapse 140 140 + if (expandedStackId) { 141 141 + const expandedLabel = `Click to collapse stack`; 142 142 + // Use full stack bounds if available, otherwise fall back to node bounds 143 143 + const hitboxY1 = stackTopY !== undefined ? stackTopY : y1; 144 144 + const hitboxY2 = stackBottomY !== undefined ? stackBottomY : y2; 145 145 + 146 146 + // Apply hover styling reactively based on atom state 147 147 + const hoverStrokeWidth = isStackHovered ? 3 : strokeWidth; 148 148 + const hoverStrokeOpacity = isStackHovered ? 1 : strokeOpacity; 149 149 + 150 150 + return ( 151 151 + // biome-ignore lint/a11y/useSemanticElements: Cannot use button inside SVG 152 152 + <g 153 153 + role="button" 154 154 + tabIndex={0} 155 155 + aria-label={expandedLabel} 156 156 + className="cursor-pointer" 157 157 + style={{ pointerEvents: "auto" }} 158 158 + onClick={() => onToggleStack?.(expandedStackId)} 159 159 + onKeyDown={(e) => { 160 160 + if (e.key === "Enter" || e.key === " ") { 161 161 + onToggleStack?.(expandedStackId); 162 162 + } 163 163 + }} 164 164 + onMouseEnter={() => onHoverStack(expandedStackId)} 165 165 + onMouseLeave={() => onHoverStack(null)} 166 166 + > 167 167 + <title>{expandedLabel}</title> 168 168 + {/* Invisible wider hitbox covering full stack height */} 169 169 + <line 170 170 + x1={sourceX} 171 171 + y1={hitboxY1} 172 172 + x2={targetX} 173 173 + y2={hitboxY2} 174 174 + stroke="transparent" 175 175 + strokeWidth={16} 176 176 + /> 177 177 + <line 178 178 + x1={sourceX} 179 179 + y1={y1} 180 180 + x2={targetX} 181 181 + y2={y2} 182 182 + stroke={isDeemphasized ? strokeColor : sourceColor} 183 183 + strokeWidth={hoverStrokeWidth} 184 184 + strokeOpacity={hoverStrokeOpacity} 185 185 + strokeDasharray={isDashed ? "4 4" : undefined} 186 186 + className="transition-[stroke-width,stroke-opacity] duration-150" 187 187 + data-edge-type={edgeType} 188 188 + data-source-revision={sourceRevision.change_id} 189 189 + data-target-revision={targetRevision?.change_id} 190 190 + /> 191 191 + </g> 192 192 + ); 193 193 + } 194 194 + 195 195 + return ( 196 196 + <g aria-label={ariaLabel} style={{ pointerEvents: "none" }}> 197 197 + <title>{ariaLabel}</title> 198 198 + <line 199 199 + x1={sourceX} 200 200 + y1={y1} 201 201 + x2={targetX} 202 202 + y2={y2} 203 203 + stroke={isDeemphasized ? strokeColor : sourceColor} 204 204 + strokeWidth={strokeWidth} 205 205 + strokeOpacity={strokeOpacity} 206 206 + strokeDasharray={isDashed ? "4 4" : undefined} 207 207 + data-edge-type={edgeType} 208 208 + data-source-revision={sourceRevision.change_id} 209 209 + data-target-revision={targetRevision?.change_id} 210 210 + /> 211 211 + </g> 212 212 + ); 213 213 + } 214 214 + 215 215 + // Cross-lane: horizontal from source, curve down into target's lane 216 216 + const goingRight = targetX > sourceX; 217 217 + const arcRadius = 10; 218 218 + 219 219 + return ( 220 220 + <g aria-label={ariaLabel} style={{ pointerEvents: "none" }}> 221 221 + <title>{ariaLabel}</title> 222 222 + <path 223 223 + d={`M ${sourceX} ${sourceY + NODE_RADIUS} 224 224 + L ${targetX - arcRadius * (goingRight ? 1 : -1)} ${sourceY + NODE_RADIUS} 225 225 + Q ${targetX} ${sourceY + NODE_RADIUS} ${targetX} ${sourceY + NODE_RADIUS + arcRadius} 226 226 + L ${targetX} ${targetY - NODE_RADIUS}`} 227 227 + fill="none" 228 228 + stroke={strokeColor} 229 229 + strokeWidth={strokeWidth} 230 230 + strokeOpacity={strokeOpacity} 231 231 + strokeDasharray={isDashed ? "4 4" : undefined} 232 232 + data-edge-type={edgeType} 233 233 + data-source-revision={sourceRevision.change_id} 234 234 + data-target-revision={targetRevision?.change_id} 235 235 + /> 236 236 + </g> 237 237 + ); 238 238 + }

+129

apps/desktop/src/components/revision-graph/GraphNode.tsx

reviewed

··· 1 1 + import type { Revision } from "@/tauri-commands"; 2 2 + import { NODE_RADIUS } from "./constants"; 3 3 + 4 4 + interface GraphNodeProps { 5 5 + revision: Revision; 6 6 + lane: number; 7 7 + isSelected: boolean; 8 8 + color: string; 9 9 + } 10 10 + 11 11 + /** 12 12 + * GraphNode - Semantic node component rendered inline with each row 13 13 + * Uses inline SVG for proper accessibility (avoids role="img" on divs) 14 14 + * 15 15 + * Three variants: 16 16 + * - Working copy: @ symbol with glow 17 17 + * - Immutable: diamond shape 18 18 + * - Regular mutable: circle 19 19 + */ 20 20 + export function GraphNode({ revision, lane, isSelected, color }: GraphNodeProps) { 21 21 + const isWorkingCopy = revision.is_working_copy; 22 22 + const isImmutable = revision.is_immutable; 23 23 + 24 24 + const size = isWorkingCopy ? NODE_RADIUS * 2 + 6 : NODE_RADIUS * 2; 25 25 + const selectedRingSize = isWorkingCopy ? NODE_RADIUS + 6 : NODE_RADIUS + 4; 26 26 + 27 27 + // Working copy: @ symbol with glow 28 28 + if (isWorkingCopy) { 29 29 + return ( 30 30 + <svg 31 31 + width={size + 8} 32 32 + height={size + 8} 33 33 + viewBox={`0 0 ${size + 8} ${size + 8}`} 34 34 + className="shrink-0" 35 35 + aria-label={`Working copy revision ${revision.change_id_short}`} 36 36 + data-revision-id={revision.change_id} 37 37 + data-lane={lane} 38 38 + > 39 39 + <title>Working copy: {revision.change_id_short}</title> 40 40 + {isSelected && ( 41 41 + <circle 42 42 + cx={(size + 8) / 2} 43 43 + cy={(size + 8) / 2} 44 44 + r={selectedRingSize} 45 45 + fill={color} 46 46 + fillOpacity={0.3} 47 47 + /> 48 48 + )} 49 49 + <circle 50 50 + cx={(size + 8) / 2} 51 51 + cy={(size + 8) / 2} 52 52 + r={NODE_RADIUS + 3} 53 53 + fill={color} 54 54 + fillOpacity={0.2} 55 55 + /> 56 56 + <text 57 57 + x={(size + 8) / 2} 58 58 + y={(size + 8) / 2} 59 59 + textAnchor="middle" 60 60 + dominantBaseline="central" 61 61 + fill={color} 62 62 + fontWeight="bold" 63 63 + fontSize="12" 64 64 + > 65 65 + @ 66 66 + </text> 67 67 + </svg> 68 68 + ); 69 69 + } 70 70 + 71 71 + // Immutable: diamond shape 72 72 + if (isImmutable) { 73 73 + return ( 74 74 + <svg 75 75 + width={size + 8} 76 76 + height={size + 8} 77 77 + viewBox={`0 0 ${size + 8} ${size + 8}`} 78 78 + className="shrink-0" 79 79 + aria-label={`Immutable revision ${revision.change_id_short}`} 80 80 + data-revision-id={revision.change_id} 81 81 + data-lane={lane} 82 82 + > 83 83 + <title>Immutable: {revision.change_id_short}</title> 84 84 + {isSelected && ( 85 85 + <circle 86 86 + cx={(size + 8) / 2} 87 87 + cy={(size + 8) / 2} 88 88 + r={selectedRingSize} 89 89 + fill={color} 90 90 + fillOpacity={0.3} 91 91 + /> 92 92 + )} 93 93 + <rect 94 94 + x={(size + 8) / 2 - NODE_RADIUS} 95 95 + y={(size + 8) / 2 - NODE_RADIUS} 96 96 + width={NODE_RADIUS * 2} 97 97 + height={NODE_RADIUS * 2} 98 98 + fill={color} 99 99 + transform={`rotate(45 ${(size + 8) / 2} ${(size + 8) / 2})`} 100 100 + /> 101 101 + </svg> 102 102 + ); 103 103 + } 104 104 + 105 105 + // Regular mutable: circle 106 106 + return ( 107 107 + <svg 108 108 + width={size + 8} 109 109 + height={size + 8} 110 110 + viewBox={`0 0 ${size + 8} ${size + 8}`} 111 111 + className="shrink-0" 112 112 + aria-label={`Revision ${revision.change_id_short}`} 113 113 + data-revision-id={revision.change_id} 114 114 + data-lane={lane} 115 115 + > 116 116 + <title>Revision: {revision.change_id_short}</title> 117 117 + {isSelected && ( 118 118 + <circle 119 119 + cx={(size + 8) / 2} 120 120 + cy={(size + 8) / 2} 121 121 + r={selectedRingSize} 122 122 + fill={color} 123 123 + fillOpacity={0.3} 124 124 + /> 125 125 + )} 126 126 + <circle cx={(size + 8) / 2} cy={(size + 8) / 2} r={NODE_RADIUS} fill={color} /> 127 127 + </svg> 128 128 + ); 129 129 + }

+200

apps/desktop/src/components/revision-graph/RevisionRow.tsx

reviewed

··· 1 1 + import { useAtom } from "@effect-atom/atom-react"; 2 2 + import { useLiveQuery } from "@tanstack/react-db"; 3 3 + import { useNavigate, useSearch } from "@tanstack/react-router"; 4 4 + import { Route } from "@/routes/project.$projectId"; 5 5 + import { focusPanelAtom, viewModeAtom } from "@/atoms"; 6 6 + import { ChangedFilesList } from "@/components/ChangedFilesList"; 7 7 + import { emptyChangesCollection, getRevisionChangesCollection } from "@/db"; 8 8 + import type { Revision } from "@/tauri-commands"; 9 9 + import { ROW_HEIGHT, LANE_PADDING, LANE_WIDTH, NODE_RADIUS, laneToX, laneColor } from "./constants"; 10 10 + import { GraphNode } from "./GraphNode"; 11 11 + 12 12 + interface RevisionRowProps { 13 13 + revision: Revision; 14 14 + lane: number; 15 15 + maxLaneOnRow: number; 16 16 + isSelected: boolean; 17 17 + isChecked: boolean; 18 18 + onSelect: (changeId: string, modifiers: { shift: boolean; meta: boolean }) => void; 19 19 + isFlashing: boolean; 20 20 + isDimmed: boolean; 21 21 + isExpanded: boolean; 22 22 + isFocused: boolean; 23 23 + repoPath: string | null; 24 24 + isPendingAbandon: boolean; 25 25 + jumpModeActive: boolean; 26 26 + jumpQuery: string; 27 27 + jumpHint: string | null; 28 28 + } 29 29 + 30 30 + /** 31 31 + * RevisionRow - Renders a single revision in the graph 32 32 + * Includes graph node, revision metadata, branches, and expandable file list 33 33 + */ 34 34 + export function RevisionRow({ 35 35 + revision, 36 36 + lane, 37 37 + maxLaneOnRow, 38 38 + isSelected, 39 39 + isChecked, 40 40 + onSelect, 41 41 + isFlashing, 42 42 + isDimmed, 43 43 + isExpanded, 44 44 + isFocused, 45 45 + repoPath, 46 46 + isPendingAbandon, 47 47 + jumpModeActive, 48 48 + jumpQuery, 49 49 + jumpHint, 50 50 + }: RevisionRowProps) { 51 51 + const firstLine = revision.description.split("\n")[0] || "(no description)"; 52 52 + const fullDescription = revision.description || "(no description)"; 53 53 + 54 54 + // Calculate the node position area - leaves space for graph edges on the left 55 55 + const nodeAreaWidth = LANE_PADDING + (maxLaneOnRow + 1) * LANE_WIDTH; 56 56 + const nodeOffset = laneToX(lane); 57 57 + const color = laneColor(lane); 58 58 + 59 59 + const selectedFile = useSearch({ from: Route.fullPath, select: (s) => s.file ?? null }); 60 60 + const search = useSearch({ from: Route.fullPath }); 61 61 + const navigate = useNavigate({ from: Route.fullPath }); 62 62 + const [viewMode, setViewMode] = useAtom(viewModeAtom); 63 63 + const [, setFocusPanel] = useAtom(focusPanelAtom); 64 64 + 65 65 + const changedFilesCollection = 66 66 + isExpanded && repoPath 67 67 + ? getRevisionChangesCollection(repoPath, revision.change_id) 68 68 + : emptyChangesCollection; 69 69 + const changedFilesQuery = useLiveQuery(changedFilesCollection); 70 70 + 71 71 + function handleSelectFile(filePath: string) { 72 72 + // If in overview mode, switch to split mode and focus diff panel 73 73 + if (viewMode === 1) { 74 74 + setViewMode(2); 75 75 + setFocusPanel("diff"); 76 76 + } 77 77 + // Clear expanded state and navigate to file 78 78 + navigate({ 79 79 + search: { ...search, file: filePath, expanded: undefined }, 80 80 + }); 81 81 + } 82 82 + 83 83 + // Constants matching edge layer calculations 84 84 + const TOP_PADDING = 16; 85 85 + const CONTENT_MIN_HEIGHT = 56; 86 86 + const nodeSize = revision.is_working_copy ? NODE_RADIUS * 2 + 14 : NODE_RADIUS * 2 + 8; 87 87 + 88 88 + return ( 89 89 + <div style={{ height: isExpanded ? "auto" : ROW_HEIGHT }} className="flex flex-col relative"> 90 90 + {/* Graph node - absolutely positioned to align with edge layer */} 91 91 + <div 92 92 + className="absolute z-20 flex items-center justify-center" 93 93 + style={{ 94 94 + left: nodeOffset - nodeSize / 2, 95 95 + top: TOP_PADDING + CONTENT_MIN_HEIGHT / 2 - nodeSize / 2, 96 96 + }} 97 97 + > 98 98 + <GraphNode revision={revision} lane={lane} isSelected={isSelected} color={color} /> 99 99 + </div> 100 100 + <div className="flex items-start min-h-[56px] pt-4"> 101 101 + {/* Spacer for graph area */} 102 102 + <div className="shrink-0" style={{ width: nodeAreaWidth }} /> 103 103 + {/* biome-ignore lint/a11y/useSemanticElements: Complex styling requires div */} 104 104 + <div 105 105 + role="button" 106 106 + tabIndex={0} 107 107 + className={`relative flex-1 mr-2 min-w-0 overflow-hidden rounded my-2 mx-1 select-none border ${ 108 108 + isFocused || isChecked 109 109 + ? "bg-accent/40 border-accent/60 hover:bg-accent/50" 110 110 + : "bg-card hover:bg-muted border-border" 111 111 + } text-card-foreground shadow-sm hover:shadow hover:cursor-pointer ${ 112 112 + revision.is_immutable ? "opacity-60" : "" 113 113 + } ${isDimmed ? "opacity-40" : ""}`} 114 114 + data-focused={isFocused || undefined} 115 115 + data-selected={isSelected || undefined} 116 116 + data-checked={isChecked || undefined} 117 117 + data-expanded={isExpanded || undefined} 118 118 + data-change-id={revision.change_id} 119 119 + onClick={(e) => { 120 120 + // Prevent text selection on shift+click 121 121 + if (e.shiftKey) { 122 122 + e.preventDefault(); 123 123 + window.getSelection()?.removeAllRanges(); 124 124 + } 125 125 + onSelect(revision.change_id, { shift: e.shiftKey, meta: e.metaKey || e.ctrlKey }); 126 126 + }} 127 127 + onKeyDown={(e) => { 128 128 + if (e.key === "Enter" || e.key === " ") { 129 129 + onSelect(revision.change_id, { shift: e.shiftKey, meta: e.metaKey || e.ctrlKey }); 130 130 + } 131 131 + }} 132 132 + > 133 133 + <div className={`px-3 py-2 min-w-0 ${isPendingAbandon ? "blur-sm" : ""}`}> 134 134 + <div className="flex items-center gap-2 flex-nowrap min-w-0"> 135 135 + <code 136 136 + className={`text-xs font-mono rounded px-0.5 shrink-0 ${ 137 137 + isFlashing ? "bg-primary/40 animate-pulse" : "" 138 138 + } text-muted-foreground`} 139 139 + > 140 140 + {jumpModeActive && jumpHint ? ( 141 141 + <> 142 142 + {/* Already matched portion */} 143 143 + {jumpQuery && ( 144 144 + <span className="bg-primary/30 text-primary font-semibold"> 145 145 + {revision.change_id_short.slice(0, jumpQuery.length)} 146 146 + </span> 147 147 + )} 148 148 + {/* Next character to type (the hint) */} 149 149 + <span className="bg-primary text-primary-foreground font-semibold rounded-sm"> 150 150 + {revision.change_id_short[jumpQuery.length]} 151 151 + </span> 152 152 + {/* Rest of the ID */} 153 153 + <span>{revision.change_id_short.slice(jumpQuery.length + 1)}</span> 154 154 + </> 155 155 + ) : ( 156 156 + revision.change_id_short 157 157 + )} 158 158 + </code> 159 159 + {revision.bookmarks.length > 0 && ( 160 160 + <span 161 161 + className="text-xs text-primary font-medium truncate min-w-0 whitespace-nowrap" 162 162 + title={revision.bookmarks.join(", ")} 163 163 + > 164 164 + {revision.bookmarks.join(", ")} 165 165 + </span> 166 166 + )} 167 167 + <span className="text-xs text-muted-foreground truncate min-w-0 shrink-0"> 168 168 + {revision.author.split("@")[0]} · {revision.timestamp} 169 169 + </span> 170 170 + </div> 171 171 + <div className={`text-sm mt-1 ${isExpanded ? "" : "truncate"}`}>{firstLine}</div> 172 172 + </div> 173 173 + {isExpanded && ( 174 174 + <div className={`px-3 pb-3 pt-0 space-y-3 ${isPendingAbandon ? "blur-sm" : ""}`}> 175 175 + <pre className="text-xs text-muted-foreground whitespace-pre-wrap break-words font-mono bg-muted/40 border border-border/60 rounded p-2"> 176 176 + {fullDescription} 177 177 + </pre> 178 178 + <div className="border border-border rounded-lg overflow-hidden bg-background"> 179 179 + <ChangedFilesList 180 180 + files={changedFilesQuery.data ?? []} 181 181 + selectedFile={selectedFile} 182 182 + onSelectFile={handleSelectFile} 183 183 + isLoading={changedFilesQuery.isLoading} 184 184 + /> 185 185 + </div> 186 186 + </div> 187 187 + )} 188 188 + {isPendingAbandon && ( 189 189 + <div className="absolute inset-0 flex items-center justify-center bg-destructive/10 rounded"> 190 190 + <div className="text-sm font-medium text-destructive-foreground bg-destructive/90 px-3 py-1.5 rounded"> 191 191 + Abandon this revision? <kbd className="ml-1 px-1 bg-background/20 rounded">Y</kbd> /{" "} 192 192 + <kbd className="px-1 bg-background/20 rounded">N</kbd> 193 193 + </div> 194 194 + </div> 195 195 + )} 196 196 + </div> 197 197 + </div> 198 198 + </div> 199 199 + ); 200 200 + }

+34

apps/desktop/src/components/revision-graph/constants.ts

reviewed

··· 1 1 + /** 2 2 + * Graph layout constants 3 3 + */ 4 4 + export const ROW_HEIGHT = 64; 5 5 + export const LANE_WIDTH = 20; 6 6 + export const LANE_PADDING = 8; 7 7 + export const NODE_RADIUS = 5; 8 8 + export const MAX_LANES = 2; 9 9 + 10 10 + /** 11 11 + * Colors for lanes in the revision graph 12 12 + */ 13 13 + export const LANE_COLORS = [ 14 14 + "var(--chart-1)", 15 15 + "var(--chart-2)", 16 16 + "var(--chart-3)", 17 17 + "var(--chart-4)", 18 18 + "var(--chart-5)", 19 19 + "var(--primary)", 20 20 + ]; 21 21 + 22 22 + /** 23 23 + * Convert a lane index to X coordinate 24 24 + */ 25 25 + export function laneToX(lane: number): number { 26 26 + return LANE_PADDING + lane * LANE_WIDTH + LANE_WIDTH / 2; 27 27 + } 28 28 + 29 29 + /** 30 30 + * Get the color for a lane index 31 31 + */ 32 32 + export function laneColor(lane: number): string { 33 33 + return LANE_COLORS[lane % LANE_COLORS.length]; 34 34 + }

+1196

apps/desktop/src/components/revision-graph/index.tsx

reviewed

··· 1 1 + import { useAtom } from "@effect-atom/atom-react"; 2 2 + import { useNavigate, useSearch } from "@tanstack/react-router"; 3 3 + import { useVirtualizer } from "@tanstack/react-virtual"; 4 4 + import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react"; 5 5 + import { Route } from "@/routes/project.$projectId"; 6 6 + import { 7 7 + debugOverlayEnabledAtom, 8 8 + expandedStacksAtom, 9 9 + hoveredStackIdAtom, 10 10 + inlineJumpQueryAtom, 11 11 + viewModeAtom, 12 12 + } from "@/atoms"; 13 13 + import { 14 14 + reorderForGraph, 15 15 + detectStacks, 16 16 + computeRevisionAncestry, 17 17 + type RevisionStack, 18 18 + } from "@/components/revision-graph-utils"; 19 19 + import { prefetchRevisionDiffs } from "@/db"; 20 20 + import { useKeyboardShortcut } from "@/hooks/useKeyboard"; 21 21 + import { useRevisionGraphNavigation } from "@/hooks/useRevisionGraphNavigation"; 22 22 + import type { Revision } from "@/tauri-commands"; 23 23 + 24 24 + import { DebugOverlay } from "./DebugOverlay"; 25 25 + import { EdgeLayer } from "./EdgeLayer"; 26 26 + import { RevisionRow } from "./RevisionRow"; 27 27 + import { ROW_HEIGHT, LANE_WIDTH, LANE_PADDING, NODE_RADIUS, MAX_LANES } from "./constants"; 28 28 + import type { EdgeBinding, GraphNode, GraphRow, GraphData, GraphEdgeType } from "./types"; 29 29 + 30 30 + // Re-export types and constants for consumers 31 31 + export type { EdgeBinding, GraphNode, GraphRow, GraphData, GraphEdgeType } from "./types"; 32 32 + export { 33 33 + ROW_HEIGHT, 34 34 + LANE_WIDTH, 35 35 + LANE_PADDING, 36 36 + NODE_RADIUS, 37 37 + MAX_LANES, 38 38 + laneToX, 39 39 + laneColor, 40 40 + } from "./constants"; 41 41 + 42 42 + export interface RevisionGraphHandle { 43 43 + scrollToChangeId: ( 44 44 + changeId: string, 45 45 + options?: { align?: "auto" | "center"; smooth?: boolean }, 46 46 + ) => void; 47 47 + } 48 48 + 49 49 + interface RevisionGraphProps { 50 50 + revisions: Revision[]; 51 51 + selectedRevision: Revision | null; 52 52 + onSelectRevision: (revision: Revision) => void; 53 53 + isLoading: boolean; 54 54 + flash?: { changeId: string; key: number } | null; 55 55 + repoPath: string | null; 56 56 + pendingAbandon?: Revision | null; 57 57 + } 58 58 + 59 59 + // Get the set of commit IDs in the working copy's ancestor chain (for lane 0) 60 60 + function getWorkingCopyChain(revisions: Revision[]): Set<string> { 61 61 + const commitMap = new Map(revisions.map((r) => [r.commit_id, r])); 62 62 + const workingCopy = revisions.find((r) => r.is_working_copy); 63 63 + const chain = new Set<string>(); 64 64 + 65 65 + if (workingCopy) { 66 66 + const queue = [workingCopy.commit_id]; 67 67 + while (queue.length > 0) { 68 68 + const id = queue.shift(); 69 69 + if (!id || chain.has(id)) continue; 70 70 + chain.add(id); 71 71 + const rev = commitMap.get(id); 72 72 + if (rev) { 73 73 + // Follow first non-missing parent edge for the main chain 74 74 + const firstEdge = rev.parent_edges.find((e) => e.edge_type !== "missing"); 75 75 + if (firstEdge && commitMap.has(firstEdge.parent_id)) { 76 76 + queue.push(firstEdge.parent_id); 77 77 + } 78 78 + } 79 79 + } 80 80 + } 81 81 + 82 82 + return chain; 83 83 + } 84 84 + 85 85 + function buildGraph(revisions: Revision[]): GraphData { 86 86 + if (revisions.length === 0) return { nodes: [], laneCount: 1, rows: [], edgeBindings: [] }; 87 87 + 88 88 + // Map commit_id -> Revision for ancestry lookups 89 89 + const commitMap = new Map(revisions.map((r) => [r.commit_id, r])); 90 90 + 91 91 + // Compute ancestry relationships within the visible revset 92 92 + // This determines which revisions are actually related and should be connected 93 93 + const ancestry = computeRevisionAncestry(revisions); 94 94 + 95 95 + // Create rows for all revisions (no elision) 96 96 + const orderedRevisions = reorderForGraph(revisions); 97 97 + const rows: GraphRow[] = orderedRevisions.map((rev) => ({ 98 98 + revision: rev, 99 99 + lane: 0, 100 100 + maxLaneOnRow: 0, 101 101 + })); 102 102 + 103 103 + // Get working copy chain - these commits should all be in lane 0 104 104 + const workingCopyChain = getWorkingCopyChain(revisions); 105 105 + 106 106 + // Build row index map 107 107 + const commitToRow = new Map<string, number>(); 108 108 + rows.forEach((row, idx) => { 109 109 + commitToRow.set(row.revision.commit_id, idx); 110 110 + }); 111 111 + 112 112 + const commitToLane = new Map<string, number>(); 113 113 + const nodes: GraphNode[] = []; 114 114 + 115 115 + // Simple 2-lane system: 116 116 + // Lane 0: trunk commits and working copy chain 117 117 + // Lane 1: everything else (all feature branches) 118 118 + for (const rev of orderedRevisions) { 119 119 + const isOnWorkingCopyChain = workingCopyChain.has(rev.commit_id); 120 120 + if (rev.is_trunk || isOnWorkingCopyChain) { 121 121 + commitToLane.set(rev.commit_id, 0); 122 122 + } else { 123 123 + commitToLane.set(rev.commit_id, 1); 124 124 + } 125 125 + } 126 126 + 127 127 + // Second pass: build nodes with parent connections 128 128 + for (let rowIdx = 0; rowIdx < rows.length; rowIdx++) { 129 129 + const row = rows[rowIdx]; 130 130 + const revision = row.revision; 131 131 + const lane = commitToLane.get(revision.commit_id) ?? 0; 132 132 + 133 133 + const parentConnections: GraphNode["parentConnections"] = []; 134 134 + 135 135 + // Use ancestry.parents which only includes parents within the visible revset 136 136 + // This ensures we only draw edges to actual ancestors, not to unrelated revisions 137 137 + const visibleParents = ancestry.parents.get(revision.commit_id) ?? []; 138 138 + 139 139 + // Also check original parent_edges for edge type info and missing edges 140 140 + const parentEdgeMap = new Map(revision.parent_edges.map((e) => [e.parent_id, e])); 141 141 + 142 142 + // Detect "main merges into branch" scenario 143 143 + const isMerge = visibleParents.length > 1; 144 144 + const isMutableCommit = !revision.is_immutable; 145 145 + 146 146 + // Process visible parents (ancestors within our revset) 147 147 + for (let i = 0; i < visibleParents.length; i++) { 148 148 + const parentId = visibleParents[i]; 149 149 + const parentEdge = parentEdgeMap.get(parentId); 150 150 + const edgeType: GraphEdgeType = parentEdge?.edge_type ?? "direct"; 151 151 + 152 152 + const parentRow = commitToRow.get(parentId); 153 153 + if (parentRow === undefined) continue; 154 154 + 155 155 + let parentLane = commitToLane.get(parentId); 156 156 + if (parentLane === undefined) { 157 157 + // This shouldn't happen after first pass, but handle gracefully 158 158 + parentLane = lane; 159 159 + commitToLane.set(parentId, parentLane); 160 160 + } 161 161 + 162 162 + // Check if parent is immutable (look up the actual parent revision) 163 163 + const parentRev = commitMap.get(parentId); 164 164 + const parentIsImmutable = parentRev?.is_immutable ?? false; 165 165 + 166 166 + // De-emphasize if: merge commit, mutable commit, immutable parent 167 167 + // IMPORTANT: Don't de-emphasize first parent (i === 0) - that's the mainline 168 168 + const isDeemphasized = isMerge && isMutableCommit && parentIsImmutable && i > 0; 169 169 + 170 170 + parentConnections.push({ parentRow, parentLane, edgeType, isDeemphasized }); 171 171 + } 172 172 + 173 173 + // Handle missing edges (parents outside our revset) 174 174 + // Only show stub if we have original parents but no visible parents 175 175 + const hasMissingParents = revision.parent_edges.some((e) => e.edge_type === "missing"); 176 176 + const hasParentsOutsideView = revision.parent_ids.length > visibleParents.length; 177 177 + 178 178 + if ((hasMissingParents || hasParentsOutsideView) && parentConnections.length === 0) { 179 179 + // All parents are outside the view - show a stub 180 180 + parentConnections.push({ 181 181 + parentRow: rowIdx + 1, // Just one row down for the stub 182 182 + parentLane: lane, 183 183 + edgeType: "missing", 184 184 + isMissingStub: true, 185 185 + }); 186 186 + } else if (hasMissingParents && parentConnections.length > 0) { 187 187 + // Some parents are visible, some are missing - add stub for missing ones 188 188 + parentConnections.push({ 189 189 + parentRow: rowIdx + 1, 190 190 + parentLane: lane, 191 191 + edgeType: "missing", 192 192 + isMissingStub: true, 193 193 + }); 194 194 + } 195 195 + 196 196 + nodes.push({ 197 197 + revision, 198 198 + row: rowIdx, 199 199 + lane, 200 200 + parentConnections, 201 201 + }); 202 202 + } 203 203 + 204 204 + // Update rows with computed lane info from nodes 205 205 + let maxLaneUsed = 0; 206 206 + for (const node of nodes) { 207 207 + const row = rows[node.row]; 208 208 + if (row) { 209 209 + row.lane = node.lane; 210 210 + row.maxLaneOnRow = node.lane; // Initialize with node's lane 211 211 + } 212 212 + maxLaneUsed = Math.max(maxLaneUsed, node.lane); 213 213 + } 214 214 + 215 215 + // Calculate maxLaneOnRow using sweep line algorithm O(n log n) instead of O(n³) 216 216 + // Collect edge spans as events for efficient processing 217 217 + type SpanEvent = { row: number; isStart: boolean; lane: number }; 218 218 + const events: SpanEvent[] = []; 219 219 + 220 220 + for (const node of nodes) { 221 221 + for (const conn of node.parentConnections) { 222 222 + const nodeRow = node.row; 223 223 + const parentRow = conn.parentRow; 224 224 + const nodeLane = node.lane; 225 225 + const parentLane = conn.parentLane; 226 226 + 227 227 + // Cross-lane edge: horizontal segment at node's row uses both lanes 228 228 + if (nodeLane !== parentLane) { 229 229 + const row = rows[nodeRow]; 230 230 + if (row) { 231 231 + row.maxLaneOnRow = Math.max(row.maxLaneOnRow, nodeLane, parentLane); 232 232 + } 233 233 + } 234 234 + 235 235 + // Vertical segment: create start/end events instead of iterating rows 236 236 + const minRow = Math.min(nodeRow, parentRow); 237 237 + const maxRow = Math.max(nodeRow, parentRow); 238 238 + if (maxRow > minRow + 1) { 239 239 + // Edge spans rows [minRow+1, maxRow-1] inclusive 240 240 + events.push({ row: minRow + 1, isStart: true, lane: parentLane }); 241 241 + events.push({ row: maxRow, isStart: false, lane: parentLane }); 242 242 + } 243 243 + } 244 244 + } 245 245 + 246 246 + // Sort events: by row, with starts before ends at same row 247 247 + events.sort((a, b) => a.row - b.row || (a.isStart ? -1 : 1)); 248 248 + 249 249 + // Sweep through rows, tracking active lane counts 250 250 + const laneCounts = new Array(MAX_LANES).fill(0); 251 251 + let eventIdx = 0; 252 252 + 253 253 + for (let r = 0; r < rows.length; r++) { 254 254 + // Process all events at this row 255 255 + while (eventIdx < events.length && events[eventIdx].row === r) { 256 256 + const { isStart, lane } = events[eventIdx]; 257 257 + laneCounts[lane] += isStart ? 1 : -1; 258 258 + eventIdx++; 259 259 + } 260 260 + 261 261 + // Find max active lane for this row (check from highest lane down) 262 262 + for (let lane = MAX_LANES - 1; lane >= 0; lane--) { 263 263 + if (laneCounts[lane] > 0) { 264 264 + rows[r].maxLaneOnRow = Math.max(rows[r].maxLaneOnRow, lane); 265 265 + break; 266 266 + } 267 267 + } 268 268 + } 269 269 + 270 270 + // Ensure global consistency - propagate lane usage through connected sections 271 271 + // This handles cases where disconnected branches exist 272 272 + const globalMaxLane = maxLaneUsed; 273 273 + for (const row of rows) { 274 274 + // Ensure every row accounts for at least its own node's lane 275 275 + row.maxLaneOnRow = Math.max(row.maxLaneOnRow, row.lane); 276 276 + } 277 277 + 278 278 + // Generate semantic edge bindings from nodes' parent connections 279 279 + const edgeBindings: EdgeBinding[] = []; 280 280 + let edgeCounter = 0; 281 281 + 282 282 + for (const node of nodes) { 283 283 + for (const conn of node.parentConnections) { 284 284 + // For missing stubs, use commit_id of source and empty target 285 285 + const targetCommitId = conn.isMissingStub 286 286 + ? "" 287 287 + : (rows[conn.parentRow]?.revision.commit_id ?? ""); 288 288 + 289 289 + edgeBindings.push({ 290 290 + id: `edge-${node.revision.commit_id}-${edgeCounter++}`, 291 291 + sourceRevisionId: node.revision.commit_id, 292 292 + targetRevisionId: targetCommitId, 293 293 + sourceLane: node.lane, 294 294 + targetLane: conn.parentLane, 295 295 + edgeType: conn.edgeType, 296 296 + isDeemphasized: conn.isDeemphasized, 297 297 + isMissingStub: conn.isMissingStub, 298 298 + }); 299 299 + } 300 300 + } 301 301 + 302 302 + return { nodes, laneCount: globalMaxLane + 1, rows, edgeBindings }; 303 303 + } 304 304 + 305 305 + // Compute related revisions (ancestors + descendants) of a selected revision 306 306 + function getRelatedRevisions(revisions: Revision[], selectedChangeId: string | null): Set<string> { 307 307 + if (!selectedChangeId) return new Set(); 308 308 + 309 309 + const related = new Set<string>(); 310 310 + const commitIdToChangeId = new Map<string, string>(); 311 311 + const changeIdToCommitId = new Map<string, string>(); 312 312 + const childrenMap = new Map<string, string[]>(); // commit_id -> child commit_ids 313 313 + const parentMap = new Map<string, string[]>(); // commit_id -> parent commit_ids 314 314 + 315 315 + // Build maps 316 316 + for (const rev of revisions) { 317 317 + commitIdToChangeId.set(rev.commit_id, rev.change_id); 318 318 + changeIdToCommitId.set(rev.change_id, rev.commit_id); 319 319 + const parents: string[] = []; 320 320 + for (const edge of rev.parent_edges) { 321 321 + if (edge.edge_type === "missing") continue; 322 322 + parents.push(edge.parent_id); 323 323 + const children = childrenMap.get(edge.parent_id) ?? []; 324 324 + children.push(rev.commit_id); 325 325 + childrenMap.set(edge.parent_id, children); 326 326 + } 327 327 + parentMap.set(rev.commit_id, parents); 328 328 + } 329 329 + 330 330 + const selectedCommitId = changeIdToCommitId.get(selectedChangeId); 331 331 + if (!selectedCommitId) return new Set(); 332 332 + 333 333 + // BFS to find ancestors 334 334 + const ancestorQueue = [selectedCommitId]; 335 335 + const visited = new Set<string>(); 336 336 + while (ancestorQueue.length > 0) { 337 337 + const id = ancestorQueue.shift(); 338 338 + if (!id || visited.has(id)) continue; 339 339 + visited.add(id); 340 340 + const changeId = commitIdToChangeId.get(id); 341 341 + if (changeId) related.add(changeId); 342 342 + const parents = parentMap.get(id) ?? []; 343 343 + for (const parentId of parents) { 344 344 + ancestorQueue.push(parentId); 345 345 + } 346 346 + } 347 347 + 348 348 + // BFS to find descendants 349 349 + const descendantQueue = [selectedCommitId]; 350 350 + visited.clear(); 351 351 + while (descendantQueue.length > 0) { 352 352 + const id = descendantQueue.shift(); 353 353 + if (!id || visited.has(id)) continue; 354 354 + visited.add(id); 355 355 + const changeId = commitIdToChangeId.get(id); 356 356 + if (changeId) related.add(changeId); 357 357 + const children = childrenMap.get(id) ?? []; 358 358 + for (const childId of children) { 359 359 + descendantQueue.push(childId); 360 360 + } 361 361 + } 362 362 + 363 363 + return related; 364 364 + } 365 365 + 366 366 + export const RevisionGraph = forwardRef<RevisionGraphHandle, RevisionGraphProps>( 367 367 + function RevisionGraph( 368 368 + { revisions, selectedRevision, onSelectRevision, isLoading, flash, repoPath, pendingAbandon }, 369 369 + ref, 370 370 + ) { 371 371 + const parentRef = useRef<HTMLDivElement>(null); 372 372 + const { 373 373 + nodes, 374 374 + laneCount, 375 375 + rows: allRows, 376 376 + edgeBindings, 377 377 + } = useMemo(() => buildGraph(revisions), [revisions]); 378 378 + const expanded = useSearch({ from: Route.fullPath, select: (s) => s.expanded }); 379 379 + const search = useSearch({ from: Route.fullPath }); 380 380 + const navigate = useNavigate({ from: Route.fullPath }); 381 381 + const [inlineJumpQuery, setInlineJumpQuery] = useAtom(inlineJumpQueryAtom); 382 382 + const inlineJumpMode = inlineJumpQuery !== null; 383 383 + const [viewMode] = useAtom(viewModeAtom); 384 384 + 385 385 + // Detect collapsible stacks 386 386 + const stacks = useMemo(() => detectStacks(revisions), [revisions]); 387 387 + 388 388 + // Prefetch diffs for all revisions in background 389 389 + // This eagerly creates TanStack DB collections which trigger async fetches 390 390 + useMemo(() => { 391 391 + if (repoPath && revisions.length > 0) { 392 392 + const changeIds = revisions.map((r) => r.change_id); 393 393 + prefetchRevisionDiffs(repoPath, changeIds); 394 394 + } 395 395 + }, [repoPath, revisions]); 396 396 + 397 397 + // Track which stacks are expanded (empty = all collapsed by default) 398 398 + const [expandedStacks, setExpandedStacks] = useAtom(expandedStacksAtom); 399 399 + // Track hovered stack for coordinated edge highlighting 400 400 + const [, setHoveredStackId] = useAtom(hoveredStackIdAtom); 401 401 + 402 402 + // Read focused stack and selection from URL params 403 403 + const focusedStackId = useSearch({ from: Route.fullPath, select: (s) => s.stack ?? null }); 404 404 + const selectedParam = useSearch({ from: Route.fullPath, select: (s) => s.selected ?? "" }); 405 405 + const selectedRevisions = useMemo(() => { 406 406 + if (!selectedParam) return new Set<string>(); 407 407 + return new Set(selectedParam.split(",").filter(Boolean)); 408 408 + }, [selectedParam]); 409 409 + 410 410 + // Update URL with new selection 411 411 + function setSelectedRevisions(updater: Set<string> | ((prev: Set<string>) => Set<string>)) { 412 412 + const newSelection = typeof updater === "function" ? updater(selectedRevisions) : updater; 413 413 + const selected = newSelection.size > 0 ? [...newSelection].join(",") : undefined; 414 414 + navigate({ 415 415 + search: { ...search, selected }, 416 416 + replace: true, 417 417 + }); 418 418 + } 419 419 + 420 420 + // Toggle a revision's checked state 421 421 + function toggleRevisionCheck(changeId: string) { 422 422 + const next = new Set(selectedRevisions); 423 423 + if (next.has(changeId)) { 424 424 + next.delete(changeId); 425 425 + } else { 426 426 + next.add(changeId); 427 427 + } 428 428 + setSelectedRevisions(next); 429 429 + } 430 430 + 431 431 + // Build lookup maps for stacks 432 432 + const { stackByChangeId, stackById, intermediateChangeIds } = useMemo(() => { 433 433 + const byChangeId = new Map<string, RevisionStack>(); 434 434 + const byId = new Map<string, RevisionStack>(); 435 435 + const intermediates = new Set<string>(); 436 436 + 437 437 + for (const stack of stacks) { 438 438 + byId.set(stack.id, stack); 439 439 + for (const changeId of stack.changeIds) { 440 440 + byChangeId.set(changeId, stack); 441 441 + } 442 442 + for (const changeId of stack.intermediateChangeIds) { 443 443 + intermediates.add(changeId); 444 444 + } 445 445 + } 446 446 + return { stackByChangeId: byChangeId, stackById: byId, intermediateChangeIds: intermediates }; 447 447 + }, [stacks]); 448 448 + 449 449 + // Build node lane lookup by change_id (needed for display row construction) 450 450 + const changeIdToLane = useMemo(() => { 451 451 + const map = new Map<string, number>(); 452 452 + for (const node of nodes) { 453 453 + map.set(node.revision.change_id, node.lane); 454 454 + } 455 455 + return map; 456 456 + }, [nodes]); 457 457 + 458 458 + // Display row can be either a revision row or a collapsed stack row 459 459 + type DisplayRow = 460 460 + | { type: "revision"; row: GraphRow } 461 461 + | { type: "collapsed-stack"; stack: RevisionStack; lane: number }; 462 462 + 463 463 + // Filter rows to hide collapsed intermediate revisions and replace with a single collapsed stack row 464 464 + const displayRows = useMemo(() => { 465 465 + const result: DisplayRow[] = []; 466 466 + 467 467 + for (const row of allRows) { 468 468 + const changeId = row.revision.change_id; 469 469 + const stack = stackByChangeId.get(changeId); 470 470 + 471 471 + if (stack && intermediateChangeIds.has(changeId)) { 472 472 + // This is an intermediate revision in a stack 473 473 + if (expandedStacks.has(stack.id)) { 474 474 + // Stack is expanded - show the revision 475 475 + result.push({ type: "revision", row }); 476 476 + } 477 477 + // If collapsed, skip this row 478 478 + } else { 479 479 + // Not an intermediate or not in a stack - always show 480 480 + result.push({ type: "revision", row }); 481 481 + 482 482 + // If this is the top of a collapsed stack, insert a collapsed stack row after it 483 483 + if (stack && changeId === stack.topChangeId && !expandedStacks.has(stack.id)) { 484 484 + const lane = changeIdToLane.get(changeId) ?? 0; 485 485 + result.push({ type: "collapsed-stack", stack, lane }); 486 486 + } 487 487 + } 488 488 + } 489 489 + 490 490 + return result; 491 491 + }, [allRows, stackByChangeId, intermediateChangeIds, expandedStacks, changeIdToLane]); 492 492 + 493 493 + // Extract just revision rows for edge positioning and other logic 494 494 + const rows = useMemo( 495 495 + () => 496 496 + displayRows 497 497 + .filter((d): d is { type: "revision"; row: GraphRow } => d.type === "revision") 498 498 + .map((d) => d.row), 499 499 + [displayRows], 500 500 + ); 501 501 + 502 502 + // Toggle stack expansion 503 503 + function toggleStackExpansion(stackId: string) { 504 504 + // Clear hover state since stack structure is changing 505 505 + setHoveredStackId(null); 506 506 + setExpandedStacks((prev) => { 507 507 + const next = new Set(prev); 508 508 + if (next.has(stackId)) { 509 509 + next.delete(stackId); 510 510 + } else { 511 511 + next.add(stackId); 512 512 + } 513 513 + return next; 514 514 + }); 515 515 + } 516 516 + 517 517 + // Toggle stack expansion and focus the top of newly revealed revisions when expanding 518 518 + function handleToggleStack(stackId: string) { 519 519 + const stack = stackById.get(stackId); 520 520 + const isCurrentlyExpanded = expandedStacks.has(stackId); 521 521 + toggleStackExpansion(stackId); 522 522 + 523 523 + // If expanding (not currently expanded), focus the first intermediate revision 524 524 + // (the top of the newly revealed revisions, not the already-visible top of the stack) 525 525 + if (!isCurrentlyExpanded && stack && stack.intermediateChangeIds.length > 0) { 526 526 + navigate({ 527 527 + search: { 528 528 + ...search, 529 529 + stack: undefined, 530 530 + rev: stack.intermediateChangeIds[0], 531 531 + selected: undefined, 532 532 + selectionAnchor: undefined, 533 533 + }, 534 534 + replace: true, 535 535 + }); 536 536 + } 537 537 + } 538 538 + 539 539 + // Maps for lookups - by change_id for UI, by commit_id for graph edges 540 540 + const revisionMapByChangeId = new Map(revisions.map((r) => [r.change_id, r])); 541 541 + const revisionMapByCommitId = new Map(revisions.map((r) => [r.commit_id, r])); 542 542 + 543 543 + // Compute related revisions for dimming logic 544 544 + // When a stack is focused, use the stack's top and bottom as the "selected" revisions 545 545 + const focusedStack = focusedStackId ? stackById.get(focusedStackId) : null; 546 546 + const relatedRevisions = useMemo(() => { 547 547 + if (focusedStack) { 548 548 + // When stack is focused, highlight the stack endpoints and their ancestors/descendants 549 549 + const topRelated = getRelatedRevisions(revisions, focusedStack.topChangeId); 550 550 + const bottomRelated = getRelatedRevisions(revisions, focusedStack.bottomChangeId); 551 551 + // Union of both sets 552 552 + return new Set([...topRelated, ...bottomRelated]); 553 553 + } 554 554 + return getRelatedRevisions(revisions, selectedRevision?.change_id ?? null); 555 555 + }, [revisions, focusedStack, selectedRevision?.change_id]); 556 556 + 557 557 + // Build change_id -> displayRow index map for scrolling and edge positioning 558 558 + // IMPORTANT: Use displayRows indices (not rows) to match virtualizer positioning 559 559 + const changeIdToIndex = new Map<string, number>(); 560 560 + const commitToRowIndex = new Map<string, number>(); 561 561 + for (let i = 0; i < displayRows.length; i++) { 562 562 + const displayRow = displayRows[i]; 563 563 + if (displayRow.type === "revision") { 564 564 + changeIdToIndex.set(displayRow.row.revision.change_id, i); 565 565 + commitToRowIndex.set(displayRow.row.revision.commit_id, i); 566 566 + } 567 567 + } 568 568 + 569 569 + // Create a mapping of change_id -> commit_id for edge remapping 570 570 + const changeIdToCommitId = useMemo(() => { 571 571 + const map = new Map<string, string>(); 572 572 + for (const rev of revisions) { 573 573 + map.set(rev.change_id, rev.commit_id); 574 574 + } 575 575 + return map; 576 576 + }, [revisions]); 577 577 + 578 578 + // Filter edge bindings to handle collapsed/expanded stacks 579 579 + // When a stack is collapsed, edges from/to intermediates should be remapped 580 580 + // When a stack is expanded, edges within it should be clickable to collapse 581 581 + const filteredEdgeBindings = useMemo(() => { 582 582 + // Maps for collapsed stacks: intermediate commits -> bottom commit 583 583 + const hiddenToVisible = new Map<string, { targetCommitId: string; stack: RevisionStack }>(); 584 584 + const topCommitToStack = new Map<string, RevisionStack>(); 585 585 + // Map for expanded stacks: all commits in expanded stacks 586 586 + const commitToExpandedStack = new Map<string, RevisionStack>(); 587 587 + 588 588 + for (const stack of stacks) { 589 589 + const isExpanded = expandedStacks.has(stack.id); 590 590 + 591 591 + if (isExpanded) { 592 592 + for (const changeId of stack.changeIds) { 593 593 + const commitId = changeIdToCommitId.get(changeId); 594 594 + if (commitId) commitToExpandedStack.set(commitId, stack); 595 595 + } 596 596 + } else { 597 597 + const bottomCommitId = changeIdToCommitId.get(stack.bottomChangeId); 598 598 + const topCommitId = changeIdToCommitId.get(stack.topChangeId); 599 599 + if (!bottomCommitId || !topCommitId) continue; 600 600 + 601 601 + topCommitToStack.set(topCommitId, stack); 602 602 + for (const intermediateChangeId of stack.intermediateChangeIds) { 603 603 + const intermediateCommitId = changeIdToCommitId.get(intermediateChangeId); 604 604 + if (intermediateCommitId) { 605 605 + hiddenToVisible.set(intermediateCommitId, { targetCommitId: bottomCommitId, stack }); 606 606 + } 607 607 + } 608 608 + } 609 609 + } 610 610 + 611 611 + const remapped: EdgeBinding[] = []; 612 612 + const seen = new Set<string>(); 613 613 + 614 614 + for (const binding of edgeBindings) { 615 615 + const { sourceRevisionId, targetRevisionId } = binding; 616 616 + const sourceExpandedStack = commitToExpandedStack.get(sourceRevisionId); 617 617 + 618 618 + // Skip hidden intermediates (unless in an expanded stack) 619 619 + if (hiddenToVisible.has(sourceRevisionId) && !sourceExpandedStack) continue; 620 620 + 621 621 + let targetId = targetRevisionId; 622 622 + let collapsedStackId: string | undefined; 623 623 + let collapsedCount: number | undefined; 624 624 + let expandedStackId: string | undefined; 625 625 + 626 626 + if (sourceExpandedStack) { 627 627 + // Source is in expanded stack - check if edge is within same stack 628 628 + const targetExpandedStack = commitToExpandedStack.get(targetRevisionId); 629 629 + if (targetExpandedStack?.id === sourceExpandedStack.id) { 630 630 + expandedStackId = sourceExpandedStack.id; 631 631 + } 632 632 + } else { 633 633 + // Source not in expanded stack - apply collapsed stack remapping 634 634 + const hiddenInfo = hiddenToVisible.get(targetId); 635 635 + if (hiddenInfo) { 636 636 + const isFromStackTop = topCommitToStack.has(sourceRevisionId); 637 637 + targetId = hiddenInfo.targetCommitId; 638 638 + if (isFromStackTop) { 639 639 + collapsedStackId = hiddenInfo.stack.id; 640 640 + collapsedCount = hiddenInfo.stack.intermediateChangeIds.length; 641 641 + } 642 642 + } 643 643 + } 644 644 + 645 645 + // Deduplicate 646 646 + const key = `${sourceRevisionId}->${targetId}`; 647 647 + if (seen.has(key)) continue; 648 648 + seen.add(key); 649 649 + 650 650 + remapped.push({ 651 651 + ...binding, 652 652 + targetRevisionId: targetId, 653 653 + collapsedStackId, 654 654 + collapsedCount, 655 655 + expandedStackId, 656 656 + }); 657 657 + } 658 658 + 659 659 + return remapped; 660 660 + }, [edgeBindings, stacks, expandedStacks, changeIdToCommitId]); 661 661 + 662 662 + const [debugEnabled, setDebugEnabled] = useAtom(debugOverlayEnabledAtom); 663 663 + 664 664 + // Ref to hold scroll function - only scrolls if item is outside visible range 665 665 + const scrollToIndexIfNeededRef = useRef<((index: number) => void) | null>(null); 666 666 + 667 667 + // Determine if selected revision is expanded based on URL search params 668 668 + // Only allow inline expansion in overview mode (viewMode=1) 669 669 + const isSelectedExpanded = viewMode === 1 && expanded === true && !!selectedRevision; 670 670 + 671 671 + // Keyboard navigation (j/k/J/K/arrows/g/G/Home/End/h/l/Space/Enter/Escape) 672 672 + useRevisionGraphNavigation({ 673 673 + revisions, 674 674 + displayRows, 675 675 + changeIdToIndex, 676 676 + selectedRevision, 677 677 + enabled: !inlineJumpMode, 678 678 + scrollToIndex: (index) => scrollToIndexIfNeededRef.current?.(index), 679 679 + onToggleStack: handleToggleStack, 680 680 + isSelectedExpanded, 681 681 + }); 682 682 + 683 683 + // Toggle debug overlay with Ctrl+Shift+D 684 684 + useKeyboardShortcut({ 685 685 + key: "D", 686 686 + modifiers: { ctrl: true, shift: true }, 687 687 + onPress: () => setDebugEnabled((prev) => !prev), 688 688 + }); 689 689 + 690 690 + // Track if we just activated jump mode to ignore the same 'f' keypress 691 691 + const justActivatedRef = useRef(false); 692 692 + 693 693 + // Activate inline jump mode with 'f' key 694 694 + useKeyboardShortcut({ 695 695 + key: "f", 696 696 + modifiers: {}, 697 697 + onPress: () => { 698 698 + justActivatedRef.current = true; 699 699 + setInlineJumpQuery(""); 700 700 + // Clear the flag after a short delay (same event loop tick protection) 701 701 + requestAnimationFrame(() => { 702 702 + justActivatedRef.current = false; 703 703 + }); 704 704 + }, 705 705 + enabled: !inlineJumpMode, 706 706 + }); 707 707 + 708 708 + // Cancel inline jump mode with Escape 709 709 + useKeyboardShortcut({ 710 710 + key: "Escape", 711 711 + modifiers: {}, 712 712 + onPress: () => setInlineJumpQuery(null), 713 713 + enabled: inlineJumpMode, 714 714 + }); 715 715 + 716 716 + const rowVirtualizer = useVirtualizer({ 717 717 + count: displayRows.length, 718 718 + getScrollElement: () => parentRef.current, 719 719 + estimateSize: (index: number) => { 720 720 + const displayRow = displayRows[index]; 721 721 + if (displayRow.type === "collapsed-stack") { 722 722 + // Same height as a regular revision row 723 723 + return ROW_HEIGHT; 724 724 + } 725 725 + const row = displayRow.row; 726 726 + const isExpanded = 727 727 + isSelectedExpanded && row.revision.change_id === selectedRevision?.change_id; 728 728 + return isExpanded ? ROW_HEIGHT * 3 : ROW_HEIGHT; 729 729 + }, 730 730 + overscan: 10, 731 731 + debug: debugEnabled, 732 732 + }); 733 733 + 734 734 + // scrollToIndexIfNeededRef is updated below after virtualItems is computed 735 735 + 736 736 + // Expose scrollToChangeId method via ref 737 737 + useImperativeHandle(ref, () => ({ 738 738 + scrollToChangeId: ( 739 739 + changeId: string, 740 740 + options?: { align?: "auto" | "center"; smooth?: boolean }, 741 741 + ) => { 742 742 + const index = changeIdToIndex.get(changeId); 743 743 + if (index === undefined) { 744 744 + return; 745 745 + } 746 746 + 747 747 + const scrollElement = parentRef.current; 748 748 + if (!scrollElement) { 749 749 + return; 750 750 + } 751 751 + 752 752 + const scrollTop = scrollElement.scrollTop; 753 753 + const viewportHeight = scrollElement.clientHeight; 754 754 + const itemTop = index * ROW_HEIGHT; 755 755 + const itemBottom = itemTop + ROW_HEIGHT; 756 756 + 757 757 + // For jump commands (smooth/center), always scroll 758 758 + if (options?.smooth || options?.align === "center") { 759 759 + rowVirtualizer.scrollToIndex(index, { 760 760 + align: "center", 761 761 + behavior: "smooth", 762 762 + }); 763 763 + return; 764 764 + } 765 765 + 766 766 + // For step navigation, manually scroll only if item is outside viewport 767 767 + const isAboveViewport = itemTop < scrollTop; 768 768 + const isBelowViewport = itemBottom > scrollTop + viewportHeight; 769 769 + 770 770 + if (isAboveViewport) { 771 771 + scrollElement.scrollTop = itemTop; 772 772 + } else if (isBelowViewport) { 773 773 + scrollElement.scrollTop = itemBottom - viewportHeight; 774 774 + } 775 775 + }, 776 776 + })); 777 777 + 778 778 + function handleSelect(changeId: string, modifiers: { shift: boolean; meta: boolean }) { 779 779 + const revision = revisionMapByChangeId.get(changeId); 780 780 + if (!revision) return; 781 781 + 782 782 + // Cmd/Ctrl+click: toggle selection 783 783 + if (modifiers.meta) { 784 784 + toggleRevisionCheck(changeId); 785 785 + return; 786 786 + } 787 787 + 788 788 + // Shift+click: range select from focused to clicked 789 789 + if (modifiers.shift && selectedRevision) { 790 790 + const focusedIndex = changeIdToIndex.get(selectedRevision.change_id); 791 791 + const clickedIndex = changeIdToIndex.get(changeId); 792 792 + if (focusedIndex !== undefined && clickedIndex !== undefined) { 793 793 + const startIdx = Math.min(focusedIndex, clickedIndex); 794 794 + const endIdx = Math.max(focusedIndex, clickedIndex); 795 795 + const newSelection = new Set<string>(); 796 796 + for (let i = startIdx; i <= endIdx; i++) { 797 797 + const displayRow = displayRows[i]; 798 798 + if (displayRow.type === "revision") { 799 799 + newSelection.add(displayRow.row.revision.change_id); 800 800 + } 801 801 + } 802 802 + // Update selection in URL 803 803 + const selected = newSelection.size > 0 ? [...newSelection].join(",") : undefined; 804 804 + navigate({ 805 805 + search: { ...search, selected, stack: undefined }, 806 806 + replace: true, 807 807 + }); 808 808 + } 809 809 + return; 810 810 + } 811 811 + 812 812 + // Plain click: focus revision (clear selection, anchor, and stack focus) 813 813 + navigate({ 814 814 + search: { 815 815 + ...search, 816 816 + selected: undefined, 817 817 + selectionAnchor: undefined, 818 818 + stack: undefined, 819 819 + rev: changeId, 820 820 + }, 821 821 + replace: true, 822 822 + }); 823 823 + } 824 824 + 825 825 + const virtualItems = rowVirtualizer.getVirtualItems(); 826 826 + const visibleStartRow = virtualItems[0]?.index ?? 0; 827 827 + const visibleEndRow = virtualItems[virtualItems.length - 1]?.index ?? 0; 828 828 + const totalHeight = rowVirtualizer.getTotalSize(); 829 829 + 830 830 + // Update scroll ref - compute actually visible range based on scroll position 831 831 + scrollToIndexIfNeededRef.current = (index: number) => { 832 832 + const scrollEl = parentRef.current; 833 833 + if (!scrollEl) return; 834 834 + 835 835 + const scrollTop = scrollEl.scrollTop; 836 836 + const clientHeight = scrollEl.clientHeight; 837 837 + 838 838 + // Calculate which rows are fully visible (not just rendered with overscan) 839 839 + // Use ceil for start (first fully visible) and floor-1 for end (last fully visible) 840 840 + const visibleStart = Math.ceil(scrollTop / ROW_HEIGHT); 841 841 + const visibleEnd = Math.floor((scrollTop + clientHeight) / ROW_HEIGHT) - 1; 842 842 + 843 843 + const shouldScroll = index < visibleStart || index > visibleEnd; 844 844 + 845 845 + // Only scroll if the item is outside the fully visible range 846 846 + if (shouldScroll) { 847 847 + rowVirtualizer.scrollToIndex(index, { align: "auto" }); 848 848 + } 849 849 + }; 850 850 + const rowOffsets = new Map<number, number>(); 851 851 + for (const item of virtualItems) { 852 852 + rowOffsets.set(item.index, item.start); 853 853 + } 854 854 + 855 855 + // Compute jump hints for visible rows based on change ID prefix matching 856 856 + const { jumpHintsMap, matchingRevisions } = useMemo(() => { 857 857 + const hints = new Map<string, string>(); 858 858 + const matches: Array<{ changeId: string; shortId: string }> = []; 859 859 + 860 860 + if (inlineJumpMode && revisions.length > 0) { 861 861 + const query = inlineJumpQuery ?? ""; 862 862 + 863 863 + // First, collect all visible revisions that match the current query 864 864 + for (const item of virtualItems) { 865 865 + const row = rows[item.index]; 866 866 + if (row) { 867 867 + const shortId = row.revision.change_id_short.toLowerCase(); 868 868 + if (shortId.startsWith(query.toLowerCase())) { 869 869 + matches.push({ 870 870 + changeId: row.revision.change_id, 871 871 + shortId: row.revision.change_id_short, 872 872 + }); 873 873 + } 874 874 + } 875 875 + } 876 876 + 877 877 + // Assign hints based on the next character in the change ID 878 878 + if (query === "") { 879 879 + // Initial state: show first letter of each change ID 880 880 + for (const { changeId, shortId } of matches) { 881 881 + hints.set(changeId, shortId[0].toLowerCase()); 882 882 + } 883 883 + } else { 884 884 + // After typing: show the next letter to type, or secondary hints if needed 885 885 + const nextCharIndex = query.length; 886 886 + const nextChars = new Map<string, Array<{ changeId: string; shortId: string }>>(); 887 887 + 888 888 + // Group by next character 889 889 + for (const rev of matches) { 890 890 + const nextChar = rev.shortId[nextCharIndex]?.toLowerCase() ?? ""; 891 891 + if (nextChar) { 892 892 + const group = nextChars.get(nextChar) ?? []; 893 893 + group.push(rev); 894 894 + nextChars.set(nextChar, group); 895 895 + } 896 896 + } 897 897 + 898 898 + // Assign hints 899 899 + for (const { changeId, shortId } of matches) { 900 900 + const nextChar = shortId[nextCharIndex]?.toLowerCase() ?? ""; 901 901 + if (nextChar) { 902 902 + hints.set(changeId, nextChar); 903 903 + } 904 904 + } 905 905 + } 906 906 + } 907 907 + 908 908 + return { jumpHintsMap: hints, matchingRevisions: matches }; 909 909 + }, [inlineJumpMode, inlineJumpQuery, revisions.length, virtualItems, rows]); 910 910 + 911 911 + // Store matching revisions in a ref for use in the effect 912 912 + const matchingRevisionsRef = useRef(matchingRevisions); 913 913 + matchingRevisionsRef.current = matchingRevisions; 914 914 + 915 915 + // Handle jump hint letter key presses 916 916 + useEffect(() => { 917 917 + if (!inlineJumpMode) return; 918 918 + 919 919 + function handleJumpKey(event: KeyboardEvent) { 920 920 + const activeElement = document.activeElement; 921 921 + if (activeElement?.tagName === "INPUT" || activeElement?.tagName === "TEXTAREA") { 922 922 + return; 923 923 + } 924 924 + 925 925 + const key = event.key.toLowerCase(); 926 926 + 927 927 + // Ignore the activation key 'f' if we just activated (prevents same event capture) 928 928 + if (key === "f" && justActivatedRef.current) { 929 929 + return; 930 930 + } 931 931 + 932 932 + // Handle backspace to remove last character 933 933 + if (event.key === "Backspace") { 934 934 + event.preventDefault(); 935 935 + const currentQuery = inlineJumpQuery ?? ""; 936 936 + if (currentQuery.length > 0) { 937 937 + setInlineJumpQuery(currentQuery.slice(0, -1)); 938 938 + } else { 939 939 + setInlineJumpQuery(null); // Cancel if already empty 940 940 + } 941 941 + return; 942 942 + } 943 943 + 944 944 + // Only accept alphanumeric characters for the query 945 945 + if (/^[a-z0-9]$/i.test(key)) { 946 946 + event.preventDefault(); 947 947 + const newQuery = (inlineJumpQuery ?? "") + key; 948 948 + 949 949 + // Find matching revisions with the new query 950 950 + const matches = matchingRevisionsRef.current.filter(({ shortId }) => 951 951 + shortId.toLowerCase().startsWith(newQuery.toLowerCase()), 952 952 + ); 953 953 + 954 954 + if (matches.length === 1) { 955 955 + // Single match - jump directly 956 956 + setInlineJumpQuery(null); 957 957 + const revision = revisionMapByChangeId.get(matches[0].changeId); 958 958 + if (revision) { 959 959 + onSelectRevision(revision); 960 960 + } 961 961 + } else if (matches.length === 0) { 962 962 + // No matches - cancel 963 963 + setInlineJumpQuery(null); 964 964 + } else { 965 965 + // Multiple matches - update query to filter 966 966 + setInlineJumpQuery(newQuery); 967 967 + } 968 968 + return; 969 969 + } 970 970 + 971 971 + // Any other non-modifier key cancels jump mode 972 972 + if (!["Shift", "Control", "Alt", "Meta", "CapsLock"].includes(event.key)) { 973 973 + setInlineJumpQuery(null); 974 974 + } 975 975 + } 976 976 + 977 977 + window.addEventListener("keydown", handleJumpKey); 978 978 + return () => window.removeEventListener("keydown", handleJumpKey); 979 979 + }, [ 980 980 + inlineJumpMode, 981 981 + inlineJumpQuery, 982 982 + setInlineJumpQuery, 983 983 + revisionMapByChangeId, 984 984 + onSelectRevision, 985 985 + ]); 986 986 + 987 987 + if (revisions.length === 0) { 988 988 + return ( 989 989 + <div className="flex items-center justify-center h-full bg-background text-muted-foreground text-sm"> 990 990 + {isLoading ? "Loading revisions..." : "Select a project to view revisions"} 991 991 + </div> 992 992 + ); 993 993 + } 994 994 + 995 995 + const selectedIndex = selectedRevision 996 996 + ? changeIdToIndex.get(selectedRevision.change_id) 997 997 + : undefined; 998 998 + 999 999 + const workingCopy = revisions.find((r) => r.is_working_copy); 1000 1000 + const wcIndex = workingCopy ? changeIdToIndex.get(workingCopy.change_id) : undefined; 1001 1001 + 1002 1002 + // Calculate edge layer dimensions and row center positions 1003 1003 + const TOP_PADDING = 16; // Matches pt-4 on RevisionRow 1004 1004 + const CONTENT_MIN_HEIGHT = 56; // Matches min-h-[56px] on RevisionRow content 1005 1005 + const getRowStart = (row: number) => rowOffsets.get(row) ?? row * ROW_HEIGHT; 1006 1006 + const getRowCenter = (row: number) => getRowStart(row) + TOP_PADDING + CONTENT_MIN_HEIGHT / 2; 1007 1007 + const graphWidth = LANE_PADDING + laneCount * LANE_WIDTH + NODE_RADIUS + 2; 1008 1008 + 1009 1009 + return ( 1010 1010 + <div 1011 1011 + ref={parentRef} 1012 1012 + className="h-full overflow-auto ascii-bg" 1013 1013 + style={{ overflowAnchor: "none" }} 1014 1014 + > 1015 1015 + <div 1016 1016 + className="relative" 1017 1017 + style={{ 1018 1018 + height: `${totalHeight}px`, 1019 1019 + width: "100%", 1020 1020 + }} 1021 1021 + > 1022 1022 + {/* Edge layer - semantic edge components positioned absolutely */} 1023 1023 + {/* Key includes expandedStacks to force remount when stack state changes */} 1024 1024 + <EdgeLayer 1025 1025 + key={`edges-${[...expandedStacks].sort().join(",")}`} 1026 1026 + bindings={filteredEdgeBindings} 1027 1027 + commitToRow={commitToRowIndex} 1028 1028 + revisionMap={revisionMapByCommitId} 1029 1029 + getRowCenter={getRowCenter} 1030 1030 + totalHeight={totalHeight} 1031 1031 + width={graphWidth} 1032 1032 + visibleStartRow={visibleStartRow} 1033 1033 + visibleEndRow={visibleEndRow} 1034 1034 + stackById={stackById} 1035 1035 + changeIdToCommitId={changeIdToCommitId} 1036 1036 + onToggleStack={handleToggleStack} 1037 1037 + /> 1038 1038 + 1039 1039 + {/* Virtualized rows with inline graph nodes */} 1040 1040 + <div className="relative z-10"> 1041 1041 + {virtualItems.map((virtualRow) => { 1042 1042 + const displayRow = displayRows[virtualRow.index]; 1043 1043 + 1044 1044 + // Collapsed stack row - styled as stacked cards 1045 1045 + if (displayRow.type === "collapsed-stack") { 1046 1046 + const { stack, lane } = displayRow; 1047 1047 + const nodeAreaWidth = LANE_PADDING + (lane + 1) * LANE_WIDTH; 1048 1048 + const count = stack.intermediateChangeIds.length; 1049 1049 + // Show up to 3 stacked card layers 1050 1050 + const layers = Math.min(count, 3); 1051 1051 + 1052 1052 + // Check if this stack is related to the selected revision (for dimming) 1053 1053 + const isStackRelated = stack.changeIds.some((id) => relatedRevisions.has(id)); 1054 1054 + const isStackDimmed = selectedRevision !== null && !isStackRelated; 1055 1055 + const isStackFocused = focusedStackId === stack.id; 1056 1056 + 1057 1057 + return ( 1058 1058 + <div 1059 1059 + key={`collapsed-${stack.id}`} 1060 1060 + ref={rowVirtualizer.measureElement} 1061 1061 + data-index={virtualRow.index} 1062 1062 + className="absolute left-0 w-full" 1063 1063 + style={{ 1064 1064 + transform: `translateY(${virtualRow.start}px)`, 1065 1065 + height: ROW_HEIGHT, 1066 1066 + }} 1067 1067 + > 1068 1068 + <div className="flex flex-col relative" style={{ height: ROW_HEIGHT }}> 1069 1069 + <div className="flex items-start min-h-[56px] pt-4"> 1070 1070 + {/* Spacer for graph area */} 1071 1071 + <div className="shrink-0" style={{ width: nodeAreaWidth }} /> 1072 1072 + <button 1073 1073 + type="button" 1074 1074 + onClick={() => handleToggleStack(stack.id)} 1075 1075 + className={`relative flex-1 mr-2 min-w-0 my-2 mx-1 cursor-pointer group ${isStackDimmed ? "opacity-40" : ""}`} 1076 1076 + style={{ height: 40 }} 1077 1077 + data-focused={isStackFocused || undefined} 1078 1078 + data-stack-id={stack.id} 1079 1079 + > 1080 1080 + {/* Stacked card layers */} 1081 1081 + {Array.from({ length: layers }).map((_, i) => { 1082 1082 + const layerIndex = layers - 1 - i; // Render back layers first 1083 1083 + const offset = layerIndex * 4; 1084 1084 + const isTopLayer = layerIndex === 0; 1085 1085 + const scale = 1 - layerIndex * 0.02; 1086 1086 + 1087 1087 + return ( 1088 1088 + <div 1089 1089 + key={layerIndex} 1090 1090 + className={`absolute left-0 right-0 rounded border shadow-sm group-hover:border-muted-foreground/50 ${ 1091 1091 + isStackFocused && isTopLayer 1092 1092 + ? "bg-accent/40 border-accent/60" 1093 1093 + : "bg-card border-border" 1094 1094 + } text-card-foreground`} 1095 1095 + style={{ 1096 1096 + top: 0, 1097 1097 + height: 40, 1098 1098 + transform: `translateY(${offset}px) scaleX(${scale})`, 1099 1099 + transformOrigin: "top center", 1100 1100 + opacity: 1 - layerIndex * 0.2, 1101 1101 + zIndex: layers - layerIndex, 1102 1102 + }} 1103 1103 + /> 1104 1104 + ); 1105 1105 + })} 1106 1106 + {/* Content overlay on top card */} 1107 1107 + <div 1108 1108 + className="absolute inset-0 flex items-center justify-center gap-2 rounded" 1109 1109 + style={{ zIndex: layers + 1, height: 40 }} 1110 1110 + > 1111 1111 + <svg 1112 1112 + className="w-3.5 h-3.5 text-muted-foreground" 1113 1113 + fill="none" 1114 1114 + viewBox="0 0 24 24" 1115 1115 + stroke="currentColor" 1116 1116 + aria-hidden="true" 1117 1117 + > 1118 1118 + <path 1119 1119 + strokeLinecap="round" 1120 1120 + strokeLinejoin="round" 1121 1121 + strokeWidth={2} 1122 1122 + d="M19 9l-7 7-7-7" 1123 1123 + /> 1124 1124 + </svg> 1125 1125 + <span className="text-xs text-muted-foreground group-hover:text-foreground"> 1126 1126 + {count} hidden revision{count !== 1 ? "s" : ""} 1127 1127 + </span> 1128 1128 + </div> 1129 1129 + </button> 1130 1130 + </div> 1131 1131 + </div> 1132 1132 + </div> 1133 1133 + ); 1134 1134 + } 1135 1135 + 1136 1136 + // Regular revision row 1137 1137 + const { row } = displayRow; 1138 1138 + const lane = changeIdToLane.get(row.revision.change_id) ?? 0; 1139 1139 + const isFlashing = flash?.changeId === row.revision.change_id; 1140 1140 + const isDimmed = 1141 1141 + (selectedRevision !== null || focusedStackId !== null) && 1142 1142 + !relatedRevisions.has(row.revision.change_id); 1143 1143 + // Only show focus if no stack is focused 1144 1144 + const isFocused = 1145 1145 + !focusedStackId && selectedRevision?.change_id === row.revision.change_id; 1146 1146 + const isSelected = isFocused; 1147 1147 + const isExpanded = isSelectedExpanded && isFocused; 1148 1148 + 1149 1149 + return ( 1150 1150 + <div 1151 1151 + key={row.revision.change_id} 1152 1152 + ref={rowVirtualizer.measureElement} 1153 1153 + data-index={virtualRow.index} 1154 1154 + className="absolute left-0 w-full" 1155 1155 + style={{ 1156 1156 + transform: `translateY(${virtualRow.start}px)`, 1157 1157 + }} 1158 1158 + > 1159 1159 + <RevisionRow 1160 1160 + revision={row.revision} 1161 1161 + lane={lane} 1162 1162 + maxLaneOnRow={row.maxLaneOnRow} 1163 1163 + isSelected={isSelected} 1164 1164 + isChecked={selectedRevisions.has(row.revision.change_id)} 1165 1165 + isFocused={isFocused} 1166 1166 + onSelect={handleSelect} 1167 1167 + isFlashing={isFlashing} 1168 1168 + isDimmed={isDimmed} 1169 1169 + isExpanded={isExpanded} 1170 1170 + repoPath={repoPath} 1171 1171 + isPendingAbandon={pendingAbandon?.change_id === row.revision.change_id} 1172 1172 + jumpModeActive={inlineJumpMode} 1173 1173 + jumpQuery={inlineJumpQuery ?? ""} 1174 1174 + jumpHint={jumpHintsMap.get(row.revision.change_id) ?? null} 1175 1175 + /> 1176 1176 + </div> 1177 1177 + ); 1178 1178 + })} 1179 1179 + </div> 1180 1180 + </div> 1181 1181 + 1182 1182 + {/* Debug overlay - toggle with Ctrl+Shift+D */} 1183 1183 + <DebugOverlay 1184 1184 + scrollRef={parentRef} 1185 1185 + selectedIndex={selectedIndex} 1186 1186 + visibleStartRow={visibleStartRow} 1187 1187 + visibleEndRow={visibleEndRow} 1188 1188 + totalRows={rows.length} 1189 1189 + wcIndex={wcIndex} 1190 1190 + selectedChangeId={selectedRevision?.change_id} 1191 1191 + wcChangeId={workingCopy?.change_id} 1192 1192 + /> 1193 1193 + </div> 1194 1194 + ); 1195 1195 + }, 1196 1196 + );

+67

apps/desktop/src/components/revision-graph/types.ts

reviewed

··· 1 1 + import type { Revision } from "@/tauri-commands"; 2 2 + 3 3 + /** 4 4 + * Type of connection between revisions 5 5 + */ 6 6 + export type GraphEdgeType = "direct" | "indirect" | "missing"; 7 7 + 8 8 + /** 9 9 + * Represents a semantic binding between two revisions (like tldraw's shape bindings) 10 10 + */ 11 11 + export interface EdgeBinding { 12 12 + id: string; 13 13 + sourceRevisionId: string; 14 14 + targetRevisionId: string; 15 15 + sourceLane: number; 16 16 + targetLane: number; 17 17 + edgeType: GraphEdgeType; 18 18 + isDeemphasized?: boolean; 19 19 + isMissingStub?: boolean; 20 20 + /** If set, this edge represents a collapsed stack and clicking it should expand */ 21 21 + collapsedStackId?: string; 22 22 + /** Number of hidden revisions in the collapsed stack */ 23 23 + collapsedCount?: number; 24 24 + /** If set, this edge is part of an expanded stack and clicking it should collapse */ 25 25 + expandedStackId?: string; 26 26 + } 27 27 + 28 28 + /** 29 29 + * Connection from a revision to one of its parents 30 30 + */ 31 31 + export interface ParentConnection { 32 32 + parentRow: number; 33 33 + parentLane: number; 34 34 + edgeType: GraphEdgeType; 35 35 + isDeemphasized?: boolean; 36 36 + isMissingStub?: boolean; 37 37 + } 38 38 + 39 39 + /** 40 40 + * A node in the revision graph 41 41 + */ 42 42 + export interface GraphNode { 43 43 + revision: Revision; 44 44 + row: number; 45 45 + lane: number; 46 46 + parentConnections: ParentConnection[]; 47 47 + } 48 48 + 49 49 + /** 50 50 + * A row in the revision graph 51 51 + */ 52 52 + export interface GraphRow { 53 53 + revision: Revision; 54 54 + lane: number; 55 55 + /** Rightmost lane occupied by any graph element (node or edge) on this row */ 56 56 + maxLaneOnRow: number; 57 57 + } 58 58 + 59 59 + /** 60 60 + * Complete graph data structure 61 61 + */ 62 62 + export interface GraphData { 63 63 + nodes: GraphNode[]; 64 64 + laneCount: number; 65 65 + rows: GraphRow[]; 66 66 + edgeBindings: EdgeBinding[]; 67 67 + }