diff options
author | 2023-08-24 00:06:37 +0200 | |
---|---|---|
committer | 2023-08-24 01:17:45 +0200 | |
commit | 2e2ebbf75b12784ac664d864865f01729b3eb8c4 (patch) | |
tree | 6002405f0759015c57d161775c94b9e0df138872 /subprojects/frontend/src/graph/GraphTheme.tsx | |
parent | refactor(web): move d3-zoom patch into repo (diff) | |
download | refinery-2e2ebbf75b12784ac664d864865f01729b3eb8c4.tar.gz refinery-2e2ebbf75b12784ac664d864865f01729b3eb8c4.tar.zst refinery-2e2ebbf75b12784ac664d864865f01729b3eb8c4.zip |
refactor(web): clean up graphviz visualization
Diffstat (limited to 'subprojects/frontend/src/graph/GraphTheme.tsx')
-rw-r--r-- | subprojects/frontend/src/graph/GraphTheme.tsx | 64 |
1 files changed, 64 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..41ba6ba5 --- /dev/null +++ b/subprojects/frontend/src/graph/GraphTheme.tsx | |||
@@ -0,0 +1,64 @@ | |||
1 | /* | ||
2 | * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/> | ||
3 | * | ||
4 | * SPDX-License-Identifier: EPL-2.0 | ||
5 | */ | ||
6 | |||
7 | import { styled, type CSSObject } from '@mui/material/styles'; | ||
8 | |||
9 | function createEdgeColor(suffix: string, color: string): CSSObject { | ||
10 | return { | ||
11 | [`& .edge-${suffix}`]: { | ||
12 | '& text': { | ||
13 | fill: color, | ||
14 | }, | ||
15 | '& [stroke="black"]': { | ||
16 | stroke: color, | ||
17 | }, | ||
18 | '& [fill="black"]': { | ||
19 | fill: color, | ||
20 | }, | ||
21 | }, | ||
22 | }; | ||
23 | } | ||
24 | |||
25 | export default styled('div', { | ||
26 | name: 'GraphTheme', | ||
27 | })(({ theme }) => ({ | ||
28 | '& svg': { | ||
29 | userSelect: 'none', | ||
30 | '& .node': { | ||
31 | '& text': { | ||
32 | fontFamily: theme.typography.fontFamily, | ||
33 | fill: theme.palette.text.primary, | ||
34 | }, | ||
35 | '& [stroke="black"]': { | ||
36 | stroke: theme.palette.text.primary, | ||
37 | }, | ||
38 | '& [fill="green"]': { | ||
39 | fill: | ||
40 | theme.palette.mode === 'dark' | ||
41 | ? theme.palette.primary.dark | ||
42 | : theme.palette.primary.light, | ||
43 | }, | ||
44 | '& [fill="white"]': { | ||
45 | fill: theme.palette.background.default, | ||
46 | stroke: theme.palette.background.default, | ||
47 | }, | ||
48 | }, | ||
49 | '& .edge': { | ||
50 | '& text': { | ||
51 | fontFamily: theme.typography.fontFamily, | ||
52 | fill: theme.palette.text.primary, | ||
53 | }, | ||
54 | '& [stroke="black"]': { | ||
55 | stroke: theme.palette.text.primary, | ||
56 | }, | ||
57 | '& [fill="black"]': { | ||
58 | fill: theme.palette.text.primary, | ||
59 | }, | ||
60 | }, | ||
61 | ...createEdgeColor('UNKNOWN', theme.palette.text.secondary), | ||
62 | ...createEdgeColor('ERROR', theme.palette.error.main), | ||
63 | }, | ||
64 | })); | ||