@marimo-team/islands 0.17.8 → 0.18.1

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

@@ -91,6 +91,7 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   showChartBuilder?: boolean;
   showPageSizeSelector?: boolean;
   showColumnExplorer?: boolean;
+  showRowExplorer?: boolean;
   togglePanel?: (panelType: PanelType) => void;
   isPanelOpen?: (panelType: PanelType) => boolean;
 }
@@ -133,6 +134,7 @@ const DataTableInternal = <TData,>({
   showChartBuilder,
   showPageSizeSelector,
   showColumnExplorer,
+  showRowExplorer,
   togglePanel,
   isPanelOpen,
   viewedRowIdx,
@@ -337,6 +339,7 @@ const DataTableInternal = <TData,>({
         showChartBuilder={showChartBuilder}
         showPageSizeSelector={showPageSizeSelector}
         showColumnExplorer={showColumnExplorer}
+        showRowExplorer={showRowExplorer}
         togglePanel={togglePanel}
         isPanelOpen={isPanelOpen}
         tableLoading={reloading}

package/src/components/data-table/download-actions.tsx

@@ -12,7 +12,8 @@ import { useLocale } from "react-aria";
 import { logNever } from "@/utils/assertNever";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadByURL } from "@/utils/download";
-import { jsonToTSV } from "@/utils/json/json-parser";
+import { prettyError } from "@/utils/errors";
+import { jsonParseWithSpecialChar, jsonToTSV } from "@/utils/json/json-parser";
 import { Button } from "../ui/button";
 import {
   DropdownMenu,
@@ -152,7 +153,17 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
             {clipboardOptions.map((option) => (
               <DropdownMenuItem
                 key={option.label}
-                onSelect={() => handleClipboardCopy(option.format)}
+                onSelect={async () => {
+                  try {
+                    await handleClipboardCopy(option.format);
+                  } catch (error) {
+                    toast({
+                      title: "Failed to copy to clipboard",
+                      description: prettyError(error),
+                      variant: "danger",
+                    });
+                  }
+                }}
               >
                 <option.icon className="mo-dropdown-icon" />
                 <div className="flex flex-col">
@@ -171,12 +182,9 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
 };
 
 function fetchJson(url: string): Promise<Record<string, unknown>[]> {
-  return fetch(url).then((res) => {
-    if (!res.ok) {
-      throw new Error(res.statusText);
-    }
-    return res.json();
-  });
+  return fetchText(url).then(
+    jsonParseWithSpecialChar<Record<string, unknown>[]>,
+  );
 }
 
 function fetchText(url: string): Promise<string> {

package/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -18,6 +18,7 @@ import { useRef, useState } from "react";
 import { useLocale } from "react-aria";
 import { ColumnName } from "@/components/datasources/components";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
+import { Spinner } from "@/components/icons/spinner";
 import { KeyboardHotkeys } from "@/components/shortcuts/renderShortcut";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -29,6 +30,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { DelayMount } from "@/components/utils/delay-mount";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useKeydownOnElement } from "@/hooks/useHotkey";
 import { Banner, ErrorBanner } from "@/plugins/impl/common/error-banner";
@@ -136,11 +138,9 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
 
     if (!rows) {
       return (
-        <SimpleBanner
-          kind="warn"
-          Icon={AlertTriangle}
-          message="No data available. Please report the issue."
-        />
+        <DelayMount milliseconds={200}>
+          <Spinner size="medium" centered={true} />
+        </DelayMount>
       );
     }
 

package/src/components/data-table/url-detector.tsx

@@ -1,6 +1,8 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import { marked } from "marked";
 import { useState } from "react";
+import { MarkdownRenderer } from "@/components/markdown/markdown-renderer";
 import {
   Popover,
   PopoverContent,
@@ -82,6 +84,47 @@ export function parseContent(text: string): ContentPart[] {
   });
 }
 
+export function isMarkdown(text: string): boolean {
+  const tokens = marked.lexer(text);
+
+  const commonMarkdownIndicators = new Set([
+    "space",
+    "code",
+    "fences",
+    "heading",
+    "hr",
+    "link",
+    "blockquote",
+    "list",
+    "html",
+    "def",
+    "table",
+    "lheading",
+    "escape",
+    "tag",
+    "reflink",
+    "strong",
+    "codespan",
+    "url",
+  ]);
+
+  return tokens.some((token) => commonMarkdownIndicators.has(token.type));
+}
+
+// Wrapper component so that we call isMarkdown only on trigger
+export const MarkdownUrlDetector = ({
+  content,
+  parts,
+}: {
+  content: string;
+  parts: ContentPart[];
+}) => {
+  if (isMarkdown(content)) {
+    return <MarkdownRenderer content={content} />;
+  }
+  return <UrlDetector parts={parts} />;
+};
+
 export const UrlDetector = ({ parts }: { parts: ContentPart[] }) => {
   const markup = parts.map((part, idx) => {
     if (part.type === "url") {

package/src/components/datasources/utils.ts

@@ -66,11 +66,13 @@ function getFormatter(dialect: string): SqlCodeFormatter {
           `SELECT ${columnName === "*" ? "*" : `"${columnName}"`} FROM ${tableName} LIMIT 100`,
       };
     case "db2":
+    case "db2i":
     case "mysql":
     case "sqlite":
     case "mariadb":
     case "cassandra":
     case "noql":
+    case "awsathena":
     case "athena":
     case "hive":
     case "redshift":
@@ -79,6 +81,11 @@ function getFormatter(dialect: string): SqlCodeFormatter {
     case "mongodb":
     case "oracle":
     case "oracledb":
+    case "couchbase":
+    case "tidb":
+    case "spark":
+    case "trino":
+    case "singlestoredb":
       return defaultFormatter;
     default:
       logNever(dialect);

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -254,11 +254,14 @@ export const AiCompletionEditor: React.FC<Props> = ({
   };
 
   return (
-    <div className={cn("flex flex-col w-full rounded-[inherit]", className)}>
+    <div
+      data-ai-input-open={showInput}
+      className={cn("flex flex-col w-full rounded-[inherit]", className)}
+    >
       <div
         className={cn(
-          "flex items-center gap-2 border-b px-3 transition-all rounded-[inherit] rounded-b-none duration-300",
-          showInput && "max-h-[400px] min-h-11 visible",
+          "flex items-center gap-2 px-3 transition-all rounded-[inherit] rounded-b-none duration-300",
+          showInput && "max-h-[400px] border-b min-h-11 visible",
           !showInput && "max-h-0 min-h-0 invisible",
         )}
       >

package/src/components/editor/cell/CreateCellButton.tsx

@@ -1,12 +1,14 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { DatabaseIcon, DiamondPlusIcon, PlusIcon } from "lucide-react";
+import { useState } from "react";
 import { Button } from "@/components/editor/inputs/Inputs";
+import { MinimalHotkeys } from "@/components/shortcuts/renderShortcut";
 import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
 import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
@@ -24,11 +26,17 @@ export const CreateCellButton = ({
   connectionState,
   onClick,
   tooltipContent,
+  oneClickShortcut,
 }: {
   connectionState: WebSocketState;
   tooltipContent: React.ReactNode;
   onClick: ((opts: { code: string; hideCode?: boolean }) => void) | undefined;
+  oneClickShortcut: "shift" | "mod";
 }) => {
+  const { createNewCell, addSetupCellIfDoesntExist } = useCellActions();
+  const shortcut = `${oneClickShortcut}-Click`;
+  const [justOpened, setJustOpened] = useState(false);
+
   const baseTooltipContent =
     getConnectionTooltip(connectionState) || tooltipContent;
   const finalTooltipContent = isAppInteractionDisabled(connectionState) ? (
@@ -37,107 +45,109 @@ export const CreateCellButton = ({
     <div className="flex flex-col gap-4">
       <div>{baseTooltipContent}</div>
       <div className="text-xs text-muted-foreground font-medium pt-1 -mt-2 border-t border-border">
-        Right-click for cell types
+        {<MinimalHotkeys shortcut={shortcut} className="inline" />}{" "}
+        <span>to auto insert a cell</span>
       </div>
     </div>
   );
 
+  const addPythonCell = () => {
+    onClick?.({ code: "" });
+  };
+
+  // NB: When adding the marimo import for markdown and SQL, we run it
+  // automatically regardless of whether autoinstantiate or lazy execution is
+  // enabled; the user experience is confusing otherwise (how does the user
+  // know they need to run import marimo as mo. first?).
+  const addMarkdownCell = () => {
+    maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
+    onClick?.({
+      code: LanguageAdapters.markdown.defaultCode,
+      hideCode: true,
+    });
+  };
+
+  const addSQLCell = () => {
+    maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
+    onClick?.({ code: LanguageAdapters.sql.defaultCode });
+  };
+
+  const addSetupCell = () => {
+    addSetupCellIfDoesntExist({});
+  };
+
+  const renderIcon = (icon: React.ReactNode) => {
+    return <div className="mr-3 text-muted-foreground">{icon}</div>;
+  };
+
+  const handleButtonClick = (e: React.MouseEvent) => {
+    if (oneClickShortcut === "shift" ? e.shiftKey : e.metaKey || e.ctrlKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      addPythonCell();
+    }
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) {
+      setJustOpened(true);
+      // Allow interactions after a brief delay
+      setTimeout(() => {
+        setJustOpened(false);
+      }, 200);
+    }
+  };
+
+  const handleFirstItemClick = (e: React.MouseEvent) => {
+    // Hack to prevent the first item from being clicked when the dropdown is opened
+    if (justOpened) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    addPythonCell();
+  };
+
   return (
-    <CreateCellButtonContextMenu onClick={onClick}>
-      <Tooltip content={finalTooltipContent}>
+    <DropdownMenu onOpenChange={handleOpenChange}>
+      <DropdownMenuTrigger asChild={true} onPointerDown={handleButtonClick}>
         <Button
-          onClick={() => onClick?.({ code: "" })}
           className={cn(
-            "shoulder-button hover-action",
+            "border-none hover-action shadow-none! bg-transparent! focus-visible:outline-none",
             isAppInteractionDisabled(connectionState) && " inactive-button",
           )}
           onMouseDown={Events.preventFocus}
-          shape="circle"
           size="small"
           color="hint-green"
           data-testid="create-cell-button"
         >
-          <PlusIcon strokeWidth={1.8} />
+          <Tooltip content={finalTooltipContent}>
+            <PlusIcon
+              strokeWidth={4}
+              size={14}
+              className="opacity-60 hover:opacity-90"
+            />
+          </Tooltip>
         </Button>
-      </Tooltip>
-    </CreateCellButtonContextMenu>
-  );
-};
-
-const CreateCellButtonContextMenu = (props: {
-  onClick: ((opts: { code: string; hideCode?: boolean }) => void) | undefined;
-  children: React.ReactNode;
-}) => {
-  const { children, onClick } = props;
-  const { createNewCell, addSetupCellIfDoesntExist } = useCellActions();
-
-  if (!onClick) {
-    return children;
-  }
-
-  // NB: When adding the marimo import for markdown and SQL, we run it
-  // automatically regardless of whether autoinstantiate or lazy execution is
-  // enabled; the user experience is confusing otherwise (how does the user
-  // know they need to run import marimo as mo. first?).
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger>{children}</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem
-          key="python"
-          onSelect={(evt) => {
-            evt.stopPropagation();
-            onClick({ code: "" });
-          }}
-        >
-          <div className="mr-3 text-muted-foreground">
-            <PythonIcon />
-          </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="bottom" sideOffset={-30}>
+        <DropdownMenuItem onClick={handleFirstItemClick}>
+          {renderIcon(<PythonIcon />)}
           Python cell
-        </ContextMenuItem>
-
-        <ContextMenuItem
-          key="markdown"
-          onSelect={(evt) => {
-            evt.stopPropagation();
-            maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
-            onClick({
-              code: LanguageAdapters.markdown.defaultCode,
-              hideCode: true,
-            });
-          }}
-        >
-          <div className="mr-3 text-muted-foreground">
-            <MarkdownIcon />
-          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={addMarkdownCell}>
+          {renderIcon(<MarkdownIcon />)}
           Markdown cell
-        </ContextMenuItem>
-        <ContextMenuItem
-          key="sql"
-          onSelect={(evt) => {
-            evt.stopPropagation();
-            maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
-            onClick({ code: LanguageAdapters.sql.defaultCode });
-          }}
-        >
-          <div className="mr-3 text-muted-foreground">
-            <DatabaseIcon size={13} strokeWidth={1.5} />
-          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={addSQLCell}>
+          {renderIcon(<DatabaseIcon size={13} strokeWidth={1.5} />)}
           SQL cell
-        </ContextMenuItem>
-        <ContextMenuItem
-          key="setup"
-          onSelect={(evt) => {
-            evt.stopPropagation();
-            addSetupCellIfDoesntExist({});
-          }}
-        >
-          <div className="mr-3 text-muted-foreground">
-            <DiamondPlusIcon size={13} strokeWidth={1.5} />
-          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={addSetupCell}>
+          {renderIcon(<DiamondPlusIcon size={13} strokeWidth={1.5} />)}
           Setup cell
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };

package/src/components/editor/chrome/panels/packages-panel.tsx

@@ -23,6 +23,7 @@ import { toast } from "@/components/ui/use-toast";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
 import type { DependencyTreeNode } from "@/core/network/types";
+import { stripPackageManagerPrefix } from "@/core/packages/package-input-utils";
 import {
   showRemovePackageToast,
   showUpgradePackageToast,
@@ -191,8 +192,9 @@ const InstallPackageForm: React.FC<{
   };
 
   const installPackages = () => {
+    const cleanedInput = stripPackageManagerPrefix(input);
     handleInstallPackages(
-      input.split(",").map((p) => p.trim()),
+      [cleanedInput], // the backend will handle splitting the packages
       onSuccessInstallPackages,
     );
   };

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

@@ -14,6 +14,7 @@ import {
   type LucideIcon,
   NetworkIcon,
   NotebookPenIcon,
+  ScrollTextIcon,
   SquareDashedBottomCodeIcon,
   TextSearchIcon,
   XCircleIcon,
@@ -133,6 +134,12 @@ export const PANELS: PanelDescriptor[] = [
   // observability panels are less crucial than variables
   // or datasets, so they are positioned at the end of the
   // sidebar.
+  {
+    type: "outline",
+    Icon: ScrollTextIcon,
+    tooltip: "View outline",
+    position: "sidebar",
+  },
   {
     type: "documentation",
     Icon: TextSearchIcon,

package/src/components/editor/file-tree/__tests__/file-expolorer.test.ts

@@ -0,0 +1,179 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import type { FileInfo } from "@/core/network/types";
+import { filterHiddenTree, isDirectoryOrFileHidden } from "../file-explorer";
+
+// Helpers to build FileInfo objects for tests
+const file = (name: string, path: string): FileInfo => ({
+  id: path,
+  name,
+  path,
+  isDirectory: false,
+  isMarimoFile: false,
+  children: [],
+});
+
+const dir = (
+  name: string,
+  path: string,
+  children: FileInfo[] = [],
+): FileInfo => ({
+  id: path,
+  name,
+  path,
+  isDirectory: true,
+  isMarimoFile: false,
+  children,
+});
+
+describe("isDirectoryOrFileHidden", () => {
+  it("should return true for files starting with dot", () => {
+    expect(isDirectoryOrFileHidden(".git")).toBe(true);
+    expect(isDirectoryOrFileHidden(".env")).toBe(true);
+    expect(isDirectoryOrFileHidden(".gitignore")).toBe(true);
+  });
+
+  it("should return false for normal files", () => {
+    expect(isDirectoryOrFileHidden("README.md")).toBe(false);
+    expect(isDirectoryOrFileHidden("package.json")).toBe(false);
+    expect(isDirectoryOrFileHidden("index.ts")).toBe(false);
+  });
+
+  it("should return false for files with dots in the middle", () => {
+    expect(isDirectoryOrFileHidden("file.test.ts")).toBe(false);
+    expect(isDirectoryOrFileHidden("my.config.js")).toBe(false);
+  });
+});
+
+describe("filterHiddenTree", () => {
+  it("should return all items when showHidden is true", () => {
+    const list: FileInfo[] = [
+      dir(".git", "/.git", []),
+      file("README.md", "/README.md"),
+      file(".env", "/.env"),
+    ];
+
+    const result = filterHiddenTree(list, true);
+
+    expect(result).toBe(list); // should be the exact same reference
+    expect(result).toHaveLength(3);
+  });
+
+  it("should filter out hidden files when showHidden is false", () => {
+    const list: FileInfo[] = [
+      dir(".git", "/.git"),
+      file("README.md", "/README.md"),
+      file(".env", "/.env"),
+      file("package.json", "/package.json"),
+    ];
+
+    const result = filterHiddenTree(list, false);
+
+    expect(result).toHaveLength(2);
+    expect(result[0].name).toBe("README.md");
+    expect(result[1].name).toBe("package.json");
+  });
+
+  it("should filter hidden directories recursively", () => {
+    const list: FileInfo[] = [
+      dir("src", "/src", [
+        file("index.ts", "/src/index.ts"),
+        file(".DS_Store", "/src/.DS_Store"),
+        file("utils.ts", "/src/utils.ts"),
+      ]),
+      dir(".git", "/.git", [file("config", "/.git/config")]),
+    ];
+
+    const result = filterHiddenTree(list, false);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe("src");
+    expect(result[0].children).toHaveLength(2);
+    expect(result[0].children?.[0].name).toBe("index.ts");
+    expect(result[0].children?.[1].name).toBe("utils.ts");
+  });
+
+  it("should handle nested hidden files", () => {
+    const list: FileInfo[] = [
+      dir("project", "/project", [
+        dir("src", "/project/src", [
+          file("index.ts", "/project/src/index.ts"),
+          file(".backup", "/project/src/.backup"),
+        ]),
+        file(".env", "/project/.env"),
+      ]),
+    ];
+
+    const result = filterHiddenTree(list, false);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].children).toHaveLength(1);
+    expect(result[0].children?.[0].name).toBe("src");
+    expect(result[0].children?.[0].children).toHaveLength(1);
+    expect(result[0].children?.[0].children?.[0].name).toBe("index.ts");
+  });
+
+  it("should preserve directory structure when no children are filtered", () => {
+    const list: FileInfo[] = [
+      dir("src", "/src", [
+        file("index.ts", "/src/index.ts"),
+        file("utils.ts", "/src/utils.ts"),
+      ]),
+    ];
+
+    const result = filterHiddenTree(list, true);
+
+    // Should return the same reference since nothing changed
+    expect(result[0]).toBe(list[0]);
+  });
+
+  it("should create new object only when children are filtered", () => {
+    const list: FileInfo[] = [
+      dir("src", "/src", [
+        file("index.ts", "/src/index.ts"),
+        file(".hidden", "/src/.hidden"),
+      ]),
+    ];
+
+    const result = filterHiddenTree(list, false);
+
+    // Should be a new object since children changed
+    expect(result[0]).not.toBe(list[0]);
+    expect(result[0].children).not.toBe(list[0].children);
+  });
+
+  it("should handle empty list", () => {
+    const result = filterHiddenTree([], false);
+    expect(result).toEqual([]);
+  });
+
+  it("should handle empty children arrays", () => {
+    const list: FileInfo[] = [dir("empty-dir", "/empty-dir", [])];
+
+    const result = filterHiddenTree(list, false);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].children).toEqual([]);
+  });
+
+  it("should handle deeply nested structures", () => {
+    const list: FileInfo[] = [
+      dir("level1", "/level1", [
+        dir("level2", "/level1/level2", [
+          dir("level3", "/level1/level2/level3", [
+            file("file.ts", "/level1/level2/level3/file.ts"),
+            file(".hidden", "/level1/level2/level3/.hidden"),
+          ]),
+        ]),
+        file(".ignore", "/level1/.ignore"),
+      ]),
+    ];
+
+    const result = filterHiddenTree(list, false);
+
+    expect(result[0].children?.[0].children?.[0].children).toHaveLength(1);
+    expect(result[0].children?.[0].children?.[0].children?.[0].name).toBe(
+      "file.ts",
+    );
+  });
+});