diff options
Diffstat (limited to 'subprojects/frontend/src/graph/GraphTheme.tsx')
-rw-r--r-- | subprojects/frontend/src/graph/GraphTheme.tsx | 76 |
1 files changed, 66 insertions, 10 deletions
diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx index 41ba6ba5..989bd0c2 100644 --- a/subprojects/frontend/src/graph/GraphTheme.tsx +++ b/subprojects/frontend/src/graph/GraphTheme.tsx | |||
@@ -4,19 +4,28 @@ | |||
4 | * SPDX-License-Identifier: EPL-2.0 | 4 | * SPDX-License-Identifier: EPL-2.0 |
5 | */ | 5 | */ |
6 | 6 | ||
7 | import { styled, type CSSObject } from '@mui/material/styles'; | 7 | import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw'; |
8 | import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw'; | ||
9 | import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw'; | ||
10 | import { alpha, styled, type CSSObject } from '@mui/material/styles'; | ||
8 | 11 | ||
9 | function createEdgeColor(suffix: string, color: string): CSSObject { | 12 | import svgURL from '../utils/svgURL'; |
13 | |||
14 | function createEdgeColor( | ||
15 | suffix: string, | ||
16 | stroke: string, | ||
17 | fill?: string, | ||
18 | ): CSSObject { | ||
10 | return { | 19 | return { |
11 | [`& .edge-${suffix}`]: { | 20 | [`.edge-${suffix}`]: { |
12 | '& text': { | 21 | '& text': { |
13 | fill: color, | 22 | fill: stroke, |
14 | }, | 23 | }, |
15 | '& [stroke="black"]': { | 24 | '& [stroke="black"]': { |
16 | stroke: color, | 25 | stroke, |
17 | }, | 26 | }, |
18 | '& [fill="black"]': { | 27 | '& [fill="black"]': { |
19 | fill: color, | 28 | fill: fill ?? stroke, |
20 | }, | 29 | }, |
21 | }, | 30 | }, |
22 | }; | 31 | }; |
@@ -27,7 +36,7 @@ export default styled('div', { | |||
27 | })(({ theme }) => ({ | 36 | })(({ theme }) => ({ |
28 | '& svg': { | 37 | '& svg': { |
29 | userSelect: 'none', | 38 | userSelect: 'none', |
30 | '& .node': { | 39 | '.node': { |
31 | '& text': { | 40 | '& text': { |
32 | fontFamily: theme.typography.fontFamily, | 41 | fontFamily: theme.typography.fontFamily, |
33 | fill: theme.palette.text.primary, | 42 | fill: theme.palette.text.primary, |
@@ -43,10 +52,32 @@ export default styled('div', { | |||
43 | }, | 52 | }, |
44 | '& [fill="white"]': { | 53 | '& [fill="white"]': { |
45 | fill: theme.palette.background.default, | 54 | fill: theme.palette.background.default, |
46 | stroke: theme.palette.background.default, | ||
47 | }, | 55 | }, |
48 | }, | 56 | }, |
49 | '& .edge': { | 57 | '.node-INDIVIDUAL': { |
58 | '& [stroke="black"]': { | ||
59 | strokeWidth: 2, | ||
60 | }, | ||
61 | }, | ||
62 | '.node-shadow[fill="white"]': { | ||
63 | fill: alpha( | ||
64 | theme.palette.text.primary, | ||
65 | theme.palette.mode === 'dark' ? 0.32 : 0.24, | ||
66 | ), | ||
67 | }, | ||
68 | '.node-exists-UNKNOWN [stroke="black"]': { | ||
69 | strokeDasharray: '5 2', | ||
70 | }, | ||
71 | '.node-exists-FALSE': { | ||
72 | '& [fill="green"]': { | ||
73 | fill: theme.palette.background.default, | ||
74 | }, | ||
75 | '& [stroke="black"]': { | ||
76 | strokeDasharray: '1 3', | ||
77 | stroke: theme.palette.text.secondary, | ||
78 | }, | ||
79 | }, | ||
80 | '.edge': { | ||
50 | '& text': { | 81 | '& text': { |
51 | fontFamily: theme.typography.fontFamily, | 82 | fontFamily: theme.typography.fontFamily, |
52 | fill: theme.palette.text.primary, | 83 | fill: theme.palette.text.primary, |
@@ -58,7 +89,32 @@ export default styled('div', { | |||
58 | fill: theme.palette.text.primary, | 89 | fill: theme.palette.text.primary, |
59 | }, | 90 | }, |
60 | }, | 91 | }, |
61 | ...createEdgeColor('UNKNOWN', theme.palette.text.secondary), | 92 | ...createEdgeColor('UNKNOWN', theme.palette.text.secondary, 'none'), |
62 | ...createEdgeColor('ERROR', theme.palette.error.main), | 93 | ...createEdgeColor('ERROR', theme.palette.error.main), |
94 | '.icon': { | ||
95 | maskSize: '12px 12px', | ||
96 | maskPosition: '50% 50%', | ||
97 | maskRepeat: 'no-repeat', | ||
98 | width: '100%', | ||
99 | height: '100%', | ||
100 | }, | ||
101 | '.icon-TRUE': { | ||
102 | maskImage: svgURL(labelSVG), | ||
103 | background: theme.palette.text.primary, | ||
104 | }, | ||
105 | '.icon-UNKNOWN': { | ||
106 | maskImage: svgURL(labelOutlinedSVG), | ||
107 | background: theme.palette.text.secondary, | ||
108 | }, | ||
109 | '.icon-ERROR': { | ||
110 | maskImage: svgURL(cancelSVG), | ||
111 | background: theme.palette.error.main, | ||
112 | }, | ||
113 | 'text.label-UNKNOWN': { | ||
114 | fill: theme.palette.text.secondary, | ||
115 | }, | ||
116 | 'text.label-ERROR': { | ||
117 | fill: theme.palette.error.main, | ||
118 | }, | ||
63 | }, | 119 | }, |
64 | })); | 120 | })); |