Minimize GPU usage for interactive and notebook editor (#8268)

* Minimize usage of the GPU and fix the execution count spinner

* Add news entries

Author: rchiodo

news/2 Fixes/8003.md

@@ -0,0 +1 @@
+Make a spinner appear during executing a cell.

news/2 Fixes/8039.md

@@ -0,0 +1 @@
+Minimize the GPU impact of the interactive window and the notebook editor.

src/client/datascience/interactive-common/interactiveBase.ts

@@ -346,7 +346,7 @@ export abstract class InteractiveBase extends WebViewHost<IInteractiveWindowMapp
     @captureTelemetry(Telemetry.Interrupt)
     public async interruptKernel(): Promise<void> {
         if (this.notebook && !this.restartingKernel) {
-            const status = this.statusProvider.set(localize.DataScience.interruptKernelStatus(), undefined, undefined, this);
+            const status = this.statusProvider.set(localize.DataScience.interruptKernelStatus(), true, undefined, undefined, this);
 
             const settings = this.configuration.getSettings();
             const interruptTimeout = settings.datascience.jupyterInterruptTimeout;
@@ -463,7 +463,7 @@ export abstract class InteractiveBase extends WebViewHost<IInteractiveWindowMapp
         }
 
         // Start a status item
-        const status = this.setStatus(localize.DataScience.executingCode());
+        const status = this.setStatus(localize.DataScience.executingCode(), false);
 
         // Transmit this submission to all other listeners (in a live share session)
         if (!id) {
@@ -662,8 +662,8 @@ export abstract class InteractiveBase extends WebViewHost<IInteractiveWindowMapp
         }
     }
 
-    protected setStatus = (message: string): Disposable => {
-        const result = this.statusProvider.set(message, undefined, undefined, this);
+    protected setStatus = (message: string, showInWebView: boolean): Disposable => {
+        const result = this.statusProvider.set(message, showInWebView, undefined, undefined, this);
         this.potentiallyUnfinishedStatus.push(result);
         return result;
     }
@@ -733,7 +733,7 @@ export abstract class InteractiveBase extends WebViewHost<IInteractiveWindowMapp
     private async startServerImpl(): Promise<void> {
         // Status depends upon if we're about to connect to existing server or not.
         const status = (await this.jupyterExecution.getServer(await this.getNotebookOptions())) ?
-            this.setStatus(localize.DataScience.connectingToJupyter()) : this.setStatus(localize.DataScience.startingJupyter());
+            this.setStatus(localize.DataScience.connectingToJupyter(), true) : this.setStatus(localize.DataScience.startingJupyter(), true);
 
         // Check to see if we support ipykernel or not
         try {
@@ -899,7 +899,7 @@ export abstract class InteractiveBase extends WebViewHost<IInteractiveWindowMapp
         this.finishOutstandingCells();
 
         // Set our status
-        const status = this.statusProvider.set(localize.DataScience.restartingKernelStatus(), undefined, undefined, this);
+        const status = this.statusProvider.set(localize.DataScience.restartingKernelStatus(), true, undefined, undefined, this);
 
         try {
             if (this.notebook) {
@@ -951,7 +951,7 @@ export abstract class InteractiveBase extends WebViewHost<IInteractiveWindowMapp
     }
 
     private async reloadWithNew(): Promise<void> {
-        const status = this.setStatus(localize.DataScience.startingJupyter());
+        const status = this.setStatus(localize.DataScience.startingJupyter(), true);
         try {
             // Not the same as reload, we need to actually wait for the server.
             await this.stopServer();

src/client/datascience/interactive-ipynb/nativeEditor.ts

@@ -467,10 +467,10 @@ export class NativeEditor extends InteractiveBase implements INotebookEditor {
      * @private
      * @memberof NativeEditor
      */
-    private async updateVersionInfoInNotebook(): Promise<void>{
+    private async updateVersionInfoInNotebook(): Promise<void> {
         // Use the active interpreter
         const usableInterpreter = await this.jupyterExecution.getUsableJupyterPython();
-        if (usableInterpreter && usableInterpreter.version && this.notebookJson.metadata && this.notebookJson.metadata.language_info){
+        if (usableInterpreter && usableInterpreter.version && this.notebookJson.metadata && this.notebookJson.metadata.language_info) {
             this.notebookJson.metadata.language_info.version = `${usableInterpreter.version.major}.${usableInterpreter.version.minor}.${usableInterpreter.version.patch}`;
         }
     }
@@ -580,11 +580,11 @@ export class NativeEditor extends InteractiveBase implements INotebookEditor {
      * @memberof NativeEditor
      */
     private async getStoredContents(): Promise<string | undefined> {
-        const data = this.globalStorage.get<{contents?: string; lastModifiedTimeMs?: number}>(this.getStorageKey());
+        const data = this.globalStorage.get<{ contents?: string; lastModifiedTimeMs?: number }>(this.getStorageKey());
         // Check whether the file has been modified since the last time the contents were saved.
-        if (data && data.lastModifiedTimeMs && !this.isUntitled && this.file.scheme === 'file'){
+        if (data && data.lastModifiedTimeMs && !this.isUntitled && this.file.scheme === 'file') {
             const stat = await this.fileSystem.stat(this.file.fsPath);
-            if (stat.mtime > data.lastModifiedTimeMs){
+            if (stat.mtime > data.lastModifiedTimeMs) {
                 return;
             }
         }
@@ -605,7 +605,7 @@ export class NativeEditor extends InteractiveBase implements INotebookEditor {
         const key = this.getStorageKey();
         // Keep track of the time when this data was saved.
         // This way when we retrieve the data we can compare it against last modified date of the file.
-        await this.globalStorage.update(key, {contents, lastModifiedTimeMs: Date.now()});
+        await this.globalStorage.update(key, { contents, lastModifiedTimeMs: Date.now() });
     }
 
     private async close(): Promise<void> {
@@ -757,7 +757,7 @@ export class NativeEditor extends InteractiveBase implements INotebookEditor {
 
     @captureTelemetry(Telemetry.ConvertToPythonFile, undefined, false)
     private async export(cells: ICell[]): Promise<void> {
-        const status = this.setStatus(localize.DataScience.convertingToPythonFile());
+        const status = this.setStatus(localize.DataScience.convertingToPythonFile(), false);
         // First generate a temporary notebook with these cells.
         let tempFile: TemporaryFile | undefined;
         try {

src/client/datascience/interactive-window/interactiveWindowCommandListener.ts

@@ -351,7 +351,7 @@ export class InteractiveWindowCommandListener implements IDataScienceCommandList
 
     private waitForStatus<T>(promise: () => Promise<T>, format: string, file?: string, canceled?: () => void, interactiveWindow?: IInteractiveBase): Promise<T> {
         const message = file ? format.format(file) : format;
-        return this.statusProvider.waitWithStatus(promise, message, undefined, canceled, interactiveWindow);
+        return this.statusProvider.waitWithStatus(promise, message, true, undefined, canceled, interactiveWindow);
     }
 
     @captureTelemetry(Telemetry.ImportNotebook, { scope: 'command' }, false)

src/client/datascience/statusProvider.ts

@@ -55,9 +55,9 @@ export class StatusProvider implements IStatusProvider {
 
     constructor(@inject(IApplicationShell) private applicationShell: IApplicationShell) { }
 
-    public set(message: string, timeout?: number, cancel?: () => void, panel?: IInteractiveBase): Disposable {
+    public set(message: string, showInWebView: boolean, timeout?: number, cancel?: () => void, panel?: IInteractiveBase): Disposable {
         // Start our progress
-        this.incrementCount(panel);
+        this.incrementCount(showInWebView, panel);
 
         // Create a StatusItem that will return our promise
         const statusItem = new StatusItem(message, () => this.decrementCount(panel), timeout);
@@ -82,9 +82,9 @@ export class StatusProvider implements IStatusProvider {
         return statusItem;
     }
 
-    public async waitWithStatus<T>(promise: () => Promise<T>, message: string, timeout?: number, cancel?: () => void, panel?: IInteractiveBase): Promise<T> {
+    public async waitWithStatus<T>(promise: () => Promise<T>, message: string, showInWebView: boolean, timeout?: number, cancel?: () => void, panel?: IInteractiveBase): Promise<T> {
         // Create a status item and wait for our promise to either finish or reject
-        const status = this.set(message, timeout, cancel, panel);
+        const status = this.set(message, showInWebView, timeout, cancel, panel);
         let result: T;
         try {
             result = await promise();
@@ -94,9 +94,9 @@ export class StatusProvider implements IStatusProvider {
         return result;
     }
 
-    private incrementCount = (panel?: IInteractiveBase) => {
+    private incrementCount = (showInWebView: boolean, panel?: IInteractiveBase) => {
         if (this.statusCount === 0) {
-            if (panel) {
+            if (panel && showInWebView) {
                 panel.startProgress();
             }
         }

src/client/datascience/types.ts

@@ -383,10 +383,10 @@ export const IStatusProvider = Symbol('IStatusProvider');
 export interface IStatusProvider {
     // call this function to set the new status on the active
     // interactive window. Dispose of the returned object when done.
-    set(message: string, timeout?: number, canceled?: () => void, interactivePanel?: IInteractiveBase): Disposable;
+    set(message: string, showInWebView: boolean, timeout?: number, canceled?: () => void, interactivePanel?: IInteractiveBase): Disposable;
 
     // call this function to wait for a promise while displaying status
-    waitWithStatus<T>(promise: () => Promise<T>, message: string, timeout?: number, canceled?: () => void, interactivePanel?: IInteractiveBase): Promise<T>;
+    waitWithStatus<T>(promise: () => Promise<T>, message: string, showInWebView: boolean, timeout?: number, canceled?: () => void, interactivePanel?: IInteractiveBase): Promise<T>;
 }
 
 export interface IJupyterCommand {

src/datascience-ui/history-react/index.html

@@ -254,6 +254,7 @@
 --vscode-titleBar-activeForeground: #333333;
 --vscode-titleBar-inactiveBackground: rgba(221, 221, 221, 0.6);
 --vscode-titleBar-inactiveForeground: rgba(51, 51, 51, 0.6);
+--code-comment-color: green;
 --vscode-widget-shadow: #a8a8a8; }
 
 			body {

src/datascience-ui/interactive-common/common.css

@@ -388,24 +388,25 @@ body, html {
     grid-column: 1;
     font-weight: bold;
     color: var(--code-comment-color);
-    display:flex;
-    width: 16px;
-    height: 16px;
+    display:block;
+    width: 8px;
+    height: 8px;
+    white-space: nowrap;
+}
+
+@keyframes execution-spin {
+    from { transform: rotate(0); }
+    to   { transform: rotate(360deg); }
 }
+
  .execution-count-busy-svg {
-    animation-name: spin;
-    animation-duration: 4000ms;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    transform-origin: 50% 50%;
-    width: 16px;
-    height: 16px;
+    animation: execution-spin 4s linear infinite;
 }
 
 .execution-count-busy-polyline {
     fill: none;
     stroke: var(--code-comment-color);
-    stroke-width: 5;
+    stroke-width: 1;
 }
 
  @keyframes spin {

src/datascience-ui/interactive-common/executionCount.tsx

@@ -20,7 +20,7 @@ export class ExecutionCount extends React.Component<IExecutionCountProps> {
 
             return this.props.isBusy ?
                 (
-                    <div className='execution-count-busy-outer'>[<svg className='execution-count-busy-svg' viewBox='0 0 100 100'><polyline points='50,0, 50,50, 85,15, 50,50, 100,50, 50,50, 85,85, 50,50 50,100 50,50 15,85 50,50 0,50 50,50 15,15' className='execution-count-busy-polyline' /></svg>]</div>
+                    <div className='execution-count-busy-outer'>[<svg className='execution-count-busy-svg' viewBox='0 0 16 16'><polyline points='8,0, 8,8, 14,3, 8,8, 16,8, 8,8, 14,14, 8,8 8,16 8,8 3,14 8,8 0,8 8,8 3,3' className='execution-count-busy-polyline' /></svg>]</div>
                 ) :
                 (
                     <div className='execution-count'>{`[${this.props.count}]`}</div>