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

package/src/plugins/impl/vega/vega-component.tsx

@@ -0,0 +1,271 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { isValid } from "date-fns";
+import { debounce } from "lodash-es";
+import { HelpCircleIcon } from "lucide-react";
+import { type JSX, useMemo, useRef, useState } from "react";
+import useEvent from "react-use-event-hook";
+import { type SignalListeners, VegaLite, type View } from "react-vega";
+// @ts-expect-error vega-typings does not include formats
+import { formats } from "vega-loader";
+import { Alert, AlertTitle } from "@/components/ui/alert";
+import { Tooltip } from "@/components/ui/tooltip";
+import { useAsyncData } from "@/hooks/useAsyncData";
+import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
+import { useTheme } from "@/theme/useTheme";
+import { Events } from "@/utils/events";
+import { Logger } from "@/utils/Logger";
+import { Objects } from "@/utils/objects";
+import { ErrorBanner } from "../common/error-banner";
+import { fixRelativeUrl } from "./fix-relative-url";
+import { arrow } from "./formats";
+import { makeSelectable } from "./make-selectable";
+import { getSelectionParamNames, ParamNames } from "./params";
+import { resolveVegaSpecData } from "./resolve-data";
+import type { VegaLiteSpec } from "./types";
+
+// register arrow reader under type 'arrow'
+formats("arrow", arrow);
+
+export interface Data {
+  spec: VegaLiteSpec;
+  chartSelection: boolean | "point" | "interval";
+  fieldSelection: boolean | string[];
+}
+
+export interface VegaComponentState {
+  [channel: string]: {
+    // List of selected items
+    vlPoint?: { or: unknown[] };
+    // Either a range or a list of values
+    [field: string]:
+      | [number, number]
+      | string[]
+      | number[]
+      | { or: unknown[] }
+      | undefined;
+  };
+}
+
+interface VegaComponentProps<T> extends Data {
+  value: T;
+  setValue: (value: T) => void;
+}
+
+const VegaComponent = ({
+  value,
+  setValue,
+  chartSelection,
+  fieldSelection,
+  spec,
+}: VegaComponentProps<VegaComponentState>) => {
+  const { data: resolvedSpec, error } = useAsyncData(async () => {
+    // We try to resolve the data before passing it to Vega
+    // otherwise it will try to load it internally and flicker
+    // Instead we can handle the loading state ourselves,
+    // and show the previous chart until the new one is ready
+    return resolveVegaSpecData(spec);
+  }, [spec]);
+
+  if (error) {
+    return <ErrorBanner error={error} />;
+  }
+
+  if (!resolvedSpec) {
+    return null;
+  }
+
+  return (
+    <LoadedVegaComponent
+      value={value}
+      setValue={setValue}
+      chartSelection={chartSelection}
+      fieldSelection={fieldSelection}
+      spec={resolvedSpec}
+    />
+  );
+};
+
+const LoadedVegaComponent = ({
+  value,
+  setValue,
+  chartSelection,
+  fieldSelection,
+  spec,
+}: VegaComponentProps<VegaComponentState>): JSX.Element => {
+  const { theme } = useTheme();
+  const vegaView = useRef<View>(undefined);
+  const [error, setError] = useState<Error>();
+
+  // Aggressively memoize the spec, so Vega doesn't re-render/re-mount the component
+  const specMemo = useDeepCompareMemoize(spec);
+  const selectableSpec = useMemo(() => {
+    return makeSelectable(fixRelativeUrl(specMemo), {
+      chartSelection,
+      fieldSelection,
+    });
+  }, [specMemo, chartSelection, fieldSelection]);
+  const names = useMemo(
+    () => getSelectionParamNames(selectableSpec),
+    [selectableSpec],
+  );
+
+  // Update the value when the selection changes
+  // Keep the old value from other signals
+  const handleUpdateValue = useEvent((newValue: VegaComponentState) => {
+    setValue({ ...value, ...newValue });
+  });
+
+  const namesMemo = useDeepCompareMemoize(names);
+  const signalListeners = useMemo(
+    () =>
+      namesMemo.reduce<SignalListeners>((acc, name) => {
+        // pan/zoom does not count towards selection
+        if (ParamNames.PAN_ZOOM === name) {
+          return acc;
+        }
+
+        // Debounce each signal listener, otherwise we may create expensive requests
+        acc[name] = debounce((signalName, signalValue) => {
+          Logger.debug("[Vega signal]", signalName, signalValue);
+
+          let result = Objects.mapValues(
+            signalValue as object,
+            convertDatetimeToEpochMilliseconds,
+          );
+          result = Objects.mapValues(result, convertSetToList);
+
+          handleUpdateValue({
+            [signalName]: result,
+          });
+        }, 100);
+        return acc;
+      }, {}),
+    [namesMemo, handleUpdateValue],
+  );
+
+  const handleError = useEvent((error) => {
+    Logger.error(error);
+    Logger.debug(selectableSpec);
+    setError(error);
+  });
+
+  const handleNewView = useEvent((view) => {
+    Logger.debug("[Vega view] created", view);
+    vegaView.current = view;
+    setError(undefined);
+  });
+
+  const renderHelpContent = () => {
+    const hints: Array<[string, string]> = [];
+    if (ParamNames.hasPoint(names)) {
+      hints.push([
+        "Point selection",
+        "click to select a point; hold shift for multi-select",
+      ]);
+    }
+
+    if (ParamNames.hasInterval(names)) {
+      hints.push([
+        "Interval selection",
+        "click and drag to select an interval",
+      ]);
+    }
+
+    if (ParamNames.hasLegend(names)) {
+      hints.push([
+        "Legend selection",
+        "click to select a legend item; hold shift for multi-select",
+      ]);
+    }
+
+    if (ParamNames.hasPanZoom(names)) {
+      hints.push(
+        ["Pan", "hold the meta key and drag"],
+        ["Zoom", "hold the meta key and scroll"],
+      );
+    }
+
+    if (hints.length === 0) {
+      return null;
+    }
+
+    return (
+      <Tooltip
+        delayDuration={300}
+        side="left"
+        content={
+          <div className="text-xs flex flex-col">
+            {hints.map((hint, i) => (
+              <div key={i}>
+                <span className="font-bold tracking-wide">{hint[0]}:</span>{" "}
+                {hint[1]}
+              </div>
+            ))}
+          </div>
+        }
+      >
+        <HelpCircleIcon
+          className={
+            "absolute bottom-1 right-0 m-2 h-4 w-4 cursor-help text-muted-foreground hover:text-foreground"
+          }
+        />
+      </Tooltip>
+    );
+  };
+
+  return (
+    <>
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>{error.message}</AlertTitle>
+          <div className="text-md">{error.stack}</div>
+        </Alert>
+      )}
+      <div
+        className="relative"
+        // Capture the pointer down event to prevent the parent from handling it
+        onPointerDown={Events.stopPropagation()}
+      >
+        <VegaLite
+          spec={selectableSpec}
+          theme={theme === "dark" ? "dark" : undefined}
+          actions={actions}
+          signalListeners={signalListeners}
+          onError={handleError}
+          onNewView={handleNewView}
+        />
+        {renderHelpContent()}
+      </div>
+    </>
+  );
+};
+
+const actions = {
+  source: false,
+  compiled: false,
+};
+
+/**
+ * Convert any sets to a list before passing to the BE
+ */
+function convertSetToList(value: unknown): unknown {
+  if (value instanceof Set) {
+    return [...value];
+  }
+  return value;
+}
+
+function convertDatetimeToEpochMilliseconds(value: unknown): unknown {
+  if (Array.isArray(value)) {
+    return value.map((v) => {
+      if (v instanceof Date && isValid(v)) {
+        return new Date(v).getTime();
+      }
+      return v;
+    });
+  }
+  return value;
+}
+
+export default VegaComponent;

package/src/plugins/impl/vega/vega-loader.ts

@@ -0,0 +1,53 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+// @ts-expect-error - no types
+import * as vl from "vega-loader";
+import type { DataFormat } from "./types";
+import type { DataType } from "./vega-loader";
+
+// Re-export the vega-loader functions to add TypeScript types
+
+export function read<T = object>(
+  data: string | Record<string, unknown> | Array<Record<string, unknown>>,
+  format:
+    | DataFormat
+    | {
+        type: DataFormat["type"];
+        parse: "auto";
+      }
+    | {
+        type: DataFormat["type"];
+        parse: Record<string, DataType>;
+      }
+    | undefined,
+): T[] {
+  return vl.read(data, format);
+}
+
+export interface Loader {
+  load(
+    uri: string,
+    options?: unknown,
+  ): Promise<string | Record<string, unknown> | Array<Record<string, unknown>>>;
+  sanitize(uri: string, options?: unknown): Promise<{ href: string }>;
+  http(uri: string, options?: unknown): Promise<string>;
+  file(filename: string): Promise<string>;
+}
+
+export function createLoader(): Loader {
+  return vl.loader();
+}
+
+export type VegaDataType =
+  | "boolean"
+  | "integer"
+  | "number"
+  | "date"
+  | "string"
+  | "unknown";
+
+export type FieldTypes = Record<string, VegaDataType>;
+
+export const typeParsers: Record<VegaDataType, (value: string) => unknown> =
+  vl.typeParsers;
+
+export type { DataType } from "@/core/kernel/messages";

package/src/plugins/impl/vega/vega.css

@@ -0,0 +1,31 @@
+@reference "../../../css/globals.css";
+
+.vega-embed {
+  width: 100%;
+  flex: 1;
+
+  @media (min-width: 500px) {
+    min-width: 300px;
+  }
+}
+
+.vega-embed > .chart-wrapper {
+  overflow-x: auto;
+}
+
+.vega-embed canvas {
+  @apply rounded-md;
+}
+
+.vega-embed .vega-actions.vega-actions {
+  /* Otherwise overflows */
+  right: 3px;
+
+  &::after {
+    right: 3px;
+  }
+
+  &::before {
+    right: 2px;
+  }
+}

package/src/plugins/layout/AccordionPlugin.tsx

@@ -0,0 +1,63 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import React, { type JSX, type PropsWithChildren } from "react";
+import { z } from "zod";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { renderHTML } from "../core/RenderHTML";
+import type {
+  IStatelessPlugin,
+  IStatelessPluginProps,
+} from "../stateless-plugin";
+
+interface Data {
+  /**
+   * The labels for each item; raw HTML.
+   */
+  labels: string[];
+
+  /**
+   * Whether to allow multiple tabs to be open.
+   */
+  multiple: boolean;
+}
+
+export class AccordionPlugin implements IStatelessPlugin<Data> {
+  tagName = "marimo-accordion";
+
+  validator = z.object({
+    labels: z.array(z.string()),
+    multiple: z.boolean(),
+  });
+
+  render(props: IStatelessPluginProps<Data>): JSX.Element {
+    return (
+      <AccordionComponent {...props.data}>{props.children}</AccordionComponent>
+    );
+  }
+}
+
+const AccordionComponent = ({
+  labels,
+  multiple,
+  children,
+}: PropsWithChildren<Data>): JSX.Element => {
+  const type = multiple ? "multiple" : "single";
+  return (
+    <Accordion type={type} className="text-muted-foreground" collapsible={true}>
+      {React.Children.map(children, (child, index) => {
+        return (
+          <AccordionItem key={index} value={index.toString()}>
+            <AccordionTrigger className="py-2 text-md">
+              {renderHTML({ html: labels[index] })}
+            </AccordionTrigger>
+            <AccordionContent className="text-md">{child}</AccordionContent>
+          </AccordionItem>
+        );
+      })}
+    </Accordion>
+  );
+};

package/src/plugins/layout/CalloutPlugin.tsx

@@ -0,0 +1,34 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { JSX } from "react";
+import { z } from "zod";
+import { CalloutOutput } from "../../components/editor/output/CalloutOutput";
+import { type Intent, zodIntent } from "../impl/common/intent";
+import type {
+  IStatelessPlugin,
+  IStatelessPluginProps,
+} from "../stateless-plugin";
+
+interface Data {
+  /**
+   * The html to render
+   */
+  html: string;
+  /**
+   * The kind of callout
+   */
+  kind: Intent;
+}
+
+export class CalloutPlugin implements IStatelessPlugin<Data> {
+  tagName = "marimo-callout-output";
+
+  validator = z.object({
+    html: z.string(),
+    kind: zodIntent,
+  });
+
+  render({ data }: IStatelessPluginProps<Data>): JSX.Element {
+    return <CalloutOutput html={data.html} kind={data.kind} />;
+  }
+}

package/src/plugins/layout/DownloadPlugin.tsx

@@ -0,0 +1,136 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { DownloadIcon, Loader2 } from "lucide-react";
+import { useState } from "react";
+import { z } from "zod";
+import { buttonVariants } from "@/components/ui/button";
+import { toast } from "@/components/ui/use-toast";
+import { cn } from "@/utils/cn";
+import { downloadByURL } from "@/utils/download";
+import { Logger } from "@/utils/Logger";
+import { createPlugin } from "../core/builder";
+import { renderHTML } from "../core/RenderHTML";
+import { rpc } from "../core/rpc";
+
+interface Data {
+  /**
+   * The href to download
+   */
+  data: string;
+  /**
+   * Filename
+   */
+  filename?: string | null;
+  /**
+   * Disabled
+   */
+  disabled?: boolean;
+  /**
+   * Button label
+   */
+  label?: string | null;
+  /**
+   * Whether to load data lazily
+   */
+  lazy?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+type Functions = {
+  /**
+   * Function to call for lazy loading
+   */
+  load: (empty: {}) => Promise<{
+    /**
+     * URL or data-uri
+     */
+    data: string;
+    filename?: string | null | undefined;
+  }>;
+};
+export const DownloadPlugin = createPlugin("marimo-download")
+  .withData(
+    z.object({
+      data: z.string(),
+      disabled: z.boolean().default(false),
+      filename: z.string().nullish(),
+      label: z.string().nullish(),
+      lazy: z.boolean().default(false),
+    }),
+  )
+  .withFunctions<Functions>({
+    load: rpc.input(z.object({})).output(
+      z.object({
+        data: z.string(),
+        filename: z.string().nullish(),
+      }),
+    ),
+  })
+  .renderer((props) => (
+    <DownloadButton data={props.data} {...props.functions} />
+  ));
+
+const DownloadButton = ({
+  data,
+  load,
+}: {
+  data: Data;
+  load: Functions["load"];
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = async (e: React.MouseEvent) => {
+    if (!data.lazy) {
+      return;
+    }
+
+    if (data.disabled) {
+      return;
+    }
+
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      const loadedData = await load({});
+      downloadByURL(
+        loadedData.data,
+        loadedData.filename || data.filename || "download",
+      );
+    } catch (error) {
+      toast({
+        title: "Failed to download",
+        description: "Please try again.",
+      });
+      Logger.error("Failed to download:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const Icon = isLoading ? Loader2 : DownloadIcon;
+  const label = data.label ? renderHTML({ html: data.label }) : "Download";
+
+  return (
+    <a
+      href={data.data}
+      download={data.filename || true}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={handleClick}
+      className={buttonVariants({
+        variant: "secondary",
+        disabled: data.disabled || isLoading,
+      })}
+    >
+      <Icon
+        className={cn(
+          "w-3 h-3",
+          data.label && "mr-2",
+          isLoading && "animate-spin",
+        )}
+      />
+      {label}
+    </a>
+  );
+};

package/src/plugins/layout/ImageComparisonPlugin.tsx

@@ -0,0 +1,35 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import React, { type JSX } from "react";
+import { z } from "zod";
+import type { ImageComparisonData } from "../impl/image-comparison/ImageComparisonComponent";
+import type {
+  IStatelessPlugin,
+  IStatelessPluginProps,
+} from "../stateless-plugin";
+
+const LazyImageComparisonComponent = React.lazy(
+  () => import("../impl/image-comparison/ImageComparisonComponent"),
+);
+
+export class ImageComparisonPlugin
+  implements IStatelessPlugin<ImageComparisonData>
+{
+  tagName = "marimo-image-comparison";
+
+  validator = z.object({
+    beforeSrc: z.string(),
+    afterSrc: z.string(),
+    value: z.number().min(0).max(100).default(50),
+    direction: z.enum(["horizontal", "vertical"]).default("horizontal"),
+    width: z.string().optional(),
+    height: z.string().optional(),
+  });
+
+  render(props: IStatelessPluginProps<ImageComparisonData>): JSX.Element {
+    return (
+      <React.Suspense fallback={<div>Loading image comparison...</div>}>
+        <LazyImageComparisonComponent {...props.data} />
+      </React.Suspense>
+    );
+  }
+}

package/src/plugins/layout/JsonOutputPlugin.tsx

@@ -0,0 +1,47 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { JSX } from "react";
+import { z } from "zod";
+import { EmotionCacheProvider } from "../../components/editor/output/EmotionCacheProvider";
+import { JsonOutput } from "../../components/editor/output/JsonOutput";
+import type {
+  IStatelessPlugin,
+  IStatelessPluginProps,
+} from "../stateless-plugin";
+
+interface Data {
+  name?: string | null;
+  /**
+   * The JSON data to display
+   */
+  jsonData?: unknown;
+  /**
+   * The format of the JSON data. Can be 'auto', 'json', or 'yaml'.
+   */
+  valueTypes?: "json" | "python";
+}
+
+export class JsonOutputPlugin implements IStatelessPlugin<Data> {
+  tagName = "marimo-json-output";
+
+  validator = z.object({
+    name: z.string().nullish(),
+    jsonData: z.unknown(),
+    valueTypes: z.enum(["json", "python"]).default("python"),
+  });
+
+  render({ data, host }: IStatelessPluginProps<Data>): JSX.Element {
+    // `false` defaults to no text label
+    const name = data.name === undefined ? false : data.name || "";
+    return (
+      <EmotionCacheProvider container={host.shadowRoot}>
+        <JsonOutput
+          data={data.jsonData}
+          format="auto"
+          valueTypes={data.valueTypes}
+          name={name}
+        />
+      </EmotionCacheProvider>
+    );
+  }
+}