{
const t = table.value;
const ctx = menuCtx.value;
@@ -996,6 +1008,7 @@ const menuItems = computed(() => {
];
if (store.hasClipboard.value) items.push({ label: 'Einfügen', action: () => store.pasteClipboard() });
items.push(
+ { label: '🕸 Abhängigkeiten anzeigen', action: openDependencyGraph },
{ label: 'Zeile hinzufügen', action: () => store.addRows(props.tableId) },
{ label: 'Spalte hinzufügen', action: () => store.addColumns(props.tableId) },
{ label: 'Letzte Zeile entfernen', action: () => store.removeLastRow(props.tableId) },
diff --git a/src/engine/README.md b/src/engine/README.md
index f2252ef..c913a3a 100644
--- a/src/engine/README.md
+++ b/src/engine/README.md
@@ -558,6 +558,16 @@ gefunden wird — dieselbe konservative Konvention wie bei `IF`.
Strukturänderungen (Tabelle umbenennen/löschen, Zeilen/Spalten, Blatt löschen)
rufen `rebuild()` für einen vollständigen – trotzdem billigen – Durchlauf.
+**`Workbook.graphPrecedents`/`graphDependents`** (dünne öffentliche Wrapper
+um `DependencyGraph.getPrecedents`/`getDependents`) sind der einzige Ort, an
+dem der Graph *abgefragt* statt nur für die Neuberechnung *benutzt* wird –
+die Datenquelle des interaktiven Abhängigkeiten-Panels (`src/store/
+document.ts`s `cellGraphNeighbors`/`cellGraphSelf`, `src/components/
+DependencyGraphView.vue`, s. Haupt-README „Abhängigkeiten erkunden"). Rein
+lesend, ohne jeden Effekt auf Auswertung/Neuberechnung; bleiben auch für
+eine Zelle auf einem Zirkelbezug korrekt (die Kante existiert im Graphen
+unabhängig davon, dass `topoOrder` sie aus der Auswertung ausschließt).
+
## Fehlermodell
| Wert | Bedeutung |
diff --git a/src/engine/__tests__/workbook.spec.ts b/src/engine/__tests__/workbook.spec.ts
index 96c0c05..9ad1740 100644
--- a/src/engine/__tests__/workbook.spec.ts
+++ b/src/engine/__tests__/workbook.spec.ts
@@ -193,6 +193,71 @@ describe('Workbook named ranges', () => {
});
});
+describe('Workbook graph queries (graphPrecedents/graphDependents)', () => {
+ const coords = (a1: string) => {
+ const m = /^([A-Z]+)([0-9]+)$/.exec(a1)!;
+ return { col: m[1].split('').reduce((n, ch) => n * 26 + (ch.charCodeAt(0) - 64), 0) - 1, row: Number(m[2]) - 1 };
+ };
+
+ it('graphPrecedents lists exactly the cells a formula reads, same-table', () => {
+ const wb = fixture();
+ const { col, row } = coords('D2'); // Übersicht!D2 = B2-C2
+ const precs = wb.graphPrecedents('s-ueber', col, row);
+ expect(precs).toHaveLength(2);
+ expect(precs).toContainEqual({ tableId: 's-ueber', ...coords('B2') });
+ expect(precs).toContainEqual({ tableId: 's-ueber', ...coords('C2') });
+ });
+
+ it('graphPrecedents follows a cross-table range reference to every cell in it', () => {
+ const wb = fixture();
+ const { col, row } = coords('B2'); // Übersicht!B2 = SUM(Umsatz!B2:E2)
+ const precs = wb.graphPrecedents('s-ueber', col, row);
+ expect(precs).toHaveLength(4);
+ for (const a1 of ['B2', 'C2', 'D2', 'E2']) {
+ expect(precs).toContainEqual({ tableId: 's-umsatz', ...coords(a1) });
+ }
+ });
+
+ it('graphDependents is the exact reverse of graphPrecedents', () => {
+ const wb = fixture();
+ const { col, row } = coords('B2'); // Übersicht!B2 -- read by D2 and (via D2) E2 directly reads B2 too
+ const deps = wb.graphDependents('s-ueber', col, row);
+ expect(deps).toContainEqual({ tableId: 's-ueber', ...coords('D2') });
+ expect(deps).toContainEqual({ tableId: 's-ueber', ...coords('E2') }); // E2 = D2/B2*100, reads B2 directly
+ });
+
+ it('a cell with no formula (or a literal) has no precedents', () => {
+ const wb = fixture();
+ const { col, row } = coords('B2'); // Umsatz!B2 is a plain literal, "1200"
+ expect(wb.graphPrecedents('s-umsatz', col, row)).toEqual([]);
+ });
+
+ it('a cell nothing reads has no dependents', () => {
+ const wb = fixture();
+ const { col, row } = coords('A2'); // Umsatz!A2 = "Nord", never referenced by a formula
+ expect(wb.graphDependents('s-umsatz', col, row)).toEqual([]);
+ });
+
+ it('stays accurate for cells on a circular reference (edges exist even though topoOrder drops them)', () => {
+ const a = sheet('s1', 'S1', { A1: '=B1', B1: '=A1' });
+ const wb = new Workbook([a]);
+ const a1 = coords('A1');
+ expect(wb.graphPrecedents('s1', a1.col, a1.row)).toContainEqual({ tableId: 's1', ...coords('B1') });
+ expect(wb.graphDependents('s1', a1.col, a1.row)).toContainEqual({ tableId: 's1', ...coords('B1') });
+ });
+
+ it('updates live after a cell is re-edited to reference something else', () => {
+ const wb = fixture();
+ const c1 = coords('C1');
+ wb.setCell('s-umsatz', c1.col, c1.row, '=B2');
+ expect(wb.graphPrecedents('s-umsatz', c1.col, c1.row)).toContainEqual({ tableId: 's-umsatz', ...coords('B2') });
+ wb.setCell('s-umsatz', c1.col, c1.row, '=B3');
+ const precs = wb.graphPrecedents('s-umsatz', c1.col, c1.row);
+ expect(precs).toContainEqual({ tableId: 's-umsatz', ...coords('B3') });
+ expect(precs).not.toContainEqual({ tableId: 's-umsatz', ...coords('B2') });
+ });
+});
+
describe('Workbook recalculation order', () => {
it('evaluates precedents before dependents (chain across sheets)', () => {
const wb = fixture();
diff --git a/src/engine/index.ts b/src/engine/index.ts
index a7f5a8e..c056edd 100644
--- a/src/engine/index.ts
+++ b/src/engine/index.ts
@@ -62,6 +62,7 @@ export {
ERROR_CODES,
type ErrorCode,
type CellValue,
+ type CellRef,
type Scalar,
type EngineHost,
type NamedRangeDef,
diff --git a/src/engine/workbook.ts b/src/engine/workbook.ts
index aaee823..e8c75e2 100644
--- a/src/engine/workbook.ts
+++ b/src/engine/workbook.ts
@@ -29,6 +29,7 @@ import {
isError,
keyOf,
parseKey,
+ type CellRef,
type CellValue,
type EngineHost,
type NamedRangeDef,
@@ -158,6 +159,21 @@ export class Workbook implements EngineHost {
return v === undefined ? null : v;
}
+ /** Direct precedents of a cell -- the cells its own formula reads (a
+ * formula's `#REF`/named-range/etc. resolution already baked into the
+ * graph edges, see `precedentsOf()` above). Public wrapper around the
+ * internal `DependencyGraph`, for UI features (the dependency-graph
+ * view) that need to *query* the graph -- evaluation itself never calls
+ * this, it only calls `setPrecedents`/`affected`/`topoOrder`. */
+ graphPrecedents(tableId: string, col: number, row: number): CellRef[] {
+ return [...this.graph.getPrecedents(keyOf(tableId, col, row))].map(parseKey);
+ }
+ /** Direct dependents of a cell -- every cell whose formula reads *this*
+ * one. See graphPrecedents() above. */
+ graphDependents(tableId: string, col: number, row: number): CellRef[] {
+ return [...this.graph.getDependents(keyOf(tableId, col, row))].map(parseKey);
+ }
+
// ---- writes ---------------------------------------------------------
/** Set (or clear, with `''`) one cell and recalculate the affected cells. */
diff --git a/src/store/__tests__/document.spec.ts b/src/store/__tests__/document.spec.ts
index 46066bd..0fe38ca 100644
--- a/src/store/__tests__/document.spec.ts
+++ b/src/store/__tests__/document.spec.ts
@@ -1233,6 +1233,145 @@ describe('insertRow/deleteRow/insertColumn/deleteColumn (mid-grid, not just edge
});
});
+describe('dependency-graph view (cellGraphSelf/cellGraphNeighbors)', () => {
+ it('cellGraphSelf describes a formula cell: label, raw text, value, table/sheet name', () => {
+ const s = fresh();
+ const id = s.addTable(s.doc.activeSheetId);
+ const name = s.tableById(id)!.name;
+ setCell(s, name, 'B5', '10');
+ setCell(s, name, 'C1', '=B5+1');
+ const { col, row } = coords('C1');
+ const node = s.cellGraphSelf(id, col, row)!;
+ expect(node).toMatchObject({
+ tableId: id,
+ tableName: name,
+ col,
+ row,
+ label: 'C1',
+ raw: '=B5+1',
+ value: 11,
+ isCircular: false,
+ });
+ });
+
+ it('cellGraphNeighbors.precedents lists exactly the cells a formula reads', () => {
+ const s = fresh();
+ const id = s.addTable(s.doc.activeSheetId);
+ const name = s.tableById(id)!.name;
+ setCell(s, name, 'B2', '1');
+ setCell(s, name, 'B3', '2');
+ setCell(s, name, 'D1', '=SUM(B2:B3)');
+ const { col, row } = coords('D1');
+ const { precedents } = s.cellGraphNeighbors(id, col, row);
+ expect(precedents.map((n) => n.label).sort()).toEqual(['B2', 'B3']);
+ expect(precedents.every((n) => n.tableId === id)).toBe(true);
+ });
+
+ it('cellGraphNeighbors.dependents is the reverse: who reads this cell', () => {
+ const s = fresh();
+ const id = s.addTable(s.doc.activeSheetId);
+ const name = s.tableById(id)!.name;
+ setCell(s, name, 'A1', '5');
+ setCell(s, name, 'B1', '=A1*2');
+ setCell(s, name, 'C1', '=A1+1');
+ const { col, row } = coords('A1');
+ const { dependents } = s.cellGraphNeighbors(id, col, row);
+ expect(dependents.map((n) => n.label).sort()).toEqual(['B1', 'C1']);
+ });
+
+ it('follows a cross-table reference, labelling with the other table/sheet name', () => {
+ const s = fresh();
+ const src = s.addTable(s.doc.activeSheetId);
+ s.renameObject(src, 'Quelle4');
+ const dst = s.addTable(s.doc.activeSheetId);
+ s.renameObject(dst, 'Ziel4');
+ setCell(s, 'Quelle4', 'B2', '42');
+ setCell(s, 'Ziel4', 'A1', '=Quelle4!B2');
+ const { col, row } = coords('A1');
+ const { precedents } = s.cellGraphNeighbors(dst, col, row);
+ expect(precedents).toHaveLength(1);
+ expect(precedents[0]).toMatchObject({ tableId: src, tableName: 'Quelle4', label: 'B2', value: 42 });
+ });
+
+ it('flags a cell on a circular reference via isCircular', () => {
+ const s = fresh();
+ const id = s.addTable(s.doc.activeSheetId);
+ const name = s.tableById(id)!.name;
+ setCell(s, name, 'A1', '=B1');
+ setCell(s, name, 'B1', '=A1');
+ const { col, row } = coords('A1');
+ expect(s.cellGraphSelf(id, col, row)!.isCircular).toBe(true);
+ // the edge itself is still reported even though the cell is circular
+ const { precedents } = s.cellGraphNeighbors(id, col, row);
+ expect(precedents.map((n) => n.label)).toEqual(['B1']);
+ });
+
+ it('a literal (non-formula) cell has no precedents; an unreferenced cell has no dependents', () => {
+ const s = fresh();
+ const id = s.addTable(s.doc.activeSheetId);
+ const name = s.tableById(id)!.name;
+ setCell(s, name, 'A1', '5');
+ const { col, row } = coords('A1');
+ const { precedents, dependents } = s.cellGraphNeighbors(id, col, row);
+ expect(precedents).toEqual([]);
+ expect(dependents).toEqual([]);
+ });
+
+ it('reflects a re-edit (e.g. after changing which cell a formula reads)', () => {
+ const s = fresh();
+ const id = s.addTable(s.doc.activeSheetId);
+ const name = s.tableById(id)!.name;
+ setCell(s, name, 'B2', '1');
+ setCell(s, name, 'B3', '2');
+ setCell(s, name, 'C1', '=B2');
+ const { col, row } = coords('C1');
+ expect(s.cellGraphNeighbors(id, col, row).precedents.map((n) => n.label)).toEqual(['B2']);
+ setCell(s, name, 'C1', '=B3');
+ expect(s.cellGraphNeighbors(id, col, row).precedents.map((n) => n.label)).toEqual(['B3']);
+ });
+});
+
+describe('openDependencyGraph/closeDependencyGraph (the drawer, not just the data)', () => {
+ it('opens the drawer centered on the given cell', () => {
+ const s = fresh();
+ const id = s.addTable(s.doc.activeSheetId);
+ const { col, row } = coords('B2');
+ expect(s.ui.depGraph).toBeNull();
+ s.openDependencyGraph(id, col, row);
+ expect(s.ui.depGraph).toEqual({ tableId: id, col, row });
+ });
+
+ it('also really selects the cell -- the rest of the app (selection) reflects where you navigated', () => {
+ const s = fresh();
+ const id = s.addTable(s.doc.activeSheetId);
+ const { col, row } = coords('C3');
+ s.openDependencyGraph(id, col, row);
+ expect(s.doc.selection).toMatchObject({ tableId: id, anchor: { col, row }, focus: { col, row } });
+ expect(s.doc.activeObjectId).toBe(id);
+ });
+
+ it('switches the active sheet tab when navigating to a cell on a different sheet', () => {
+ const s = fresh();
+ const otherSheet = s.addSheet();
+ const id = s.addTable(otherSheet);
+ expect(s.doc.activeSheetId).toBe(otherSheet); // addTable already switched here
+ s.setActiveSheet(s.doc.sheets[0].id); // move away
+ expect(s.doc.activeSheetId).not.toBe(otherSheet);
+
+ s.openDependencyGraph(id, 0, 0);
+ expect(s.doc.activeSheetId).toBe(otherSheet); // navigated back automatically
+ });
+
+ it('closeDependencyGraph clears it without touching the current selection', () => {
+ const s = fresh();
+ const id = s.addTable(s.doc.activeSheetId);
+ s.openDependencyGraph(id, 0, 0);
+ s.closeDependencyGraph();
+ expect(s.ui.depGraph).toBeNull();
+ expect(s.doc.selection).toMatchObject({ tableId: id, focus: { col: 0, row: 0 } });
+ });
+});
+
describe('functionSuggestions (formula autocomplete)', () => {
it('filters built-ins by prefix, case-insensitively', () => {
const s = fresh();
diff --git a/src/store/document.ts b/src/store/document.ts
index 75412e6..bf12157 100644
--- a/src/store/document.ts
+++ b/src/store/document.ts
@@ -35,6 +35,7 @@ import {
blockAlwaysReturns,
parseDateTimeLiteral,
BUILTIN_SIGNATURES,
+ type CellRef,
type CellValue,
type TableModel,
type Token,
@@ -51,6 +52,7 @@ import {
import type {
CellCoord,
CellFormat,
+ CellGraphNode,
ChartObject,
CustomFunction,
DocumentState,
@@ -423,7 +425,14 @@ function createStore() {
const bump = () => (recalcTick.value += 1);
/** View-only state: not part of the document, not persisted. */
- const ui = reactive({ settingsOpen: false });
+ const ui = reactive({
+ settingsOpen: false,
+ /** The dependency-graph drawer's centered cell, or `null` when closed
+ * -- a single document-wide panel (like `settingsOpen`), not owned by
+ * any one `TableGrid` instance, so navigating across tables/sheets
+ * inside it doesn't depend on which grid happened to open it. */
+ depGraph: null as { tableId: string; col: number; row: number } | null,
+ });
/** Copy/cut buffer -- not part of the persisted document. */
const clipboard = ref(null);
/** Whichever formula editor is currently open (in-cell editor or formula
@@ -1244,6 +1253,70 @@ function createStore() {
const cellIsError = (t: string, c: number, r: number) => isError(cellValue(t, c, r));
const cellIsFormula = (t: string, c: number, r: number) => cellInput(t, c, r).startsWith('=');
+ // ---- dependency-graph view (precedents/dependents of a cell) ---------
+ const isCellCircular = (v: CellValue): boolean => isError(v) && v.code === '#CIRC';
+ function describeCellRef(ref: CellRef): CellGraphNode | null {
+ const table = tableById(ref.tableId);
+ if (!table) return null; // dangling (table deleted mid-navigation) -- drop it
+ const sheetId = sheetIdOfObject(ref.tableId);
+ const sheetName = (sheetId && sheetById(sheetId)?.name) || '';
+ const value = wb.cellValue(ref.tableId, ref.col, ref.row);
+ return {
+ tableId: ref.tableId,
+ tableName: table.name,
+ sheetName,
+ col: ref.col,
+ row: ref.row,
+ label: toA1(ref.col, ref.row),
+ raw: cellInput(ref.tableId, ref.col, ref.row),
+ value,
+ isCircular: isCellCircular(value),
+ };
+ }
+ /** Stable render order -- a `Set`'s iteration order is otherwise
+ * insertion-order-dependent and would make the graph view jump around
+ * on every re-render for no reason. */
+ const graphNodeSort = (a: CellGraphNode, b: CellGraphNode): number =>
+ a.tableName.localeCompare(b.tableName) || a.row - b.row || a.col - b.col;
+
+ /** The centered cell itself, described the same way as a precedent/
+ * dependent node -- null if its table no longer exists. */
+ function cellGraphSelf(tableId: string, col: number, row: number): CellGraphNode | null {
+ void recalcTick.value;
+ return describeCellRef({ tableId, col, row });
+ }
+ /** Direct precedents/dependents of a cell (see engine/graph.ts), enriched
+ * for display -- the data source for the interactive dependency-graph
+ * view (`DependencyGraphView.vue`). */
+ function cellGraphNeighbors(
+ tableId: string,
+ col: number,
+ row: number,
+ ): { precedents: CellGraphNode[]; dependents: CellGraphNode[] } {
+ void recalcTick.value;
+ const toNodes = (refs: CellRef[]) =>
+ refs.map(describeCellRef).filter((n): n is CellGraphNode => n !== null).sort(graphNodeSort);
+ return {
+ precedents: toNodes(wb.graphPrecedents(tableId, col, row)),
+ dependents: toNodes(wb.graphDependents(tableId, col, row)),
+ };
+ }
+ /** Opens the dependency-graph drawer centered on this cell -- also *really*
+ * selects it (via the existing `selectCell`, which already switches the
+ * active sheet/object as a side effect), so the sheet tabs, canvas,
+ * formula bar and status bar all reflect where you are, not just the
+ * drawer itself. Reused as-is for navigating *inside* the already-open
+ * drawer (clicking a precedent/dependent node calls this again) -- a
+ * jump across sheets/tables inside the graph is then indistinguishable
+ * from clicking that cell directly. */
+ function openDependencyGraph(tableId: string, col: number, row: number) {
+ selectCell(tableId, col, row);
+ ui.depGraph = { tableId, col, row };
+ }
+ function closeDependencyGraph() {
+ ui.depGraph = null;
+ }
+
// ---- cell writes --------------------------------------
function setCellInput(tableId: string, col: number, row: number, raw: string) {
const table = tableById(tableId);
@@ -2157,6 +2230,10 @@ function createStore() {
cellIsNumeric,
cellIsError,
cellIsFormula,
+ cellGraphSelf,
+ cellGraphNeighbors,
+ openDependencyGraph,
+ closeDependencyGraph,
setCellInput,
clearRange,
addRows,
diff --git a/src/store/types.ts b/src/store/types.ts
index 94cee01..03dfbbf 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -6,6 +6,7 @@
*/
import type { NumberLocale } from './format';
+import type { CellValue } from '../engine';
export interface CellCoord {
col: number;
@@ -201,6 +202,28 @@ export interface FnSuggestion {
kind: 'builtin' | 'custom';
}
+/** One node of the interactive dependency-graph view (document.ts's
+ * `cellGraphNeighbors()`/`cellGraphSelf()`) -- a precedent/dependent cell
+ * (or the centered cell itself), enriched with what the UI needs to
+ * render and label it without a second lookup. */
+export interface CellGraphNode {
+ tableId: string;
+ tableName: string;
+ /** the sheet the table lives on -- shown only when navigating makes the
+ * centered cell's own sheet ambiguous otherwise. */
+ sheetName: string;
+ col: number;
+ row: number;
+ /** A1 label within its table, e.g. "B5" (never table/sheet-qualified --
+ * the UI adds that itself from `tableName`/`sheetName` as needed). */
+ label: string;
+ /** raw input (formula text or literal), for a tooltip/detail view. */
+ raw: string;
+ value: CellValue;
+ /** this cell's *own* value is `#CIRC` -- it sits on a circular reference. */
+ isCircular: boolean;
+}
+
export interface DocumentState {
version: 2;
sheets: Sheet[];