[APM] Service Map - Separate overlapping edges by rotating nodes #60477

ogupte · 2020-03-18T07:13:54Z

Closes #59779. Adds rotation transform which does the top->bottom to left->right transformation + an extra 5 degrees which results in taxi edges separating when rendered.

formgeist · 2020-03-18T10:14:00Z

I like this a lot, it really helps to see the connections ongoing and outgoing. I wonder if the thickness of the highlighted taxi lines are too heavy, because it almost overlays all the others when you hover a single node. If the default stroke thickness is 1, can we perhaps have the highlighted thickness just 2? We will color it with the blue primary in your other PR, so I think it'll be clear enough with these two stylings.

smith

I like it. Code is approved, but have a look at @formgeist comment on the edge looks.

smith · 2020-03-18T14:43:22Z

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx

+  degreesRotated: number
+) {
+  const radiansPerDegree = Math.PI / 180;
+  const θ = radiansPerDegree * degreesRotated;


+1,000,000,000 points for using θs in variable names.

ogupte · 2020-03-18T15:24:24Z

I like this a lot, it really helps to see the connections ongoing and outgoing. I wonder if the thickness of the highlighted taxi lines are too heavy, because it almost overlays all the others when you hover a single node. If the default stroke thickness is 1, can we perhaps have the highlighted thickness just 2? We will color it with the blue primary in your other PR, so I think it'll be clear enough with these two stylings.

@formgeist Should there be any color/shade indication of hover as well as the thickness change?

formgeist · 2020-03-18T15:34:57Z

@formgeist Should there be any color/shade indication of hover as well as the thickness change?

I think you already implemented the different color on node hover, but I wanted to go something along the lines of this;

formgeist · 2020-03-20T09:34:00Z

The visual changes look good to me - I think the darker shade on edges on hover looks really good, much clearer than before.

formgeist · 2020-03-20T09:35:23Z

@ogupte Could you include a minor copy update in this PR? I realized that we don't pluralize Service map, so I would like to change the placeholder copy in the Kuerybar.

Change to: Search is not available for service map.

Thanks!

transformation + an extra 5 degrees which results in taxi edges separating when rendered.

edges are highlighted when node is selected/focused

kibanamachine · 2020-03-20T21:31:30Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 3fbefbd

History

💚 Build #34797 succeeded ac7c926
💚 Build #34089 succeeded d36b7ac

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

…stic#60477) * Adds rotation transform which does the top->bottom to left->right transformation + an extra 5 degrees which results in taxi edges separating when rendered. * PR feedback to reduce edge width on hover, and assure that connected edges are highlighted when node is selected/focused * update disabled kuery bar placeholder text for service map

kibanamachine · 2020-03-22T01:58:45Z

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

kibanamachine · 2020-03-23T02:08:44Z

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

* master: (39 commits) [APM]Create custom link from Trace summary (elastic#59648) [ML] Fixing app clean up (elastic#60853) [SIEM] Use ECS categorisation for Authentication widgets (elastic#60734) [NP] Remove kbnUrl usage in discover/dashboard/visualize (elastic#60016) Skip failing test [Uptime]Update fetch effect failed action handling (elastic#60742) [npm] upgrade elastic/maki (elastic#60829) [Uptime] Add Settings Page (elastic#53550) [APM] service maps: avoid unnecesary `useDeepObjectIdentity` (elastic#60836) [Index management] Re-enable index template tests (elastic#60780) Fixed UI/UX issues: alerts delete confirmation, combobox behaviors (elastic#60703) [SIEM] Fix patching of ML Rules (elastic#60830) [APM] Service Map - Separate overlapping edges by rotating nodes (elastic#60477) [Alerting] fix flaky test for index threshold grouping (elastic#60792) [SIEM][Detection Engine] Adds test scripts for machine learning feature Flatten child api response for resolver (elastic#60810) Change "url" to "urls" in APM agent instructions (elastic#60790) [DOCS] Updates API requests and examples (elastic#60695) [SIEM] [Cases] Create case from timeline (elastic#60711) [Lens] Resetting a layer generates new suggestions (elastic#60674) ...

) (#60843) * Adds rotation transform which does the top->bottom to left->right transformation + an extra 5 degrees which results in taxi edges separating when rendered. * PR feedback to reduce edge width on hover, and assure that connected edges are highlighted when node is selected/focused * update disabled kuery bar placeholder text for service map Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

ogupte added release_note:skip Skip the PR/issue when compiling release notes v7.7.0 labels Mar 18, 2020

ogupte requested a review from a team as a code owner March 18, 2020 07:13

ogupte self-assigned this Mar 18, 2020

smith approved these changes Mar 18, 2020

View reviewed changes

ogupte force-pushed the apm-59779-rotate-service-map-separate-edges branch from d36b7ac to ac7c926 Compare March 20, 2020 08:06

ogupte added 3 commits March 20, 2020 12:46

Adds rotation transform which does the top->bottom to left->right

96c7665

transformation + an extra 5 degrees which results in taxi edges separating when rendered.

PR feedback to reduce edge width on hover, and assure that connected

789c0ca

edges are highlighted when node is selected/focused

update disabled kuery bar placeholder text for service map

3fbefbd

ogupte force-pushed the apm-59779-rotate-service-map-separate-edges branch from ac7c926 to 3fbefbd Compare March 20, 2020 19:46

ogupte merged commit 9de2d81 into elastic:master Mar 21, 2020

ogupte mentioned this pull request Mar 21, 2020

[7.x] [APM] Service Map - Separate overlapping edges by rotating nodes (#60477) #60843

Merged

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 22, 2020

kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[APM] Service Map - Separate overlapping edges by rotating nodes #60477

[APM] Service Map - Separate overlapping edges by rotating nodes #60477

ogupte commented Mar 18, 2020 •

edited

formgeist commented Mar 18, 2020

smith left a comment

smith Mar 18, 2020

ogupte commented Mar 18, 2020 •

edited

formgeist commented Mar 18, 2020

formgeist commented Mar 20, 2020

formgeist commented Mar 20, 2020

kibanamachine commented Mar 20, 2020

kibanamachine commented Mar 22, 2020

kibanamachine commented Mar 23, 2020

[APM] Service Map - Separate overlapping edges by rotating nodes #60477

[APM] Service Map - Separate overlapping edges by rotating nodes #60477

Conversation

ogupte commented Mar 18, 2020 • edited

formgeist commented Mar 18, 2020

smith left a comment

Choose a reason for hiding this comment

smith Mar 18, 2020

Choose a reason for hiding this comment

ogupte commented Mar 18, 2020 • edited

formgeist commented Mar 18, 2020

formgeist commented Mar 20, 2020

formgeist commented Mar 20, 2020

kibanamachine commented Mar 20, 2020

💚 Build Succeeded

History

kibanamachine commented Mar 22, 2020

kibanamachine commented Mar 23, 2020

ogupte commented Mar 18, 2020 •

edited

ogupte commented Mar 18, 2020 •

edited