Disable Cell button

frontend/components/Cell.js

@@ -20,8 +20,9 @@ import { PlutoContext } from "../common/PlutoContext.js"
  * }} props
  * */
 export const Cell = ({
-    cell_result: { queued, running, runtime, errored, output, published_objects },
-    cell_input: { cell_id, code, code_folded },
+    cell_input: { cell_id, code, code_folded, running_disabled },
+    cell_result: { queued, running, runtime, errored, output, published_objects, depends_on_disabled_cells },
+    cell_dependencies: { downstream_cells_map, upstream_cells_map, precedence_heuristic },
     cell_input_local,
     notebook_id,
     on_update_doc_query,
@@ -64,7 +65,7 @@ export const Cell = ({
     const [waiting_to_run, set_waiting_to_run] = useState(false)
     useEffect(() => {
         set_waiting_to_run(false)
-    }, [queued, running, output?.last_run_timestamp])
+    }, [queued, running, output?.last_run_timestamp, depends_on_disabled_cells, running_disabled])
     // We activate animations instantly BUT deactivate them NSeconds later.
     // We then toggle animation visibility using opacity. This saves a bunch of repaints.
     const activate_animation = useDebouncedTruth(running || queued || waiting_to_run)
@@ -82,6 +83,9 @@ export const Cell = ({
     published_objects_ref.current = published_objects
     const disable_input_ref = useRef(disable_input)
     disable_input_ref.current = disable_input
+    const should_set_waiting_to_run_ref = useRef(true)
+    should_set_waiting_to_run_ref.current = !running_disabled && !depends_on_disabled_cells
+    const set_waiting_to_run_smart = (x) => set_waiting_to_run(x && should_set_waiting_to_run_ref.current)
 
     useLayoutEffect(() => {
         Object.assign(node_ref.current, {
@@ -107,6 +111,8 @@ export const Cell = ({
                 selected: selected,
                 code_differs: class_code_differs,
                 code_folded: class_code_folded,
+                running_disabled: running_disabled,
+                depends_on_disabled_cells: depends_on_disabled_cells,
                 show_input: show_input,
                 drop_target: drag_active,
                 saving_file: saving_file,
@@ -152,7 +158,7 @@ export const Cell = ({
                 on_drag_drop_events=${handler}
                 on_submit=${() => {
                     if (!disable_input_ref.current) {
-                        set_waiting_to_run(true)
+                        set_waiting_to_run_smart(true)
                         pluto_actions.set_and_run_multiple([cell_id])
                     }
                 }}
@@ -176,19 +182,23 @@ export const Cell = ({
                 on_focus_neighbor=${on_focus_neighbor}
                 cell_id=${cell_id}
                 notebook_id=${notebook_id}
+                running_disabled=${running_disabled}
             />
             <${RunArea}
-                onClick=${() => {
-                    if (running || queued) {
-                        pluto_actions.interrupt_remote(cell_id)
-                    } else {
-                        set_waiting_to_run(true)
-                        let cell_to_run = selected ? selected_cells : [cell_id]
-                        pluto_actions.set_and_run_multiple(cell_to_run)
-                    }
+                cell_id=${cell_id}
+                running_disabled=${running_disabled}
+                depends_on_disabled_cells=${depends_on_disabled_cells}
+                on_run=${() => {
+                    set_waiting_to_run_smart(true)
+                    let cell_to_run = selected ? selected_cells : [cell_id]
+                    pluto_actions.set_and_run_multiple(cell_to_run)
+                }}
+                on_interrupt=${() => {
+                    pluto_actions.interrupt_remote(cell_id)
                 }}
                 runtime=${runtime}
                 running=${running}
+                queued=${queued}
             />
             <button
                 onClick=${() => {

frontend/components/CellInput.js

@@ -1,4 +1,4 @@
-import { html, useState, useEffect, useLayoutEffect, useRef, useContext } from "../imports/Preact.js"
+import { html, useState, useEffect, useLayoutEffect, useRef, useContext, useMemo } from "../imports/Preact.js"
 import observablehq_for_myself from "../common/SetupCellEnvironment.js"
 
 import { utf8index_to_ut16index } from "../common/UnicodeTools.js"
@@ -57,6 +57,7 @@ export const CellInput = ({
     on_drag_drop_events,
     cell_id,
     notebook_id,
+    running_disabled,
 }) => {
     let pluto_actions = useContext(PlutoContext)
 
@@ -539,15 +540,53 @@ export const CellInput = ({
     }, [show_input])
 
     // TODO effect hook for disable_input?
-
     return html`
         <pluto-input ref=${dom_node_ref}>
-            <button onClick=${on_delete} class="delete_cell" title="Delete cell"><span></span></button>
+            <${InputContextMenu} on_delete=${on_delete} cell_id=${cell_id} run_cell=${on_submit} running_disabled=${running_disabled} />
             <textarea ref=${text_area_ref}></textarea>
         </pluto-input>
     `
 }
 
+const InputContextMenu = ({ on_delete, cell_id, run_cell, running_disabled }) => {
+    const timeout = useRef(null)
+    let pluto_actions = useContext(PlutoContext)
+    const [open, setOpen] = useState(false)
+    const mouseenter = () => {
+        clearTimeout(timeout.current)
+    }
+    const mouseleave = () => {
+        timeout.current = setTimeout(() => setOpen(false), 250)
+    }
+    const toggle_running_disabled = async (e) => {
+        const new_val = !running_disabled
+        e.preventDefault()
+        e.stopPropagation()
+        await pluto_actions.update_notebook((notebook) => {
+            notebook.cell_inputs[cell_id].running_disabled = new_val
+        })
+        // we also 'run' the cell if it is disabled, this will make the backend propage the disabled state to dependent cells
+        await run_cell()
+    }
+
+    return html` <button onMouseleave=${mouseleave} onClick=${() => setOpen(!open)} onBlur=${() => setOpen(false)} class="delete_cell" title="Actions">
+        <span class="icon"></span>
+        ${open
+            ? html`<ul onMouseenter=${mouseenter} class="input_menu">
+                  <li
+                      onClick=${toggle_running_disabled}
+                      title=${running_disabled ? "Enable and run the cell" : "Disable this cell, and all cells that depend on it"}
+                  >
+                      ${running_disabled ? html`<span class="enable_cell_icon" />` : html`<span class="disable_cell_icon" />`}
+                      ${running_disabled ? html`Enable cell` : html`Disable cell`}
+                  </li>
+                  <li onClick=${on_delete} title="Delete"><span class="delete_icon" />Delete cell</li>
+                  <li class="coming_soon" title=""><span class="bandage_icon" /><em>Coming soon…</em></li>
+              </ul>`
+            : html``}
+    </button>`
+}
+
 const no_autocomplete = " \t\r\n([])+-=/,;'\"!#$%^&*~`<>|"
 
 const on_tab_key = (cm) => {

frontend/components/Editor.js

@@ -120,6 +120,7 @@ const first_true_key = (obj) => {
  *  cell_id: string,
  *  code: string,
  *  code_folded: boolean,
+ *  running_disabled: boolean,
  * }}
  */
 
@@ -130,7 +131,12 @@ const first_true_key = (obj) => {
  *  queued: boolean,
  *  running: boolean,
  *  errored: boolean,
- *  runtime?: number,
+ *  runtime: ?number,
+ *  downstream_cells_map: { string: [string]},
+ *  upstream_cells_map: { string: [string]},
+ *  precedence_heuristic: ?number,
+ *  running_disabled: boolean,
+ *  depends_on_disabled_cells: boolean,
  *  output: {
  *      body: string,
  *      persist_js_state: boolean,
@@ -280,6 +286,7 @@ export class Editor extends Component {
                     cell_id: uuidv4(),
                     code: code,
                     code_folded: false,
+                    running_disabled: false,
                 }))
                 if (index === -1) {
                     index = this.state.notebook.cell_order.length
@@ -355,6 +362,7 @@ export class Editor extends Component {
                         cell_id: uuidv4(),
                         code: code,
                         code_folded: false,
+                        running_disabled: false,
                     }
                 })
 
@@ -412,6 +420,7 @@ export class Editor extends Component {
                         cell_id: id,
                         code,
                         code_folded: false,
+                        running_disabled: false,
                     }
                     notebook.cell_order = [...notebook.cell_order.slice(0, index), id, ...notebook.cell_order.slice(index, Infinity)]
                 })

frontend/components/Notebook.js

@@ -10,6 +10,7 @@ let CellMemo = ({
     notebook_id,
     on_update_doc_query,
     on_cell_input,
+    cell_dependencies,
     on_focus_neighbor,
     selected,
     selected_cells,
@@ -20,12 +21,13 @@ let CellMemo = ({
 }) => {
     const selected_cells_diffable_primitive = (selected_cells || []).join("")
     const { body, last_run_timestamp, mime, persist_js_state, rootassignee } = cell_result?.output || {}
-    const { queued, running, runtime, errored } = cell_result || {}
-    const { cell_id, code, code_folded } = cell_input || {}
+    const { queued, running, runtime, errored, depends_on_disabled_cells } = cell_result || {}
+    const { cell_id, code, code_folded, running_disabled } = cell_input || {}
     return useMemo(() => {
         return html`
             <${Cell}
                 cell_result=${cell_result}
+                cell_dependencies=${cell_dependencies}
                 cell_input=${cell_input}
                 cell_input_local=${cell_input_local}
                 notebook_id=${notebook_id}
@@ -42,6 +44,8 @@ let CellMemo = ({
         `
     }, [
         cell_id,
+        running_disabled,
+        depends_on_disabled_cells,
         queued,
         running,
         runtime,
@@ -57,6 +61,7 @@ let CellMemo = ({
         notebook_id,
         on_update_doc_query,
         on_cell_input,
+        cell_dependencies,
         on_focus_neighbor,
         selected,
         selected_cells_diffable_primitive,
@@ -151,6 +156,7 @@ export const Notebook = ({
                             output: null,
                         }}
                         cell_input=${notebook.cell_inputs[cell_id]}
+                        cell_dependencies=${notebook.cell_dependencies[cell_id] ?? {}}
                         cell_input_local=${cell_inputs_local[cell_id]}
                         notebook_id=${notebook.notebook_id}
                         on_update_doc_query=${on_update_doc_query}

frontend/components/RunArea.js

@@ -1,11 +1,56 @@
 import { in_textarea_or_input } from "../common/KeyboardShortcuts.js"
-import { html, useEffect, useMemo, useState } from "../imports/Preact.js"
+import { PlutoContext } from "../common/PlutoContext.js"
+import { html, useContext, useEffect, useMemo, useState } from "../imports/Preact.js"
 
-export const RunArea = ({ runtime, onClick, running }) => {
+const upstream_of = (a_cell_id, notebook) => Object.values(notebook?.cell_dependencies?.[a_cell_id]?.upstream_cells_map || {}).flatMap((x) => x)
+
+const all_upstreams_of = (a_cell_id, notebook) => {
+    const upstreams = upstream_of(a_cell_id, notebook)
+    if (upstreams.length === 0) return []
+    return [...upstreams, ...upstreams.flatMap((v) => all_upstreams_of(v, notebook))]
+}
+const hasBarrier = (a_cell_id, notebook) => {
+    return notebook?.cell_inputs?.[a_cell_id]?.running_disabled
+}
+
+export const RunArea = ({ runtime, running, queued, on_run, on_interrupt, on_save, depends_on_disabled_cells, running_disabled, cell_id }) => {
     const localTimeRunning = 10e5 * useMillisSinceTruthy(running)
+    const pluto_actions = useContext(PlutoContext)
+
+    const on_jump = () => {
+        const notebook = pluto_actions.get_notebook() || {}
+        const barrier_cell_id = all_upstreams_of(cell_id, notebook).find((c) => hasBarrier(c, notebook))
+        barrier_cell_id &&
+            window.dispatchEvent(
+                new CustomEvent("cell_focus", {
+                    detail: {
+                        cell_id: barrier_cell_id,
+                        line: 0, // 1-based to 0-based index
+                    },
+                })
+            )
+    }
+    const action = running || queued ? "interrupt" : running_disabled ? "save" : depends_on_disabled_cells ? "jump" : "run"
+
+    const fmap = {
+        on_interrupt,
+        on_save,
+        on_jump,
+        on_run,
+    }
+
+    const titlemap = {
+        interrupt: "Interrupt",
+        save: "Save code without running",
+        jump: "This cell depends on a disabled cell",
+        run: "Run cell",
+    }
+
     return html`
-        <pluto-runarea>
-            <button onClick=${onClick} class="runcell" title="Run"><span></span></button>
+        <pluto-runarea class=${action}>
+            <button onClick=${fmap[`on_${action}`]} class="runcell" title=${titlemap[action]}>
+                <span></span>
+            </button>
             <span class="runtime">${prettytime(running ? localTimeRunning || runtime : runtime)}</span>
         </pluto-runarea>
     `