Move filter to query param and highlight filter matches on graphs

.flowconfig

@@ -11,6 +11,7 @@
 ./flow-typed/npm
 
 [options]
+suppress_comment= \\(.\\|\n\\)*\\$FlowIgnore
 
 [version]
 0.71.0

packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.css

@@ -40,13 +40,35 @@ limitations under the License.
 }
 
 .TraceDiffGraph--dag {
+  transition: background 0.5s ease;
   stroke-width: 1.2;
 }
 
+.TraceDiffGraph--dag.uiFind {
+  background: #ddd;
+}
+
 .TraceDiffGraph--dag.is-small {
   stroke-width: 0.7;
 }
 
+/* Find within diff */
+.TraceDiffGraph--uiFind {
+  bottom: 20px;
+  position: absolute;
+  right: 20px;
+  width: 300px;
+  z-index: 1;
+}
+
+.TraceDiffGraph--uiFind > .ant-input {
+  border: 1px solid #777;
+  border-radius: 0;
+  border-color: #aaa;
+  box-shadow: 0 0 2px 2px #ccc;
+  border-radius: 0;
+}
+
 /* DAG minimap */
 
 .TraceDiffGraph--miniMap {

packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.js

@@ -16,13 +16,16 @@
 
 import * as React from 'react';
 import { DirectedGraph, LayoutManager } from '@jaegertracing/plexus';
+import cx from 'classnames';
+import _get from 'lodash/get';
+import { connect } from 'react-redux';
 
 import drawNode from './drawNode';
+import { getUiFindVertexKeys, getEdgesAndVertices } from './traceDiffGraphUtils';
 import ErrorMessage from '../../common/ErrorMessage';
 import LoadingIndicator from '../../common/LoadingIndicator';
+import UiFindInput, { extractUiFindFromState } from '../../common/UiFindInput';
 import { fetchedState } from '../../../constants';
-import convPlexus from '../../../model/trace-dag/convPlexus';
-import TraceDag from '../../../model/trace-dag/TraceDag';
 
 import type { FetchedTrace } from '../../../types';
 
@@ -31,25 +34,47 @@ import './TraceDiffGraph.css';
 type Props = {
   a: ?FetchedTrace,
   b: ?FetchedTrace,
+  uiFind?: string,
 };
 
 const { classNameIsSmall } = DirectedGraph.propsFactories;
 
-function setOnEdgesContainer(state: Object) {
+export function setOnEdgesContainer(state: Object) {
   const { zoomTransform } = state;
   if (!zoomTransform) {
     return null;
   }
   const { k } = zoomTransform;
   const opacity = 0.1 + k * 0.9;
-  return { style: { opacity } };
+  return { style: { opacity, zIndex: 1, position: 'absolute', pointerEvents: 'none' } };
 }
 
-export default class TraceDiffGraph extends React.PureComponent<Props> {
-  props: Props;
+export function setOnNodesContainer(state: Object) {
+  const { zoomTransform } = state;
+  const matchSize = 8 + 4 / _get(zoomTransform, 'k', 1);
+  return {
+    style: {
+      outline: `transparent solid ${matchSize}px`,
+    },
+  };
+}
+
+export function setOnNode() {
+  return {
+    style: {
+      outline: 'inherit',
+    },
+  };
+}
 
+class TraceDiffGraph extends React.PureComponent<Props> {
+  props: Props;
   layoutManager: LayoutManager;
 
+  static defaultProps = {
+    uiFind: '',
+  };
+
   constructor(props: Props) {
     super(props);
     this.layoutManager = new LayoutManager({ useDotEdges: true, splines: 'polyline' });
@@ -60,7 +85,12 @@ export default class TraceDiffGraph extends React.PureComponent<Props> {
   }
 
   render() {
-    const { a, b } = this.props;
+    const {
+      a,
+      b,
+      // Flow requires `= ''` because it does not interpret defaultProps
+      uiFind = '',
+    } = this.props;
     if (!a || !b) {
       return <h1 className="u-mt-vast u-tx-muted ub-tx-center">At least two Traces are needed</h1>;
     }
@@ -92,27 +122,36 @@ export default class TraceDiffGraph extends React.PureComponent<Props> {
     if (!aData || !bData) {
       return <div className="TraceDiffGraph--graphWrapper" />;
     }
-    const aTraceDag = TraceDag.newFromTrace(aData);
-    const bTraceDag = TraceDag.newFromTrace(bData);
-    const diffDag = TraceDag.diff(aTraceDag, bTraceDag);
-    const { edges, vertices } = convPlexus(diffDag.nodesMap);
+    const { edges, vertices } = getEdgesAndVertices(aData, bData);
+    const keys = getUiFindVertexKeys(uiFind, vertices);
+    const dagClassName = cx('TraceDiffGraph--dag', { uiFind });
 
     return (
       <div className="TraceDiffGraph--graphWrapper">
         <DirectedGraph
           minimap
           zoom
           arrowScaleDampener={0}
-          className="TraceDiffGraph--dag"
+          className={dagClassName}
           minimapClassName="TraceDiffGraph--miniMap"
           layoutManager={this.layoutManager}
-          getNodeLabel={drawNode}
+          getNodeLabel={drawNode(keys)}
           setOnRoot={classNameIsSmall}
           setOnEdgesContainer={setOnEdgesContainer}
+          setOnNodesContainer={setOnNodesContainer}
+          setOnNode={setOnNode}
           edges={edges}
           vertices={vertices}
         />
+        <UiFindInput
+          inputProps={{
+            className: 'TraceDiffGraph--uiFind',
+            suffix: uiFind.length && String(keys.size),
+          }}
+        />
       </div>
     );
   }
 }
+
+export default connect(extractUiFindFromState)(TraceDiffGraph);

packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.css

@@ -17,13 +17,15 @@ limitations under the License.
 .DiffNode {
   background: #bbb;
   border: 1px solid #777;
-  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0px 3px 1px rgba(0, 0, 0, 0.2);
+  color: rgba(0, 0, 0, 0.65);
   cursor: pointer;
   white-space: nowrap;
 }
 
-.TraceDiffGraph--dag.is-small .DiffNode > tbody {
-  opacity: 0;
+.DiffNode.is-ui-find-match {
+  outline: inherit;
+  outline-color: #fff3d7;
 }
 
 .DiffNode.is-changed {
@@ -41,15 +43,23 @@ limitations under the License.
   color: #fff;
 }
 
+.DiffNode.is-removed {
+  background: #cc1616;
+  border: none;
+  color: #fff;
+}
+
 .DiffNode.is-less {
   border-color: #cc1616;
   background: #ffa39e;
 }
 
-.DiffNode.is-removed {
-  background: #cc1616;
-  border: none;
-  color: #fff;
+.TraceDiffGraph--dag.is-small .DiffNode--body {
+  opacity: 0;
+}
+
+.DiffNode--popover .DiffNode.is-ui-find-match {
+  outline: #fff3d7 solid 3px;
 }
 
 .DiffNode--metricCell {
@@ -78,7 +88,7 @@ limitations under the License.
 
 .DiffNode--popover .DiffNode--copyIcon,
 .DiffNode:not(:hover) .DiffNode--copyIcon {
-  display: none;
+  color: transparent;
 }
 
 /* Tweak the popover aesthetics - unfortunate but necessary */

packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.js

@@ -27,18 +27,17 @@ import './drawNode.css';
 type Props = {
   a: number,
   b: number,
+  isUiFindMatch: boolean,
   operation: string,
   service: string,
 };
 
 const abs = Math.abs;
 const max = Math.max;
 
-class DiffNode extends React.PureComponent<Props> {
-  props: Props;
-
+export class DiffNode extends React.PureComponent<Props> {
   render() {
-    const { a, b, operation, service } = this.props;
+    const { a, b, isUiFindMatch, operation, service } = this.props;
     const isSame = a === b;
     const className = cx({
       'is-same': isSame,
@@ -47,11 +46,12 @@ class DiffNode extends React.PureComponent<Props> {
       'is-added': a === 0,
       'is-less': a > b && b > 0,
       'is-removed': b === 0,
+      'is-ui-find-match': isUiFindMatch,
     });
     const chgSign = a < b ? '+' : '-';
     const table = (
       <table className={`DiffNode ${className}`}>
-        <tbody>
+        <tbody className={`DiffNode--body ${className}`}>
           <tr>
             <td className={`DiffNode--metricCell ${className}`} rowSpan={isSame ? 2 : 1}>
               {isSame ? null : <span className="DiffNode--metricSymbol">{chgSign}</span>}
@@ -88,7 +88,21 @@ class DiffNode extends React.PureComponent<Props> {
   }
 }
 
-export default function drawNode<T>(vertex: PVertex<T>) {
-  const { data, operation, service } = vertex.data;
-  return <DiffNode {...data} operation={operation} service={service} />;
+function drawNode<T>(vertex: PVertex<T>, keys: Set<number | string>) {
+  const { data, members, operation, service } = vertex.data;
+  return (
+    <DiffNode
+      {...data}
+      isUiFindMatch={keys.has(vertex.key)}
+      members={members}
+      operation={operation}
+      service={service}
+    />
+  );
+}
+
+export default function drawNodeGenerator(keys: Set<number | string>) {
+  return function drawVertex<T>(vertex: PVertex<T>) {
+    return drawNode(vertex, keys);
+  };
 }

packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/traceDiffGraphUtils.js

@@ -0,0 +1,62 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import _get from 'lodash/get';
+import _map from 'lodash/map';
+
+import convPlexus from '../../../model/trace-dag/convPlexus';
+import TraceDag from '../../../model/trace-dag/TraceDag';
+import filterSpans from '../../../utils/filter-spans';
+
+import type { PVertex } from '../../../model/trace-dag/types';
+import type { Trace } from '../../../types/trace';
+
+export type vertexKeys = Set<number | string>;
+
+let lastUiFind: string;
+let lastVertices: PVertex<Trace>[];
+let uiFindVertexKeys: ?vertexKeys;
+
+export function getUiFindVertexKeys(uiFind: string, vertices: PVertex<Trace>[]): vertexKeys {
+  if (uiFind === lastUiFind && vertices === lastVertices && uiFindVertexKeys) {
+    return uiFindVertexKeys;
+  }
+  const newVertexKeys: Set<number | string> = new Set();
+  vertices.forEach(({ key, data: { members } }) => {
+    if (_get(filterSpans(uiFind, _map(members, 'span')), 'size')) {
+      newVertexKeys.add(key);
+    }
+  });
+  lastUiFind = uiFind;
+  lastVertices = vertices;
+  uiFindVertexKeys = newVertexKeys;
+  return newVertexKeys;
+}
+
+let lastAData: ?Trace;
+let lastBData: ?Trace;
+let edgesAndVertices: ?Object;
+
+export function getEdgesAndVertices(aData: Trace, bData: Trace) {
+  if (aData === lastAData && bData === lastBData && edgesAndVertices) {
+    return edgesAndVertices;
+  }
+  lastAData = aData;
+  lastBData = bData;
+  const aTraceDag = TraceDag.newFromTrace(aData);
+  const bTraceDag = TraceDag.newFromTrace(bData);
+  const diffDag = TraceDag.diff(aTraceDag, bTraceDag);
+  edgesAndVertices = convPlexus(diffDag.nodesMap);
+  return edgesAndVertices;
+}

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

@@ -179,6 +179,19 @@ export default class ScrollManager {
     if (!nextSpanIndex || nextSpanIndex === boundary) {
       // might as well scroll to the top or bottom
       nextSpanIndex = boundary - direction;
+
+      // If there are hidden children, scroll to the last visible span
+      if (childrenAreHidden) {
+        let isFallbackHidden: ?boolean;
+        do {
+          const { isHidden, parentIDs } = isSpanHidden(spans[nextSpanIndex], childrenAreHidden, spansMap);
+          if (isHidden) {
+            childrenAreHidden.add(...parentIDs);
+            nextSpanIndex--;
+          }
+          isFallbackHidden = isHidden;
+        } while (isFallbackHidden);
+      }
     }
     const nextRow = xrs.mapSpanIndexToRowIndex(nextSpanIndex);
     this._scrollPast(nextRow, direction);