Click to go to currently running cell

[haakon-e]

I'm using reasonably large notebooks for research, and while I really love the reactivity for reproducibility, sometimes if I make a small change somewhere, the notebook inevitably takes a while to recompute. Because the computation sometimes can be far from linear, it's hard to know what's holding things up beyond checking each cell manually for whether its timer is running or not.

Ideally, I would be able to click in the UI which indicates which cell is running, or, dreamily, have my browser "follow" the currently running cell.

[^ I want to click on the orange cell, which is currently executing, to go to it]

similar to: #2798

[haakon-e]

Knowing nothing about web development, I imagine a reasonably "simple" toggle would be to
Have the animated alternating color on the left of the cell:

• be alternating dark/light grey (as above) for cells that are "pending" to be run
• be alternating dark/light green for cells that are actually running right now.

[haakon-e]

Inspecting my browser elements, it appears the area is referred to as pluto-trafficlight.

I wonder if setting colors differently in pluto-cell.queued and pluto-cell.running would be needed?

Pluto.jl/frontend/editor.css

Lines 1551 to 1578 in 53e1981

	body:not(.___) pluto-cell.queued > pluto-trafficlight::after {
	background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, var(--normal-cell-color) 8px, var(--normal-cell-color) 16px);
	background-clip: padding-box;
	/* [1]
	Queued, Running, Errored are really fast changing props.
	We make sure to on-off the gradients with opacity and not toggle the animation
	(Which is running all this time)
	Make sure the browser won't skip creating a stacking context
	https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
	https://www.w3.org/TR/css-color-3/#transparency
	*/
	opacity: 0.99;
	background-size: 4px var(--patternHeight);
	animation-duration: 20s;
	}
	body:not(.___) pluto-cell.running > pluto-trafficlight::after {
	background: repeating-linear-gradient(
	-45deg,
	var(--normal-cell-color),
	var(--normal-cell-color) 8px,
	var(--dark-normal-cell-color) 8px,
	var(--dark-normal-cell-color) 16px
	);
	background-clip: content-box;
	opacity: 0.99; /* [1] */
	background-size: 4px var(--patternHeight);
	}

---

Other references

Pluto.jl/frontend/components/Cell.js

Line 198 in 53e1981

// When you click to run a cell, we use `waiting_to_run` to immediately set the cell's traffic light to 'queued', while waiting for the backend to catch up.

Pluto.jl/frontend/components/Cell.js

Line 322 in 53e1981

<pluto-trafficlight></pluto-trafficlight>

[haakon-e]

I see there's maybe a veeeery faint difference between "queued" and "running", but my eyes struggle when actually scrolling through a notebook:

Something like this color for one of the traffic light shades would be nice:

[haakon-e]

For this alternative approach, I finally figured out I could add the following line to the top of the Pluto script:

html"""
<style>
    :root {
        --dark-normal-cell-color: #006400; /* Dark green */
    }
</style>
"""

which looks like this for currently running cells:

which seems reasonable. More theming options seems to be available here.

[fonsp]

Hey! You can click on the loading bar on the top of the page, but let's also implement your suggestion of clicking the status tab.

[fonsp]

Implemented in a5122a7