Use componentDidUpdate instead of setTimeout

TODO: Fix & add tests

Signed-off-by: Everett Ross <reverett@uber.com>

packages/jaeger-ui/src/components/TracePage/ScrollManager.tsx

@@ -135,7 +135,9 @@ export default class ScrollManager {
     }
     const { duration, spans, startTime: traceStartTime } = this._trace;
     const isUp = direction < 0;
-    const boundaryRow = _isUndefined(startRow) ? (isUp ? xrs.getTopRowIndexVisible() : xrs.getBottomRowIndexVisible()): startRow;
+    const boundaryRow = _isUndefined(startRow)
+      ? isUp ? xrs.getTopRowIndexVisible() : xrs.getBottomRowIndexVisible()
+      : startRow;
     console.log(boundaryRow);
     const spanIndex = xrs.mapRowIndexToSpanIndex(boundaryRow);
     if ((spanIndex === 0 && isUp) || (spanIndex === spans.length - 1 && !isUp)) {

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx

@@ -34,7 +34,16 @@ type TracePageSearchBarProps = {
 };
 
 export function TracePageSearchBarFn(props: TracePageSearchBarProps & { forwardedRef: React.Ref<Input> }) {
-  const { clearSearch, focusUiFind, forwardedRef, navigable, nextResult, prevResult, resultCount, textFilter } = props;
+  const {
+    clearSearch,
+    focusUiFind,
+    forwardedRef,
+    navigable,
+    nextResult,
+    prevResult,
+    resultCount,
+    textFilter,
+  } = props;
 
   const count = textFilter ? <span className="TracePageSearchBar--count">{resultCount}</span> : null;
 

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx

@@ -114,10 +114,14 @@ export default function SpanDetail(props: SpanDetailProps) {
             />
           )}
         <small className="SpanDetail--debugInfo">
-          <span className="SpanDetail--debugLabel" data-label="SpanID:" />{' '}
-          {spanID}
+          <span className="SpanDetail--debugLabel" data-label="SpanID:" /> {spanID}
           <Tooltip placement="topRight" title="Click to add to filter for deep linking">
-            <Button className="SpanDetail--debugValue" htmlType="button" icon="down" onClick={() => addToUiFind(spanID)}/>
+            <Button
+              className="SpanDetail--debugValue"
+              htmlType="button"
+              icon="down"
+              onClick={() => addToUiFind(spanID)}
+            />
           </Tooltip>
         </small>
       </div>

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx

@@ -159,10 +159,6 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
     setTrace(trace, uiFind);
   }
 
-  componentDidMount() {
-    setTimeout(this.props.scrollToFirstVisibleSpan);
-  }
-
   componentWillUpdate(nextProps: VirtualizedTraceViewProps) {
     const { childrenHiddenIDs, detailStates, registerAccessors, trace, currentViewRangeTime } = this.props;
     const {
@@ -195,6 +191,22 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
     }
   }
 
+  componentDidUpdate(prevProps: VirtualizedTraceViewProps) {
+    const {
+      detailStates: currDetailStates,
+      childrenHiddenIDs: currChildrenHiddenIds,
+      scrollToFirstVisibleSpan,
+    } = this.props;
+    const { detailStates: prevDetailStates, childrenHiddenIDs: prevChildrenHiddenIds } = prevProps;
+
+    if (
+      (currChildrenHiddenIds.needToScroll && currChildrenHiddenIds !== prevChildrenHiddenIds) ||
+      (currDetailStates.needToScroll && currDetailStates !== prevDetailStates)
+    ) {
+      scrollToFirstVisibleSpan();
+    }
+  }
+
   addToUiFind = (addition: string) => {
     const { uiFind, history, location } = this.props;
     if (!uiFind || !uiFind.includes(addition)) {

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/duck.tsx

@@ -96,8 +96,8 @@ export const actions = (fullActions as any).jaegerUi.traceTimelineViewer as TTim
 
 function calculateHiddenIdsAndDetailStates(uiFind: string, spans: Span[]) {
   const spansMap = new Map();
-  const childrenHiddenIDs = new Set();
-  const detailStates = new Map();
+  const childrenHiddenIDs: Set<string> & { needToScroll?: true } = new Set();
+  const detailStates: Map<string, DetailState> & { needToScroll?: true } = new Map();
 
   spans.forEach(span => {
     spansMap.set(span.spanID, span);
@@ -110,6 +110,8 @@ function calculateHiddenIdsAndDetailStates(uiFind: string, spans: Span[]) {
       detailStates.set(spanID, new DetailState());
       spanAncestorIds(span).forEach(ancestorID => childrenHiddenIDs.delete(ancestorID));
     });
+    childrenHiddenIDs.needToScroll = true;
+    detailStates.needToScroll = true;
   }
   return {
     childrenHiddenIDs,
@@ -125,7 +127,6 @@ function focusUiFind(state: TTraceTimeline, { uiFind, trace }: TTraceUiFindValue
   };
 }
 
-
 function setTrace(state: TTraceTimeline, { uiFind, trace }: TTraceUiFindValue) {
   const { traceID, spans } = trace;
   if (traceID === state.traceID) {
@@ -135,10 +136,7 @@ function setTrace(state: TTraceTimeline, { uiFind, trace }: TTraceUiFindValue) {
   const newState = { ...newInitialState(), spanNameColumnWidth, traceID };
 
   if (uiFind) {
-    Object.assign(
-      newState,
-      calculateHiddenIdsAndDetailStates(uiFind, spans),
-    );
+    Object.assign(newState, calculateHiddenIdsAndDetailStates(uiFind, spans));
   }
 
   return newState;

packages/jaeger-ui/src/components/TracePage/index.tsx

@@ -309,8 +309,25 @@ export class TracePageImpl extends React.PureComponent<TProps, TState> {
     }
   }
 
+  focusUiFind = () => {
+    const { trace, focusUiFind, uiFind } = this.props;
+    if (trace && trace.data) {
+      this._scrollManager.scrollToFirstVisibleSpan();
+      focusUiFind(trace.data, uiFind);
+    }
+  };
+
   render() {
-    const { archiveEnabled, archiveTraceState, embedded, focusUiFind, id, searchUrl, uiFind, trace } = this.props;
+    const {
+      archiveEnabled,
+      archiveTraceState,
+      embedded,
+      focusUiFind,
+      id,
+      searchUrl,
+      uiFind,
+      trace,
+    } = this.props;
     const { slimView, traceGraphView, headerHeight, viewRange } = this.state;
     if (!trace || trace.state === fetchedState.LOADING) {
       return <LoadingIndicator className="u-mt-vast" centered />;
@@ -335,12 +352,7 @@ export class TracePageImpl extends React.PureComponent<TProps, TState> {
 
     const isEmbedded = Boolean(embedded);
     const headerProps = {
-      focusUiFind: () => {
-        if (trace.data) {
-          focusUiFind(trace.data, uiFind);
-          setTimeout(this._scrollManager.scrollToFirstVisibleSpan);
-        }
-      },
+      focusUiFind: this.focusUiFind,
       slimView,
       textFilter: uiFind,
       traceGraphView,

packages/jaeger-ui/src/types/TTraceTimeline.tsx

@@ -16,8 +16,8 @@ import DetailState from '../components/TracePage/TraceTimelineViewer/SpanDetail/
 import TNil from './TNil';
 
 type TTraceTimeline = {
-  childrenHiddenIDs: Set<string>;
-  detailStates: Map<string, DetailState>;
+  childrenHiddenIDs: Set<string> & { needToScroll?: true };
+  detailStates: Map<string, DetailState> & { needToScroll?: true };
   hoverIndentGuideIds: Set<string>;
   spanNameColumnWidth: number;
   traceID: string | TNil;