Persisted state of outputs should be opaque

signal-manager, abstract-output-component and trace-context-component should pass the persisted state as a 'black box' object Helps fix #762 Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
eclipse-cdt-cloud · Jul 12, 2022 · 2a67c51 · 2a67c51
1 parent 86003c2
commit 2a67c51
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 49 deletions.
diff --git a/packages/base/src/signals/signal-manager.ts b/packages/base/src/signals/signal-manager.ts
@@ -26,8 +26,10 @@ export declare interface SignalManager {
     fireTraceServerStartedSignal(): void;
     fireUndoSignal(): void;
     fireRedoSignal(): void;
-    firePinView(payload: { output: OutputDescriptor, checkedSeries?: number[], collapsedNodes?: number[], collapsedMarkerNodes?: number[]}): void;
-    fireUnPinView(payload?: { output: OutputDescriptor, checkedSeries?: number[], collapsedNodes?: number[], collapsedMarkerNodes?: number[]}): void;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    firePinView(output: OutputDescriptor, payload?: any): void;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fireUnPinView(output: OutputDescriptor, payload?: any): void;
 }
 
 export const Signals = {
@@ -121,11 +123,13 @@ export class SignalManager extends EventEmitter implements SignalManager {
     fireRedoSignal(): void {
         this.emit(Signals.REDO);
     }
-    firePinView(payload: { output: OutputDescriptor, checkedSeries?: number[], collapsedNodes?: number[], collapsedMarkerNodes?: number[]}): void {
-        this.emit(Signals.PIN_VIEW, payload);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    firePinView(output: OutputDescriptor, payload?: any): void {
+        this.emit(Signals.PIN_VIEW, output, payload);
     }
-    fireUnPinView(payload?: { output: OutputDescriptor, checkedSeries?: number[], collapsedNodes?: number[], collapsedMarkerNodes?: number[]}): void {
-        this.emit(Signals.UNPIN_VIEW, payload);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    fireUnPinView(output: OutputDescriptor, payload?: any): void {
+        this.emit(Signals.UNPIN_VIEW, output, payload);
     }
 }
 

diff --git a/packages/react-components/src/components/abstract-output-component.tsx b/packages/react-components/src/components/abstract-output-component.tsx
@@ -41,7 +41,8 @@ export interface AbstractOutputProps {
     onTouchEnd?: VoidFunction;
     setChartOffset?: (chartOffset: number) => void;
     pinned?: boolean
-    persistChartState?: ChartPersistedState;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    persistChartState?: any;
 }
 
 export interface AbstractOutputState {
@@ -51,13 +52,6 @@ export interface AbstractOutputState {
     additionalOptions?: boolean;
 }
 
-export interface ChartPersistedState {
-    output: OutputDescriptor;
-    checkedSeries?: number[];
-    collapsedNodes?: number[];
-    collapsedMarkerNodes?: number[];
-}
-
 export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S extends AbstractOutputState> extends React.Component<P, S> {
 
     private readonly DEFAULT_HANDLE_WIDTH = 30;
@@ -127,7 +121,7 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
 
     private closeComponent() {
         if (this.props.pinned) {
-            signalManager().fireUnPinView();
+            signalManager().fireUnPinView(this.props.outputDescriptor);
         }
         this.props.onOutputRemove(this.props.outputDescriptor.id);
     }
@@ -160,7 +154,7 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
     protected showOptions(): React.ReactNode {
         return <React.Fragment>
             <ul>
-                {this.props.pinned === undefined && <li className='drop-down-list-item' onClick={() => this.pinView({ output: this.props.outputDescriptor })}>Pin View</li>}
+                {this.props.pinned === undefined && <li className='drop-down-list-item' onClick={() => this.pinView()}>Pin View</li>}
                 {this.props.pinned === true && <li className='drop-down-list-item' onClick={() => this.unPinView()}>Unpin View</li>}
             </ul>
             {this.state.additionalOptions && this.showAdditionalOptions()}
@@ -175,15 +169,17 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
         return;
     }
 
-    protected pinView(payload: ChartPersistedState): void {
-        signalManager().firePinView(payload);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    protected pinView(payload?: any): void {
+        signalManager().firePinView(this.props.outputDescriptor, payload);
     }
 
-    protected unPinView(payload?: ChartPersistedState): void {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    protected unPinView(payload?: any): void {
         if (payload) {
-            signalManager().fireUnPinView(payload);
+            signalManager().fireUnPinView(this.props.outputDescriptor, payload);
         } else {
-            signalManager().fireUnPinView();
+            signalManager().fireUnPinView(this.props.outputDescriptor);
         }
     }
 

diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -14,15 +14,15 @@ import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper
 import { ResponseStatus } from 'tsp-typescript-client/lib/models/response/responses';
 import { TimeGraphEntry } from 'tsp-typescript-client/lib/models/timegraph';
 import { signalManager, Signals } from 'traceviewer-base/lib/signals/signal-manager';
-import { AbstractOutputProps, AbstractOutputState, ChartPersistedState } from './abstract-output-component';
+import { AbstractOutputProps, AbstractOutputState } from './abstract-output-component';
 import { AbstractTreeOutputComponent } from './abstract-tree-output-component';
 import { StyleProperties } from './data-providers/style-properties';
 import { StyleProvider } from './data-providers/style-provider';
 import { TspDataProvider } from './data-providers/tsp-data-provider';
 import { ReactTimeGraphContainer } from './utils/timegraph-container-component';
 import { OutputElementStyle } from 'tsp-typescript-client/lib/models/styles';
 import { EntryTree } from './utils/filter-tree/entry-tree';
-import { listToTree, getAllExpandedNodeIds, getIndexOfNode } from './utils/filter-tree/utils';
+import { listToTree, getAllExpandedNodeIds, getIndexOfNode, validateNumArray } from './utils/filter-tree/utils';
 import hash from 'traceviewer-base/lib/utils/value-hash';
 import ColumnHeader from './utils/filter-tree/column-header';
 import { TimeGraphAnnotationComponent } from 'timeline-chart/lib/components/time-graph-annotation';
@@ -77,9 +77,9 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             timegraphTree: [],
             markerCategoryEntries: [],
             markerLayerData: undefined,
-            collapsedNodes: this.props.persistChartState?.collapsedNodes ? this.props.persistChartState?.collapsedNodes : [],
+            collapsedNodes: validateNumArray(this.props.persistChartState?.collapsedNodes) ? this.props.persistChartState.collapsedNodes as number[] : [],
             columns: [],
-            collapsedMarkerNodes: this.props.persistChartState?.collapsedMarkerNodes ? this.props.persistChartState?.collapsedMarkerNodes : [],
+            collapsedMarkerNodes: validateNumArray(this.props.persistChartState?.collapsedMarkerNodes) ? this.props.persistChartState.collapsedMarkerNodes as number[] : [],
             optionsDropdownOpen: false,
             dataRows: []
         };
@@ -917,14 +917,14 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             <ul>
                 {this.props.pinned === undefined &&
                     <li className='drop-down-list-item'
-                        onClick={() => this.pinView({ output: this.props.outputDescriptor, collapsedNodes: this.state.collapsedNodes,
-                                                    collapsedMarkerNodes: this.state.collapsedMarkerNodes } as ChartPersistedState)}>
+                        onClick={() => this.pinView({ collapsedNodes: this.state.collapsedNodes,
+                                                    collapsedMarkerNodes: this.state.collapsedMarkerNodes })}>
                         Pin View
                     </li>}
                 {this.props.pinned === true &&
                 <li className='drop-down-list-item'
-                    onClick={() => this.unPinView({  output: this.props.outputDescriptor, collapsedNodes: this.state.collapsedNodes,
-                                                    collapsedMarkerNodes: this.state.collapsedMarkerNodes } as ChartPersistedState)}>
+                    onClick={() => this.unPinView({ collapsedNodes: this.state.collapsedNodes,
+                                                    collapsedMarkerNodes: this.state.collapsedMarkerNodes })}>
                     Unpin View
                 </li>}
             </ul>

diff --git a/packages/react-components/src/components/trace-context-component.tsx b/packages/react-components/src/components/trace-context-component.tsx
@@ -18,7 +18,7 @@ import { TimeAxisComponent } from './utils/time-axis-component';
 import { TimeNavigatorComponent } from './utils/time-navigator-component';
 import { XYOutputComponent } from './xy-output-component';
 import { NullOutputComponent } from './null-output-component';
-import { AbstractOutputProps, ChartPersistedState } from './abstract-output-component';
+import { AbstractOutputProps } from './abstract-output-component';
 import * as Messages from 'traceviewer-base/lib/message-manager';
 import { signalManager, Signals } from 'traceviewer-base/lib/signals/signal-manager';
 import ReactTooltip from 'react-tooltip';
@@ -81,7 +81,8 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
     private readonly SCROLLBAR_PADDING: number = 12;
     private readonly DEFAULT_CHART_OFFSET = 200;
     private readonly MIN_COMPONENT_HEIGHT: number = 2;
-    private chartPersistedState: ChartPersistedState | undefined = undefined;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private chartPersistedState: { output: OutputDescriptor, payload?: any} | undefined = undefined;
 
     private unitController: TimeGraphUnitController;
     private historyHandler: UnitControllerHistoryHandler;
@@ -106,8 +107,10 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
     private onBackgroundThemeChange = (theme: string): void => this.doHandleBackgroundThemeChange(theme);
     private onUpdateZoom = (hasZoomedIn: boolean) => this.doHandleUpdateZoomSignal(hasZoomedIn);
     private onResetZoom = () => this.doHandleResetZoomSignal();
-    private onPinView = (payload: ChartPersistedState) => this.doHandlePinView(payload);
-    private onUnPinView = (payload?: ChartPersistedState) => this.doHandleUnPinView(payload);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private onPinView = (output: OutputDescriptor, payload?: any) => this.doHandlePinView(output, payload);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private onUnPinView = (output: OutputDescriptor, payload?: any) => this.doHandleUnPinView(output, payload);
 
     constructor(props: TraceContextProps) {
         super(props);
@@ -535,12 +538,12 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
                     outputWidth: this.state.style.width,
                     backgroundTheme: this.state.backgroundTheme,
                     setChartOffset: this.setChartOffset,
-                    pinned: this.state.pinnedView ? (this.state.pinnedView === output) : undefined,
+                    pinned: this.state.pinnedView ? (this.state.pinnedView.id === output.id) : undefined
                 };
                 switch (responseType) {
                     case 'TIME_GRAPH':
                         if (this.chartPersistedState && this.chartPersistedState.output.id === output.id) {
-                            outputProps.persistChartState = this.chartPersistedState;
+                            outputProps.persistChartState = this.chartPersistedState.payload;
                             this.chartPersistedState = undefined;
                         }
                         return <TimegraphOutputComponent key={output.id} {...outputProps}
@@ -549,7 +552,7 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
                             />;
                     case 'TREE_TIME_XY':
                         if (this.chartPersistedState && this.chartPersistedState.output.id === output.id) {
-                            outputProps.persistChartState = this.chartPersistedState;
+                            outputProps.persistChartState = this.chartPersistedState.payload;
                             this.chartPersistedState = undefined;
                         }
                         return <XYOutputComponent key={output.id} {...outputProps} className={this.state.pinnedView?.id === output.id ? 'pinned-view-shadow' : ''}/>;
@@ -605,17 +608,19 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
         this.historyHandler.addCurrentState();
     };
 
-    private doHandleUnPinView(payload?: ChartPersistedState) {
-        this.chartPersistedState = payload;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private doHandleUnPinView(output: OutputDescriptor, payload?: any) {
+        this.chartPersistedState = { output: output, payload: payload };
         this.setState({
             pinnedView: undefined
         });
     }
 
-    private doHandlePinView(payload: ChartPersistedState) {
-        this.chartPersistedState = payload;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private doHandlePinView(output: OutputDescriptor, payload?: any) {
+        this.chartPersistedState = { output: output, payload: payload };
         this.setState({
-            pinnedView: payload.output
+            pinnedView: output
         });
     }
 

diff --git a/packages/react-components/src/components/utils/filter-tree/utils.tsx b/packages/react-components/src/components/utils/filter-tree/utils.tsx
@@ -62,3 +62,13 @@ export const getIndexOfNode = (id: number, nodes: TreeNode[], collapsedNodes: nu
     const ids = getAllExpandedNodeIds(nodes, collapsedNodes);
     return ids.findIndex(eId => eId === id);
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const validateNumArray = (arr: any | undefined): boolean => {
+    if (arr && Array.isArray(arr)) {
+        return (arr.length > 0 &&
+            arr.every( value => typeof value === 'number')
+        );
+    }
+    return false;
+};
diff --git a/packages/react-components/src/components/xy-output-component.tsx b/packages/react-components/src/components/xy-output-component.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { AbstractOutputProps, AbstractOutputState, ChartPersistedState } from './abstract-output-component';
+import { AbstractOutputProps, AbstractOutputState } from './abstract-output-component';
 import { AbstractTreeOutputComponent } from './abstract-tree-output-component';
 import * as React from 'react';
 import { Line } from 'react-chartjs-2';
@@ -10,7 +10,7 @@ import { ResponseStatus } from 'tsp-typescript-client/lib/models/response/respon
 import { XYSeries } from 'tsp-typescript-client/lib/models/xy';
 import Chart = require('chart.js');
 import { EntryTree } from './utils/filter-tree/entry-tree';
-import { getAllExpandedNodeIds } from './utils/filter-tree/utils';
+import { getAllExpandedNodeIds, validateNumArray } from './utils/filter-tree/utils';
 import { TreeNode } from './utils/filter-tree/tree-node';
 import ColumnHeader from './utils/filter-tree/column-header';
 import { signalManager, Signals } from 'traceviewer-base/lib/signals/signal-manager';
@@ -106,8 +106,8 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
             outputStatus: ResponseStatus.RUNNING,
             selectedSeriesId: [],
             xyTree: [],
-            checkedSeries: this.props.persistChartState?.checkedSeries ? this.props.persistChartState?.checkedSeries : [],
-            collapsedNodes: this.props.persistChartState?.collapsedNodes ? this.props.persistChartState?.collapsedNodes : [],
+            checkedSeries: validateNumArray(this.props.persistChartState?.checkedSeries) ? this.props.persistChartState.checkedSeries as number[] : [],
+            collapsedNodes: validateNumArray(this.props.persistChartState?.collapsedNodes) ? this.props.persistChartState.collapsedNodes as number[] : [],
             orderedNodes: [],
             xyData: {},
             columns: [{title: 'Name', sortable: true}],
@@ -1089,15 +1089,15 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
             <ul>
                 {this.props.pinned === undefined &&
                     <li className='drop-down-list-item'
-                        onClick={() => this.pinView({ output: this.props.outputDescriptor, checkedSeries: this.state.checkedSeries,
-                                                    collapsedNodes: this.state.collapsedNodes } as ChartPersistedState)}
+                        onClick={() => this.pinView({ checkedSeries: this.state.checkedSeries,
+                                                    collapsedNodes: this.state.collapsedNodes })}
                     >
                         Pin View
                     </li>}
                 {this.props.pinned === true &&
                     <li className='drop-down-list-item'
-                        onClick={() => this.unPinView({ output: this.props.outputDescriptor, checkedSeries: this.state.checkedSeries,
-                                                    collapsedNodes: this.state.collapsedNodes } as ChartPersistedState)}>
+                        onClick={() => this.unPinView({ checkedSeries: this.state.checkedSeries,
+                                                    collapsedNodes: this.state.collapsedNodes })}>
                         Unpin View
                     </li>}
             </ul>