Skip to content

Commit 002625a

Browse files
LasserichLasserich
committed
feat: review changes
1 parent 656f8a5 commit 002625a

File tree

4 files changed

+125
-129
lines changed

4 files changed

+125
-129
lines changed

‎src/components/Graphs/Graph.module.css‎

Lines changed: 2 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -13,47 +13,10 @@
1313
background-color: var(--sapTile_Background, #fff);
1414
}
1515

16-
.topLegendContainer {
17-
position: absolute;
18-
top: 1rem;
19-
right: 1rem;
20-
display: flex;
21-
align-items: center;
22-
23-
z-index: 2;
24-
}
25-
26-
.filterIcon {
27-
display: flex;
28-
align-items: center;
29-
cursor: pointer;
30-
padding: 4px;
31-
border-radius: 8px;
32-
transition: background-color 0.2s ease;
33-
background-color: var(--sapTile_Background, #fff);
34-
border: 1px solid var(--sapList_BorderColor, #ccc);
35-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
36-
margin-left: 0.5rem;
37-
}
38-
39-
.filterIcon:hover {
40-
background-color: var(--sapButton_Hover_Background, #f0f0f0);
41-
}
42-
43-
.graphHeader {
44-
padding: 0.5rem;
16+
.panelContent {
4517
display: flex;
18+
align-items: flex-start;
4619
gap: 1rem;
47-
align-items: center;
48-
color: var(--sapTextColor, #222);
49-
font-size: var(--sapFontSize);
50-
}
51-
52-
.graphToolbar {
53-
padding: 0.5rem;
54-
display: flex;
55-
gap: 1rem;
56-
align-items: center;
5720
}
5821

5922
.message {
@@ -69,24 +32,6 @@
6932
color: #c00;
7033
}
7134

72-
.colorizedTitle {
73-
font-weight: 500;
74-
color: var(--sapTextColor, #222);
75-
}
76-
77-
.fieldsetReset {
78-
border: 0;
79-
margin: 0;
80-
padding: 0;
81-
min-inline-size: 0;
82-
}
83-
84-
.popoverButtonContainer {
85-
display: flex;
86-
flex-direction: column;
87-
padding: 0.5rem;
88-
}
89-
9035
:global([data-theme='dark'] .react-flow__controls) {
9136
background-color: rgba(28, 28, 28, 0.9);
9237
border: 1px solid rgba(255, 255, 255, 0.15);

‎src/components/Graphs/Graph.tsx‎

Lines changed: 9 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useCallback, useMemo } from 'react';
2-
import { ReactFlow, Background, Controls, MarkerType, Node } from '@xyflow/react';
3-
import { Button, Popover } from '@ui5/webcomponents-react';
2+
import { ReactFlow, Background, Controls, MarkerType, Node, Panel } from '@xyflow/react';
3+
44
import type { NodeProps } from '@xyflow/react';
55
import styles from './Graph.module.css';
66
import '@xyflow/react/dist/style.css';
@@ -33,7 +33,6 @@ const Graph: React.FC = () => {
3333
const { openInAside } = useSplitter();
3434
const { isDarkTheme } = useTheme();
3535
const [colorBy, setColorBy] = useState<ColorBy>('source');
36-
const [filterPopoverOpen, setFilterPopoverOpen] = useState(false);
3736

3837
const handleYamlClick = useCallback(
3938
(item: ManagedResourceItem) => {
@@ -93,56 +92,14 @@ const Graph: React.FC = () => {
9392
>
9493
<Controls showInteractive={false} />
9594
<Background />
96-
</ReactFlow>
97-
98-
<div className={styles.topLegendContainer}>
99-
<Legend legendItems={legendItems} />
100-
<Popover
101-
opener="filter-button"
102-
open={filterPopoverOpen}
103-
placement="Bottom"
104-
onClose={() => setFilterPopoverOpen(false)}
105-
>
106-
<div className={styles.popoverButtonContainer}>
107-
<Button
108-
design={colorBy === 'source' ? 'Emphasized' : 'Default'}
109-
onClick={() => {
110-
setColorBy('source');
111-
setFilterPopoverOpen(false);
112-
}}
113-
>
114-
{t('Graphs.colorsProvider')}
115-
</Button>
116-
<Button
117-
design={colorBy === 'provider' ? 'Emphasized' : 'Default'}
118-
onClick={() => {
119-
setColorBy('provider');
120-
setFilterPopoverOpen(false);
121-
}}
122-
>
123-
{t('Graphs.colorsProviderConfig')}
124-
</Button>
125-
<Button
126-
design={colorBy === 'flux' ? 'Emphasized' : 'Default'}
127-
onClick={() => {
128-
setColorBy('flux');
129-
setFilterPopoverOpen(false);
130-
}}
131-
>
132-
{t('Graphs.colorsFlux')}
133-
</Button>
134-
</div>
135-
</Popover>
136-
<div className={styles.filterIcon}>
137-
<Button
138-
id="filter-button"
139-
design="Transparent"
140-
icon="filter"
141-
tooltip={t('Graphs.colorizedTitle')}
142-
onClick={() => setFilterPopoverOpen(!filterPopoverOpen)}
95+
<Panel position="top-right" className={styles.panelContent}>
96+
<Legend
97+
legendItems={legendItems}
98+
colorBy={colorBy}
99+
onColorByChange={setColorBy}
143100
/>
144-
</div>
145-
</div>
101+
</Panel>
102+
</ReactFlow>
146103
</div>
147104
</div>
148105
);

‎src/components/Graphs/Legend.module.css‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,36 @@
1+
.legendWrapper {
2+
display: flex;
3+
align-items: flex-start;
4+
gap: 1rem;
5+
}
6+
17
.legendContainer {
28
padding: 1rem;
3-
min-width: 220px;
4-
max-width: 300px;
5-
max-height: 280px;
9+
min-width: 150px;
10+
max-width: 250px;
11+
max-height: 120px;
612
border: 1px solid var(--sapList_BorderColor, #ccc);
713
border-radius: 8px;
814
background-color: var(--sapTile_Background, #fff);
9-
margin: 1rem;
1015
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
11-
overflow: auto;
12-
align-self: flex-start;
16+
overflow-y: auto;
1317
color: var(--sapTextColor, #222);
1418
font-size: var(--sapFontSize);
1519
}
1620

17-
.legendTitle {
18-
margin-bottom: 10px;
19-
color: var(--sapTitleColor, var(--sapTextColor, #222));
21+
.colorFilterContainer {
22+
padding: 1rem;
23+
border: 1px solid var(--sapList_BorderColor, #ccc);
24+
border-radius: 8px;
25+
background-color: var(--sapTile_Background, #fff);
26+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
27+
color: var(--sapTextColor, #222);
28+
font-size: var(--sapFontSize);
29+
display: flex;
30+
justify-content: center;
31+
align-items: center;
32+
height: 16px;
33+
width: 16px;
2034
}
2135

2236
.legendRow {
@@ -30,9 +44,29 @@
3044
}
3145

3246
.legendColorBox {
33-
width: 16px;
34-
height: 16px;
47+
width: 14px;
48+
height: 14px;
3549
margin-right: 8px;
3650
border-radius: 3px;
3751
border: 1px solid var(--sapList_BorderColor, #999);
52+
}
53+
54+
.popoverContent {
55+
padding: 0.5rem;
56+
min-width: 150px;
57+
}
58+
59+
.popoverHeader {
60+
margin: 0 0 0.5rem 0;
61+
padding: 0 0 0.5rem 0;
62+
border-bottom: 1px solid var(--sapList_BorderColor, #e0e0e0);
63+
font-size: var(--sapFontSize, 14px);
64+
font-weight: 600;
65+
color: var(--sapTextColor, #222);
66+
}
67+
68+
.popoverButtonContainer {
69+
display: flex;
70+
flex-direction: column;
71+
gap: 0.25rem;
3872
}

‎src/components/Graphs/Legend.tsx‎

Lines changed: 69 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,83 @@
1-
import React from 'react';
1+
import React, { useId, useState } from 'react';
2+
import { Button, Popover } from '@ui5/webcomponents-react';
3+
import { useTranslation } from 'react-i18next';
4+
import { ColorBy } from './types';
25
import styles from './Legend.module.css';
6+
37
export interface LegendItem {
48
name: string;
59
color: string;
610
}
711

812
interface LegendProps {
913
legendItems: LegendItem[];
14+
colorBy: ColorBy;
15+
onColorByChange: (colorBy: ColorBy) => void;
1016
}
1117

12-
export const Legend: React.FC<LegendProps> = ({ legendItems }) => {
18+
export const Legend: React.FC<LegendProps> = ({ legendItems, colorBy, onColorByChange }) => {
19+
const { t } = useTranslation();
20+
const [colorPopoverOpen, setColorPopoverOpen] = useState(false);
21+
const colorButtonId = useId();
22+
1323
return (
14-
<div className={styles.legendContainer}>
15-
{legendItems.map(({ name, color }) => (
16-
<div key={name} className={styles.legendRow}>
17-
<div className={styles.legendColorBox} style={{ backgroundColor: color }} />
18-
<span>{name}</span>
19-
</div>
20-
))}
24+
<div className={styles.legendWrapper}>
25+
<div className={styles.legendContainer}>
26+
{legendItems.map(({ name, color }) => (
27+
<div key={name} className={styles.legendRow}>
28+
<div className={styles.legendColorBox} style={{ backgroundColor: color }} />
29+
<span>{name}</span>
30+
</div>
31+
))}
32+
</div>
33+
<div className={styles.colorFilterContainer}>
34+
<Popover
35+
opener={colorButtonId}
36+
open={colorPopoverOpen}
37+
placement="Bottom"
38+
onClose={() => setColorPopoverOpen(false)}
39+
>
40+
<div className={styles.popoverContent}>
41+
<h4 className={styles.popoverHeader}>{t('Graphs.colorBy')}</h4>
42+
<div className={styles.popoverButtonContainer}>
43+
<Button
44+
design={colorBy === 'source' ? 'Emphasized' : 'Default'}
45+
onClick={() => {
46+
onColorByChange('source');
47+
setColorPopoverOpen(false);
48+
}}
49+
>
50+
{t('Graphs.colorsProvider')}
51+
</Button>
52+
<Button
53+
design={colorBy === 'provider' ? 'Emphasized' : 'Default'}
54+
onClick={() => {
55+
onColorByChange('provider');
56+
setColorPopoverOpen(false);
57+
}}
58+
>
59+
{t('Graphs.colorsProviderConfig')}
60+
</Button>
61+
<Button
62+
design={colorBy === 'flux' ? 'Emphasized' : 'Default'}
63+
onClick={() => {
64+
onColorByChange('flux');
65+
setColorPopoverOpen(false);
66+
}}
67+
>
68+
{t('Graphs.colorsFlux')}
69+
</Button>
70+
</div>
71+
</div>
72+
</Popover>
73+
<Button
74+
id={colorButtonId}
75+
design="Transparent"
76+
icon="palette"
77+
tooltip={t('Graphs.colorBy')}
78+
onClick={() => setColorPopoverOpen(!colorPopoverOpen)}
79+
/>
80+
</div>
2181
</div>
2282
);
2383
};

0 commit comments

Comments
 (0)