@marimo-team/frontend 0.14.18-dev9 → 0.15.0

package/src/components/editor/renderers/grid-layout/plugin.tsx

@@ -0,0 +1,146 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { z } from "zod";
+import type { CellId } from "@/core/cells/ids";
+import { Logger } from "@/utils/Logger";
+import { Maps } from "@/utils/maps";
+import type { ICellRendererPlugin } from "../types";
+import { GridLayoutRenderer } from "./grid-layout";
+import type {
+  GridLayout,
+  GridLayoutCellSide,
+  SerializedGridLayout,
+  SerializedGridLayoutCell,
+} from "./types";
+
+/**
+ * Plugin definition for the grid layout.
+ */
+
+export const GridLayoutPlugin: ICellRendererPlugin<
+  SerializedGridLayout,
+  GridLayout
+> = {
+  type: "grid",
+  name: "Grid",
+
+  validator: z.object({
+    columns: z.number().min(1),
+    rowHeight: z.number().min(1),
+    maxWidth: z.number().optional(),
+    bordered: z.boolean().optional(),
+    cells: z.array(
+      z.object({
+        position: z
+          .tuple([z.number(), z.number(), z.number(), z.number()])
+          .nullable(),
+        scrollable: z.boolean().optional(),
+        alignment: z.enum(["top", "bottom", "left", "right"]).optional(),
+      }),
+    ),
+  }),
+
+  deserializeLayout: (serialized, cells): GridLayout => {
+    if (serialized.cells.length === 0) {
+      return {
+        columns: serialized.columns,
+        rowHeight: serialized.rowHeight,
+        scrollableCells: new Set(),
+        cellSide: new Map(),
+        cells: [],
+      };
+    }
+
+    if (serialized.cells.length !== cells.length) {
+      Logger.warn(
+        "Number of cells in layout does not match number of cells in notebook",
+      );
+    }
+
+    const scrollableCells = new Set<CellId>();
+    const cellSide = new Map<CellId, GridLayoutCellSide>();
+
+    const cellLayouts = serialized.cells.flatMap((cellLayout, idx) => {
+      const position = cellLayout.position;
+      if (!position) {
+        return [];
+      }
+      const cell = cells[idx];
+      if (!cell) {
+        return [];
+      }
+      if (cellLayout.scrollable) {
+        scrollableCells.add(cell.id);
+      }
+      if (cellLayout.side) {
+        cellSide.set(cell.id, cellLayout.side);
+      }
+
+      return {
+        i: cell.id,
+        x: position[0],
+        y: position[1],
+        w: position[2],
+        h: position[3],
+      };
+    });
+
+    return {
+      // Grid config
+      columns: serialized.columns,
+      rowHeight: serialized.rowHeight,
+      maxWidth: serialized.maxWidth,
+      bordered: serialized.bordered,
+      // Cell config
+      cells: cellLayouts,
+      cellSide: cellSide,
+      scrollableCells: scrollableCells,
+    };
+  },
+
+  serializeLayout: (layout, cells): SerializedGridLayout => {
+    const layoutsByKey = Maps.keyBy(layout.cells, (cell) => cell.i);
+    const serializedCells: SerializedGridLayoutCell[] = cells.map((cell) => {
+      const cellLayout = layoutsByKey.get(cell.id);
+      if (!cellLayout) {
+        return {
+          position: null,
+        };
+      }
+      const out: SerializedGridLayoutCell = {
+        position: [cellLayout.x, cellLayout.y, cellLayout.w, cellLayout.h],
+      };
+      if (layout.scrollableCells.has(cell.id)) {
+        out.scrollable = true;
+      }
+      if (layout.cellSide.has(cell.id)) {
+        out.side = layout.cellSide.get(cell.id);
+      }
+      return out;
+    });
+
+    return {
+      // Grid config
+      columns: layout.columns,
+      rowHeight: layout.rowHeight,
+      maxWidth: layout.maxWidth,
+      bordered: layout.bordered,
+      // Cell config
+      cells: serializedCells,
+    };
+  },
+
+  Component: GridLayoutRenderer,
+
+  getInitialLayout: () => ({
+    // Grid config
+    columns: 24,
+    rowHeight: 20,
+    maxWidth: 1400,
+    bordered: true,
+    // Cell config
+    scrollableCells: new Set(),
+    cellSide: new Map(),
+    cells: [],
+  }),
+};

package/src/components/editor/renderers/grid-layout/styles.css

@@ -0,0 +1,31 @@
+.react-grid-item.react-grid-placeholder {
+  background-color: var(--grass-9);
+}
+
+.react-resizable-handle {
+  visibility: hidden;
+}
+
+.react-grid-item:hover .react-resizable-handle {
+  visibility: visible;
+}
+
+.dark .react-grid-item > .react-resizable-handle::after {
+  border-right: 2px solid rgba(255, 255, 255, 0.5);
+  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
+}
+
+.disable-animation .react-grid-item {
+  transition: none !important;
+  transition-property: none !important;
+}
+
+/* for images we expand the image to fill the grid item */
+.react-grid-item .output img {
+  height: 100%;
+  object-fit: contain;
+}
+
+#App.grid-bordered {
+  background-color: var(--slate-1);
+}

package/src/components/editor/renderers/grid-layout/types.ts

@@ -0,0 +1,89 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { CellId } from "@/core/cells/ids";
+
+/**
+ * The serialized form of a grid layout.
+ * This must be backwards-compatible as it is stored on the user's disk.
+ */
+export interface SerializedGridLayout {
+  /**
+   * The number of columns.
+   * @default 12
+   *
+   * This is currently hardcoded and not settable by the user.
+   * In future, we may want to allow the user to set this.
+   */
+  columns: number;
+
+  /**
+   * The height of a row, in pixels.
+   *
+   * This is currently hardcoded and not settable by the user.
+   * In future, we may want to allow the user to set this.
+   */
+  rowHeight: number;
+
+  /**
+   * The max-width of the grid layout.
+   */
+  maxWidth?: number;
+
+  /**
+   * The cells in the layout.
+   * Cells don't have IDs at rest but are indexed based.
+   *
+   * Once we load the layout, we assign IDs to the cells so that we can
+   * track as they move around.
+   */
+  cells: SerializedGridLayoutCell[];
+
+  /**
+   * Bordered grid
+   */
+  bordered?: boolean;
+}
+
+export interface SerializedGridLayoutCell {
+  /**
+   * The cell position, as [x, y, w, h].
+   * If null, the cell is not in the layout.
+   */
+  position: SerializedGridLayoutCellPosition | null;
+
+  /**
+   * True if the cell is scrollable.
+   */
+  scrollable?: boolean;
+
+  /**
+   * The cell's alignment.
+   */
+  side?: GridLayoutCellSide;
+}
+
+export type GridLayoutCellSide = "top" | "left" | "right" | "bottom";
+
+export interface GridLayout extends Omit<SerializedGridLayout, "cells"> {
+  /**
+   * The cells in the layout.
+   */
+  cells: Array<{
+    i: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  }>;
+
+  scrollableCells: Set<CellId>;
+
+  cellSide: Map<CellId, GridLayoutCellSide>;
+}
+
+export type SerializedGridLayoutCellPosition = [
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+];

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

@@ -0,0 +1,86 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { startCase } from "lodash-es";
+import {
+  Grid3x3Icon,
+  ListIcon,
+  PresentationIcon,
+  SquareIcon,
+} from "lucide-react";
+import type React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { getFeatureFlag } from "@/core/config/feature-flag";
+import { useLayoutActions, useLayoutState } from "@/core/layout/layout";
+import { isWasm } from "@/core/wasm/utils";
+import { logNever } from "@/utils/assertNever";
+import { LAYOUT_TYPES, type LayoutType } from "./types";
+
+export const LayoutSelect: React.FC = () => {
+  const { selectedLayout } = useLayoutState();
+  const { setLayoutView } = useLayoutActions();
+
+  // Layouts are not supported in WASM mode by default,
+  // unless the feature flag is enabled
+  if (isWasm() && !getFeatureFlag("wasm_layouts")) {
+    return null;
+  }
+
+  return (
+    <Select
+      data-testid="layout-select"
+      value={selectedLayout}
+      onValueChange={(v) => setLayoutView(v as LayoutType)}
+    >
+      <SelectTrigger
+        className="min-w-[110px] border-border bg-background"
+        data-testid="layout-select"
+      >
+        <SelectValue placeholder="Select a view" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>View as</SelectLabel>
+          {LAYOUT_TYPES.map((layout) => (
+            <SelectItem key={layout} value={layout}>
+              <div className="flex items-center gap-1.5 leading-5">
+                {renderIcon(layout)}
+                <span>{displayLayoutName(layout)}</span>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+};
+
+function renderIcon(layoutType: LayoutType) {
+  const Icon = getLayoutIcon(layoutType);
+  return <Icon className="h-4 w-4" />;
+}
+
+export function getLayoutIcon(layoutType: LayoutType) {
+  switch (layoutType) {
+    case "vertical":
+      return ListIcon;
+    case "grid":
+      return Grid3x3Icon;
+    case "slides":
+      return PresentationIcon;
+    default:
+      logNever(layoutType);
+      return SquareIcon;
+  }
+}
+
+export function displayLayoutName(layoutType: LayoutType) {
+  return startCase(layoutType);
+}

package/src/components/editor/renderers/plugins.ts

@@ -0,0 +1,31 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { CellData } from "@/core/cells/types";
+import { GridLayoutPlugin } from "./grid-layout/plugin";
+import { SlidesLayoutPlugin } from "./slides-layout/plugin";
+import type { ICellRendererPlugin, LayoutType } from "./types";
+import { VerticalLayoutPlugin } from "./vertical-layout/vertical-layout";
+
+// If more renderers are added, we may want to consider lazy loading them.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const cellRendererPlugins: Array<ICellRendererPlugin<any, any>> = [
+  GridLayoutPlugin,
+  SlidesLayoutPlugin,
+  VerticalLayoutPlugin,
+];
+
+export function deserializeLayout({
+  type,
+  data,
+  cells,
+}: {
+  type: LayoutType;
+  data: unknown;
+  cells: CellData[];
+}) {
+  const plugin = cellRendererPlugins.find((plugin) => plugin.type === type);
+  if (plugin === undefined) {
+    throw new Error(`Unknown layout type: ${type}`);
+  }
+  return plugin.deserializeLayout(data, cells);
+}

package/src/components/editor/renderers/slides-layout/plugin.tsx

@@ -0,0 +1,31 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { z } from "zod";
+import type { ICellRendererPlugin } from "../types";
+import { SlidesLayoutRenderer } from "./slides-layout";
+import type { SlidesLayout } from "./types";
+
+/**
+ * Plugin definition for the slides layout.
+ */
+export const SlidesLayoutPlugin: ICellRendererPlugin<
+  SlidesLayout,
+  SlidesLayout
+> = {
+  type: "slides",
+  name: "Slides",
+
+  validator: z.object({}),
+
+  deserializeLayout: (_serialized, _cells): SlidesLayout => {
+    return {};
+  },
+
+  serializeLayout: (_layout, _cells): SlidesLayout => {
+    return {};
+  },
+
+  Component: SlidesLayoutRenderer,
+
+  getInitialLayout: () => ({}),
+};

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

@@ -0,0 +1,74 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import React, { memo } from "react";
+import { outputIsLoading } from "@/core/cells/cell";
+import type { CellId } from "@/core/cells/ids";
+import type { CellRuntimeState } from "@/core/cells/types";
+import type { AppMode } from "@/core/mode";
+import { OutputArea } from "../../Output";
+import type { ICellRendererProps } from "../types";
+import type { SlidesLayout } from "./types";
+
+type Props = ICellRendererProps<SlidesLayout>;
+
+const LazySlidesComponent = React.lazy(
+  () => import("../../../slides/slides-component"),
+);
+
+export const SlidesLayoutRenderer: React.FC<Props> = ({
+  // Currently we don't have layout config
+  // layout,
+  // setLayout,
+  cells,
+  mode,
+}) => {
+  const isReading = mode === "read";
+
+  const slides = (
+    <LazySlidesComponent forceKeyboardNavigation={true}>
+      {cells.map((cell) => {
+        const isOutputEmpty = cell.output == null || cell.output.data === "";
+        if (isOutputEmpty) {
+          return null;
+        }
+        return (
+          <Slide
+            key={cell.id}
+            cellId={cell.id}
+            code={cell.code}
+            status={cell.status}
+            output={cell.output}
+            mode={mode}
+          />
+        );
+      })}
+    </LazySlidesComponent>
+  );
+
+  if (isReading) {
+    return <div className="p-4">{slides}</div>;
+  }
+
+  return <div className="pr-9">{slides}</div>;
+};
+
+interface SlideProps extends Pick<CellRuntimeState, "output" | "status"> {
+  className?: string;
+  code: string;
+  cellId: CellId;
+  mode: AppMode;
+}
+
+const Slide = memo(({ output, cellId, status }: SlideProps) => {
+  const loading = outputIsLoading(status);
+  return (
+    <OutputArea
+      className="contents"
+      allowExpand={false}
+      output={output}
+      cellId={cellId}
+      stale={loading}
+      loading={loading}
+    />
+  );
+});
+Slide.displayName = "Slide";

package/src/components/editor/renderers/slides-layout/types.ts

@@ -0,0 +1,12 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+/* eslint-disable @typescript-eslint/no-empty-interface */
+
+/**
+ * The serialized form of a slides layout.
+ * This must be backwards-compatible as it is stored on the user's disk.
+ */
+export type SerializedSlidesLayout = {};
+
+export interface SlidesLayout extends SerializedSlidesLayout {
+  // No additional properties for now
+}

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

@@ -0,0 +1,75 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { ZodType, ZodTypeDef } from "zod";
+import type { CellData, CellRuntimeState } from "@/core/cells/types";
+import type { AppConfig } from "@/core/config/config-schema";
+import type { AppMode } from "@/core/mode";
+
+/**
+ * The props passed to a cell renderer.
+ */
+export interface ICellRendererProps<L> {
+  /**
+   * App Config
+   */
+  appConfig: AppConfig;
+
+  /**
+   * The cells to render.
+   */
+  cells: Array<CellRuntimeState & CellData>;
+
+  /**
+   * The layout configuration.
+   */
+  layout: L;
+
+  /**
+   * Application mode.
+   * As of now, this won't include 'edit' mode.
+   */
+  mode: AppMode;
+
+  /**
+   * Callback to set the layout.
+   * @param layout The new layout.
+   */
+  setLayout: (layout: L) => void;
+}
+
+export type LayoutType = "vertical" | "grid" | "slides";
+/**
+ * List of supported layout types, in the order to be displayed.
+ */
+export const LAYOUT_TYPES: LayoutType[] = ["vertical", "grid", "slides"];
+/**
+ * Overridable layout types.
+ * These types can override the current layout via a URL parameter.
+ */
+export const OVERRIDABLE_LAYOUT_TYPES: LayoutType[] = ["slides"];
+
+/**
+ * A cell renderer plugin.
+ * @template S The layout as stored at rest, in its serialized form.
+ * @template L The layout as used by the renderer.
+ *
+ * We have 2 different forms since cells don't have IDs at rest.
+ * The mapping allows us to map between indexed-based cells and ID-based cells.
+ */
+export interface ICellRendererPlugin<S, L> {
+  type: LayoutType;
+
+  name: string;
+
+  /**
+   * Validate the layout data. Use [zod](https://zod.dev/) to validate the data.
+   */
+  validator: ZodType<S, ZodTypeDef, unknown>;
+
+  deserializeLayout: (layout: S, cells: CellData[]) => L;
+  serializeLayout: (layout: L, cells: CellData[]) => S;
+
+  Component: React.FC<ICellRendererProps<L>>;
+
+  getInitialLayout: (cells: CellData[]) => L;
+}

package/src/components/editor/renderers/vertical-layout/__tests__/useDelayVisibility.test.ts

@@ -0,0 +1,87 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useDelayVisibility } from "../useDelayVisibility";
+
+describe("useDelayVisibility", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should start with invisible state", () => {
+    const { result } = renderHook(() => useDelayVisibility(5, "read"));
+    expect(result.current.invisible).toBe(true);
+  });
+
+  it("should become visible after delay in read mode", () => {
+    const { result } = renderHook(() => useDelayVisibility(5, "read"));
+
+    expect(result.current.invisible).toBe(true);
+
+    // Advance timers by the calculated delay (5-1)*30 = 120ms
+    act(() => {
+      vi.advanceTimersByTime(120);
+    });
+
+    expect(result.current.invisible).toBe(false);
+  });
+
+  it("should clamp delay at minimum 100ms for small number of cells", () => {
+    const { result } = renderHook(() => useDelayVisibility(2, "read"));
+
+    expect(result.current.invisible).toBe(true);
+
+    // Advance timers by 99ms (not enough, minimum is 100ms)
+    act(() => {
+      vi.advanceTimersByTime(99);
+    });
+    expect(result.current.invisible).toBe(true);
+
+    // Advance remaining 1ms to reach 100ms minimum
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(result.current.invisible).toBe(false);
+  });
+
+  it("should clamp delay at maximum 2000ms for large number of cells", () => {
+    const { result } = renderHook(() => useDelayVisibility(100, "read"));
+
+    expect(result.current.invisible).toBe(true);
+
+    // Advance timers by 1999ms (not enough)
+    act(() => {
+      vi.advanceTimersByTime(1999);
+    });
+    expect(result.current.invisible).toBe(true);
+
+    // Advance remaining 1ms to reach 2000ms cap
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(result.current.invisible).toBe(false);
+  });
+
+  it("should not apply delay in edit mode", () => {
+    const { result } = renderHook(() => useDelayVisibility(5, "edit"));
+
+    // In edit mode, the delay should not be applied, so it should immediately be visible
+    expect(result.current.invisible).toBe(false);
+  });
+
+  it("should not apply delay in present mode", () => {
+    const { result } = renderHook(() => useDelayVisibility(5, "present"));
+
+    // In present mode, the delay should not be applied
+    expect(result.current.invisible).toBe(false);
+  });
+});