feat: filter button for graph view #354
Conversation
Lasserich
requested review from
Hubert-Szczepanski-SAP and
andreaskienle
and removed request for
andreaskienle
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the graph visualization UI to use a popover-based filter menu instead of radio buttons, updates edge styling, and introduces semi-transparent node backgrounds based on border colors. The default color grouping is also changed from 'provider' to 'source'.
- Replaced the radio button panel with a popover filter button for color grouping selection
- Changed edge styling from arrow markers to solid strokes
- Introduced semi-transparent node backgrounds derived from border colors
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/components/Graphs/useGraph.ts | Removed MarkerType import, added semi-transparent node backgrounds, and replaced arrow markers with styled edges |
| src/components/Graphs/Graph.tsx | Replaced radio button panel with popover-based filter menu, changed default colorBy to 'source' |
| src/components/Graphs/Graph.module.css | Added styles for the new top-right legend container, filter icon, and popover button layout |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@andreaskienle I have fixed the dark mode now. Maybe you can have another look. :D |
There was a problem hiding this comment.
Heyo ✌️
A few remarks down below.
One other thought: Instead of having <Legend> and the filter button side by side in <Graph>, could also think about integrating the filter button directly with the legend. .legendContainer already comes with some styling, like border, shadow and so on. Maybe it makes sense to put them directly side-by-side there (in a single component) and re-use those styles. Or refactor a container component which can be used to render either the legend or the filter button. Just a thought.
|
@andreaskienle thanks for the review, I have addressed your concerns. Please have a look. 👍 |
andreaskienle
left a comment
andreaskienle
left a comment
There was a problem hiding this comment.
Much better now 👍🏻
I think we can remove the marked lines in the coding and then merge it
| "colorsProvider": "Provider", | ||
| "colorsProviderConfig": "Provider Config", | ||
| "colorizedTitle": "Group by: ", | ||
| "colorizedTitle": "Group by", |
There was a problem hiding this comment.
Needed?
| "colorizedTitle": "Group by", |
| overflow: hidden; | ||
| padding: 2px; | ||
| font-family: var(--sapFontFamily); | ||
| position: relative; |
There was a problem hiding this comment.
Needed?
| position: relative; |
Before:
After:
