Message "👀 Reading hidden code" (#2920)

fonsp · May 16, 2024 · 77d7aef · 77d7aef
1 parent 7ca9160
commit 77d7aef
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/frontend/components/Cell.js b/frontend/components/Cell.js
@@ -205,12 +205,11 @@ export const Cell = ({
     const activate_animation = useDebouncedTruth(running || queued || waiting_to_run)
 
     const class_code_differs = code !== (cell_input_local?.code ?? code)
-    const class_code_folded = code_folded && cm_forced_focus == null
     const no_output_yet = (output?.last_run_timestamp ?? 0) === 0
     const code_not_trusted_yet = process_waiting_for_permission && no_output_yet
 
     // during the initial page load, force_hide_input === true, so that cell outputs render fast, and codemirrors are loaded after
-    let show_input = !force_hide_input && (code_not_trusted_yet || errored || class_code_differs || !class_code_folded)
+    let show_input = !force_hide_input && (code_not_trusted_yet || errored || class_code_differs || cm_forced_focus != null || !code_folded)
 
     const [line_heights, set_line_heights] = useState([15])
     const node_ref = useRef(null)
@@ -292,7 +291,7 @@ export const Cell = ({
                 errored,
                 selected,
                 code_differs: class_code_differs,
-                code_folded: class_code_folded,
+                code_folded,
                 skip_as_script,
                 running_disabled,
                 depends_on_disabled_cells,

diff --git a/frontend/components/CellInput.js b/frontend/components/CellInput.js
@@ -970,10 +970,13 @@ export const CellInput = ({
                 set_show_logs=${set_show_logs}
                 set_cell_disabled=${set_cell_disabled}
             />
+            ${PreviewHiddenCode}
         </pluto-input>
     `
 }
 
+const PreviewHiddenCode = html`<div class="preview_hidden_code_info">👀 Reading hidden code</div>`
+
 const InputContextMenu = ({ on_delete, cell_id, run_cell, skip_as_script, running_disabled, any_logs, show_logs, set_show_logs, set_cell_disabled }) => {
     const timeout = useRef(null)
     let pluto_actions = useContext(PlutoActionsContext)

diff --git a/frontend/editor.css b/frontend/editor.css
@@ -1867,6 +1867,30 @@ pluto-input > .input_context_menu span.icon::after {
     filter: var(--image-filters);
 }
 
+pluto-input > .preview_hidden_code_info {
+    display: none;
+    position: absolute;
+    bottom: -1.1rem;
+    left: 0;
+    right: 0;
+    margin-right: auto;
+    margin-left: auto;
+    height: 1.4rem;
+    width: 19ch;
+    font-style: italic;
+    text-align: center;
+    background: var(--jl-info-color);
+    border-radius: 0.4rem;
+    font-family: var(--system-ui-font-stack);
+    font-size: 0.9rem;
+    z-index: 22;
+    pointer-events: none;
+}
+
+body:not(.process_waiting_for_permission) pluto-cell.code_folded pluto-input > .preview_hidden_code_info {
+    display: block;
+}
+
 /* PKG UI */
 
 pkg-status-mark {