Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed multiple problems with the notebook output rendering #13239

Merged
merged 3 commits into from
Jan 18, 2024
Merged

fixed multiple problems with the notebook output rendering #13239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b098bf9
fixed multiple problems with the notebook cell output rendering and a…
jonah-iden Jan 4, 2024
5e7fedd
split promise and webview into separate fields
jonah-iden Jan 17, 2024
21897c7
removed promise check since its not needed anymore
jonah-iden Jan 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 29 additions & 12 deletions packages/notebook/src/browser/view/notebook-code-cell-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,34 +149,51 @@ interface NotebookCellOutputProps {
export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputProps> {

protected outputsWebview: CellOutputWebview | undefined;
protected outputsWebviewPromise: Promise<CellOutputWebview> | undefined;

protected toDispose = new DisposableCollection();

constructor(props: NotebookCellOutputProps) {
super(props);
}

override async componentDidMount(): Promise<void> {
const { cell, outputWebviewFactory } = this.props;
cell.onDidChangeOutputs(async () => {
if (!this.outputsWebview && cell.outputs.length > 0) {
this.outputsWebview = await outputWebviewFactory(cell);
} else if (this.outputsWebview && cell.outputs.length === 0) {
this.outputsWebview.dispose();
this.toDispose.push(cell.onDidChangeOutputs(async () => {
if (!this.outputsWebviewPromise && cell.outputs.length > 0) {
this.outputsWebviewPromise = outputWebviewFactory(cell).then(webview => {
this.outputsWebview = webview;
this.forceUpdate();
return webview;
});
this.forceUpdate();
} else if (this.outputsWebviewPromise && cell.outputs.length === 0 && cell.internalMetadata.runEndTime) {
(await this.outputsWebviewPromise).dispose();
this.outputsWebview = undefined;
this.outputsWebviewPromise = undefined;
this.forceUpdate();
}
this.forceUpdate();
});
}));
if (cell.outputs.length > 0) {
this.outputsWebview = await outputWebviewFactory(cell);
this.forceUpdate();
this.outputsWebviewPromise = outputWebviewFactory(cell).then(webview => {
this.outputsWebview = webview;
this.forceUpdate();
return webview;
});
}
}

override componentDidUpdate(): void {
if (!this.outputsWebview?.isAttached()) {
this.outputsWebview?.attachWebview();
override async componentDidUpdate(): Promise<void> {
if (!(await this.outputsWebviewPromise)?.isAttached()) {
(await this.outputsWebviewPromise)?.attachWebview();
}
}

override async componentWillUnmount(): Promise<void> {
this.toDispose.dispose();
(await this.outputsWebviewPromise)?.dispose();
}

override render(): React.ReactNode {
return this.outputsWebview ?
<>
Expand Down
50 changes: 26 additions & 24 deletions packages/plugin-ext/src/main/browser/notebooks/renderers/cell-output-webview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,14 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {

protected webviewWidget: WebviewWidget;

protected toDispose = new DisposableCollection();

@postConstruct()
protected async init(): Promise<void> {
this.cell.onDidChangeOutputs(outputChange => this.updateOutput(outputChange));
this.cell.onDidChangeOutputItems(output => {
this.toDispose.push(this.cell.onDidChangeOutputs(outputChange => this.updateOutput(outputChange)));
this.toDispose.push(this.cell.onDidChangeOutputItems(output => {
this.updateOutput({start: this.cell.outputs.findIndex(o => o.outputId === output.outputId), deleteCount: 1, newOutputs: [output]});
});
}));

this.webviewWidget = await this.widgetManager.getOrCreateWidget(WebviewWidget.FACTORY_ID, { id: this.id });
this.webviewWidget.setContentOptions({ allowScripts: true });
Expand Down Expand Up @@ -106,29 +108,28 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
}

updateOutput(update: NotebookCellOutputsSplice): void {
if (this.cell.outputs.length > 0) {
if (this.webviewWidget.isHidden) {
this.webviewWidget.show();
}

this.outputPresentationListeners.dispose();
this.outputPresentationListeners = new DisposableCollection();
for (const output of this.cell.outputs) {
this.outputPresentationListeners.push(output.onRequestOutputPresentationChange(() => this.requestOutputPresentationUpdate(output)));
}
if (this.webviewWidget.isHidden) {
this.webviewWidget.show();
}

const updateOutputMessage: OutputChangedMessage = {
type: 'outputChanged',
newOutputs: update.newOutputs.map(output => ({
id: output.outputId,
items: output.outputs.map(item => ({ mime: item.mime, data: item.data.buffer })),
metadata: output.metadata
})),
deletedOutputIds: this.cell.outputs.slice(update.start, update.start + update.deleteCount).map(output => output.outputId)
};

this.webviewWidget.sendMessage(updateOutputMessage);
this.outputPresentationListeners.dispose();
this.outputPresentationListeners = new DisposableCollection();
for (const output of this.cell.outputs) {
this.outputPresentationListeners.push(output.onRequestOutputPresentationChange(() => this.requestOutputPresentationUpdate(output)));
}

const updateOutputMessage: OutputChangedMessage = {
type: 'outputChanged',
newOutputs: update.newOutputs.map(output => ({
id: output.outputId,
items: output.outputs.map(item => ({ mime: item.mime, data: item.data.buffer })),
metadata: output.metadata
})),
deleteStart: update.start,
deleteCount: update.deleteCount
};

this.webviewWidget.sendMessage(updateOutputMessage);
}

private async requestOutputPresentationUpdate(output: NotebookCellOutputModel): Promise<void> {
Expand Down Expand Up @@ -195,6 +196,7 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
}

dispose(): void {
this.toDispose.dispose();
this.outputPresentationListeners.dispose();
this.webviewWidget.dispose();
}
Expand Down
24 changes: 13 additions & 11 deletions packages/plugin-ext/src/main/browser/notebooks/renderers/output-webview-internal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
this.element.style.paddingRight = '10px';
this.element.id = output.id;
document.body.appendChild(this.element);

this.outputId = output.id;
this.allItems = items;
}

Expand All @@ -134,7 +134,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
}
}

const outputs = new Map</* outputId */string, Output>();
const outputs: Output[] = [];

class Renderer {

Expand Down Expand Up @@ -378,15 +378,14 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
}
}();

function clearOutput(outputId: string): void {
outputs.get(outputId)?.clear();
outputs.delete(outputId);
document.getElementById(outputId)?.remove();
function clearOutput(output: Output): void {
output.clear();
output.element.remove();
}

function outputsChanged(changedEvent: webviewCommunication.OutputChangedMessage): void {
for (const outputId of changedEvent.deletedOutputIds ?? []) {
clearOutput(outputId);
for (const output of outputs.splice(changedEvent.deleteStart ?? 0, changedEvent.deleteCount ?? 0)) {
clearOutput(output);
}

for (const outputData of changedEvent.newOutputs ?? []) {
Expand All @@ -410,7 +409,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
}));

const output = new Output(outputData, apiItems);
outputs.set(outputData.id, output);
outputs.push(output);

renderers.render(output, undefined, undefined, new AbortController().signal);
}
Expand Down Expand Up @@ -466,8 +465,11 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
renderers.getRenderer(event.data.rendererId)?.receiveMessage(event.data.message);
break;
case 'changePreferredMimetype':
clearOutput(event.data.outputId);
renderers.render(outputs.get(event.data.outputId)!, event.data.mimeType, undefined, new AbortController().signal);
const outputId = event.data.outputId;
const index = outputs.findIndex(output => output.outputId === outputId);
outputs.splice(index, 1);
clearOutput(outputs.splice(index, 1)[0]);
renderers.render(outputs[index], event.data.mimeType, undefined, new AbortController().signal);
break;
}
});
Expand Down
3 changes: 2 additions & 1 deletion packages/plugin-ext/src/main/browser/notebooks/renderers/webview-communication.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ export interface UpdateRenderersMessage {
export interface OutputChangedMessage {
readonly type: 'outputChanged';
readonly newOutputs?: Output[];
readonly deletedOutputIds?: string[];
readonly deleteStart?: number;
readonly deleteCount?: number;
}

export interface ChangePreferredMimetypeMessage {
Expand Down
Loading