add min height to cell outputs (#14488)

* add min height to cell outputs * fixed for output collapsing --------- Signed-off-by: Jonah Iden <[email protected]>
eclipse-theia · Nov 21, 2024 · 6cebf4a · 6cebf4a
1 parent 5c10d45
commit 6cebf4a
Showing 1 changed file with 18 additions and 15 deletions.
diff --git a/packages/plugin-ext/src/main/browser/notebooks/renderers/output-webview-internal.ts b/packages/plugin-ext/src/main/browser/notebooks/renderers/output-webview-internal.ts
@@ -174,7 +174,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
         }
 
         calcTotalOutputHeight(): number {
-            return this.outputElements.reduce((acc, output) => acc + output.element.clientHeight, 0) + 5;
+            return this.outputElements.reduce((acc, output) => acc + output.element.getBoundingClientRect().height, 0) + 5;
         }
 
         createOutputElement(index: number, output: webviewCommunication.Output, items: rendererApi.OutputItem[]): OutputContainer {
@@ -216,9 +216,11 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
         public outputVisibilityChanged(visible: boolean): void {
             this.outputElements.forEach(output => {
                 output.element.style.display = visible ? 'initial' : 'none';
+                output.containerElement.style.minHeight = visible ? '20px' : '0px';
             });
             if (visible) {
                 this.element.getElementsByClassName('output-hidden')?.[0].remove();
+                window.requestAnimationFrame(() => this.outputElements.forEach(output => sendDidRenderMessage(this, output)));
             } else {
                 const outputHiddenElement = document.createElement('div');
                 outputHiddenElement.classList.add('output-hidden');
@@ -290,6 +292,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
         private createHtmlElement(): void {
             this.containerElement = document.createElement('div');
             this.containerElement.classList.add('output-container');
+            this.containerElement.style.minHeight = '20px';
             this.element = document.createElement('div');
             this.element.id = this.outputId;
             this.element.classList.add('output');
@@ -489,26 +492,16 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
                         img.dataset.waiting = 'true'; // mark to avoid overriding onload a second time
                         return new Promise(resolve => { img.onload = img.onerror = resolve; });
                     })).then(() => {
-                        this.sendDidRenderMessage(cell, output);
-                        new ResizeObserver(() => this.sendDidRenderMessage(cell, output)).observe(cell.element);
+                        sendDidRenderMessage(cell, output);
+                        new ResizeObserver(() => sendDidRenderMessage(cell, output)).observe(cell.element);
                     });
             } else {
-                this.sendDidRenderMessage(cell, output);
-                new ResizeObserver(() => this.sendDidRenderMessage(cell, output)).observe(cell.element);
+                sendDidRenderMessage(cell, output);
+                new ResizeObserver(() => sendDidRenderMessage(cell, output)).observe(cell.element);
             }
 
         }
 
-        private sendDidRenderMessage(cell: OutputCell, output: OutputContainer): void {
-            theia.postMessage(<webviewCommunication.OnDidRenderOutput>{
-                type: 'didRenderOutput',
-                cellHandle: cell.cellHandle,
-                outputId: output.outputId,
-                outputHeight: cell.calcTotalOutputHeight(),
-                bodyHeight: document.body.clientHeight
-            });
-        }
-
         private async doRender(item: rendererApi.OutputItem, element: HTMLElement, renderer: Renderer, signal: AbortSignal): Promise<{ continue: boolean }> {
             try {
                 await (await renderer.getOrLoad())?.renderOutputItem(item, element, signal);
@@ -565,6 +558,16 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
         }
     }();
 
+    function sendDidRenderMessage(cell: OutputCell, output: OutputContainer): void {
+        theia.postMessage(<webviewCommunication.OnDidRenderOutput>{
+            type: 'didRenderOutput',
+            cellHandle: cell.cellHandle,
+            outputId: output.outputId,
+            outputHeight: cell.calcTotalOutputHeight(),
+            bodyHeight: document.body.clientHeight
+        });
+    }
+
     const kernelPreloads = new class {
         private readonly preloads = new Map<string /* uri */, Promise<unknown>>();