Fix bigint support in messages sent between webviews and vscode

bhufmann · bhufmann · commit c995bcd95be1 · 2022-03-30T10:03:52.000-04:00
TODO: JSONBig.parse() create bigint if numbers are small. This has to be addressed when deserializing messages. Re-use tsp-typescript-client's normalizer to do that. The following branch in the tps-typescript-client is introducing an utility class and, if accepted, it can be used to solve the deserialization issue: eclipse-cdt-cloud/tsp-typescript-client#56 Signed-off-by: Bernd Hufmann <bernd.hufmann@ericsson.com>
diff --git a/common-tsconfig.json b/common-tsconfig.json
@@ -17,6 +17,7 @@
         "strict": true,
         "sourceMap": true,
         "strictPropertyInitialization": false,
+        "esModuleInterop": true,
         "target": "ES2017"
     }
 }
diff --git a/vscode-trace-extension/package.json b/vscode-trace-extension/package.json
@@ -97,6 +97,7 @@
     "ag-grid-community": "^20.2.0",
     "ag-grid-react": "^20.2.0",
     "chart.js": "^2.8.0",
+    "json-bigint": "sidorares/json-bigint#2c0a5f896d7888e68e5f4ae3c7ea5cd42fd54473",
     "lodash": "^4.17.15",
     "terser": "3.16.0",
     "traceviewer-base": "next",
@@ -106,6 +107,7 @@
   },
   "devDependencies": {
     "@types/jest": "^23.3.13",
+    "@types/json-bigint": "^1.0.1",
     "@types/node": "^10.1.2",
     "@types/vscode": "^1.52.0",
     "@typescript-eslint/eslint-plugin": "^3.4.0",
diff --git a/vscode-trace-extension/src/trace-explorer/opened-traces/trace-explorer-opened-traces-webview-provider.ts b/vscode-trace-extension/src/trace-explorer/opened-traces/trace-explorer-opened-traces-webview-provider.ts
@@ -4,6 +4,11 @@ import { getTspClientUrl, getTraceServerUrl } from '../../utils/tspClient';
 import { signalManager, Signals } from 'traceviewer-base/lib/signals/signal-manager';
 import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
 import { OpenedTracesUpdatedSignalPayload } from 'traceviewer-base/lib/signals/opened-traces-updated-signal-payload';
+import JSONBigConfig from 'json-bigint';
+
+const JSONBig = JSONBigConfig({
+    useNativeBigInt: true,
+});
 
 export class TraceExplorerOpenedTracesViewProvider implements vscode.WebviewViewProvider {
 
@@ -56,25 +61,30 @@ export class TraceExplorerOpenedTracesViewProvider implements vscode.WebviewView
 	            webviewView.webview.postMessage({command: 'set-tspClient', data: getTspClientUrl()});
 	            return;
 	        case 'reopenTrace':
-	            if (message.data && message.data.experiment) {
-	                const panel = TraceViewerPanel.createOrShow(this._extensionUri, message.data.experiment.name);
-	                panel.setExperiment(message.data.experiment);
+	            if (message.data && message.data.wrapper) {
+	                // FIXME: JSONBig.parse() create bigint if numbers are small
+	                const experiment = JSONBig.parse(message.data.wrapper);
+	                const panel = TraceViewerPanel.createOrShow(this._extensionUri, experiment.name);
+	                panel.setExperiment(experiment);
 	            }
 	            return;
 	        case 'closeTrace':
-	            if (message.data && message.data.experiment) {
-	                TraceViewerPanel.disposePanel(this._extensionUri, message.data.experiment.name);
+	            if (message.data && message.data.wrapper) {
+	                // FIXME: JSONBig.parse() create bigint if numbers are small
+	                TraceViewerPanel.disposePanel(this._extensionUri, JSONBig.parse(message.data.wrapper).name);
 	            }
 	            return;
 	        case 'deleteTrace':
-	            if (message.data && message.data.experiment) {
+	            if (message.data && message.data.wrapper) {
+	                // FIXME: JSONBig.parse() create bigint if numbers are small
 	                // just remove the panel here
-	                TraceViewerPanel.disposePanel(this._extensionUri, message.data.experiment.name);
+	                TraceViewerPanel.disposePanel(this._extensionUri, JSONBig.parse(message.data.wrapper).name);
 	            }
 	            return;
 	        case 'experimentSelected': {
-	            if (message.data && message.data.experiment) {
-	                signalManager().fireExperimentSelectedSignal(message.data.experiment);
+	            if (message.data && message.data.wrapper) {
+	                // FIXME: JSONBig.parse() create bigint if numbers are small
+	                signalManager().fireExperimentSelectedSignal(JSONBig.parse(message.data.wrapper));
 	            }
 	        }
 	        }
diff --git a/vscode-trace-extension/src/trace-explorer/views/trace-explorer-available-views-webview-provider.ts b/vscode-trace-extension/src/trace-explorer/views/trace-explorer-available-views-webview-provider.ts
@@ -4,6 +4,11 @@ import { signalManager, Signals } from 'traceviewer-base/lib/signals/signal-mana
 import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
 import { TraceViewerPanel } from '../../trace-viewer-panel/trace-viewer-webview-panel';
 import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descriptor';
+import JSONBigConfig from 'json-bigint';
+
+const JSONBig = JSONBigConfig({
+    useNativeBigInt: true,
+});
 
 export class TraceExplorerAvailableViewsProvider implements vscode.WebviewViewProvider {
 
@@ -46,19 +51,22 @@ export class TraceExplorerAvailableViewsProvider implements vscode.WebviewViewPr
 	            return;
 	        case 'outputAdded':
 	            if (message.data && message.data.descriptor) {
-	                const descriptor: OutputDescriptor = message.data.descriptor as OutputDescriptor;
+	                 // FIXME: JSONBig.parse() create bigint if numbers are small
+	                const descriptor = JSONBig.parse(message.data.descriptor) as OutputDescriptor;
 	                // TODO: Don't use static current panel, i.e. find better design to add output...
+
 	                TraceViewerPanel.addOutputToCurrent(descriptor);
 	                // const panel = TraceViewerPanel.createOrShow(this._extensionUri, message.data.experiment.name);
 	                // panel.setExperiment(message.data.experiment);
 	            }
 	            return;
 	        case 'experimentSelected': {
-	            if (message.data && message.data.experiment) {
+	            if (message.data && message.data.wrapper) {
 	                try {
 	                    // Avoid endless forwarding of signal
 	                    this._selectionOngoing = true;
-	                    signalManager().fireExperimentSelectedSignal(message.data.experiment);
+	                    // FIXME: JSONBig.parse() create bigint if numbers are small
+	                    signalManager().fireExperimentSelectedSignal(JSONBig.parse(message.data.wrapper));
 	                } finally {
 	                    this._selectionOngoing = false;
 	                }
diff --git a/vscode-trace-extension/src/trace-viewer-panel/trace-viewer-webview-panel.ts b/vscode-trace-extension/src/trace-viewer-panel/trace-viewer-webview-panel.ts
@@ -4,6 +4,11 @@ import { getTspClientUrl, getTraceServerUrl } from '../utils/tspClient';
 import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descriptor';
 import { handleStatusMessage, handleRemoveMessage, setStatusFromPanel } from '../common/trace-message';
 import { signalManager, Signals } from 'traceviewer-base/lib/signals/signal-manager';
+import JSONBigConfig from 'json-bigint';
+
+const JSONBig = JSONBigConfig({
+    useNativeBigInt: true,
+});
 
 // TODO: manage mutiple panels (currently just a hack around, need to be fixed)
 
@@ -115,7 +120,8 @@ export class TraceViewerPanel {
 	            // Post the tspTypescriptClient
 	            this._panel.webview.postMessage({command: 'set-tspClient', data: getTspClientUrl()});
 	            if (this._experiment) {
-	                this._panel.webview.postMessage({command: 'set-experiment', data: this._experiment});
+	                const wrapper: string = JSONBig.stringify(this._experiment);
+	                this._panel.webview.postMessage({command: 'set-experiment', data: wrapper});
 	            }
 	            return;
 	        }
@@ -152,11 +158,13 @@ export class TraceViewerPanel {
 
 	setExperiment(experiment: Experiment): void {
 	    this._experiment = experiment;
-	    this._panel.webview.postMessage({command: 'set-experiment', data: experiment});
+	    const wrapper: string = JSONBig.stringify(experiment);
+	    this._panel.webview.postMessage({command: 'set-experiment', data: wrapper});
 	}
 
 	addOutput(descriptor: OutputDescriptor): void {
-	    this._panel.webview.postMessage({command: 'add-output', data: descriptor});
+	    const wrapper: string = JSONBig.stringify(descriptor);
+	    this._panel.webview.postMessage({command: 'add-output', data: wrapper});
 	}
 
 	private _getHtmlForWebview() {
diff --git a/vscode-trace-webviews/package.json b/vscode-trace-webviews/package.json
@@ -14,6 +14,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.17",
     "@fortawesome/free-solid-svg-icons": "^5.8.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
+    "json-bigint": "sidorares/json-bigint#2c0a5f896d7888e68e5f4ae3c7ea5cd42fd54473",
     "lodash": "^4.17.15",
     "lodash.debounce": "^4.0.8",
     "react": "^16.3.2",
@@ -30,6 +31,7 @@
     },
   "devDependencies": {
     "@types/jest": "^23.3.13",
+    "@types/json-bigint": "^1.0.1",
     "@types/node": "^10.1.2",
     "@types/react": "^16.3.14",
     "@types/react-dom": "^16.0.5",
diff --git a/vscode-trace-webviews/src/common/vscode-message-manager.ts b/vscode-trace-webviews/src/common/vscode-message-manager.ts
@@ -1,6 +1,11 @@
 import * as Messages from 'traceviewer-base/lib/message-manager';
 import { OutputAddedSignalPayload } from 'traceviewer-base/lib/signals/output-added-signal-payload';
 import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
+import JSONBigConfig from 'json-bigint';
+
+const JSONBig = JSONBigConfig({
+    useNativeBigInt: true,
+});
 
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 interface vscode {
@@ -39,22 +44,31 @@ export class VsCodeMessageManager extends Messages.MessageManager {
      * Trace Explorer React APP
      *************************************************************************/
     reOpenTrace(experiment: Experiment): void {
-        vscode.postMessage({command: 'reopenTrace', data: {experiment}});
+        const wrapper: string = JSONBig.stringify(experiment);
+        vscode.postMessage({command: 'reopenTrace', data: {wrapper}});
     }
 
     closeTrace(experiment: Experiment): void {
-        vscode.postMessage({command: 'closeTrace', data: {experiment}});
+        const wrapper: string = JSONBig.stringify(experiment);
+        vscode.postMessage({command: 'closeTrace', data: {wrapper}});
     }
 
     deleteTrace(experiment: Experiment): void {
-        vscode.postMessage({command: 'deleteTrace', data: {experiment}});
+        const wrapper: string = JSONBig.stringify(experiment);
+        vscode.postMessage({command: 'deleteTrace', data: {wrapper}});
     }
 
     experimentSelected(experiment: Experiment | undefined): void {
-        vscode.postMessage({command: 'experimentSelected', data: {experiment}});
+        let wrapper = undefined;
+        if (experiment) {
+            wrapper = JSONBig.stringify(experiment);
+        }
+        vscode.postMessage({command: 'experimentSelected', data: {wrapper}});
     }
 
     outputAdded(payload: OutputAddedSignalPayload): void {
-        vscode.postMessage({command: 'outputAdded', data: {experiment: payload.getExperiment(), descriptor: payload.getOutputDescriptor() }});
+        const expWrapper = JSONBig.stringify(payload.getExperiment());
+        const descWrapper = JSONBig.stringify(payload.getOutputDescriptor());
+        vscode.postMessage({command: 'outputAdded', data: {data: expWrapper, descriptor: descWrapper }});
     }
 }
diff --git a/vscode-trace-webviews/src/trace-explorer/opened-traces/vscode-trace-explorer-opened-traces-widget.tsx b/vscode-trace-webviews/src/trace-explorer/opened-traces/vscode-trace-explorer-opened-traces-widget.tsx
@@ -108,7 +108,7 @@ class TraceExplorerOpenedTraces extends React.Component<{}, OpenedTracesAppState
       <Menu id={MENU_ID} theme={'dark'} animation={'fade'}>
           <Item id="open-id" onClick={this.handleItemClick}>Open Trace</Item>
           <Item id="close-id" onClick={this.handleItemClick}>Close Trace</Item>
-          <Item id="delete-id" onClick={this.handleItemClick}>Delete Trace</Item>
+          <Item id="remove-id" onClick={this.handleItemClick}>Remove Trace</Item>
       </Menu>
       </>
       );
@@ -122,10 +122,10 @@ class TraceExplorerOpenedTraces extends React.Component<{}, OpenedTracesAppState
       case 'close-id':
           this._signalHandler.closeTrace(args.props.experiment as Experiment);
           return;
-      case 'delete-id':
+      case 'remove-id':
           this._signalHandler.deleteTrace(args.props.experiment as Experiment);
           if (this._experimentManager) {
-              this._experimentManager.closeExperiment((args.props.experiment as Experiment).UUID);
+              this._experimentManager.deleteExperiment((args.props.experiment as Experiment).UUID);
           }
 
           return;
diff --git a/vscode-trace-webviews/src/trace-viewer/vscode-trace-viewer-container.tsx b/vscode-trace-webviews/src/trace-viewer/vscode-trace-viewer-container.tsx
@@ -1,18 +1,23 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/ban-types */
-import * as React from 'react';
-import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
-import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
-import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descriptor';
-import { TraceContextComponent } from 'traceviewer-react-components/lib/components/trace-context-component';
-import { VsCodeMessageManager } from '../common/vscode-message-manager';
 import 'ag-grid-community/dist/styles/ag-grid.css';
 import 'ag-grid-community/dist/styles/ag-theme-balham-dark.css';
 import 'ag-grid-community/dist/styles/ag-theme-balham.css';
+import * as React from 'react';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
-import '../style/trace-viewer.css';
+import { TraceContextComponent } from 'traceviewer-react-components/lib/components/trace-context-component';
 import 'traceviewer-react-components/style/trace-context-style.css';
+import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
+import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descriptor';
+import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
+import { VsCodeMessageManager } from '../common/vscode-message-manager';
+import '../style/trace-viewer.css';
+import JSONBigConfig from 'json-bigint';
+
+const JSONBig = JSONBigConfig({
+    useNativeBigInt: true,
+});
 
 interface VscodeAppState {
   experiment: Experiment | undefined;
@@ -23,6 +28,10 @@ interface VscodeAppState {
 class App extends React.Component<{}, VscodeAppState>  {
   private _signalHandler: VsCodeMessageManager;
 
+  // TODO add support for marker sets
+  private selectedMarkerCategoriesMap: Map<string, string[]> = new Map<string, string[]>();
+  private selectedMarkerSetId = '';
+
   constructor(props: {}) {
       super(props);
       this.state = {
@@ -37,13 +46,17 @@ class App extends React.Component<{}, VscodeAppState>  {
           const message = event.data; // The JSON data our extension sent
           switch (message.command) {
           case 'set-experiment':
-              this.setState({experiment: message.data as Experiment});
+              // FIXME: JSONBig.parse() create bigint if numbers are small
+              const experiment = JSONBig.parse(message.data);
+              this.setState({experiment: experiment});
               break;
           case 'set-tspClient':
               this.setState({tspClient: new TspClient(message.data)});
               break;
           case 'add-output':
-              this.setState({outputs: [...this.state.outputs, message.data] });
+              // FIXME: JSONBig.parse() create bigint if numbers are small
+              const descriptor = JSONBig.parse(message.data);
+              this.setState({outputs: [...this.state.outputs, descriptor] });
               break;
           }
       });
@@ -66,6 +79,8 @@ class App extends React.Component<{}, VscodeAppState>  {
                   experiment={this.state.experiment}
                   tspClient={this.state.tspClient}
                   outputs={this.state.outputs}
+                  markerCategoriesMap={this.selectedMarkerCategoriesMap}
+                  markerSetId={this.selectedMarkerSetId}
                   messageManager={this._signalHandler}
                   onOutputRemove={this.onOutputRemoved}
                   // eslint-disable-next-line @typescript-eslint/no-empty-function
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@`
`17`	`17`	`"strict": true,`
`18`	`18`	`"sourceMap": true,`
`19`	`19`	`"strictPropertyInitialization": false,`
	`20`	`+ "esModuleInterop": true,`
`20`	`21`	`"target": "ES2017"`
`21`	`22`	`}`
`22`	`23`	`}`