@marimo-team/islands 0.16.5 → 0.17.0

package/src/components/app-config/user-config-form.tsx

@@ -559,6 +559,35 @@ export const UserConfigForm: React.FC = () => {
               />
             </SettingGroup>
 
+            <SettingGroup title="Diagnostics">
+              <FormField
+                control={form.control}
+                name="diagnostics.sql_linter"
+                render={({ field }) => (
+                  <div className="flex flex-col space-y-1">
+                    <FormItem className={formItemClasses}>
+                      <FormLabel>SQL Linter</FormLabel>
+                      <FormControl>
+                        <Checkbox
+                          data-testid="sql-linter-checkbox"
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                      <IsOverridden
+                        userConfig={config}
+                        name="diagnostics.sql_linter"
+                      />
+                    </FormItem>
+                    <FormDescription>
+                      Better linting and autocompletions for SQL cells.
+                    </FormDescription>
+                  </div>
+                )}
+              />
+            </SettingGroup>
+
             <SettingGroup title="Keymap">
               <FormField
                 control={form.control}
@@ -1281,31 +1310,6 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
-            <FormField
-              control={form.control}
-              name="experimental.sql_linter"
-              render={({ field }) => (
-                <div className="flex flex-col gap-y-1">
-                  <FormItem className={formItemClasses}>
-                    <FormLabel className="font-normal">SQL Linter</FormLabel>
-                    <FormControl>
-                      <Checkbox
-                        data-testid="sql-linter-checkbox"
-                        checked={field.value === true}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                  <IsOverridden
-                    userConfig={config}
-                    name="experimental.sql_linter"
-                  />
-                  <FormDescription>
-                    Enable experimental SQL linting and autocompletion.
-                  </FormDescription>
-                </div>
-              )}
-            />
             <FormField
               control={form.control}
               name="experimental.external_agents"

package/src/components/chat/chat-utils.ts

@@ -127,7 +127,7 @@ export async function handleToolCall({
       addToolResult({
         tool: toolCall.toolName,
         toolCallId: toolCall.toolCallId,
-        output: response,
+        output: response.result || response.error,
       });
     } else {
       // Invoke the backend/mcp tool
@@ -153,7 +153,7 @@ export async function handleToolCall({
 
 /**
  * Checks if we should send a message automatically based on the messages.
- * We only want to send a message if we have completed tool calls and there is no reply yet.
+ * We only want to send a message if all tool calls are completed and there is no reply yet.
  */
 export function hasPendingToolCalls(messages: UIMessage[]): boolean {
   if (messages.length === 0) {
@@ -177,7 +177,12 @@ export function hasPendingToolCalls(messages: UIMessage[]): boolean {
     part.type.startsWith("tool-"),
   ) as ToolUIPart[];
 
-  const hasCompletedToolCalls = toolParts.some(
+  // Guard against no tool parts
+  if (toolParts.length === 0) {
+    return false;
+  }
+
+  const allToolCallsCompleted = toolParts.every(
     (part) => part.state === "output-available",
   );
 
@@ -186,6 +191,8 @@ export function hasPendingToolCalls(messages: UIMessage[]): boolean {
   const hasTextContent =
     lastPart.type === "text" && lastPart.text?.trim().length > 0;
 
+  Logger.warn("All tool calls completed: %s", allToolCallsCompleted);
+
   // Only auto-send if we have completed tool calls and there is no reply yet
-  return hasCompletedToolCalls && !hasTextContent;
+  return allToolCallsCompleted && !hasTextContent;
 }

package/src/components/data-table/__tests__/header-items.test.tsx

@@ -0,0 +1,117 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { SortingState } from "@tanstack/react-table";
+import { describe, expect, it, vi } from "vitest";
+
+describe("multi-column sorting logic", () => {
+  // Extract the core sorting logic to test in isolation
+  const handleSort = (
+    columnId: string,
+    desc: boolean,
+    sortingState: SortingState,
+    setSorting: (state: SortingState) => void,
+    clearSorting: () => void,
+  ) => {
+    const currentSort = sortingState.find((s) => s.id === columnId);
+
+    if (currentSort && currentSort.desc === desc) {
+      // Clicking the same sort again - remove it
+      clearSorting();
+    } else {
+      // New sort or different direction - move to end of stack
+      const otherSorts = sortingState.filter((s) => s.id !== columnId);
+      const newSort = { id: columnId, desc };
+      setSorting([...otherSorts, newSort]);
+    }
+  };
+
+  it("implements stack-based sorting: moves re-clicked column to end", () => {
+    const sortingState: SortingState = [
+      { id: "name", desc: false },
+      { id: "age", desc: false },
+    ];
+    const setSorting = vi.fn();
+    const clearSorting = vi.fn();
+
+    // Click Desc on age - should move age to end with desc=true
+    handleSort("age", true, sortingState, setSorting, clearSorting);
+
+    expect(setSorting).toHaveBeenCalledWith([
+      { id: "name", desc: false },
+      { id: "age", desc: true },
+    ]);
+    expect(clearSorting).not.toHaveBeenCalled();
+  });
+
+  it("removes sort when clicking same direction twice", () => {
+    const sortingState: SortingState = [{ id: "age", desc: false }];
+    const setSorting = vi.fn();
+    const clearSorting = vi.fn();
+
+    // Click Asc on age again - should remove the sort
+    handleSort("age", false, sortingState, setSorting, clearSorting);
+
+    expect(clearSorting).toHaveBeenCalled();
+    expect(setSorting).not.toHaveBeenCalled();
+  });
+
+  it("adds new column to end of stack", () => {
+    const sortingState: SortingState = [{ id: "name", desc: false }];
+    const setSorting = vi.fn();
+    const clearSorting = vi.fn();
+
+    // Click Asc on age - should add age to end
+    handleSort("age", false, sortingState, setSorting, clearSorting);
+
+    expect(setSorting).toHaveBeenCalledWith([
+      { id: "name", desc: false },
+      { id: "age", desc: false },
+    ]);
+    expect(clearSorting).not.toHaveBeenCalled();
+  });
+
+  it("toggles sort direction when clicking opposite", () => {
+    const sortingState: SortingState = [{ id: "age", desc: false }];
+    const setSorting = vi.fn();
+    const clearSorting = vi.fn();
+
+    // Click Desc on age - should toggle to descending
+    handleSort("age", true, sortingState, setSorting, clearSorting);
+
+    expect(setSorting).toHaveBeenCalledWith([{ id: "age", desc: true }]);
+    expect(clearSorting).not.toHaveBeenCalled();
+  });
+
+  it("correctly calculates priority numbers", () => {
+    const sortingState: SortingState = [
+      { id: "name", desc: false },
+      { id: "age", desc: true },
+      { id: "dept", desc: false },
+    ];
+
+    // Priority is index + 1
+    const nameSort = sortingState.find((s) => s.id === "name");
+    const namePriority = nameSort ? sortingState.indexOf(nameSort) + 1 : null;
+    expect(namePriority).toBe(1);
+
+    const deptSort = sortingState.find((s) => s.id === "dept");
+    const deptPriority = deptSort ? sortingState.indexOf(deptSort) + 1 : null;
+    expect(deptPriority).toBe(3);
+  });
+
+  it("handles removing column from middle of stack", () => {
+    const sortingState: SortingState = [
+      { id: "name", desc: false },
+      { id: "age", desc: true },
+      { id: "dept", desc: false },
+    ];
+    const setSorting = vi.fn();
+    const clearSorting = vi.fn();
+
+    // Click Desc on age again - should remove it
+    handleSort("age", true, sortingState, setSorting, clearSorting);
+
+    expect(clearSorting).toHaveBeenCalled();
+    // After removal, dept should move from priority 3 to priority 2
+  });
+});

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

@@ -1,7 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 "use no memo";
 
-import type { Column } from "@tanstack/react-table";
+import type { Column, Table } from "@tanstack/react-table";
 import { capitalize } from "lodash-es";
 import { FilterIcon, MinusIcon, TextIcon, XIcon } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
@@ -68,6 +68,7 @@ interface DataTableColumnHeaderProps<TData, TValue>
   column: Column<TData, TValue>;
   header: React.ReactNode;
   calculateTopKRows?: CalculateTopKRows;
+  table?: Table<TData>;
 }
 
 export const DataTableColumnHeader = <TData, TValue>({
@@ -75,6 +76,7 @@ export const DataTableColumnHeader = <TData, TValue>({
   header,
   className,
   calculateTopKRows,
+  table,
 }: DataTableColumnHeaderProps<TData, TValue>) => {
   const [isFilterValueOpen, setIsFilterValueOpen] = useState(false);
   const { locale } = useLocale();
@@ -117,7 +119,7 @@ export const DataTableColumnHeader = <TData, TValue>({
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           {renderDataType(column)}
-          {renderSorts(column)}
+          {renderSorts(column, table)}
           {renderCopyColumn(column)}
           {renderColumnPinning(column)}
           {renderColumnWrapping(column)}

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

@@ -165,7 +165,7 @@ export function generateColumns<T>({
         return row[key as keyof T];
       },
 
-      header: ({ column }) => {
+      header: ({ column, table }) => {
         const stats = chartSpecModel?.getColumnStats(key);
         const dtype = column.columnDef.meta?.dtype;
         const headerTitle = headerTooltip?.[key];
@@ -208,6 +208,7 @@ export function generateColumns<T>({
             header={headerWithTooltip}
             column={column}
             calculateTopKRows={calculateTopKRows}
+            table={table}
           />
         );
 

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

@@ -215,8 +215,13 @@ const DataTableInternal = <TData,>({
     manualPagination: manualPagination,
     getPaginationRowModel: getPaginationRowModel(),
     // sorting
-    ...(setSorting ? { onSortingChange: setSorting } : {}),
+    ...(setSorting
+      ? {
+          onSortingChange: setSorting,
+        }
+      : {}),
     manualSorting: manualSorting,
+    enableMultiSort: true,
     getSortedRowModel: getSortedRowModel(),
     // filtering
     manualFiltering: true,
@@ -302,7 +307,7 @@ const DataTableInternal = <TData,>({
         )}
         <Table className="relative" ref={tableRef}>
           {showLoadingBar && (
-            <div className="absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide" />
+            <thead className="absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide" />
           )}
           {renderTableHeader(table, Boolean(maxHeight))}
           <CellSelectionProvider>

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

@@ -1,7 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { PinLeftIcon, PinRightIcon } from "@radix-ui/react-icons";
-import type { Column } from "@tanstack/react-table";
+import type { Column, SortDirection, Table } from "@tanstack/react-table";
 import {
   AlignJustifyIcon,
   ArrowDownWideNarrowIcon,
@@ -163,27 +163,80 @@ export function renderCopyColumn<TData, TValue>(column: Column<TData, TValue>) {
 const AscIcon = ArrowUpNarrowWideIcon;
 const DescIcon = ArrowDownWideNarrowIcon;
 
-export function renderSorts<TData, TValue>(column: Column<TData, TValue>) {
+export function renderSorts<TData, TValue>(
+  column: Column<TData, TValue>,
+  table?: Table<TData>,
+) {
   if (!column.getCanSort()) {
     return null;
   }
 
+  const sortDirection = column.getIsSorted();
+  const sortingIndex = column.getSortIndex();
+
+  const sortingState = table?.getState().sorting;
+  const hasMultiSort = sortingState?.length && sortingState.length > 1;
+
+  const renderSortIndex = () => {
+    return (
+      <span className="ml-auto text-xs font-medium">{sortingIndex + 1}</span>
+    );
+  };
+
+  const renderClearSort = () => {
+    if (!sortDirection) {
+      return null;
+    }
+
+    if (!hasMultiSort) {
+      // render clear sort for this column
+      return (
+        <DropdownMenuItem onClick={() => column.clearSorting()}>
+          <ChevronsUpDown className="mo-dropdown-icon" />
+          Clear sort
+        </DropdownMenuItem>
+      );
+    }
+
+    // render clear sort for all columns
+    return (
+      <DropdownMenuItem onClick={() => table?.resetSorting()}>
+        <ChevronsUpDown className="mo-dropdown-icon" />
+        Clear all sorts
+      </DropdownMenuItem>
+    );
+  };
+
+  const toggleSort = (direction: SortDirection) => {
+    // Clear sort if clicking the same direction
+    if (sortDirection === direction) {
+      column.clearSorting();
+    } else {
+      // Toggle sort direction
+      const descending = direction === "desc";
+      column.toggleSorting(descending, true);
+    }
+  };
+
   return (
     <>
-      <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+      <DropdownMenuItem
+        onClick={() => toggleSort("asc")}
+        className={sortDirection === "asc" ? "bg-accent" : ""}
+      >
         <AscIcon className="mo-dropdown-icon" />
         Asc
+        {sortDirection === "asc" && renderSortIndex()}
       </DropdownMenuItem>
-      <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+      <DropdownMenuItem
+        onClick={() => toggleSort("desc")}
+        className={sortDirection === "desc" ? "bg-accent" : ""}
+      >
         <DescIcon className="mo-dropdown-icon" />
         Desc
+        {sortDirection === "desc" && renderSortIndex()}
       </DropdownMenuItem>
-      {column.getIsSorted() && (
-        <DropdownMenuItem onClick={() => column.clearSorting()}>
-          <ChevronsUpDown className="mo-dropdown-icon" />
-          Clear sort
-        </DropdownMenuItem>
-      )}
+      {renderClearSort()}
       <DropdownMenuSeparator />
     </>
   );

package/src/components/dependency-graph/custom-node.tsx

@@ -1,13 +1,18 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import React, { memo, use, useId } from "react";
+import React, { memo, use } from "react";
 import { Handle, Position, useStore } from "reactflow";
 import { TinyCode } from "@/components/editor/cell/TinyCode";
 import { useCellIds } from "@/core/cells/cells";
 import { displayCellName } from "@/core/cells/names";
 import { cn } from "@/utils/cn";
-import { type CustomNodeProps, getNodeHeight } from "./elements";
+import {
+  type CustomNodeProps,
+  getNodeHeight,
+  INPUTS_HANDLE_ID,
+  OUTPUTS_HANDLE_ID,
+} from "./elements";
 import type { LayoutDirection } from "./types";
 
 function getWidth(canvasWidth: number) {
@@ -37,24 +42,19 @@ export const CustomNode = memo((props: CustomNodeProps) => {
   const reactFlowWidth = useStore(({ width }) => width);
   const edgeMarkers = use(EdgeMarkerContext);
 
-  const inputOneId = useId();
-  const inputTwoId = useId();
-  const outputOneId = useId();
-  const outputTwoId = useId();
-
   const linesOfCode = cell.code.split("\n").length;
   return (
     <div>
       <Handle
         type="target"
-        id={inputOneId}
+        id={INPUTS_HANDLE_ID}
         data-testid="input-one"
         position={edgeMarkers === "LR" ? Position.Left : Position.Top}
         style={{ background: color }}
       />
       <Handle
         type="source"
-        id={inputTwoId}
+        id={INPUTS_HANDLE_ID}
         data-testid="input-two"
         position={edgeMarkers === "LR" ? Position.Left : Position.Top}
         style={{ background: color }}
@@ -76,14 +76,14 @@ export const CustomNode = memo((props: CustomNodeProps) => {
       </div>
       <Handle
         type="source"
-        id={outputOneId}
+        id={OUTPUTS_HANDLE_ID}
         data-testid="output-one"
         position={edgeMarkers === "LR" ? Position.Right : Position.Bottom}
         style={{ background: color }}
       />
       <Handle
         type="target"
-        id={outputTwoId}
+        id={OUTPUTS_HANDLE_ID}
         data-testid="output-two"
         position={edgeMarkers === "LR" ? Position.Right : Position.Bottom}
         style={{ background: color }}

package/src/components/dependency-graph/elements.ts

@@ -19,6 +19,10 @@ export function getNodeHeight(linesOfCode: number) {
   return Math.min(linesOfCode * LINE_HEIGHT + 35, 200);
 }
 
+// The nodes must have the same handle IDs to ensure edges connect correctly
+export const OUTPUTS_HANDLE_ID = "outputs";
+export const INPUTS_HANDLE_ID = "inputs";
+
 interface ElementsBuilder {
   createElements: (
     cellIds: CellId[],
@@ -93,8 +97,8 @@ export class VerticalElementsBuilder implements ElementsBuilder {
           }
           visited.add(key);
           edges.push(
-            this.createEdge(fromId, toId, "inputs"),
-            this.createEdge(fromId, toId, "outputs"),
+            this.createEdge(fromId, toId, INPUTS_HANDLE_ID),
+            this.createEdge(fromId, toId, OUTPUTS_HANDLE_ID),
           );
         }
       }
@@ -114,8 +118,9 @@ export class TreeElementsBuilder implements ElementsBuilder {
       // Make thicker
       style: { strokeWidth: 2 },
       source: source,
-      sourceHandle: "outputs",
-      targetHandle: "inputs",
+      // Use the same handle ids as the custom node
+      sourceHandle: OUTPUTS_HANDLE_ID,
+      targetHandle: INPUTS_HANDLE_ID,
       target: target,
     };
   }

package/src/components/dependency-graph/panels.tsx

@@ -12,7 +12,7 @@ import {
   WorkflowIcon,
   XIcon,
 } from "lucide-react";
-import React, { memo } from "react";
+import React, { memo, useId } from "react";
 import { type Edge, Panel } from "reactflow";
 import { getCellEditorView } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
@@ -44,6 +44,8 @@ export const GraphToolbar: React.FC<Props> = memo(
       onSettingsChange({ ...settings, [key]: value });
     };
 
+    const checkboxId = useId();
+
     const settingsButton = (
       <Popover>
         <PopoverTrigger asChild={true}>
@@ -56,13 +58,13 @@ export const GraphToolbar: React.FC<Props> = memo(
           <div className="flex items-center gap-2">
             <Checkbox
               data-testid="hide-pure-markdown-checkbox"
-              id="hide-pure-markdown"
+              id={checkboxId}
               checked={settings.hidePureMarkdown}
               onCheckedChange={(checked) =>
                 handleSettingChange("hidePureMarkdown", Boolean(checked))
               }
             />
-            <Label htmlFor="hide-pure-markdown">Hide pure markdown</Label>
+            <Label htmlFor={checkboxId}>Hide pure markdown</Label>
           </div>
         </PopoverContent>
       </Popover>
@@ -114,7 +116,7 @@ export const GraphSelectionPanel: React.FC<{
   onClearSelection: () => void;
   edges: Edge[];
   variables: Variables;
-}> = memo(({ selection, edges, variables, onClearSelection }) => {
+}> = memo(({ selection, variables, onClearSelection }) => {
   if (!selection) {
     return null;
   }

package/src/components/editor/Output.tsx

@@ -49,13 +49,18 @@ const LazyVegaLite = React.lazy(() =>
 type MimeBundle = Record<OutputMessage["mimetype"], { [key: string]: unknown }>;
 type MimeBundleOrTuple = MimeBundle | [MimeBundle, { [key: string]: unknown }];
 
+export type OnRefactorWithAI = (opts: {
+  prompt: string;
+  triggerImmediately: boolean;
+}) => void;
+
 /**
  * Renders an output based on an OutputMessage.
  */
 export const OutputRenderer: React.FC<{
   message: Pick<OutputMessage, "channel" | "data" | "mimetype">;
   cellId?: CellId;
-  onRefactorWithAI?: (opts: { prompt: string }) => void;
+  onRefactorWithAI?: OnRefactorWithAI;
   wrapText?: boolean;
 }> = memo((props) => {
   const { message, onRefactorWithAI, cellId, wrapText } = props;