@marimo-team/frontend 0.14.18-dev3 → 0.14.18-dev31

package/src/components/editor/renderers/vertical-layout/useFocusFirstEditor.ts

@@ -0,0 +1,107 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { getNotebook } from "@/core/cells/cells";
+import type { CellId } from "@/core/cells/ids";
+import { useOnMount } from "@/hooks/useLifecycle";
+import { extractCellNameFromHash } from "@/utils/cell-urls";
+import { Logger } from "@/utils/Logger";
+
+/**
+ * Focus the first editor.
+ *
+ * If the URL contains a /#scrollTo= hash, focus on that cell.
+ * Otherwise, focus on the first non-hidden cell.
+ */
+export function useFocusFirstEditor() {
+  useOnMount(() => {
+    const delay = 100; // ms just so its not immediate
+
+    const timeout = setTimeout(() => {
+      // Let the DOM render
+      requestAnimationFrame(() => {
+        // Check if the URL contains a scrollTo parameter
+        const hash = window.location.hash;
+        const cellName = extractCellNameFromHash(hash);
+
+        if (cellName) {
+          // If we have a scrollTo parameter, focus on that cell
+          focusCellByName(cellName);
+        } else {
+          // Otherwise focus on the first cell
+          try {
+            focusFirstEditor();
+          } catch (error) {
+            Logger.warn("Error focusing first editor", error);
+          }
+        }
+      });
+    }, delay);
+
+    return () => clearTimeout(timeout);
+    // Delay only when app is first loaded
+  });
+}
+
+function focusFirstEditor() {
+  const { cellIds, cellData, cellHandles } = getNotebook();
+
+  // Focus on the first cell if it's been mounted and is not hidden
+  for (const cellId of cellIds.iterateTopLevelIds) {
+    const handle = cellHandles[cellId];
+    const hidden = cellData[cellId]?.config.hide_code;
+    if (!hidden && handle?.current?.editorView) {
+      handle.current.editorView.focus();
+      return;
+    }
+  }
+}
+
+let hasScrolledToCell = false;
+
+/**
+ * Focus the cell with the given name
+ */
+function focusCellByName(cellName: string) {
+  // Only do this once per page load
+  if (hasScrolledToCell) {
+    return;
+  }
+
+  // Find the cell div with data-cell-name attribute matching the cellName
+  const cellElement = document.querySelector(`[data-cell-name="${cellName}"]`);
+
+  if (cellElement) {
+    // Scroll the element into view
+    cellElement.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+    });
+
+    hasScrolledToCell = true;
+
+    // Try to focus the cell
+    if (cellElement instanceof HTMLElement) {
+      cellElement.focus();
+
+      // Look for an editor to focus
+      const { cellHandles } = getNotebook();
+      const cellId = cellElement.dataset.cellId as CellId | undefined;
+
+      if (!cellId) {
+        Logger.error(`Missing cellId for cell with name ${cellName}`);
+        return;
+      }
+
+      const editor = cellHandles[cellId]?.current?.editorView;
+      if (editor) {
+        editor.focus();
+      }
+    }
+  } else {
+    Logger.warn(
+      `Cannot focus cell with name ${cellName} because it was not found`,
+    );
+    // Fall back to focusing the first editor if cell not found
+    focusFirstEditor();
+  }
+}

package/src/components/editor/renderers/vertical-layout/vertical-layout-wrapper.tsx

@@ -0,0 +1,46 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import type { PropsWithChildren } from "react";
+import type { AppConfig } from "@/core/config/config-schema";
+import { cn } from "@/utils/cn";
+
+interface Props {
+  className?: string;
+  innerClassName?: string;
+  appConfig: AppConfig;
+  invisible?: boolean;
+}
+
+export const VerticalLayoutWrapper: React.FC<PropsWithChildren<Props>> = ({
+  invisible,
+  appConfig,
+  className,
+  children,
+  innerClassName,
+}) => {
+  return (
+    <div
+      className={cn(
+        "px-1 sm:px-16 md:px-20 xl:px-24 print:px-0 print:pb-0",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          // Large mobile bottom padding due to mobile browser navigation bar
+          "m-auto pb-24 sm:pb-12",
+          appConfig.width === "compact" &&
+            "max-w-(--content-width) min-w-[400px]",
+          appConfig.width === "medium" &&
+            "max-w-(--content-width-medium) min-w-[400px]",
+          appConfig.width === "columns" && "w-fit",
+          appConfig.width === "full" && "max-w-full",
+          // Hide the cells for a fake loading effect, to avoid flickering
+          invisible && "invisible",
+          innerClassName,
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -0,0 +1,451 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import {
+  Check,
+  Code2Icon,
+  FolderDownIcon,
+  ImageIcon,
+  MoreHorizontalIcon,
+} from "lucide-react";
+import type React from "react";
+import { memo, useRef, useState } from "react";
+import { z } from "zod";
+import { ReadonlyCode } from "@/components/editor/code/readonly-python-code";
+import { OutputArea } from "@/components/editor/Output";
+import { ConsoleOutput } from "@/components/editor/output/ConsoleOutput";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
+import type { CellId } from "@/core/cells/ids";
+import { isOutputEmpty } from "@/core/cells/outputs";
+import type { CellData, CellRuntimeState } from "@/core/cells/types";
+import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
+import { useResolvedMarimoConfig } from "@/core/config/config";
+import { KnownQueryParams } from "@/core/constants";
+import type { OutputMessage } from "@/core/kernel/messages";
+import { showCodeInRunModeAtom } from "@/core/meta/state";
+import { isErrorMime } from "@/core/mime";
+import { type AppMode, kioskModeAtom } from "@/core/mode";
+import type { CellConfig } from "@/core/network/types";
+import { downloadAsHTML } from "@/core/static/download-html";
+import { isStaticNotebook } from "@/core/static/static-state";
+import { isWasm } from "@/core/wasm/utils";
+import { cn } from "@/utils/cn";
+import { downloadHTMLAsImage } from "@/utils/download";
+import { FloatingOutline } from "../../chrome/panels/outline/floating-outline";
+import { cellDomProps } from "../../common";
+import type { ICellRendererPlugin, ICellRendererProps } from "../types";
+import { useDelayVisibility } from "./useDelayVisibility";
+import { VerticalLayoutWrapper } from "./vertical-layout-wrapper";
+
+type VerticalLayout = null;
+type VerticalLayoutProps = ICellRendererProps<VerticalLayout>;
+
+const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
+  cells,
+  appConfig,
+  mode,
+}) => {
+  const { invisible } = useDelayVisibility(cells.length, mode);
+  const kioskMode = useAtomValue(kioskModeAtom);
+  const [userConfig] = useResolvedMarimoConfig();
+  const showCodeInRunModePreference = useAtomValue(showCodeInRunModeAtom);
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const [showCode, setShowCode] = useState(() => {
+    // Check if the setting was set in the mount options
+    if (!showCodeInRunModePreference) {
+      return false;
+    }
+    // If 'auto' or not found, use URL param
+    // If url param is not set, we default to true for static notebooks, wasm notebooks, and kiosk mode
+    const showCodeByQueryParam = urlParams.get(KnownQueryParams.showCode);
+    return showCodeByQueryParam === null
+      ? isStaticNotebook() || isWasm() || kioskMode
+      : showCodeByQueryParam === "true";
+  });
+
+  const evaluateCanShowCode = () => {
+    const cellsHaveCode = cells.some((cell) => Boolean(cell.code));
+
+    if (kioskMode) {
+      return true;
+    }
+
+    // Only show code if in read mode and there is at least one cell with code
+
+    // If it is a static-notebook or wasm-read-only-notebook, code is always included,
+    // but it can be turned it off via a query parameter (include-code=false)
+
+    const includeCode = urlParams.get(KnownQueryParams.includeCode);
+    return mode === "read" && includeCode !== "false" && cellsHaveCode;
+  };
+
+  const canShowCode = evaluateCanShowCode();
+
+  const renderCell = (cell: CellRuntimeState & CellData) => {
+    return (
+      <VerticalCell
+        key={cell.id}
+        cellId={cell.id}
+        output={cell.output}
+        consoleOutputs={cell.consoleOutputs}
+        status={cell.status}
+        code={cell.code}
+        config={cell.config}
+        cellOutputArea={userConfig.display.cell_output}
+        stopped={cell.stopped}
+        showCode={showCode && canShowCode}
+        errored={cell.errored}
+        mode={mode}
+        runStartTimestamp={cell.runStartTimestamp}
+        interrupted={cell.interrupted}
+        staleInputs={cell.staleInputs}
+        name={cell.name}
+        kiosk={kioskMode}
+      />
+    );
+  };
+
+  const renderCells = () => {
+    if (appConfig.width === "columns") {
+      const sortedColumns = groupCellsByColumn(cells);
+      return (
+        <div className="flex flex-row gap-8 w-full">
+          {sortedColumns.map(([columnIndex, columnCells]) => (
+            <div
+              key={columnIndex}
+              className="flex-1 flex flex-col gap-2 w-(--content-width)"
+            >
+              {columnCells.map(renderCell)}
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    if (cells.length === 0 && !invisible) {
+      return (
+        <div className="flex-1 flex flex-col items-center justify-center py-8">
+          <Alert variant="info">
+            <AlertTitle>Empty Notebook</AlertTitle>
+            <AlertDescription>
+              This notebook has no code or outputs.
+            </AlertDescription>
+          </Alert>
+        </div>
+      );
+    }
+
+    return <>{cells.map(renderCell)}</>;
+  };
+
+  // in read mode (required for canShowCode to be true), we need to insert
+  // spacing between cells to prevent them from colliding; in edit mode,
+  // spacing is handled elsewhere
+  return (
+    <VerticalLayoutWrapper invisible={invisible} appConfig={appConfig}>
+      {showCode && canShowCode ? (
+        <div className="flex flex-col gap-5"> {renderCells()}</div>
+      ) : (
+        renderCells()
+      )}
+      {mode === "read" && (
+        <ActionButtons
+          canShowCode={canShowCode}
+          showCode={showCode}
+          onToggleShowCode={() => setShowCode((v) => !v)}
+        />
+      )}
+      <FloatingOutline />
+    </VerticalLayoutWrapper>
+  );
+};
+
+const ActionButtons: React.FC<{
+  canShowCode: boolean;
+  showCode: boolean;
+  onToggleShowCode: () => void;
+}> = ({ canShowCode, showCode, onToggleShowCode }) => {
+  const handleDownloadAsPNG = async () => {
+    const app = document.getElementById("App");
+    if (!app) {
+      return;
+    }
+    await downloadHTMLAsImage(app, document.title);
+  };
+
+  const handleDownloadAsHTML = async () => {
+    const app = document.getElementById("App");
+    if (!app) {
+      return;
+    }
+    await downloadAsHTML({ filename: document.title, includeCode: true });
+  };
+
+  const isStatic = isStaticNotebook();
+  const actions: React.ReactNode[] = [];
+
+  if (canShowCode) {
+    actions.push(
+      <DropdownMenuItem
+        onSelect={onToggleShowCode}
+        id="notebook-action-show-code"
+        key="show-code"
+      >
+        <Code2Icon className="mr-2" size={14} strokeWidth={1.5} />
+        <span className="flex-1">Show code</span>
+        {showCode && <Check className="h-4 w-4" />}
+      </DropdownMenuItem>,
+      <DropdownMenuSeparator key="show-code-separator" />,
+    );
+  }
+
+  if (!isStatic) {
+    actions.push(
+      <DropdownMenuItem
+        onSelect={handleDownloadAsHTML}
+        id="notebook-action-download-html"
+        key="download-html"
+      >
+        <FolderDownIcon className="mr-2" size={14} strokeWidth={1.5} />
+        Download as HTML
+      </DropdownMenuItem>,
+      <DropdownMenuSeparator key="download-html-separator" />,
+      <DropdownMenuItem
+        onSelect={handleDownloadAsPNG}
+        id="notebook-action-download-png"
+        key="download-png"
+      >
+        <ImageIcon className="mr-2" size={14} strokeWidth={1.5} />
+        Download as PNG
+      </DropdownMenuItem>,
+    );
+  }
+
+  if (actions.length === 0) {
+    return null;
+  }
+
+  // Don't change the id of this element
+  // as this may be used in custom css to hide/show the actions dropdown
+  return (
+    <div
+      id="notebook-actions-dropdown"
+      className={cn(
+        "right-0 top-0 z-50 m-4 no-print flex gap-2 print:hidden",
+        // If the notebook is static, we have a banner at the top, so
+        // we can't use fixed positioning. Ideally this is sticky, but the
+        // current dom structure makes that difficult.
+        isStaticNotebook() ? "absolute" : "fixed",
+      )}
+    >
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild={true}>
+          <Button variant="secondary" size="xs">
+            <MoreHorizontalIcon className="w-4 h-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="no-print w-[220px]">
+          {actions}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+interface VerticalCellProps
+  extends Pick<
+    CellRuntimeState,
+    | "output"
+    | "consoleOutputs"
+    | "status"
+    | "stopped"
+    | "errored"
+    | "interrupted"
+    | "staleInputs"
+    | "runStartTimestamp"
+  > {
+  cellOutputArea: "above" | "below";
+  cellId: CellId;
+  config: CellConfig;
+  code: string;
+  mode: AppMode;
+  showCode: boolean;
+  name: string;
+  kiosk: boolean;
+}
+
+const VerticalCell = memo(
+  ({
+    output,
+    consoleOutputs,
+    cellOutputArea,
+    cellId,
+    status,
+    stopped,
+    errored,
+    config,
+    interrupted,
+    staleInputs,
+    runStartTimestamp,
+    code,
+    showCode,
+    mode,
+    name,
+    kiosk,
+  }: VerticalCellProps) => {
+    const cellRef = useRef<HTMLDivElement>(null);
+
+    const outputStale = outputIsStale(
+      {
+        status,
+        output,
+        interrupted,
+        runStartTimestamp,
+        staleInputs,
+      },
+      false,
+    );
+    const loading = outputIsLoading(status);
+
+    // Kiosk and not presenting
+    const kioskFull = kiosk && mode !== "present";
+
+    const isPureMarkdown = new MarkdownLanguageAdapter().isSupported(code);
+    const published = !showCode && !kioskFull;
+    const className = cn(
+      "marimo-cell",
+      "hover-actions-parent empty:invisible",
+      {
+        published: published,
+        interactive: mode === "edit",
+        "has-error": errored,
+        stopped: stopped,
+        borderless: isPureMarkdown && !published,
+      },
+    );
+
+    // Read mode and show code
+    if ((mode === "read" && showCode) || kioskFull) {
+      const outputArea = (
+        <OutputArea
+          allowExpand={true}
+          output={output}
+          className="output-area"
+          cellId={cellId}
+          stale={outputStale}
+          loading={loading}
+        />
+      );
+
+      // Hide the code if it's pure markdown and there's an output, or if the code is empty
+      const hideCode = shouldHideCode(code, output);
+
+      return (
+        <div
+          tabIndex={-1}
+          ref={cellRef}
+          className={className}
+          {...cellDomProps(cellId, name)}
+        >
+          {cellOutputArea === "above" && outputArea}
+          {!hideCode && (
+            <div className="tray">
+              <ReadonlyCode
+                initiallyHideCode={config.hide_code || kiosk}
+                code={code}
+              />
+            </div>
+          )}
+          {cellOutputArea === "below" && outputArea}
+          <ConsoleOutput
+            consoleOutputs={consoleOutputs}
+            stale={outputStale}
+            cellName={name}
+            onSubmitDebugger={() => null}
+            cellId={cellId}
+            debuggerActive={false}
+          />
+        </div>
+      );
+    }
+
+    const outputIsError = isErrorMime(output?.mimetype);
+    const hidden = errored || interrupted || stopped || outputIsError;
+    if (hidden) {
+      return null;
+    }
+
+    return (
+      <div
+        tabIndex={-1}
+        ref={cellRef}
+        className={className}
+        {...cellDomProps(cellId, name)}
+      >
+        <OutputArea
+          allowExpand={mode === "edit"}
+          output={output}
+          className="output-area"
+          cellId={cellId}
+          stale={outputStale}
+          loading={loading}
+        />
+      </div>
+    );
+  },
+);
+VerticalCell.displayName = "VerticalCell";
+
+export const VerticalLayoutPlugin: ICellRendererPlugin<
+  VerticalLayout,
+  VerticalLayout
+> = {
+  type: "vertical",
+  name: "Vertical",
+  validator: z.any(),
+  Component: VerticalLayoutRenderer,
+  deserializeLayout: (serialized) => serialized,
+  serializeLayout: (layout) => layout,
+  getInitialLayout: () => null,
+};
+
+export function groupCellsByColumn(
+  cells: Array<CellRuntimeState & CellData>,
+): Array<[number, Array<CellRuntimeState & CellData>]> {
+  // Group cells by column
+  const cellsByColumn = new Map<number, Array<CellRuntimeState & CellData>>();
+  let lastSeenColumn = 0;
+  cells.forEach((cell) => {
+    const column = cell.config.column ?? lastSeenColumn;
+    lastSeenColumn = column;
+    if (!cellsByColumn.has(column)) {
+      cellsByColumn.set(column, []);
+    }
+    cellsByColumn.get(column)?.push(cell);
+  });
+
+  // Sort columns by index
+  return [...cellsByColumn.entries()].sort(([a], [b]) => a - b);
+}
+
+/**
+ * Determine if the code should be hidden.
+ *
+ * This is used to hide the code if it's pure markdown and there's an output,
+ * or if the code is empty.
+ */
+export function shouldHideCode(code: string, output: OutputMessage | null) {
+  const isPureMarkdown = new MarkdownLanguageAdapter().isSupported(code);
+  const hasOutput = output !== null && !isOutputEmpty(output);
+  return (isPureMarkdown && hasOutput) || code.trim() === "";
+}

package/src/components/editor/stdin-blocking-alert.tsx

@@ -0,0 +1,83 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { atom, useAtomValue } from "jotai";
+import { notebookAtom } from "@/core/cells/cells";
+import { Banner } from "@/plugins/impl/common/error-banner";
+import { Logger } from "@/utils/Logger";
+import { Button } from "../ui/button";
+import { Kbd } from "../ui/kbd";
+import { DelayMount } from "../utils/delay-mount";
+
+// Atom to check if there is a cell with unresolved stdin
+const hasBlockingStdinAtom = atom((get) => {
+  const notebook = get(notebookAtom);
+
+  // Check each cell in order
+  for (const cellId of notebook.cellIds.inOrderIds) {
+    // Check if the cell is idle and has unresolved stdin
+    const runtime = notebook.cellRuntime[cellId];
+    if (runtime.status === "idle") {
+      const hasUnresolvedStdin = runtime.consoleOutputs.some(
+        (output) => output.channel === "stdin" && output.response === undefined,
+      );
+      if (hasUnresolvedStdin) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+});
+
+export const StdinBlockingAlert: React.FC = () => {
+  const hasBlockingStdin = useAtomValue(hasBlockingStdinAtom);
+
+  const handleJumpToStdin = () => {
+    const el = document.querySelector<HTMLElement>("[data-stdin-blocking]");
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+      requestAnimationFrame(() => {
+        el.focus();
+      });
+    } else {
+      Logger.error("No element with data-stdin-blocking found");
+    }
+  };
+
+  if (!hasBlockingStdin) {
+    return null;
+  }
+
+  const body = (
+    <div className="flex flex-col gap-4 mb-5 fixed top-5 left-1/2 transform -translate-x-1/2 z-200 opacity-95">
+      <Banner
+        kind="info"
+        className="flex flex-col rounded py-2 px-4 animate-in slide-in-from-top w-fit"
+      >
+        <div className="flex justify-between">
+          <span className="font-bold text-lg flex items-center mb-1">
+            Program waiting for input
+          </span>
+        </div>
+        <div className="flex flex-col gap-4 justify-between items-start text-muted-foreground text-base">
+          <div>
+            <p>
+              The program is still running, but blocked on{" "}
+              <Kbd className="inline">stdin</Kbd>.
+              <Button
+                variant="link"
+                className="h-auto font-normal"
+                onClick={handleJumpToStdin}
+              >
+                Jump to the cell
+              </Button>
+            </p>
+          </div>
+        </div>
+      </Banner>
+    </div>
+  );
+
+  // Delay the mount to avoid flickering
+  return <DelayMount milliseconds={2000}>{body}</DelayMount>;
+};

package/src/components/export/export-output-button.tsx

@@ -0,0 +1,14 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { type CellId, CellOutputId } from "@/core/cells/ids";
+import { downloadHTMLAsImage } from "@/utils/download";
+
+export function downloadCellOutput(cellId: CellId) {
+  const output = document.getElementById(CellOutputId.create(cellId));
+  if (output) {
+    output.classList.add("printing-output");
+    downloadHTMLAsImage(output, "result.png").finally(() => {
+      output.classList.remove("printing-output");
+    });
+  }
+}