Update view range during trace indexing

While the trace context component updateTrace() loop is iterating, update the unit controller's view range if the current view range is the full range and the full range has changed. If the user zooms the view range, it will stop updating to prevent snapping out of the user's view range. If the users zooms back out to the full range it will restart updating again. After updateTrace() is complete, update the view range only if the current view range is the 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. Extract search bar code to private method and fix typo in its className. Signed-off-by: Patrick Tasse <[email protected]>
PatrickTasse · Sep 10, 2024 · 682c73c · 682c73c
1 parent d4f1bc5
commit 682c73c
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 55 deletions.
diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -325,7 +325,8 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
 
  async componentDidUpdate(prevProps: TimegraphOutputProps, prevState: TimegraphOutputState): Promise<void> {
  if (
- prevState.outputStatus === ResponseStatus.RUNNING ||
+ this.state.outputStatus !== prevState.outputStatus ||
+ !isEqual(this.state.timegraphTree, prevState.timegraphTree) ||
  !isEqual(this.state.collapsedNodes, prevState.collapsedNodes) ||
  !isEqual(prevProps.markerCategories, this.props.markerCategories) ||
  prevProps.markerSetId !== this.props.markerSetId
@@ -689,22 +690,23 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
  renderChart(): React.ReactNode {
  return (
  <React.Fragment>
- {this.state.outputStatus === ResponseStatus.COMPLETED ? (
- <div
- id="timegraph-main"
- className="ps__child--consume"
- onWheel={ev => {
- ev.preventDefault();
- ev.stopPropagation();
- }}
- style={{ height: this.props.style.height }}
- >
- {this.renderTimeGraphContent()}
- </div>
- ) : (
- <div className="analysis-running">
- {<FontAwesomeIcon icon={faSpinner} spin style={{ marginRight: '5px' }} />}
- {'Analysis running'}
+ <div
+ id="timegraph-main"
+ className="ps__child--consume"
+ onWheel={ev => {
+ ev.preventDefault();
+ ev.stopPropagation();
+ }}
+ style={{ height: this.props.style.height }}
+ >
+ {this.renderTimeGraphContent()}
+ </div>
+ {this.state.outputStatus === ResponseStatus.RUNNING && (
+ <div className="analysis-running-overflow" style={{ width: this.getChartWidth() }}>
+ <div>
+ <FontAwesomeIcon icon={faSpinner} spin style={{ marginRight: '5px' }} />
+ <span>Analysis running</span>
+ </div>
  </div>
  )}
  </React.Fragment>
@@ -787,42 +789,48 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
  <div id="main-timegraph-content" ref={this.horizontalContainer} style={{ height: this.props.style.height }}>
  {this.getChartContainer()}
  {this.getMarkersContainer()}
- <div
- id={this.props.traceId + this.props.outputDescriptor.id + 'searchBar'}
- className="timgraph-search-bar"
- >
- <TextField
- InputProps={{
- placeholder: 'Search',
- startAdornment: (
- <InputAdornment
- sx={{
- color: 'var(--trace-viewer-ui-font-color0)'
- }}
- position="start"
- >
- <i className="codicon codicon-search"></i>
- </InputAdornment>
- ),
- className: 'timegraph-search-box',
- endAdornment: (
- <InputAdornment
- sx={{
- color: 'var(--trace-viewer-ui-font-color0)'
- }}
- position="end"
- >
- <button className="remove-search-button" onClick={this.clearSearchBox}>
- <i className="codicon codicon-close"></i>
- </button>
- </InputAdornment>
- )
- }}
- value={this.state.searchString}
- onChange={this.handleSearchChange}
- onKeyDown={event => this.onKeyDown(event)}
- />
- </div>
+ {this.getSearchBar()}
+ </div>
+ );
+ }
+
+ private getSearchBar() {
+ return (
+ <div
+ id={this.props.traceId + this.props.outputDescriptor.id + 'searchBar'}
+ className="timegraph-search-bar"
+ >
+ <TextField
+ InputProps={{
+ placeholder: 'Search',
+ startAdornment: (
+ <InputAdornment
+ sx={{
+ color: 'var(--trace-viewer-ui-font-color0)'
+ }}
+ position="start"
+ >
+ <i className="codicon codicon-search"></i>
+ </InputAdornment>
+ ),
+ className: 'timegraph-search-box',
+ endAdornment: (
+ <InputAdornment
+ sx={{
+ color: 'var(--trace-viewer-ui-font-color0)'
+ }}
+ position="end"
+ >
+ <button className="remove-search-button" onClick={this.clearSearchBox}>
+ <i className="codicon codicon-close"></i>
+ </button>
+ </InputAdornment>
+ )
+ }}
+ value={this.state.searchString}
+ onChange={this.handleSearchChange}
+ onKeyDown={event => this.onKeyDown(event)}
+ />
  </div>
  );
  }

diff --git a/packages/react-components/src/components/trace-context-component.tsx b/packages/react-components/src/components/trace-context-component.tsx
@@ -236,12 +236,15 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
 
  private async initialize() {
  await this.updateTrace();
+ const updateViewRange =
+ this.unitController.viewRange.start === BigInt(0) &&
+ this.unitController.viewRange.end === this.unitController.absoluteRange;
  this.unitController.absoluteRange = 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 {
+ } else if (updateViewRange) {
  this.unitController.viewRange = {
  start: BigInt(0),
  end: this.state.experiment.end - this.state.timeOffset
@@ -271,6 +274,23 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
  )
  });
 
+ // Only update the view range if it's currently showing the full range
+ const updateViewRange =
+ this.unitController.viewRange.start === BigInt(0) &&
+ this.unitController.viewRange.end === this.unitController.absoluteRange &&
+ (this.unitController.viewRange.end !== updatedExperiment.end - updatedExperiment.start ||
+ this.unitController.offset !== updatedExperiment.start);
+ this.unitController.absoluteRange = this.state.experiment.end - this.state.timeOffset;
+ this.unitController.offset = this.state.timeOffset;
+ signalManager().fireExperimentUpdatedSignal(updatedExperiment);
+ if (updateViewRange) {
+ this.unitController.viewRange = {
+ start: BigInt(0),
+ end: this.unitController.absoluteRange
+ };
+ this.emitTimeRangeData();
+ }
+
  // Update status bar
  this.props.messageManager.addStatusMessage(this.INDEXING_STATUS_BAR_KEY, {
  text: `Indexing ${this.props.experiment.name}: ${this.state.experiment.nbEvents}`,

diff --git a/packages/react-components/style/output-components-style.css b/packages/react-components/style/output-components-style.css
@@ -175,6 +175,7 @@ canvas {
  font-size: 24px;
  display: flex;
  position: absolute;
+ pointer-events: none;
  top: 0;
  height: 100%;
 }
@@ -439,7 +440,7 @@ canvas {
  color: var(--trace-viewer-foreground);
 }
 
-.timgraph-search-bar {
+.timegraph-search-bar {
  background: var(--trace-viewer-editor-background);
  padding-top: 5px;
  padding-bottom: 10px;