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 <[email protected]>
eclipse-cdt-cloud · Aug 20, 2024 · 85f6eba · 85f6eba
1 parent 6444d22
commit 85f6eba
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 53 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,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 +788,44 @@ 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.state.outputStatus === ResponseStatus.COMPLETED && (
+                    <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>
+                )}
             </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%;
 }