Merge branch 'master' into npm-upd-ts-20240723

Author: williamstein

src/compute/pnpm-lock.yaml

@@ -3,6 +3,9 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+// I just noticed there is another version of this file in jupyter/_jupyter.sass
+// They need to be carefully merged into one!  But not today.
+
 .smc-jupyter-nbviewer-content
   border: 1px solid lightgray
 
@@ -108,6 +111,18 @@
   .MathJax_SVG_Display
     padding-right: 1em
 
+  // the following helps a lot with inline math, esp labels in jupyter widgets
+  .MathJax_SVG
+    padding: 0 2.5px
+  .katex
+    padding: 0 2.5px
+
+// this seems to be missing from jupyter widgets, but is used to implement the according
+//   https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html#accordion
+// I.e., without this css rule, accordian is just broken.
+.lm-Widget.lm-mod-hidden
+  display: none !important
+
 .cc-jupyter-buttonbar-dropdown
   .ant-dropdown-menu-item
     color: $COL_GRAY_D !important

src/packages/frontend/_jupyter.sass

@@ -11,7 +11,7 @@ import md5 from "md5";
 const colons = (s: string) => s.replace(/(.{2})(?=.)/g, "$1:");
 
 export function compute_fingerprint(pub: string): string {
-  const pubbuffer = new Buffer(pub, "base64");
+  const pubbuffer = Buffer.from(pub, "base64");
   const key = md5(pubbuffer);
   return colons(key);
 }

src/packages/frontend/account/ssh-keys/fingerprint.ts

@@ -506,9 +506,22 @@ export class ProjectClient {
     path: string,
     model_id: string,
     buffer_path: string,
+    useHttp?: boolean, // ONLY works for home base, NOT compute servers!
   ): Promise<ArrayBuffer> {
-    const url = ipywidgetsGetBufferUrl(project_id, path, model_id, buffer_path);
-    return await (await fetch(url)).arrayBuffer();
+    if (useHttp) {
+      const url = ipywidgetsGetBufferUrl(
+        project_id,
+        path,
+        model_id,
+        buffer_path,
+      );
+      return await (await fetch(url)).arrayBuffer();
+    }
+    const actions = redux.getEditorActions(project_id, path);
+    return await actions.jupyter_actions.ipywidgetsGetBuffer(
+      model_id,
+      buffer_path,
+    );
   }
 
   // getting, setting, editing, deleting, etc., the  api keys for a project

src/packages/frontend/client/project.ts

@@ -3,6 +3,9 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+// I just noticed there is another version of this file in ../_jupyter.sass
+// They need to be carefully merged into one!  But not today.
+
 .cocalc-jupyter-rendered
   img
     max-width: 100%
@@ -101,3 +104,10 @@
 .cocalc-jupyter-menu
   .ant-dropdown-trigger:hover
     background-color: white
+
+// Make it so the widgets container has position relative,
+// which is assumed by some widgets, e.g.,
+// %matplotlib widgets
+// from pylab import plot; plot([1,2],[3,4])
+cocalc-lumino-adapter
+  position: relative

src/packages/frontend/jupyter/_jupyter.sass

@@ -35,6 +35,8 @@ import {
 } from "../misc/local-storage";
 import { parse_headings } from "./contents";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { bufferToBase64, base64ToBuffer } from "@cocalc/util/base64";
+import { reuseInFlight } from "@cocalc/util/reuse-in-flight";
 
 export class JupyterActions extends JupyterActions0 {
   public widget_manager?: WidgetManager;
@@ -107,10 +109,10 @@ export class JupyterActions extends JupyterActions0 {
       if (ipywidgets_state == null) {
         throw Error("bug -- ipywidgets_state must be defined");
       }
-      this.widget_manager = new WidgetManager(
-        ipywidgets_state,
-        this.setWidgetModelIdState.bind(this),
-      );
+      this.widget_manager = new WidgetManager({
+        ipywidgets_state: ipywidgets_state!,
+        actions: this,
+      });
       // Stupid hack for now -- this just causes some activity so
       // that the syncdb syncs.
       // This should not be necessary, and may indicate a bug in the sync layer?
@@ -314,20 +316,6 @@ export class JupyterActions extends JupyterActions0 {
     // this.deprecated("focus_unlock");
   };
 
-  private setWidgetModelIdState(
-    model_id: string,
-    state: string | null, // '' = good; 'nonempty' = bad; null=delete
-  ): void {
-    let widgetModelIdState: Map<string, string> =
-      this.store.get("widgetModelIdState");
-    if (state === null) {
-      widgetModelIdState = widgetModelIdState.delete(model_id);
-    } else {
-      widgetModelIdState = widgetModelIdState.set(model_id, state);
-    }
-    this.setState({ widgetModelIdState });
-  }
-
   protected close_client_only(): void {
     const account = this.redux.getStore("account");
     if (account != null) {
@@ -461,11 +449,43 @@ export class JupyterActions extends JupyterActions0 {
     this.deprecated("command", name);
   };
 
-  public send_comm_message_to_kernel(comm_id: string, data: any): string {
-    const msg_id = uuid();
-    this.api_call("comm", [msg_id, comm_id, data]);
+  send_comm_message_to_kernel = async ({
+    msg_id,
+    comm_id,
+    target_name,
+    data,
+    buffers,
+  }: {
+    msg_id?: string;
+    comm_id: string;
+    target_name: string;
+    data: unknown;
+    buffers?: ArrayBuffer[] | ArrayBufferView[];
+  }): Promise<string> => {
+    if (!msg_id) {
+      msg_id = uuid();
+    }
+    let buffers64;
+    if (buffers != null) {
+      buffers64 = buffers.map(bufferToBase64);
+    } else {
+      buffers64 = [];
+    }
+    const msg = { msg_id, target_name, comm_id, data, buffers64 };
+    await this.api_call("comm", msg);
+    // console.log("send_comm_message_to_kernel", "sent", msg);
     return msg_id;
-  }
+  };
+
+  ipywidgetsGetBuffer = reuseInFlight(
+    async (model_id: string, buffer_path: string): Promise<ArrayBuffer> => {
+      const { buffer64 } = await this.api_call("ipywidgets-get-buffer", {
+        model_id,
+        buffer_path,
+      });
+      return base64ToBuffer(buffer64);
+    },
+  );
 
   // NOTE: someday move this to the frame-tree actions, since it would
   // be generically useful!
@@ -780,9 +800,7 @@ export class JupyterActions extends JupyterActions0 {
   }
 
   public custom_jupyter_kernel_docs(): void {
-    open_new_tab(
-      "https://doc.cocalc.com/howto/custom-jupyter-kernel.html",
-    );
+    open_new_tab("https://doc.cocalc.com/howto/custom-jupyter-kernel.html");
   }
 
   /* Wait until the syncdb is ready *and* there is at

src/packages/frontend/jupyter/browser-actions.ts

@@ -144,7 +144,7 @@ function OutputColumn({
   }
   return (
     <CellOutputMessages
-      scrolled={cell.get("scrolled", true)}
+      scrolled={cell.get("scrolled")}
       output={output}
       project_id={project_id}
       directory={directory}
@@ -196,7 +196,7 @@ function ControlColumn({ actions, cell, id }) {
       <OutputToggle
         actions={actions}
         id={id}
-        scrolled={cell.get("scrolled", true)}
+        scrolled={cell.get("scrolled")}
       >
         {prompt}
       </OutputToggle>

src/packages/frontend/jupyter/cell-output.tsx

@@ -251,6 +251,13 @@ export const Cell: React.FC<Props> = React.memo((props: Props) => {
   function getCellStyle(): CSS {
     const color = getBorderColor();
 
+    // 30px -- make room for InsertCell(above)
+    const marginTop = props.isFirst
+      ? "30px"
+      : props.actions != null
+      ? "10px"
+      : "20px";
+
     const style: React.CSSProperties = {
       border: `1px solid ${color}`,
       borderLeft: `10px solid ${color}`,
@@ -267,26 +274,23 @@ export const Cell: React.FC<Props> = React.memo((props: Props) => {
         ? {
             padding: "2px",
             margin:
-              props.actions != null ? "10px 15px 2px 5px" : "20px 15px 2px 5px",
+              props.actions != null
+                ? `${marginTop} 15px 2px 5px`
+                : `${marginTop} 15px 2px 5px`,
           }
         : {
             padding: "2px 2px 15px 2px",
             margin:
               props.actions != null
-                ? "10px 15px -15px 5px"
-                : "20px 15px -15px 5px",
+                ? `${marginTop} 15px -15px 5px`
+                : `${marginTop} 15px -15px 5px`,
           }),
     };
 
     if (props.is_selected) {
       style.background = "#e3f2fd";
     }
 
-    if (props.isFirst) {
-      // make room for InsertCell(above)
-      style.marginTop = "30px";
-    }
-
     return style;
   }
 

src/packages/frontend/jupyter/cell.tsx

@@ -623,7 +623,11 @@ export const CodeMirrorEditor: React.FC<CodeMirrorEditorProps> = ({
       options0.extraKeys["PageDown"] = page_down_key;
       options0.extraKeys["Cmd-/"] = "toggleComment";
       options0.extraKeys["Ctrl-/"] = "toggleComment";
-      options0.extraKeys["Ctrl-Enter"] = () => {}; // ignore control+enter, since there's a shortcut
+      // ignore shift+enter, control+enter, alt+enter and meta+enter since there's a shortcut
+      options0.extraKeys["Shift-Enter"] = () => {};
+      options0.extraKeys["Ctrl-Enter"] = () => {};
+      options0.extraKeys["Alt-Enter"] = () => {};
+      options0.extraKeys["Cmd-Enter"] = () => {};
       /*
       Disabled for now since fold state isn't preserved.
       if (options0.foldGutter) {

src/packages/frontend/jupyter/codemirror-editor.tsx

@@ -764,7 +764,7 @@ export function commands(actions: AllActions): {
     // on a mac). https://github.com/sagemathinc/cocalc/issues/7000
     "run cell": {
       i: "play",
-      m: "Run Selected Cells and Do not Advance",
+      m: "Run Selected Cells and Do Not Advance",
       b: "Stay",
       t: "Run all cells that are currently selected. Do not move the selection.",
       k: [