@marimo-team/islands 0.19.10-dev25 → 0.19.10-dev30

package/dist/main.js

@@ -73304,7 +73304,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.10-dev25"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.10-dev30"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$88 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -102162,7 +102162,7 @@ ${c}
     }), r[12] = y, r[13] = z, r[14] = G) : G = r[14], G;
   };
   var import_compiler_runtime$1 = require_compiler_runtime(), VerticalLayoutRenderer = (e) => {
-    let r = (0, import_compiler_runtime$1.c)(34), { cells: c, appConfig: d, mode: f } = e, { invisible: _ } = useDelayVisibility(c.length, f), v = useAtomValue(kioskModeAtom), y = useAtomValue(kernelStateAtom), [S] = useResolvedMarimoConfig(), w = useAtomValue(showCodeInRunModeAtom), E;
+    let r = (0, import_compiler_runtime$1.c)(37), { cells: c, appConfig: d, mode: f } = e, { invisible: _ } = useDelayVisibility(c.length, f), v = useAtomValue(kioskModeAtom), y = useAtomValue(kernelStateAtom), [S] = useResolvedMarimoConfig(), w = useAtomValue(showCodeInRunModeAtom), E;
     r[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (E = new URLSearchParams(window.location.search), r[0] = E) : E = r[0];
     let O = E, M;
     r[1] !== v || r[2] !== w ? (M = () => {
@@ -102227,32 +102227,33 @@ ${c}
     }) : (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
       children: c.map(LY)
     }), r[14] = d.width, r[15] = c, r[16] = _, r[17] = y, r[18] = LY, r[19] = RY) : RY = r[19];
-    let zY = RY, BY;
-    r[20] !== q || r[21] !== zY || r[22] !== I ? (BY = I && q ? (0, import_jsx_runtime.jsxs)("div", {
-      className: "flex flex-col gap-5",
-      children: [
-        " ",
-        zY()
-      ]
-    }) : zY(), r[20] = q, r[21] = zY, r[22] = I, r[23] = BY) : BY = r[23];
-    let VY;
-    r[24] !== q || r[25] !== f || r[26] !== I ? (VY = f === "read" && (0, import_jsx_runtime.jsx)(ActionButtons, {
+    let zY = RY, BY = I && q && "gap-5", VY;
+    r[20] === BY ? VY = r[21] : (VY = cn("flex flex-col", BY), r[20] = BY, r[21] = VY);
+    let HY;
+    r[22] === zY ? HY = r[23] : (HY = zY(), r[22] = zY, r[23] = HY);
+    let UY;
+    r[24] !== VY || r[25] !== HY ? (UY = (0, import_jsx_runtime.jsx)("div", {
+      className: VY,
+      children: HY
+    }), r[24] = VY, r[25] = HY, r[26] = UY) : UY = r[26];
+    let WY;
+    r[27] !== q || r[28] !== f || r[29] !== I ? (WY = f === "read" && (0, import_jsx_runtime.jsx)(ActionButtons, {
       canShowCode: q,
       showCode: I,
       onToggleShowCode: () => z(_temp2$1)
-    }), r[24] = q, r[25] = f, r[26] = I, r[27] = VY) : VY = r[27];
-    let HY;
-    r[28] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (HY = (0, import_jsx_runtime.jsx)(FloatingOutline, {}), r[28] = HY) : HY = r[28];
-    let UY;
-    return r[29] !== d || r[30] !== _ || r[31] !== BY || r[32] !== VY ? (UY = (0, import_jsx_runtime.jsxs)(VerticalLayoutWrapper, {
+    }), r[27] = q, r[28] = f, r[29] = I, r[30] = WY) : WY = r[30];
+    let GY;
+    r[31] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (GY = (0, import_jsx_runtime.jsx)(FloatingOutline, {}), r[31] = GY) : GY = r[31];
+    let KY;
+    return r[32] !== d || r[33] !== _ || r[34] !== WY || r[35] !== UY ? (KY = (0, import_jsx_runtime.jsxs)(VerticalLayoutWrapper, {
       invisible: _,
       appConfig: d,
       children: [
-        BY,
-        VY,
-        HY
+        UY,
+        WY,
+        GY
       ]
-    }), r[29] = d, r[30] = _, r[31] = BY, r[32] = VY, r[33] = UY) : UY = r[33], UY;
+    }), r[32] = d, r[33] = _, r[34] = WY, r[35] = UY, r[36] = KY) : KY = r[36], KY;
   }, ActionButtons = (e) => {
     let r = (0, import_compiler_runtime$1.c)(26), { canShowCode: c, showCode: d, onToggleShowCode: f } = e, { readCode: _ } = useRequestClient(), v = _temp3, y = _temp4, S;
     r[0] === _ ? S = r[1] : (S = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.10-dev25",
+  "version": "0.19.10-dev30",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -58,6 +58,7 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
       cellAtoms,
       variables,
       settings.hidePureMarkdown,
+      settings.hideReusableFunctions,
     );
     elements = layoutElements({
       nodes: elements.nodes,
@@ -94,9 +95,17 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
         cellAtoms,
         variables,
         settings.hidePureMarkdown,
+        settings.hideReusableFunctions,
       ),
     );
-  }, [cellIds, variables, cellAtoms, syncChanges, settings.hidePureMarkdown]);
+  }, [
+    cellIds,
+    variables,
+    cellAtoms,
+    syncChanges,
+    settings.hidePureMarkdown,
+    settings.hideReusableFunctions,
+  ]);
 
   const [selection, setSelection] = useState<GraphSelection>();
   useFitToViewOnDimensionChange();

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

@@ -24,6 +24,7 @@ interface Props {
 const graphViewAtom = atom<LayoutDirection>("TB");
 const graphViewSettings = atom<GraphSettings>({
   hidePureMarkdown: true,
+  hideReusableFunctions: false,
 });
 
 export const DependencyGraph: React.FC<Props> = (props) => {

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

@@ -2,6 +2,7 @@
 
 import type { Atom } from "jotai";
 import { type Edge, MarkerType, type Node, type NodeProps } from "reactflow";
+import { getNotebook } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import type { CellData } from "@/core/cells/types";
 import { store } from "@/core/state/jotai";
@@ -29,6 +30,7 @@ interface ElementsBuilder {
     cellAtoms: Atom<CellData>[],
     variables: Variables,
     hidePureMarkdown: boolean,
+    hideReusableFunctions: boolean,
   ) => { nodes: Node<NodeData>[]; edges: Edge[] };
 }
 
@@ -76,6 +78,7 @@ export class VerticalElementsBuilder implements ElementsBuilder {
     cellAtoms: Atom<CellData>[],
     variables: Variables,
     _hidePureMarkdown: boolean,
+    _hideReusableFunctions: boolean,
   ) {
     let prevY = 0;
     const nodes: Node<NodeData>[] = [];
@@ -143,6 +146,7 @@ export class TreeElementsBuilder implements ElementsBuilder {
     cellAtoms: Atom<CellData>[],
     variables: Variables,
     hidePureMarkdown: boolean,
+    hideReusableFunctions: boolean,
   ) {
     const nodes: Node<NodeData>[] = [];
     const edges: Edge[] = [];
@@ -171,18 +175,25 @@ export class TreeElementsBuilder implements ElementsBuilder {
       }
     }
 
-    for (const [cellId, cellAtom] of Arrays.zip(cellIds, cellAtoms)) {
-      // Show every cell
-      if (!hidePureMarkdown) {
-        nodes.push(this.createNode(cellId, cellAtom));
-      }
+    const cellRuntime = getNotebook().cellRuntime;
 
+    for (const [cellId, cellAtom] of Arrays.zip(cellIds, cellAtoms)) {
+      const code = store.get(cellAtom).code.trim();
       const hasEdge = nodesWithEdges.has(cellId);
-      const isMarkdown = store.get(cellAtom).code.trim().startsWith("mo.md");
-      // Show only cells with edges or non-markdown cells
-      if (hasEdge || !isMarkdown) {
-        nodes.push(this.createNode(cellId, cellAtom));
+      const isMarkdown = code.startsWith("mo.md");
+      const runtime = cellRuntime[cellId];
+      const isReusable = runtime?.serialization?.toLowerCase() === "valid";
+
+      // Apply filters
+      if (hidePureMarkdown && isMarkdown && !hasEdge) {
+        continue;
+      }
+      if (hideReusableFunctions && isReusable && !hasEdge) {
+        continue;
       }
+
+      // Show every cell that wasn't filtered out
+      nodes.push(this.createNode(cellId, cellAtom));
     }
 
     return { nodes, edges };

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

@@ -43,7 +43,8 @@ export const GraphToolbar: React.FC<Props> = memo(
       onSettingsChange({ ...settings, [key]: value });
     };
 
-    const checkboxId = useId();
+    const markdownCheckboxId = useId();
+    const functionsCheckboxId = useId();
 
     const settingsButton = (
       <Popover>
@@ -54,16 +55,31 @@ export const GraphToolbar: React.FC<Props> = memo(
         </PopoverTrigger>
         <PopoverContent className="w-auto p-2 text-muted-foreground">
           <div className="font-semibold pb-4">Settings</div>
-          <div className="flex items-center gap-2">
-            <Checkbox
-              data-testid="hide-pure-markdown-checkbox"
-              id={checkboxId}
-              checked={settings.hidePureMarkdown}
-              onCheckedChange={(checked) =>
-                handleSettingChange("hidePureMarkdown", Boolean(checked))
-              }
-            />
-            <Label htmlFor={checkboxId}>Hide pure markdown</Label>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                data-testid="hide-pure-markdown-checkbox"
+                id={markdownCheckboxId}
+                checked={settings.hidePureMarkdown}
+                onCheckedChange={(checked) =>
+                  handleSettingChange("hidePureMarkdown", Boolean(checked))
+                }
+              />
+              <Label htmlFor={markdownCheckboxId}>Hide pure markdown</Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                data-testid="hide-reusable-functions-checkbox"
+                id={functionsCheckboxId}
+                checked={settings.hideReusableFunctions}
+                onCheckedChange={(checked) =>
+                  handleSettingChange("hideReusableFunctions", Boolean(checked))
+                }
+              />
+              <Label htmlFor={functionsCheckboxId}>
+                Hide reusable functions
+              </Label>
+            </div>
           </div>
         </PopoverContent>
       </Popover>

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

@@ -17,4 +17,5 @@ export type GraphSelection =
 
 export interface GraphSettings {
   hidePureMarkdown: boolean;
+  hideReusableFunctions: boolean;
 }

package/src/components/editor/package-alert.tsx

@@ -96,10 +96,10 @@ export const PackageAlert: React.FC = () => {
 
   if (isMissingPackageAlert(packageAlert)) {
     return (
-      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px]">
+      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px] pointer-events-none">
         <Banner
           kind="danger"
-          className="flex flex-col rounded py-3 px-5 animate-in slide-in-from-left overflow-auto max-h-[80vh] scrollbar-thin"
+          className="flex flex-col rounded py-3 px-5 animate-in slide-in-from-left overflow-auto max-h-[80vh] scrollbar-thin pointer-events-auto"
         >
           <div className="flex justify-between">
             <span className="font-bold text-lg flex items-center mb-2">
@@ -207,10 +207,10 @@ export const PackageAlert: React.FC = () => {
     }
 
     return (
-      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px] ">
+      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px] pointer-events-none">
         <Banner
           kind={status === "failed" ? "danger" : "info"}
-          className="flex flex-col rounded pt-3 pb-4 px-5 overflow-auto max-h-[80vh] scrollbar-thin"
+          className="flex flex-col rounded pt-3 pb-4 px-5 overflow-auto max-h-[80vh] scrollbar-thin pointer-events-auto"
         >
           <div className="flex justify-between">
             <span className="font-bold text-lg flex items-center mb-2">

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -172,11 +172,9 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
   // spacing is handled elsewhere
   return (
     <VerticalLayoutWrapper invisible={invisible} appConfig={appConfig}>
-      {showCode && canShowCode ? (
-        <div className="flex flex-col gap-5"> {renderCells()}</div>
-      ) : (
-        renderCells()
-      )}
+      <div className={cn("flex flex-col", showCode && canShowCode && "gap-5")}>
+        {renderCells()}
+      </div>
       {mode === "read" && (
         <ActionButtons
           canShowCode={canShowCode}