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.
| z-index: 2; | ||
| } | ||
|
|
||
| .filterIcon { |
There was a problem hiding this comment.
That's only for the container? What do you thing about giving it more precise name?
| .filterIcon { | |
| .filterIconContainer { |
| .filterIcon { | ||
| display: flex; | ||
| align-items: center; | ||
| cursor: pointer; |
There was a problem hiding this comment.
needed? It's not interactive
| cursor: pointer; |
| .filterIcon:hover { | ||
| background-color: var(--sapButton_Hover_Background, #f0f0f0); |
There was a problem hiding this comment.
Needed? It's not interactive
| .filterIcon:hover { | |
| background-color: var(--sapButton_Hover_Background, #f0f0f0); |
| cursor: pointer; | ||
| padding: 4px; | ||
| border-radius: 8px; | ||
| transition: background-color 0.2s ease; |
There was a problem hiding this comment.
Needed? It's not interactive
| transition: background-color 0.2s ease; |
| </Popover> | ||
| <div className={styles.filterIcon}> | ||
| <Button | ||
| id="filter-button" |
There was a problem hiding this comment.
Can we use useId() to generate an ID? IDs have to be unique on the entire HTML page. Adding the component twice would not work with a fixed ID. useId() will generate a unique ID.
| </Panel> | ||
| </ReactFlow> | ||
|
|
||
| <div className={styles.topLegendContainer}> |
There was a problem hiding this comment.
Any reason for replacing the Panel of ReactFlow with a custom div? The Panel already gives us many of the things for free, like positioning and floating on top.
Can't we just position the panel to top-right and put everything there?
| id="filter-button" | ||
| design="Transparent" | ||
| icon="filter" | ||
| tooltip={t('Graphs.colorizedTitle')} |
There was a problem hiding this comment.
There’s a colon in the tooltip which we should remove.
Could also think of moving the text as a header of the popover. Another idea would be to call it something like "color by" because we're not really filtering or grouping (in a sense of rearranging content), are we? There are also other icons like sap-icon://legend or sap-icon://palette – just as an idea. Leaving it up to you ✌️
| const colorKey: string = | ||
| colorBy === 'source' ? n.providerType : colorBy === 'flux' ? (n.fluxName ?? 'default') : n.providerConfigName; | ||
| const borderColor = colorMap[colorKey] || '#ccc'; | ||
| // 8% opacity for background |
There was a problem hiding this comment.
| // 8% opacity for background | |
| // some opacity for background |
It's 8/255, so about 3% opacity.
Before:
After:
