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 #131808
microsoft · 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);