WIP: Eventually consistent multiplayer 🤝

Project.toml

@@ -21,6 +21,7 @@ MIMEs = "6c6e2e6c-3030-632d-7369-2d6c69616d65"
 Malt = "36869731-bdee-424d-aa32-cab38c994e3b"
 Markdown = "d6f4376e-aef5-505a-96c1-9c027394607a"
 MsgPack = "99f44e22-a591-53d1-9472-aa23ef4bd671"
+Pinot = "14b02da0-8be6-40d8-a4f8-a7d73caed26e"
 Pkg = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
 PlutoDependencyExplorer = "72656b73-756c-7461-726b-72656b6b696b"
 PrecompileSignatures = "91cefc8d-f054-46dc-8f8c-26e11d7c5411"

frontend/components/BottomRightPanel.js

@@ -6,17 +6,19 @@ import { is_finished, ProcessTab, total_done, total_tasks, useStatusItem } from
 import { useMyClockIsAheadBy } from "../common/clock sync.js"
 import { BackendLaunchPhase } from "../common/Binder.js"
 import { useEventListener } from "../common/useEventListener.js"
+import { CollabTab } from "./CollabTab.js"
 
 /**
  * @typedef PanelTabName
- * @type {"docs" | "process" | null}
+ * @type {"docs" | "process" | "collab" | null}
  */
 
 export const open_bottom_right_panel = (/** @type {PanelTabName} */ tab) => window.dispatchEvent(new CustomEvent("open_bottom_right_panel", { detail: tab }))
 
 /**
  * @param {{
  * notebook: import("./Editor.js").NotebookData,
+ * client_id: string,
  * desired_doc_query: string?,
  * on_update_doc_query: (query: string?) => void,
  * connected: boolean,
@@ -27,6 +29,7 @@ export const open_bottom_right_panel = (/** @type {PanelTabName} */ tab) => wind
  */
 export let BottomRightPanel = ({
     desired_doc_query,
+    client_id,
     on_update_doc_query,
     notebook,
     connected,
@@ -56,6 +59,8 @@ export let BottomRightPanel = ({
         [set_open_tab]
     )
 
+    const showMultiplayerTab = notebook.users && Object.keys(notebook.users).some(user_id => user_id != client_id)
+
     const status = useWithBackendStatus(notebook, backend_launch_phase)
 
     const [status_total, status_done] = useMemo(
@@ -119,6 +124,14 @@ export let BottomRightPanel = ({
                                 : html`Status${" "}<span class="subprogress-counter">(${status_done}/${status_total})</span>`}</span
                         >
                     </button>
+                    <button title="Collaboration"
+                        class=${cl({
+                            "helpbox-tab-key": true,
+                            "active": open_tab === "collab",
+                        })}
+                        onClick=${() => set_open_tab(open_tab === "collab" ? null : "collab")}>
+                        <span class="tabname">Collaboration</span>
+                    </button>
                     ${hidden
                         ? null
                         : html`<button
@@ -146,6 +159,8 @@ export let BottomRightPanel = ({
                           my_clock_is_ahead_by=${my_clock_is_ahead_by}
                           status=${status}
                       />`
+                    : open_tab === "collab"
+                    ? html`<${CollabTab} client_id=${client_id} notebook=${notebook} />`
                     : null}
             </pluto-helpbox>
         </aside>

frontend/components/Cell.js

@@ -104,11 +104,13 @@ const on_jump = (hasBarrier, pluto_actions, cell_id) => () => {
  * }} props
  * */
 export const Cell = ({
-    cell_input: { cell_id, code, code_folded, metadata },
+    cell_input: { cell_id, code, code_folded, metadata, cm_updates, start_version, last_run_code },
     cell_result: { queued, running, runtime, errored, output, logs, published_object_keys, depends_on_disabled_cells, depends_on_skipped_cells },
     cell_dependencies,
     cell_input_local,
     notebook_id,
+    client_id,
+    users,
     selected,
     force_hide_input,
     focus_after_creation,
@@ -125,19 +127,18 @@ export const Cell = ({
     // useCallback because pluto_actions.set_doc_query can change value when you go from viewing a static document to connecting (to binder)
     const on_update_doc_query = useCallback((...args) => pluto_actions.set_doc_query(...args), [pluto_actions])
     const on_focus_neighbor = useCallback((...args) => pluto_actions.focus_on_neighbor(...args), [pluto_actions])
-    const on_change = useCallback((val) => pluto_actions.set_local_cell(cell_id, val), [cell_id, pluto_actions])
     const variables = useMemo(() => Object.keys(cell_dependencies?.downstream_cells_map ?? {}), [cell_dependencies])
 
     // We need to unmount & remount when a destructive error occurs.
     // For that reason, we will use a simple react key and increment it on error
     const [key, setKey] = useState(0)
     const cell_key = useMemo(() => cell_id + key, [cell_id, key])
 
-    const [, resetError] = useErrorBoundary((error) => {
-        console.log(`An error occured in the CodeMirror code, resetting CellInput component. See error below:\n\n${error}\n\n -------------- `)
-        setKey(key + 1)
-        resetError()
-    })
+    // const [, resetError] = useErrorBoundary((error) => {
+    //     console.log(`An error occured in the CodeMirror code, resetting CellInput component. See error below:\n\n${error}\n\n -------------- `)
+    //     setKey(key + 1)
+    //     resetError()
+    // })
 
     const remount = useMemo(() => () => setKey(key + 1))
     // cm_forced_focus is null, except when a line needs to be highlighted because it is part of a stack trace
@@ -204,7 +205,9 @@ export const Cell = ({
     // We then toggle animation visibility using opacity. This saves a bunch of repaints.
     const activate_animation = useDebouncedTruth(running || queued || waiting_to_run)
 
-    const class_code_differs = code !== (cell_input_local?.code ?? code)
+    const class_code_differs = useMemo(() => (last_run_code !== code), [code, last_run_code])
+    const class_code_folded = code_folded && cm_forced_focus == null
+
     const no_output_yet = (output?.last_run_timestamp ?? 0) === 0
     const code_not_trusted_yet = process_waiting_for_permission && no_output_yet
 
@@ -236,17 +239,6 @@ export const Cell = ({
             pluto_actions.set_and_run_multiple([cell_id])
         }
     }, [pluto_actions, cell_id])
-    const on_change_cell_input = useCallback(
-        (new_code) => {
-            if (!disable_input_ref.current) {
-                if (code_folded && cm_forced_focus != null) {
-                    pluto_actions.fold_remote_cells([cell_id], false)
-                }
-                on_change(new_code)
-            }
-        },
-        [code_folded, cm_forced_focus, pluto_actions, on_change]
-    )
     const on_add_after = useCallback(() => {
         pluto_actions.add_remote_cell(cell_id, "after")
     }, [pluto_actions, cell_id, selected])
@@ -326,6 +318,10 @@ export const Cell = ({
                 ? html`<${CellOutput} errored=${errored} ...${output} sanitize_html=${sanitize_html} cell_id=${cell_id} />`
                 : html``}
             <${CellInput}
+                cm_updates=${cm_updates}
+                code=${code}
+                start_version=${start_version}
+                last_run_code=${last_run_code}
                 local_code=${cell_input_local?.code ?? code}
                 remote_code=${code}
                 cell_dependencies=${cell_dependencies}
@@ -338,13 +334,14 @@ export const Cell = ({
                 on_submit=${on_submit}
                 on_delete=${on_delete}
                 on_add_after=${on_add_after}
-                on_change=${on_change_cell_input}
                 on_update_doc_query=${on_update_doc_query}
                 on_focus_neighbor=${on_focus_neighbor}
                 on_line_heights=${set_line_heights}
                 nbpkg=${nbpkg}
                 cell_id=${cell_id}
                 notebook_id=${notebook_id}
+                client_id=${client_id}
+                users=${users}
                 metadata=${metadata}
                 any_logs=${any_logs}
                 show_logs=${show_logs}