Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DDG stacked - 3] MouseOver UX for DDG graphs #439

Merged
merged 7 commits into from
Sep 13, 2019

Conversation

tiffon
Copy link
Member

@tiffon tiffon commented Aug 11, 2019

Which problem is this PR solving?

In DDG graphs, it's not usually possible to discern which nodes share path membership.

Short description of the changes

Add a hover effect that highlights nodes and edges that share path membership with the node being hovered.

Changes in this PR: cde52bb ... 5cd94bd

Before mouse over:

Screen Shot 2019-08-11 at 6 18 12 AM

With mouse over:

Screen Shot 2019-08-11 at 6 18 10 AM

Before mouse over:

Screen Shot 2019-08-11 at 6 18 47 AM

With mouse over:

Screen Shot 2019-08-11 at 6 18 57 AM

@tiffon tiffon changed the title [DDG stacked - 2] MouseOver UX for DDG graphs [DDG stacked - 3] MouseOver UX for DDG graphs Aug 11, 2019
@codecov
Copy link

codecov bot commented Aug 11, 2019

Codecov Report

Merging #439 into master will decrease coverage by 1.25%.
The diff coverage is 43.51%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #439      +/-   ##
==========================================
- Coverage    90.3%   89.04%   -1.26%     
==========================================
  Files         180      183       +3     
  Lines        4145     4227      +82     
  Branches     1002     1020      +18     
==========================================
+ Hits         3743     3764      +21     
- Misses        357      417      +60     
- Partials       45       46       +1
Impacted Files Coverage Δ
packages/jaeger-ui/src/types/index.tsx 0% <ø> (ø) ⬆️
...onents/DeepDependencies/Graph/getNodeRenderers.tsx 7.14% <0%> (ø)
...mponents/DeepDependencies/Graph/DdgNodeContent.tsx 42.42% <0%> (ø) ⬆️
...s/jaeger-ui/src/model/ddg/GraphModel/getEdgeId.tsx 0% <0%> (ø)
...kages/jaeger-ui/src/model/ddg/getStateEntryKey.tsx 100% <100%> (ø)
packages/jaeger-ui/src/reducers/ddg.tsx 100% <100%> (ø)
packages/jaeger-ui/src/actions/ddg.tsx 100% <100%> (ø)
...c/model/ddg/GraphModel/getDerivedViewModifiers.tsx 18.91% <18.91%> (ø)
...components/DeepDependencies/Graph/getSetOnEdge.tsx 25% <25%> (ø)
...aeger-ui/src/components/DeepDependencies/index.tsx 76.31% <28.57%> (-15.36%) ⬇️
... and 8 more

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 e9645b2...0bc57bc. Read the comment docs.

Copy link
Collaborator

@everett980 everett980 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there are some opportunities for clean up / clarity / naming (the hardest programming challenge) but big-picture looks great.

packages/jaeger-ui/src/actions/ddg.tsx Show resolved Hide resolved

import { PathElem, EDdgDensity, TDdgDistanceToPathElems, TDdgModel, TDdgVertex } from './types';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this is inconsistent with the style guide wrt import order

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can style issues like this be caught with an eslint rule?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i don't believe linters examine the contents of imports as that could be expensive. I'll look into it as the paradigm of separating types from contents isn't rare but a quick look suggests that it's not supported.

packages/jaeger-ui/src/types/index.tsx Outdated Show resolved Hide resolved
Copy link
Collaborator

@everett980 everett980 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM now. Changes ended up being fairly minor (updated some names, styling consistency, and not-yet-linted stylistic patterns).

@everett980 everett980 merged commit baf61d0 into jaegertracing:master Sep 13, 2019
vvvprabhakar pushed a commit to vvvprabhakar/jaeger-ui that referenced this pull request Jul 5, 2021
[DDG stacked - 3] MouseOver UX for DDG graphs
Signed-off-by: vvvprabhakar <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants