@marimo-team/frontend 0.14.18-dev5 → 0.14.18-dev51

package/src/components/editor/SortableCell.tsx

@@ -0,0 +1,161 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { DraggableAttributes } from "@dnd-kit/core";
+import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS, type Transform } from "@dnd-kit/utilities";
+import { GripVerticalIcon } from "lucide-react";
+import React, { memo, use } from "react";
+import type { CellId } from "@/core/cells/ids";
+import { cn } from "@/utils/cn";
+import { Events } from "@/utils/events";
+import { mergeRefs } from "@/utils/mergeRefs";
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  cellId: CellId;
+  canMoveX?: boolean;
+}
+
+/**
+ * Context for drag handle so it can be rendered in a Slot in the cell
+ */
+const DragHandleSlot = React.createContext<React.ReactNode>(null);
+
+export const CellDragHandle: React.FC = memo(() => {
+  // Slot for drag handle
+  return use(DragHandleSlot);
+});
+CellDragHandle.displayName = "DragHandle";
+
+function isTransformNoop(transform: Transform | null) {
+  if (!transform) {
+    return true;
+  }
+  return (
+    transform.x === 0 &&
+    transform.y === 0 &&
+    transform.scaleX === 1 &&
+    transform.scaleY === 1
+  );
+}
+
+export const SortableCell = React.forwardRef(
+  (
+    { cellId, canMoveX, ...props }: Props,
+    ref: React.ForwardedRef<HTMLDivElement>,
+  ) => {
+    // This hook re-renders every time _any_ cell is dragged,
+    // so we should avoid any expensive operations in this component
+    const {
+      attributes,
+      listeners,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging,
+    } = useSortable({ id: cellId.toString() });
+
+    // Perf:
+    // If the transform is a noop, keep it as null
+    const transformOrNull = isTransformNoop(transform) ? null : transform;
+    // If there is no transform, we don't need a transition
+    const transitionOrUndefined =
+      transformOrNull == null ? undefined : transition;
+
+    // Use a new component to avoid re-rendering when the cell is dragged
+    return (
+      <SortableCellInternal
+        ref={ref}
+        cellId={cellId}
+        canMoveX={canMoveX}
+        {...props}
+        attributes={attributes}
+        listeners={listeners}
+        setNodeRef={setNodeRef}
+        transform={transformOrNull}
+        transition={transitionOrUndefined}
+        isDragging={isDragging}
+      />
+    );
+  },
+);
+SortableCell.displayName = "SortableCell";
+
+interface SortableCellInternalProps extends Props {
+  children: React.ReactNode;
+  attributes: DraggableAttributes;
+  listeners: SyntheticListenerMap | undefined;
+  setNodeRef: (node: HTMLElement | null) => void;
+  transform: Transform | null;
+  transition: string | undefined;
+  isDragging: boolean;
+}
+
+const SortableCellInternal = React.forwardRef(
+  (
+    {
+      cellId,
+      canMoveX,
+      children,
+      attributes,
+      listeners,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging,
+      ...props
+    }: SortableCellInternalProps,
+    ref: React.ForwardedRef<HTMLDivElement>,
+  ) => {
+    const style: React.CSSProperties = {
+      transform: transform
+        ? CSS.Transform.toString({
+            x: canMoveX ? transform.x : 0,
+            y: transform.y,
+            scaleX: 1,
+            scaleY: 1,
+          })
+        : undefined,
+      transition,
+      zIndex: isDragging ? 2 : undefined,
+      position: "relative",
+    };
+
+    const dragHandle = (
+      <div
+        {...attributes}
+        {...listeners}
+        onMouseDown={Events.preventFocus}
+        data-testid="drag-button"
+        className="py-px cursor-grab opacity-50 hover:opacity-100 hover-action hover:bg-muted rounded border border-transparent hover:border-border active:bg-accent"
+      >
+        <GripVerticalIcon strokeWidth={1} size={20} />
+      </div>
+    );
+
+    const isMoving = Boolean(transform);
+
+    return (
+      <div
+        tabIndex={-1}
+        ref={(r) => {
+          mergeRefs<HTMLDivElement>(ref, setNodeRef)(r);
+        }}
+        {...props}
+        data-is-dragging={isDragging}
+        className={cn(
+          props.className,
+          isMoving && "is-moving",
+          "outline-hidden rounded-lg",
+        )}
+        style={style}
+      >
+        <DragHandleSlot.Provider value={dragHandle}>
+          {children}
+        </DragHandleSlot.Provider>
+      </div>
+    );
+  },
+);
+SortableCellInternal.displayName = "SortableCellInternal";

package/src/components/editor/__tests__/data-attributes.test.tsx

@@ -0,0 +1,173 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { render } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { beforeAll, describe, expect, it } from "vitest";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { notebookAtom } from "@/core/cells/cells";
+import type { CellId } from "@/core/cells/ids";
+import { createCellRuntimeState } from "@/core/cells/types";
+import type { UserConfig } from "@/core/config/config-schema";
+import type { OutputMessage } from "@/core/kernel/messages";
+import type { AppMode } from "@/core/mode";
+import { requestClientAtom } from "@/core/network/requests";
+import { Cell } from "../Cell";
+import { OutputArea } from "../Output";
+
+function createTestWrapper() {
+  const store = createStore();
+  store.set(requestClientAtom, MockRequestClient.create());
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+  return { wrapper, store };
+}
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {
+      // do nothing
+    }
+    unobserve() {
+      // do nothing
+    }
+    disconnect() {
+      // do nothing
+    }
+  };
+  global.HTMLDivElement.prototype.scrollIntoView = () => {
+    // do nothing
+  };
+});
+
+describe("Cell data attributes", () => {
+  it.each(["edit", "read", "present"])(
+    "should render cell with data-cell-id and data-cell-name in %s mode",
+    (mode) => {
+      const { store, wrapper } = createTestWrapper();
+      const cellId = "test" as CellId;
+      const cellName = "test_cell";
+
+      const userConfig: UserConfig = {
+        display: {
+          cell_output: "below",
+          code_editor_font_size: 14,
+          dataframes: "rich",
+          default_table_page_size: 10,
+          default_table_max_columns: 10,
+          default_width: "normal",
+          theme: "light",
+          reference_highlighting: false,
+        },
+        keymap: { preset: "default" },
+        completion: {
+          activate_on_typing: true,
+          copilot: false,
+        },
+        formatting: { line_length: 88 },
+        package_management: { manager: "pip" },
+        runtime: {
+          auto_instantiate: false,
+          default_sql_output: "native",
+          auto_reload: "off",
+          on_cell_change: "lazy",
+          watcher_on_save: "lazy",
+          reactive_tests: true,
+          output_max_bytes: 1_000_000,
+          std_stream_max_bytes: 1_000_000,
+          pythonpath: [],
+          dotenv: [".env"],
+        },
+        server: {
+          browser: "default",
+          follow_symlink: false,
+        },
+        save: { autosave: "off", autosave_delay: 1000, format_on_save: false },
+        ai: {},
+      } as UserConfig;
+
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId]: {
+            code: "",
+            name: cellName,
+            edited: false,
+            serializedEditorState: null,
+            config: {
+              disabled: false,
+              hide_code: false,
+              column: null,
+            },
+          },
+        },
+      });
+
+      notebook.cellRuntime[cellId] = createCellRuntimeState({
+        status: "idle",
+        output: null,
+        consoleOutputs: [],
+        interrupted: false,
+        errored: false,
+        stopped: false,
+        staleInputs: false,
+        runStartTimestamp: null,
+        lastRunStartTimestamp: null,
+        runElapsedTimeMs: null,
+        debuggerActive: false,
+        outline: null,
+      });
+
+      store.set(notebookAtom, notebook);
+
+      const { container } = render(
+        <TooltipProvider>
+          <Cell
+            cellId={cellId}
+            mode={mode as AppMode}
+            canDelete={true}
+            userConfig={userConfig}
+            isCollapsed={false}
+            collapseCount={0}
+            canMoveX={false}
+            theme="light"
+            showPlaceholder={false}
+          />
+        </TooltipProvider>,
+        { wrapper },
+      );
+
+      const cellElement = container.querySelector(`[data-cell-id="${cellId}"]`);
+      expect(cellElement).toBeTruthy();
+      expect(cellElement?.getAttribute("data-cell-name")).toBe(cellName);
+    },
+  );
+});
+
+describe("Output data attributes", () => {
+  it("should render output with data-cell-role", () => {
+    const cellId = "test" as CellId;
+    const output: OutputMessage = {
+      channel: "output",
+      mimetype: "text/plain",
+      data: "test output",
+      timestamp: 0,
+    };
+
+    const { container } = render(
+      <TooltipProvider>
+        <OutputArea
+          output={output}
+          cellId={cellId}
+          stale={false}
+          loading={false}
+          allowExpand={true}
+          className="test-output"
+        />
+      </TooltipProvider>,
+    );
+
+    const outputElement = container.querySelector('[data-cell-role="output"]');
+    expect(outputElement).toBeTruthy();
+  });
+});

package/src/components/editor/__tests__/dynamic-favicon.test.tsx

@@ -0,0 +1,183 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useCellErrors } from "@/core/cells/cells";
+import { DynamicFavicon } from "../dynamic-favicon";
+
+// Mock useCellErrors hook
+vi.mock("@/core/cells/cells", () => ({
+  useCellErrors: vi.fn(),
+}));
+
+describe("DynamicFavicon", () => {
+  let favicon: HTMLLinkElement;
+
+  beforeEach(() => {
+    // Mock favicon element
+    favicon = document.createElement("link");
+    favicon.rel = "icon";
+    favicon.href = "./favicon.ico";
+    document.head.append(favicon);
+
+    // Mock document.hasFocus
+    vi.spyOn(document, "hasFocus").mockReturnValue(true);
+
+    // Mock useCellErrors to return no errors by default
+    (useCellErrors as ReturnType<typeof vi.fn>).mockReturnValue([]);
+  });
+
+  afterEach(() => {
+    favicon.remove();
+    vi.clearAllMocks();
+    vi.useRealTimers();
+  });
+
+  it("should update favicon when running state changes", async () => {
+    render(<DynamicFavicon isRunning={true} />);
+
+    // Wait for async favicon update
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    const faviconElement =
+      document.querySelector<HTMLLinkElement>("link[rel~='icon']")!;
+    expect(faviconElement.href.endsWith("circle-play.ico")).toBe(true);
+  });
+
+  it("should show success favicon when run completes without errors", async () => {
+    const { rerender } = render(<DynamicFavicon isRunning={true} />);
+
+    // Wait for the running favicon to be set
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    rerender(<DynamicFavicon isRunning={false} />);
+
+    // Wait for async favicon update
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    const faviconElement =
+      document.querySelector<HTMLLinkElement>("link[rel~='icon']")!;
+    expect(faviconElement.href.endsWith("circle-check.ico")).toBe(true);
+  });
+
+  it("should show error favicon when run completes with errors", async () => {
+    (useCellErrors as ReturnType<typeof vi.fn>).mockReturnValue([
+      { error: "mock error" },
+    ]);
+
+    const { rerender } = render(<DynamicFavicon isRunning={true} />);
+
+    // Wait for the running favicon to be set
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    rerender(<DynamicFavicon isRunning={false} />);
+
+    // Wait for async favicon update
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    const faviconElement =
+      document.querySelector<HTMLLinkElement>("link[rel~='icon']")!;
+    expect(faviconElement.href.endsWith("circle-x.ico")).toBe(true);
+  });
+
+  it("should not reset favicon when not in focus", async () => {
+    vi.spyOn(document, "hasFocus").mockReturnValue(false);
+    vi.useFakeTimers();
+
+    const { rerender } = render(<DynamicFavicon isRunning={true} />);
+
+    // Wait for the running favicon to be set
+    await vi.advanceTimersByTimeAsync(0);
+
+    rerender(<DynamicFavicon isRunning={false} />);
+
+    // Wait for async favicon update
+    await vi.advanceTimersByTimeAsync(0);
+
+    const faviconElement =
+      document.querySelector<HTMLLinkElement>("link[rel~='icon']")!;
+    expect(faviconElement.href.endsWith("circle-check.ico")).toBe(true);
+
+    // Advance timers beyond the 3-second reset timeout
+    await vi.advanceTimersByTimeAsync(3000);
+
+    // Favicon should still be the success one since document is not in focus
+    expect(faviconElement.href.endsWith("circle-check.ico")).toBe(true);
+  });
+
+  it("should create favicon link if none exists", () => {
+    favicon.remove();
+    render(<DynamicFavicon isRunning={true} />);
+
+    const newFavicon = document.querySelector("link[rel~='icon']");
+    expect(newFavicon).not.toBeNull();
+  });
+
+  describe("notifications", () => {
+    beforeEach(() => {
+      vi.spyOn(document, "visibilityState", "get").mockReturnValue("hidden");
+      // @ts-expect-error ok in tests
+      global.Notification = vi.fn();
+      // @ts-expect-error ok in tests
+      global.Notification.permission = "granted";
+    });
+
+    it("should send success notification when run completes without errors", () => {
+      // @ts-expect-error ok in tests
+      global.Notification = vi.fn().mockImplementation((title, options) => {
+        expect(title).toBe("Execution completed");
+        expect(options).toEqual({
+          body: "Your notebook run completed successfully.",
+          icon: "/src/assets/circle-check.ico",
+        });
+      });
+      // @ts-expect-error ok in tests
+      global.Notification.permission = "granted";
+
+      const { rerender } = render(<DynamicFavicon isRunning={true} />);
+      rerender(<DynamicFavicon isRunning={false} />);
+    });
+
+    it("should send error notification when run completes with errors", () => {
+      (useCellErrors as ReturnType<typeof vi.fn>).mockReturnValue([
+        { error: "mock error" },
+      ]);
+
+      // @ts-expect-error ok in tests
+      global.Notification = vi.fn().mockImplementation((title, options) => {
+        expect(title).toBe("Execution failed");
+        expect(options).toEqual({
+          body: "Your notebook run encountered 1 error(s).",
+          icon: "/src/assets/circle-x.ico",
+        });
+      });
+      // @ts-expect-error ok in tests
+      global.Notification.permission = "granted";
+
+      const { rerender } = render(<DynamicFavicon isRunning={true} />);
+      rerender(<DynamicFavicon isRunning={false} />);
+    });
+
+    it("should not send notification when document is visible", () => {
+      vi.spyOn(document, "visibilityState", "get").mockReturnValue("visible");
+      const { rerender } = render(<DynamicFavicon isRunning={true} />);
+      rerender(<DynamicFavicon isRunning={false} />);
+
+      expect(Notification).not.toHaveBeenCalled();
+    });
+
+    it("should request permission if not granted", () => {
+      // @ts-expect-error ok in tests
+      global.Notification.permission = "default";
+      global.Notification.requestPermission = vi
+        .fn()
+        .mockResolvedValue("granted");
+
+      const { rerender } = render(<DynamicFavicon isRunning={true} />);
+      rerender(<DynamicFavicon isRunning={false} />);
+
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      expect(Notification.requestPermission).toHaveBeenCalled();
+    });
+  });
+});

package/src/components/editor/actions/name-cell-input.tsx

@@ -0,0 +1,137 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import React, { useRef, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Tooltip } from "@/components/ui/tooltip";
+import { getCellNames, useCellActions } from "@/core/cells/cells";
+import type { CellId } from "@/core/cells/ids";
+import {
+  getValidName,
+  isInternalCellName,
+  normalizeName,
+} from "@/core/cells/names";
+import { useOnMount } from "@/hooks/useLifecycle";
+import { cn } from "@/utils/cn";
+import { Events } from "@/utils/events";
+
+interface Props
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  value: string;
+  onChange: (newName: string) => void;
+  placeholder?: string;
+}
+
+export const NameCellInput: React.FC<Props> = ({
+  value,
+  onChange,
+  placeholder,
+  ...props
+}) => {
+  const ref = useRef<HTMLInputElement>(null);
+  const inputProps = useCellNameInput(value, onChange);
+
+  // Custom onBlur without React's synthetic events
+  // See https://github.com/facebook/react/issues/12363
+  useOnMount(() => {
+    const onBlur = inputProps.onBlur;
+    const input = ref.current;
+    if (!input) {
+      return;
+    }
+
+    input.addEventListener("blur", onBlur);
+    return () => {
+      input.removeEventListener("blur", onBlur);
+    };
+  });
+
+  return (
+    <Input
+      data-testid="cell-name-input"
+      value={inputProps.value}
+      onChange={inputProps.onChange}
+      ref={ref}
+      placeholder={placeholder}
+      className="shadow-none! hover:shadow-none focus:shadow-none focus-visible:shadow-none"
+      onKeyDown={Events.onEnter(Events.stopPropagation())}
+      {...props}
+    />
+  );
+};
+
+export const NameCellContentEditable: React.FC<{
+  cellId: CellId;
+  value: string;
+  className: string;
+}> = ({ value, cellId, className }) => {
+  const { updateCellName } = useCellActions();
+  const inputProps = useCellNameInput(value, (newName) =>
+    updateCellName({ cellId, name: newName }),
+  );
+
+  // If the name is the default, don't render the content editable
+  if (isInternalCellName(value)) {
+    return null;
+  }
+
+  return (
+    <Tooltip content="Click to rename">
+      <span
+        className={cn(
+          "outline-hidden border hover:border-cyan-500/40 focus:border-cyan-500/40",
+          className,
+        )}
+        contentEditable={true}
+        suppressContentEditableWarning={true}
+        onChange={inputProps.onChange}
+        onBlur={inputProps.onBlur}
+        onKeyDown={Events.onEnter((e) => {
+          if (e.target instanceof HTMLElement) {
+            e.target.blur();
+          }
+        })}
+      >
+        {value}
+      </span>
+    </Tooltip>
+  );
+};
+
+function useCellNameInput(value: string, onChange: (newName: string) => void) {
+  const [internalValue, setInternalValue] = useState(value);
+
+  const commit = (newValue: string) => {
+    // No change
+    if (newValue === value) {
+      return;
+    }
+
+    // Empty
+    if (!newValue || isInternalCellName(newValue)) {
+      onChange(newValue);
+      return;
+    }
+
+    // Get unique name
+    const validName = getValidName(newValue, getCellNames());
+    onChange(validName);
+  };
+
+  return {
+    value: isInternalCellName(internalValue) ? "" : internalValue,
+    onChange: (evt: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = evt.target.value;
+      const normalized = normalizeName(newValue);
+      setInternalValue(normalized);
+    },
+    onBlur: (evt: Pick<Event, "target">) => {
+      if (evt.target instanceof HTMLInputElement) {
+        const newValue = evt.target.value;
+        commit(normalizeName(newValue));
+      } else if (evt.target instanceof HTMLSpanElement) {
+        const newValue = evt.target.innerText.trim();
+        commit(normalizeName(newValue));
+      }
+    },
+  };
+}

package/src/components/editor/actions/types.ts

@@ -0,0 +1,53 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import type { HotkeyAction } from "@/core/hotkeys/hotkeys";
+
+/**
+ * Shared interface to render a user action in the editor.
+ * This can be in a dropdown menu, context menu, or toolbar.
+ */
+export interface ActionButton {
+  label: string;
+  labelElement?: React.ReactNode;
+  description?: string;
+  disabled?: boolean;
+  tooltip?: React.ReactNode;
+  variant?: "danger" | "muted" | "disabled";
+  disableClick?: boolean;
+  icon?: React.ReactElement;
+  hidden?: boolean;
+  rightElement?: React.ReactNode;
+  hotkey?: HotkeyAction;
+  handle: (event?: Event) => void;
+  /**
+   * Special handler for headless contexts: e.g. a command palette.
+   */
+  handleHeadless?: (event?: Event) => void;
+  divider?: boolean;
+  dropdown?: ActionButton[];
+}
+
+export function isParentAction(
+  action: ActionButton,
+): action is ActionButton & { dropdown: ActionButton[] } {
+  return action.dropdown !== undefined;
+}
+
+/**
+ * Flattens all actions into a single array.
+ * Any parent actions will be removed, but their labels will be prepended to the child actions.
+ */
+export function flattenActions(
+  actions: ActionButton[],
+  prevLabel = "",
+): ActionButton[] {
+  return actions.flatMap((action) => {
+    // If label is empty, hide
+    if (!action.label) {
+      return [];
+    }
+    if (isParentAction(action)) {
+      return flattenActions(action.dropdown, `${prevLabel + action.label} > `);
+    }
+    return { ...action, label: prevLabel + action.label };
+  });
+}