Skip to content

Commit

Permalink
collapsing outputs
Browse files Browse the repository at this point in the history 
Signed-off-by: Jonah Iden <[email protected]>
  • Loading branch information
@jonah-iden
jonah-iden committed Sep 30, 2024
1 parent cb3c1fc commit f0d8f05
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 22 deletions.
6 changes: 6 additions & 0 deletions packages/notebook/src/browser/style/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,13 @@
width: 100%;
}

.theia-notebook-collapsed-output-container {
width: 0;
overflow: visible;
}

.theia-notebook-collapsed-output {
text-wrap: nowrap;
padding: 4px 8px;
color: var(--theia-foreground);
margin-left: 30px;
Expand Down
33 changes: 16 additions & 17 deletions packages/notebook/src/browser/view/notebook-code-cell-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,14 +95,12 @@ export class NotebookCodeCellRenderer implements CellRenderer {
renderSidebar(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
return <div>
<NotebookCodeCellSidebar cell={cell} notebook={notebookModel} notebookCellToolbarFactory={this.notebookCellToolbarFactory} />
<div>
<NotebookCodeCellOutputs cell={cell} notebook={notebookModel} outputWebview={this.outputWebview}
renderSidebar={() =>
this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.OUTPUT_SIDEBAR_MENU, cell, {
contextMenuArgs: () => [notebookModel, cell, cell.outputs[0]]
})
} />
</div>
<NotebookCodeCellOutputs cell={cell} notebook={notebookModel} outputWebview={this.outputWebview}
renderSidebar={() =>
this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.OUTPUT_SIDEBAR_MENU, cell, {
contextMenuArgs: () => [notebookModel, cell, cell.outputs[0]]
})
} />
</div>;

}
Expand Down Expand Up @@ -299,19 +297,20 @@ export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputP

protected outputHeight: number = 0;

constructor(props: NotebookCellOutputProps) {
super(props);
props.outputWebview.onDidRenderOutput(event => {
if (event.cellHandle === props.cell.handle) {
override async componentDidMount(): Promise<void> {
const { cell } = this.props;
this.toDispose.push(cell.onDidChangeOutputs(() => this.forceUpdate()));
this.toDispose.push(this.props.cell.onDidChangeOutputVisibility(() => this.forceUpdate()));
this.toDispose.push(this.props.outputWebview.onDidRenderOutput(event => {
if (event.cellHandle === this.props.cell.handle) {
this.outputHeight = event.outputHeight;
this.forceUpdate();
}
});
}));
}

override async componentDidMount(): Promise<void> {
const { cell } = this.props;
this.toDispose.push(cell.onDidChangeOutputs(() => this.forceUpdate()));
override componentWillUnmount(): void {
this.toDispose.dispose();
}

override render(): React.ReactNode {
Expand All @@ -323,7 +322,7 @@ export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputP
{this.props.renderSidebar()}
</div>;
}
return <i className='theia-notebook-collapsed-output'>{nls.localizeByDefault('Outputs are collapsed')}</i>;
return <div className='theia-notebook-collapsed-output-container'><i className='theia-notebook-collapsed-output'>{nls.localizeByDefault('Outputs are collapsed')}</i></div>;
}

}
Expand Down
7 changes: 7 additions & 0 deletions packages/plugin-ext/src/main/browser/notebooks/renderers/cell-output-webview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,13 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
}]);
}));
this.toDispose.push(cell.onDidCellHeightChange(height => this.setCellHeight(cell, height)));
this.toDispose.push(cell.onDidChangeOutputVisibility(visible => {
this.webviewWidget.sendMessage({
type: 'outputVisibilityChanged',
cellHandle: cell.handle,
visible
});
}));
}

render(): React.JSX.Element {
Expand Down
28 changes: 24 additions & 4 deletions packages/plugin-ext/src/main/browser/notebooks/renderers/output-webview-internal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,11 +210,25 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
public updateCellHeight(cellKind: number, height: number): void {
let additionalHeight = 54.5;
additionalHeight -= cells[0] === this ? 2.5 : 0; // first cell
additionalHeight -= cellKind === 1 ? 5 : 0; // markdown cell
additionalHeight -= this.outputElements.length ? 0 : 5.5; // no outputs
this.element.style.paddingTop = `${height + additionalHeight}px`;
}

public outputVisibilityChanged(visible: boolean): void {
console.log('outputVisibilityChanged', visible);
this.outputElements.forEach(output => {
output.element.style.display = visible ? 'initial' : 'none';
});
if (visible) {
this.element.getElementsByClassName('output-hidden')?.[0].remove();
} else {
const outputHiddenElement = document.createElement('div');
outputHiddenElement.classList.add('output-hidden');
outputHiddenElement.style.height = '16px';
this.element.appendChild(outputHiddenElement);
}
}

// public updateScroll(request: webviewCommunication.IContentWidgetTopRequest): void {
// this.element.style.top = `${request.cellTop}px`;

Expand Down Expand Up @@ -695,6 +709,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {

window.addEventListener('message', async rawEvent => {
const event = rawEvent as ({ data: webviewCommunication.ToWebviewMessage });
let cellHandle: number | undefined;
switch (event.data.type) {
case 'updateRenderers':
renderers.updateRendererData(event.data.rendererData);
Expand All @@ -709,9 +724,9 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
renderers.getRenderer(event.data.rendererId)?.receiveMessage(event.data.message);
break;
case 'changePreferredMimetype':
const handle = event.data.cellHandle;
cellHandle = event.data.cellHandle;
const outputId = event.data.outputId;
cells.find(c => c.cellHandle === handle)
cells.find(c => c.cellHandle === cellHandle)
?.outputElements.find(o => o.outputId === outputId)
?.preferredMimeTypeChange(event.data.mimeType);
break;
Expand Down Expand Up @@ -742,12 +757,17 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
}
break;
case 'cellHeightUpdate':
const cellHandle = event.data.cellHandle;
cellHandle = event.data.cellHandle;
const cell = cells.find(c => c.cellHandle === cellHandle);
if (cell) {
cell.updateCellHeight(event.data.cellKind, event.data.height);
}
break;
case 'outputVisibilityChanged':
console.log('change visibility', event.data);
cellHandle = event.data.cellHandle;
cells.find(c => c.cellHandle === cellHandle)?.outputVisibilityChanged(event.data.visible);
break;
}
});
window.addEventListener('wheel', handleWheel);
Expand Down
9 changes: 8 additions & 1 deletion packages/plugin-ext/src/main/browser/notebooks/renderers/webview-communication.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,12 @@ export interface CellHeightUpdateMessage {
height: number;
}

export interface OutputVisibilityChangedMessage {
type: 'outputVisibilityChanged';
cellHandle: number;
visible: boolean;
}

export type ToWebviewMessage = UpdateRenderersMessage
| OutputChangedMessage
| ChangePreferredMimetypeMessage
Expand All @@ -109,7 +115,8 @@ export type ToWebviewMessage = UpdateRenderersMessage
| notebookStylesMessage
| CellHeigthsMessage
| CellHeightUpdateMessage
| CellsChangedMessage;
| CellsChangedMessage
| OutputVisibilityChangedMessage;

export interface WebviewInitialized {
readonly type: 'initialized';
Expand Down

0 comments on commit f0d8f05

Please sign in to comment.