@marimo-team/islands 0.16.1 → 0.16.2

package/src/plugins/impl/DataTablePlugin.tsx

@@ -36,6 +36,10 @@ import {
 import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-ownership";
 import { LoadingTable } from "@/components/data-table/loading-table";
 import { RowViewerPanel } from "@/components/data-table/row-viewer-panel/row-viewer";
+import {
+  type DownloadAsArgs,
+  DownloadAsSchema,
+} from "@/components/data-table/schemas";
 import {
   type BinValues,
   type ColumnHeaderStats,
@@ -182,6 +186,7 @@ interface Data<T> {
   freezeColumnsRight?: string[];
   textJustifyColumns?: Record<string, "left" | "center" | "right">;
   wrappedColumns?: string[];
+  headerTooltip?: Record<string, string>;
   totalColumns: number;
   maxColumns: number | "all";
   hasStableRowId: boolean;
@@ -190,7 +195,7 @@ interface Data<T> {
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 type DataTableFunctions = {
-  download_as: (req: { format: "csv" | "json" | "parquet" }) => Promise<string>;
+  download_as: DownloadAsArgs;
   get_column_summaries: <T>(
     opts: ColumnSummariesArgs,
   ) => Promise<ColumnSummaries<T>>;
@@ -249,6 +254,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
         .record(z.enum(["left", "center", "right"]))
         .optional(),
       wrappedColumns: z.array(z.string()).optional(),
+      headerTooltip: z.record(z.string()).optional(),
       fieldTypes: columnToFieldTypesSchema.nullish(),
       totalColumns: z.number(),
       maxColumns: z.union([z.number(), z.literal("all")]).default("all"),
@@ -263,9 +269,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
     }),
   )
   .withFunctions<DataTableFunctions>({
-    download_as: rpc
-      .input(z.object({ format: z.enum(["csv", "json", "parquet"]) }))
-      .output(z.string()),
+    download_as: DownloadAsSchema,
     get_column_summaries: rpc
       .input(z.object({ precompute: z.boolean() }))
       .output(
@@ -706,6 +710,7 @@ const DataTableComponent = ({
   freezeColumnsRight,
   textJustifyColumns,
   wrappedColumns,
+  headerTooltip,
   totalColumns,
   get_row_ids,
   cellStyles,
@@ -779,6 +784,7 @@ const DataTableComponent = ({
         fieldTypes: memoizedClampedFieldTypes,
         textJustifyColumns: memoizedTextJustifyColumns,
         wrappedColumns: memoizedWrappedColumns,
+        headerTooltip: headerTooltip,
         // Only show data types if they are explicitly set
         showDataTypes: showDataTypes,
         calculateTopKRows: calculate_top_k_rows,
@@ -791,6 +797,7 @@ const DataTableComponent = ({
       memoizedClampedFieldTypes,
       memoizedTextJustifyColumns,
       memoizedWrappedColumns,
+      headerTooltip,
       calculate_top_k_rows,
     ],
   );

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -4,6 +4,10 @@ import { isEqual } from "lodash-es";
 import { Code2Icon, DatabaseIcon, FunctionSquareIcon } from "lucide-react";
 import { type JSX, memo, useEffect, useRef, useState } from "react";
 import { z } from "zod";
+import {
+  type DownloadAsArgs,
+  DownloadAsSchema,
+} from "@/components/data-table/schemas";
 import type { FieldTypesWithExternalType } from "@/components/data-table/types";
 import { ReadonlyCode } from "@/components/editor/code/readonly-python-code";
 import { Spinner } from "@/components/icons/spinner";
@@ -38,6 +42,7 @@ interface Data {
   label?: string | null;
   columns: ColumnDataTypes;
   pageSize: number;
+  showDownload: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -67,6 +72,7 @@ type PluginFunctions = {
     data: TableData<T>;
     total_rows: number;
   }>;
+  download_as: DownloadAsArgs;
 };
 
 // Value is selection, but it is not currently exposed to the user
@@ -77,13 +83,14 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
     z.object({
       label: z.string().nullish(),
       pageSize: z.number().default(5),
+      showDownload: z.boolean().default(true),
       columns: z
         .array(z.tuple([z.string().or(z.number()), z.string(), z.string()]))
         .transform((value) => {
           const map = new Map<ColumnId, string>();
-          value.forEach(([key, dataType]) =>
-            map.set(key as ColumnId, dataType as DataType),
-          );
+          value.forEach(([key, dataType]) => {
+            map.set(key as ColumnId, dataType as DataType);
+          });
           return map;
         }),
     }),
@@ -124,6 +131,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
           total_rows: z.number(),
         }),
       ),
+    download_as: DownloadAsSchema,
   })
   .renderer((props) => (
     <TableProviders>
@@ -141,6 +149,8 @@ interface DataTableProps extends Data, PluginFunctions {
   value: S;
   setValue: (value: S) => void;
   host: HTMLElement;
+  showDownload: boolean;
+  download_as: DownloadAsArgs;
 }
 
 const EMPTY: Transformations = {
@@ -151,11 +161,13 @@ export const DataFrameComponent = memo(
   ({
     columns,
     pageSize,
+    showDownload,
     value,
     setValue,
     get_dataframe,
     get_column_values,
     search,
+    download_as,
     host,
   }: DataTableProps): JSX.Element => {
     const { data, error, isPending } = useAsyncData(
@@ -270,8 +282,8 @@ export const DataFrameComponent = memo(
           pagination={true}
           fieldTypes={field_types}
           rowHeaders={row_headers || Arrays.EMPTY}
-          showDownload={false}
-          download_as={Functions.THROW}
+          showDownload={showDownload}
+          download_as={download_as}
           enableSearch={false}
           showFilters={false}
           search={search}

package/src/stories/dataframe.stories.tsx

@@ -40,6 +40,8 @@ export const DataFrame: StoryObj = {
         get_dataframe={() => Promise.reject(new Error("not implemented"))}
         search={Functions.THROW}
         host={document.body}
+        showDownload={false}
+        download_as={async () => ""}
       />
     );
   },

package/src/utils/__tests__/dom.test.ts

@@ -0,0 +1,167 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { describe, expect, test } from "vitest";
+import { ansiToPlainText, parseHtmlContent } from "../dom";
+
+describe("parseHtmlContent", () => {
+  test("strips HTML tags and returns plain text", () => {
+    const htmlString =
+      '<span style="color: red;">Error: Something went wrong</span>';
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`"Error: Something went wrong"`);
+  });
+
+  test("handles ANSI color span tags", () => {
+    const htmlString =
+      '<span style="color:#d03050;">ERROR</span>: <span style="color:#8ad03a;">File not found</span>';
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`"ERROR: File not found"`);
+  });
+
+  test("normalizes whitespace", () => {
+    const htmlString = "<span>  Multiple   \n\n  spaces  and  \t tabs  </span>";
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`
+      "  Multiple
+
+        spaces  and  	 tabs"
+    `);
+  });
+
+  test("handles empty HTML", () => {
+    const htmlString = "";
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`""`);
+  });
+
+  test("handles plain text without HTML", () => {
+    const htmlString = "Simple error message";
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`"Simple error message"`);
+  });
+
+  test("handles nested HTML elements", () => {
+    const htmlString =
+      '<div><span>Traceback:</span><pre><code>  File "test.py", line 1\n    print("hello"</code></pre></div>';
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`
+      "Traceback:  File "test.py", line 1
+          print("hello""
+    `);
+  });
+
+  test("handles complex ANSI-converted HTML with styles", () => {
+    const htmlString =
+      '<span style="background:#fff;color:#000">  File "</span><span style="background:#fff;color:#0000ff">test.py</span><span style="background:#fff;color:#000">", line </span><span style="background:#fff;color:#008000">1</span>';
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`"  File "test.py", line 1"`);
+  });
+});
+
+describe("ansiToPlainText", () => {
+  test("converts ANSI color codes to plain text", () => {
+    const ansiString = "\x1b[31mError:\x1b[0m Something went wrong";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`"Error: Something went wrong"`);
+  });
+
+  test("handles multiple ANSI color codes", () => {
+    const ansiString =
+      "\x1b[32mSUCCESS:\x1b[0m \x1b[34mOperation completed\x1b[0m successfully";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(
+      `"SUCCESS: Operation completed successfully"`,
+    );
+  });
+
+  test("handles ANSI bold and color combinations", () => {
+    const ansiString =
+      "\x1b[1;31mBOLD RED ERROR:\x1b[0m \x1b[33mWarning message\x1b[0m";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`"BOLD RED ERROR: Warning message"`);
+  });
+
+  test("handles Python traceback with ANSI codes", () => {
+    const ansiString =
+      "\x1b[0;36m  File \"\x1b[0m\x1b[0;32mtest.py\x1b[0m\x1b[0;36m\", line \x1b[0m\x1b[0;32m1\x1b[0m\x1b[0;36m, in \x1b[0m\x1b[0;35m<module>\x1b[0m\n\x1b[0;31mNameError\x1b[0m: name 'undefined_var' is not defined";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "  File "test.py", line 1, in <module>
+      NameError: name 'undefined_var' is not defined"
+    `);
+  });
+
+  test("handles error messages with background colors", () => {
+    const ansiString =
+      "\x1b[41;37m CRITICAL ERROR \x1b[0m \x1b[31mSystem failure detected\x1b[0m";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(
+      `" CRITICAL ERROR  System failure detected"`,
+    );
+  });
+
+  test("handles complex stack trace with mixed formatting", () => {
+    const ansiString =
+      'Traceback (most recent call last):\n  \x1b[36mFile "\x1b[32m/path/to/file.py\x1b[36m", line \x1b[32m42\x1b[36m, in \x1b[35mfunction_name\x1b[0m\n    \x1b[31mraise ValueError("Something went wrong")\x1b[0m\n\x1b[31mValueError\x1b[0m: Something went wrong';
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "Traceback (most recent call last):
+        File "/path/to/file.py", line 42, in function_name
+          raise ValueError("Something went wrong")
+      ValueError: Something went wrong"
+    `);
+  });
+
+  test("handles empty string", () => {
+    const ansiString = "";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`""`);
+  });
+
+  test("handles plain text without ANSI codes", () => {
+    const ansiString = "Plain error message without colors";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(
+      `"Plain error message without colors"`,
+    );
+  });
+
+  test("handles whitespace and newlines correctly", () => {
+    const ansiString =
+      "\x1b[31m  Error:  \x1b[0m\n\n  \x1b[33m  Warning  \x1b[0m  ";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "  Error:
+
+          Warning"
+    `);
+  });
+
+  test("handles JavaScript error stack trace", () => {
+    const ansiString =
+      "\x1b[31mReferenceError\x1b[0m: \x1b[33mvariable\x1b[0m is not defined\n    at \x1b[36mObject.<anonymous>\x1b[0m (\x1b[32m/path/to/script.js\x1b[0m:\x1b[33m5\x1b[0m:\x1b[33m1\x1b[0m)";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "ReferenceError: variable is not defined
+          at Object.<anonymous> (/path/to/script.js:5:1)"
+    `);
+  });
+
+  test("handles Rust panic with ANSI formatting", () => {
+    const ansiString =
+      "thread '\x1b[32mmain\x1b[0m' panicked at '\x1b[31massertion failed: `(left == right)`\x1b[0m'\n  \x1b[36mleft\x1b[0m: `\x1b[33m5\x1b[0m`\n \x1b[36mright\x1b[0m: `\x1b[33m10\x1b[0m`";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "thread 'main' panicked at 'assertion failed: \`(left == right)\`'
+        left: \`5\`
+       right: \`10\`"
+    `);
+  });
+
+  test("handles mix of 8-bit and 256-color ANSI codes", () => {
+    const ansiString =
+      "\x1b[38;5;196mBright Red\x1b[0m and \x1b[38;5;46mBright Green\x1b[0m text";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`"Bright Red and Bright Green text"`);
+  });
+});

package/src/utils/dom.ts

@@ -0,0 +1,55 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { AnsiUp } from "ansi_up";
+import { Logger } from "./Logger";
+
+// Create a shared AnsiUp instance
+const ansiUp = new AnsiUp();
+
+/**
+ * Extracts plain text content from HTML by removing all HTML tags and normalizing whitespace.
+ *
+ * @param htmlString The HTML string to parse
+ * @returns Plain text content with HTML tags removed and whitespace normalized
+ */
+export function parseHtmlContent(htmlString: string): string {
+  try {
+    // Create a temporary DOM element to parse HTML
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = htmlString;
+
+    // Extract text content, removing HTML tags
+    const textContent = tempDiv.textContent || tempDiv.innerText || "";
+    const lines = textContent.split("\n");
+    return lines.map((line) => line.trimEnd()).join("\n");
+  } catch (error) {
+    Logger.error("Error parsing HTML content:", error);
+    // If parsing fails, return the original string
+    return htmlString;
+  }
+}
+
+/**
+ * Converts ANSI escape sequences to plain text by first converting to HTML and then stripping HTML tags.
+ * This is useful for console output that may contain ANSI color codes or formatting.
+ *
+ * @param ansiString String that may contain ANSI escape sequences
+ * @returns Plain text with ANSI codes removed and HTML stripped
+ */
+export function ansiToPlainText(ansiString: string): string {
+  if (!ansiString) {
+    return "";
+  }
+
+  try {
+    // Convert ANSI escape sequences to HTML
+    const htmlString = ansiUp.ansi_to_html(ansiString);
+
+    // Strip HTML tags and return clean text
+    return parseHtmlContent(htmlString);
+  } catch (error) {
+    Logger.error("Error converting ANSI to plain text:", error);
+    // If conversion fails, return the original string
+    return ansiString;
+  }
+}