Handle new Item Properties Signal Payload

This commit addresses the persistence of item properties
and handling of the new ItemPropertiesSignalPayload.

Fixes #202

Signed-off-by: Neel Gondalia <ngondalia@blackberry.com>

vscode-trace-common/package.json

@@ -13,7 +13,7 @@
     ],
     "dependencies": {
         "json-bigint": "sidorares/json-bigint#2c0a5f896d7888e68e5f4ae3c7ea5cd42fd54473",
-        "traceviewer-base": "^0.2.1",
+        "traceviewer-base": "^0.2.2",
         "tsp-typescript-client": "^0.4.1"
     },
     "devDependencies": {

vscode-trace-common/src/messages/vscode-message-manager.ts

@@ -6,6 +6,7 @@ import JSONBigConfig from 'json-bigint';
 import { TimeRangeUpdatePayload } from 'traceviewer-base/lib/signals/time-range-data-signal-payloads';
 import { ContextMenuItemClickedSignalPayload } from 'traceviewer-base/lib/signals/context-menu-item-clicked-signal-payload';
 import { RowSelectionsChangedSignalPayload } from 'traceviewer-base/lib/signals/row-selections-changed-signal-payload';
+import { ItemPropertiesSignalPayload } from 'traceviewer-base/lib/signals/item-properties-signal-payload';
 
 const JSONBig = JSONBigConfig({
     useNativeBigInt: true
@@ -156,8 +157,8 @@ export class VsCodeMessageManager extends Messages.MessageManager {
         });
     }
 
-    propertiesUpdated(properties: { [key: string]: string }): void {
-        vscode.postMessage({ command: VSCODE_MESSAGES.UPDATE_PROPERTIES, data: { properties } });
+    propertiesUpdated(properties: ItemPropertiesSignalPayload): void {
+        vscode.postMessage({ command: VSCODE_MESSAGES.UPDATE_PROPERTIES, data: properties });
     }
 
     viewRangeUpdated(payload: TimeRangeUpdatePayload): void {

vscode-trace-extension/package.json

@@ -287,8 +287,8 @@
         "json-bigint": "sidorares/json-bigint#2c0a5f896d7888e68e5f4ae3c7ea5cd42fd54473",
         "lodash": "^4.17.15",
         "terser": "4.8.1",
-        "traceviewer-base": "^0.2.1",
-        "traceviewer-react-components": "^0.2.1",
+        "traceviewer-base": "^0.2.2",
+        "traceviewer-react-components": "^0.2.2",
         "vscode-trace-common": "0.2.6"
     },
     "devDependencies": {

vscode-trace-extension/src/extension.ts

@@ -61,14 +61,6 @@ export async function activate(context: vscode.ExtensionContext): Promise<Extern
         vscode.window.registerWebviewViewProvider(TraceExplorerTimeRangeDataProvider.viewType, timeRangeDataProvider)
     );
 
-    context.subscriptions.push(
-        vscode.commands.registerCommand('messages.post.propertiespanel', (command: string, data) => {
-            if (propertiesProvider) {
-                propertiesProvider.postMessagetoWebview(command, data);
-            }
-        })
-    );
-
     // TODO: For now, a different command opens traces from file explorer. Remove when we have a proper trace finder
     const fileOpenHandler = fileHandler();
     context.subscriptions.push(

vscode-trace-extension/src/trace-explorer/properties/trace-explorer-properties-view-webview-provider.ts

@@ -5,10 +5,16 @@
  ***************************************************************************************/
 import * as vscode from 'vscode';
 import { AbstractTraceExplorerProvider } from '../abstract-trace-explorer-provider';
+import { Signals, signalManager } from 'traceviewer-base/lib/signals/signal-manager';
+import { VSCODE_MESSAGES } from 'vscode-trace-common/lib/messages/vscode-message-manager';
+import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
+import { ItemPropertiesSignalPayload } from 'traceviewer-base/lib/signals/item-properties-signal-payload';
+import { TraceViewerPanel } from 'vscode-trace-extension/src/trace-viewer-panel/trace-viewer-webview-panel';
 
 export class TraceExplorerItemPropertiesProvider extends AbstractTraceExplorerProvider {
     public static readonly viewType = 'traceExplorer.itemPropertiesView';
     public readonly _webviewScript = 'propertiesPanel.js';
+    protected propertiesMap: Map<string, ItemPropertiesSignalPayload> = new Map();
     protected readonly _webviewOptions = {
         enableScripts: true,
         localResourceRoots: [
@@ -18,6 +24,54 @@ export class TraceExplorerItemPropertiesProvider extends AbstractTraceExplorerPr
     };
 
     protected init(): void {
+        this._view?.onDidChangeVisibility(() => {
+            if (this._view?.visible) {
+                const currExp = TraceViewerPanel.getCurrentExperiment();
+                if (currExp) {
+                    const props = this.propertiesMap?.get(currExp.UUID);
+                    if (props) this.handleUpdatedProperties(props);
+                }
+            }
+        });
+        signalManager().on(Signals.ITEM_PROPERTIES_UPDATED, this.handleUpdatedProperties);
+        signalManager().on(Signals.EXPERIMENT_SELECTED, this.handleExperimentChanged);
+        signalManager().on(Signals.CLOSE_TRACEVIEWERTAB, this.handleTabClosed);
         return;
     }
+
+    handleExperimentChanged = (exp: Experiment) => {
+        const props = this.propertiesMap.get(exp.UUID);
+        if (props) {
+            this.handleUpdatedProperties(props);
+        } else {
+            const emptyPayload = new ItemPropertiesSignalPayload({});
+            this.handleUpdatedProperties(emptyPayload);
+        }
+    };
+
+    protected dispose(): void {
+        signalManager().off(Signals.ITEM_PROPERTIES_UPDATED, this.handleUpdatedProperties);
+        signalManager().off(Signals.EXPERIMENT_SELECTED, this.handleExperimentChanged);
+        signalManager().off(Signals.CLOSE_TRACEVIEWERTAB, this.handleTabClosed);
+    }
+
+    handleTabClosed = (expUUID: string) => {
+        this.propertiesMap.delete(expUUID);
+        // Update the view based on current active experiment
+        const currExp = TraceViewerPanel.getCurrentExperiment();
+        if (currExp) {
+            const props = this.propertiesMap.get(currExp.UUID);
+            if (props) {
+                this.handleUpdatedProperties(props);
+                return;
+            }
+        }
+        const emptyPayload = new ItemPropertiesSignalPayload({});
+        this.handleUpdatedProperties(emptyPayload);
+    };
+
+    handleUpdatedProperties = (payload: ItemPropertiesSignalPayload) => {
+        this.propertiesMap?.set(payload.getExperimentUUID() ?? '', payload);
+        this.postMessagetoWebview(VSCODE_MESSAGES.UPDATE_PROPERTIES, payload);
+    };
 }

vscode-trace-extension/src/trace-viewer-panel/trace-viewer-webview-panel.ts

@@ -13,6 +13,7 @@ import * as fs from 'fs';
 import { traceExtensionWebviewManager } from '../extension';
 import { TimeRangeUpdatePayload } from 'traceviewer-base/lib/signals/time-range-data-signal-payloads';
 import { convertSignalExperiment } from 'vscode-trace-common/lib/signals/vscode-signal-converter';
+import { ItemPropertiesSignalPayload } from 'traceviewer-base/lib/signals/item-properties-signal-payload';
 
 const JSONBig = JSONBigConfig({
     useNativeBigInt: true
@@ -253,11 +254,15 @@ export class TraceViewerPanel {
                         this.loadTheme();
                         return;
                     case VSCODE_MESSAGES.UPDATE_PROPERTIES:
-                        vscode.commands.executeCommand(
-                            'messages.post.propertiespanel',
-                            'receivedProperties',
-                            message.data
-                        );
+                        if (message.data?.properties) {
+                            signalManager().fireItemPropertiesSignalUpdated(
+                                new ItemPropertiesSignalPayload(
+                                    message.data.properties,
+                                    message.data.experimentUUID,
+                                    message.data.outputDescriptorId
+                                )
+                            );
+                        }
                         return;
                     case VSCODE_MESSAGES.SAVE_AS_CSV:
                         if (message.payload.data && typeof message.payload.data === 'string') {

vscode-trace-webviews/package.json

@@ -28,8 +28,8 @@
         "react-virtualized": "^9.21.0",
         "semantic-ui-css": "^2.4.1",
         "semantic-ui-react": "^0.86.0",
-        "traceviewer-base": "^0.2.1",
-        "traceviewer-react-components": "^0.2.1",
+        "traceviewer-base": "^0.2.2",
+        "traceviewer-react-components": "^0.2.2",
         "vscode-trace-common": "0.2.6"
     },
     "devDependencies": {

vscode-trace-webviews/src/trace-explorer/properties/vscode-trace-explorer-properties-widget.tsx

@@ -5,9 +5,11 @@
  ***************************************************************************************/
 /* eslint-disable @typescript-eslint/ban-types */
 import React from 'react';
-import { VsCodeMessageManager } from 'vscode-trace-common/lib/messages/vscode-message-manager';
+import '../../style/trace-viewer.css';
+import { VSCODE_MESSAGES, VsCodeMessageManager } from 'vscode-trace-common/lib/messages/vscode-message-manager';
 import { ReactItemPropertiesWidget } from 'traceviewer-react-components/lib/trace-explorer/trace-explorer-properties-widget';
 import { signalManager } from 'traceviewer-base/lib/signals/signal-manager';
+import { ItemPropertiesSignalPayload } from 'traceviewer-base/lib/signals/item-properties-signal-payload';
 
 interface PropertiesViewState {
     properties: { [key: string]: string };
@@ -28,8 +30,15 @@ class TraceExplorerProperties extends React.Component<{}, PropertiesViewState> {
         window.addEventListener('message', event => {
             const message = event.data; // The JSON data our extension sent
             switch (message.command) {
-                case 'receivedProperties':
-                    signalManager().fireItemPropertiesSignalUpdated(message.data.properties);
+                case VSCODE_MESSAGES.UPDATE_PROPERTIES:
+                    if (message.data?.properties) {
+                        const payload = new ItemPropertiesSignalPayload(
+                            message.data.properties,
+                            message.data.experimentUUID,
+                            message.data.outputDescriptorId
+                        );
+                        signalManager().fireItemPropertiesSignalUpdated(payload);
+                    }
                     break;
             }
         });

vscode-trace-webviews/src/trace-viewer/vscode-trace-viewer-container.tsx

@@ -25,6 +25,7 @@ import { convertSignalExperiment } from 'vscode-trace-common/lib/signals/vscode-
 import '../style/trace-viewer.css';
 import { TimeRangeUpdatePayload } from 'traceviewer-base/lib/signals/time-range-data-signal-payloads';
 import { TimeRange } from 'traceviewer-base/lib/utils/time-range';
+import { ItemPropertiesSignalPayload } from 'traceviewer-base/lib/signals/item-properties-signal-payload';
 
 const JSONBig = JSONBigConfig({
     useNativeBigInt: true
@@ -51,15 +52,16 @@ class TraceViewerContainer extends React.Component<{}, VscodeAppState> {
         this._signalHandler.selectionRangeUpdated(payload);
     private onExperimentUpdated = (payload: Experiment): void => this._signalHandler.experimentUpdated(payload);
 
-    private _onProperties = (properties: { [key: string]: string }): void => this.doHandlePropertiesSignal(properties);
+    private _onProperties = (properties: ItemPropertiesSignalPayload): void =>
+        this.doHandlePropertiesSignal(properties);
     private _onSaveAsCSV = (payload: { traceId: string; data: string }): void => this.doHandleSaveAsCSVSignal(payload);
     private _onRowSelectionChanged = (payload: RowSelectionsChangedSignalPayload): void =>
         this.doHandleRowSelectSignal(payload);
     private _onContextMenuItemClicked = (payload: ContextMenuItemClickedSignalPayload): void =>
         this.doHandleContextMenuItemClicked(payload);
 
     /** Signal Handlers */
-    private doHandlePropertiesSignal(properties: { [key: string]: string }) {
+    private doHandlePropertiesSignal(properties: ItemPropertiesSignalPayload) {
         this._signalHandler.propertiesUpdated(properties);
     }