Merge pull request #7599 from sagemathinc/jupyter-runnall-toolbar

frontend/jupyter: run all cells above/below dropdown button in cell toolbar

Author: williamstein

src/packages/frontend/components/icon.tsx

@@ -208,15 +208,16 @@ import {
   UserDeleteOutlined,
   UserOutlined,
   UsergroupAddOutlined,
+  VerticalAlignBottomOutlined,
   VerticalAlignMiddleOutlined,
   VerticalRightOutlined,
   VideoCameraOutlined,
   WalletOutlined,
   WarningOutlined,
   WifiOutlined,
+  XOutlined,
   YoutubeFilled,
   YoutubeOutlined,
-  XOutlined,
 } from "@ant-design/icons";
 
 // Unfortunately -- "error TS7056: The inferred type of this node exceeds the maximum length the
@@ -593,6 +594,7 @@ const IconSpec: { [name: string]: any } = {
   "vertical-right-outlined": VerticalRightOutlined,
   "video-camera": VideoCameraOutlined,
   "vertical-align-middle": VerticalAlignMiddleOutlined,
+  "vertical-align-bottom": VerticalAlignBottomOutlined,
   vim: { IconFont: "vim" },
   vscode: { IconFont: "vscode" },
   wallet: WalletOutlined,
@@ -675,12 +677,14 @@ export function isIconName(name?: string): name is IconName {
 
 export const iconNames: IconName[] = Object.keys(IconSpec) as any;
 
+export type IconRotation = "45" | "90" | "135" | "180" | "225" | "270" | "315";
+
 interface Props {
   name?: IconName;
   unicode?: number; // (optional) set a hex 16 bit charcode to render a unicode char, e.g. 0x2620
   className?: string;
   size?: "lg" | "2x" | "3x" | "4x" | "5x";
-  rotate?: "45" | "90" | "135" | "180" | "225" | "270" | "315";
+  rotate?: IconRotation;
   flip?: "horizontal" | "vertical";
   spin?: boolean;
   pulse?: boolean;

src/packages/frontend/frame-editors/frame-tree/commands/editor-menus.ts

@@ -6,13 +6,15 @@ This is basically a more user friendly and compact interface to the addMenus
 and addCommands functions.
 */
 
+import { IconRotation } from "@cocalc/frontend/components/icon";
 import { capitalize } from "@cocalc/util/misc";
 import { addCommands } from "./commands";
 import { addMenus } from "./menus";
 import type { Command, Menus } from "./types";
 
 type Command0 = {
   icon?: string;
+  iconRotate?: IconRotation;
   label?: string | (({ props }: any) => any);
   name?: string;
   children?;
@@ -46,6 +48,7 @@ export function addEditorMenus({
       children?;
       label?;
       icon?;
+      iconRotate?;
       onClick?;
       disabled?;
     };

src/packages/frontend/frame-editors/frame-tree/commands/manage.tsx

@@ -256,6 +256,7 @@ export class ManageCommands {
   };
 
   private getCommandIcon = (cmd: Partial<Command>) => {
+    const rotate = cmd.iconRotate;
     let icon = cmd.icon;
     if (!icon) {
       return undefined;
@@ -271,7 +272,7 @@ export class ManageCommands {
           display: "inline-block",
         }}
       >
-        {typeof icon == "string" ? <Icon name={icon} /> : icon}
+        {typeof icon === "string" ? <Icon name={icon} rotate={rotate} /> : icon}
       </span>
     );
   };

src/packages/frontend/frame-editors/frame-tree/commands/types.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 
+import { IconRotation } from "@cocalc/frontend/components/icon";
 import type { ManageCommands } from "./manage";
 import { MENUS } from "./menus";
 
@@ -25,6 +26,7 @@ export interface Command {
   pos?: number;
   title?: ReactNode;
   icon?: ReactNode | ((opts: ManageCommands) => ReactNode);
+  iconRotate?: IconRotation;
   button?: ReactNode | ((opts: ManageCommands) => ReactNode);
   //color?: string | ((opts: ManageCommands) => string);
   label?: ReactNode | ((opts: ManageCommands) => ReactNode);

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

@@ -516,6 +516,7 @@ function initMenus() {
         title: cmd.t,
         label: cmd.m,
         icon: cmd.i,
+        iconRotate: cmd.ir,
         keyboard: cmd.k ? cmd.k.map(shortcut_to_string).join(", ") : undefined,
         onClick: ({ props }) => {
           allActions.frame_actions = props.actions.frame_actions?.[props.id];

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

@@ -7,7 +7,7 @@
 React component that describes the input of a cell
 */
 
-import { Button, Tooltip } from "antd";
+import { Button, Dropdown, Tooltip } from "antd";
 import { delay } from "awaiting";
 import { Map } from "immutable";
 import React, { useState } from "react";
@@ -28,6 +28,8 @@ import {
   CODE_BAR_BTN_STYLE,
   MINI_BUTTONS_STYLE,
   MINI_BUTTONS_STYLE_INNER,
+  RUN_ALL_CELLS_ABOVE_ICON,
+  RUN_ALL_CELLS_BELOW_ICON,
 } from "./consts";
 import { LLMCellTool } from "./llm";
 
@@ -77,48 +79,88 @@ export const CellButtonBar: React.FC<Props> = React.memo(
       track("jupyter_cell_buttonbar", { button, project_id, path });
     }
 
-    function renderCodeBarRunStop() {
-      if (id == null || actions == null || actions.is_closed()) {
-        return;
-      }
+    function getRunStopButton(): {
+      tooltip: string;
+      icon: string;
+      label: string;
+      onClick: () => void;
+    } {
       switch (cell.get("state")) {
         case "busy":
         case "run":
         case "start":
-          return (
-            <Tooltip placement="top" title="Stop this cell">
-              <Button
-                size="small"
-                type="text"
-                onClick={() => {
-                  actions?.signal("SIGINT");
-                  // trackButton("stop");  // too much data
-                }}
-                style={CODE_BAR_BTN_STYLE}
-              >
-                <Icon name="stop" /> Stop
-              </Button>
-            </Tooltip>
-          );
+          return {
+            tooltip: "Stop this cell",
+            icon: "stop",
+            label: "Stop",
+            onClick: () => actions?.signal("SIGINT"),
+          };
+
         default:
-          return (
-            <Tooltip placement="top" title="Run this cell">
-              <Button
-                size="small"
-                type="text"
-                onClick={() => {
-                  actions?.run_cell(id);
-                  // trackButton("run");   // too much data
-                }}
-                style={CODE_BAR_BTN_STYLE}
-              >
-                <Icon name="step-forward" /> Run
-              </Button>
-            </Tooltip>
-          );
+          return {
+            tooltip: "Run this cell",
+            label: "Run",
+            icon: "step-forward",
+            onClick: () => actions?.run_cell(id),
+          };
       }
     }
 
+    function renderCodeBarRunStop() {
+      if (id == null || actions == null || actions.is_closed()) {
+        return;
+      }
+
+      const { label, icon, tooltip, onClick } = getRunStopButton();
+
+      return (
+        <Dropdown.Button
+          size="small"
+          type="text"
+          trigger={["click"]}
+          mouseLeaveDelay={1.5}
+          icon={<Icon name="angle-down" />}
+          onClick={onClick}
+          menu={{
+            items: [
+              {
+                key: "all-above",
+                icon: <Icon name={RUN_ALL_CELLS_ABOVE_ICON} />,
+                label: (
+                  <Tooltip
+                    title={"Run all cells above this one, excluding this cell"}
+                    placement={"left"}
+                  >
+                    Run All Above
+                  </Tooltip>
+                ),
+                onClick: () => actions?.run_all_above_cell(id),
+              },
+              {
+                key: "all-below",
+                icon: <Icon name={RUN_ALL_CELLS_BELOW_ICON} rotate={"90"} />,
+                label: (
+                  <Tooltip
+                    title={"Run all cells below this one, including this cell"}
+                    placement={"left"}
+                  >
+                    Run All Below
+                  </Tooltip>
+                ),
+                onClick: () => actions?.run_all_below_cell(id),
+              },
+            ],
+          }}
+        >
+          <Tooltip placement="top" title={tooltip}>
+            <span style={CODE_BAR_BTN_STYLE}>
+              <Icon name={icon} /> {label}
+            </span>
+          </Tooltip>
+        </Dropdown.Button>
+      );
+    }
+
     function renderCodeBarComputeServer() {
       if (!is_current || !computeServerId) return;
       return <ComputeServerPrompt id={computeServerId} />;

src/packages/frontend/jupyter/commands.ts

@@ -15,6 +15,7 @@ import { NotebookFrameActions } from "@cocalc/frontend/frame-editors/jupyter-edi
 import { open_new_tab } from "@cocalc/frontend/misc";
 import { JupyterActions } from "./browser-actions";
 import { NotebookMode } from "@cocalc/jupyter/types";
+import { RUN_ALL_CELLS_ABOVE_ICON, RUN_ALL_CELLS_BELOW_ICON } from "./consts";
 
 export interface KeyboardCommand {
   mode?: NotebookMode;
@@ -35,6 +36,7 @@ export interface CommandDescription {
   f: Function; // function that implements command.
   b?: string; // very short label; use for a button
   i?: IconName;
+  ir?: "90"; // rotate icon
   k?: KeyboardCommand[]; // keyboard commands
   t?: string; // t=title = much longer description for tooltip
   menu?: string; // alternative to m just for dropdown menu
@@ -721,13 +723,14 @@ export function commands(actions: AllActions): {
     },
 
     "run all cells above": {
-      i: "caret-up",
+      i: RUN_ALL_CELLS_ABOVE_ICON,
       m: "Run All Above Selected Cell",
       f: () => actions.frame_actions?.run_all_above(),
     },
 
     "run all cells below": {
-      i: "caret-down",
+      i: RUN_ALL_CELLS_BELOW_ICON,
+      ir: "90",
       m: "Run Selected Cell and All Below",
       f: () => actions.frame_actions?.run_all_below(),
     },

src/packages/frontend/jupyter/consts.ts

@@ -22,3 +22,6 @@ export const MINI_BUTTONS_STYLE_INNER: CSS = {
   borderRight: `1px solid ${COLORS.GRAY_L}`,
   borderRadius: "3px 3px 3px 0",
 } as const;
+
+export const RUN_ALL_CELLS_ABOVE_ICON = "vertical-align-bottom";
+export const RUN_ALL_CELLS_BELOW_ICON = "angle-double-right"; // and 90°

src/packages/frontend/jupyter/keyboard-shortcuts.tsx

@@ -18,18 +18,19 @@ import {
   A,
   Icon,
   IconName,
-  r_join,
   SearchInput,
+  r_join,
 } from "@cocalc/frontend/components";
+import { IconRotation } from "@cocalc/frontend/components/icon";
 import { JupyterEditorActions } from "@cocalc/frontend/frame-editors/jupyter-editor/actions";
 import useNotebookFrameActions from "@cocalc/frontend/frame-editors/jupyter-editor/cell-notebook/hook";
 import { ShowSupportLink } from "@cocalc/frontend/support";
 import { capitalize, copy_without, field_cmp, split } from "@cocalc/util/misc";
 import { JupyterActions } from "./browser-actions";
 import {
   CommandDescription,
-  commands as create_commands,
   KeyboardCommand,
+  commands as create_commands,
 } from "./commands";
 import { evt_to_obj, keyCode_to_chr } from "./keyboard";
 
@@ -298,17 +299,20 @@ interface CommandProps {
   name: string;
   desc: string;
   icon?: IconName;
+  iconRotate?: IconRotation;
   shortcuts: KeyboardCommand[];
   taken: string;
 }
 
 const Command: React.FC<CommandProps> = React.memo((props: CommandProps) => {
-  const { actions, name, desc, icon, shortcuts, taken } = props;
+  const { actions, name, desc, icon, iconRotate, shortcuts, taken } = props;
   const frameActions = useNotebookFrameActions();
   const [highlight, set_highlight] = useState<boolean>(false);
 
   function render_icon(): Rendered {
-    return <span>{icon ? <Icon name={icon} /> : undefined}</span>;
+    return (
+      <span>{icon ? <Icon name={icon} rotate={iconRotate} /> : undefined}</span>
+    );
   }
 
   function run_command() {
@@ -423,6 +427,7 @@ const CommandList: React.FC<CommandListProps> = React.memo(
             actions={actions}
             desc={desc}
             icon={icon}
+            iconRotate={x.val.ir}
             shortcuts={shortcuts}
             taken={taken[x.name]}
           />,

src/packages/frontend/jupyter/llm/cell-tool.tsx

@@ -409,9 +409,7 @@ export function LLMCellTool({
                     <Icon name={action.icon} /> {capitalize(mode)}
                   </Tooltip>
                 ),
-                onClick: () => {
-                  setMode(mode as Mode);
-                },
+                onClick: () => setMode(mode as Mode),
               };
             },
           ),