Merge remote-tracking branch 'origin/master' into api-exec-process-info

Author: haraldschilly

src/packages/frontend/account/editor-settings/checkboxes.tsx

@@ -4,11 +4,11 @@
  */
 
 import { Map } from "immutable";
-
 import { Checkbox } from "@cocalc/frontend/antd-bootstrap";
 import { Component, Rendered } from "@cocalc/frontend/app-framework";
 import { capitalize, is_different, keys } from "@cocalc/util/misc";
 import { JUPYTER_CLASSIC_MODERN } from "@cocalc/util/theme";
+import { A } from "@cocalc/frontend/components";
 
 const EDITOR_SETTINGS_CHECKBOXES: { [setting: string]: string | Rendered } = {
   extra_button_bar:
@@ -32,10 +32,10 @@ const EDITOR_SETTINGS_CHECKBOXES: { [setting: string]: string | Rendered } = {
   ask_jupyter_kernel: "ask which kernel to use for a new Jupyter Notebook",
   jupyter_classic: (
     <span>
-      use classical Jupyter notebook{" "}
-      <a href={JUPYTER_CLASSIC_MODERN} target="_blank">
-        (DANGER: this can cause trouble...)
-      </a>
+      <A href="https://github.com/sagemathinc/cocalc/issues/7706">
+        <b>DEPRECATED -- will to be removed after Aug 2024</b>
+      </A>{" "}
+      (see <A href={JUPYTER_CLASSIC_MODERN}>the docs</A>).
     </span>
   ),
   /* commented out since we are never using this.

src/packages/frontend/frame-editors/jupyter-editor/actions.ts

@@ -372,7 +372,7 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {
 
   // Either show the most recently focused introspect frame, or ceate one.
   public async show_introspect(): Promise<void> {
-    this.show_recently_focused_frame_of_type("introspect", "row", false, 2 / 3);
+    this.show_recently_focused_frame_of_type("introspect", "col", false, 2 / 3);
   }
 
   // Close the most recently focused introspect frame, if there is one.
@@ -537,6 +537,24 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {
   compute_server() {
     // this is here just so the dropdown gets enabled
   }
+
+  gotoUser(account_id: string, frameId?: string) {
+    const cursors = this.jupyter_actions.syncdb
+      .get_cursors({ maxAge: 0 })
+      ?.toJS();
+    if (cursors == null) return; // no info
+    const locs = cursors[account_id]?.locs;
+    for (const loc of locs) {
+      if (loc.id != null) {
+        const frameActions = this.get_frame_actions(frameId);
+        if (frameActions != null) {
+          frameActions.set_cur_id(loc.id);
+          frameActions.scroll("cell visible");
+          return;
+        }
+      }
+    }
+  }
 }
 
 export { JupyterEditorActions as Actions };

src/packages/frontend/frame-editors/jupyter-editor/cell-notebook/actions.ts

@@ -828,6 +828,9 @@ export class NotebookFrameActions {
       }
     }
     this.jupyter_actions._sync();
+    setTimeout(() => {
+      this.scroll("cell visible");
+    }, 0);
   }
 
   public toggle_source_hidden(): void {

src/packages/frontend/jupyter/commands.ts

@@ -33,7 +33,9 @@ export interface KeyboardCommand {
   meta?: boolean;
   key?: string;
   // TODO: key is currently only used for displaying what the shortcut is; however,
-  // "which" is deprecated and we should switch to using only key!
+  // "which" is deprecated and we should switch to using only key.
+  // However, key is also tricky, e.g., key for shift+h is an upper case "H", but
+  // if you just hit h it is lower case "h", so you can't just switch to using event.key.
   // See https://github.com/sagemathinc/cocalc/issues/4020
 }
 

src/packages/frontend/jupyter/keyboard.ts

@@ -50,6 +50,18 @@ export function evt_to_obj(evt: any, mode: NotebookMode): KeyboardCommand {
   if (mode != null) {
     obj.mode = mode;
   }
+  if (evt.which == 173) {
+    // firefox sends 173 for the "-" key but everybody else sends 189
+    // see https://github.com/sagemathinc/cocalc/issues/4467
+    // See also https://stackoverflow.com/questions/18177818/why-jquerys-event-which-gives-different-results-in-firefox-and-chrome
+    // and of course we should rewrite this entire file to use
+    // evt.key instead of evt.which
+    evt.which = 189;
+  }
+  if (evt.which == 59) {
+    // firefox sends 59 for the "-" key but everybody else sends 186
+    evt.which = 186;
+  }
   return obj;
 }
 

src/packages/frontend/jupyter/select-kernel.tsx

@@ -382,7 +382,7 @@ export const KernelSelector: React.FC<KernelSelectorProps> = React.memo(
                 "this compute server"
               ) : (
                 <>
-                  the <SiteName /> shared environment
+                  the <SiteName /> Home Base environment
                 </>
               )}
               .

src/packages/frontend/purchases/subscriptions.tsx

@@ -480,8 +480,11 @@ export default function Subscriptions() {
         dataIndex: "cost",
         key: "cost",
         render: (cost, record) => {
-          if (record.status == "active") {
+          // in prod we hit a case where cost was null, hence the if here.
+          if (record.status == "active" && cost != null) {
             return `${currency(round2up(cost))}/${record.interval}`;
+          } else {
+            return "-";
           }
         },
       },

src/packages/jupyter/blobs/iframe.ts

@@ -13,10 +13,13 @@ import { decode } from "he";
 //import { getLogger } from "@cocalc/backend/logger";
 //const logger = getLogger("jupyter:blobs:iframe");
 
+// see https://github.com/sagemathinc/cocalc/issues/4322
+const MAX_HTML_SIZE = 10 ** 6;
+
 // We use iframes to render html in a number of cases:
 //  - if it starts with iframe
 //  - if it has a whole page doctype
-//  - if it has a <script> tag anywhere without a type -- since those are ignored by safe HTML
+//  - if it has a <script> tag anywhere -- since those are ignored by safe HTML
 //    rendering; using an iframe is the only way.  This e.g., makes mpld3 work uses -- <script>!  https://github.com/sagemathinc/cocalc/issues/1934
 //    and altair -- https://github.com/sagemathinc/cocalc/issues/4468 -- uses <script type="text/javascript"/>
 //  - do NOT just render all html in an iframe, e.g., this would break bokeh, since one output creates the target elt,
@@ -26,13 +29,28 @@ export function is_likely_iframe(content: string): boolean {
     return false;
   }
   content = content.toLowerCase();
+  if (
+    content.includes("https://bokeh.org") &&
+    content.includes("bk-notebook-logo")
+  ) {
+    // Do NOT use an iframe for bokeh no matter what, since this won't work properly.
+    // Hopefully the above heuristic is sufficiently robust to detect but not overdetect.
+    return false;
+  }
+  if (content.length >= MAX_HTML_SIZE) {
+    // it'll just break anyways if we don't use an iframe -- if we do, there is hope.
+    return true;
+  }
   return (
     content.includes("bk-notebook-logo") ||
     content.startsWith("<iframe") ||
     content.includes("<!doctype html>") ||
     (content.includes("<html>") && content.includes("<head>")) ||
-    content.includes("<script>") ||
-    content.includes('<script type="text/javascript">')
+    // this gets really serious -- we sanitize out script tags in non-iframe html,
+    // and a LOT of interesting jupyter outputs are self contained html + script tags... so
+    // by rendering them all in iframes (1) they suddenly all work, which is great, and
+    // (2) if they are large (which is common) they work even better, by far!
+    content.includes("<script")
   );
 }
 

src/packages/jupyter/ipynb/export-to-ipynb.ts

@@ -50,6 +50,7 @@ function cell_to_ipynb(id: string, opts: any) {
     cell_type: (left = cell.get("cell_type")) != null ? left : "code",
     source: diff_friendly((left1 = cell.get("input")) != null ? left1 : ""),
     metadata,
+    id,
   };
 
   // Handle any extra metadata (mostly user defined) that we don't handle in a special
@@ -87,7 +88,7 @@ function cell_to_ipynb(id: string, opts: any) {
       output,
       exec_count,
       opts.more_output != null ? opts.more_output[id] : undefined,
-      opts.blob_store
+      opts.blob_store,
     );
   } else if (obj.outputs == null && obj.cell_type === "code") {
     obj.outputs = []; // annoying requirement of ipynb file format.
@@ -130,7 +131,7 @@ function process_other_metadata(obj: any, other_metadata: any) {
 function process_attachments(
   obj: any,
   attachments: any,
-  blob_store: BlobStore | undefined
+  blob_store: BlobStore | undefined,
 ) {
   if (attachments == null || blob_store == null) {
     // don't have to or can't do anything (https://github.com/sagemathinc/cocalc/issues/4272)
@@ -155,7 +156,7 @@ function ipynb_outputs(
   output: any,
   exec_count: any,
   more_output: any,
-  blob_store: BlobStore | undefined
+  blob_store: BlobStore | undefined,
 ) {
   // If the last message has the more_output field, then there may be
   // more output messages stored, which are not in the cells object.
@@ -170,7 +171,7 @@ function ipynb_outputs(
         immutable.fromJS({
           text: "WARNING: Some output was deleted.\n",
           name: "stderr",
-        })
+        }),
       );
     } else {
       // Indeed, the last message has the more_output field.
@@ -204,7 +205,7 @@ function ipynb_outputs(
 function process_output_n(
   output_n: any,
   exec_count: any,
-  blob_store: BlobStore | undefined
+  blob_store: BlobStore | undefined,
 ) {
   if (output_n == null) {
     return;

src/packages/jupyter/ipynb/import-from-ipynb.ts

@@ -162,6 +162,13 @@ export class IPynbImporter {
       this._ipynb.metadata &&
       this._ipynb.metadata.kernelspec &&
       this._ipynb.metadata.kernelspec.name;
+    if (this._kernel != null) {
+      // kernel names are supposed to be case insensitive
+      // https://jupyter-client.readthedocs.io/en/latest/kernels.html
+      // We also make them all lower case when reading them in at
+      // src/packages/jupyter/kernel/kernel-data.ts
+      this._kernel = this._kernel.toLowerCase();
+    }
   };
 
   _import_metadata = () => {
@@ -255,7 +262,11 @@ export class IPynbImporter {
     );
   };
 
-  _get_new_id = () => {
+  _get_new_id = (cell) => {
+    if (cell?.id && this._id_is_available(cell.id)) {
+      // attempt to use id in the ipynb file
+      return cell.id;
+    }
     if (this._new_id != null) {
       return this._new_id(this._id_is_available);
     } else {
@@ -333,7 +344,7 @@ export class IPynbImporter {
         ? this._existing_ids != null
           ? this._existing_ids[n]
           : undefined
-        : this._get_new_id();
+        : this._get_new_id(cell);
     const obj: any = {
       type: "cell",
       id,
@@ -344,12 +355,12 @@ export class IPynbImporter {
         cell.metadata != null && cell.metadata.cocalc != null
           ? cell.metadata.cocalc.outputs
           : undefined,
-        id
+        id,
       ),
       cell_type: this._get_cell_type(cell.cell_type),
       exec_count: this._get_exec_count(
         cell.execution_count,
-        cell.prompt_number
+        cell.prompt_number,
       ),
     };