PostsPosts by Kotov Semyon2026-05-20T00:00:00+00:00https://kotow.dev/posts/feed.xmlParallel formula calculation in the spreadsheet2026-05-20T00:00:00+00:002026-05-20T00:00:00+00:00https://kotow.dev/posts/parallel-formula-calculation-in-the-spreadsheet/<figure>
<img
src="/img/tonic-showcase-dark.png"
alt="Screenshot of Tonic"
>
<figcaption><p>Screenshot of Tonic</p>
</figcaption>
</figure>
<p>I'm about to graduate, and this semester I was working on my thesis. I wanted it to be technically challenging and to have some production potential, so finding a topic was not easy. After thinking about it for a while, I decided to write a new spreadsheet application.</p>
<p>This idea came from a friend, who uses spreadsheets more than I do and suggested that existing solutions can still be improved in many ways. People across different professions, use these tools daily because they bring a lot of productivity. Then also my friend uses it, for anything from calculating a GPA to grading his students, which made me wonder why I was still reluctant to use spreadsheets myself.</p>
<p>I think I do not use spreadsheets as much partly because I do not have the habit, and partly because many existing solutions do not fit well with my workflow. I run Linux and prefer open-source where possible. It is interesting to note that you do not need a spreadsheet in the same way you need Photoshop if you want to edit an image. Anything done in a spreadsheet can, in theory, be done manually too. And so, because of all the friction, I often end up using something else. When my friend used a spreadsheet to calculate the GPA, I used a simple calculator to get the same result. But when I needed to calculate GPA again for my new grades, I just asked my friend for his spreadsheet instead of bothering to type in the formula again.</p>
<p>The result is <a rel="nofollow noreferrer external" href="https://github.com/andude10/tonic">tonic</a>, which I'm still working on in my free time. It uses Tauri, which lets me write performance-sensitive parts in Rust and use Svelte for the UI.</p>
<p>It turns out that creating a spreadsheet is also a fairly complex technical task, I learned a lot while developing it. There are a lot of interconnected parts under the hood. I ended up writing a formula parser (using <a rel="nofollow noreferrer external" href="https://docs.rs/chumsky/latest/chumsky/">chumsky</a>), a cache-efficient sparse grid representation, and a parallel formula calculation engine. A fast, pretty frontend is also almost as complex as the backend. And there is still a lot of work to do before <code>tonic</code> becomes production-ready. So I thought my experience might be useful for someone who wants to build a better tool, or for someone who is just curious.</p>
<p>In this blog post, I want to talk about the algorithm that I used to calculate formulas in a spreadsheet. It's important to note that I'm still learning. If you find any mistakes, or just have some general advice, please <a href="https://kotow.dev/contact/">contact me</a>.</p>
<h1 id="spreadsheet-calculation-algorithm">Spreadsheet calculation algorithm<a class="zola-anchor" href="#spreadsheet-calculation-algorithm" aria-label="Anchor link for: spreadsheet-calculation-algorithm" style="visibility: hidden;"></a>
</h1>
<p>A spreadsheet can contain formulas: mathematical expressions that reference values of other cells. When a user changes a cell, all formulas that reference it need to be recomputed. If their results change, the next formulas need to be recomputed too, and this chain continues until the whole spreadsheet is updated. This is pretty much the most important feature of the spreadsheet.</p>
<div class="calc-demo sp-calc-demo">
<div class="calc-demo__controls sp-calc-demo__controls">
<label
><input type="checkbox" name="calc-demo" value="a30" />A1 ←
67</label
><label
><input type="checkbox" name="calc-demo" value="b2" />B2 ←
=A2*1000</label
>
</div>
<div class="calc-demo__sheet sp-calc-demo__sheet">
<table aria-label="Spreadsheet recalculation example">
<colgroup>
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td data-cell="A1"><span data-value="A1">10</span></td>
<td data-cell="B1">
<span data-value="B1">20</span>
<span class="formula">(=A1*2)</span>
</td>
<td data-cell="C1">
<span data-value="C1">120</span>
<span class="formula">(=SUM(B1:B3))</span>
</td>
</tr>
<tr>
<th>2</th>
<td data-cell="A2"><span data-value="A2">20</span></td>
<td data-cell="B2">
<span data-value="B2">40</span>
<span class="formula" data-formula="B2">(=A2*2)</span>
</td>
<td data-cell="C2"></td>
</tr>
<tr>
<th>3</th>
<td data-cell="A3"><span data-value="A3">30</span></td>
<td data-cell="B3">
<span data-value="B3">60</span>
<span class="formula">(=A3*2)</span>
</td>
<td data-cell="C3"></td>
</tr>
</tbody>
</table>
</div>
<div class="calc-demo__text sp-calc-demo__panel is-hidden">
<p data-order></p>
</div>
<script>
{
const helpers = window.spCalcDemo;
const demo = document.currentScript.closest(".calc-demo");
const inputs = demo.querySelectorAll('input[name="calc-demo"]');
const text = demo.querySelector(".calc-demo__text");
const order = demo.querySelector("[data-order]");
const cells = helpers.nodeMap(demo, "[data-cell]", "cell");
const valueNodes = helpers.nodeMap(demo, "[data-value]", "value");
const formulaNodes = helpers.nodeMap(
demo,
"[data-formula]",
"formula",
);
const baseValues = {
A1: 10,
A2: 20,
A3: 30,
B1: 20,
B2: 40,
B3: 60,
C1: 120,
};
const baseFormulaText = {
B2: "(=A2*2)",
};
const scenarios = {
a30: {
focus: "A1",
values: { A1: 67, B1: 134, C1: 234 },
order: "Order: A1, B1, C1",
},
b2: {
focus: "B2",
values: { B2: 20000, C1: 20080 },
formulas: { B2: "(=A2*1000)" },
order: "Order: B2, C1",
},
};
function render(edit) {
const scenario = scenarios[edit] || {};
const values = { ...baseValues, ...(scenario.values || {}) };
const formulas = {
...baseFormulaText,
...(scenario.formulas || {}),
};
for (const [cell, node] of valueNodes) {
// Spreadsheet values switch only when the rendered number changes.
helpers.switchText(node, values[cell]);
}
for (const [cell, node] of formulaNodes) {
// Formula text uses the same switch animation as cell values.
helpers.switchText(node, formulas[cell]);
}
helpers.focusCells(cells, scenario.focus);
text.classList.toggle("is-hidden", !edit);
order.textContent = scenario.order || "";
}
helpers.bindExclusiveInputs(inputs, {
reset: function () {
render("");
},
select: function (input) {
render(input.value);
},
});
render("");
}
</script>
</div>
<p>The visualisation above shows the order in which formulas should be recomputed after different inputs. For example, if we change the value of A1 to 67, then B1 should be computed before C1. Otherwise, C1 will use the old value of B1, and the spreadsheet will display incorrect values. So we need a calculation algorithm that respects this order. We also want it to be as fast as possible, because almost all user actions trigger recalculation.</p>
<p>The first spreadsheet program, VisiCalc, used a straightforward algorithm. After any cell change, the whole spreadsheet is recalculated from top to bottom. But what about the order? The algorithm runs recalculations until the previous iteration produces the same values as the next one. In other words, until <code>changed</code> becomes false:</p>
<div class="visicalc-demo sp-calc-demo">
<div class="visicalc-demo__controls sp-calc-demo__controls">
<label
><input type="checkbox" name="visicalc-demo" value="a2" />A2 ←
40</label
><label
><input type="checkbox" name="visicalc-demo" value="c1" />C1 ←
=SUM(B1:B3) * 1000</label
>
</div>
<div class="visicalc-demo__timeline sp-calc-demo__timeline" hidden>
<div class="visicalc-demo__scrubber sp-calc-demo__scrubber">
<button type="button" data-step="-1" aria-label="Previous step">
<span data-icon="arrow" aria-hidden="true"></span>
</button>
<input
type="range"
min="0"
max="0"
value="0"
aria-label="Visualization step"
data-slider
/>
<button type="button" data-step="1" aria-label="Next step">
<span data-icon="arrow" aria-hidden="true"></span>
</button>
<span class="visicalc-demo__step sp-calc-demo__step" data-step-label>0/0</span>
</div>
<button
class="visicalc-demo__play sp-calc-demo__play"
type="button"
data-play
aria-label="Play"
>
<span
data-icon="play"
data-play-icon="play"
aria-hidden="true"
></span>
<span
data-icon="pause"
data-play-icon="pause"
aria-hidden="true"
hidden
></span>
</button>
</div>
<div class="visicalc-demo__sheet sp-calc-demo__sheet">
<table aria-label="VisiCalc recalculation algorithm example">
<colgroup>
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td data-cell="A1"><span data-value="A1">10</span></td>
<td data-cell="B1">
<span data-value="B1">20</span>
<span class="formula">(=A1*2)</span>
</td>
<td data-cell="C1">
<span data-value="C1">120</span>
<span class="formula" data-formula="C1"
>(=SUM(B1:B3))</span
>
</td>
</tr>
<tr>
<th>2</th>
<td data-cell="A2"><span data-value="A2">20</span></td>
<td data-cell="B2">
<span data-value="B2">40</span>
<span class="formula">(=A2*2)</span>
</td>
<td data-cell="C2"></td>
</tr>
<tr>
<th>3</th>
<td data-cell="A3"><span data-value="A3">30</span></td>
<td data-cell="B3">
<span data-value="B3">60</span>
<span class="formula">(=A3*2)</span>
</td>
<td data-cell="C3"></td>
</tr>
</tbody>
</table>
</div>
<div class="visicalc-demo__info sp-calc-demo__info">
<div class="visicalc-demo__text sp-calc-demo__panel is-hidden">
<p data-status></p>
</div>
<div class="visicalc-demo__changed sp-calc-demo__panel is-hidden">
<p>
<code
>changed:
<strong class="visicalc-demo__bool--false" data-changed
>false</strong
>
</code>
</p>
</div>
</div>
<script>
{
const helpers = window.spCalcDemo;
const demo = document.currentScript.closest(".visicalc-demo");
const inputs = demo.querySelectorAll('input[name="visicalc-demo"]');
const timeline = demo.querySelector(".visicalc-demo__timeline");
const slider = demo.querySelector("[data-slider]");
const stepLabel = demo.querySelector("[data-step-label]");
const stepButtons = demo.querySelectorAll("[data-step]");
const playButton = demo.querySelector("[data-play]");
const playIcon = demo.querySelector('[data-play-icon="play"]');
const pauseIcon = demo.querySelector('[data-play-icon="pause"]');
const sheet = demo.querySelector(".visicalc-demo__sheet");
const status = demo.querySelector("[data-status]");
const statusBox = demo.querySelector(".visicalc-demo__text");
const changedBox = demo.querySelector(".visicalc-demo__changed");
const changedText = demo.querySelector("[data-changed]");
const cells = helpers.nodeMap(demo, "[data-cell]", "cell");
const valueNodes = helpers.nodeMap(demo, "[data-value]", "value");
const formulaNodes = helpers.nodeMap(
demo,
"[data-formula]",
"formula",
);
const baseValues = {
A1: 10,
A2: 20,
A3: 30,
B1: 20,
B2: 40,
B3: 60,
C1: 120,
};
const baseFormulaText = {
C1: "(=SUM(B1:B3))",
};
const scenarios = {
a2: { focus: "A2", values: { A2: 40 } },
c1: {
focus: "C1",
formulas: {
C1: (values) =>
(values.B1 + values.B2 + values.B3) * 1000,
},
formulaText: { C1: "(=SUM(B1:B3)*1000)" },
},
};
const scanOrder = [
"A1",
"B1",
"C1",
"A2",
"B2",
"C2",
"A3",
"B3",
"C3",
];
const baseFormulas = {
B1: (values) => values.A1 * 2,
C1: (values) => values.B1 + values.B2 + values.B3,
B2: (values) => values.A2 * 2,
B3: (values) => values.A3 * 2,
};
let steps = [];
let stepIndex = 0;
const timelineController = helpers.createTimelineController({
slider,
stepLabel,
stepButtons,
playButton,
playIcon,
pauseIcon,
playDelay: 1000,
getStepCount: function () {
return steps.length;
},
getStepIndex: function () {
return stepIndex;
},
setStepIndex: function (nextStep) {
stepIndex = nextStep;
},
render,
});
function calculatedText(calculated) {
return calculated.length
? `Calculated: ${calculated.join(", ")}`
: "Calculated: None";
}
function setChanged(changed) {
const nextText = changed ? "true" : "false";
// The changed flag space is reserved, then revealed during playback.
changedBox.classList.remove("is-hidden");
// The label only animates when the boolean text switches.
helpers.switchText(
changedText,
nextText,
changed
? "visicalc-demo__bool--true"
: "visicalc-demo__bool--false",
);
}
function renderFormulaText(edit) {
const scenario = scenarios[edit] || {};
const text = {
...baseFormulaText,
...(scenario.formulaText || {}),
};
for (const [cell, node] of formulaNodes) {
// Formula labels follow formula edits without duplicating the table.
helpers.switchText(node, text[cell], "formula");
}
}
function buildSteps(edit) {
const scenario = scenarios[edit];
const values = { ...baseValues, ...(scenario.values || {}) };
const formulas = {
...baseFormulas,
...(scenario.formulas || {}),
};
const result = [];
for (let pass = 1; pass <= 100; pass++) {
let changed = false;
const done = [];
function pushStep(extra) {
// Every timeline step freezes values before later formulas mutate them.
result.push({
values: { ...values },
changed,
...extra,
});
}
for (const cell of scanOrder) {
// Yellow means the VisiCalc scan reached this grid cell.
pushStep({ current: cell, done: [...done] });
// Only formula cells can change a stored spreadsheet value.
if (formulas[cell]) {
const nextValue = formulas[cell](values);
// A changed result keeps the outer recalculation loop running.
if (nextValue !== values[cell]) {
changed = true;
}
values[cell] = nextValue;
}
done.push(cell);
// Green means the grid cell has been visited in the scan.
pushStep({ done: [...done] });
}
// The pass ends by checking whether any formula changed.
pushStep({ done: [...done], check: true });
// A changed pass may leave later formulas stale, so the scan repeats.
if (changed) {
pushStep({ repeat: true });
continue;
}
pushStep({ complete: true });
break;
}
return result;
}
function clearCellStates() {
for (const cell of cells.values()) {
// Each render starts from white cells, then applies scan colors.
cell.classList.remove("is-current", "is-done");
}
sheet.classList.remove("is-repeat", "is-complete");
}
function renderValues(values) {
for (const [cell, node] of valueNodes) {
// Values are rendered separately from formula text to keep formulas visible.
helpers.switchText(node, values[cell]);
}
}
function renderStatus(step) {
// The status space is reserved, then revealed during playback.
statusBox.classList.remove("is-hidden");
// The check step replaces the calculated list with the pass-end question.
if (step.check) {
status.textContent =
"Spreadsheet changed during recalculation?";
return;
}
// A repeated pass explains why the changed flag keeps the loop running.
if (step.repeat) {
status.textContent =
"Yes. Spreadsheet might be still inconsistent, continue";
return;
}
// A complete pass explains why the recalculation loop stops.
if (step.complete) {
status.textContent = "No. Calculation is completed";
return;
}
status.textContent = calculatedText(step.done || []);
}
function render() {
const step = steps[stepIndex];
// Without an active edit, the grid shows the initial spreadsheet values.
if (!step) {
clearCellStates();
renderValues(baseValues);
statusBox.classList.add("is-hidden");
changedBox.classList.add("is-hidden");
timelineController.updatePlayButton();
return;
}
clearCellStates();
renderValues(step.values);
renderStatus(step);
setChanged(step.changed);
// Red marks the pass result where another recalculation is needed.
if (step.repeat) {
sheet.classList.add("is-repeat");
}
// A green grid border marks the same break condition as the C code.
if (step.complete) {
sheet.classList.add("is-complete");
}
for (const cell of step.done || []) {
// Already visited cells stay green for the rest of the pass.
cells.get(cell).classList.add("is-done");
}
// The current cell is yellow until this scan step finishes.
if (step.current) {
cells.get(step.current).classList.add("is-current");
}
timelineController.renderControls();
}
function showEdit(edit) {
timelineController.setPlaying(false);
steps = buildSteps(edit);
stepIndex = 0;
slider.max = steps.length - 1;
slider.value = 0;
timeline.style.setProperty(
"--visicalc-slider-size",
`${Math.min(42, Math.max(18, steps.length * 0.6))}rem`,
);
renderFormulaText(edit);
timeline.hidden = false;
render();
helpers.focusCells(cells, scenarios[edit].focus);
}
function reset() {
timelineController.setPlaying(false);
steps = [];
stepIndex = 0;
timeline.style.removeProperty("--visicalc-slider-size");
renderFormulaText("");
timeline.hidden = true;
render();
helpers.focusCells(cells, "");
}
helpers.bindExclusiveInputs(inputs, {
reset,
select: function (input) {
showEdit(input.value);
},
});
timelineController.bind();
reset();
}
</script>
</div>
<p>This algorithm gives us an average time complexity of $O(n \cdot k)$, where $n$ is the size of the whole spreadsheet and $k$ is the number of times we had to run the recalculation. The worst case is quadratic, so the performance is not ideal. But the good side of this algorithm is its space complexity, which is just $O(n)$: we do not store any extra information besides the data itself. At that time, a program couldn't waste any RAM. The less memory a program used, the bigger spreadsheets it could create, which is why this algorithm was used in VisiCalc.</p>
<p>Today this algorithm may look inefficient, but users understood these limitations and structured their spreadsheets to avoid worst cases. If I had to guess, this habit is why we still create spreadsheets where formulas reference cells on the left-hand side of the grid, and summaries (like <code>SUM</code> or <code>AVG</code>) are placed at the bottom.</p>
<p>However, modern spreadsheets use more advanced algorithms, which preserve the relationships between cells, for example in the form of a DAG (directed acyclic graph). Each time a formula changes, we update the graph. During recalculation, we traverse it. In spreadsheets, this is usually called the "dependency graph", because it stores how formulas depend on other cells.</p>
<p>Consider some cells X and Y in the dependency graph.</p>
<div class="dependency-graph-demo sp-calc-demo">
<div class="sp-calc-demo__graph">
<svg
viewBox="0 0 420 170"
role="img"
aria-label="Dependency graph example: cell Y points to cell X because X depends on Y."
>
<g class="sp-calc-demo__graph-edge" data-edge="Y:X">
<path d="M 158 70 H 260" />
<path d="M 260 70 L 248 62 M 260 70 L 248 78" />
</g>
<g class="sp-calc-demo__graph-node" data-node="Y">
<circle
class="sp-calc-demo__graph-node-shape"
cx="110"
cy="70"
r="38"
/>
<text class="sp-calc-demo__graph-name" x="110" y="78">Y</text>
<text class="sp-calc-demo__graph-label" x="110" y="135">
dependency
</text>
</g>
<g class="sp-calc-demo__graph-node" data-node="X">
<circle
class="sp-calc-demo__graph-node-shape"
cx="310"
cy="70"
r="38"
/>
<text class="sp-calc-demo__graph-name" x="310" y="78">X</text>
<text class="sp-calc-demo__graph-label" x="310" y="135">
dependent
</text>
</g>
</svg>
<p class="sp-calc-demo__graph-caption">Dependency graph</p>
</div>
</div>
<p>If cell X has a formula that references cell Y, then:</p>
<ul>
<li>Y is called the "dependency" of X</li>
<li>X is called the "dependent" of Y</li>
</ul>
<p>Likewise:</p>
<ul>
<li>All cells referenced by X are called "dependencies" of X</li>
<li>All cells that reference Y are called the "dependents" of Y</li>
</ul>
<p>The direction in the dependency graph is from a "dependency" to a "dependent". Remembering this will help you understand the visualisation of the algorithm. Maybe it's just me, but I often confuse which cell is which. You can see if you're me or not by guessing which cell is X in this case:</p>
<div class="dependency-quiz-demo sp-calc-demo">
<div class="dependency-quiz-demo__controls sp-calc-demo__controls">
<label
><input type="checkbox" name="dependency-quiz-demo" value="a1" />A1
is X</label
><label
><input type="checkbox" name="dependency-quiz-demo" value="b1" />B1
is X</label
>
</div>
<div class="dependency-quiz-demo__sheet sp-calc-demo__sheet">
<table aria-label="Spreadsheet dependency quiz">
<colgroup>
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td data-cell="A1">10</td>
<td data-cell="B1">
20 <span class="formula">(=A1*2)</span>
</td>
<td data-cell="C1"></td>
</tr>
<tr>
<th>2</th>
<td data-cell="A2"></td>
<td data-cell="B2"></td>
<td data-cell="C2"></td>
</tr>
</tbody>
</table>
</div>
<div class="dependency-quiz-demo__feedbacks">
<div
class="dependency-quiz-demo__feedback dependency-quiz-demo__feedback--correct"
>
<span data-icon="check" aria-hidden="true"></span>
<p>
Correct, B1 is the dependent of A1, and A1 is the dependency of
B1
</p>
</div>
<div
class="dependency-quiz-demo__feedback dependency-quiz-demo__feedback--wrong"
>
<span data-icon="cross" aria-hidden="true"></span>
<p>Hello me!</p>
</div>
</div>
<script>
{
const helpers = window.spCalcDemo;
const demo = document.currentScript.closest(
".dependency-quiz-demo",
);
const inputs = demo.querySelectorAll(
'input[name="dependency-quiz-demo"]',
);
helpers.bindExclusiveInputs(inputs, {});
}
</script>
</div>
<p>The dependency graph lets us quickly find the dependencies and dependents of any cell. But there are two common implementations of a graph: adjacency list and adjacency matrix. Which one should we choose? A rough rule is to choose an adjacency list if the dependency graph is sparse (each node has a small number of edges), and an adjacency matrix if it is dense (each node has a lot of edges).</p>
<p>But the dependency graph in a spreadsheet is actually both. Some cells (like <code>=A1*2</code>) have only a single edge, while others (like <code>=AVG(A1:A10000)</code>) can have thousands of edges. This is why spreadsheets use different compression techniques (for example, instead of <code>A1 -> B1, A2 -> B1, A3 -> B1, ..., A10000 -> B1</code>, use just a single edge <code>A1:A10000 -> B1</code>). In my implementation, I decided to use the <a href="file:///home/andude/Downloads/TACO_algorithm.pdf">TACO algorithm</a> to compress dependencies. In this post I want to focus more on the formula calculation algorithm, so I won't go into further details. But I think the link will give you mcuh more details than I can, in case you are interested.</p>
<p>With the dependency graph, the new calculation algorithm recalculates only the cells affected by the user change. If the user changed <code>A1</code>, then we find the dependents of <code>A1</code> and recalculate them, then recalculate their dependents, and so on. However, this is not enough, because it will not always respect formula order. For example, consider <code>A1=5, B1=A1*2, C1=A1+B1</code>. If we change <code>A1</code>, then we get its dependents: <code>B1</code> and <code>C1</code>. We should first calculate <code>B1</code> and only then <code>C1</code>, but a simple traversal (like BFS) does not guarantee this order.</p>
<p>One solution is to use <a rel="nofollow noreferrer external" href="https://www.geeksforgeeks.org/dsa/topological-sorting-indegree-based-solution/">Kahn's topological sort</a>. Given a DAG, it returns a topological sort of the DAG such that for every edge <code>u -> v</code>, node <code>u</code> comes before <code>v</code>. It works by assigning an "in-degree" counter to each node in the graph. This counter represents how many edges point toward the node. For example, for the graph <code>X -> Y, Z -> Y, Y -> A</code>, the counters are as follows: <code>in_degree(X) = 0, in_degree(Z) = 0, in_degree(Y) = 2, in_degree(A) = 1</code>. Then, all nodes with an in-degree of 0 are added to a queue. We repeatedly remove a node from the queue, add it to our result list, and reduce the in-degree of all its adjacent nodes. If any of those nodes now have an in-degree of 0, they are added to the queue. This process continues until the queue is empty, and the result is a topological sort of the nodes. For us, this means that if we calculate the cells in this order, then the result should be correct.</p>
<p>In our case, the nodes are the cells in the dependency graph. The in-degree counter for cell X tells us how many dependencies we still need to calculate before calculating X. So, if the counter of X is 0, then all the dependencies of X are calculated and we can calculate X itself.</p>
<div class="kahn-demo sp-calc-demo">
<div class="kahn-demo__controls sp-calc-demo__controls">
<label
><input type="checkbox" name="kahn-demo" value="a2" />A2 ← 40</label
>
<label
><input type="checkbox" name="kahn-demo" value="c1" />C1 ←
=SUM(B1:B3) * 1000</label
>
<label
><input type="checkbox" name="kahn-demo" value="a1a2" />A1 ← =A2+1,
A2 ← 99</label
>
</div>
<div class="kahn-demo__timeline sp-calc-demo__timeline" hidden>
<div class="kahn-demo__scrubber sp-calc-demo__scrubber">
<button type="button" data-step="-1" aria-label="Previous step">
<span data-icon="arrow" aria-hidden="true"></span>
</button>
<input
type="range"
min="0"
max="0"
value="0"
aria-label="Visualization step"
data-slider
/>
<button type="button" data-step="1" aria-label="Next step">
<span data-icon="arrow" aria-hidden="true"></span>
</button>
<span class="kahn-demo__step sp-calc-demo__step" data-step-label>0/0</span>
</div>
<button
class="kahn-demo__play sp-calc-demo__play"
type="button"
data-play
aria-label="Play"
>
<span
data-icon="play"
data-play-icon="play"
aria-hidden="true"
></span>
<span
data-icon="pause"
data-play-icon="pause"
aria-hidden="true"
hidden
></span>
</button>
</div>
<div class="kahn-demo__sheet sp-calc-demo__sheet">
<table aria-label="Kahn topological sort formula calculation example">
<colgroup>
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td data-cell="A1">
<span data-value="A1">10</span>
<span class="formula" data-formula="A1"></span>
</td>
<td data-cell="B1">
<span data-value="B1">20</span>
<span class="formula">(=A1*2)</span>
</td>
<td data-cell="C1">
<span data-value="C1">60</span>
<span class="formula" data-formula="C1"
>(=SUM(B1:B3))</span
>
</td>
</tr>
<tr>
<th>2</th>
<td data-cell="A2"><span data-value="A2">20</span></td>
<td data-cell="B2">
<span data-value="B2">40</span>
<span class="formula">(=A2*2)</span>
</td>
<td data-cell="C2">
<span data-value="C2">60</span>
<span class="formula" data-formula="C2">(=A2+B2)</span>
</td>
</tr>
<tr>
<th>3</th>
<td data-cell="A3"></td>
<td data-cell="B3"></td>
<td data-cell="C3"></td>
</tr>
</tbody>
</table>
</div>
<div class="sp-calc-demo__graph kahn-demo__graph">
<svg
data-graph
viewBox="0 0 640 235"
role="img"
aria-label="Dependency graph for the spreadsheet table. Each node shows the cell name and its current in-degree counter."
></svg>
</div>
<div class="kahn-demo__info sp-calc-demo__info">
<div class="kahn-demo__text sp-calc-demo__panel is-hidden"><p data-status></p></div>
<div class="kahn-demo__queue sp-calc-demo__panel is-hidden"><p data-queue></p></div>
</div>
<script>
{
const helpers = window.spCalcDemo;
const demo = document.currentScript.closest(".kahn-demo");
const inputs = demo.querySelectorAll('input[name="kahn-demo"]');
const timeline = demo.querySelector(".kahn-demo__timeline");
const slider = demo.querySelector("[data-slider]");
const stepLabel = demo.querySelector("[data-step-label]");
const stepButtons = demo.querySelectorAll("[data-step]");
const playButton = demo.querySelector("[data-play]");
const playIcon = demo.querySelector('[data-play-icon="play"]');
const pauseIcon = demo.querySelector('[data-play-icon="pause"]');
const sheet = demo.querySelector(".kahn-demo__sheet");
const status = demo.querySelector("[data-status]");
const queueStatus = demo.querySelector("[data-queue]");
const statusBox = demo.querySelector(".kahn-demo__text");
const queueBox = demo.querySelector(".kahn-demo__queue");
const graph = demo.querySelector(".kahn-demo__graph");
const graphSvg = demo.querySelector("[data-graph]");
const mobileQuery = window.matchMedia("(max-width: 32rem)");
const cells = helpers.nodeMap(demo, "[data-cell]", "cell");
const valueNodes = helpers.nodeMap(demo, "[data-value]", "value");
const formulaNodes = helpers.nodeMap(
demo,
"[data-formula]",
"formula",
);
const graphNodes = new Map();
const degreeNodes = new Map();
const baseValues = {
A1: 10,
A2: 20,
B1: 20,
B2: 40,
C1: 60,
C2: 60,
};
const baseFormulaText = {
A1: "",
C1: "(=SUM(B1:B3))",
C2: "(=A2+B2)",
};
const baseFormulas = {
B1: function (values) {
return values.A1 * 2;
},
B2: function (values) {
return values.A2 * 2;
},
C1: function (values) {
return values.B1 + values.B2;
},
C2: function (values) {
return values.A2 + values.B2;
},
};
const scenarios = {
a2: {
focus: "A2",
values: { A2: 40 },
affected: ["A2", "B2", "C1", "C2"],
},
c1: {
focus: "C1",
affected: ["C1"],
formulas: {
C1: function (values) {
return (values.B1 + values.B2) * 1000;
},
},
formulaText: { C1: "(=SUM(B1:B3)*1000)" },
},
a1a2: {
focus: ["A1", "A2"],
values: { A2: 99 },
affected: ["A1", "A2", "B1", "B2", "C1", "C2"],
dependencies: { A1: ["A2"] },
formulas: {
A1: function (values) {
return values.A2 + 1;
},
},
formulaText: { A1: "(=A2+1)" },
desktopGraphEdges: [["A2", "A1", "M 90 124 V 86"]],
mobileGraphEdges: [["A2", "A1", "M 90 126 V 94"]],
},
};
const allCells = ["A1", "A2", "B1", "B2", "C1", "C2"];
const baseDependencies = {
B1: ["A1"],
B2: ["A2"],
C1: ["B1", "B2"],
C2: ["A2", "B2"],
};
const desktopGraphPoints = {
A1: [90, 50],
A2: [90, 160],
B1: [320, 50],
B2: [320, 160],
C1: [550, 50],
C2: [550, 160],
};
const mobileGraphPoints = {
A1: [90, 42],
A2: [90, 178],
B1: [320, 42],
B2: [320, 178],
C1: [550, 42],
C2: [550, 178],
};
const desktopGraphEdges = [
["A1", "B1", "M 132 50 H 278"],
["A2", "B2", "M 132 160 H 278"],
["B1", "C1", "M 362 50 H 508"],
["B2", "C1", "M 360 138 C 425 120 465 90 513 72"],
[
"A2",
"C2",
"M 120 188 C 185 222 260 222 320 222 S 455 222 520 188",
],
["B2", "C2", "M 362 160 H 508"],
];
const mobileGraphEdges = [
["A1", "B1", "M 142 42 H 268"],
["A2", "B2", "M 142 178 H 268"],
["B1", "C1", "M 372 42 H 498"],
["B2", "C1", "M 368 152 C 425 132 465 92 502 70"],
[
"A2",
"C2",
"M 128 214 C 190 233 260 233 320 233 S 450 233 512 214",
],
["B2", "C2", "M 372 178 H 498"],
];
let activeEdit = "";
let steps = [];
let stepIndex = 0;
const timelineController = helpers.createTimelineController({
slider,
stepLabel,
stepButtons,
playButton,
playIcon,
pauseIcon,
playDelay: 1000,
getStepCount: function () {
return steps.length;
},
getStepIndex: function () {
return stepIndex;
},
setStepIndex: function (nextStep) {
stepIndex = nextStep;
},
render,
});
function emptyDegrees() {
const degrees = {};
for (const cell of allCells) {
// Unaffected graph nodes keep the default counter value.
degrees[cell] = 0;
}
return degrees;
}
function calculatedText(calculated) {
return calculated.length
? "Calculated: " + calculated.join(", ")
: "Calculated: None";
}
function queueText(queue) {
return queue.length
? "Queue: " + queue.join(", ")
: "Queue: Empty";
}
function dependenciesFor(edit) {
// Formula edit scenarios can add or replace dependency edges.
return Object.assign(
{},
baseDependencies,
(scenarios[edit] || {}).dependencies || {},
);
}
function graphLayout() {
const scenario = scenarios[activeEdit] || {};
// Mobile keeps wider vertical gaps because nodes are scaled up there.
if (mobileQuery.matches) {
return {
points: mobileGraphPoints,
edges: mobileGraphEdges.concat(
scenario.mobileGraphEdges || [],
),
};
}
return {
points: desktopGraphPoints,
edges: desktopGraphEdges.concat(
scenario.desktopGraphEdges || [],
),
};
}
function createGraph() {
const markerId =
"kahn-demo-arrow-" + Math.random().toString(36).slice(2);
const layout = graphLayout();
const defs = helpers.svgEl("defs", {});
const marker = helpers.svgEl("marker", {
id: markerId,
markerWidth: "15",
markerHeight: "18",
refX: "13",
refY: "9",
orient: "auto",
markerUnits: "userSpaceOnUse",
});
marker.append(
helpers.svgEl("path", {
class: "kahn-demo__graph-arrow",
d: "M 13 9 L 1 1 M 13 9 L 1 17",
}),
);
defs.append(marker);
graphNodes.clear();
degreeNodes.clear();
graphSvg.replaceChildren(defs);
for (const edge of layout.edges) {
const group = helpers.svgEl("g", {
class: "sp-calc-demo__graph-edge",
"data-edge": edge[0] + ":" + edge[1],
});
// Open marker arrows match the static dependency graph style.
group.append(
helpers.svgEl("path", {
d: edge[2],
"marker-end": "url(#" + markerId + ")",
}),
);
graphSvg.append(group);
}
for (const cell of allCells) {
const point = layout.points[cell];
const group = helpers.svgEl("g", {
class: "sp-calc-demo__graph-node kahn-demo__graph-node",
"data-node": cell,
});
const name = helpers.svgEl("text", {
class: "sp-calc-demo__graph-name",
x: point[0],
y: point[1] - 8,
});
const divider = helpers.svgEl("text", {
class: "kahn-demo__graph-divider",
x: point[0],
y: point[1] + 7,
});
const degreeBox = helpers.svgEl("foreignObject", {
x: point[0] - 30,
y: point[1],
width: "60",
height: "42",
});
const degreeWrap = document.createElement("div");
const degree = document.createElement("span");
name.textContent = cell;
divider.textContent = "--";
degreeWrap.className = "kahn-demo__graph-degree-wrap";
degree.className = "kahn-demo__graph-degree";
degree.dataset.degree = cell;
degree.textContent = "0";
degreeBox.append(degreeWrap);
degreeWrap.append(degree);
group.append(
helpers.svgEl("circle", {
class: "sp-calc-demo__graph-node-shape",
cx: point[0],
cy: point[1],
r: "32",
}),
name,
divider,
degreeBox,
);
graphSvg.append(group);
graphNodes.set(cell, group);
degreeNodes.set(cell, degree);
}
}
function snapshot(values, degrees, extra) {
const step = Object.assign(
{
values: Object.assign({}, values),
degrees: Object.assign({}, degrees),
done: [],
queue: [],
},
extra,
);
// Arrays are copied so later queue mutations cannot change old steps.
step.done = Array.from(step.done || []);
step.queue = Array.from(step.queue || []);
return step;
}
function increasedText(cells) {
return "Increased the in-degree counter of " + cells.join(", ");
}
function buildSteps(edit) {
const scenario = scenarios[edit];
const values = Object.assign(
{},
baseValues,
scenario.values || {},
);
const activeFormulas = Object.assign(
{},
baseFormulas,
scenario.formulas || {},
);
const affected = scenario.affected;
const affectedSet = new Set(affected);
const dependencies = dependenciesFor(edit);
const dependents = helpers.buildDependents(
allCells,
dependencies,
);
const affectedOrder = new Map(
affected.map(function (cell, index) {
return [cell, index];
}),
);
const degrees = emptyDegrees();
for (const cell of allCells) {
// Queue order follows the visible scenario order when choices are equal.
dependents[cell].sort(function (left, right) {
return (
affectedOrder.get(left) - affectedOrder.get(right)
);
});
}
const result = [
snapshot(values, degrees, {
hideQueue: true,
status: "Calculating in-degree of cells in affected subgraph",
}),
];
for (const cell of affected) {
result.push(
snapshot(values, degrees, {
degreeCell: cell,
hideQueue: true,
hideStatus: true,
}),
);
const increased = [];
for (const dependent of dependents[cell]) {
if (!affectedSet.has(dependent)) {
// Only edges inside the affected subgraph contribute to counters.
continue;
}
degrees[dependent]++;
increased.push(dependent);
}
if (increased.length) {
// After visiting a cell, all direct affected dependents gain one edge.
result.push(
snapshot(values, degrees, {
degreeCell: cell,
hideQueue: true,
status: increasedText(increased),
}),
);
}
}
const queue = [];
for (const cell of affected) {
if (degrees[cell] === 0) {
// Zero in-degree cells are ready to calculate first.
queue.push(cell);
}
}
const done = [];
while (queue.length) {
const current = queue[0];
result.push(
snapshot(values, degrees, {
current: current,
done: done,
queue: queue,
}),
);
queue.shift();
if (activeFormulas[current]) {
// Formula value changes when Kahn pops the cell from the queue.
values[current] = activeFormulas[current](values);
}
done.push(current);
for (const dependent of dependents[current]) {
if (!affectedSet.has(dependent)) {
// Unaffected cells stay visible in the graph, but are not decremented.
continue;
}
degrees[dependent]--;
if (degrees[dependent] === 0) {
// A node enters the queue only after all affected dependencies are done.
queue.push(dependent);
}
}
result.push(
snapshot(values, degrees, {
done: done,
queue: queue,
}),
);
}
if (result.length) {
// The last state is the completed topological order.
result[result.length - 1].complete = true;
}
return result;
}
function renderFormulaText(edit) {
const scenario = scenarios[edit] || {};
const text = Object.assign(
{},
baseFormulaText,
scenario.formulaText || {},
);
for (const entry of formulaNodes) {
// Formula labels follow formula edits without duplicating the table.
helpers.switchText(entry[1], text[entry[0]], "formula");
}
}
function clearCellStates() {
for (const cell of cells.values()) {
// Each render starts from white cells, then applies current state colors.
cell.classList.remove("is-current", "is-degree", "is-done");
}
for (const node of graphNodes.values()) {
// The graph mirrors the table colors for the same cells.
node.classList.remove("is-current", "is-degree", "is-done");
}
sheet.classList.remove("is-complete");
graph.classList.remove("is-complete");
}
function markCell(cellName, className) {
const cell = cells.get(cellName);
const graphNode = graphNodes.get(cellName);
if (cell) {
// Table and graph should describe the same algorithm step.
cell.classList.add(className);
}
if (graphNode) {
// Only cells with dependency edges have graph nodes.
graphNode.classList.add(className);
}
}
function renderValues(values) {
for (const entry of valueNodes) {
// Values are rendered separately from formula text to keep formulas visible.
helpers.switchText(entry[1], values[entry[0]]);
}
}
function renderDegrees(degrees) {
for (const cell of allCells) {
// Counter nodes use the same HTML switch animation as grid values.
helpers.switchText(
degreeNodes.get(cell),
degrees[cell] || 0,
"kahn-demo__graph-degree",
);
}
}
function renderStatus(step) {
statusBox.classList.toggle(
"is-hidden",
Boolean(step.hideStatus),
);
queueBox.classList.toggle("is-hidden", Boolean(step.hideQueue));
if (!step.hideStatus) {
// During graph traversal this box explains what just changed.
status.textContent =
step.status || calculatedText(step.done || []);
}
if (!step.hideQueue) {
// The queue is shown only for the actual Kahn calculation phase.
queueStatus.textContent = queueText(step.queue || []);
}
}
function renderTimeline() {
timelineController.renderControls();
}
function render() {
const step = steps[stepIndex];
if (!step) {
// Without an active edit, the grid shows the initial spreadsheet values.
clearCellStates();
renderValues(baseValues);
renderDegrees(emptyDegrees());
statusBox.classList.add("is-hidden");
queueBox.classList.add("is-hidden");
timelineController.updatePlayButton();
return;
}
clearCellStates();
renderValues(step.values);
renderDegrees(step.degrees);
renderStatus(step);
if (step.complete) {
// Green borders mark the finished topological order.
sheet.classList.add("is-complete");
graph.classList.add("is-complete");
}
for (const cell of step.done || []) {
// Already calculated cells stay green for the rest of the run.
markCell(cell, "is-done");
}
if (step.current) {
// Yellow means this cell has been popped from the queue.
markCell(step.current, "is-current");
} else if (step.degreeCell) {
// In-degree setup uses a separate color from cell calculation.
markCell(step.degreeCell, "is-degree");
}
renderTimeline();
}
function showEdit(edit) {
timelineController.setPlaying(false);
activeEdit = edit;
createGraph();
steps = buildSteps(edit);
stepIndex = 0;
slider.max = steps.length - 1;
slider.value = 0;
timeline.style.setProperty(
"--kahn-slider-size",
Math.min(42, Math.max(18, steps.length * 0.8)) + "rem",
);
renderFormulaText(edit);
timeline.hidden = false;
render();
helpers.focusCells(cells, scenarios[edit].focus);
}
function reset() {
timelineController.setPlaying(false);
activeEdit = "";
createGraph();
steps = [];
stepIndex = 0;
timeline.style.removeProperty("--kahn-slider-size");
renderFormulaText("");
timeline.hidden = true;
render();
helpers.focusCells(cells, "");
}
createGraph();
mobileQuery.addEventListener("change", function () {
// Rebuild edges and nodes when the responsive graph layout changes.
createGraph();
render();
});
helpers.bindExclusiveInputs(inputs, {
reset,
select: function (input) {
showEdit(input.value);
},
});
timelineController.bind();
reset();
}
</script>
</div>
<p>First, we perform a regular BFS over the dependency graph to calculate the in-degree counters of each affected cell. When we visit a node, we increase the in-degree counter of each dependent.</p>
<p>Then we start the calculation. We add the updated cells that have an in-degree of 0 to the queue. Notice that updated cells can also have an in-degree greater than 0. We pop a cell from the queue, calculate it, and decrease the in-degree of each dependent by 1. If a dependent's in-degree becomes 0, we add it to the queue. We continue until the queue is empty.</p>
<p>The algorithm first performs BFS to update the in-degree counters, and then uses topological sort to calculate the formulas. Both steps have linear time complexity. So, the total time complexity is $O(V + E)$, where $V$ is the number of affected nodes and $E$ is the number of affected edges in the dependency graph. In the worst case, the affected subgraph is the whole dependency graph. However, most of the time, only a subgraph is affected. The cells are recalculated only when their inputs change, and each affected cell is calculated only once. This is much more efficient than the previous algorithm, where cells were repeatedly and redundantly recalculated.</p>
<details >
<summary><span>Cycle detection</span></summary>
<p>So far, I have not mentioned how cycles are detected in spreadsheets. A cycle happens when two formulas reference each other, for example <code>A1=B1*2, B1=A1+100</code>. Formulas with cycles will produce errors (unless <a rel="nofollow noreferrer external" href="https://www.onlyoffice.com/blog/2024/11/excel-circular-references-and-iterative-calculation">iterative calculation</a> is implemented). This is an important step in spreadsheet recalculation. It can sometimes take almost as much time as calculating formulas. I wasn't sure whether I should include it in the algorithm or not, and in the end decided not to. In my implementation, this is a separate step that happens afterward.</p>
</details>
<details >
<summary><span>Lazy recalculation</span></summary>
<p>In the next section, I will talk about making the algorithm faster by using more cores. There is also another optimization technique that can improve performance. I think I can call it "lazy recalculation": the idea is to calculate only the cells that are displayed on the screen. It is partially used in Google Sheets, which prioritizes visible formulas. But, as far as I know, Excel does not use it because of data integrity concerns.</p>
</details>
<h1 id="making-this-parallel">Making this parallel<a class="zola-anchor" href="#making-this-parallel" aria-label="Anchor link for: making-this-parallel" style="visibility: hidden;"></a>
</h1>
<p>I wanted to go further and make this algorithm parallel, mostly for fun. It was also a good opportunity to practice concurrency in Rust.</p>
<p>I think a good parallel strategy is one that needs little to no synchronization between threads. For this Kahn-based algorithm, the main change is to use an atomic integer, instead of a regular integer, for the in-degree counter. When a thread starts calculating cell X with an in-degree of zero, all dependencies of X are already calculated, so the thread can read them safely (no other thread will write to them). When a thread finishes calculating a cell, it decreases the in-degree of its dependents (safe because it is an atomic integer). If a dependent's in-degree becomes 0 after this, then the cell that was just calculated was its last dependency, so only that thread schedules it.</p>
<p>The last observation is the main reason a thread can safely write to the cell it started calculating. No other thread calculates it, and no other thread will read from it before the topological order allows it.</p>
<p>A simple first idea is to start X threads and give each one its own portion of cells, instead of putting updated cells into one queue as before. But we do not know how much time each formula will take. One thread may calculate <code>B1</code> quickly and then stop because <code>B1</code> does not have any dependents, while another thread calculates <code>C1</code> and then starts calculating thousands of its dependents. A good parallel strategy should use all cores as much as possible, so we need to introduce some load balancing.</p>
<p>There's another problem that requires load balancing as well. So far, we have talked about calculating multiple formulas in parallel, but we might also want to improve performance by calculating a single formula in parallel. For example, <code>=AVG(A1:A1000000)</code> and similar formulas can benefit from this. Not every spreadsheet would need this, but I decided to include it just for fun.</p>
<p>I will describe my attempt to implement the algorithm while keeping the load-balancing problem in mind. I'm sure there exist better approaches, writing good concurrent code requires much more experience than I have.</p>
<p>Async in Rust is a useful abstraction for simplifying concurrent code. It gives us a "task": a piece of code that can be paused and continued. This is very useful in a high-throughput web server, for example. When a user request (<code>task A</code>) causes a web server to send a database request, the web server can pause <code>task A</code> instead of waiting, and continue working on other tasks (serving other users). When the response arrives, <code>task A</code> continues. As you can see, this is useful even on a single thread.</p>
<p>However, in Rust, async is only an abstraction. To get the actual implementation, you need an external library: a "runtime". Its job is to manage tasks. Runtimes try to process many tasks quickly, and many of them use parallelism. In that case, they also need load-balancing strategies, because tasks can take a long or short time to finish, just like formulas in our case. The most popular runtime, <a rel="nofollow noreferrer external" href="https://docs.rs/tokio/latest/tokio/runtime/index.html">tokio</a>, uses an advanced work-stealing scheduler (when a thread has nothing to do, it "steals" work from other threads).</p>
<p>I think there is a neat similarity between formulas and tasks. So I thought: why not create a task for each formula, and let the runtime handle the load balancing?</p>
<details >
<summary><span>Note on the runtime selection and overhead</span></summary>
<p>One task per formula calculation has a lot of overhead. Each task is usually allocated on the heap so it can be sent to another thread (if balancing is needed). I started with the tokio runtime, but then switched to <a rel="nofollow noreferrer external" href="https://docs.rs/forte/1.0.0-alpha.4/forte/index.html">forte</a>, which performed better in my experiments. Even then, I ended up creating tasks for multiple formulas (one task per 1000 formulas) to reduce overhead, which made the code a bit more complex. See the "Benchmarking" note for exact numbers.</p>
</details>
<p>Conceptually, the algorithm becomes as follows: spawn a new task for each formula. When task <code>A</code> finishes calculating its formula, it spawns new tasks for its dependents. Inside a formula, if some function can be parallelised (like <code>SUM</code>), we spawn helper tasks and then combine their results (fork & join). After that, task <code>A</code> resumes as usual.</p>
<div class="parallel-kahn-demo kahn-demo sp-calc-demo">
<div class="kahn-demo__controls sp-calc-demo__controls">
<label
><input type="checkbox" name="kahn-demo" value="a2" />A2 ← 40</label
>
<label
><input type="checkbox" name="kahn-demo" value="a1a2values" />A1 ←
25, A2 ← 45</label
>
<label
><input type="checkbox" name="kahn-demo" value="a1a2" />A1 ← =A2+1,
A2 ← 99</label
>
</div>
<div class="kahn-demo__timeline sp-calc-demo__timeline" hidden>
<div class="kahn-demo__scrubber sp-calc-demo__scrubber">
<button type="button" data-step="-1" aria-label="Previous step">
<span data-icon="arrow" aria-hidden="true"></span>
</button>
<input
type="range"
min="0"
max="0"
value="0"
aria-label="Visualization step"
data-slider
/>
<button type="button" data-step="1" aria-label="Next step">
<span data-icon="arrow" aria-hidden="true"></span>
</button>
<span class="kahn-demo__step sp-calc-demo__step" data-step-label>0/0</span>
</div>
<button
class="kahn-demo__play sp-calc-demo__play"
type="button"
data-play
aria-label="Play"
>
<span
data-icon="play"
data-play-icon="play"
aria-hidden="true"
></span>
<span
data-icon="pause"
data-play-icon="pause"
aria-hidden="true"
hidden
></span>
</button>
</div>
<div class="kahn-demo__sheet sp-calc-demo__sheet">
<table aria-label="Parallel Kahn formula calculation example">
<colgroup>
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td data-cell="A1">
<span data-value="A1">10</span>
<span class="formula" data-formula="A1"></span>
</td>
<td data-cell="B1">
<span data-value="B1">20</span>
<span class="formula">(=A1*2)</span>
</td>
<td data-cell="C1">
<span data-value="C1">60</span>
<span class="formula" data-formula="C1"
>(=SUM(B1:B3))</span
>
</td>
</tr>
<tr>
<th>2</th>
<td data-cell="A2"><span data-value="A2">20</span></td>
<td data-cell="B2">
<span data-value="B2">40</span>
<span class="formula">(=A2*2)</span>
</td>
<td data-cell="C2">
<span data-value="C2">60</span>
<span class="formula" data-formula="C2">(=A2+B2)</span>
</td>
</tr>
<tr>
<th>3</th>
<td data-cell="A3"></td>
<td data-cell="B3"></td>
<td data-cell="C3"></td>
</tr>
</tbody>
</table>
</div>
<div class="sp-calc-demo__graph kahn-demo__graph">
<svg
data-graph
viewBox="0 0 640 235"
role="img"
aria-label="Dependency graph for the spreadsheet table. Each node shows the cell name and its current in-degree counter."
></svg>
</div>
<div
class="kahn-demo__threads"
data-threads
aria-label="Thread task timeline"
>
<div class="kahn-demo__thread-row">
<span class="kahn-demo__thread-label">Thread A:</span>
<div class="kahn-demo__thread-track" data-thread="A"></div>
</div>
<div class="kahn-demo__thread-row">
<span class="kahn-demo__thread-label">Thread B:</span>
<div class="kahn-demo__thread-track" data-thread="B"></div>
</div>
<p class="kahn-demo__thread-note">
*async runtime is assigning the tasks to threads
</p>
</div>
<div class="kahn-demo__info sp-calc-demo__info">
<div class="kahn-demo__text sp-calc-demo__panel is-hidden"><p data-status></p></div>
</div>
<script>
{
const helpers = window.spCalcDemo;
const demo = document.currentScript.closest(".kahn-demo");
const inputs = demo.querySelectorAll('input[name="kahn-demo"]');
const timeline = demo.querySelector(".kahn-demo__timeline");
const slider = demo.querySelector("[data-slider]");
const stepLabel = demo.querySelector("[data-step-label]");
const stepButtons = demo.querySelectorAll("[data-step]");
const playButton = demo.querySelector("[data-play]");
const playIcon = demo.querySelector('[data-play-icon="play"]');
const pauseIcon = demo.querySelector('[data-play-icon="pause"]');
const sheet = demo.querySelector(".kahn-demo__sheet");
const status = demo.querySelector("[data-status]");
const statusBox = demo.querySelector(".kahn-demo__text");
const graph = demo.querySelector(".kahn-demo__graph");
const graphSvg = demo.querySelector("[data-graph]");
const threadsDiagram = demo.querySelector("[data-threads]");
const mobileQuery = window.matchMedia("(max-width: 32rem)");
const cells = helpers.nodeMap(demo, "[data-cell]", "cell");
const valueNodes = helpers.nodeMap(demo, "[data-value]", "value");
const formulaNodes = helpers.nodeMap(
demo,
"[data-formula]",
"formula",
);
const graphNodes = new Map();
const degreeNodes = new Map();
const threadTracks = helpers.nodeMap(
demo,
"[data-thread]",
"thread",
);
const baseValues = {
A1: 10,
A2: 20,
B1: 20,
B2: 40,
C1: 60,
C2: 60,
};
const baseFormulaText = {
A1: "",
C1: "(=SUM(B1:B3))",
C2: "(=A2+B2)",
};
const baseFormulas = {
B1: function (values) {
return values.A1 * 2;
},
B2: function (values) {
return values.A2 * 2;
},
C1: function (values) {
return values.B1 + values.B2;
},
C2: function (values) {
return values.A2 + values.B2;
},
};
const scenarios = {
a2: {
focus: "A2",
values: { A2: 40 },
affected: ["A2", "B2", "C1", "C2"],
},
a1a2values: {
focus: ["A1", "A2"],
values: { A1: 25, A2: 45 },
affected: ["A1", "A2", "B1", "B2", "C1", "C2"],
},
a1a2: {
focus: ["A1", "A2"],
values: { A2: 99 },
affected: ["A1", "A2", "B1", "B2", "C1", "C2"],
dependencies: { A1: ["A2"] },
formulas: {
A1: function (values) {
return values.A2 + 1;
},
},
formulaText: { A1: "(=A2+1)" },
desktopGraphEdges: [["A2", "A1", "M 90 124 V 86"]],
mobileGraphEdges: [["A2", "A1", "M 90 126 V 94"]],
},
};
const allCells = ["A1", "A2", "B1", "B2", "C1", "C2"];
const threadNames = ["A", "B"];
const baseDependencies = {
B1: ["A1"],
B2: ["A2"],
C1: ["B1", "B2"],
C2: ["A2", "B2"],
};
const desktopGraphPoints = {
A1: [90, 50],
A2: [90, 160],
B1: [320, 50],
B2: [320, 160],
C1: [550, 50],
C2: [550, 160],
};
const mobileGraphPoints = {
A1: [90, 42],
A2: [90, 178],
B1: [320, 42],
B2: [320, 178],
C1: [550, 42],
C2: [550, 178],
};
const desktopGraphEdges = [
["A1", "B1", "M 132 50 H 278"],
["A2", "B2", "M 132 160 H 278"],
["B1", "C1", "M 362 50 H 508"],
["B2", "C1", "M 360 138 C 425 120 465 90 513 72"],
[
"A2",
"C2",
"M 120 188 C 185 222 260 222 320 222 S 455 222 520 188",
],
["B2", "C2", "M 362 160 H 508"],
];
const mobileGraphEdges = [
["A1", "B1", "M 142 42 H 268"],
["A2", "B2", "M 142 178 H 268"],
["B1", "C1", "M 372 42 H 498"],
["B2", "C1", "M 368 152 C 425 132 465 92 502 70"],
[
"A2",
"C2",
"M 128 214 C 190 233 260 233 320 233 S 450 233 512 214",
],
["B2", "C2", "M 372 178 H 498"],
];
let activeEdit = "";
let steps = [];
let stepIndex = 0;
const timelineController = helpers.createTimelineController({
slider,
stepLabel,
stepButtons,
playButton,
playIcon,
pauseIcon,
playDelay: 1000,
getStepCount: function () {
return steps.length;
},
getStepIndex: function () {
return stepIndex;
},
setStepIndex: function (nextStep) {
stepIndex = nextStep;
},
render,
});
function emptyDegrees() {
const degrees = {};
for (const cell of allCells) {
// Unaffected graph nodes keep the default counter value.
degrees[cell] = 0;
}
return degrees;
}
function calculatedText(calculated) {
return calculated.length
? "Calculated: " + calculated.join(", ")
: "Calculated: None";
}
function emptyThreads() {
const rows = {};
for (const name of threadNames) {
// Every render keeps both thread rows visible, even with no tasks.
rows[name] = [];
}
return rows;
}
function copyThreads(source) {
const rows = emptyThreads();
for (const name of threadNames) {
for (const task of (source && source[name]) || []) {
// Steps own task objects so later state changes cannot leak backward.
rows[name].push({
label: task.label,
state: task.state,
});
}
}
return rows;
}
function dependenciesFor(edit) {
// Formula edit scenarios can add or replace dependency edges.
return Object.assign(
{},
baseDependencies,
(scenarios[edit] || {}).dependencies || {},
);
}
function graphLayout() {
const scenario = scenarios[activeEdit] || {};
// Mobile keeps wider vertical gaps because nodes are scaled up there.
if (mobileQuery.matches) {
return {
points: mobileGraphPoints,
edges: mobileGraphEdges.concat(
scenario.mobileGraphEdges || [],
),
};
}
return {
points: desktopGraphPoints,
edges: desktopGraphEdges.concat(
scenario.desktopGraphEdges || [],
),
};
}
function createGraph() {
const markerId =
"kahn-demo-arrow-" + Math.random().toString(36).slice(2);
const layout = graphLayout();
const defs = helpers.svgEl("defs", {});
const marker = helpers.svgEl("marker", {
id: markerId,
markerWidth: "15",
markerHeight: "18",
refX: "13",
refY: "9",
orient: "auto",
markerUnits: "userSpaceOnUse",
});
marker.append(
helpers.svgEl("path", {
class: "kahn-demo__graph-arrow",
d: "M 13 9 L 1 1 M 13 9 L 1 17",
}),
);
defs.append(marker);
graphNodes.clear();
degreeNodes.clear();
graphSvg.replaceChildren(defs);
for (const edge of layout.edges) {
const group = helpers.svgEl("g", {
class: "sp-calc-demo__graph-edge",
"data-edge": edge[0] + ":" + edge[1],
});
// Open marker arrows match the static dependency graph style.
group.append(
helpers.svgEl("path", {
d: edge[2],
"marker-end": "url(#" + markerId + ")",
}),
);
graphSvg.append(group);
}
for (const cell of allCells) {
const point = layout.points[cell];
const group = helpers.svgEl("g", {
class: "sp-calc-demo__graph-node kahn-demo__graph-node",
"data-node": cell,
});
const name = helpers.svgEl("text", {
class: "sp-calc-demo__graph-name",
x: point[0],
y: point[1] - 8,
});
const divider = helpers.svgEl("text", {
class: "kahn-demo__graph-divider",
x: point[0],
y: point[1] + 7,
});
const degreeBox = helpers.svgEl("foreignObject", {
x: point[0] - 30,
y: point[1],
width: "60",
height: "42",
});
const degreeWrap = document.createElement("div");
const degree = document.createElement("span");
name.textContent = cell;
divider.textContent = "--";
degreeWrap.className = "kahn-demo__graph-degree-wrap";
degree.className = "kahn-demo__graph-degree";
degree.dataset.degree = cell;
degree.textContent = "0";
degreeBox.append(degreeWrap);
degreeWrap.append(degree);
group.append(
helpers.svgEl("circle", {
class: "sp-calc-demo__graph-node-shape",
cx: point[0],
cy: point[1],
r: "32",
}),
name,
divider,
degreeBox,
);
graphSvg.append(group);
graphNodes.set(cell, group);
degreeNodes.set(cell, degree);
}
}
function snapshot(values, degrees, extra) {
const step = Object.assign(
{
values: Object.assign({}, values),
degrees: Object.assign({}, degrees),
current: [],
done: [],
threads: emptyThreads(),
},
extra,
);
// Arrays are copied so later mutations cannot change old steps.
step.current = Array.from(step.current || []);
step.done = Array.from(step.done || []);
step.threads = copyThreads(step.threads);
return step;
}
function increasedText(cells) {
return (
"Increased the atomic in-degree counter of " +
cells.join(", ")
);
}
function codeText(text) {
const node = document.createElement("code");
// Code nodes match article formatting inside multi-line captions.
node.textContent = text;
return node;
}
function renderSumStatus(cell) {
status.replaceChildren(
document.createTextNode("Calculating "),
codeText("SUM"),
document.createTextNode(" from " + cell + " in parallel: "),
document.createElement("br"),
document.createTextNode("- Spawn tasks "),
codeText("Task " + cell + " (1)"),
document.createTextNode(" and "),
codeText("Task " + cell + " (2)"),
document.createElement("br"),
document.createTextNode(
"- After they complete, combine them to calculate the sum",
),
);
}
function startCurrentTasks(threadRows, current) {
let sumCell = "";
for (let index = 0; index < current.length; index++) {
const cell = current[index];
const thread = threadNames[index % threadNames.length];
// Main formula tasks follow the same slots as the yellow cells.
threadRows[thread].push({
label: "Task " + cell,
state: "current",
});
}
for (const cell of current) {
if (cell !== "C1") {
// Only the SUM cell gets extra fork-and-join helper tasks.
continue;
}
sumCell = cell;
for (let index = 0; index < threadNames.length; index++) {
const thread = threadNames[index];
// Helper tasks are split across threads to show SUM parallelism.
threadRows[thread].push({
label: "Task " + cell + " (" + (index + 1) + ")",
state: "current",
});
}
}
return sumCell;
}
function finishCurrentTaskLayer(threadRows) {
for (const thread of threadNames) {
for (const task of threadRows[thread]) {
if (task.state !== "current") {
// Finished tasks stay green and should not be touched again.
continue;
}
// Each thread completes one visible task per calculation step.
task.state = "done";
break;
}
}
}
function hasCurrentTasks(threadRows) {
for (const thread of threadNames) {
for (const task of threadRows[thread]) {
if (task.state === "current") {
// Any yellow task means the current batch is still running.
return true;
}
}
}
return false;
}
function buildSteps(edit) {
const scenario = scenarios[edit];
const values = Object.assign(
{},
baseValues,
scenario.values || {},
);
const activeFormulas = Object.assign(
{},
baseFormulas,
scenario.formulas || {},
);
const affected = scenario.affected;
const affectedSet = new Set(affected);
const dependencies = dependenciesFor(edit);
const dependents = helpers.buildDependents(
allCells,
dependencies,
);
const affectedOrder = new Map(
affected.map(function (cell, index) {
return [cell, index];
}),
);
const degrees = emptyDegrees();
for (const cell of allCells) {
// Queue order follows the visible scenario order when choices are equal.
dependents[cell].sort(function (left, right) {
return (
affectedOrder.get(left) - affectedOrder.get(right)
);
});
}
const result = [
snapshot(values, degrees, {
status: "Calculating atomic in-degree counters in affected subgraph",
}),
];
for (const cell of affected) {
result.push(
snapshot(values, degrees, {
degreeCell: cell,
hideStatus: true,
}),
);
const increased = [];
for (const dependent of dependents[cell]) {
if (!affectedSet.has(dependent)) {
// Only edges inside the affected subgraph contribute to counters.
continue;
}
degrees[dependent]++;
increased.push(dependent);
}
if (increased.length) {
// After visiting a cell, all direct affected dependents gain one edge.
result.push(
snapshot(values, degrees, {
degreeCell: cell,
status: increasedText(increased),
}),
);
}
}
const queue = [];
for (const cell of affected) {
if (degrees[cell] === 0) {
// Zero in-degree cells are ready to calculate first.
queue.push(cell);
}
}
const done = [];
const taskRows = emptyThreads();
const workerCount = 2;
while (queue.length) {
const current = queue.slice(0, workerCount);
const sumCell = startCurrentTasks(taskRows, current);
result.push(
snapshot(values, degrees, {
current: current,
done: done,
threads: taskRows,
hideStatus: !sumCell,
sumCell: sumCell,
}),
);
queue.splice(0, current.length);
while (hasCurrentTasks(taskRows)) {
// Threads complete one task layer in parallel.
finishCurrentTaskLayer(taskRows);
if (hasCurrentTasks(taskRows)) {
// The cell stays yellow while helper tasks are still running.
result.push(
snapshot(values, degrees, {
current: current,
done: done,
threads: taskRows,
hideStatus: true,
}),
);
}
}
for (const cell of current) {
if (activeFormulas[cell]) {
// A worker writes the cell only after all dependencies are done.
values[cell] = activeFormulas[cell](values);
}
}
for (const cell of current) {
// Finished cells are marked done before they unlock dependents.
done.push(cell);
}
for (const cell of current) {
for (const dependent of dependents[cell]) {
if (!affectedSet.has(dependent)) {
// Unaffected cells stay visible in the graph, but are not decremented.
continue;
}
degrees[dependent]--;
if (degrees[dependent] === 0) {
// Atomic decrement to zero makes the cell available to any worker.
queue.push(dependent);
}
}
}
result.push(
snapshot(values, degrees, {
done: done,
threads: taskRows,
status:
"Atomic in-degree updated after: " +
current.join(", "),
}),
);
}
if (result.length) {
// The last state is the completed topological order.
result[result.length - 1].complete = true;
}
return result;
}
function renderFormulaText(edit) {
const scenario = scenarios[edit] || {};
const text = Object.assign(
{},
baseFormulaText,
scenario.formulaText || {},
);
for (const entry of formulaNodes) {
// Formula labels follow formula edits without duplicating the table.
helpers.switchText(entry[1], text[entry[0]], "formula");
}
}
function clearCellStates() {
for (const cell of cells.values()) {
// Each render starts from white cells, then applies current state colors.
cell.classList.remove("is-current", "is-degree", "is-done");
}
for (const node of graphNodes.values()) {
// The graph mirrors the table colors for the same cells.
node.classList.remove("is-current", "is-degree", "is-done");
}
sheet.classList.remove("is-complete");
graph.classList.remove("is-complete");
threadsDiagram.classList.remove("is-complete");
}
function markCell(cellName, className) {
const cell = cells.get(cellName);
const graphNode = graphNodes.get(cellName);
if (cell) {
// Table and graph should describe the same algorithm step.
cell.classList.add(className);
}
if (graphNode) {
// Only cells with dependency edges have graph nodes.
graphNode.classList.add(className);
}
}
function renderValues(values) {
for (const entry of valueNodes) {
// Values are rendered separately from formula text to keep formulas visible.
helpers.switchText(entry[1], values[entry[0]]);
}
}
function renderDegrees(degrees) {
for (const cell of allCells) {
// Counter nodes use the same HTML switch animation as grid values.
helpers.switchText(
degreeNodes.get(cell),
degrees[cell] || 0,
"kahn-demo__graph-degree",
);
}
}
function renderStatus(step) {
statusBox.classList.toggle(
"is-hidden",
Boolean(step.hideStatus),
);
if (step.hideStatus) {
// Hidden captions still keep their layout space.
return;
}
if (step.sumCell) {
// SUM uses code-styled task names and explicit line breaks.
renderSumStatus(step.sumCell);
return;
}
// During graph traversal this box explains what just changed.
status.textContent =
step.status || calculatedText(step.done || []);
}
function renderThreads(step) {
const rows = step ? step.threads : emptyThreads();
// The task chart stays visible even before a scenario is selected.
threadsDiagram.hidden = false;
for (const name of threadNames) {
const track = threadTracks.get(name);
// Rebuilding keeps the small task chart in sync with each step.
track.replaceChildren();
for (const task of rows[name] || []) {
const node = document.createElement("span");
// Task colors mirror the yellow/green cell and graph states.
node.className = helpers.classes(
"kahn-demo__thread-task",
task.state === "current" && "is-current",
task.state === "done" && "is-done",
);
node.textContent = task.label;
track.append(node);
}
}
}
function renderTimeline() {
timelineController.renderControls();
}
function render() {
const step = steps[stepIndex];
if (!step) {
// Without an active edit, the grid shows the initial spreadsheet values.
clearCellStates();
renderValues(baseValues);
renderDegrees(emptyDegrees());
renderThreads();
statusBox.classList.add("is-hidden");
timelineController.updatePlayButton();
return;
}
clearCellStates();
renderValues(step.values);
renderDegrees(step.degrees);
renderStatus(step);
renderThreads(step);
if (step.complete) {
// Green borders mark the finished topological order.
sheet.classList.add("is-complete");
graph.classList.add("is-complete");
threadsDiagram.classList.add("is-complete");
}
for (const cell of step.done || []) {
// Already calculated cells stay green for the rest of the run.
markCell(cell, "is-done");
}
if (step.current.length) {
for (const cell of step.current) {
// Yellow means this cell is currently handled by a worker.
markCell(cell, "is-current");
}
} else if (step.degreeCell) {
// In-degree setup uses a separate color from cell calculation.
markCell(step.degreeCell, "is-degree");
}
renderTimeline();
}
function showEdit(edit) {
timelineController.setPlaying(false);
activeEdit = edit;
createGraph();
steps = buildSteps(edit);
stepIndex = 0;
slider.max = steps.length - 1;
slider.value = 0;
timeline.style.setProperty(
"--kahn-slider-size",
Math.min(42, Math.max(18, steps.length * 0.8)) + "rem",
);
renderFormulaText(edit);
timeline.hidden = false;
render();
helpers.focusCells(cells, scenarios[edit].focus);
}
function reset() {
timelineController.setPlaying(false);
activeEdit = "";
createGraph();
steps = [];
stepIndex = 0;
timeline.style.removeProperty("--kahn-slider-size");
renderFormulaText("");
timeline.hidden = true;
render();
helpers.focusCells(cells, "");
}
createGraph();
mobileQuery.addEventListener("change", function () {
// Rebuild edges and nodes when the responsive graph layout changes.
createGraph();
render();
});
helpers.bindExclusiveInputs(inputs, {
reset,
select: function (input) {
showEdit(input.value);
},
});
timelineController.bind();
reset();
}
</script>
</div>
<p>The result is around <code>4x</code> faster than the synchronous algorithm. I hope the visualisation does not oversimplify what happens in the code.</p>
<details >
<summary><span>Benchmarking</span></summary>
<p>To get the <code>4x</code> number, I created a test spreadsheet file. It contains 10M values, 1M formulas (which reference values on the left), and a single <code>=SUM(A1:J1000000)</code> formula. The test file is stored inside the repository: <a rel="nofollow noreferrer external" href="https://github.com/andude10/tonic/tree/master/tauri-backend/test-files">tonic/tauri-backend/test-files</a>.</p>
<p>You can reproduce this in release mode by comparing the sync version (<code>git checkout 82c7874e20ea0c4fa24d62b021daaace854989df</code>) against the parallel version (<code>git checkout 11dd9ec68dbe6e2d75a11eac7fad7133195006a6</code>). Or, alternatively, run <code>cargo bench</code>.</p>
<p>On my machine:</p>
<ul>
<li>CPU: AMD Ryzen 9 3900X 12-Core Processor</li>
<li>Cores: 12 physical cores / 24 threads</li>
<li>RAM: 64 GB</li>
</ul>
<p>I get these results (excluding cycle detection and counter init):</p>
<table><thead><tr><th>calculation</th><th style="text-align: right">sync</th><th style="text-align: right">parallel</th><th style="text-align: right">improvement</th></tr></thead><tbody>
<tr><td>calculate L3 (<code>=SUM(A1:J1000000)</code>)</td><td style="text-align: right">179.47ms</td><td style="text-align: right">43.75ms</td><td style="text-align: right">4.1x</td></tr>
<tr><td>calculate K1:K1000000 (<code>=H1+I1+J1</code>)</td><td style="text-align: right">287.90ms</td><td style="text-align: right">56.78ms</td><td style="text-align: right">5.1x</td></tr>
<tr><td>calculate L3 and K1:K1000000</td><td style="text-align: right">460.20ms</td><td style="text-align: right">114.15ms</td><td style="text-align: right">4.0x</td></tr>
</tbody></table>
</details>
<p>Thank you for reading! I hoped you enjoyed and learned something new :)</p>