@marimo-team/frontend 0.14.18-dev4 → 0.14.18-dev41

package/src/components/slides/slides.css

@@ -0,0 +1,100 @@
+@import "swiper/css";
+@import "swiper/css/virtual";
+@import "swiper/css/navigation";
+@import "swiper/css/pagination";
+@import "swiper/css/scrollbar";
+
+.mo-slides-theme {
+  --swiper-theme-color: var(--primary);
+  --swiper-pagination-color: var(--swiper-theme-color);
+  --swiper-pagination-left: auto;
+  --swiper-pagination-right: 8px;
+  --swiper-pagination-bottom: 8px;
+  --swiper-pagination-top: auto;
+  --swiper-pagination-fraction-color: inherit;
+  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
+  --swiper-pagination-progressbar-size: 4px;
+  --swiper-pagination-bullet-size: 8px;
+  --swiper-pagination-bullet-width: 8px;
+  --swiper-pagination-bullet-height: 8px;
+  --swiper-pagination-bullet-border-radius: 50%;
+  --swiper-pagination-bullet-inactive-color: #000;
+  --swiper-pagination-bullet-inactive-opacity: 0.2;
+  --swiper-pagination-bullet-opacity: 1;
+  --swiper-pagination-bullet-horizontal-gap: 4px;
+  --swiper-pagination-bullet-vertical-gap: 6px;
+
+  .swiper-button-prev,
+  .swiper-button-next {
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.1);
+    opacity: 0;
+    padding: 0 15px;
+    transition: opacity 0.3s;
+    font-weight: 900;
+    margin-top: 0;
+
+    --swiper-navigation-sides-offset: 0;
+    --swiper-navigation-size: 20px;
+
+    &.swiper-button-disabled {
+      opacity: 0;
+    }
+
+    &:hover:not(.swiper-button-disabled) {
+      opacity: 1;
+    }
+  }
+}
+
+@font-face {
+  font-family: "swiper-icons";
+  src: url("data:application/font-woff;charset=utf-8;base64, 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");
+  font-weight: 400;
+  font-style: normal;
+}
+
+/* The swiper library adds styles to `:host` which is a global selector we use for other components,
+so we are resetting this back to initial. */
+/* 2 hosts to increase specificity */
+:host:host {
+  display: initial;
+}
+
+/* The slides  is full width, but centers the inside content to fit the width of the content. */
+.mo-slide-content {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  /* width is normally set to 100%, but we want the content to be centered around
+  the width needed. */
+  .output {
+    /* center the output vertically if there is space,
+    we use flexbox to center the output horizontally */
+    margin: auto 0;
+    max-width: 100%;
+    width: unset;
+  }
+
+  /* Components that should be full width when in slides mode */
+  div:has(> marimo-ui-element > marimo-vega) {
+    display: block !important;
+    flex: 1;
+
+    @media (min-width: 500px) {
+      min-width: 350px;
+    }
+  }
+}
+
+/* helpful for debugging */
+/* .mo-slide-content {
+  background-color: red;
+
+  .output {
+    background-color: green;
+  }
+} */

package/src/components/sort/SortableCellsProvider.tsx

@@ -0,0 +1,242 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import {
+  type AutoScrollOptions,
+  type CollisionDetection,
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  type DragStartEvent,
+  getFirstCollision,
+  KeyboardSensor,
+  PointerSensor,
+  pointerWithin,
+  rectIntersection,
+  type UniqueIdentifier,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import React, { useCallback, useMemo, useState } from "react";
+import type { CellId } from "@/core/cells/ids";
+import { useAppConfig } from "@/core/config/config";
+import { Arrays } from "@/utils/arrays";
+import type { CellColumnId, MultiColumn } from "@/utils/id-tree";
+import { invariant } from "@/utils/invariant";
+import { getNotebook, useCellActions } from "../../core/cells/cells";
+import { useEvent } from "../../hooks/useEvent";
+
+interface SortableCellsProviderProps {
+  multiColumn: boolean;
+  children: React.ReactNode;
+}
+
+// autoScroll threshold x: 0 is required to disable horizontal scroll
+//            threshold y: 0.1 means scroll y when near bottom/top 10% of
+//            scrollable container
+const autoScroll: AutoScrollOptions = {
+  threshold: { x: 0, y: 0.1 },
+};
+
+const SortableCellsProviderInternal = ({
+  children,
+  multiColumn,
+}: SortableCellsProviderProps) => {
+  const { dropCellOverCell, dropCellOverColumn, moveColumn, compactColumns } =
+    useCellActions();
+
+  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
+  const [clonedItems, setClonedItems] = useState<MultiColumn<CellId> | null>(
+    null,
+  );
+
+  const [config] = useAppConfig();
+  const modifiers = useMemo(() => {
+    if (config.width === "columns") {
+      return Arrays.EMPTY;
+    }
+    return [restrictToVerticalAxis];
+  }, [config.width]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        // to support click and drag on the same element
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const handleDragStart = useEvent((event: DragStartEvent) => {
+    setActiveId(event.active.id);
+    const notebook = getNotebook();
+    setClonedItems(notebook.cellIds);
+  });
+
+  const handleDragCancel = useEvent(() => {
+    // TODO: restore cloned items
+    if (clonedItems) {
+      // Reset items to their original state in case items have been
+      // Dragged across containers
+      // setItems(clonedItems);
+    }
+
+    setActiveId(null);
+    setClonedItems(null);
+  });
+
+  /**
+   * Custom collision detection:
+   * 1. If dragging a column, we can only drop on other columns
+   *  - We just use closestCenter
+   *  - We filter the droppableContainers to only consider other columns
+   * 2. If dragging a cell, we want to find the best column to drop on
+   *  - We get the first intersection
+   *  - Find the closest column to the cell
+   *  - If the column is empty, we consider it a valid drop target
+   *  - Otherwise, we only consider the cells in the same column
+   */
+  const collisionDetectionStrategy = useCallback(
+    (args: Parameters<CollisionDetection>[0]) => {
+      const columnContainers = args.droppableContainers.filter((container) =>
+        isColumnId(container.id),
+      );
+
+      // 1. Handle column dragging
+      if (activeId && isColumnId(activeId)) {
+        return closestCenter({
+          ...args,
+          droppableContainers: columnContainers,
+        });
+      }
+
+      // 2. Handle cell dragging
+
+      // Get the first column intersection
+      const pointerIntersections = pointerWithin({
+        ...args,
+        droppableContainers: columnContainers,
+      });
+      const intersections =
+        pointerIntersections.length > 0
+          ? pointerIntersections
+          : rectIntersection({
+              ...args,
+              droppableContainers: columnContainers,
+            });
+      const overId = getFirstCollision(intersections, "id");
+      if (!overId) {
+        return [];
+      }
+      invariant(isColumnId(overId), `Expected column id. Got: ${overId}`);
+
+      // If column is empty, we can drop on it
+      const notebook = getNotebook();
+      const column = notebook.cellIds.get(overId);
+      invariant(column, `Expected column. Got: ${overId}`);
+      if (column && column.topLevelIds.length === 0) {
+        // Return the column
+        return [{ id: overId }];
+      }
+
+      // If the column is not empty, we only consider the cells in the same column
+      const cellIdSet = new Set(column.topLevelIds);
+      const collisions = closestCenter({
+        ...args,
+        droppableContainers: args.droppableContainers.filter(
+          (container) =>
+            container.id !== overId && cellIdSet.has(container.id as CellId),
+        ),
+      });
+
+      if (collisions.length > 0) {
+        const overId = collisions[0].id;
+        invariant(isCellId(overId), `Expected cell id. Got: ${overId}`);
+        // Return the cell
+        return [{ id: overId }];
+      }
+
+      return [];
+    },
+    [activeId],
+  );
+
+  const handleDragOver = useEvent(({ active, over }) => {
+    const overId = over?.id;
+
+    if (overId == null || active.id === overId) {
+      return;
+    }
+
+    // Handle moving cells
+    if (isCellId(active.id)) {
+      // Moving a cell to a column
+      if (isColumnId(overId)) {
+        dropCellOverColumn({
+          cellId: active.id,
+          columnId: overId,
+        });
+        return;
+      }
+
+      // Moving a cell above another cell
+      if (isCellId(overId)) {
+        dropCellOverCell({
+          cellId: active.id,
+          overCellId: overId,
+        });
+        return;
+      }
+    }
+
+    // Moving a column to another column
+    if (isColumnId(active.id) && isColumnId(overId)) {
+      moveColumn({
+        column: active.id,
+        overColumn: overId,
+      });
+    }
+  });
+
+  const handleDragEnd = useEvent((event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over === null || active.id === over.id) {
+      return;
+    }
+
+    compactColumns();
+  });
+
+  return (
+    <DndContext
+      autoScroll={autoScroll}
+      sensors={sensors}
+      // For single-column, we just do closestCenter
+      collisionDetection={
+        multiColumn ? collisionDetectionStrategy : closestCenter
+      }
+      modifiers={modifiers}
+      onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
+      onDragCancel={handleDragCancel}
+      onDragOver={handleDragOver}
+    >
+      {children}
+    </DndContext>
+  );
+};
+
+export const SortableCellsProvider = React.memo(SortableCellsProviderInternal);
+
+function isCellId(id: UniqueIdentifier): id is CellId {
+  return typeof id === "string" && !id.startsWith("tree_");
+}
+
+function isColumnId(id: UniqueIdentifier): id is CellColumnId {
+  return typeof id === "string" && id.startsWith("tree_");
+}

package/src/components/static-html/share-modal.tsx

@@ -0,0 +1,181 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { CopyIcon } from "lucide-react";
+import React, { useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { toast } from "@/components/ui/use-toast";
+import { Constants } from "@/core/constants";
+import { useRequestClient } from "@/core/network/requests";
+import { VirtualFileTracker } from "@/core/static/virtual-file-tracker";
+import { copyToClipboard } from "@/utils/copy";
+import { Events } from "@/utils/events";
+import { Input } from "../ui/input";
+import { Tooltip } from "../ui/tooltip";
+
+const BASE_URL = "https://static.marimo.app";
+
+export const ShareStaticNotebookModal: React.FC<{
+  onClose: () => void;
+}> = ({ onClose }) => {
+  const [slug, setSlug] = useState("");
+  const { exportAsHTML } = useRequestClient();
+  // 4 character random string
+  const randomHash = useMemo(() => Math.random().toString(36).slice(2, 6), []);
+
+  // Globally unique path
+  const path = `${slug}-${randomHash}`;
+  const url = `${BASE_URL}/static/${path}`;
+
+  return (
+    <DialogContent className="w-fit">
+      <form
+        onSubmit={async (e) => {
+          e.preventDefault();
+
+          onClose();
+          const html = await exportAsHTML({
+            download: false,
+            includeCode: true,
+            files: VirtualFileTracker.INSTANCE.filenames(),
+          });
+
+          const prevToast = toast({
+            title: "Uploading static notebook...",
+            description: "Please wait.",
+          });
+
+          await fetch(`${BASE_URL}/api/static`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              html: html,
+              path: path,
+            }),
+          }).catch(() => {
+            prevToast.dismiss();
+            toast({
+              title: "Error uploading static page",
+              description: (
+                <div>
+                  Please try again later. If the problem persists, please file a
+                  bug report on{" "}
+                  <a
+                    href={Constants.issuesPage}
+                    target="_blank"
+                    className="underline"
+                  >
+                    GitHub
+                  </a>
+                  .
+                </div>
+              ),
+            });
+          });
+
+          prevToast.dismiss();
+          toast({
+            title: "Static page uploaded!",
+            description: (
+              <div>
+                The URL has been copied to your clipboard.
+                <br />
+                You can share it with anyone.
+              </div>
+            ),
+          });
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Share static notebook</DialogTitle>
+          <DialogDescription>
+            You can publish a static, non-interactive version of this notebook
+            to the public web. We will create a link for you that lives on{" "}
+            <a href={BASE_URL} target="_blank">
+              {BASE_URL}
+            </a>
+            .
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-6 py-4">
+          <Input
+            data-testid="slug-input"
+            id="slug"
+            autoFocus={true}
+            value={slug}
+            placeholder="Notebook slug"
+            onChange={(e) => {
+              const newSlug = e.target.value
+                .toLowerCase()
+                .replaceAll(/\s/g, "-")
+                .replaceAll(/[^\da-z-]/g, "");
+              setSlug(newSlug);
+            }}
+            required={true}
+            autoComplete="off"
+          />
+
+          <div className="font-semibold text-sm text-muted-foreground gap-2 flex flex-col">
+            Anyone will be able to access your notebook at this URL:
+            <div className="flex items-center gap-2">
+              <CopyButton text={url} />
+              <span className="text-primary">{url}</span>
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            data-testid="cancel-share-static-notebook-button"
+            variant="secondary"
+            onClick={onClose}
+          >
+            Cancel
+          </Button>
+          <Button
+            data-testid="share-static-notebook-button"
+            aria-label="Save"
+            variant="default"
+            type="submit"
+            onClick={async () => {
+              await copyToClipboard(url);
+            }}
+          >
+            Create
+          </Button>
+        </DialogFooter>
+      </form>
+    </DialogContent>
+  );
+};
+
+const CopyButton = (props: { text: string }) => {
+  const [copied, setCopied] = React.useState(false);
+
+  const copy = Events.stopPropagation(async (e) => {
+    e.preventDefault();
+    await copyToClipboard(props.text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  });
+
+  return (
+    <Tooltip content="Copied!" open={copied}>
+      <Button
+        data-testid="copy-static-notebook-url-button"
+        onClick={copy}
+        size="xs"
+        variant="secondary"
+      >
+        <CopyIcon size={14} strokeWidth={1.5} />
+      </Button>
+    </Tooltip>
+  );
+};

package/src/components/static-html/static-banner.tsx

@@ -0,0 +1,164 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+/* eslint-disable react/jsx-no-comment-textnodes */
+/* eslint-disable react/jsx-no-target-blank */
+
+import { useAtomValue } from "jotai";
+import { CopyIcon, DownloadIcon } from "lucide-react";
+import type React from "react";
+import { Constants } from "@/core/constants";
+import { codeAtom } from "@/core/saving/file-state";
+import { useFilename } from "@/core/saving/filename";
+import { isStaticNotebook } from "@/core/static/static-state";
+import { createShareableLink } from "@/core/wasm/share";
+import { copyToClipboard } from "@/utils/copy";
+import { downloadBlob } from "@/utils/download";
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { toast } from "../ui/use-toast";
+
+export const StaticBanner: React.FC = () => {
+  const code = useAtomValue(codeAtom);
+
+  if (!isStaticNotebook()) {
+    return null;
+  }
+
+  if (!code) {
+    return null;
+  }
+
+  return (
+    <div
+      className="px-4 py-2 bg-(--sky-2) border-b border-(--sky-7) text-(--sky-11) flex justify-between items-center gap-4 no-print text-sm"
+      data-testid="static-notebook-banner"
+    >
+      <span>
+        Static{" "}
+        <a
+          href={Constants.githubPage}
+          target="_blank"
+          className="text-(--sky-11) font-medium underline"
+        >
+          marimo
+        </a>{" "}
+        notebook - Run or edit for full interactivity
+      </span>
+      <span className="shrink-0">
+        <StaticBannerDialog code={code} />
+      </span>
+    </div>
+  );
+};
+
+const StaticBannerDialog = ({ code }: { code: string }) => {
+  let filename = useFilename() || "notebook.py";
+  // Trim the path
+  const lastSlash = filename.lastIndexOf("/");
+  if (lastSlash !== -1) {
+    filename = filename.slice(lastSlash + 1);
+  }
+
+  const href = window.location.href;
+  const wasmLink = createShareableLink({ code });
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild={true}>
+        <Button
+          data-testid="static-notebook-dialog-trigger"
+          variant="outline"
+          size="xs"
+        >
+          Run or Edit
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{filename}</DialogTitle>
+          <DialogDescription className="pt-3 text-left space-y-3">
+            <p>
+              This is a static{" "}
+              <a
+                href={Constants.githubPage}
+                target="_blank"
+                className="text-(--sky-11) hover:underline font-medium"
+              >
+                marimo
+              </a>{" "}
+              notebook. To run interactively:
+            </p>
+
+            <div className="rounded-lg p-3 border bg-(--sky-2) border-(--sky-7)">
+              <div className="font-mono text-(--sky-11) leading-relaxed">
+                pip install marimo
+                <br />
+                marimo edit {filename}
+              </div>
+            </div>
+
+            {!href.endsWith(".html") && (
+              <div className="rounded-lg p-3 border bg-(--sky-2) border-(--sky-7)">
+                <div className="text-sm text-(--sky-12) mb-1">
+                  Or run directly from URL:
+                </div>
+                <div className="font-mono text-(--sky-11) break-all">
+                  marimo edit {window.location.href}
+                </div>
+              </div>
+            )}
+
+            <div className="pt-3 border-t border-(--sky-7)">
+              <p className="text-sm text-(--sky-12) mb-2">
+                <strong>Try in browser with WebAssembly:</strong>{" "}
+                <a
+                  href={wasmLink}
+                  target="_blank"
+                  className="text-(--sky-11) hover:underline break-all"
+                  rel="noreferrer"
+                >
+                  {wasmLink.slice(0, 50)}...
+                </a>
+              </p>
+              <p className="text-sm text-(--sky-12)">
+                Note: WebAssembly may not work for all notebooks. Additionally,
+                some dependencies may not be available in the browser.
+              </p>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex gap-3 pt-2">
+          <Button
+            data-testid="copy-static-notebook-dialog-button"
+            variant="outline"
+            size="sm"
+            onClick={async () => {
+              await copyToClipboard(code);
+              toast({ title: "Copied to clipboard" });
+            }}
+          >
+            <CopyIcon className="w-3 h-3 mr-2" />
+            Copy code
+          </Button>
+          <Button
+            data-testid="download-static-notebook-dialog-button"
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              downloadBlob(new Blob([code], { type: "text/plain" }), filename);
+            }}
+          >
+            <DownloadIcon className="w-3 h-3 mr-2" />
+            Download
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};