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}