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, use the analysis-running-overflow overlay while the analysis is running. Render the search bar only once the analysis is completed, to prevent unexplained stack overflow in the TextField's InputBase component. Let the analysis-running-overflow pass through pointer events to the underlying layer. Signed-off-by: Patrick Tasse <patrick.tasse@gmail.com>
eclipse-cdt-cloud · Aug 19, 2024 · 542d989 · 542d989
1 parent 6444d22
commit 542d989
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 15 deletions.
diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -689,22 +689,26 @@ 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>
+                {this.state.outputStatus === ResponseStatus.RUNNING && (
                     <div
-                        id="timegraph-main"
-                        className="ps__child--consume"
-                        onWheel={ev => {
-                            ev.preventDefault();
-                            ev.stopPropagation();
-                        }}
-                        style={{ height: this.props.style.height }}
+                        className="analysis-running-overflow"
+                        style={{ width: this.getChartWidth() }}
                     >
-                        {this.renderTimeGraphContent()}
-                    </div>
-                ) : (
-                    <div className="analysis-running">
-                        {<FontAwesomeIcon icon={faSpinner} spin style={{ marginRight: '5px' }} />}
-                        {'Analysis running'}
+                        <div>
+                            <FontAwesomeIcon icon={faSpinner} spin style={{ marginRight: '5px' }} />
+                            <span>Analysis running</span>
+                        </div>
                     </div>
                 )}
             </React.Fragment>
@@ -787,6 +791,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             <div id="main-timegraph-content" ref={this.horizontalContainer} style={{ height: this.props.style.height }}>
                 {this.getChartContainer()}
                 {this.getMarkersContainer()}
+                {this.state.outputStatus === ResponseStatus.COMPLETED && (
                 <div
                     id={this.props.traceId + this.props.outputDescriptor.id + 'searchBar'}
                     className="timgraph-search-bar"
@@ -823,6 +828,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                         onKeyDown={event => this.onKeyDown(event)}
                     />
                 </div>
+                )}
             </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%;
 }