diff options
author | Kristóf Marussy <marussy@mit.bme.hu> | 2023-09-14 19:29:36 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-09-14 19:29:36 +0200 |
commit | 98ed3b6db5f4e51961a161050cc31c66015116e8 (patch) | |
tree | 8bfd6d9bc8d6ed23b9eb0f889dd40b6c24fe8f92 /subprojects/frontend/src/graph/GraphTheme.tsx | |
parent | Merge pull request #38 from nagilooh/design-space-exploration (diff) | |
parent | Merge remote-tracking branch 'upstream/main' into partial-interpretation (diff) | |
download | refinery-98ed3b6db5f4e51961a161050cc31c66015116e8.tar.gz refinery-98ed3b6db5f4e51961a161050cc31c66015116e8.tar.zst refinery-98ed3b6db5f4e51961a161050cc31c66015116e8.zip |
Merge pull request #39 from kris7t/partial-interpretation
Implement partial interpretation based model generation
Diffstat (limited to 'subprojects/frontend/src/graph/GraphTheme.tsx')
-rw-r--r-- | subprojects/frontend/src/graph/GraphTheme.tsx | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx new file mode 100644 index 00000000..14d58b96 --- /dev/null +++ b/subprojects/frontend/src/graph/GraphTheme.tsx | |||
@@ -0,0 +1,111 @@ | |||
1 | /* | ||
2 | * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/> | ||
3 | * | ||
4 | * SPDX-License-Identifier: EPL-2.0 | ||
5 | */ | ||
6 | |||
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'; | ||
11 | |||
12 | import svgURL from '../utils/svgURL'; | ||
13 | |||
14 | function createEdgeColor( | ||
15 | suffix: string, | ||
16 | stroke: string, | ||
17 | fill?: string, | ||
18 | ): CSSObject { | ||
19 | return { | ||
20 | [`.edge-${suffix}`]: { | ||
21 | '& text': { | ||
22 | fill: stroke, | ||
23 | }, | ||
24 | '& [stroke="black"]': { | ||
25 | stroke, | ||
26 | }, | ||
27 | '& [fill="black"]': { | ||
28 | fill: fill ?? stroke, | ||
29 | }, | ||
30 | }, | ||
31 | }; | ||
32 | } | ||
33 | |||
34 | export default styled('div', { | ||
35 | name: 'GraphTheme', | ||
36 | })(({ theme }) => ({ | ||
37 | '& svg': { | ||
38 | userSelect: 'none', | ||
39 | '.node': { | ||
40 | '& text': { | ||
41 | fontFamily: theme.typography.fontFamily, | ||
42 | fill: theme.palette.text.primary, | ||
43 | }, | ||
44 | '& [stroke="black"]': { | ||
45 | stroke: theme.palette.text.primary, | ||
46 | }, | ||
47 | '& [fill="green"]': { | ||
48 | fill: | ||
49 | theme.palette.mode === 'dark' | ||
50 | ? theme.palette.primary.dark | ||
51 | : theme.palette.primary.light, | ||
52 | }, | ||
53 | '& [fill="white"]': { | ||
54 | fill: theme.palette.background.default, | ||
55 | }, | ||
56 | }, | ||
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 | '.edge': { | ||
72 | '& text': { | ||
73 | fontFamily: theme.typography.fontFamily, | ||
74 | fill: theme.palette.text.primary, | ||
75 | }, | ||
76 | '& [stroke="black"]': { | ||
77 | stroke: theme.palette.text.primary, | ||
78 | }, | ||
79 | '& [fill="black"]': { | ||
80 | fill: theme.palette.text.primary, | ||
81 | }, | ||
82 | }, | ||
83 | ...createEdgeColor('UNKNOWN', theme.palette.text.secondary, 'none'), | ||
84 | ...createEdgeColor('ERROR', theme.palette.error.main), | ||
85 | '.icon': { | ||
86 | maskSize: '12px 12px', | ||
87 | maskPosition: '50% 50%', | ||
88 | maskRepeat: 'no-repeat', | ||
89 | width: '100%', | ||
90 | height: '100%', | ||
91 | }, | ||
92 | '.icon-TRUE': { | ||
93 | maskImage: svgURL(labelSVG), | ||
94 | background: theme.palette.text.primary, | ||
95 | }, | ||
96 | '.icon-UNKNOWN': { | ||
97 | maskImage: svgURL(labelOutlinedSVG), | ||
98 | background: theme.palette.text.secondary, | ||
99 | }, | ||
100 | '.icon-ERROR': { | ||
101 | maskImage: svgURL(cancelSVG), | ||
102 | background: theme.palette.error.main, | ||
103 | }, | ||
104 | 'text.label-UNKNOWN': { | ||
105 | fill: theme.palette.text.secondary, | ||
106 | }, | ||
107 | 'text.label-ERROR': { | ||
108 | fill: theme.palette.error.main, | ||
109 | }, | ||
110 | }, | ||
111 | })); | ||