Service map updates #2230

TackAdam · 2024-10-25T17:41:24Z

Description

Update the service table functionality

Adjust the focus table to have a popover that list all the options and is searchable.
Make the focus on selection enlarge the node following the filter behavior (also clear when reset)
Add reset button to the filter that recenters the tree and clears focus
Adjust zoomSpeed: 0.5
Set max and min zoom using moveTo function.
If max zoom is exceeded recenter the page so the tree does not get lost.
Loading state while rendering
Darker borders / thicker on each node
No movement after rendering
Focus now filters to only display connected nodes
Consistent diagram using seed for physics generation
Bug fixes for handling switching between custom source and data prepper as well as flyout opening.

Filter Focus:

Screen.Recording.2024-11-08.at.11.52.59.AM.mov

Zoom constraints:

Screen.Recording.2024-11-08.at.11.53.34.AM.mov

Dynamic filter:

Testing with 300 nodes:

Testing Dense Nodes

Service flyout:

Issues Resolved

Check List

New functionality includes testing.
- All tests pass, including unit test, integration test and doctest
New functionality has been documented.
- New functionality has javadoc added
- New functionality has user manual doc added
Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
For more information on following Developer Certificate of Origin and signing off your commits, please check here.

Signed-off-by: Adam Tackett <[email protected]>

public/components/trace_analytics/components/common/plots/service_map.tsx

paulstn · 2024-10-29T18:23:28Z

public/components/trace_analytics/components/common/plots/service_map.tsx

+
+      // Enlarge the focused node and reset others
+      const updatedNodes = items.graph.nodes.map((node) =>
+        node.label === service ? { ...node, size: 30 } : { ...node, size: 15 }


just wondering, is there some global or environmental variable that can be used for the size here to get rid of the magic numbers?

public/components/trace_analytics/components/common/plots/service_map.tsx

Signed-off-by: Adam Tackett <[email protected]>

ps48 · 2024-11-11T22:43:49Z

Still looking at the code. Just a question in the service flyout when users focus on a node, does the flyout details, other red metrics graphs also change to show the details of this particular node?

Signed-off-by: Adam Tackett <[email protected]>

TackAdam · 2024-11-12T00:03:23Z

Still looking at the code. Just a question in the service flyout when users focus on a node, does the flyout details, other red metrics graphs also change to show the details of this particular node?

Adjusted to hide the focus while in the service fly-out. Ideally the user is utilizing the fly-out for a quick overview, and using the main page to investigate. Adjusted the functionality of the main search to allow user to quickly investigate deeper into connected nodes by clicking on them to filter (showcased in first video of description 'Filter Focus:').

mengweieric · 2024-11-12T19:15:21Z

public/components/trace_analytics/components/common/plots/service_map_node_details.tsx

@@ -18,7 +18,7 @@ import { ServiceNodeDetails } from '../../../../../../common/types/trace_analyti
 interface ServiceMapNodeDetailsProps {
  selectedNodeDetails: ServiceNodeDetails | null;
  setSelectedNodeDetails: React.Dispatch<React.SetStateAction<ServiceNodeDetails | null>>;
-  addServiceFilter: (selectedServiceName: string) => void;
+  addServiceFilter: (selectedServiceName: string | null) => void;


are we expecting to have a null passed in for addServiceFilter?

No, added in the null check to handle switching between custom and data prepper to clear selections and prevent existing bugs where the page would fail to render.

mengweieric · 2024-11-12T19:16:33Z

test/constants.ts

@@ -209,8 +209,11 @@ export const TEST_SERVICE_MAP_GRAPH = {
        label: 'order',
        size: 15,
        title: 'order\n\n Average duration: 90.1ms \n Error rate: 4.17% \n Request rate: 48',
-        borderWidth: 0,
-        color: 'rgba(158, 134, 192, 1)',
+        borderWidth: 3,


question: are these changes being signed off from UX/product?

Synched offline for sign off.

* adjusting service table and focus search Signed-off-by: Adam Tackett <[email protected]> * revert starting zoom to default behavior Signed-off-by: Adam Tackett <[email protected]> * add reset button, and enlarge focused node Signed-off-by: Adam Tackett <[email protected]> * adjust filter options, so only available are shown in flyout Signed-off-by: Adam Tackett <[email protected]> * handle empty items Signed-off-by: Adam Tackett <[email protected]> * loading state, borders, no movement, focus Signed-off-by: Adam Tackett <[email protected]> * refresh on filter cleared Signed-off-by: Adam Tackett <[email protected]> * update focus functionality to set filter, bug fixes Signed-off-by: Adam Tackett <[email protected]> * handle clearing focus Signed-off-by: Adam Tackett <[email protected]> * hide focus in the flyout Signed-off-by: Adam Tackett <[email protected]> --------- Signed-off-by: Adam Tackett <[email protected]> Signed-off-by: Adam Tackett <[email protected]> Co-authored-by: Adam Tackett <[email protected]> (cherry picked from commit fdebf79) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* adjusting service table and focus search * revert starting zoom to default behavior * add reset button, and enlarge focused node * adjust filter options, so only available are shown in flyout * handle empty items * loading state, borders, no movement, focus * refresh on filter cleared * update focus functionality to set filter, bug fixes * handle clearing focus * hide focus in the flyout --------- (cherry picked from commit fdebf79) Signed-off-by: Adam Tackett <[email protected]> Signed-off-by: Adam Tackett <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Adam Tackett <[email protected]>

Adam Tackett added 3 commits October 25, 2024 10:40

adjusting service table and focus search

8d9f5f5

Signed-off-by: Adam Tackett <[email protected]>

revert starting zoom to default behavior

1fbf350

Signed-off-by: Adam Tackett <[email protected]>

add reset button, and enlarge focused node

5367b50

Signed-off-by: Adam Tackett <[email protected]>

TackAdam marked this pull request as ready for review October 25, 2024 23:28

adjust filter options, so only available are shown in flyout

51df028

Signed-off-by: Adam Tackett <[email protected]>

TackAdam changed the title ~~[WIP] Service Table updates~~ Service Table updates Oct 26, 2024

TackAdam changed the title ~~Service Table updates~~ Service map updates Oct 26, 2024

TackAdam added enhancement New feature or request backport 2.x labels Oct 26, 2024

paulstn reviewed Oct 29, 2024

View reviewed changes

public/components/trace_analytics/components/common/plots/service_map.tsx Show resolved Hide resolved

paulstn reviewed Oct 29, 2024

View reviewed changes

public/components/trace_analytics/components/common/plots/service_map.tsx Show resolved Hide resolved

paulstn reviewed Oct 29, 2024

View reviewed changes

public/components/trace_analytics/components/common/plots/service_map.tsx Outdated Show resolved Hide resolved

paulstn reviewed Oct 29, 2024

View reviewed changes

public/components/trace_analytics/components/common/plots/service_map.tsx Show resolved Hide resolved

TackAdam and others added 2 commits October 29, 2024 14:54

Merge branch 'main' into serviceTable

30dd217

handle empty items

6b9ce9a

Signed-off-by: Adam Tackett <[email protected]>

ps48 added the mds-2.18.0 label Nov 1, 2024

TackAdam and others added 8 commits November 4, 2024 10:43

Merge branch 'main' into serviceTable

b4aea70

loading state, borders, no movement, focus

cbd00af

Signed-off-by: Adam Tackett <[email protected]>

Merge branch 'main' into serviceTable

0d20f7e

refresh on filter cleared

385c463

Signed-off-by: Adam Tackett <[email protected]>

Merge branch 'main' into serviceTable

36978f4

Merge branch 'main' into serviceTable

09a183d

Signed-off-by: Adam Tackett <[email protected]>

update focus functionality to set filter, bug fixes

7880492

Signed-off-by: Adam Tackett <[email protected]>

handle clearing focus

9cd464a

Signed-off-by: Adam Tackett <[email protected]>

hide focus in the flyout

4ad8348

Signed-off-by: Adam Tackett <[email protected]>

Merge branch 'main' into serviceTable

4db3f47

paulstn approved these changes Nov 12, 2024

View reviewed changes

mengweieric reviewed Nov 12, 2024

View reviewed changes

Merge branch 'main' into serviceTable

167a551

mengweieric approved these changes Nov 12, 2024

View reviewed changes

TackAdam merged commit fdebf79 into opensearch-project:main Nov 12, 2024
11 of 18 checks passed

opensearch-trigger-bot bot mentioned this pull request Nov 12, 2024

[Backport 2.x] Service map updates #2254

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Service map updates #2230

Service map updates #2230

TackAdam commented Oct 25, 2024 •

edited

Loading

paulstn Oct 29, 2024

ps48 commented Nov 11, 2024

TackAdam commented Nov 12, 2024

mengweieric Nov 12, 2024

TackAdam Nov 12, 2024

mengweieric Nov 12, 2024

TackAdam Nov 12, 2024

Service map updates #2230

Service map updates #2230

Conversation

TackAdam commented Oct 25, 2024 • edited Loading

Description

Issues Resolved

Check List

paulstn Oct 29, 2024

Choose a reason for hiding this comment

ps48 commented Nov 11, 2024

TackAdam commented Nov 12, 2024

mengweieric Nov 12, 2024

Choose a reason for hiding this comment

TackAdam Nov 12, 2024

Choose a reason for hiding this comment

mengweieric Nov 12, 2024

Choose a reason for hiding this comment

TackAdam Nov 12, 2024

Choose a reason for hiding this comment

TackAdam commented Oct 25, 2024 •

edited

Loading