@marimo-team/islands 0.25.1-dev16 → 0.25.1-dev18

package/src/components/data-table/charts/charts.tsx

@@ -23,9 +23,11 @@ import { Form } from "@/components/ui/form";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type { CellId } from "@/core/cells/ids";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useDebouncedCallback } from "@/hooks/useDebounce";
 import type { GetDataUrl } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
+import { getVegaFieldTypes } from "@/plugins/impl/vega/utils";
 import { useTheme } from "@/theme/useTheme";
 import { uniqueBy } from "@/utils/arrays";
 import { inferFieldTypes } from "../columns";
@@ -284,6 +286,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
               saveChart={saveChart}
               saveChartType={saveChartType}
               getDataUrl={getDataUrl}
+              hasSchema={Boolean(fieldTypes?.length)}
               fieldTypes={mergeIndexFields(
                 fieldTypes ?? inferFieldTypes(dataTable.props.data),
                 rowHeaders,
@@ -307,6 +310,7 @@ export const ChartPanel: React.FC<{
   saveChartType: (chartType: ChartType) => void;
   getDataUrl?: GetDataUrl;
   fieldTypes?: FieldTypesWithExternalType | null;
+  hasSchema?: boolean;
   isLargeDataset: boolean;
 }> = ({
   tableData,
@@ -316,6 +320,7 @@ export const ChartPanel: React.FC<{
   saveChartType,
   getDataUrl,
   fieldTypes,
+  hasSchema = Boolean(fieldTypes?.length),
   isLargeDataset,
 }) => {
   const { theme } = useTheme();
@@ -331,6 +336,8 @@ export const ChartPanel: React.FC<{
   const [renderLargeCharts, setRenderLargeCharts] = useState(!isLargeDataset);
 
   const { ref: chartContainerRef } = useResizeObserver();
+  // Sample-inferred types are useful for controls, but not full CSV parsing.
+  const csvFieldTypes = useDeepCompareMemoize(hasSchema ? fieldTypes : null);
 
   const { data, isPending, error } = useAsyncData(async () => {
     if (!getDataUrl || tableData.length === 0 || !renderLargeCharts) {
@@ -342,20 +349,26 @@ export const ChartPanel: React.FC<{
       return response.data_url;
     }
 
-    const chartData = await vegaLoadData(
-      response.data_url,
-      response.format === "arrow"
-        ? { type: "arrow" }
-        : response.format === "json"
-          ? { type: "json" }
-          : { type: "csv", parse: "auto" },
-      {
-        replacePeriod: true,
-      },
-    );
-    return chartData;
+    let format: Parameters<typeof vegaLoadData>[1];
+    if (response.format === "arrow") {
+      format = { type: "arrow" };
+    } else if (response.format === "json") {
+      format = { type: "json" };
+    } else {
+      format = {
+        type: "csv",
+        parse: getVegaFieldTypes(
+          csvFieldTypes &&
+            Object.fromEntries(
+              csvFieldTypes.map(([name, [type]]) => [name, type]),
+            ),
+          { parseDates: true },
+        ),
+      };
+    }
+    return vegaLoadData(response.data_url, format);
     // Re-run when the data table changes
-  }, [tableData, renderLargeCharts]);
+  }, [tableData, renderLargeCharts, csvFieldTypes]);
 
   const formValues = form.watch();
 

package/src/components/editor/chrome/components/contribute-snippet-button.tsx

@@ -40,7 +40,12 @@ const ContributeSnippetModal: React.FC<{
         <DialogDescription>
           Have a useful snippet you want to share with the community? Make a
           pull request{" "}
-          <a href={Constants.githubPage} target="_blank" className="underline">
+          <a
+            href={Constants.githubPage}
+            target="_blank"
+            rel="noreferrer"
+            className="underline"
+          >
             on GitHub
           </a>
           .

package/src/components/editor/notebook-cell.tsx

@@ -762,7 +762,7 @@ const EditableCellComponent = ({
                     href="https://links.marimo.app/reusable-definitions"
                     target="_blank"
                     className="hover:underline text-muted-foreground text-xs font-bold"
-                    rel="noopener"
+                    rel="noreferrer"
                   >
                     reusable
                   </a>
@@ -801,7 +801,7 @@ const EditableCellComponent = ({
                     <a
                       href="https://links.marimo.app/reusable-definitions"
                       target="_blank"
-                      rel="noopener"
+                      rel="noreferrer"
                     >
                       <HelpCircleIcon
                         size={16}

package/src/components/editor/output/MarimoTracebackOutput.tsx

@@ -177,7 +177,7 @@ export const MarimoTracebackOutput = ({
                 <a
                   target="_blank"
                   href="https://marimo.io/discord?ref=notebook"
-                  rel="noopener"
+                  rel="noreferrer"
                 >
                   <MessageCircleIcon className="h-4 w-4 mr-2" />
                   Ask in Discord

package/src/components/editor/output/VideoOutput.tsx

@@ -7,5 +7,5 @@ interface Props {
 }
 
 export const VideoOutput = ({ src, className }: Props): JSX.Element => {
-  return <iframe className={className} src={src} />;
+  return <iframe className={className} src={src} title="Video output" />;
 };

package/src/components/editor/output/ansi-reduce.ts

@@ -13,8 +13,10 @@ export interface Cursor {
 export class TerminalBuffer {
   private lines: string[] = [""];
   private cursor: Cursor = { row: 0, col: 0 };
-  // oxlint-ignore-next-line no-control-regex -- Needed for ANSI escape sequence parsing
-  private static readonly ESCAPE_REGEX = /\u001B\[([0-9;]*)([A-DJKH])/u;
+  private static readonly ESCAPE_REGEX = new RegExp(
+    String.raw`\u001B\[([0-9;]*)([A-DJKH])`,
+    "u",
+  );
 
   /** Ensure the internal lines array is large enough. */
   private ensureLine(row: number) {
@@ -180,8 +182,10 @@ export class TerminalBuffer {
  */
 export class AnsiParser {
   // Matches both CSI sequences (ESC[...letter) and other escape sequences like character set selection (ESC(B)
-  // oxlint-ignore-next-line no-control-regex -- Needed for ANSI parsing
-  private ESC_REGEX = /\u001B(?:\[[0-9;]*[A-Za-z]|\([0-9A-Za-z])/gu;
+  private ESC_REGEX = new RegExp(
+    String.raw`\u001B(?:\[[0-9;]*[A-Za-z]|\([0-9A-Za-z])`,
+    "gu",
+  );
 
   parse(input: string): { type: "text" | "escape"; value: string }[] {
     const tokens: { type: "text" | "escape"; value: string }[] = [];

package/src/components/editor/output/console/text-rendering.tsx

@@ -256,6 +256,7 @@ export const pipInstallReplacer: Replacer = (domNode: DOMNode) => {
     );
   }
 
+  // oxlint-disable-next-line react/jsx-no-useless-fragment -- html-react-parser replacers must return a React element.
   return <>{segments}</>;
 };
 
@@ -283,6 +284,7 @@ export const urlReplacer: Replacer = (domNode: DOMNode) => {
     return undefined;
   }
 
+  // oxlint-disable-next-line react/jsx-no-useless-fragment -- html-react-parser replacers must return a React element.
   return <>{result}</>;
 };
 
@@ -331,5 +333,5 @@ export const RenderTextWithLinks = ({ text }: { text: string }) => {
     );
   }, [text]);
 
-  return <>{content}</>;
+  return content;
 };

package/src/components/home/components.tsx

@@ -170,6 +170,7 @@ export const ResourceLinks: React.FC = () => {
             key={resource.title}
             href={resource.url}
             target="_blank"
+            rel="noreferrer"
             aria-label={`${resource.title}: ${resource.description}`}
             className="flex items-start gap-3 py-3 px-3 rounded-lg border hover:bg-accent/20 transition-colors shadow-xs"
           >

package/src/components/pages/run-page.tsx

@@ -50,6 +50,7 @@ const Watermark = () => {
       <a
         href={Constants.githubPage}
         target="_blank"
+        rel="noreferrer"
         className="text-sm text-(--grass-11) font-bold tracking-wide transition-colors bg-(--grass-4) hover:bg-(--grass-5) border-t border-l border-(--grass-8) px-3 py-1 rounded-tl-md flex items-center gap-2"
       >
         <span>made with marimo</span>

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

@@ -74,6 +74,7 @@ export const ShareStaticNotebookModal: React.FC<{
                   <a
                     href={Constants.issuesPage}
                     target="_blank"
+                    rel="noreferrer"
                     className="underline"
                   >
                     GitHub
@@ -102,7 +103,7 @@ export const ShareStaticNotebookModal: React.FC<{
           <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">
+            <a href={BASE_URL} target="_blank" rel="noreferrer">
               {BASE_URL}
             </a>
             .

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

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 /* oxlint-disable react/jsx-no-comment-textnodes */
-/* oxlint-disable react/jsx-no-target-blank */
 
 import { useAtomValue } from "jotai";
 import { CopyIcon, DownloadIcon } from "lucide-react";
@@ -49,6 +48,7 @@ export const StaticBanner: React.FC = () => {
         <a
           href={Constants.githubPage}
           target="_blank"
+          rel="noreferrer"
           className="text-(--sky-11) font-medium underline"
         >
           marimo
@@ -93,6 +93,7 @@ const StaticBannerDialog = ({ code }: { code: string }) => {
                 <a
                   href={Constants.githubPage}
                   target="_blank"
+                  rel="noreferrer"
                   className="text-(--sky-11) hover:underline font-medium"
                 >
                   marimo

package/src/components/ui/links.tsx

@@ -21,7 +21,12 @@ export const ExternalLink = ({
   children: React.ReactNode;
 }) => {
   return (
-    <a href={href} target="_blank" className="text-link hover:underline">
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className="text-link hover:underline"
+    >
       {children}
     </a>
   );

package/src/plugins/impl/vega/__tests__/utils.test.ts

@@ -1,7 +1,22 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { describe, expect, it } from "vitest";
-import { getContainerWidth } from "../utils";
+import { getContainerWidth, getVegaFieldTypes } from "../utils";
+
+describe("getVegaFieldTypes", () => {
+  it("preserves date strings unless the caller requests date parsing", () => {
+    expect(getVegaFieldTypes({ day: "date", timestamp: "datetime" })).toEqual({
+      day: "string",
+      timestamp: "date",
+    });
+    expect(
+      getVegaFieldTypes(
+        { day: "date", timestamp: "datetime" },
+        { parseDates: true },
+      ),
+    ).toEqual({ day: "date", timestamp: "date" });
+  });
+});
 
 describe("getContainerWidth", () => {
   it('should return "container" when spec width is "container"', () => {

package/src/plugins/impl/vega/__tests__/vega.test.ts

@@ -13,6 +13,43 @@ const { ZERO_WIDTH_SPACE, replacePeriodsInColumnNames, uniquifyColumnNames } =
   exportedForTesting;
 
 describe("vega loader", () => {
+  it("parses infinities only in explicitly numeric CSV fields", async () => {
+    vi.spyOn(vegaLoader, "load").mockResolvedValue(
+      "value,label,id\ninf,inf,1\n-inf,-inf,2\n+inf,+inf,3\n2.5,002.5,4\n,,5\nNaN,NaN,6\n",
+    );
+
+    const data = await vegaLoadData("chart.csv", {
+      type: "csv",
+      parse: { value: "number", label: "string", id: "integer" },
+    });
+
+    expect(data).toEqual([
+      { value: Infinity, label: "inf", id: 1 },
+      { value: -Infinity, label: "-inf", id: 2 },
+      { value: Infinity, label: "+inf", id: 3 },
+      { value: 2.5, label: "002.5", id: 4 },
+      { value: null, label: null, id: 5 },
+      { value: Number.NaN, label: "NaN", id: 6 },
+    ]);
+  });
+
+  it("preserves the table's large integer and infinity handling", async () => {
+    vi.spyOn(vegaLoader, "load").mockResolvedValue(
+      "id,value\n9007199254740993,inf\n9007199254740995,-inf\n",
+    );
+
+    const data = await vegaLoadData(
+      "table.csv",
+      { type: "csv", parse: { id: "integer", value: "number" } },
+      { handleBigIntAndNumberLike: true },
+    );
+
+    expect(data).toEqual([
+      { id: BigInt("9007199254740993"), value: "inf" },
+      { id: BigInt("9007199254740995"), value: "-inf" },
+    ]);
+  });
+
   it("should parse csv data with dates", async () => {
     const csvData = `
 active,username,id

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

@@ -16,6 +16,26 @@ const previousNumberParser = typeParsers.number;
 const previousDateParser = typeParsers.date;
 const previousBooleanParser = typeParsers.boolean;
 
+const NUMBER_MIDDLEWARE: Middleware = () => {
+  const parseNumber = (value: string) => {
+    if (value === "inf" || value === "+inf") {
+      return Number.POSITIVE_INFINITY;
+    }
+    if (value === "-inf") {
+      return Number.NEGATIVE_INFINITY;
+    }
+    return previousNumberParser(value);
+  };
+
+  typeParsers.integer = parseNumber;
+  typeParsers.number = parseNumber;
+
+  return () => {
+    typeParsers.integer = previousIntegerParser;
+    typeParsers.number = previousNumberParser;
+  };
+};
+
 const BIG_INT_MIDDLEWARE: Middleware = () => {
   // Custom parser to:
   // - handle BigInt
@@ -159,6 +179,8 @@ export async function vegaLoadData<T = object>(
   const middleware: Middleware[] = [DATE_MIDDLEWARE];
   if (handleBigIntAndNumberLike) {
     middleware.push(BIG_INT_MIDDLEWARE);
+  } else {
+    middleware.push(NUMBER_MIDDLEWARE);
   }
 
   let unsubscribes: Unsubscribe[] = [];
@@ -216,7 +238,7 @@ export async function vegaLoadData<T = object>(
 
     // Apply middleware
     unsubscribes = middleware.map((m) => m());
-    // Always set parse to auto for csv data, to be able to parse dates and floats
+    // CSV defaults to inference when no explicit column types are available.
     const results = isCsv
       ? // csv -> json
         read(csvOrJsonData, {

package/src/plugins/impl/vega/utils.ts

@@ -45,21 +45,22 @@ function toArray<T>(value: T | T[] | undefined): T[] {
 
 export function getVegaFieldTypes(
   types: Record<string, DataType> | undefined | null,
+  { parseDates = false }: { parseDates?: boolean } = {},
 ): FieldTypes | "auto" {
   if (!types || Object.keys(types).length === 0) {
     // If fieldTypes is provided, use it to parse the data
     // Otherwise, infer the data types
     return "auto";
   }
-  // Convert all 'date' to 'string', because dates don't format back to
-  // the correct formatting. For example, a date like '2024-01-01' will
-  // be formatted to '2024-01-01T00:00:00.000Z'.
+  // Preserve date-only strings for callers such as the data editor.
+  // Parsing creates Date objects that JSON serializes as full timestamps.
+  // Charts opt into date parsing for temporal axes.
   return Objects.mapValues(types, (type): VegaDataType => {
     if (type === "geometry") {
       return "string";
     }
     if (type === "date") {
-      return "string";
+      return parseDates ? "date" : "string";
     }
     if (type === "time") {
       return "string";

package/src/plugins/layout/RoutesPlugin.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import React, {
-  type JSX,
   type PropsWithChildren,
   useEffect,
   useMemo,
@@ -28,7 +27,7 @@ export class RoutesPlugin implements IStatelessPlugin<Data> {
     routes: z.array(z.string()),
   });
 
-  render(props: IStatelessPluginProps<Data>): JSX.Element {
+  render(props: IStatelessPluginProps<Data>): React.ReactElement {
     return <RoutesComponent {...props.data}>{props.children}</RoutesComponent>;
   }
 }
@@ -36,7 +35,7 @@ export class RoutesPlugin implements IStatelessPlugin<Data> {
 const RoutesComponent = ({
   routes,
   children,
-}: PropsWithChildren<Data>): JSX.Element => {
+}: PropsWithChildren<Data>): React.ReactNode => {
   const childCount = React.Children.count(children);
   if (childCount !== routes.length) {
     throw new Error(
@@ -69,12 +68,11 @@ const RoutesComponent = ({
   }, [handleFindMatch]);
 
   if (!matched) {
-    // oxlint-disable-next-line react/jsx-no-useless-fragment
-    return <></>;
+    return null;
   }
 
   const matchedIndex = routes.indexOf(matched);
   const child = React.Children.toArray(children)[matchedIndex];
 
-  return <>{child}</>;
+  return child;
 };