From 85f6eba82b4528593ba5600d47b1b0252f143f13 Mon Sep 17 00:00:00 2001
From: Patrick Tasse <patrick.tasse@gmail.com>
Date: Fri, 5 Jul 2024 14:26:32 -0400
Subject: [PATCH] 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>
---
 .../components/timegraph-output-component.tsx | 107 +++++++++---------
 .../components/trace-context-component.tsx    |  22 +++-
 .../style/output-components-style.css         |   1 +
 3 files changed, 77 insertions(+), 53 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..63e5aa45 100644
--- 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
index eeb3e756..d4b1f5de 100644
--- 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
index e3d01313..45c54351 100644
--- 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%;
 }