Refactor model/trace-dag to prep for latency diffs (#521)

- Refactor TraceDag class to make it simpler and more flexible
- Change DagNode to be a simple type instead of a class
- Change the data on DagNode to extend DagNode instead of live off
  the "data" field
- Base the data model for trace diffs on collections of DenseSpans
  instead of just the count of spans in a vs b for a given node in the
  comparison DAG
- Lay some small (id-factories.tsx) ground-work for being more flexible
  in how the DAG is built from the trace, which is to say how spans are
  grouped

Signed-off-by: Joe Farro <joe@jf.io>

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

@@ -67,14 +67,13 @@ describe('drawNode', () => {
   });
 
   describe('renderNode()', () => {
-    const dataKey = 'data-key';
-    const dataValue = 'data-value';
+    const lenA = 3;
+    const lenB = 7;
     const key = 'vertex key';
     const vertex = {
       data: {
-        data: {
-          [dataKey]: dataValue,
-        },
+        a: new Array(lenA),
+        b: new Array(lenB),
         operation,
         service,
       },
@@ -83,7 +82,8 @@ describe('drawNode', () => {
 
     it('extracts values from vertex.data', () => {
       const node = renderNode(vertex);
-      expect(node.props[dataKey]).toBe(dataValue);
+      expect(node.props.a).toBe(lenA);
+      expect(node.props.b).toBe(lenB);
       expect(node.props.operation).toBe(operation);
       expect(node.props.service).toBe(service);
     });

packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/renderNode.tsx

@@ -1,4 +1,4 @@
-// Copyright (c) 2018 Uber Technologies, Inc.
+// Copyright (c) 2018-2020 The Jaeger Authors.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -19,8 +19,8 @@ import { TLayoutVertex } from '@jaegertracing/plexus/lib/types';
 
 import EmphasizedNode from '../../common/EmphasizedNode';
 import CopyIcon from '../../common/CopyIcon';
-import { DiffCounts } from '../../../model/trace-dag/types';
-import TDagVertex from '../../../model/trace-dag/types/TDagVertex';
+import { TDiffCounts } from '../../../model/trace-dag/types';
+import TDagPlexusVertex from '../../../model/trace-dag/types/TDagPlexusVertex';
 
 import './renderNode.css';
 
@@ -86,9 +86,11 @@ export class DiffNode extends React.PureComponent<Props> {
   }
 }
 
-export default function renderNode(vertex: TDagVertex<DiffCounts>) {
-  const { data, operation, service } = vertex.data;
-  return <DiffNode {...data} operation={operation} service={service} />;
+export default function renderNode(vertex: TDagPlexusVertex<TDiffCounts>) {
+  const { a, b, operation, service } = vertex.data;
+  const lenA = a ? a.length : 0;
+  const lenB = b ? b.length : 0;
+  return <DiffNode a={lenA} b={lenB} operation={operation} service={service} />;
 }
 
 export function getNodeEmphasisRenderer(keys: Set<string>) {

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2019 Uber Technologies, Inc.
+// Copyright (c) 2019-2020 The Jaeger Authors.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -19,12 +19,15 @@ import memoizeOne from 'memoize-one';
 
 import convPlexus from '../../../model/trace-dag/convPlexus';
 import TraceDag from '../../../model/trace-dag/TraceDag';
-import { DiffCounts } from '../../../model/trace-dag/types';
-import TDagVertex from '../../../model/trace-dag/types/TDagVertex';
+import { TDenseSpanMembers, TDiffCounts } from '../../../model/trace-dag/types';
+import TDagPlexusVertex from '../../../model/trace-dag/types/TDagPlexusVertex';
 import { Trace } from '../../../types/trace';
 import filterSpans from '../../../utils/filter-spans';
 
-function getUiFindVertexKeysFn(uiFind: string, vertices: TDagVertex<any>[]): Set<TVertexKey> {
+function getUiFindVertexKeysFn(
+  uiFind: string,
+  vertices: TDagPlexusVertex<TDenseSpanMembers>[]
+): Set<TVertexKey> {
   if (!uiFind) return new Set<TVertexKey>();
   const newVertexKeys: Set<TVertexKey> = new Set();
   vertices.forEach(({ key, data: { members } }) => {
@@ -41,7 +44,7 @@ function getEdgesAndVerticesFn(aData: Trace, bData: Trace) {
   const aTraceDag = TraceDag.newFromTrace(aData);
   const bTraceDag = TraceDag.newFromTrace(bData);
   const diffDag = TraceDag.diff(aTraceDag, bTraceDag);
-  return convPlexus<DiffCounts>(diffDag.nodesMap);
+  return convPlexus<TDiffCounts>(diffDag.nodesMap);
 }
 
 export const getEdgesAndVertices = memoizeOne(getEdgesAndVerticesFn);

packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.tsx

@@ -18,7 +18,8 @@ import { TLayoutVertex } from '@jaegertracing/plexus/lib/types';
 
 import { TSumSpan } from './types';
 import CopyIcon from '../../common/CopyIcon';
-import TDagVertex from '../../../model/trace-dag/types/TDagVertex';
+import { TDenseSpanMembers } from '../../../model/trace-dag/types';
+import TDagPlexusVertex from '../../../model/trace-dag/types/TDagPlexusVertex';
 import colorGenerator from '../../../utils/color-generator';
 
 import './OpNode.css';
@@ -126,22 +127,21 @@ export default class OpNode extends React.PureComponent<Props> {
 }
 
 export function getNodeRenderer(mode: string) {
-  return function drawNode(vertex: TDagVertex<TSumSpan>) {
-    const { data, operation, service } = vertex.data;
-    return <OpNode {...data} mode={mode} operation={operation} service={service} />;
+  return function drawNode(vertex: TDagPlexusVertex<TSumSpan & TDenseSpanMembers>) {
+    return <OpNode {...vertex.data} mode={mode} />;
   };
 }
 
 export function getNodeFindEmphasisRenderer(uiFindVertexKeys: Set<string> | null | undefined) {
-  return function renderFindEmphasis(lv: TLayoutVertex<TDagVertex<TSumSpan>>) {
+  return function renderFindEmphasis(lv: TLayoutVertex<TDagPlexusVertex<TSumSpan & TDenseSpanMembers>>) {
     if (!uiFindVertexKeys || !uiFindVertexKeys.has(lv.vertex.key)) {
       return null;
     }
     return <EmphasizedNode height={lv.height} width={lv.width} />;
   };
 }
 
-export function renderNodeVectorBorder(lv: TLayoutVertex<TDagVertex<TSumSpan>>) {
+export function renderNodeVectorBorder(lv: TLayoutVertex<TDagPlexusVertex<TSumSpan>>) {
   return (
     <rect
       className="OpNode--vectorBorder"

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

@@ -28,7 +28,8 @@ import {
   HELP_TABLE,
 } from './OpNode';
 import { TEv, TSumSpan } from './types';
-import TDagVertex from '../../../model/trace-dag/types/TDagVertex';
+import { TDenseSpanMembers } from '../../../model/trace-dag/types';
+import TDagPlexusVertex from '../../../model/trace-dag/types/TDagPlexusVertex';
 import { TNil } from '../../../types';
 
 import './TraceGraph.css';
@@ -154,7 +155,7 @@ export default class TraceGraph extends React.PureComponent<Props, State> {
 
     return (
       <div className={wrapperClassName} style={{ paddingTop: headerHeight + 47 }}>
-        <Digraph<TDagVertex<TSumSpan>>
+        <Digraph<TDagPlexusVertex<TSumSpan & TDenseSpanMembers>>
           minimap
           zoom
           className="TraceGraph--dag"

packages/jaeger-ui/src/components/TracePage/TraceGraph/calculateTraceDagEV.test.js

@@ -20,7 +20,7 @@ const testTrace = require('./testTrace.json');
 const transformedTrace = transformTraceData(testTrace);
 
 function assertData(nodes, service, operation, count, errors, time, percent, selfTime) {
-  const d = nodes.find(({ data: n }) => n.service === service && n.operation === operation).data.data;
+  const d = nodes.find(({ data: n }) => n.service === service && n.operation === operation).data;
   expect(d).toBeDefined();
   expect(d.count).toBe(count);
   expect(d.errors).toBe(errors);

packages/jaeger-ui/src/components/TracePage/TraceGraph/calculateTraceDagEV.tsx

@@ -17,7 +17,8 @@ import DRange from 'drange';
 import { TEdge } from '@jaegertracing/plexus/lib/types';
 import convPlexus from '../../../model/trace-dag/convPlexus';
 import TraceDag from '../../../model/trace-dag/TraceDag';
-import DagNode from '../../../model/trace-dag/DagNode';
+import TDagNode from '../../../model/trace-dag/types/TDagNode';
+import { TDenseSpanMembers } from '../../../model/trace-dag/types';
 import { Trace, Span, KeyValuePair } from '../../../types/trace';
 import { TSumSpan, TEv } from './types';
 
@@ -33,12 +34,15 @@ export function isError(tags: Array<KeyValuePair>) {
   return false;
 }
 
-function extendFollowsFrom(edges: TEdge[], nodes: DagNode<TSumSpan>[]) {
+function mapFollowsFrom(
+  edges: TEdge[],
+  nodes: TDagNode<TSumSpan & TDenseSpanMembers>[]
+): TEdge<{ followsFrom: boolean }>[] {
   return edges.map(e => {
     let hasChildOf = true;
     if (typeof e.to === 'number') {
-      const n = nodes[e.to];
-      hasChildOf = n.members.some(
+      const node = nodes[e.to];
+      hasChildOf = node.members.some(
         m => m.span.references && m.span.references.some(r => r.refType === 'CHILD_OF')
       );
     }
@@ -72,46 +76,38 @@ function getChildOfDrange(parentID: string, trace: Trace) {
   return childrenDrange;
 }
 
-export function calculateTraceDag(trace: Trace): TraceDag<TSumSpan> {
-  const traceDag: TraceDag<TSumSpan> = new TraceDag();
-  traceDag._initFromTrace(trace, {
-    count: 0,
-    errors: 0,
-    time: 0,
-    percent: 0,
-    selfTime: 0,
-    percentSelfTime: 0,
-  });
+export function calculateTraceDag(trace: Trace): TraceDag<TSumSpan & TDenseSpanMembers> {
+  const baseDag = TraceDag.newFromTrace(trace);
+  const dag = new TraceDag<TSumSpan & TDenseSpanMembers>();
 
-  traceDag.nodesMap.forEach(n => {
-    const ntime = n.members.reduce((p, m) => p + m.span.duration, 0);
-    const numErrors = n.members.reduce((p, m) => (p + isError(m.span.tags) ? 1 : 0), 0);
-    const childDurationsDRange = n.members.reduce((p, m) => {
+  baseDag.nodesMap.forEach(node => {
+    const ntime = node.members.reduce((p, m) => p + m.span.duration, 0);
+    const numErrors = node.members.reduce((p, m) => (p + isError(m.span.tags) ? 1 : 0), 0);
+    const childDurationsDRange = node.members.reduce((p, m) => {
       // Using DRange to handle overlapping spans (fork-join)
       const cdr = new DRange(m.span.startTime, m.span.startTime + m.span.duration).intersect(
         getChildOfDrange(m.span.spanID, trace)
       );
       return p + cdr.length;
     }, 0);
     const stime = ntime - childDurationsDRange;
-    const nd = {
-      count: n.members.length,
+    dag.addNode(node.id, node.parentID, {
+      ...node,
+      count: node.members.length,
       errors: numErrors,
       time: ntime,
       percent: (100 / trace.duration) * ntime,
       selfTime: stime,
       percentSelfTime: (100 / ntime) * stime,
-    };
-    // eslint-disable-next-line no-param-reassign
-    n.data = nd;
+    });
   });
-  return traceDag;
+  return dag;
 }
 
 export default function calculateTraceDagEV(trace: Trace): TEv {
   const traceDag = calculateTraceDag(trace);
   const nodes = [...traceDag.nodesMap.values()];
   const ev = convPlexus(traceDag.nodesMap);
-  ev.edges = extendFollowsFrom(ev.edges, nodes);
-  return ev;
+  const edges = mapFollowsFrom(ev.edges, nodes);
+  return { ...ev, edges };
 }

packages/jaeger-ui/src/components/TracePage/TraceGraph/types.tsx

@@ -1,4 +1,4 @@
-// Copyright (c) 2019 Uber Technologies, Inc.
+// Copyright (c) 2019-2020 The Jaeger Authors.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -14,18 +14,19 @@
 
 import { TEdge } from '@jaegertracing/plexus/lib/types';
 
-import TDagVertex from '../../../model/trace-dag/types/TDagVertex';
+import { TDenseSpanMembers } from '../../../model/trace-dag/types';
+import TDagPlexusVertex from '../../../model/trace-dag/types/TDagPlexusVertex';
 
 export type TSumSpan = {
   count: number;
   errors: number;
-  time: number;
   percent: number;
-  selfTime: number;
   percentSelfTime: number;
+  selfTime: number;
+  time: number;
 };
 
 export type TEv = {
-  edges: TEdge[];
-  vertices: TDagVertex<TSumSpan>[];
+  edges: TEdge<{ followsFrom: boolean }>[];
+  vertices: TDagPlexusVertex<TSumSpan & TDenseSpanMembers>[];
 };

packages/jaeger-ui/src/model/trace-dag/DenseTrace.tsx

@@ -13,11 +13,11 @@
 // limitations under the License.
 
 import denseTransforms from './denseTransforms';
-import { DenseSpan } from './types';
+import { TDenseSpan } from './types';
 import { Span, Trace } from '../../types/trace';
 
 function convSpans(spans: Span[]) {
-  const map: Map<string, DenseSpan> = new Map();
+  const map: Map<string, TDenseSpan> = new Map();
   const roots: Set<string> = new Set();
   const ids: string[] = [];
   spans.forEach(span => {
@@ -63,7 +63,7 @@ function convSpans(spans: Span[]) {
   return { ids, map, roots };
 }
 
-function makeDense(spanIDs: string[], map: Map<string, DenseSpan>) {
+function makeDense(spanIDs: string[], map: Map<string, TDenseSpan>) {
   spanIDs.forEach(id => {
     const denseSpan = map.get(id);
     // make flow happy
@@ -76,7 +76,7 @@ function makeDense(spanIDs: string[], map: Map<string, DenseSpan>) {
 export default class DenseTrace {
   trace: Trace;
   rootIDs: Set<string>;
-  denseSpansMap: Map<string, DenseSpan>;
+  denseSpansMap: Map<string, TDenseSpan>;
 
   constructor(trace: Trace) {
     this.trace = trace;