Design the Frontend for a Spreadsheet Application

// Virtualization Calculation Interface
interface ViewportBounds {
  scrollTop: number;
  scrollLeft: number;
  viewportWidth: number;
  viewportHeight: number;
}

interface RenderRange {
  startRow: number;
  endRow: number;
  startCol: number;
  endCol: number;
}

export function computeRenderRange(
  viewport: ViewportBounds,
  rowHeights: number[], // Custom heights
  colWidths: number[],  // Custom widths
  buffer: number = 5
): RenderRange {
  // Binary search to find start indices due to variable row/column sizes
  const startRow = Math.max(0, binarySearchOffset(rowHeights, viewport.scrollTop) - buffer);
  const endRow = Math.min(rowHeights.length - 1, binarySearchOffset(rowHeights, viewport.scrollTop + viewport.viewportHeight) + buffer);
  
  const startCol = Math.max(0, binarySearchOffset(colWidths, viewport.scrollLeft) - buffer);
  const endCol = Math.min(colWidths.length - 1, binarySearchOffset(colWidths, viewport.scrollLeft + viewport.viewportWidth) + buffer);

  return { startRow, endRow, startCol, endCol };
}

interface CellState {
  coordinate: string; // e.g., "B12"
  rawValue: string;   // e.g., "=SUM(A1:A10)" or "42"
  computedValue: string | number;
  style: CellStyle;
}

interface GridState {
  cells: Record<string, CellState>;
  selectedRange: { start: string; end: string } | null;
  activeCell: string | null;
  isEditing: boolean;
  historyStack: UndoRedoHistory;
}

class DependencyGraph {
  private adjList: Map<string, Set<string>> = new Map(); // Node -> Dependents

  public addDependency(child: string, parent: string) {
    if (!this.adjList.has(parent)) {
      this.adjList.set(parent, new Set());
    }
    this.adjList.get(parent)!.add(child);
  }

  public detectCycle(node: string, visited: Set<string>, stack: Set<string>): boolean {
    if (stack.has(node)) return true;
    if (visited.has(node)) return false;

    visited.add(node);
    stack.add(node);

    const dependents = this.adjList.get(node) || [];
    for (const dep of dependents) {
      if (this.detectCycle(dep, visited, stack)) return true;
    }

    stack.delete(node);
    return false;
  }
}