Handle new Item Properties Signal Payload

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);
     }
 

yarn.lock

@@ -7271,16 +7271,7 @@ ssri@^9.0.0, ssri@^9.0.1:
   dependencies:
     minipass "^3.1.1"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7358,14 +7349,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -7620,17 +7604,17 @@ tr46@~0.0.3:
   resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
-traceviewer-base@0.2.1, traceviewer-base@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/traceviewer-base/-/traceviewer-base-0.2.1.tgz#22e9fe7260f9541caf84aabadada7eb9d51321ce"
-  integrity sha512-sCUpb5qJVODzJO8oYXfrEZZRvHXzaUvEWVkHmiCz/b8/66Ug2dbEXwo0T/eez7wuT3XV0h8VavaUTcM2pDzjFw==
+traceviewer-base@0.2.2, traceviewer-base@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/traceviewer-base/-/traceviewer-base-0.2.2.tgz#fc2b9cbe61f7e707b2f4cd6f4dd567ef8b20e512"
+  integrity sha512-vs7bznByIWfxTeWhoa/KwoEcGq/z9Hj6e/SHINJURJo9/DlhyqmokLBhCQVkLkrojKR9SqUpOcVw7SHAPG/NFQ==
   dependencies:
     tsp-typescript-client "^0.4.1"
 
-traceviewer-react-components@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/traceviewer-react-components/-/traceviewer-react-components-0.2.1.tgz#7e4109cb73ae0b2f5f8ad73351fe0a249339110c"
-  integrity sha512-jkIRCn3WUx1cGHcT9SVc+At0Nns6DxZISNhJtPA5urtbhBtLwn0yyCZT47IwxKDYDSXciSwuaZ0Yh5nwInW75A==
+traceviewer-react-components@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/traceviewer-react-components/-/traceviewer-react-components-0.2.2.tgz#7a03fc8e553940a21da779908a4fd251ddc5e1fe"
+  integrity sha512-eZ3Q5WEGKFbZ3ydktxq7braqYiLPb/YytCuJKwBbAoOPk5OhfZ/Z5xkKguugrBiv4GbJ+Gr82kJ6ls6JMHLAng==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^1.2.17 <1.3.0"
     "@fortawesome/free-solid-svg-icons" "^5.8.1"
@@ -7651,7 +7635,7 @@ traceviewer-react-components@^0.2.1:
     semantic-ui-css "^2.4.1"
     semantic-ui-react "^0.86.0"
     timeline-chart "^0.3.1"
-    traceviewer-base "0.2.1"
+    traceviewer-base "0.2.2"
     tsp-typescript-client "^0.4.1"
 
 trim-newlines@^3.0.0:
@@ -8159,7 +8143,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -8177,15 +8161,6 @@ wrap-ansi@^6.0.1:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"