@marimo-team/frontend 0.15.1-dev37 → 0.15.1

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">

package/dist/assets/_baseMap-Dg1mkEJY.js

@@ -1 +0,0 @@
-import{b as m}from"./_baseEach-DO-XcSIV.js";import{x as s}from"./index-CXwX4pUI.js";function e(r,o){var a=-1,t=s(r)?Array(r.length):[];return m(r,function(n,f,i){t[++a]=o(n,f,i)}),t}export{e as b};

package/dist/assets/channel-D1aHTD78.js

@@ -1 +0,0 @@
-import{U as s,C as o}from"./mermaid-Bu2fp8N3.js";const n=(a,r)=>s.lang.round(o.parse(a)[r]);export{n as c};

package/dist/assets/classDiagram-3BZAVTQC-C8Rjm-tQ.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as t,C as o}from"./chunk-JBRWN2VN-jewL7EcA.js";import{_ as e}from"./mermaid-Bu2fp8N3.js";import"./transform-B8bpuzxV.js";import"./chunk-GLLZNHP4-BFZQsgmM.js";import"./chunk-WVR4S24B-BdzaJi_f.js";import"./chunk-NRVI72HA-B7LxIi5N.js";import"./index-CXwX4pUI.js";import"./step-BwsUM5iJ.js";import"./timer-BwIYMJWC.js";var i={parser:t,get db(){return new o},renderer:s,styles:a,init:e(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{i as diagram};

package/dist/assets/classDiagram-v2-QTMF73CY-C8Rjm-tQ.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as t,C as o}from"./chunk-JBRWN2VN-jewL7EcA.js";import{_ as e}from"./mermaid-Bu2fp8N3.js";import"./transform-B8bpuzxV.js";import"./chunk-GLLZNHP4-BFZQsgmM.js";import"./chunk-WVR4S24B-BdzaJi_f.js";import"./chunk-NRVI72HA-B7LxIi5N.js";import"./index-CXwX4pUI.js";import"./step-BwsUM5iJ.js";import"./timer-BwIYMJWC.js";var i={parser:t,get db(){return new o},renderer:s,styles:a,init:e(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{i as diagram};

package/dist/assets/clone-BWlvmMhq.js

@@ -1 +0,0 @@
-import{b as n}from"./_baseUniq-urG2vBXB.js";function o(r){return n(r,4)}export{o as c};

package/dist/assets/edit-page-jgH_jXgs.css

@@ -1 +0,0 @@
-.multi-icon .second-icon{background-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.multi-icon .second-icon{background-color:color-mix(in srgb,var(--background),transparent 0%)}}.menu-item:hover .multi-icon .second-icon{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.menu-item:hover .multi-icon .second-icon{background-color:color-mix(in srgb,var(--accent),transparent 0%)}}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-border-style:solid}}}.missing-filename{text-align:center;--tw-shadow:4px 4px 0px 0px var(--tw-shadow-color,var(--base-shadow-darker)),0 0px 2px 0px var(--tw-shadow-color,#99999980);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:var(--stale)}@supports (color:color-mix(in lab,red,red)){.missing-filename{--tw-shadow-color:color-mix(in oklab,var(--stale)var(--tw-shadow-alpha),transparent)}}.missing-filename:focus,.missing-filename:hover{--tw-shadow:5px 6px 0px 0px var(--tw-shadow-color,var(--base-shadow-darker)),0 0px 4px 0px var(--tw-shadow-color,#bfbfbf80);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:var(--stale)}@supports (color:color-mix(in lab,red,red)){.missing-filename:focus,.missing-filename:hover{--tw-shadow-color:color-mix(in oklab,var(--stale)var(--tw-shadow-alpha),transparent)}}.filename{box-shadow:none;text-align:center}.filename:focus,.filename:hover{border-style:var(--tw-border-style);--tw-shadow:5px 6px 0px 0px var(--tw-shadow-color,var(--base-shadow-darker)),0 0px 4px 0px var(--tw-shadow-color,#bfbfbf80);border-width:1px;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}.cell-status-icon{margin-bottom:auto;margin-left:3px;margin-top:4px}.elapsed-time{color:var(--gray-11);font-family:var(--monospace-font);font-size:.8125rem}#App.disconnected .elapsed-time{visibility:hidden}.cell-status-disabled,.cell-status-queued,.cell-status-stale{color:var(--gray-10)}.marimo-cell .cm-mergeViewEditor .cm-editor{padding:0}.cm-merge-theme:last-child{border-bottom-left-radius:10px;border-bottom-right-radius:10px;overflow:hidden}.resize-handle,.resize-handle-collapsed{outline:none;transition:background-color .25s linear}.resize-handle-collapsed.horizontal,.resize-handle.horizontal{height:4px}.resize-handle-collapsed.vertical,.resize-handle.vertical{width:4px}.resize-handle-collapsed:hover,.resize-handle-collapsed[data-resize-handle-active],.resize-handle:hover,.resize-handle[data-resize-handle-active]{background-color:var(--slate-11)}.react-flow{direction:ltr}.react-flow__container{height:100%;left:0;position:absolute;top:0;width:100%}.react-flow__pane{cursor:-webkit-grab;cursor:grab;z-index:1}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{pointer-events:none;transform-origin:0 0;z-index:2}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{overflow:visible;pointer-events:none}.react-flow__connection-path,.react-flow__edge-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{cursor:pointer;pointer-events:visibleStroke}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{box-sizing:border-box;cursor:-webkit-grab;cursor:grab;pointer-events:all;position:absolute;transform-origin:0 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{pointer-events:none;transform-origin:left top;z-index:3}.react-flow__nodesselection-rect{cursor:-webkit-grab;cursor:grab;pointer-events:all;position:absolute}.react-flow__handle{background:#1a192b;border:1px solid #fff;border-radius:100%;height:6px;min-height:5px;min-width:5px;pointer-events:none;position:absolute;width:6px}.react-flow__handle.connectionindicator{cursor:crosshair;pointer-events:all}.react-flow__handle-bottom{bottom:-4px;left:50%;top:auto;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{left:-4px;top:50%;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{margin:15px;position:absolute;z-index:5}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{background:#ffffff80;font-size:10px;margin:0;padding:2px 3px}.react-flow__attribution a{color:#999;text-decoration:none}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{height:100%;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-group,.react-flow__node-input,.react-flow__node-output{background-color:#fff;border:1px solid #1a192b;border-radius:3px;color:#222;font-size:12px;padding:10px;text-align:center;width:150px}.react-flow__node-default.selectable:hover,.react-flow__node-group.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{align-items:center;background:#fefefe;border:none;border-bottom:1px solid #eee;box-sizing:content-box;cursor:pointer;display:flex;height:16px;justify-content:center;padding:5px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:16px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{max-height:12px;max-width:12px;width:100%}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.bottom,.react-flow__resize-control.top{cursor:ns-resize}.react-flow__resize-control.bottom.right,.react-flow__resize-control.top.left{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{background-color:#3367d9;border:1px solid #fff;border-radius:1px;height:4px;transform:translate(-50%,-50%);width:4px}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.bottom.left,.react-flow__resize-control.handle.top.left{left:0}.react-flow__resize-control.handle.bottom.right,.react-flow__resize-control.handle.top.right{left:100%}.react-flow__resize-control.line{border:0 solid #3367d9}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{height:100%;top:0;transform:translate(-50%);width:1px}.react-flow__resize-control.line.left{border-left-width:1px;left:0}.react-flow__resize-control.line.right{border-right-width:1px;left:100%}.react-flow__resize-control.line.bottom,.react-flow__resize-control.line.top{height:1px;left:0;transform:translateY(-50%);width:100%}.react-flow__resize-control.line.top{border-top-width:1px;top:0}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__pane.react-flow__pane{cursor:default}.react-flow__node.react-flow__node{cursor:pointer}.react-flow__handle.react-flow__handle{border-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.react-flow__handle.react-flow__handle{border-color:color-mix(in srgb,var(--background),transparent 0%)}}.react-flow__controls.react-flow__controls{bottom:8px}.outline-item-highlight{text-decoration:underline;-webkit-text-decoration-color:var(--primary);text-decoration-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.outline-item-highlight{-webkit-text-decoration-color:color-mix(in srgb,var(--primary),transparent 0%);text-decoration-color:color-mix(in srgb,var(--primary),transparent 0%)}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-font-weight:initial}}}.snippet-viewer h1{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,1.5));text-align:left}.snippet-viewer h1,.snippet-viewer h2{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}.snippet-viewer h2{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857))}@property --tw-font-weight{syntax:"*";inherits:false}