diff options
author | Kristóf Marussy <kristof@marussy.com> | 2024-01-03 02:13:15 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2024-01-03 13:33:55 +0100 |
commit | 2fe65e414ff3194cdddde01bea6818bbab5290e9 (patch) | |
tree | a597343718059a2ee8727a296e817f997876f248 /subprojects/frontend/src/graph | |
parent | refactor: matching node names in CLI and web (diff) | |
download | refinery-2fe65e414ff3194cdddde01bea6818bbab5290e9.tar.gz refinery-2fe65e414ff3194cdddde01bea6818bbab5290e9.tar.zst refinery-2fe65e414ff3194cdddde01bea6818bbab5290e9.zip |
feat(web): color identifiers and nodes
We use a palette-based coloring strategy, where each class and enum gets a color
from
Diffstat (limited to 'subprojects/frontend/src/graph')
-rw-r--r-- | subprojects/frontend/src/graph/GraphTheme.tsx | 23 | ||||
-rw-r--r-- | subprojects/frontend/src/graph/dotSource.ts | 5 |
2 files changed, 25 insertions, 3 deletions
diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx index 14d58b96..60fd7925 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,6 +37,18 @@ function createEdgeColor( | |||
31 | }; | 37 | }; |
32 | } | 38 | } |
33 | 39 | ||
40 | function createTypeHashStyles(theme: Theme): CSSObject { | ||
41 | const result: CSSObject = {}; | ||
42 | range(theme.palette.highlight.typeHash.length).forEach((i) => { | ||
43 | result[`.node-typeHash-${i}`] = { | ||
44 | '& [fill="green"]': { | ||
45 | fill: theme.palette.highlight.typeHash[i]?.box, | ||
46 | }, | ||
47 | }; | ||
48 | }); | ||
49 | return result; | ||
50 | } | ||
51 | |||
34 | export default styled('div', { | 52 | export default styled('div', { |
35 | name: 'GraphTheme', | 53 | name: 'GraphTheme', |
36 | })(({ theme }) => ({ | 54 | })(({ theme }) => ({ |
@@ -68,6 +86,7 @@ export default styled('div', { | |||
68 | '.node-exists-UNKNOWN [stroke="black"]': { | 86 | '.node-exists-UNKNOWN [stroke="black"]': { |
69 | strokeDasharray: '5 2', | 87 | strokeDasharray: '5 2', |
70 | }, | 88 | }, |
89 | ...createTypeHashStyles(theme), | ||
71 | '.edge': { | 90 | '.edge': { |
72 | '& text': { | 91 | '& text': { |
73 | fontFamily: theme.typography.fontFamily, | 92 | fontFamily: theme.typography.fontFamily, |
diff --git a/subprojects/frontend/src/graph/dotSource.ts b/subprojects/frontend/src/graph/dotSource.ts index bd358dfa..3ac5eb1c 100644 --- a/subprojects/frontend/src/graph/dotSource.ts +++ b/subprojects/frontend/src/graph/dotSource.ts | |||
@@ -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 | */ |
@@ -142,6 +142,9 @@ function createNodes( | |||
142 | if (data.unaryPredicates.size === 0) { | 142 | if (data.unaryPredicates.size === 0) { |
143 | classList.push('node-empty'); | 143 | classList.push('node-empty'); |
144 | } | 144 | } |
145 | if (node.typeHash !== undefined) { | ||
146 | classList.push(`node-typeHash-${node.typeHash}`); | ||
147 | } | ||
145 | const classes = classList.join(' '); | 148 | const classes = classList.join(' '); |
146 | const name = nodeName(graph, node); | 149 | const name = nodeName(graph, node); |
147 | const border = node.kind === 'INDIVIDUAL' ? 2 : 1; | 150 | const border = node.kind === 'INDIVIDUAL' ? 2 : 1; |