Dralbase state managment

frontend/common/Bond.js

@@ -3,32 +3,44 @@
 
 import observablehq from "./SetupCellEnvironment.js"
 
-export const connect_bonds = (node, all_completed_promise, cell_invalidated_promise, requests) => {
+export const set_bound_elements_to_their_value = (node, bond_values) => {
+    for (let bond_node of node.querySelectorAll("bond")) {
+        let bond_name = bond_node.getAttribute("def")
+        if (bond_node.firstElementChild != null && bond_values[bond_name] != null) {
+            bond_node.firstElementChild.value = bond_values[bond_name].value
+        }
+    }
+}
+
+/**
+ * @param {HTMLElement} node
+ * @param {(name: string, value_to_send: any, is_first_value: boolean) => void} on_bond_change
+ */
+export const add_bonds_listener = (node, on_bond_change) => {
+    // the <bond> node will be invalidated when the cell re-evaluates. when this happens, we need to stop processing input events
+    var node_is_invalidated = false
+
     node.querySelectorAll("bond").forEach(async (bond_node) => {
         // read the docs on Generators.input from observablehq/stdlib:
         const inputs = observablehq.Generators.input(bond_node.firstElementChild)
         var is_first_value = true
 
-        // the <bond> node will be invalidated when the cell re-evaluates. when this happens, we need to stop processing input events
-        var node_is_invalidated = false
-        cell_invalidated_promise.then(() => {
-            node_is_invalidated = true
-        })
-
         while (!node_is_invalidated) {
-            // wait for all (other) cells to complete - if we don't, the Julia code would get overloaded with new values
-            await all_completed_promise.current
             // wait for a new input value. If a value is ready, then this promise resolves immediately
             const val = await inputs.next().value
             if (!node_is_invalidated) {
                 // send to the Pluto back-end (have a look at set_bond in Editor.js)
                 const to_send = await transformed_val(val)
-                requests.set_bond(bond_node.getAttribute("def"), to_send, is_first_value)
+                on_bond_change(bond_node.getAttribute("def"), to_send, is_first_value)
             }
             // the first value might want to be ignored - https://github.com/fonsp/Pluto.jl/issues/275
             is_first_value = false
         }
     })
+
+    return function dispose_bond_listener() {
+        node_is_invalidated = true
+    }
 }
 
 // The identity function in most cases, loads file contents when appropriate
@@ -38,6 +50,7 @@ const transformed_val = async (val) => {
     } else if (val instanceof File) {
         return await new Promise((res) => {
             const reader = new FileReader()
+            // @ts-ignore
             reader.onload = () => res({ name: val.name, type: val.type, data: new Uint8Array(reader.result) })
             reader.onerror = () => res({ name: val.name, type: val.type, data: null })
             reader.readAsArrayBuffer(val)

frontend/common/Feedback.js

@@ -1,4 +1,3 @@
-import { code_differs } from "../components/Cell.js"
 import { timeout_promise } from "./PlutoConnection.js"
 
 export const create_counter_statistics = () => {
@@ -9,7 +8,7 @@ export const create_counter_statistics = () => {
     }
 }
 
-const first_line = (cell) => /(.*)/.exec(cell.local_code.body)[0]
+const first_line = (cell) => /(.*)/.exec(cell.code)[0]
 const count_matches = (pattern, haystack) => (haystack.match(pattern) || []).length
 const value_counts = (values) =>
     values.reduce((prev_counts, val) => {
@@ -18,30 +17,45 @@ const value_counts = (values) =>
     }, {})
 const sum = (values) => values.reduce((a, b) => a + b, 0)
 
+/**
+ * @param {{
+ *  notebook: import("../components/Editor.js").NotebookData
+ *  cell_inputs_local: { [id: string]: import("../components/Editor.js").CellInputData }
+ * }} state
+ * */
 export const finalize_statistics = async (state, client, counter_statistics) => {
-    const cells = state.notebook.cells
+    const cell_results = state.notebook.cell_order.map((cell_id) => state.notebook.cell_results[cell_id]).filter((x) => x != null)
+    const cells = state.notebook.cell_order.map((cell_id) => state.notebook.cell_inputs[cell_id]).filter((x) => x != null)
+    const cell_inputs_local = state.notebook.cell_order.map((cell_id) => {
+        return {
+            ...(state.cell_inputs_local[cell_id] ?? state.notebook.cell_inputs[cell_id]),
+            ...state.cell_inputs_local[cell_id],
+        }
+    })
 
     const statistics = {
         numCells: cells.length,
         // integer
-        numErrored: cells.filter((c) => c.errored).length,
+        numErrored: cell_results.filter((c) => c.errored).length,
         // integer
         numFolded: cells.filter((c) => c.code_folded).length,
         // integer
-        numCodeDiffers: cells.filter(code_differs).length,
+        numCodeDiffers: state.notebook.cell_order.filter(
+            (cell_id) => state.notebook.cell_inputs[cell_id].code === (state.cell_inputs_local[cell_id]?.code ?? state.notebook.cell_inputs[cell_id].code)
+        ).length,
         // integer
-        numMarkdowns: cells.filter((c) => first_line(c).startsWith('md"')).length,
+        numMarkdowns: cell_inputs_local.filter((c) => first_line(c).startsWith('md"')).length,
         // integer
-        numBinds: sum(cells.map((c) => count_matches(/\@bind/g, c.local_code.body))),
+        numBinds: sum(cell_inputs_local.map((c) => count_matches(/\@bind/g, c.code))),
         // integer
-        numBegins: cells.filter((c) => first_line(c).endsWith("begin")).length,
+        numBegins: cell_inputs_local.filter((c) => first_line(c).endsWith("begin")).length,
         // integer
-        numLets: cells.filter((c) => first_line(c).endsWith("let")).length,
+        numLets: cell_inputs_local.filter((c) => first_line(c).endsWith("let")).length,
         // integer
-        cellSizes: value_counts(cells.map((c) => count_matches(/\n/g, c.local_code.body) + 1)),
+        cellSizes: value_counts(cell_inputs_local.map((c) => count_matches(/\n/g, c.code) + 1)),
         // {numLines: numCells, ...}
         // e.g. {1: 28,  3: 14,  5: 7,  7: 1,  12: 1,  14: 1}
-        runtimes: value_counts(cells.map((c) => Math.floor(Math.log10(c.runtime + 1)))),
+        runtimes: value_counts(cell_results.map((c) => Math.floor(Math.log10(c.runtime + 1)))),
         // {runtime: numCells, ...}
         // where `runtime` is log10, rounded
         // e.g. {1: 28,  3: 14,  5: 7,  7: 1,  12: 1,  14: 1}
@@ -50,6 +64,7 @@ export const finalize_statistics = async (state, client, counter_statistics) =>
         // string, e.g. "v0.7.10"
         // versionJulia: client.julia_version,
         //     // string, e.g. "v1.0.5"
+        // @ts-ignore
         timestamp: firebase.firestore.Timestamp.now(),
         // timestamp (ms)
         screenWidthApprox: 100 * Math.round(document.body.clientWidth / 100),
@@ -94,11 +109,13 @@ const feedbackdb = {
     instance: null,
 }
 const init_firebase = () => {
+    // @ts-ignore
     firebase.initializeApp({
         apiKey: "AIzaSyC0DqEcaM8AZ6cvApXuNcNU2RgZZOj7F68",
         authDomain: "localhost",
         projectId: "pluto-feedback",
     })
+    // @ts-ignore
     feedbackdb.instance = firebase.firestore()
 }
 
@@ -111,7 +128,9 @@ export const init_feedback = () => {
 
         timeout_promise(
             feedbackdb.instance.collection("feedback").add({
+                // @ts-ignore
                 feedback: new FormData(e.target).get("opinion"),
+                // @ts-ignore
                 timestamp: firebase.firestore.Timestamp.now(),
                 email: email ? email : "",
             }),
@@ -121,6 +140,7 @@ export const init_feedback = () => {
                 let message = "Submitted. Thank you for your feedback! 💕"
                 console.log(message)
                 alert(message)
+                // @ts-ignore
                 feedbackform.querySelector("#opinion").value = ""
             })
             .catch((error) => {

frontend/common/NodejsCompatibilityPolyfill.js

@@ -1,3 +1,4 @@
+// @ts-ignore
 window.process = {
     env: {
         NODE_ENV: "production",