@marimo-team/islands 0.15.1-dev37 → 0.15.1

package/src/core/ai/model-registry.ts

@@ -13,6 +13,18 @@ import { once } from "@/utils/once";
 import type { ProviderId } from "./ids/ids";
 import { AiModelId, type QualifiedModelId, type ShortModelId } from "./ids/ids";
 
+export const PROVIDER_SORT_ORDER: ProviderId[] = [
+  // Sort by popular ones
+  "anthropic",
+  "openai",
+  "google",
+  "github",
+  "deepseek",
+  "azure",
+  "bedrock",
+  "ollama",
+];
+
 export interface AiModel extends AiModelType {
   roles: Role[];
   model: ShortModelId;
@@ -41,13 +53,21 @@ const getKnownModelMap = once((): ReadonlyMap<QualifiedModelId, AiModel> => {
   return modelMap;
 });
 
-const getProviderMap = once((): ReadonlyMap<ProviderId, AiProvider> => {
-  const providerMap = new Map<ProviderId, AiProvider>();
-  for (const provider of providers) {
-    providerMap.set(provider.id as ProviderId, provider);
-  }
-  return providerMap;
-});
+const getProviderMap = once(
+  (): {
+    providerMap: ReadonlyMap<ProviderId, AiProvider>;
+    providerToOrderIdx: ReadonlyMap<ProviderId, number>;
+  } => {
+    const providerMap = new Map<ProviderId, AiProvider>();
+    const providerToOrderIdx = new Map<ProviderId, number>();
+    providers.forEach((provider, idx) => {
+      const providerId = provider.id as ProviderId;
+      providerMap.set(providerId, provider);
+      providerToOrderIdx.set(providerId, idx);
+    });
+    return { providerMap, providerToOrderIdx };
+  },
+);
 
 export class AiModelRegistry {
   private modelsByProviderMap = new MultiMap<ProviderId, AiModel>();
@@ -66,7 +86,8 @@ export class AiModelRegistry {
   }
 
   static getProviderInfo(providerId: ProviderId) {
-    return getProviderMap().get(providerId);
+    const { providerMap } = getProviderMap();
+    return providerMap.get(providerId);
   }
 
   /**
@@ -180,6 +201,21 @@ export class AiModelRegistry {
     return this.modelsByProviderMap;
   }
 
+  getListModelsByProvider(): Array<[ProviderId, AiModel[]]> {
+    const modelsByProvider = this.getGroupedModelsByProvider();
+    const arrayModels = [...modelsByProvider.entries()];
+    const providerToOrderIdx = getProviderMap().providerToOrderIdx;
+
+    arrayModels.sort((a, b) => {
+      const aProvider = a[0];
+      const bProvider = b[0];
+      const aOrderIdx = providerToOrderIdx.get(aProvider) ?? 0;
+      const bOrderIdx = providerToOrderIdx.get(bProvider) ?? 0;
+      return aOrderIdx - bOrderIdx;
+    });
+    return arrayModels;
+  }
+
   getModelsMap() {
     return this.modelsMap;
   }

package/src/core/codemirror/language/languages/sql/utils.ts

@@ -12,7 +12,10 @@ import {
   SQLite,
   StandardSQL,
 } from "@codemirror/lang-sql";
-import { DuckDBDialect } from "@marimo-team/codemirror-sql/dialects";
+import {
+  BigQueryDialect,
+  DuckDBDialect,
+} from "@marimo-team/codemirror-sql/dialects";
 import type { DataSourceConnection } from "@/core/kernel/messages";
 
 export function guessDialect(
@@ -38,6 +41,8 @@ export function guessDialect(
     case "oracledb":
     case "oracle":
       return PLSQL;
+    case "bigquery":
+      return BigQueryDialect;
     default:
       return undefined;
   }

package/src/plugins/impl/FileBrowserPlugin.tsx

@@ -17,13 +17,13 @@ import { toast } from "@/components/ui/use-toast";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
 import { cn } from "@/utils/cn";
-import { Logger } from "@/utils/Logger";
 import { type FilePath, PathBuilder, Paths } from "@/utils/paths";
 import { getProtocolAndParentDirectories } from "@/utils/pathUtils";
 import { PluralWords } from "@/utils/pluralize";
 import { createPlugin } from "../core/builder";
 import { renderHTML } from "../core/RenderHTML";
 import { rpc } from "../core/rpc";
+import { Banner } from "./common/error-banner";
 
 /**
  * Arguments for a file browser component.
@@ -108,6 +108,7 @@ export const FileBrowserPlugin = createPlugin<S>("marimo-file-browser")
     <FileBrowser
       {...props.data}
       {...props.functions}
+      host={props.host}
       value={props.value}
       setValue={props.setValue}
     />
@@ -122,6 +123,7 @@ const PARENT_DIRECTORY = "..";
 interface FileBrowserProps extends Data, PluginFunctions {
   value: S;
   setValue: (value: S) => void;
+  host: HTMLElement;
 }
 
 /**
@@ -138,27 +140,19 @@ export const FileBrowser = ({
   label,
   restrictNavigation,
   list_directory,
+  host,
 }: FileBrowserProps): JSX.Element | null => {
   const [path, setPath] = useInternalStateWithSync(initialPath);
   const [selectAllLabel, setSelectAllLabel] = useState("Select all");
   const [isUpdatingPath, setIsUpdatingPath] = useState(false);
 
-  const { data, error, isPending } = useAsyncData(
-    () =>
-      list_directory({
-        path: path,
-      }),
-    [path],
-  );
+  // HACK: use the random-id of the host element to force a re-render
+  // when the random-id changes, this means the cell was re-rendered
+  const randomId = host.closest("[random-id]")?.getAttribute("random-id");
 
-  if (error) {
-    Logger.error(error);
-    toast({
-      title: `Could not load files in directory ${path}`,
-      description: error.message,
-      variant: "danger",
-    });
-  }
+  const { data, error, isPending } = useAsyncData(() => {
+    return list_directory({ path: path });
+  }, [path, randomId]);
 
   if (isPending) {
     return null;
@@ -413,13 +407,12 @@ export const FileBrowser = ({
 
     if (multiple) {
       return (
-        <div className="grid grid-cols-2 items-center border">
-          <div className="justify-self-start mb-1">{labelText}</div>
-          <div className="justify-self-end">
+        <div className="flex items-center justify-between border px-2">
+          <div className="mb-1">{labelText}</div>
+          <div>
             <Button
               size="xs"
               variant="link"
-              className="w-full"
               onClick={
                 selectAllLabel === "Select all"
                   ? () => selectAllFiles()
@@ -438,6 +431,7 @@ export const FileBrowser = ({
 
   return (
     <div>
+      {error && <Banner kind="danger">{error.message}</Banner>}
       {renderHeader()}
       <NativeSelect
         className="mt-2 w-full"

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -62,12 +62,29 @@ const AnyWidgetSlot = (props: Props) => {
   // JS is an ESM file with a render function on it
   // export function render({ model, el }) {
   //   ...
-  const { data: module, error } = useAsyncData(async () => {
+  const {
+    data: module,
+    error,
+    refetch,
+  } = useAsyncData(async () => {
     const url = asRemoteURL(jsUrl).toString();
     return await import(/* @vite-ignore */ url);
-    // Re-render on jsHash change instead of url change (since URLs may change)
+    // Re-render on jsHash change (which is a hash of the contents of the file)
+    // instead of a jsUrl change because URLs may change without the contents
+    // actually changing (and we don't want to re-render on every change).
+    // If there is an error loading the URL (e.g. maybe an invalid or old URL),
+    // we also want to re-render.
   }, [jsHash]);
 
+  // If there is an error and the jsUrl has changed, we want to re-render
+  // because the URL may have changed to a valid URL.
+  const hasError = Boolean(error);
+  useEffect(() => {
+    if (hasError && jsUrl) {
+      refetch();
+    }
+  }, [hasError, jsUrl]);
+
   const valueWithBuffer = useMemo(() => {
     return updateBufferPaths(props.value, bufferPaths);
   }, [props.value, bufferPaths]);

package/src/plugins/impl/common/error-banner.tsx

@@ -17,9 +17,11 @@ import { Logger } from "@/utils/Logger";
 export const ErrorBanner = ({
   error,
   className,
+  action,
 }: {
   error: Error | string;
   className?: string;
+  action?: React.ReactNode;
 }) => {
   const [open, setOpen] = useState(false);
 
@@ -39,6 +41,7 @@ export const ErrorBanner = ({
         onClick={() => setOpen(true)}
       >
         <span className="line-clamp-4">{message}</span>
+        {action && <div className="flex justify-end">{action}</div>}
       </Banner>
       <AlertDialog open={open} onOpenChange={setOpen}>
         <AlertDialogContent className="max-w-[80%] max-h-[80%] overflow-hidden flex flex-col">