From 90be8ece2c5442cf644c75e54d4527def2650283 Mon Sep 17 00:00:00 2001 From: Patrick Tasse Date: Fri, 5 Jul 2024 14:26:32 -0400 Subject: [PATCH] Initialize view range and render time charts during trace indexing Initialize the unit controller view range with either the trace full range, or the persisted state view range if it is set. When the experiment hasn't been indexed yet, the initial view range may be empty. When a new output is opened while the trace is indexing, and the view range has never been set yet, initialize the view range to the current partial trace full range. This view range will remain during and after indexing unless the user changes the view range manually or presses the Reset button. When indexing completes, if the view range has never been set yet, initialize the view range to the final trace full range. In TimegraphOutputComponent, render the timegraph content and use the analysis-running-overflow overlay while the analysis is running. Let the analysis-running-overflow pass through pointer events to the underlying layer. In TimegraphOutputComponent componentDidUpdate(), update the chart layers only if the outputStatus has changed, not always when the outputStatus is RUNNING. This prevents recursive change of state causing stack overflow exceptions. Update the chart layers also if the timegraphTree state has changed. Perform a 'soft' update that does not refresh rows that already have the correct data. Perform a 'hard' update only where the marker categories or marker set have changed. Prevent a possible double update of the markers chart layer. Extract search bar code to private method and fix typo in its className. Use a different id for the markers chart layer to help debugging. Signed-off-by: Patrick Tasse --- .../components/timegraph-output-component.tsx | 146 ++++++++++-------- .../components/trace-context-component.tsx | 22 ++- .../style/output-components-style.css | 3 +- 3 files changed, 97 insertions(+), 74 deletions(-) diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx index 943aa7e2..bc2df9f2 100644 --- a/packages/react-components/src/components/timegraph-output-component.tsx +++ b/packages/react-components/src/components/timegraph-output-component.tsx @@ -195,7 +195,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent { if ( - prevState.outputStatus === ResponseStatus.RUNNING || - !isEqual(this.state.collapsedNodes, prevState.collapsedNodes) || !isEqual(prevProps.markerCategories, this.props.markerCategories) || prevProps.markerSetId !== this.props.markerSetId ) { this.selectedMarkerCategories = this.props.markerCategories; - if (this.state.searchString && this.state.searchString.length > 0) { - this._debouncedUpdateSearch(); - } else { - this.chartLayer.updateChart(); - } + this.chartLayer.updateChart(); this.markersChartLayer.updateChart(); - this.arrowLayer.update(); this.rangeEventsLayer.update(); - } - if ( - !isEqual(this.state.markerCategoryEntries, prevState.markerCategoryEntries) || - !isEqual(this.state.collapsedMarkerNodes, prevState.collapsedMarkerNodes) || - !isEqual(this.state.markerLayerData, prevState.markerLayerData) - ) { - this.markersChartLayer.updateChart(); + this.arrowLayer.update(); + } else { + if ( + this.state.outputStatus !== prevState.outputStatus || + !isEqual(this.state.timegraphTree, prevState.timegraphTree) || + !isEqual(this.state.collapsedNodes, prevState.collapsedNodes) + ) { + this.chartLayer.update(); + this.arrowLayer.update(); + } + if ( + !isEqual(this.state.markerCategoryEntries, prevState.markerCategoryEntries) || + !isEqual(this.state.collapsedMarkerNodes, prevState.collapsedMarkerNodes) || + !isEqual(this.state.markerLayerData, prevState.markerLayerData) + ) { + this.markersChartLayer.updateChart(); + } } if (!isEqual(this.state.searchString, prevState.searchString)) { this._debouncedUpdateSearch(); @@ -689,22 +692,23 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent - {this.state.outputStatus === ResponseStatus.COMPLETED ? ( -
{ - ev.preventDefault(); - ev.stopPropagation(); - }} - style={{ height: this.props.style.height }} - > - {this.renderTimeGraphContent()} -
- ) : ( -
- {} - {'Analysis running'} +
{ + ev.preventDefault(); + ev.stopPropagation(); + }} + style={{ height: this.props.style.height }} + > + {this.renderTimeGraphContent()} +
+ {this.state.outputStatus === ResponseStatus.RUNNING && ( +
+
+ + Analysis running +
)} @@ -787,42 +791,48 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent {this.getChartContainer()} {this.getMarkersContainer()} -
- - - - ), - className: 'timegraph-search-box', - endAdornment: ( - - - - ) - }} - value={this.state.searchString} - onChange={this.handleSearchChange} - onKeyDown={event => this.onKeyDown(event)} - /> -
+ {this.getSearchBar()} +
+ ); + } + + private getSearchBar() { + return ( +
+ + + + ), + className: 'timegraph-search-box', + endAdornment: ( + + + + ) + }} + value={this.state.searchString} + onChange={this.handleSearchChange} + onKeyDown={event => this.onKeyDown(event)} + />
); } diff --git a/packages/react-components/src/components/trace-context-component.tsx b/packages/react-components/src/components/trace-context-component.tsx index eeb3e756..718bd657 100644 --- a/packages/react-components/src/components/trace-context-component.tsx +++ b/packages/react-components/src/components/trace-context-component.tsx @@ -188,7 +188,10 @@ export class TraceContextComponent extends React.Component { const originalStart = this.state.currentRange.getStart(); theNumber += originalStart; @@ -238,10 +241,8 @@ export class TraceContextComponent extends React.Component