Skip to content

Commit

Permalink
Expand properties persisted on refresh
Browse files Browse the repository at this point in the history 
Now storing currentViewRange, currentTimeSelection, and layouts.

PersistedState is pulled from trace-context-component using a
React.refObj and accessing a getter function for persistedState.

BigInt handling implemented for TimeRanges, but is still needed for start and end properties in outputs / outputDescriptors.

Signed-off-by: Will Yang <william.yang@ericsson.com>
  • Loading branch information
@williamsyang-work @PatrickTasse
williamsyang-work authored and PatrickTasse committed Apr 7, 2022
1 parent b4405aa commit 0196c3b
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 14 deletions.
68 changes: 61 additions & 7 deletions packages/react-components/src/components/trace-context-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { TimeGraphUnitController } from 'timeline-chart/lib/time-graph-unit-cont
import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descriptor';
import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
import { TimeRange } from 'traceviewer-base/lib/utils/time-range';
import { TimeRange, TimeRangeString } from 'traceviewer-base/lib/utils/time-range';
import { TableOutputComponent } from './table-output-component';
import { TimegraphOutputComponent } from './timegraph-output-component';
import { OutputComponentStyle } from './utils/output-component-style';
Expand Down Expand Up @@ -42,6 +42,7 @@ interface TraceContextProps {
addResizeHandler: (handler: () => void) => void;
removeResizeHandler: (handler: () => void) => void;
backgroundTheme: string;
persistedState?: PersistedState;
}

interface TraceContextState {
Expand All @@ -55,6 +56,16 @@ interface TraceContextState {
backgroundTheme: string;
}

export interface PersistedState {
outputs: OutputDescriptor[];
currentRange: TimeRangeString;
currentViewRange: TimeRangeString;
currentTimeSelection?: TimeRangeString;
unitControllerViewRange: { start: string, end: string };
storedTimescaleLayout: Layout[];
storedNonTimescaleLayout: Layout[];
}

export class TraceContextComponent extends React.Component<TraceContextProps, TraceContextState> {
private readonly INDEXING_RUNNING_STATUS: string = 'RUNNING';
private readonly INDEXING_CLOSED_STATUS: string = 'CLOSED';
Expand Down Expand Up @@ -91,18 +102,35 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr

constructor(props: TraceContextProps) {
super(props);
let traceRange = new TimeRange(BigInt(0), BigInt(0));
let viewRange = new TimeRange(BigInt(0), BigInt(0));
let traceRange = new TimeRange();
let viewRange = new TimeRange();
let timeSelection = undefined;
if (this.props.experiment) {
const experiment = this.props.experiment;
traceRange = new TimeRange(experiment.start - this.props.experiment.start, experiment.end - this.props.experiment.start, this.props.experiment.start);
viewRange = new TimeRange(experiment.start - this.props.experiment.start, experiment.end - this.props.experiment.start, this.props.experiment.start);
if (this.props.persistedState) {
const {
currentRange: storedRange,
currentViewRange: storedViewRange,
currentTimeSelection: storedTimeSelection,
storedTimescaleLayout,
storedNonTimescaleLayout
} = this.props.persistedState;
traceRange = new TimeRange(storedRange);
viewRange = new TimeRange(storedViewRange);
if (storedTimeSelection) {
timeSelection = new TimeRange(storedTimeSelection);
}
this._storedTimescaleLayout = storedTimescaleLayout;
this._storedNonTimescaleLayout = storedNonTimescaleLayout;
}
}
this.state = {
timeOffset: this.props.experiment.start,
currentRange: traceRange,
currentViewRange: viewRange,
currentTimeSelection: undefined,
currentTimeSelection: timeSelection,
experiment: this.props.experiment,
traceIndexing: ((this.props.experiment.indexingStatus === this.INDEXING_RUNNING_STATUS) || (this.props.experiment.indexingStatus === this.INDEXING_CLOSED_STATUS)),
style: {
Expand Down Expand Up @@ -130,6 +158,10 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
const nanos = zeroPad(theNumber % BigInt(1000));
return seconds + '.' + millis + ' ' + micros + ' ' + nanos;
};
if (this.props.persistedState?.currentTimeSelection) {
const { start, end } = this.props.persistedState.currentTimeSelection;
this.unitController.selectionRange = { start: BigInt(start), end: BigInt(end) };
}
this.unitController.onSelectionRangeChange(range => { this.handleTimeSelectionChange(range); });
this.unitController.onViewRangeChanged(viewRangeParam => { this.handleViewRangeChange(viewRangeParam); });
this.tooltipComponent = React.createRef();
Expand Down Expand Up @@ -158,8 +190,13 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
private async initialize() {
await this.updateTrace();
this.unitController.absoluteRange = this.state.experiment.end - this.state.timeOffset;
this.unitController.viewRange = { start: BigInt(0), end: this.state.experiment.end - this.state.timeOffset };
this.unitController.offset = this.state.timeOffset;
if (this.props.persistedState) {
const { start, end } = this.props.persistedState.unitControllerViewRange;
this.unitController.viewRange = { start: BigInt(start), end: BigInt(end) };
} else {
this.unitController.viewRange = { start: BigInt(0), end: this.state.experiment.end - this.state.timeOffset };
}
}

private async updateTrace() {
Expand Down Expand Up @@ -416,9 +453,26 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
</ResponsiveGridLayout>;
}

get persistedState(): PersistedState {
const { currentRange, currentViewRange, currentTimeSelection } = this.state;
const { _storedNonTimescaleLayout: storedNonTimescaleLayout, _storedTimescaleLayout: storedTimescaleLayout } = this;
const { start: ucStart, end: ucEnd } = this.unitController.viewRange;
return {
outputs: this.props.outputs,
currentRange: currentRange.toString(),
currentViewRange: currentViewRange.toString(),
unitControllerViewRange: { start: ucStart.toString(), end: ucEnd.toString() },
currentTimeSelection: currentTimeSelection?.toString(),
storedNonTimescaleLayout,
storedTimescaleLayout
};
}

private renderPlaceHolder() {
this._storedTimescaleLayout = [];
this._storedNonTimescaleLayout = [];
if (this.props.outputs.length === 0) {
this._storedTimescaleLayout = [];
this._storedNonTimescaleLayout = [];
}
return <div className='no-output-placeholder'>
{'Trace loaded successfully.'}
<br />
Expand Down
26 changes: 19 additions & 7 deletions theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
import { TspClientProvider } from '../tsp-client-provider-impl';
import { TraceManager } from 'traceviewer-base/lib/trace-manager';
import { ExperimentManager } from 'traceviewer-base/lib/experiment-manager';
import { TraceContextComponent } from 'traceviewer-react-components/lib/components/trace-context-component';
import { TraceContextComponent, PersistedState } from 'traceviewer-react-components/lib/components/trace-context-component';
import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
import { TheiaMessageManager } from '../theia-message-manager';
import { ThemeService } from '@theia/core/lib/browser/theming';
Expand Down Expand Up @@ -40,6 +40,8 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
protected traceManager: TraceManager;
protected experimentManager: ExperimentManager;
protected backgroundTheme: string;
protected traceContextComponent: React.RefObject<TraceContextComponent>;
protected persistedState?: PersistedState;

protected resizeHandlers: (() => void)[] = [];
protected readonly addResizeHandler = (h: () => void): void => {
Expand Down Expand Up @@ -86,6 +88,7 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
if (!this.options.traceUUID) {
this.initialize();
}
this.traceContextComponent = React.createRef();
this.tspClient = this.tspClientProvider.getTspClient();
this.traceManager = this.tspClientProvider.getTraceManager();
this.experimentManager = this.tspClientProvider.getExperimentManager();
Expand Down Expand Up @@ -242,20 +245,27 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
});
}

storeState(): OutputDescriptor[] {
storeState(): PersistedState | undefined {
/*
TODO - BigInt support for storing state
TODO - BigInt support for storing state in outputs/outputDescriptors
JSON.stringify cannot serialize BigInt
*/
return this.outputDescriptors;
if (this.traceContextComponent?.current) {
const persistedState = this.traceContextComponent.current.persistedState;
return persistedState;
}
return undefined;
}

restoreState(state: OutputDescriptor[]): void {
restoreState(persistedState: PersistedState): void {
/*
TODO - BigInt support for restoring state
TODO - BigInt support for restoring state in outputs/outputDescriptors
Identify what values need to be BigInt and convert.
*/
this.outputDescriptors = state;
if (persistedState.outputs.length > 0) {
this.persistedState = persistedState;
this.outputDescriptors = persistedState.outputs;
}
}

private async fetchMarkerSets(expUUID: string) {
Expand Down Expand Up @@ -301,6 +311,7 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
this.onOutputRemoved = this.onOutputRemoved.bind(this);
return <div className='trace-viewer-container'>
{this.openedExperiment ? <TraceContextComponent experiment={this.openedExperiment}
ref={this.traceContextComponent}
tspClient={this.tspClient}
outputs={this.outputDescriptors}
markerCategoriesMap={this.selectedMarkerCategoriesMap}
Expand All @@ -309,6 +320,7 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
addResizeHandler={this.addResizeHandler}
removeResizeHandler={this.removeResizeHandler}
backgroundTheme={this.backgroundTheme}
persistedState={this.persistedState}
messageManager={this._signalHandler} /> : 'Trace is loading...'}
</div>;
}
Expand Down

0 comments on commit 0196c3b

Please sign in to comment.