diff options
Diffstat (limited to 'subprojects/frontend/src/graph/GraphTheme.tsx')
-rw-r--r-- | subprojects/frontend/src/graph/GraphTheme.tsx | 28 |
1 files changed, 25 insertions, 3 deletions
diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx index 14d58b96..7334f559 100644 --- a/subprojects/frontend/src/graph/GraphTheme.tsx +++ b/subprojects/frontend/src/graph/GraphTheme.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | /* | 1 | /* |
2 | * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/> | 2 | * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/> |
3 | * | 3 | * |
4 | * SPDX-License-Identifier: EPL-2.0 | 4 | * SPDX-License-Identifier: EPL-2.0 |
5 | */ | 5 | */ |
@@ -7,7 +7,13 @@ | |||
7 | import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw'; | 7 | import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw'; |
8 | import labelSVG from '@material-icons/svg/svg/label/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'; | 9 | import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw'; |
10 | import { alpha, styled, type CSSObject } from '@mui/material/styles'; | 10 | import { |
11 | alpha, | ||
12 | styled, | ||
13 | type CSSObject, | ||
14 | type Theme, | ||
15 | } from '@mui/material/styles'; | ||
16 | import { range } from 'lodash-es'; | ||
11 | 17 | ||
12 | import svgURL from '../utils/svgURL'; | 18 | import svgURL from '../utils/svgURL'; |
13 | 19 | ||
@@ -31,9 +37,24 @@ function createEdgeColor( | |||
31 | }; | 37 | }; |
32 | } | 38 | } |
33 | 39 | ||
40 | function createTypeHashStyles(theme: Theme, colorNodes: boolean): CSSObject { | ||
41 | if (!colorNodes) { | ||
42 | return {}; | ||
43 | } | ||
44 | const result: CSSObject = {}; | ||
45 | range(theme.palette.highlight.typeHash.length).forEach((i) => { | ||
46 | result[`.node-typeHash-${i}`] = { | ||
47 | '& [fill="green"]': { | ||
48 | fill: theme.palette.highlight.typeHash[i]?.box, | ||
49 | }, | ||
50 | }; | ||
51 | }); | ||
52 | return result; | ||
53 | } | ||
54 | |||
34 | export default styled('div', { | 55 | export default styled('div', { |
35 | name: 'GraphTheme', | 56 | name: 'GraphTheme', |
36 | })(({ theme }) => ({ | 57 | })<{ colorNodes: boolean }>(({ theme, colorNodes }) => ({ |
37 | '& svg': { | 58 | '& svg': { |
38 | userSelect: 'none', | 59 | userSelect: 'none', |
39 | '.node': { | 60 | '.node': { |
@@ -68,6 +89,7 @@ export default styled('div', { | |||
68 | '.node-exists-UNKNOWN [stroke="black"]': { | 89 | '.node-exists-UNKNOWN [stroke="black"]': { |
69 | strokeDasharray: '5 2', | 90 | strokeDasharray: '5 2', |
70 | }, | 91 | }, |
92 | ...createTypeHashStyles(theme, colorNodes), | ||
71 | '.edge': { | 93 | '.edge': { |
72 | '& text': { | 94 | '& text': { |
73 | fontFamily: theme.typography.fontFamily, | 95 | fontFamily: theme.typography.fontFamily, |