Change the gather icon while gathering

David Kutugata (DavidKutu) · Aug 5, 2020 · Jul 29, 2020 · Jul 31, 2020 · Jul 31, 2020 · Jul 31, 2020
commit 4a88ac3133b1e11dfbc07442772ce164ccb91937
diff --git a/src/client/datascience/gather/gatherListener.ts b/src/client/datascience/gather/gatherListener.ts
@@ -77,13 +77,21 @@ export class GatherListener implements IInteractiveWindowListener {
                 break;
 
             case InteractiveWindowMessages.GatherCode:
+                this.postEmitter.fire({
+                    message: InteractiveWindowMessages.Gathering,
+                    payload: { cellId: payload.id, gathering: true }
+                });
                 setTimeout(() => {
                     this.statusBar.show();
                 }, 2000);
                 this.handleMessage(message, payload, this.doGather);
                 break;
 
             case InteractiveWindowMessages.GatherCodeToScript:
+                this.postEmitter.fire({
+                    message: InteractiveWindowMessages.Gathering,
+                    payload: { cellId: payload.id, gathering: true }
+                });
                 setTimeout(() => {
                     this.statusBar.show();
                 }, 2000);
@@ -157,7 +165,13 @@ export class GatherListener implements IInteractiveWindowListener {
                 traceError(`Gather to Notebook error: ${err}`);
                 this.applicationShell.showErrorMessage(err);
             })
-            .finally(() => this.statusBar.hide());
+            .finally(() => {
+                this.postEmitter.fire({
+                    message: InteractiveWindowMessages.Gathering,
+                    payload: { cellId: payload.id, gathering: false }
+                });
+                this.statusBar.hide();
+            });
     }
 
     private doGatherToScript(payload: ICell): Promise<void> {
@@ -166,7 +180,13 @@ export class GatherListener implements IInteractiveWindowListener {
                 traceError(`Gather to Script error: ${err}`);
                 this.applicationShell.showErrorMessage(err);
             })
-            .finally(() => this.statusBar.hide());
+            .finally(() => {
+                this.postEmitter.fire({
+                    message: InteractiveWindowMessages.Gathering,
+                    payload: { cellId: payload.id, gathering: false }
+                });
+                this.statusBar.hide();
+            });
     }
 
     private gatherCodeInternal = async (cell: ICell, toScript: boolean = false) => {

diff --git a/src/client/datascience/interactive-common/interactiveWindowTypes.ts b/src/client/datascience/interactive-common/interactiveWindowTypes.ts
@@ -10,6 +10,7 @@ import { DebugProtocol } from 'vscode-debugprotocol';
 import {
     CommonActionType,
     IAddCellAction,
+    IChangeGatherStatus,
     ILoadIPyWidgetClassFailureAction,
     IVariableExplorerHeight,
     LoadIPyWidgetClassLoadAction,
@@ -98,6 +99,7 @@ export enum InteractiveWindowMessages {
     StopDebugging = 'stop_debugging',
     GatherCode = 'gather_code',
     GatherCodeToScript = 'gather_code_to_script',
+    Gathering = 'gathering',
     LaunchNotebookTrustPrompt = 'launch_notebook_trust_prompt',
     TrustNotebookComplete = 'trust_notebook_complete',
     LoadAllCells = 'load_all_cells',
@@ -630,6 +632,7 @@ export class IInteractiveWindowMapping {
     public [InteractiveWindowMessages.StopDebugging]: never | undefined;
     public [InteractiveWindowMessages.GatherCode]: ICell;
     public [InteractiveWindowMessages.GatherCodeToScript]: ICell;
+    public [InteractiveWindowMessages.Gathering]: IChangeGatherStatus;
     public [InteractiveWindowMessages.LaunchNotebookTrustPrompt]: never | undefined;
     public [InteractiveWindowMessages.TrustNotebookComplete]: never | undefined;
     public [InteractiveWindowMessages.LoadAllCells]: ILoadAllCells;

diff --git a/src/client/datascience/interactive-common/synchronization.ts b/src/client/datascience/interactive-common/synchronization.ts
@@ -129,6 +129,7 @@ const messageWithMessageTypes: MessageMapping<IInteractiveWindowMapping> & Messa
     [InteractiveWindowMessages.FocusedCellEditor]: MessageType.syncWithLiveShare,
     [InteractiveWindowMessages.GatherCode]: MessageType.other,
     [InteractiveWindowMessages.GatherCodeToScript]: MessageType.other,
+    [InteractiveWindowMessages.Gathering]: MessageType.other,
     [InteractiveWindowMessages.GetAllCells]: MessageType.other,
     [InteractiveWindowMessages.ForceVariableRefresh]: MessageType.other,
     [InteractiveWindowMessages.GetVariablesRequest]: MessageType.other,

diff --git a/src/datascience-ui/history-react/interactiveCell.tsx b/src/datascience-ui/history-react/interactiveCell.tsx
@@ -195,8 +195,13 @@ export class InteractiveCell extends React.Component<IInteractiveCellProps> {
                         !this.props.settings.gatherIsInstalled
                     }
                     tooltip={getLocString('DataScience.gatherCodeTooltip', 'Gather code')}
+                    disabled={this.props.cellVM.gathering}
                 >
-                    <Image baseTheme={this.props.baseTheme} class="image-button-image" image={ImageName.GatherCode} />
+                    <Image
+                        baseTheme={this.props.baseTheme}
+                        class={this.props.cellVM.gathering ? 'image-button-image rotate' : 'image-button-image'}
+                        image={this.props.cellVM.gathering ? ImageName.Sync : ImageName.GatherCode}
+                    />
                 </ImageButton>
                 <ImageButton
                     baseTheme={this.props.baseTheme}

diff --git a/src/datascience-ui/history-react/interactivePanel.less b/src/datascience-ui/history-react/interactivePanel.less
@@ -1,5 +1,5 @@
 /* Import common styles and then override them below */
-@import "../interactive-common/common.css";
+@import '../interactive-common/common.css';
 
 .toolbar-menu-bar-child {
     background: var(--override-background, var(--vscode-editor-background));
@@ -37,27 +37,26 @@
 }
 
 .cell-outer {
-    display:grid;
+    display: grid;
     grid-template-columns: auto minmax(0, 1fr) 8px;
     grid-column-gap: 3px;
     width: 100%;
 }
 
-
 .cell-output {
     margin: 0px;
     width: 100%;
     overflow-x: scroll;
     background: transparent;
 }
 
-.cell-output>div {
+.cell-output > div {
     background: var(--override-widget-background, var(--vscode-notifications-background));
 }
 
 xmp {
     margin: 0px;
-} 
+}
 
 .cell-input {
     margin: 0;
@@ -72,4 +71,17 @@ xmp {
     white-space: pre-wrap;
     word-break: break-all;
     overflow-x: hidden;
-}
+}
+
+.rotate {
+    animation: rotation 2s infinite linear;
+}
+
+@keyframes rotation {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(359deg);
+    }
+}
diff --git a/src/datascience-ui/history-react/redux/reducers/execution.ts b/src/datascience-ui/history-react/redux/reducers/execution.ts
@@ -10,10 +10,10 @@ import { InteractiveWindowMessages } from '../../../../client/datascience/intera
 import { CellState } from '../../../../client/datascience/types';
 import { generateMarkdownFromCodeLines } from '../../../common';
 import { createCellFrom } from '../../../common/cellFactory';
-import { createCellVM, IMainState } from '../../../interactive-common/mainState';
+import { createCellVM, ICellViewModel, IMainState } from '../../../interactive-common/mainState';
 import { postActionToExtension } from '../../../interactive-common/redux/helpers';
 import { Helpers } from '../../../interactive-common/redux/reducers/helpers';
-import { ICodeAction } from '../../../interactive-common/redux/reducers/types';
+import { IChangeGatherStatus, ICodeAction } from '../../../interactive-common/redux/reducers/types';
 import { InteractiveReducerArg } from '../mapping';
 import { Creation } from './creation';
 
@@ -127,4 +127,24 @@ export namespace Execution {
         }
         return arg.prevState;
     }
+
+    export function gathering(arg: InteractiveReducerArg<IChangeGatherStatus>): IMainState {
+        const index = arg.prevState.cellVMs.findIndex((c) => c.cell.id === arg.payload.data.cellId);
+        if (index >= 0) {
+            const cellVMs = [...arg.prevState.cellVMs];
+            const current = arg.prevState.cellVMs[index];
+            const newCell: ICellViewModel = {
+                ...current,
+                gathering: arg.payload.data.gathering
+            };
+            cellVMs[index] = newCell;
+
+            return {
+                ...arg.prevState,
+                cellVMs
+            };
+        }
+
+        return arg.prevState;
+    }
 }
diff --git a/src/datascience-ui/history-react/redux/reducers/index.ts b/src/datascience-ui/history-react/redux/reducers/index.ts
@@ -71,5 +71,6 @@ export const reducerMap: Partial<IInteractiveActionMapping> = {
     [InteractiveWindowMessages.UpdateKernel]: Kernel.updateStatus,
     [SharedMessages.LocInit]: CommonEffects.handleLocInit,
     [InteractiveWindowMessages.UpdateDisplayData]: CommonEffects.handleUpdateDisplayData,
-    [InteractiveWindowMessages.HasCell]: Transfer.hasCell
+    [InteractiveWindowMessages.HasCell]: Transfer.hasCell,
+    [InteractiveWindowMessages.Gathering]: Execution.gathering
 };
diff --git a/src/datascience-ui/interactive-common/mainState.ts b/src/datascience-ui/interactive-common/mainState.ts
@@ -56,6 +56,7 @@ export interface ICellViewModel {
     uiSideError?: string;
     runningByLine: DebugState;
     currentStack?: DebugProtocol.StackFrame[];
+    gathering: boolean;
 }
 
 export type IMainState = {
@@ -227,7 +228,8 @@ export function createEditableCellVM(executionCount: number): ICellViewModel {
         cursorPos: CursorPos.Current,
         hasBeenRun: false,
         scrollCount: 0,
-        runningByLine: DebugState.Design
+        runningByLine: DebugState.Design,
+        gathering: false
     };
 }
 
@@ -281,7 +283,8 @@ export function createCellVM(
         hasBeenRun: false,
         scrollCount: 0,
         runDuringDebug,
-        runningByLine: DebugState.Design
+        runningByLine: DebugState.Design,
+        gathering: false
     };
 
     // Update the input text

diff --git a/src/datascience-ui/interactive-common/redux/reducers/types.ts b/src/datascience-ui/interactive-common/redux/reducers/types.ts
@@ -257,4 +257,9 @@ export type NotifyIPyWidgeWidgetVersionNotSupportedAction = {
     moduleVersion: string;
 };
 
+export interface IChangeGatherStatus {
+    cellId: string;
+    gathering: boolean;
+}
+
 export type CommonAction<T = never | undefined> = ActionWithPayload<T, CommonActionType | InteractiveWindowMessages>;
diff --git a/src/datascience-ui/native-editor/nativeCell.tsx b/src/datascience-ui/native-editor/nativeCell.tsx
@@ -708,12 +708,12 @@ export class NativeCell extends React.Component<INativeCellProps> {
                             'Gather the code required to generate this cell into a new notebook'
                         )}
                         hidden={gatherDisabled}
-                        disabled={!this.props.isNotebookTrusted}
+                        disabled={!this.props.isNotebookTrusted || this.props.cellVM.gathering}
                     >
                         <Image
                             baseTheme={this.props.baseTheme}
                             class="image-button-image"
-                            image={ImageName.GatherCode}
+                            image={this.props.cellVM.gathering ? ImageName.Sync : ImageName.GatherCode}
                         />
                     </ImageButton>
                     <ImageButton

diff --git a/src/datascience-ui/native-editor/nativeEditor.less b/src/datascience-ui/native-editor/nativeEditor.less
@@ -1,5 +1,5 @@
 /* Import common styles and then override them below */
-@import "../interactive-common/common.css";
+@import '../interactive-common/common.css';
 
 .toolbar-panel-button {
     border-width: 1px;
@@ -61,13 +61,13 @@
 }
 
 .cell-outer {
-    display:grid;
-    grid-template-columns:auto auto minmax(0, 1fr);
+    display: grid;
+    grid-template-columns: auto auto minmax(0, 1fr);
 }
 
 .cell-outer-editable {
-    display:grid;
-    grid-template-columns:auto auto minmax(0, 1fr);
+    display: grid;
+    grid-template-columns: auto auto minmax(0, 1fr);
     margin-top: 0px;
 }
 
@@ -94,7 +94,7 @@
 
 .code-area {
     position: relative;
-    width:100%;
+    width: 100%;
     padding-right: 8px;
     margin-bottom: 0px;
     padding-left: 2px;
@@ -104,7 +104,7 @@
 
 .markdown-editor-area {
     position: relative;
-    width:100%;
+    width: 100%;
     padding-right: 8px;
     margin-bottom: 0px;
     padding-left: 2px;
@@ -350,16 +350,16 @@
     outline: none;
 }
 
-.add-cell-line-top:hover .add-cell-line-button{
+.add-cell-line-top:hover .add-cell-line-button {
     visibility: visible;
 }
 
-.add-cell-line-button .image-button-image{
-    height: var(--button-size)
+.add-cell-line-button .image-button-image {
+    height: var(--button-size);
 }
 
 .add-cell-line-button .image-button-image svg {
-    height: var(--button-size)
+    height: var(--button-size);
 }
 
 .add-cell-line-divider {
@@ -492,3 +492,16 @@ collapse-bar        controls-div        [cell-input, cell-output, markdown-cell-
     margin-bottom: 4px;
     margin-left: 3px;
 }
+
+.rotate {
+    animation: rotation 2s infinite linear;
+}
+
+@keyframes rotation {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(359deg);
+    }
+}
diff --git a/src/datascience-ui/native-editor/redux/reducers/creation.ts b/src/datascience-ui/native-editor/redux/reducers/creation.ts
@@ -224,7 +224,8 @@ export namespace Creation {
             cursorPos: CursorPos.Current,
             hasBeenRun: false,
             scrollCount: 0,
-            runningByLine: DebugState.Design
+            runningByLine: DebugState.Design,
+            gathering: false
         };
 
         Transfer.postModelRemoveAll(arg, newVM.cell.id);
@@ -280,7 +281,8 @@ export namespace Creation {
                 cursorPos: CursorPos.Current,
                 hasBeenRun: false,
                 scrollCount: 0,
-                runningByLine: DebugState.Design
+                runningByLine: DebugState.Design,
+                gathering: false
             };
 
             // Send messages to other side to indicate the new add

diff --git a/src/datascience-ui/native-editor/redux/reducers/execution.ts b/src/datascience-ui/native-editor/redux/reducers/execution.ts
@@ -23,6 +23,7 @@ import {
     CommonActionType,
     ICellAction,
     IChangeCellTypeAction,
+    IChangeGatherStatus,
     IExecuteAction
 } from '../../../interactive-common/redux/reducers/types';
 import { NativeEditorReducerArg } from '../mapping';
@@ -217,6 +218,26 @@ export namespace Execution {
         return arg.prevState;
     }
 
+    export function gathering(arg: NativeEditorReducerArg<IChangeGatherStatus>): IMainState {
+        const index = arg.prevState.cellVMs.findIndex((c) => c.cell.id === arg.payload.data.cellId);
+        if (index >= 0) {
+            const cellVMs = [...arg.prevState.cellVMs];
+            const current = arg.prevState.cellVMs[index];
+            const newCell: ICellViewModel = {
+                ...current,
+                gathering: arg.payload.data.gathering
+            };
+            cellVMs[index] = newCell;
+
+            return {
+                ...arg.prevState,
+                cellVMs
+            };
+        }
+
+        return arg.prevState;
+    }
+
     export function undo(arg: NativeEditorReducerArg): IMainState {
         if (arg.prevState.undoStack.length > 0) {
             // Pop one off of our undo stack and update our redo

diff --git a/src/datascience-ui/native-editor/redux/reducers/index.ts b/src/datascience-ui/native-editor/redux/reducers/index.ts
@@ -57,6 +57,7 @@ export const reducerMap: Partial<INativeEditorActionMapping> = {
     [CommonActionType.LINK_CLICK]: Transfer.linkClick,
     [CommonActionType.GATHER_CELL]: Transfer.gather,
     [CommonActionType.GATHER_CELL_TO_SCRIPT]: Transfer.gatherToScript,
+    [InteractiveWindowMessages.Gathering]: Execution.gathering,
     [CommonActionType.EDITOR_LOADED]: Transfer.started,
     [CommonActionType.LOADED_ALL_CELLS]: Transfer.loadedAllCells,
     [CommonActionType.LAUNCH_NOTEBOOK_TRUST_PROMPT]: Transfer.launchNotebookTrustPrompt,