Decouple trace explorer

packages/base/src/experiment-manager.ts

@@ -5,7 +5,7 @@ import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descri
 import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
 import { TraceManager } from './trace-manager';
 import { TspClientResponse } from 'tsp-typescript-client/lib/protocol/tsp-client-response';
-import { signalManager, Signals } from './signal-manager';
+import { signalManager, Signals } from './signals/signal-manager';
 
 export class ExperimentManager {
 
@@ -19,7 +19,7 @@ export class ExperimentManager {
     ) {
         this.fTspClient = tspClient;
         this.fTraceManager = traceManager;
-        signalManager().on(Signals.EXPERIMENT_CLOSED, ({ experiment }) => this.onExperimentClosed(experiment));
+        signalManager().on(Signals.EXPERIMENT_CLOSED, (experiment: Experiment) => this.onExperimentClosed(experiment));
     }
 
     /**
@@ -60,10 +60,8 @@ export class ExperimentManager {
      * @param experimentUUID experiment UUID
      */
     async getAvailableOutputs(experimentUUID: string): Promise<OutputDescriptor[] | undefined> {
-        // Check if the experiment is opened
-        const experiment = this.fOpenExperiments.get(experimentUUID);
-        if (experiment) {
-            const outputsResponse = await this.fTspClient.experimentOutputs(experiment.UUID);
+        const outputsResponse = await this.fTspClient.experimentOutputs(experimentUUID);
+        if (outputsResponse && outputsResponse.getStatusCode() === 200) {
             return outputsResponse.getModel();
         }
         return undefined;
@@ -98,7 +96,7 @@ export class ExperimentManager {
         const experiment = experimentResponse.getModel();
         if (experimentResponse.isOk() && experiment) {
             this.addExperiment(experiment);
-            signalManager().emit(Signals.EXPERIMENT_OPENED, { experiment: experiment });
+            signalManager().fireExperimentOpenedSignal(experiment);
             return experiment;
         }
         // TODO Handle any other experiment open errors
@@ -134,7 +132,7 @@ export class ExperimentManager {
             await this.fTspClient.deleteExperiment(experimentUUID);
             const deletedExperiment = this.removeExperiment(experimentUUID);
             if (deletedExperiment) {
-                signalManager().emit(Signals.EXPERIMENT_CLOSED, { experiment: deletedExperiment });
+                signalManager().fireExperimentClosedSignal(deletedExperiment);
             }
         }
     }

packages/base/src/signals/available-views-changed-signal-payload.tsx

@@ -0,0 +1,20 @@
+import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descriptor';
+import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
+
+export class AvailableViewsChangedSignalPayload {
+    private _availableOutputDescriptors: OutputDescriptor[];
+    private _experiment: Experiment;
+
+    constructor(availableOutputDescriptors: OutputDescriptor[], experiment: Experiment) {
+        this._availableOutputDescriptors = availableOutputDescriptors;
+        this._experiment = experiment;
+    }
+
+    public getAvailableOutputDescriptors(): OutputDescriptor[] {
+        return this._availableOutputDescriptors;
+    }
+
+    public getExperiment(): Experiment {
+        return this._experiment;
+    }
+}

packages/base/src/signals/opened-traces-updated-signal-payload.tsx

@@ -0,0 +1,11 @@
+export class OpenedTracesUpdatedSignalPayload {
+    private _numberOfOpenedTraces: number;
+
+    constructor(numberOfOpenedTraces: number) {
+        this._numberOfOpenedTraces = numberOfOpenedTraces;
+    }
+
+    public getNumberOfOpenedTraces(): number {
+        return this._numberOfOpenedTraces;
+    }
+}

packages/base/src/signals/signal-manager.ts

@@ -0,0 +1,83 @@
+import { EventEmitter } from 'events';
+import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
+import { Trace } from 'tsp-typescript-client/lib/models/trace';
+import { OpenedTracesUpdatedSignalPayload } from './opened-traces-updated-signal-payload';
+import { OutputAddedSignalPayload } from './output-added-signal-payload';
+
+export declare interface SignalManager {
+    fireTraceOpenedSignal(trace: Trace): void;
+    fireTraceClosedSignal(trace: Trace): void;
+    fireExperimentExperimentSignal(experiment: Experiment): void;
+    fireExperimentClosedSignal(experiment: Experiment): void;
+    fireExperimentSelectedSignal(experiment: Experiment | undefined): void;
+    fireOpenedTracesChangedSignal(payload: OpenedTracesUpdatedSignalPayload): void;
+    fireOutputAddedSignal(payload: OutputAddedSignalPayload): void;
+    fireTooltipSignal(tooltip?: { [key: string]: string }): void;
+    fireThemeChangedSignal(theme: string): void;
+    fireSelectionChangedSignal(payload: { [key: string]: string }): void;
+    fireCloseTraceViewerTabSignal(traceUUID: string): void;
+    fireTraceViewerTabActivatedSignal(experiment: Experiment): void;
+}
+
+export const Signals = {
+    TRACE_OPENED: 'trace opened',
+    TRACE_CLOSED: 'trace closed',
+    EXPERIMENT_OPENED: 'experiment opened',
+    EXPERIMENT_CLOSED: 'experiment closed',
+    EXPERIMENT_SELECTED: 'experiment selected',
+    OPENED_TRACES_UPDATED: 'opened traces updated',
+    AVAILABLE_OUTPUTS_CHANGED: 'available outputs changed',
+    OUTPUT_ADDED: 'output added',
+    TOOLTIP_UPDATED: 'tooltip updated',
+    THEME_CHANGED: 'theme changed',
+    SELECTION_CHANGED: 'selection changed',
+    CLOSE_TRACEVIEWERTAB: 'tab closed',
+    TRACEVIEWERTAB_ACTIVATED: 'widget activated'
+};
+
+export class SignalManager extends EventEmitter implements SignalManager {
+    fireTraceOpenedSignal(trace: Trace): void {
+        this.emit(Signals.TRACE_OPENED, trace);
+    }
+    fireTraceClosedSignal(trace: Trace): void {
+        this.emit(Signals.TRACE_CLOSED, { trace });
+    }
+    fireExperimentOpenedSignal(experiment: Experiment): void {
+        this.emit(Signals.EXPERIMENT_OPENED, experiment);
+    }
+    fireExperimentClosedSignal(experiment: Experiment): void {
+        this.emit(Signals.EXPERIMENT_CLOSED, experiment);
+    }
+    fireExperimentSelectedSignal(experiment: Experiment | undefined): void {
+        this.emit(Signals.EXPERIMENT_SELECTED, experiment);
+    }
+    fireOpenedTracesChangedSignal(payload: OpenedTracesUpdatedSignalPayload): void {
+        this.emit(Signals.OPENED_TRACES_UPDATED, payload);
+    }
+    fireOutputAddedSignal(payload: OutputAddedSignalPayload): void {
+        this.emit(Signals.OUTPUT_ADDED, payload);
+    }
+    fireTooltipSignal(tooltip?: { [key: string]: string; }): void {
+        this.emit(Signals.TOOLTIP_UPDATED, tooltip );
+    }
+    fireThemeChangedSignal(theme: string): void {
+        this.emit(Signals.THEME_CHANGED, theme);
+    }
+    fireSelectionChangedSignal(payload: { [key: string]: string; }): void {
+        this.emit(Signals.SELECTION_CHANGED, payload);
+    }
+    fireCloseTraceViewerTabSignal(traceUUID: string): void {
+        this.emit(Signals.CLOSE_TRACEVIEWERTAB, traceUUID);
+    }
+    fireTraceViewerTabActivatedSignal(experiment: Experiment): void {
+        this.emit(Signals.TRACEVIEWERTAB_ACTIVATED, experiment);
+    }
+}
+
+let instance: SignalManager = new SignalManager();
+
+export const setSignalManagerInstance = (sm: SignalManager): void => {
+    instance = sm;
+};
+
+export const signalManager = (): SignalManager => instance;

packages/base/src/trace-manager.ts

@@ -4,7 +4,7 @@ import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
 import { Query } from 'tsp-typescript-client/lib/models/query/query';
 import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descriptor';
 import { TspClientResponse } from 'tsp-typescript-client/lib/protocol/tsp-client-response';
-import { signalManager, Signals } from './signal-manager';
+import { signalManager, Signals } from './signals/signal-manager';
 
 export class TraceManager {
 
@@ -88,7 +88,7 @@ export class TraceManager {
         const trace = traceResponse.getModel();
         if (traceResponse.isOk() && trace) {
             this.addTrace(trace);
-            signalManager().emit(Signals.TRACE_OPENED, {trace: trace});
+            signalManager().fireTraceOpenedSignal(trace);
             return trace;
         }
         // TODO Handle trace open errors
@@ -125,7 +125,7 @@ export class TraceManager {
             if (deleteResponse.getStatusCode() !== 409) {
                 const deletedTrace = this.removeTrace(traceUUID);
                 if (deletedTrace) {
-                    signalManager().emit(Signals.TRACE_CLOSED, {trace: deletedTrace});
+                    signalManager().fireTraceClosedSignal(deletedTrace);
                 }
             }
         }

packages/base/src/tsp-client-provider.ts

@@ -0,0 +1,15 @@
+import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
+import { ExperimentManager } from './experiment-manager';
+import { TraceManager } from './trace-manager';
+
+export interface ITspClientProvider {
+    getTspClient(): TspClient;
+    getTraceManager(): TraceManager;
+    getExperimentManager(): ExperimentManager;
+    /**
+     * Add a listener for trace server url changes
+     * @param listener The listener function to be called when the url is
+     * changed
+     */
+    addTspClientChangeListener(listener: (tspClient: TspClient) => void): void;
+}

packages/base/tsconfig.json

@@ -11,7 +11,8 @@
         "rootDir": "src",
         "outDir": "lib",
         "declaration": true,
-        "skipLibCheck": true
+        "skipLibCheck": true,
+        "jsx": "react"
     },
     "include": [
         "src"

packages/react-components/src/components/table-output-component.tsx

@@ -5,7 +5,7 @@ import { AgGridReact } from 'ag-grid-react';
 import { ColDef, IDatasource, GridReadyEvent, CellClickedEvent, GridApi, ColumnApi } from 'ag-grid-community';
 import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
 import { cloneDeep } from 'lodash';
-import { signalManager } from '@trace-viewer/base/lib/signal-manager';
+import { signalManager } from '@trace-viewer/base/lib/signals/signal-manager';
 import { TimelineChart } from 'timeline-chart/lib/time-graph-model';
 
 type TableOuputState = AbstractOutputState & {

packages/react-components/src/components/timegraph-output-component.tsx

@@ -10,7 +10,7 @@ import { TimeGraphRowController } from 'timeline-chart/lib/time-graph-row-contro
 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 '@trace-viewer/base/lib/signal-manager';
+import { signalManager, Signals } from '@trace-viewer/base/lib/signals/signal-manager';
 import { AbstractOutputProps, AbstractOutputState } from './abstract-output-component';
 import { AbstractTreeOutputComponent } from './abstract-tree-output-component';
 import { StyleProvider } from './data-providers/style-provider';
@@ -48,6 +48,8 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     private tooltipElement: TimeGraphRowElement | undefined;
     private tooltipInfo: {[key: string]: string} | undefined;
 
+    private onSelectionChanged = ( payload: { [key: string]: string; } ) => this.doHandleSelectionChangedSigna(payload);
+
     constructor(props: TimegraphOutputProps) {
         super(props);
         this.state = {
@@ -100,7 +102,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                 this.props.tooltipComponent?.setElement(undefined);
             }
         });
-        signalManager().on(Signals.SELECTION_CHANGED, ({ payload }) => this.onSelectionChanged(payload));
+        signalManager().on(Signals.SELECTION_CHANGED, this.onSelectionChanged);
     }
 
     synchronizeTreeScroll(): void {
@@ -116,6 +118,11 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         this.waitAnalysisCompletion();
     }
 
+    componentWillUnmount(): void {
+        super.componentWillUnmount();
+        signalManager().off(Signals.SELECTION_CHANGED, this.onSelectionChanged);
+    }
+
     async fetchTree(): Promise<ResponseStatus> {
         const parameters = QueryHelper.timeQuery([this.props.range.getstart(), this.props.range.getEnd()]);
         const tspClientResponse = await this.props.tspClient.fetchTimeGraphTree(this.props.traceId, this.props.outputDescriptor.id, parameters);
@@ -178,7 +185,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         return true;
     }
 
-    private onSelectionChanged(payload: { [key: string]: number }) {
+    private doHandleSelectionChangedSigna(payload: { [key: string]: string }) {
         const offset = this.props.viewRange.getOffset() || 0;
         const timestamp = Number(payload['timestamp']);
         if (!isNaN(timestamp)) {

packages/react-components/src/components/trace-context-component.tsx

@@ -20,7 +20,7 @@ import { XYOutputComponent } from './xy-output-component';
 import { NullOutputComponent } from './null-output-component';
 import { AbstractOutputProps } from './abstract-output-component';
 import * as Messages from '@trace-viewer/base/lib/message-manager';
-import { signalManager, Signals } from '@trace-viewer/base/lib/signal-manager';
+import { signalManager, Signals } from '@trace-viewer/base/lib/signals/signal-manager';
 import ReactTooltip from 'react-tooltip';
 import { TooltipComponent } from './tooltip-component';
 
@@ -63,6 +63,8 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
     private tooltipComponent: React.RefObject<TooltipComponent>;
     private traceContextContainer: React.RefObject<HTMLDivElement>;
 
+    private onBackgroundThemeUpdated = (theme: string): void => this.updateBackgroundTheme(theme);
+
     protected widgetResizeHandlers: (() => void)[] = [];
     protected readonly addWidgetResizeHandler = (h: () => void): void => {
         this.widgetResizeHandlers.push(h);
@@ -113,10 +115,10 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
         this.tooltipComponent = React.createRef();
         this.traceContextContainer = React.createRef();
         this.initialize();
-        signalManager().on(Signals.THEME_CHANGED, (theme: string) => this.updateBackgroundTheme(theme));
+        signalManager().on(Signals.THEME_CHANGED, this.onBackgroundThemeUpdated);
     }
 
-    public updateBackgroundTheme(theme: string): void {
+    private updateBackgroundTheme(theme: string): void {
         this.setState({
             style: {
                 width: this.DEFAULT_COMPONENT_WIDTH,
@@ -178,7 +180,7 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
     }
 
     componentWillUnmount(): void {
-        signalManager().off(Signals.THEME_CHANGED, (theme: string) => this.updateBackgroundTheme(theme));
+        signalManager().off(Signals.THEME_CHANGED, this.onBackgroundThemeUpdated);
         this.props.messageManager.removeStatusMessage(this.INDEXING_STATUS_BAR_KEY);
         this.props.messageManager.removeStatusMessage(this.TIME_SELECTION_STATUS_BAR_KEY);
     }