🚦Slider warning messages when requests encounter problems

frontend/common/SliderServerClient.js

@@ -3,6 +3,7 @@
 import { pack, unpack } from "./MsgPack.js"
 import immer from "../imports/immer.js"
 import _ from "../imports/lodash.js"
+import { open_pluto_popup } from "../components/Popup.js"
 
 const assert_response_ok = (/** @type {Response} */ r) => (r.ok ? r : Promise.reject(r))
 
@@ -39,6 +40,23 @@
  ])
  )
 
+const sliders_error = (e, previously_set) => {
+ const el = previously_set ? document.querySelector(`bond[def=${previously_set.values().next().value}]`) : null
+ if (e.status === 503) {
+ open_pluto_popup({
+ type: "warn",
+ body: "Sliders are still starting, check back later for interactivity!",
+ source_element: el,
+ })
+ } else {
+ open_pluto_popup({
+ type: "warn",
+ body: "Error connecting to slider server!",
+ source_element: el,
+ })
+ }
+}
+
 export const slider_server_actions = ({ setStatePromise, launch_params, actions, get_original_state, get_current_state, apply_notebook_patches }) => {
  setStatePromise(
  immer((state) => {
@@ -53,30 +71,33 @@
 
  notebookfile_hash.then((x) => console.log("Notebook file hash:", x))
 
- const bond_connections = notebookfile_hash
- .then((hash) => fetch(trailingslash(launch_params.slider_server_url) + "bondconnections/" + hash))
- .then(assert_response_ok)
- .then((r) => r.arrayBuffer())
- .then((b) => unpack(new Uint8Array(b)))
-
- bond_connections.then((x) => {
- console.log("Bond connections:", x)
- setStatePromise(
- immer((state) => {
- state.slider_server.connecting = false
- state.slider_server.interactive = Object.keys(x).length > 0
- })
- )
- })
+ let bond_connections = null
 
  const mybonds = {}
  const bonds_to_set = {
  current: new Set(),
  }
  const request_bond_response = debounced_promises(async () => {
+ if (!bond_connections) {
+ const bond_connections_res = await notebookfile_hash.then((hash) =>
+ fetch(trailingslash(launch_params.slider_server_url) + "bondconnections/" + hash)
+ )
+ if (bond_connections_res.ok) {
+ bond_connections = await bond_connections_res.arrayBuffer().then((x) => unpack(new Uint8Array(x)))
+
+ console.log("Bond connections:", bond_connections)
+ setStatePromise(
+ immer((state) => {
+ state.slider_server.connecting = false
+ state.slider_server.interactive = Object.keys(bond_connections).length > 0
+ })
+ )
+ }
+ }
+
  const base = trailingslash(launch_params.slider_server_url)
  const hash = await notebookfile_hash
- const graph = await bond_connections
+ const graph = bond_connections || {}
 
  // compute dependencies and update cell running statuses
  const dep_graph = get_current_state().cell_dependencies
@@ -92,6 +113,7 @@
  const to_send = new Set(bonds_to_set.current)
  bonds_to_set.current.forEach((varname) => (graph[varname] ?? []).forEach((x) => to_send.add(x)))
  console.debug("Requesting bonds", bonds_to_set.current, to_send)
+ const previously_set = new Set(bonds_to_set.current)
  bonds_to_set.current = new Set()
 
  const mybonds_filtered = Object.fromEntries(
@@ -129,16 +151,25 @@
  ids_of_cells_that_ran.forEach((id) => {
  state.cell_results[id] = original.cell_results[id]
  })
- running_cells.forEach((id) => {
- state.cell_results[id].queued = false
- state.cell_results[id].running = false
- })
  })(get_current_state())
  )
  } catch (e) {
  console.error(unpacked, e)
+
+ if (previously_set.size === 1) {
+ sliders_error(e, previously_set)
+ }
  }
  }
+
+ await setStatePromise(
+ immer((state) => {
+ running_cells.forEach((id) => {
+ state.notebook.cell_results[id].queued = false
+ state.notebook.cell_results[id].running = false
+ })
+ })
+ )
  })
 
  return {