show hidden cells when markdown has no output

marimo-team · Dec 31, 2024 · 21c5982 · 21c5982
1 parent be4d05c
commit 21c5982
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/frontend/src/components/editor/Cell.tsx b/frontend/src/components/editor/Cell.tsx
@@ -419,7 +419,7 @@ const CellComponent = (
     stopped: stopped,
     disabled: cellConfig.disabled,
     stale: status === "disabled-transitively",
-    borderless: isMarkdownCodeHidden && editing,
+    borderless: isMarkdownCodeHidden && hasOutput && editing,
   });
 
   const HTMLId = HTMLCellId.create(cellId);
@@ -567,6 +567,9 @@ const CellComponent = (
 
   const cellOutput = userConfig.display.cell_output;
 
+  const hasOutputAbove = hasOutput && cellOutput === "above";
+  const hasOutputBelow = hasOutput && cellOutput === "below";
+
   return (
     <CellActionsContextMenu
       cellId={cellId}
@@ -607,8 +610,8 @@ const CellComponent = (
             <div
               className={cn(
                 "absolute flex flex-col gap-[2px] justify-center h-full left-[-34px] z-20",
-                isMarkdownCodeHidden && cellOutput === "above" && "-top-7",
-                isMarkdownCodeHidden && cellOutput === "below" && "-bottom-8",
+                isMarkdownCodeHidden && hasOutputAbove && "-top-7",
+                isMarkdownCodeHidden && hasOutputBelow && "-bottom-8",
                 isMarkdownCodeHidden && isCellButtonsInline && "-left-[3.8rem]",
               )}
             >
@@ -649,6 +652,7 @@ const CellComponent = (
               editorViewRef={editorView}
               editorViewParentRef={editorViewParentRef}
               hidden={!isCellCodeShown}
+              hasOutput={hasOutput}
               temporarilyShowCode={temporarilyShowCode}
               languageAdapter={languageAdapter}
               setLanguageAdapter={setLanguageAdapter}

diff --git a/frontend/src/components/editor/cell/code/cell-editor.tsx b/frontend/src/components/editor/cell/code/cell-editor.tsx
@@ -62,6 +62,7 @@ export interface CellEditorProps
    * This is different from cellConfig.hide_code, since it may be temporarily shown.
    */
   hidden?: boolean;
+  hasOutput?: boolean;
   languageAdapter: LanguageAdapterType | undefined;
   setLanguageAdapter: React.Dispatch<
     React.SetStateAction<LanguageAdapterType | undefined>
@@ -95,6 +96,7 @@ const CellEditorInternal = ({
   editorViewRef,
   editorViewParentRef,
   hidden,
+  hasOutput,
   temporarilyShowCode,
   languageAdapter,
   setLanguageAdapter,
@@ -359,6 +361,17 @@ const CellEditorInternal = ({
     };
   }, [editorViewRef]);
 
+  // Completely hide the editor & icons if it's markdown and hidden. If there is output, we show.
+  const showHideButton =
+    (hidden && !isMarkdown) || (hidden && isMarkdown && !hasOutput);
+
+  let editorClassName = "";
+  if (isMarkdown && hidden && hasOutput) {
+    editorClassName = "h-0 overflow-hidden";
+  } else if (hidden) {
+    editorClassName = "opacity-20 h-8 overflow-hidden";
+  }
+
   return (
     <AiCompletionEditor
       enabled={aiCompletionCell?.cellId === cellId}
@@ -394,20 +407,15 @@ const CellEditorInternal = ({
         className="relative w-full"
         onFocus={() => setLastFocusedCellId(cellId)}
       >
-        {/* Completely hide the editor and icons when markdown is hidden. If just hidden, display. */}
-        {!isMarkdown && hidden && (
+        {showHideButton && (
           <HideCodeButton
             tooltip="Edit code"
             className="absolute inset-0 z-10"
             onClick={temporarilyShowCode}
           />
         )}
         <CellCodeMirrorEditor
-          className={cn(
-            isMarkdown && hidden
-              ? "h-0 overflow-hidden"
-              : hidden && "opacity-20 h-8 overflow-hidden",
-          )}
+          className={editorClassName}
           editorView={editorViewRef.current}
           ref={editorViewParentRef}
         />