Add CellProgressBar

fix issue where progress bar doesn't appear when collapsing input while cell is running. Also small cleanup to cell dnd in renderer microsoft#131808
TheUnproductive · Nov 17, 2021 · 333a215 · 333a215
1 parent 8cb22ea
commit 333a215
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 41 deletions.
diff --git a/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellDnd.ts b/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellDnd.ts
@@ -15,8 +15,8 @@ import { cellRangesToIndexes, ICellRange } from 'vs/workbench/contrib/notebook/c
 
 const $ = DOM.$;
 
-export const DRAGGING_CLASS = 'cell-dragging';
-export const GLOBAL_DRAG_CLASS = 'global-drag-active';
+const DRAGGING_CLASS = 'cell-dragging';
+const GLOBAL_DRAG_CLASS = 'global-drag-active';
 
 type DragImageProvider = () => HTMLElement;
 
@@ -97,6 +97,14 @@ export class CellDragAndDropController extends Disposable {
 		});
 	}
 
+	renderElement(element: ICellViewModel, templateData: BaseCellRenderTemplate): void {
+		if (element.dragging) {
+			templateData.container.classList.add(DRAGGING_CLASS);
+		} else {
+			templateData.container.classList.remove(DRAGGING_CLASS);
+		}
+	}
+
 	private setInsertIndicatorVisibility(visible: boolean) {
 		this.listInsertionIndicator.style.opacity = visible ? '1' : '0';
 	}

diff --git a/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellProgressBar.ts b/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellProgressBar.ts
@@ -0,0 +1,56 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar';
+import { Disposable } from 'vs/base/common/lifecycle';
+import { CellViewModelStateChangeEvent } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
+import { CodeCellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel';
+import { NotebookCellExecutionState, NotebookCellInternalMetadata } from 'vs/workbench/contrib/notebook/common/notebookCommon';
+
+export class CellProgressBar extends Disposable {
+	private readonly _progressBar: ProgressBar;
+	private readonly _collapsedProgressBar: ProgressBar;
+
+	constructor(
+		editorContainer: HTMLElement,
+		collapsedInputContainer: HTMLElement) {
+		super();
+
+		this._progressBar = this._register(new ProgressBar(editorContainer));
+		this._progressBar.hide();
+
+		this._collapsedProgressBar = this._register(new ProgressBar(collapsedInputContainer));
+		this._collapsedProgressBar.hide();
+	}
+
+	updateForInternalMetadata(element: CodeCellViewModel, internalMetadata: NotebookCellInternalMetadata): void {
+		const progressBar = element.isInputCollapsed ? this._collapsedProgressBar : this._progressBar;
+		if (internalMetadata.runState === NotebookCellExecutionState.Executing && !internalMetadata.isPaused) {
+			showProgressBar(progressBar);
+		} else {
+			progressBar.hide();
+		}
+	}
+
+	updateForCellState(e: CellViewModelStateChangeEvent, element: CodeCellViewModel): void {
+		if (e.inputCollapsedChanged) {
+			if (element.isInputCollapsed) {
+				this._progressBar.hide();
+				if (element.internalMetadata.runState === NotebookCellExecutionState.Executing) {
+					showProgressBar(this._collapsedProgressBar);
+				}
+			} else {
+				this._collapsedProgressBar.hide();
+				if (element.internalMetadata.runState === NotebookCellExecutionState.Executing) {
+					showProgressBar(this._progressBar);
+				}
+			}
+		}
+	}
+}
+
+function showProgressBar(progressBar: ProgressBar): void {
+	progressBar.infinite().show(500);
+}
diff --git a/src/vs/workbench/contrib/notebook/browser/view/notebookRenderingCommon.ts b/src/vs/workbench/contrib/notebook/browser/view/notebookRenderingCommon.ts
@@ -3,27 +3,27 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { FastDomNode } from 'vs/base/browser/fastDomNode';
 import { IMouseWheelEvent } from 'vs/base/browser/mouseEvent';
 import { IListContextMenuEvent, IListEvent, IListMouseEvent } from 'vs/base/browser/ui/list/list';
 import { IListOptions, IListStyles } from 'vs/base/browser/ui/list/listWidget';
-import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar';
 import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar';
 import { Event } from 'vs/base/common/event';
-import { FastDomNode } from 'vs/base/browser/fastDomNode';
 import { DisposableStore } from 'vs/base/common/lifecycle';
 import { ScrollEvent } from 'vs/base/common/scrollable';
 import { URI } from 'vs/base/common/uri';
 import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
 import { Range } from 'vs/editor/common/core/range';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import type { INotebookCellActionContext } from 'vs/workbench/contrib/notebook/browser/controller/coreActions';
+import { ICellOutputViewModel, ICellViewModel, IGenericCellViewModel, INotebookCellOutputLayoutInfo, INotebookEditorCreationOptions, IRenderOutput, RenderOutputType } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
+import { CellProgressBar } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellProgressBar';
+import { BetweenCellToolbar, CellTitleToolbarPart } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellToolbars';
+import { CellEditorStatusBar } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellWidgets';
 import { CellViewModel, NotebookViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/notebookViewModel';
 import { IOutputItemDto } from 'vs/workbench/contrib/notebook/common/notebookCommon';
 import { ICellRange } from 'vs/workbench/contrib/notebook/common/notebookRange';
-import { CellEditorStatusBar } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellWidgets';
-import { ICellOutputViewModel, ICellViewModel, IGenericCellViewModel, INotebookCellOutputLayoutInfo, INotebookEditorCreationOptions, IRenderOutput, RenderOutputType } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
-import type { INotebookCellActionContext } from 'vs/workbench/contrib/notebook/browser/controller/coreActions';
-import { BetweenCellToolbar, CellTitleToolbarPart } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellToolbars';
-import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 
 export interface INotebookCellList {
 	isDisposed: boolean;
@@ -130,8 +130,7 @@ export interface CodeCellRenderTemplate extends BaseCellRenderTemplate {
 	outputShowMoreContainer: FastDomNode<HTMLElement>;
 	focusSinkElement: HTMLElement;
 	editor: ICodeEditor;
-	progressBar: ProgressBar;
-	collapsedProgressBar: ProgressBar;
+	progressBar: CellProgressBar;
 	focusIndicatorRight: FastDomNode<HTMLElement>;
 	focusIndicatorBottom: FastDomNode<HTMLElement>;
 	dragHandle: FastDomNode<HTMLElement>;

diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts
@@ -7,7 +7,6 @@ import { getPixelRatio, getZoomLevel } from 'vs/base/browser/browser';
 import * as DOM from 'vs/base/browser/dom';
 import { FastDomNode } from 'vs/base/browser/fastDomNode';
 import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
-import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar';
 import { IAction } from 'vs/base/common/actions';
 import { Codicon, CSSIcon } from 'vs/base/common/codicons';
 import { Color } from 'vs/base/common/color';
@@ -36,8 +35,9 @@ import { INotificationService } from 'vs/platform/notification/common/notificati
 import { INotebookCellActionContext, INotebookCellToolbarActionContext } from 'vs/workbench/contrib/notebook/browser/controller/coreActions';
 import { CodeCellLayoutInfo, EXPAND_CELL_OUTPUT_COMMAND_ID, ICellViewModel, INotebookEditorDelegate } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
 import { CellContextKeyManager } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellContextKeys';
-import { CellDragAndDropController, DRAGGING_CLASS } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellDnd';
+import { CellDragAndDropController } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellDnd';
 import { CellEditorOptions } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellEditorOptions';
+import { CellProgressBar } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellProgressBar';
 import { BetweenCellToolbar, CellTitleToolbarPart } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellToolbars';
 import { CellEditorStatusBar } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellWidgets';
 import { CodeCell } from 'vs/workbench/contrib/notebook/browser/view/cellParts/codeCell';
@@ -47,7 +47,7 @@ import { BaseCellRenderTemplate, CodeCellRenderTemplate, MarkdownCellRenderTempl
 import { CodeCellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel';
 import { MarkupCellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/markupCellViewModel';
 import { CellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/notebookViewModel';
-import { CellKind, NotebookCellExecutionState, NotebookCellInternalMetadata } from 'vs/workbench/contrib/notebook/common/notebookCommon';
+import { CellKind, NotebookCellInternalMetadata } from 'vs/workbench/contrib/notebook/common/notebookCommon';
 
 const $ = DOM.$;
 
@@ -157,11 +157,7 @@ abstract class AbstractCellRenderer {
 
 		generateCellTopDecorations();
 
-		if (element.dragging) {
-			templateData.container.classList.add(DRAGGING_CLASS);
-		} else {
-			templateData.container.classList.remove(DRAGGING_CLASS);
-		}
+		this.dndController?.renderElement(element, templateData);
 
 		templateData.elementDisposables.add(templateData.instantiationService.createInstance(CellContextKeyManager, this.notebookEditor, element));
 	}
@@ -484,13 +480,7 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
 
 		templateDisposables.add(editor);
 
-		const progressBar = new ProgressBar(editorPart);
-		progressBar.hide();
-		templateDisposables.add(progressBar);
-
-		const collapsedProgressBar = new ProgressBar(cellInputCollapsedContainer);
-		collapsedProgressBar.hide();
-		templateDisposables.add(collapsedProgressBar);
+		const progressBar = templateDisposables.add(new CellProgressBar(editorPart, cellInputCollapsedContainer));
 
 		const statusBar = templateDisposables.add(this.instantiationService.createInstance(CellEditorStatusBar, editorPart));
 
@@ -527,7 +517,6 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
 			decorationContainer,
 			cellContainer,
 			progressBar,
-			collapsedProgressBar,
 			statusBar,
 			focusIndicatorLeft: focusIndicator,
 			focusIndicatorRight,
@@ -664,13 +653,7 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
 
 		const internalMetadata = element.internalMetadata;
 		this.updateExecutionOrder(internalMetadata, templateData);
-
-		const progressBar = element.isInputCollapsed ? templateData.collapsedProgressBar : templateData.progressBar;
-		if (internalMetadata.runState === NotebookCellExecutionState.Executing && !internalMetadata.isPaused) {
-			progressBar.infinite().show(500);
-		} else {
-			progressBar.hide();
-		}
+		templateData.progressBar.updateForInternalMetadata(element, internalMetadata);
 	}
 
 	private updateForKernel(element: CodeCellViewModel, templateData: CodeCellRenderTemplate): void {
@@ -779,13 +762,7 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
 				cellEditorOptions.setLineNumbers(element.lineNumbers);
 			}
 
-			if (e.inputCollapsedChanged) {
-				if (element.isInputCollapsed) {
-					templateData.progressBar.hide();
-				} else {
-					templateData.collapsedProgressBar.hide();
-				}
-			}
+			templateData.progressBar.updateForCellState(e, element);
 		}));
 
 		this.updateForOutputs(element, templateData);