From b402b217d6c6b7ae702d0f5e9c1432932a41e986 Mon Sep 17 00:00:00 2001 From: Jonah Iden Date: Wed, 20 Nov 2024 15:07:48 +0100 Subject: [PATCH 1/2] add min height to cell outputs Signed-off-by: Jonah Iden --- .../main/browser/notebooks/renderers/output-webview-internal.ts | 1 + 1 file changed, 1 insertion(+) 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 index 16efe9ab2ef69..cb80f5faebc2c 100644 --- 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 @@ -290,6 +290,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise { 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'); From 2bddb420f6acfcd1f17c9e93c82d086aa7e54532 Mon Sep 17 00:00:00 2001 From: Jonah Iden Date: Wed, 20 Nov 2024 16:10:21 +0100 Subject: [PATCH 2/2] fixed for output collapsing Signed-off-by: Jonah Iden --- .../renderers/output-webview-internal.ts | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 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 index cb80f5faebc2c..745f0968414d9 100644 --- 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 { } 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 { 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'); @@ -490,26 +492,16 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise { 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({ - 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); @@ -566,6 +558,16 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise { } }(); + function sendDidRenderMessage(cell: OutputCell, output: OutputContainer): void { + theia.postMessage({ + type: 'didRenderOutput', + cellHandle: cell.cellHandle, + outputId: output.outputId, + outputHeight: cell.calcTotalOutputHeight(), + bodyHeight: document.body.clientHeight + }); + } + const kernelPreloads = new class { private readonly preloads = new Map>();