Modificatied traces result graph to addapt it to graph component params

Signed-off-by: Ruben Vargas <ruben.vp8510@gmail.com>

packages/jaeger-ui/src/components/DeepDependencies/traces.tsx

@@ -14,15 +14,20 @@
 
 import React, { Component } from 'react';
 import { History as RouterHistory, Location } from 'history';
-import _get from 'lodash/get';
 import { connect } from 'react-redux';
 import { getUrlState } from './url';
 import { getUrl } from '../SearchTracePage/url';
 
 import Graph from './Graph';
 import { extractUiFindFromState, TExtractUiFindFromStateReturn } from '../common/UiFindInput';
-import { EDirection, TDdgModel, TDdgModelParams, TDdgSparseUrlState } from '../../model/ddg/types';
-import TGraph, { makeGraph } from '../../model/ddg/Graph';
+import {
+  EDirection,
+  EViewModifier,
+  TDdgModel,
+  TDdgModelParams,
+  TDdgSparseUrlState,
+} from '../../model/ddg/types';
+import TGraph, { makeGraph } from '../../model/ddg/GraphModel';
 import { encodeDistance } from '../../model/ddg/visibility-codec';
 import { ReduxState } from '../../types';
 
@@ -51,23 +56,17 @@ type TOwnProps = {
   location: Location;
 };
 
+type TState = {
+  viewModifiers: Map<number, number>;
+};
+
 type TProps = TDispatchProps & TReduxProps & TOwnProps;
 
 // export for tests
-export class SearchResultsDDG extends Component<TProps> {
-  // shouldComponentUpdate is necessary as we don't want the plexus graph to re-render due to a uxStatus change
-  shouldComponentUpdate(nextProps: TProps) {
-    const updateCauses = [
-      'uiFind',
-      'trace',
-      'services',
-      'urlState.service',
-      'urlState.operation',
-      'urlState.start',
-      'urlState.end',
-      'urlState.visEncoding',
-    ];
-    return updateCauses.some(cause => _get(nextProps, cause) !== _get(this.props, cause));
+export class SearchResultsDDG extends Component<TProps, TState> {
+  constructor(props: TProps) {
+    super(props);
+    this.state = { viewModifiers: new Map<number, number>() };
   }
 
   setDistance = (distance: number, direction: EDirection) => {
@@ -90,10 +89,56 @@ export class SearchResultsDDG extends Component<TProps> {
     history.push(getUrl({ uiFind, ...urlState, ...newValues }));
   };
 
+  setViewModifier = (vertexKey: string, viewModifier: EViewModifier, enable: boolean) => {
+    const { graph, urlState } = this.props;
+    const { service, visEncoding } = urlState;
+    const { viewModifiers: originalModifiers } = this.state;
+    if (!graph || !service) {
+      return;
+    }
+    const pathElems = graph.getVertexVisiblePathElems(vertexKey, visEncoding);
+    if (!pathElems) {
+      throw new Error(`Invalid vertex key to set view modifier for: ${vertexKey}`);
+    }
+    const viewModifiers = new Map(originalModifiers);
+    const visibilityIndices = pathElems.map(pe => pe.visibilityIdx);
+
+    if (enable) {
+      visibilityIndices.forEach(idx => {
+        viewModifiers.set(idx, (viewModifiers.get(idx) || 0) | viewModifier); // eslint-disable-line no-bitwise
+      });
+    } else {
+      const indicesToUpdate = visibilityIndices || Array.from(viewModifiers.keys());
+      indicesToUpdate.forEach(idx => {
+        const newValue = viewModifier
+          ? (viewModifiers.get(idx) || 0) & ~viewModifier // eslint-disable-line no-bitwise
+          : EViewModifier.None;
+        if (newValue === EViewModifier.None) {
+          viewModifiers.delete(idx);
+        } else {
+          viewModifiers.set(idx, newValue);
+        }
+      });
+    }
+    this.setState({
+      viewModifiers,
+    });
+  };
+
+  getVisiblePathElems = (key: string) => {
+    const { graph, urlState } = this.props;
+    if (graph) {
+      return graph.getVertexVisiblePathElems(key, urlState.visEncoding);
+    }
+    return undefined;
+  };
+
   render() {
     const { graph, uiFind, urlState, model } = this.props;
     const { visEncoding } = urlState;
     const uiFindMatches = graph && graph.getVisibleUiFindMatches(uiFind, visEncoding);
+    const { density, showOp } = urlState;
+    const { viewModifiers } = this.state;
 
     let content = (
       <div>
@@ -104,19 +149,29 @@ export class SearchResultsDDG extends Component<TProps> {
     if (graph && model) {
       const { edges, vertices } = graph.getVisible(visEncoding);
       const distanceToPathElems = model.distanceToPathElems;
+      const { edges: edgesViewModifiers, vertices: verticesViewModifiers } = graph.getDerivedViewModifiers(
+        visEncoding,
+        viewModifiers
+      );
       content = (
-        <div>
+        <div className="Ddg">
           <HopsSelector
             distanceToPathElems={distanceToPathElems}
             handleClick={this.setDistance}
             visEncoding={visEncoding}
           />
           <div className="Ddg--graphWrapper">
             <Graph
+              key={JSON.stringify(urlState)}
+              density={density}
               edges={edges}
-              getVisiblePathElems={(key: string) => graph.getVisiblePathElems(key, visEncoding)}
+              edgesViewModifiers={edgesViewModifiers}
+              getVisiblePathElems={this.getVisiblePathElems}
+              setViewModifier={this.setViewModifier}
+              showOp={showOp}
               uiFindMatches={uiFindMatches}
               vertices={vertices}
+              verticesViewModifiers={verticesViewModifiers}
             />
           </div>
         </div>