Directed graph layout and presentation #212

tiffon · 2018-05-11T06:21:22Z

High level

The overall effort for creating the directed graphs is being broken into multiple PRs and merged into an intermediary branch, develop-directed-graph, instead of master.

"plexus"

A network or interwoven mass, especially (anatomy) of nerves, blood vessels, or lymphatic vessels.

(mathematics) The system of equations required for the complete expression of the relations which exist between a set of quantities.

Wiktionary - plexus

Component

The directed graph will be used in:

Service dependency graphs
Viewing a trace as a DAG
Comparing two traces via comparing two DAGs

This PR implements the functionality to generate the layout (positions and edges) of a graph, ~~but does not have the presentation functionality (React component), yet.~~ Also implemented in this PR is a React component to present the directed graph. It implements the MVP functionality that is required for kaiju.

Comments are very light and tests are TODO, but I wanted to get eyes on this as soon as possible.

Signed-off-by: Joe Farro <[email protected]>

Outstanding: * tests * calculate edges via several workers when there are many edges Signed-off-by: Joe Farro <[email protected]>

Signed-off-by: Joe Farro <[email protected]>

codecov · 2018-05-11T06:21:28Z

Codecov Report

Merging #212 into develop-directed-graph will decrease coverage by 0.07%.
The diff coverage is 100%.

@@                    Coverage Diff                     @@
##           develop-directed-graph     #212      +/-   ##
==========================================================
- Coverage                   89.17%   89.09%   -0.08%     
==========================================================
  Files                         104      104              
  Lines                        2291     2293       +2     
  Branches                      466      466              
==========================================================
  Hits                         2043     2043              
- Misses                        209      211       +2     
  Partials                       39       39

Impacted Files	Coverage Δ
packages/jaeger-ui/src/components/App/TopNav.js	`77.77% <100%> (+2.77%)`	⬆️
...neViewer/TimelineHeaderRow/TimelineViewingLayer.js	`87.03% <0%> (-3.71%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e31801d...60ef268. Read the comment docs.

simonrobb

A few suggestions

simonrobb · 2018-05-16T20:12:10Z

packages/plexus/src/DirectedGraph/DirectedGraph.js

+import type { DirectedGraphProps, DirectedGraphState } from './types';
+import type { Edge, Vertex } from '../types/layout';
+
+const PHASE_NO_DATA = 0;


Nice state management 👌🏻looks like a messy lifecycle but you've handled it well

simonrobb · 2018-05-16T21:06:07Z

packages/plexus/src/LayoutManager/Coordinator.js

+    this.currentLayout = null;
+    this.nextWorkerId = 1;
+    this.isDisposed = false;
+    this.idleWorkers = [this._initWorker()];


Why initialize with a worker? It looks like you just create one as they're required. Seems like introducing unnecessary state.

It takes some time to initialize the worker. A quick test showed around 7 - 10ms. (Most of it is in generating the blob.) Kind of point-less to not do it lazily, though.

Will change.

As a side note: the rationale was driven by the fact that the workers are pooled.

This looks better to me 👍

simonrobb · 2018-05-16T21:07:41Z

packages/plexus/src/LayoutManager/Coordinator.js

+  constructor(callback: LayoutUpdate => void) {
+    this.callback = callback;
+    this.currentLayout = null;
+    this.nextWorkerId = 1;


A zero-based index might be more intuitive.

Yeah, not sure what I was thinking. Will fix.

Were you intending to fix this?

simonrobb · 2018-05-16T21:10:36Z

packages/plexus/src/LayoutManager/Coordinator.js

+  }
+
+  getLayout(id: number, edges: Edge[], vertices: SizeVertex[]) {
+    if (this.isDisposed) {


Any reason for having a disposed state? You're almost returning it to its initial state in the dispose method; it doesn't seem dangerous to allow a getLayout call on a disposed instance.

Yeah, I guess the main thing is to interrupt any pending worker tasks, for instance if the view changes and the graph component unmounts.

Seems like having a reset() method to clear any current tasks would suffice.

On the other hand, I don't know much about garbage collecting workers, so I'll leave a flag for killing idle workers, too.

tiffon

Will change.

tiffon · 2018-05-17T02:44:30Z

packages/plexus/src/DirectedGraph/DirectedGraph.js

+import type { DirectedGraphProps, DirectedGraphState } from './types';
+import type { Edge, Vertex } from '../types/layout';
+
+const PHASE_NO_DATA = 0;


tiffon · 2018-05-17T02:45:10Z

packages/plexus/src/LayoutManager/Coordinator.js

+  constructor(callback: LayoutUpdate => void) {
+    this.callback = callback;
+    this.currentLayout = null;
+    this.nextWorkerId = 1;


Yeah, not sure what I was thinking. Will fix.

tiffon · 2018-05-17T03:12:05Z

packages/plexus/src/LayoutManager/Coordinator.js

+    this.currentLayout = null;
+    this.nextWorkerId = 1;
+    this.isDisposed = false;
+    this.idleWorkers = [this._initWorker()];


It takes some time to initialize the worker. A quick test showed around 7 - 10ms. (Most of it is in generating the blob.) Kind of point-less to not do it lazily, though.

Will change.

As a side note: the rationale was driven by the fact that the workers are pooled.

tiffon · 2018-05-17T03:30:26Z

packages/plexus/src/LayoutManager/Coordinator.js

+  }
+
+  getLayout(id: number, edges: Edge[], vertices: SizeVertex[]) {
+    if (this.isDisposed) {


Yeah, I guess the main thing is to interrupt any pending worker tasks, for instance if the view changes and the graph component unmounts.

Seems like having a reset() method to clear any current tasks would suffice.

On the other hand, I don't know much about garbage collecting workers, so I'll leave a flag for killing idle workers, too.

Signed-off-by: Prakriti <[email protected]>

Signed-off-by: Joe Farro <[email protected]>

tiffon · 2018-06-24T04:05:16Z

@simonrobb Thanks for the feedback, I made updates per your remarks (finally). Let me know if you see anything else that needs some work.

Signed-off-by: Joe Farro <[email protected]>

simonrobb · 2018-06-25T17:08:17Z

packages/plexus/src/LayoutManager/Coordinator.js

+    this.currentLayout = null;
+    this.nextWorkerId = 1;
+    this.isDisposed = false;
+    this.idleWorkers = [this._initWorker()];


This looks better to me 👍

simonrobb · 2018-06-25T17:09:14Z

packages/plexus/src/LayoutManager/Coordinator.js

+  constructor(callback: LayoutUpdate => void) {
+    this.callback = callback;
+    this.currentLayout = null;
+    this.nextWorkerId = 1;


Were you intending to fix this?

Signed-off-by: Joe Farro <[email protected]>

simonrobb

LGTM

* Prep the repo for separately developed components * Fix uberinternal yarn.lock issues * Upgrade react to 16.3.2 * Update readme to account for on Lerna changes Signed-off-by: Joe Farro <[email protected]> Directed graph layout and presentation (#212) * Prep the repo for separately developed components Signed-off-by: Joe Farro <[email protected]> * WIP - Very rough graph layout functionality Signed-off-by: Joe Farro <[email protected]> * Graph layout functionality is in solid shape Outstanding: * tests * calculate edges via several workers when there are many edges Signed-off-by: Joe Farro <[email protected]> * Fix minor misc issues with plexus layout Signed-off-by: Joe Farro <[email protected]> * Fix uberinternal yarn.lock issues Signed-off-by: Joe Farro <[email protected]> * Fix uberinternal yarn.lock issues Signed-off-by: Joe Farro <[email protected]> * Upgrade react to 16.3.2 Signed-off-by: Joe Farro <[email protected]> * Upgrade flow to 0.71.0 Signed-off-by: Joe Farro <[email protected]> * Very rough React graph component Signed-off-by: Joe Farro <[email protected]> * Enable custom props for graph elements Signed-off-by: Joe Farro <[email protected]> * The graph refreshes when it gets new data Signed-off-by: Joe Farro <[email protected]> * Make the jaeger-ui package private Signed-off-by: Joe Farro <[email protected]> * Misc cleanup for plexus package.json Signed-off-by: Joe Farro <[email protected]> * Fix issues with plexus package.json Signed-off-by: Joe Farro <[email protected]> * Don't output a CSS file for plexus Signed-off-by: Joe Farro <[email protected]> * Increase plexus node spacing for neato layouts Signed-off-by: Joe Farro <[email protected]> * Update plexus to 0.0.1-dev.2 Signed-off-by: Joe Farro <[email protected]> * Adding new issue and pull request template (#219) Signed-off-by: Prakriti <[email protected]> * plexus readme, remove `LayoutManager.dispose()` Signed-off-by: Joe Farro <[email protected]> * remove unecessary package Signed-off-by: Joe Farro <[email protected]> * Add more complex graphs to plexus demo Signed-off-by: Joe Farro <[email protected]> * Start the worker ID at 0 Signed-off-by: Joe Farro <[email protected]> Search page functionality for trace diffs Signed-off-by: Joe Farro <[email protected]> Stub for trace diff page, update redux state shape - Better redux state shape for trace diff - Refer to traces selected for comparison as trace diff cohort - Better redux state shape for fetched trace data - Before: One loading prop to keep track of all search and individual trace fetching - After: Loading is tracked separately for serach and for each individual trace being fetched - This is better all around and lays the ground-work for fetching multiple individual traces which will be necessary for trace diff page when hit directly via URL (will need to fetch two or more traces) Signed-off-by: Joe Farro <[email protected]> Optimization for trace mini-map rendering On a trace with ~16k spans reduced minimap rendering from ~250ms to ~20ms. For context, the initial render of the trace was around 1.22s. Signed-off-by: Joe Farro <[email protected]> Redux cleanup, hydrate diff cohort on search page - Merge TraceSummary into Trace - Redux action to fetch multiple traces by ID - Create a small-sized variation of the loading indicator - SearchTracePage loads trace data for traces in the diff cohort - Show loading indicator when trace data is being loaded - Show inline error when trace loading fails - Strip failed traces from diff cohort when linking to diff page - Diff page forces redux state based on URL params Signed-off-by: Joe Farro <[email protected]> Trace diff page header functionality - Fetch traces that need to be loaded - Keep the URL and redux state in sync after changes to A or B - Allow entering traces by ID - Allow selecting other traces in the cohort - Indicate when loading a trace failed Signed-off-by: Joe Farro <[email protected]> Convert trace to a DAG Apply three transforms to spans when converting to DAG: - Adopt peer.service for service name when a client span is missing the corresponding server span - Ignore client spans when the only child is a reasonable server span - Try to figure out a better operation name when operation === the http.method tag The conversion can be optimized; it takes about 230ms on a trace with ~35k spans. A trace with ~9k spans takes about 50ms. Signed-off-by: Joe Farro <[email protected]> Add useDotEdges and totalMemory options to plexus - Option in plexus to set the totalMemory viz.js uses - Sometimes viz.js runs out of memory on large graphs, especially when using the neato engine, increasing the total memeory can help - Option in plexus to use dot edges in plexus graphs - Useful for trees (neato and plexus are very similar) or large graphs (neato is too slow) Signed-off-by: Joe Farro <[email protected]> Initial trace diff graph - Ability to create diff of two TraceDag instances - Additional transforms to trim superfluous nodes - skipAnnotationSpans - skipClientSpans Signed-off-by: Joe Farro <[email protected]> Add zoom and pan to plexus - Zoom and pan - Add graph state as param to setOn* props - Enable scaling edge stroke based on zoom level Signed-off-by: Joe Farro <[email protected]> Add zoom to trace diff and increase color contrast - Add zoom pan to trace diff - On node hover show node @ 1x zoom (useful when zoomed out) - Higher contrast colors for trace diff DAG - Allowing scrolling for errors - Fix issue with node sizing during measurement phase Signed-off-by: Joe Farro <[email protected]> Add a minimap to plexus to help zoom and pan Also added to trace-diffs Signed-off-by: Joe Farro <[email protected]> Guard plexus zoom functionality with a flag Signed-off-by: Joe Farro <[email protected]> Fixes and optimizations to plexus and trace diffs - Bug fix: Each graph should have a unique edge arrow def IRI - Keep strokes from scaling into invisibility when zooming - Remove redundant root node - Apply zoom transforms to the node and edge containers - Scale the arrow def based on the current zoom (when zoom is enabled) by scaling the coords in the marker and path definitions - Add a convenience prop-factory that toggles a class, "is-small", based on the current zoom level - Use "is-small" to toggle the visibility of node text and edge stroke width based on the current zoom level - Change prop factories to be grouped by feature instead of context - In many cases the prop factory can be applied to multiple contexts, e.g. to both the edges container and an edge path - Make Node and EdgePath components PureComponents - Wrap rendering the nodes and edges in a PureComponent to prevent unnecessary renders - Remove DirectedGraphState from the edge and node factory prop functions to prevent rendering with every transform change Signed-off-by: Joe Farro <[email protected]> Add additional layout options to plexus Signed-off-by: Joe Farro <[email protected]> Lighten trace diff color scheme Signed-off-by: Joe Farro <[email protected]> Use green instead of blue in trace diff coloring Green is more commonly used to show additions Signed-off-by: Joe Farro <[email protected]> Add "Compare" to the top nav and other small fixes Signed-off-by: Joe Farro <[email protected]> Adding new issue and pull request template (#219) Signed-off-by: Prakriti <[email protected]> Integrate Google Analytics into Search Page (#220) * Integrate GA into search page Signed-off-by: Davit Yeghshatyan <[email protected]> * Review changes Signed-off-by: Davit Yeghshatyan <[email protected]> * Remove tracking of actual values Signed-off-by: Davit Yeghshatyan <[email protected]> Timeline Expand and Collapse Features (#221) * Add expansion and collapsing features Signed-off-by: Davit Yeghshatyan <[email protected]> * Use Icon component Signed-off-by: Davit Yeghshatyan <[email protected]> * Use spans upstream Signed-off-by: Davit Yeghshatyan <[email protected]> * Improve css Signed-off-by: Davit Yeghshatyan <[email protected]> * Rotate collapse buttons Signed-off-by: Davit Yeghshatyan <[email protected]> * Remove debug logging Signed-off-by: Davit Yeghshatyan <[email protected]> * Remove spans from TimelineHeaderRow Signed-off-by: Davit Yeghshatyan <[email protected]> * Add unit test for TimelineCollapser Signed-off-by: Davit Yeghshatyan <[email protected]> * Use popover Signed-off-by: Davit Yeghshatyan <[email protected]> * Add TimelineCollapser test Signed-off-by: Davit Yeghshatyan <[email protected]> * Revert "Use popover" This reverts commit 6152402 Signed-off-by: Davit Yeghshatyan <[email protected]> * Add tests for duck.js Signed-off-by: Davit Yeghshatyan <[email protected]> * Add more tests for duck.js Signed-off-by: Davit Yeghshatyan <[email protected]> * Add more tests for index.js Signed-off-by: Davit Yeghshatyan <[email protected]> * Add keyboard shortcuts Signed-off-by: Davit Yeghshatyan <[email protected]> * Update changelog Signed-off-by: Davit Yeghshatyan <[email protected]> * Make review changes Signed-off-by: Davit Yeghshatyan <[email protected]> Squashed commits from develop-directed-graph (#224) Signed-off-by: Joe Farro <[email protected]> Lazily initialize the first worker in plexus Signed-off-by: Joe Farro <[email protected]> Fix issue with trace diff URL from auth redirects The trace diff url was of the form: /trace/<trace-a-id>:diff?b=<trace-b-id> But, during OneLogin / SAML auth redirects it would get URL encoded and then not URL decoded resulting in it being interpreted as a trace ID. Move to the following form with three literal periods between the IDs: /trace/<trace-a-id>...<trace-b-id> Other misc fixes and tweaks: - Fix an issue where selecting a cohort of traces and then clicking the "Compare" button in the top nav cleared the cohort - Fix an issue where removing a trace from the cohort on the search page would not clear the trace from A or B, effectively preventing traces set as A or B from ever being removed - Clean up route definitions Signed-off-by: Joe Farro <[email protected]> Fix trace detail tracking for revised redux shape Signed-off-by: Joe Farro <[email protected]>

* Use Lerna (#209) * Prep the repo for separately developed components * Fix uberinternal yarn.lock issues * Upgrade react to 16.3.2 * Update readme to account for on Lerna changes Signed-off-by: Joe Farro <[email protected]> Directed graph layout and presentation (#212) * Prep the repo for separately developed components Signed-off-by: Joe Farro <[email protected]> * WIP - Very rough graph layout functionality Signed-off-by: Joe Farro <[email protected]> * Graph layout functionality is in solid shape Outstanding: * tests * calculate edges via several workers when there are many edges Signed-off-by: Joe Farro <[email protected]> * Fix minor misc issues with plexus layout Signed-off-by: Joe Farro <[email protected]> * Fix uberinternal yarn.lock issues Signed-off-by: Joe Farro <[email protected]> * Fix uberinternal yarn.lock issues Signed-off-by: Joe Farro <[email protected]> * Upgrade react to 16.3.2 Signed-off-by: Joe Farro <[email protected]> * Upgrade flow to 0.71.0 Signed-off-by: Joe Farro <[email protected]> * Very rough React graph component Signed-off-by: Joe Farro <[email protected]> * Enable custom props for graph elements Signed-off-by: Joe Farro <[email protected]> * The graph refreshes when it gets new data Signed-off-by: Joe Farro <[email protected]> * Make the jaeger-ui package private Signed-off-by: Joe Farro <[email protected]> * Misc cleanup for plexus package.json Signed-off-by: Joe Farro <[email protected]> * Fix issues with plexus package.json Signed-off-by: Joe Farro <[email protected]> * Don't output a CSS file for plexus Signed-off-by: Joe Farro <[email protected]> * Increase plexus node spacing for neato layouts Signed-off-by: Joe Farro <[email protected]> * Update plexus to 0.0.1-dev.2 Signed-off-by: Joe Farro <[email protected]> * Adding new issue and pull request template (#219) Signed-off-by: Prakriti <[email protected]> * plexus readme, remove `LayoutManager.dispose()` Signed-off-by: Joe Farro <[email protected]> * remove unecessary package Signed-off-by: Joe Farro <[email protected]> * Add more complex graphs to plexus demo Signed-off-by: Joe Farro <[email protected]> * Start the worker ID at 0 Signed-off-by: Joe Farro <[email protected]> Search page functionality for trace diffs Signed-off-by: Joe Farro <[email protected]> Stub for trace diff page, update redux state shape - Better redux state shape for trace diff - Refer to traces selected for comparison as trace diff cohort - Better redux state shape for fetched trace data - Before: One loading prop to keep track of all search and individual trace fetching - After: Loading is tracked separately for serach and for each individual trace being fetched - This is better all around and lays the ground-work for fetching multiple individual traces which will be necessary for trace diff page when hit directly via URL (will need to fetch two or more traces) Signed-off-by: Joe Farro <[email protected]> Optimization for trace mini-map rendering On a trace with ~16k spans reduced minimap rendering from ~250ms to ~20ms. For context, the initial render of the trace was around 1.22s. Signed-off-by: Joe Farro <[email protected]> Redux cleanup, hydrate diff cohort on search page - Merge TraceSummary into Trace - Redux action to fetch multiple traces by ID - Create a small-sized variation of the loading indicator - SearchTracePage loads trace data for traces in the diff cohort - Show loading indicator when trace data is being loaded - Show inline error when trace loading fails - Strip failed traces from diff cohort when linking to diff page - Diff page forces redux state based on URL params Signed-off-by: Joe Farro <[email protected]> Trace diff page header functionality - Fetch traces that need to be loaded - Keep the URL and redux state in sync after changes to A or B - Allow entering traces by ID - Allow selecting other traces in the cohort - Indicate when loading a trace failed Signed-off-by: Joe Farro <[email protected]> Convert trace to a DAG Apply three transforms to spans when converting to DAG: - Adopt peer.service for service name when a client span is missing the corresponding server span - Ignore client spans when the only child is a reasonable server span - Try to figure out a better operation name when operation === the http.method tag The conversion can be optimized; it takes about 230ms on a trace with ~35k spans. A trace with ~9k spans takes about 50ms. Signed-off-by: Joe Farro <[email protected]> Add useDotEdges and totalMemory options to plexus - Option in plexus to set the totalMemory viz.js uses - Sometimes viz.js runs out of memory on large graphs, especially when using the neato engine, increasing the total memeory can help - Option in plexus to use dot edges in plexus graphs - Useful for trees (neato and plexus are very similar) or large graphs (neato is too slow) Signed-off-by: Joe Farro <[email protected]> Initial trace diff graph - Ability to create diff of two TraceDag instances - Additional transforms to trim superfluous nodes - skipAnnotationSpans - skipClientSpans Signed-off-by: Joe Farro <[email protected]> Add zoom and pan to plexus - Zoom and pan - Add graph state as param to setOn* props - Enable scaling edge stroke based on zoom level Signed-off-by: Joe Farro <[email protected]> Add zoom to trace diff and increase color contrast - Add zoom pan to trace diff - On node hover show node @ 1x zoom (useful when zoomed out) - Higher contrast colors for trace diff DAG - Allowing scrolling for errors - Fix issue with node sizing during measurement phase Signed-off-by: Joe Farro <[email protected]> Add a minimap to plexus to help zoom and pan Also added to trace-diffs Signed-off-by: Joe Farro <[email protected]> Guard plexus zoom functionality with a flag Signed-off-by: Joe Farro <[email protected]> Fixes and optimizations to plexus and trace diffs - Bug fix: Each graph should have a unique edge arrow def IRI - Keep strokes from scaling into invisibility when zooming - Remove redundant root node - Apply zoom transforms to the node and edge containers - Scale the arrow def based on the current zoom (when zoom is enabled) by scaling the coords in the marker and path definitions - Add a convenience prop-factory that toggles a class, "is-small", based on the current zoom level - Use "is-small" to toggle the visibility of node text and edge stroke width based on the current zoom level - Change prop factories to be grouped by feature instead of context - In many cases the prop factory can be applied to multiple contexts, e.g. to both the edges container and an edge path - Make Node and EdgePath components PureComponents - Wrap rendering the nodes and edges in a PureComponent to prevent unnecessary renders - Remove DirectedGraphState from the edge and node factory prop functions to prevent rendering with every transform change Signed-off-by: Joe Farro <[email protected]> Add additional layout options to plexus Signed-off-by: Joe Farro <[email protected]> Lighten trace diff color scheme Signed-off-by: Joe Farro <[email protected]> Use green instead of blue in trace diff coloring Green is more commonly used to show additions Signed-off-by: Joe Farro <[email protected]> Add "Compare" to the top nav and other small fixes Signed-off-by: Joe Farro <[email protected]> Adding new issue and pull request template (#219) Signed-off-by: Prakriti <[email protected]> Integrate Google Analytics into Search Page (#220) * Integrate GA into search page Signed-off-by: Davit Yeghshatyan <[email protected]> * Review changes Signed-off-by: Davit Yeghshatyan <[email protected]> * Remove tracking of actual values Signed-off-by: Davit Yeghshatyan <[email protected]> Timeline Expand and Collapse Features (#221) * Add expansion and collapsing features Signed-off-by: Davit Yeghshatyan <[email protected]> * Use Icon component Signed-off-by: Davit Yeghshatyan <[email protected]> * Use spans upstream Signed-off-by: Davit Yeghshatyan <[email protected]> * Improve css Signed-off-by: Davit Yeghshatyan <[email protected]> * Rotate collapse buttons Signed-off-by: Davit Yeghshatyan <[email protected]> * Remove debug logging Signed-off-by: Davit Yeghshatyan <[email protected]> * Remove spans from TimelineHeaderRow Signed-off-by: Davit Yeghshatyan <[email protected]> * Add unit test for TimelineCollapser Signed-off-by: Davit Yeghshatyan <[email protected]> * Use popover Signed-off-by: Davit Yeghshatyan <[email protected]> * Add TimelineCollapser test Signed-off-by: Davit Yeghshatyan <[email protected]> * Revert "Use popover" This reverts commit 6152402 Signed-off-by: Davit Yeghshatyan <[email protected]> * Add tests for duck.js Signed-off-by: Davit Yeghshatyan <[email protected]> * Add more tests for duck.js Signed-off-by: Davit Yeghshatyan <[email protected]> * Add more tests for index.js Signed-off-by: Davit Yeghshatyan <[email protected]> * Add keyboard shortcuts Signed-off-by: Davit Yeghshatyan <[email protected]> * Update changelog Signed-off-by: Davit Yeghshatyan <[email protected]> * Make review changes Signed-off-by: Davit Yeghshatyan <[email protected]> Squashed commits from develop-directed-graph (#224) Signed-off-by: Joe Farro <[email protected]> Lazily initialize the first worker in plexus Signed-off-by: Joe Farro <[email protected]> Fix issue with trace diff URL from auth redirects The trace diff url was of the form: /trace/<trace-a-id>:diff?b=<trace-b-id> But, during OneLogin / SAML auth redirects it would get URL encoded and then not URL decoded resulting in it being interpreted as a trace ID. Move to the following form with three literal periods between the IDs: /trace/<trace-a-id>...<trace-b-id> Other misc fixes and tweaks: - Fix an issue where selecting a cohort of traces and then clicking the "Compare" button in the top nav cleared the cohort - Fix an issue where removing a trace from the cohort on the search page would not clear the trace from A or B, effectively preventing traces set as A or B from ever being removed - Clean up route definitions Signed-off-by: Joe Farro <[email protected]> Fix trace detail tracking for revised redux shape Signed-off-by: Joe Farro <[email protected]> * Typo Signed-off-by: Joe Farro <[email protected]> * Fix #232 Split leaf from parent nodes in the tree Signed-off-by: Joe Farro <[email protected]> * plexus - Fix chart style issues and bump version Also tweak the demo a bit. Signed-off-by: Joe Farro <[email protected]> * Fix yarn workspace based install Signed-off-by: Joe Farro <[email protected]> * In CI, fail if an update to yarn.lock is needed Signed-off-by: Joe Farro <[email protected]> * Misc cleanup Signed-off-by: Joe Farro <[email protected]> * Use stable yarn in CI Signed-off-by: Joe Farro <[email protected]> * Use yarn in package.json scripts Signed-off-by: Joe Farro <[email protected]> * Use newly downloaded yarn in CI Signed-off-by: Joe Farro <[email protected]>

* Use Lerna (jaegertracing#209) * Prep the repo for separately developed components * Fix uberinternal yarn.lock issues * Upgrade react to 16.3.2 * Update readme to account for on Lerna changes Signed-off-by: Joe Farro <[email protected]> Directed graph layout and presentation (jaegertracing#212) * Prep the repo for separately developed components Signed-off-by: Joe Farro <[email protected]> * WIP - Very rough graph layout functionality Signed-off-by: Joe Farro <[email protected]> * Graph layout functionality is in solid shape Outstanding: * tests * calculate edges via several workers when there are many edges Signed-off-by: Joe Farro <[email protected]> * Fix minor misc issues with plexus layout Signed-off-by: Joe Farro <[email protected]> * Fix uberinternal yarn.lock issues Signed-off-by: Joe Farro <[email protected]> * Fix uberinternal yarn.lock issues Signed-off-by: Joe Farro <[email protected]> * Upgrade react to 16.3.2 Signed-off-by: Joe Farro <[email protected]> * Upgrade flow to 0.71.0 Signed-off-by: Joe Farro <[email protected]> * Very rough React graph component Signed-off-by: Joe Farro <[email protected]> * Enable custom props for graph elements Signed-off-by: Joe Farro <[email protected]> * The graph refreshes when it gets new data Signed-off-by: Joe Farro <[email protected]> * Make the jaeger-ui package private Signed-off-by: Joe Farro <[email protected]> * Misc cleanup for plexus package.json Signed-off-by: Joe Farro <[email protected]> * Fix issues with plexus package.json Signed-off-by: Joe Farro <[email protected]> * Don't output a CSS file for plexus Signed-off-by: Joe Farro <[email protected]> * Increase plexus node spacing for neato layouts Signed-off-by: Joe Farro <[email protected]> * Update plexus to 0.0.1-dev.2 Signed-off-by: Joe Farro <[email protected]> * Adding new issue and pull request template (jaegertracing#219) Signed-off-by: Prakriti <[email protected]> * plexus readme, remove `LayoutManager.dispose()` Signed-off-by: Joe Farro <[email protected]> * remove unecessary package Signed-off-by: Joe Farro <[email protected]> * Add more complex graphs to plexus demo Signed-off-by: Joe Farro <[email protected]> * Start the worker ID at 0 Signed-off-by: Joe Farro <[email protected]> Search page functionality for trace diffs Signed-off-by: Joe Farro <[email protected]> Stub for trace diff page, update redux state shape - Better redux state shape for trace diff - Refer to traces selected for comparison as trace diff cohort - Better redux state shape for fetched trace data - Before: One loading prop to keep track of all search and individual trace fetching - After: Loading is tracked separately for serach and for each individual trace being fetched - This is better all around and lays the ground-work for fetching multiple individual traces which will be necessary for trace diff page when hit directly via URL (will need to fetch two or more traces) Signed-off-by: Joe Farro <[email protected]> Optimization for trace mini-map rendering On a trace with ~16k spans reduced minimap rendering from ~250ms to ~20ms. For context, the initial render of the trace was around 1.22s. Signed-off-by: Joe Farro <[email protected]> Redux cleanup, hydrate diff cohort on search page - Merge TraceSummary into Trace - Redux action to fetch multiple traces by ID - Create a small-sized variation of the loading indicator - SearchTracePage loads trace data for traces in the diff cohort - Show loading indicator when trace data is being loaded - Show inline error when trace loading fails - Strip failed traces from diff cohort when linking to diff page - Diff page forces redux state based on URL params Signed-off-by: Joe Farro <[email protected]> Trace diff page header functionality - Fetch traces that need to be loaded - Keep the URL and redux state in sync after changes to A or B - Allow entering traces by ID - Allow selecting other traces in the cohort - Indicate when loading a trace failed Signed-off-by: Joe Farro <[email protected]> Convert trace to a DAG Apply three transforms to spans when converting to DAG: - Adopt peer.service for service name when a client span is missing the corresponding server span - Ignore client spans when the only child is a reasonable server span - Try to figure out a better operation name when operation === the http.method tag The conversion can be optimized; it takes about 230ms on a trace with ~35k spans. A trace with ~9k spans takes about 50ms. Signed-off-by: Joe Farro <[email protected]> Add useDotEdges and totalMemory options to plexus - Option in plexus to set the totalMemory viz.js uses - Sometimes viz.js runs out of memory on large graphs, especially when using the neato engine, increasing the total memeory can help - Option in plexus to use dot edges in plexus graphs - Useful for trees (neato and plexus are very similar) or large graphs (neato is too slow) Signed-off-by: Joe Farro <[email protected]> Initial trace diff graph - Ability to create diff of two TraceDag instances - Additional transforms to trim superfluous nodes - skipAnnotationSpans - skipClientSpans Signed-off-by: Joe Farro <[email protected]> Add zoom and pan to plexus - Zoom and pan - Add graph state as param to setOn* props - Enable scaling edge stroke based on zoom level Signed-off-by: Joe Farro <[email protected]> Add zoom to trace diff and increase color contrast - Add zoom pan to trace diff - On node hover show node @ 1x zoom (useful when zoomed out) - Higher contrast colors for trace diff DAG - Allowing scrolling for errors - Fix issue with node sizing during measurement phase Signed-off-by: Joe Farro <[email protected]> Add a minimap to plexus to help zoom and pan Also added to trace-diffs Signed-off-by: Joe Farro <[email protected]> Guard plexus zoom functionality with a flag Signed-off-by: Joe Farro <[email protected]> Fixes and optimizations to plexus and trace diffs - Bug fix: Each graph should have a unique edge arrow def IRI - Keep strokes from scaling into invisibility when zooming - Remove redundant root node - Apply zoom transforms to the node and edge containers - Scale the arrow def based on the current zoom (when zoom is enabled) by scaling the coords in the marker and path definitions - Add a convenience prop-factory that toggles a class, "is-small", based on the current zoom level - Use "is-small" to toggle the visibility of node text and edge stroke width based on the current zoom level - Change prop factories to be grouped by feature instead of context - In many cases the prop factory can be applied to multiple contexts, e.g. to both the edges container and an edge path - Make Node and EdgePath components PureComponents - Wrap rendering the nodes and edges in a PureComponent to prevent unnecessary renders - Remove DirectedGraphState from the edge and node factory prop functions to prevent rendering with every transform change Signed-off-by: Joe Farro <[email protected]> Add additional layout options to plexus Signed-off-by: Joe Farro <[email protected]> Lighten trace diff color scheme Signed-off-by: Joe Farro <[email protected]> Use green instead of blue in trace diff coloring Green is more commonly used to show additions Signed-off-by: Joe Farro <[email protected]> Add "Compare" to the top nav and other small fixes Signed-off-by: Joe Farro <[email protected]> Adding new issue and pull request template (jaegertracing#219) Signed-off-by: Prakriti <[email protected]> Integrate Google Analytics into Search Page (jaegertracing#220) * Integrate GA into search page Signed-off-by: Davit Yeghshatyan <[email protected]> * Review changes Signed-off-by: Davit Yeghshatyan <[email protected]> * Remove tracking of actual values Signed-off-by: Davit Yeghshatyan <[email protected]> Timeline Expand and Collapse Features (jaegertracing#221) * Add expansion and collapsing features Signed-off-by: Davit Yeghshatyan <[email protected]> * Use Icon component Signed-off-by: Davit Yeghshatyan <[email protected]> * Use spans upstream Signed-off-by: Davit Yeghshatyan <[email protected]> * Improve css Signed-off-by: Davit Yeghshatyan <[email protected]> * Rotate collapse buttons Signed-off-by: Davit Yeghshatyan <[email protected]> * Remove debug logging Signed-off-by: Davit Yeghshatyan <[email protected]> * Remove spans from TimelineHeaderRow Signed-off-by: Davit Yeghshatyan <[email protected]> * Add unit test for TimelineCollapser Signed-off-by: Davit Yeghshatyan <[email protected]> * Use popover Signed-off-by: Davit Yeghshatyan <[email protected]> * Add TimelineCollapser test Signed-off-by: Davit Yeghshatyan <[email protected]> * Revert "Use popover" This reverts commit 6152402 Signed-off-by: Davit Yeghshatyan <[email protected]> * Add tests for duck.js Signed-off-by: Davit Yeghshatyan <[email protected]> * Add more tests for duck.js Signed-off-by: Davit Yeghshatyan <[email protected]> * Add more tests for index.js Signed-off-by: Davit Yeghshatyan <[email protected]> * Add keyboard shortcuts Signed-off-by: Davit Yeghshatyan <[email protected]> * Update changelog Signed-off-by: Davit Yeghshatyan <[email protected]> * Make review changes Signed-off-by: Davit Yeghshatyan <[email protected]> Squashed commits from develop-directed-graph (jaegertracing#224) Signed-off-by: Joe Farro <[email protected]> Lazily initialize the first worker in plexus Signed-off-by: Joe Farro <[email protected]> Fix issue with trace diff URL from auth redirects The trace diff url was of the form: /trace/<trace-a-id>:diff?b=<trace-b-id> But, during OneLogin / SAML auth redirects it would get URL encoded and then not URL decoded resulting in it being interpreted as a trace ID. Move to the following form with three literal periods between the IDs: /trace/<trace-a-id>...<trace-b-id> Other misc fixes and tweaks: - Fix an issue where selecting a cohort of traces and then clicking the "Compare" button in the top nav cleared the cohort - Fix an issue where removing a trace from the cohort on the search page would not clear the trace from A or B, effectively preventing traces set as A or B from ever being removed - Clean up route definitions Signed-off-by: Joe Farro <[email protected]> Fix trace detail tracking for revised redux shape Signed-off-by: Joe Farro <[email protected]> * Typo Signed-off-by: Joe Farro <[email protected]> * Fix jaegertracing#232 Split leaf from parent nodes in the tree Signed-off-by: Joe Farro <[email protected]> * plexus - Fix chart style issues and bump version Also tweak the demo a bit. Signed-off-by: Joe Farro <[email protected]> * Fix yarn workspace based install Signed-off-by: Joe Farro <[email protected]> * In CI, fail if an update to yarn.lock is needed Signed-off-by: Joe Farro <[email protected]> * Misc cleanup Signed-off-by: Joe Farro <[email protected]> * Use stable yarn in CI Signed-off-by: Joe Farro <[email protected]> * Use yarn in package.json scripts Signed-off-by: Joe Farro <[email protected]> * Use newly downloaded yarn in CI Signed-off-by: Joe Farro <[email protected]> Signed-off-by: vvvprabhakar <[email protected]>

tiffon added 21 commits April 19, 2018 04:39

Prep the repo for separately developed components

c9b2a3d

Signed-off-by: Joe Farro <[email protected]>

WIP - Very rough graph layout functionality

910f614

Signed-off-by: Joe Farro <[email protected]>

Graph layout functionality is in solid shape

fbc521a

Outstanding: * tests * calculate edges via several workers when there are many edges Signed-off-by: Joe Farro <[email protected]>

Merge branch 'master' into directed-graph

a124623

Fix minor misc issues with plexus layout

a67f5a9

Signed-off-by: Joe Farro <[email protected]>

Merge branch 'master' into use-lerna

28fdf8b

Fix uberinternal yarn.lock issues

d3279d5

Signed-off-by: Joe Farro <[email protected]>

Fix uberinternal yarn.lock issues

2b5ba78

Signed-off-by: Joe Farro <[email protected]>

Upgrade react to 16.3.2

6da2283

Signed-off-by: Joe Farro <[email protected]>

Merge branch 'use-lerna' into directed-graph

ec59e7f

Signed-off-by: Joe Farro <[email protected]>

Upgrade flow to 0.71.0

c92a8b4

Signed-off-by: Joe Farro <[email protected]>

Very rough React graph component

3fbea78

Signed-off-by: Joe Farro <[email protected]>

Enable custom props for graph elements

b59540f

Signed-off-by: Joe Farro <[email protected]>

The graph refreshes when it gets new data

b39903d

Signed-off-by: Joe Farro <[email protected]>

Make the jaeger-ui package private

f046b3c

Signed-off-by: Joe Farro <[email protected]>

Misc cleanup for plexus package.json

61d70dd

Signed-off-by: Joe Farro <[email protected]>

Fix issues with plexus package.json

3558e70

Signed-off-by: Joe Farro <[email protected]>

Don't output a CSS file for plexus

86038f9

Signed-off-by: Joe Farro <[email protected]>

Increase plexus node spacing for neato layouts

d7b1ec0

Signed-off-by: Joe Farro <[email protected]>

Update plexus to 0.0.1-dev.2

b1fc63b

Signed-off-by: Joe Farro <[email protected]>

Merge branch 'master' into directed-graph-component

83c1406

Signed-off-by: Joe Farro <[email protected]>

tiffon requested review from yurishkuro and saminzadeh May 11, 2018 06:21

ghost assigned tiffon May 11, 2018

ghost added the review label May 11, 2018

simonrobb reviewed May 16, 2018

View reviewed changes

tiffon commented May 17, 2018

View reviewed changes

PikBot and others added 2 commits June 15, 2018 22:17

Adding new issue and pull request template (#219)

d251d6b

Signed-off-by: Prakriti <[email protected]>

plexus readme, remove LayoutManager.dispose()

ddf250c

Signed-off-by: Joe Farro <[email protected]>

Merge branch 'master' into directed-graph-component

d1f3610

tiffon added 2 commits June 24, 2018 03:16

remove unecessary package

4c6c121

Signed-off-by: Joe Farro <[email protected]>

Add more complex graphs to plexus demo

d4118f3

Signed-off-by: Joe Farro <[email protected]>

simonrobb suggested changes Jun 25, 2018

View reviewed changes

Start the worker ID at 0

60ef268

Signed-off-by: Joe Farro <[email protected]>

simonrobb approved these changes Jun 25, 2018

View reviewed changes

tiffon merged commit 9a1eb6a into develop-directed-graph Jun 25, 2018

ghost removed the review label Jun 25, 2018

tiffon mentioned this pull request Jun 28, 2018

[Blocked] Directed graph React component #222

Closed

tiffon mentioned this pull request Jul 9, 2018

Directed graph React component #224

Merged

yurishkuro deleted the directed-graph-component branch January 29, 2020 15:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Directed graph layout and presentation #212

Directed graph layout and presentation #212

tiffon commented May 11, 2018

codecov bot commented May 11, 2018 •

edited

Loading

simonrobb left a comment

simonrobb May 16, 2018

tiffon May 17, 2018

simonrobb May 16, 2018

tiffon May 17, 2018

simonrobb Jun 25, 2018

simonrobb May 16, 2018

tiffon May 17, 2018

simonrobb Jun 25, 2018

simonrobb May 16, 2018

tiffon May 17, 2018

tiffon left a comment

tiffon May 17, 2018

tiffon May 17, 2018

tiffon May 17, 2018

tiffon May 17, 2018

tiffon commented Jun 24, 2018

simonrobb Jun 25, 2018

simonrobb Jun 25, 2018

simonrobb left a comment

Directed graph layout and presentation #212

Directed graph layout and presentation #212

Conversation

tiffon commented May 11, 2018

High level

"plexus"

Component

codecov bot commented May 11, 2018 • edited Loading

Codecov Report

simonrobb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tiffon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tiffon commented Jun 24, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simonrobb left a comment

Choose a reason for hiding this comment

codecov bot commented May 11, 2018 •

edited

Loading