diff options
Diffstat (limited to 'subprojects/frontend/src')
-rw-r--r-- | subprojects/frontend/src/editor/EditorArea.tsx | 3 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorButtons.tsx | 16 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorStore.ts | 13 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorTheme.ts | 38 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/GeneratedModelStore.ts | 15 | ||||
-rw-r--r-- | subprojects/frontend/src/graph/DotGraphVisualizer.tsx | 4 | ||||
-rw-r--r-- | subprojects/frontend/src/graph/GraphStore.ts | 12 | ||||
-rw-r--r-- | subprojects/frontend/src/graph/GraphTheme.tsx | 28 | ||||
-rw-r--r-- | subprojects/frontend/src/graph/dotSource.ts | 5 | ||||
-rw-r--r-- | subprojects/frontend/src/theme/ThemeProvider.tsx | 40 | ||||
-rw-r--r-- | subprojects/frontend/src/xtext/xtextServiceResults.ts | 9 |
11 files changed, 153 insertions, 30 deletions
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx index 905fa2ec..aafaad40 100644 --- a/subprojects/frontend/src/editor/EditorArea.tsx +++ b/subprojects/frontend/src/editor/EditorArea.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | /* | 1 | /* |
2 | * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/> | 2 | * SPDX-FileCopyrightText: 2021-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 | */ |
@@ -38,6 +38,7 @@ export default observer(function EditorArea({ | |||
38 | <EditorTheme | 38 | <EditorTheme |
39 | showLineNumbers={editorStore.showLineNumbers} | 39 | showLineNumbers={editorStore.showLineNumbers} |
40 | showActiveLine={!editorStore.hasSelection} | 40 | showActiveLine={!editorStore.hasSelection} |
41 | colorIdentifiers={editorStore.colorIdentifiers} | ||
41 | ref={editorParentRef} | 42 | ref={editorParentRef} |
42 | /> | 43 | /> |
43 | </Box> | 44 | </Box> |
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx index ca51f975..f4513909 100644 --- a/subprojects/frontend/src/editor/EditorButtons.tsx +++ b/subprojects/frontend/src/editor/EditorButtons.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | /* | 1 | /* |
2 | * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/> | 2 | * SPDX-FileCopyrightText: 2021-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 | */ |
@@ -8,8 +8,9 @@ import type { Diagnostic } from '@codemirror/lint'; | |||
8 | import CancelIcon from '@mui/icons-material/Cancel'; | 8 | import CancelIcon from '@mui/icons-material/Cancel'; |
9 | import CheckIcon from '@mui/icons-material/Check'; | 9 | import CheckIcon from '@mui/icons-material/Check'; |
10 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; | 10 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; |
11 | import FormatPaint from '@mui/icons-material/FormatPaint'; | 11 | import FormatPaintIcon from '@mui/icons-material/FormatPaint'; |
12 | import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; | 12 | import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; |
13 | import LooksIcon from '@mui/icons-material/Looks'; | ||
13 | import RedoIcon from '@mui/icons-material/Redo'; | 14 | import RedoIcon from '@mui/icons-material/Redo'; |
14 | import SearchIcon from '@mui/icons-material/Search'; | 15 | import SearchIcon from '@mui/icons-material/Search'; |
15 | import UndoIcon from '@mui/icons-material/Undo'; | 16 | import UndoIcon from '@mui/icons-material/Undo'; |
@@ -72,6 +73,15 @@ export default observer(function EditorButtons({ | |||
72 | <FormatListNumberedIcon fontSize="small" /> | 73 | <FormatListNumberedIcon fontSize="small" /> |
73 | </ToggleButton> | 74 | </ToggleButton> |
74 | <ToggleButton | 75 | <ToggleButton |
76 | selected={editorStore?.colorIdentifiers ?? false} | ||
77 | disabled={editorStore === undefined} | ||
78 | onClick={() => editorStore?.toggleColorIdentifiers()} | ||
79 | aria-label="Color identifiers" | ||
80 | value="color-identifiers" | ||
81 | > | ||
82 | <LooksIcon fontSize="small" /> | ||
83 | </ToggleButton> | ||
84 | <ToggleButton | ||
75 | selected={editorStore?.searchPanel?.state ?? false} | 85 | selected={editorStore?.searchPanel?.state ?? false} |
76 | disabled={editorStore === undefined} | 86 | disabled={editorStore === undefined} |
77 | onClick={() => editorStore?.searchPanel?.toggle()} | 87 | onClick={() => editorStore?.searchPanel?.toggle()} |
@@ -104,7 +114,7 @@ export default observer(function EditorButtons({ | |||
104 | aria-label="Automatic format" | 114 | aria-label="Automatic format" |
105 | color="inherit" | 115 | color="inherit" |
106 | > | 116 | > |
107 | <FormatPaint fontSize="small" /> | 117 | <FormatPaintIcon fontSize="small" /> |
108 | </IconButton> | 118 | </IconButton> |
109 | <ConnectButton editorStore={editorStore} /> | 119 | <ConnectButton editorStore={editorStore} /> |
110 | </Stack> | 120 | </Stack> |
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts index 87c4040e..5e7d05e1 100644 --- a/subprojects/frontend/src/editor/EditorStore.ts +++ b/subprojects/frontend/src/editor/EditorStore.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | /* | 1 | /* |
2 | * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/> | 2 | * SPDX-FileCopyrightText: 2021-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 | */ |
@@ -62,6 +62,8 @@ export default class EditorStore { | |||
62 | 62 | ||
63 | showLineNumbers = false; | 63 | showLineNumbers = false; |
64 | 64 | ||
65 | colorIdentifiers = true; | ||
66 | |||
65 | disposed = false; | 67 | disposed = false; |
66 | 68 | ||
67 | analyzing = false; | 69 | analyzing = false; |
@@ -96,7 +98,7 @@ export default class EditorStore { | |||
96 | })().catch((error) => { | 98 | })().catch((error) => { |
97 | log.error('Failed to load XtextClient', error); | 99 | log.error('Failed to load XtextClient', error); |
98 | }); | 100 | }); |
99 | this.graph = new GraphStore(); | 101 | this.graph = new GraphStore(this); |
100 | makeAutoObservable<EditorStore, 'client'>(this, { | 102 | makeAutoObservable<EditorStore, 'client'>(this, { |
101 | id: false, | 103 | id: false, |
102 | state: observable.ref, | 104 | state: observable.ref, |
@@ -279,6 +281,11 @@ export default class EditorStore { | |||
279 | log.debug('Show line numbers', this.showLineNumbers); | 281 | log.debug('Show line numbers', this.showLineNumbers); |
280 | } | 282 | } |
281 | 283 | ||
284 | toggleColorIdentifiers(): void { | ||
285 | this.colorIdentifiers = !this.colorIdentifiers; | ||
286 | log.debug('Color identifiers', this.colorIdentifiers); | ||
287 | } | ||
288 | |||
282 | get hasSelection(): boolean { | 289 | get hasSelection(): boolean { |
283 | return this.state.selection.ranges.some(({ from, to }) => from !== to); | 290 | return this.state.selection.ranges.some(({ from, to }) => from !== to); |
284 | } | 291 | } |
@@ -324,7 +331,7 @@ export default class EditorStore { | |||
324 | } | 331 | } |
325 | 332 | ||
326 | addGeneratedModel(uuid: string, randomSeed: number): void { | 333 | addGeneratedModel(uuid: string, randomSeed: number): void { |
327 | this.generatedModels.set(uuid, new GeneratedModelStore(randomSeed)); | 334 | this.generatedModels.set(uuid, new GeneratedModelStore(randomSeed, this)); |
328 | this.selectGeneratedModel(uuid); | 335 | this.selectGeneratedModel(uuid); |
329 | } | 336 | } |
330 | 337 | ||
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index 9f560dfb..1cad4a36 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | /* | 1 | /* |
2 | * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/> | 2 | * SPDX-FileCopyrightText: 2021-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 | */ |
@@ -8,10 +8,35 @@ import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw'; | |||
8 | import expandMoreSVG from '@material-icons/svg/svg/expand_more/baseline.svg?raw'; | 8 | import expandMoreSVG from '@material-icons/svg/svg/expand_more/baseline.svg?raw'; |
9 | import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw'; | 9 | import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw'; |
10 | import warningSVG from '@material-icons/svg/svg/warning/baseline.svg?raw'; | 10 | import warningSVG from '@material-icons/svg/svg/warning/baseline.svg?raw'; |
11 | import { alpha, styled, type CSSObject } from '@mui/material/styles'; | 11 | import { |
12 | alpha, | ||
13 | styled, | ||
14 | type CSSObject, | ||
15 | type Theme, | ||
16 | } from '@mui/material/styles'; | ||
17 | import { range } from 'lodash-es'; | ||
12 | 18 | ||
13 | import svgURL from '../utils/svgURL'; | 19 | import svgURL from '../utils/svgURL'; |
14 | 20 | ||
21 | function createTypeHashStyles( | ||
22 | theme: Theme, | ||
23 | colorIdentifiers: boolean, | ||
24 | ): CSSObject { | ||
25 | if (!colorIdentifiers) { | ||
26 | return {}; | ||
27 | } | ||
28 | const result: CSSObject = {}; | ||
29 | range(theme.palette.highlight.typeHash.length).forEach((i) => { | ||
30 | result[`.tok-problem-typeHash-${i}`] = { | ||
31 | '&, .tok-typeName': { | ||
32 | color: theme.palette.highlight.typeHash[i]?.text, | ||
33 | fontWeight: theme.typography.fontWeightEditorTypeHash, | ||
34 | }, | ||
35 | }; | ||
36 | }); | ||
37 | return result; | ||
38 | } | ||
39 | |||
15 | export default styled('div', { | 40 | export default styled('div', { |
16 | name: 'EditorTheme', | 41 | name: 'EditorTheme', |
17 | shouldForwardProp: (propName) => | 42 | shouldForwardProp: (propName) => |
@@ -19,7 +44,8 @@ export default styled('div', { | |||
19 | })<{ | 44 | })<{ |
20 | showLineNumbers: boolean; | 45 | showLineNumbers: boolean; |
21 | showActiveLine: boolean; | 46 | showActiveLine: boolean; |
22 | }>(({ theme, showLineNumbers, showActiveLine }) => { | 47 | colorIdentifiers: boolean; |
48 | }>(({ theme, showLineNumbers, showActiveLine, colorIdentifiers }) => { | ||
23 | const editorFontStyle: CSSObject = { | 49 | const editorFontStyle: CSSObject = { |
24 | ...theme.typography.editor, | 50 | ...theme.typography.editor, |
25 | fontWeight: theme.typography.fontWeightEditorNormal, | 51 | fontWeight: theme.typography.fontWeightEditorNormal, |
@@ -114,6 +140,11 @@ export default styled('div', { | |||
114 | }, | 140 | }, |
115 | '.tok-problem-error': { | 141 | '.tok-problem-error': { |
116 | '&, & .tok-typeName': { | 142 | '&, & .tok-typeName': { |
143 | color: theme.palette.highlight.comment, | ||
144 | }, | ||
145 | }, | ||
146 | '.tok-invalid': { | ||
147 | '&, & .tok-typeName': { | ||
117 | color: theme.palette.error.main, | 148 | color: theme.palette.error.main, |
118 | }, | 149 | }, |
119 | }, | 150 | }, |
@@ -124,6 +155,7 @@ export default styled('div', { | |||
124 | fontStyle: 'normal', | 155 | fontStyle: 'normal', |
125 | }, | 156 | }, |
126 | }, | 157 | }, |
158 | ...createTypeHashStyles(theme, colorIdentifiers), | ||
127 | }; | 159 | }; |
128 | 160 | ||
129 | const matchingStyle: CSSObject = { | 161 | const matchingStyle: CSSObject = { |
diff --git a/subprojects/frontend/src/editor/GeneratedModelStore.ts b/subprojects/frontend/src/editor/GeneratedModelStore.ts index 5088d603..f2695d9a 100644 --- a/subprojects/frontend/src/editor/GeneratedModelStore.ts +++ b/subprojects/frontend/src/editor/GeneratedModelStore.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | /* | 1 | /* |
2 | * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/> | 2 | * SPDX-FileCopyrightText: 2021-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 | */ |
@@ -9,6 +9,8 @@ import { makeAutoObservable } from 'mobx'; | |||
9 | import GraphStore from '../graph/GraphStore'; | 9 | import GraphStore from '../graph/GraphStore'; |
10 | import type { SemanticsSuccessResult } from '../xtext/xtextServiceResults'; | 10 | import type { SemanticsSuccessResult } from '../xtext/xtextServiceResults'; |
11 | 11 | ||
12 | import type EditorStore from './EditorStore'; | ||
13 | |||
12 | export default class GeneratedModelStore { | 14 | export default class GeneratedModelStore { |
13 | title: string; | 15 | title: string; |
14 | 16 | ||
@@ -18,10 +20,15 @@ export default class GeneratedModelStore { | |||
18 | 20 | ||
19 | graph: GraphStore | undefined; | 21 | graph: GraphStore | undefined; |
20 | 22 | ||
21 | constructor(randomSeed: number) { | 23 | constructor( |
24 | randomSeed: number, | ||
25 | private readonly editorStore: EditorStore, | ||
26 | ) { | ||
22 | const time = new Date().toLocaleTimeString(undefined, { hour12: false }); | 27 | const time = new Date().toLocaleTimeString(undefined, { hour12: false }); |
23 | this.title = `Generated at ${time} (${randomSeed})`; | 28 | this.title = `Generated at ${time} (${randomSeed})`; |
24 | makeAutoObservable(this); | 29 | makeAutoObservable<GeneratedModelStore, 'editorStore'>(this, { |
30 | editorStore: false, | ||
31 | }); | ||
25 | } | 32 | } |
26 | 33 | ||
27 | get running(): boolean { | 34 | get running(): boolean { |
@@ -43,7 +50,7 @@ export default class GeneratedModelStore { | |||
43 | 50 | ||
44 | setSemantics(semantics: SemanticsSuccessResult): void { | 51 | setSemantics(semantics: SemanticsSuccessResult): void { |
45 | if (this.running) { | 52 | if (this.running) { |
46 | this.graph = new GraphStore(); | 53 | this.graph = new GraphStore(this.editorStore); |
47 | this.graph.setSemantics(semantics); | 54 | this.graph.setSemantics(semantics); |
48 | } | 55 | } |
49 | } | 56 | } |
diff --git a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx index eec72a7d..72ac58fa 100644 --- a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx +++ b/subprojects/frontend/src/graph/DotGraphVisualizer.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 | */ |
@@ -150,7 +150,7 @@ function DotGraphVisualizer({ | |||
150 | ], | 150 | ], |
151 | ); | 151 | ); |
152 | 152 | ||
153 | return <GraphTheme ref={setElement} />; | 153 | return <GraphTheme ref={setElement} colorNodes={graph.colorNodes} />; |
154 | } | 154 | } |
155 | 155 | ||
156 | DotGraphVisualizer.defaultProps = { | 156 | DotGraphVisualizer.defaultProps = { |
diff --git a/subprojects/frontend/src/graph/GraphStore.ts b/subprojects/frontend/src/graph/GraphStore.ts index ecb016b5..58c4422d 100644 --- a/subprojects/frontend/src/graph/GraphStore.ts +++ b/subprojects/frontend/src/graph/GraphStore.ts | |||
@@ -1,11 +1,12 @@ | |||
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 | */ |
6 | 6 | ||
7 | import { makeAutoObservable, observable } from 'mobx'; | 7 | import { makeAutoObservable, observable } from 'mobx'; |
8 | 8 | ||
9 | import type EditorStore from '../editor/EditorStore'; | ||
9 | import type { | 10 | import type { |
10 | RelationMetadata, | 11 | RelationMetadata, |
11 | SemanticsSuccessResult, | 12 | SemanticsSuccessResult, |
@@ -65,8 +66,9 @@ export default class GraphStore { | |||
65 | 66 | ||
66 | selectedSymbol: RelationMetadata | undefined; | 67 | selectedSymbol: RelationMetadata | undefined; |
67 | 68 | ||
68 | constructor() { | 69 | constructor(private readonly editorStore: EditorStore) { |
69 | makeAutoObservable(this, { | 70 | makeAutoObservable<GraphStore, 'editorStore'>(this, { |
71 | editorStore: false, | ||
70 | semantics: observable.ref, | 72 | semantics: observable.ref, |
71 | }); | 73 | }); |
72 | } | 74 | } |
@@ -184,4 +186,8 @@ export default class GraphStore { | |||
184 | }); | 186 | }); |
185 | this.setSelectedSymbol(this.selectedSymbol); | 187 | this.setSelectedSymbol(this.selectedSymbol); |
186 | } | 188 | } |
189 | |||
190 | get colorNodes(): boolean { | ||
191 | return this.editorStore.colorIdentifiers; | ||
192 | } | ||
187 | } | 193 | } |
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, |
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; |
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx index 18310147..a996cde8 100644 --- a/subprojects/frontend/src/theme/ThemeProvider.tsx +++ b/subprojects/frontend/src/theme/ThemeProvider.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | /* | 1 | /* |
2 | * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/> | 2 | * SPDX-FileCopyrightText: 2021-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 | */ |
@@ -24,6 +24,11 @@ interface OuterPalette { | |||
24 | border: string; | 24 | border: string; |
25 | } | 25 | } |
26 | 26 | ||
27 | interface TypeHashPalette { | ||
28 | text: string; | ||
29 | box: string; | ||
30 | } | ||
31 | |||
27 | interface HighlightPalette { | 32 | interface HighlightPalette { |
28 | number: string; | 33 | number: string; |
29 | parameter: string; | 34 | parameter: string; |
@@ -41,17 +46,20 @@ interface HighlightPalette { | |||
41 | selected: string; | 46 | selected: string; |
42 | contrastText: string; | 47 | contrastText: string; |
43 | }; | 48 | }; |
49 | typeHash: TypeHashPalette[]; | ||
44 | } | 50 | } |
45 | 51 | ||
46 | declare module '@mui/material/styles' { | 52 | declare module '@mui/material/styles' { |
47 | interface TypographyVariants { | 53 | interface TypographyVariants { |
48 | fontWeightEditorNormal: number; | 54 | fontWeightEditorNormal: number; |
55 | fontWeightEditorTypeHash: number; | ||
49 | fontWeightEditorBold: number; | 56 | fontWeightEditorBold: number; |
50 | editor: TypographyStyle; | 57 | editor: TypographyStyle; |
51 | } | 58 | } |
52 | 59 | ||
53 | interface TypographyVariantsOptions { | 60 | interface TypographyVariantsOptions { |
54 | fontWeightEditorNormal?: number; | 61 | fontWeightEditorNormal?: number; |
62 | fontWeightEditorTypeHash?: number; | ||
55 | fontWeightEditorBold?: number; | 63 | fontWeightEditorBold?: number; |
56 | editor?: TypographyStyle; | 64 | editor?: TypographyStyle; |
57 | } | 65 | } |
@@ -78,6 +86,7 @@ function createResponsiveTheme( | |||
78 | '"Open Sans Variable", "Open Sans", "Roboto", "Helvetica", "Arial", sans-serif', | 86 | '"Open Sans Variable", "Open Sans", "Roboto", "Helvetica", "Arial", sans-serif', |
79 | fontWeightMedium: 500, | 87 | fontWeightMedium: 500, |
80 | fontWeightEditorNormal: 400, | 88 | fontWeightEditorNormal: 400, |
89 | fontWeightEditorTypeHash: 500, | ||
81 | fontWeightEditorBold: 700, | 90 | fontWeightEditorBold: 700, |
82 | button: { | 91 | button: { |
83 | fontWeight: 600, | 92 | fontWeight: 600, |
@@ -220,7 +229,7 @@ const lightTheme = (() => { | |||
220 | palette: { | 229 | palette: { |
221 | mode: 'light', | 230 | mode: 'light', |
222 | primary: { main: '#038a99' }, | 231 | primary: { main: '#038a99' }, |
223 | secondary: { main: '#e45649' }, | 232 | secondary: { main: '#61afef' }, |
224 | error: { main: '#ca1243' }, | 233 | error: { main: '#ca1243' }, |
225 | warning: { main: '#c18401' }, | 234 | warning: { main: '#c18401' }, |
226 | success: { main: '#50a14f' }, | 235 | success: { main: '#50a14f' }, |
@@ -256,6 +265,18 @@ const lightTheme = (() => { | |||
256 | selected: '#d500f9', | 265 | selected: '#d500f9', |
257 | contrastText: '#fff', | 266 | contrastText: '#fff', |
258 | }, | 267 | }, |
268 | typeHash: [ | ||
269 | { text: '#986801', box: '#e5c07b' }, | ||
270 | { text: '#d6493e', box: '#e06c75' }, | ||
271 | { text: '#50a14f', box: '#98c379' }, | ||
272 | { text: '#a626a4', box: '#c678dd' }, | ||
273 | { text: '#4078f2', box: '#80a7f4' }, | ||
274 | { text: '#827662', box: '#e3d1b2' }, | ||
275 | { text: '#904f53', box: '#e78b8f' }, | ||
276 | { text: '#637855', box: '#abcc94' }, | ||
277 | { text: '#805f89', box: '#dbb2e8' }, | ||
278 | { text: '#5987ae', box: '#92c0e9' }, | ||
279 | ], | ||
259 | }, | 280 | }, |
260 | }, | 281 | }, |
261 | }); | 282 | }); |
@@ -270,6 +291,7 @@ const darkTheme = (() => { | |||
270 | { | 291 | { |
271 | typography: { | 292 | typography: { |
272 | fontWeightEditorNormal: 350, | 293 | fontWeightEditorNormal: 350, |
294 | fontWeightEditorTypeHash: 350, | ||
273 | fontWeightEditorBold: 650, | 295 | fontWeightEditorBold: 650, |
274 | }, | 296 | }, |
275 | palette: { | 297 | palette: { |
@@ -277,7 +299,7 @@ const darkTheme = (() => { | |||
277 | primary: { main: '#56b6c2' }, | 299 | primary: { main: '#56b6c2' }, |
278 | secondary: { main: '#be5046' }, | 300 | secondary: { main: '#be5046' }, |
279 | error: { main: '#e06c75' }, | 301 | error: { main: '#e06c75' }, |
280 | warning: { main: '#e5c07b' }, | 302 | warning: { main: '#d19a66' }, |
281 | success: { main: '#98c379' }, | 303 | success: { main: '#98c379' }, |
282 | info: { main: '#61afef' }, | 304 | info: { main: '#61afef' }, |
283 | background: { | 305 | background: { |
@@ -311,6 +333,18 @@ const darkTheme = (() => { | |||
311 | selected: '#dd33fa', | 333 | selected: '#dd33fa', |
312 | contrastText: darkBackground, | 334 | contrastText: darkBackground, |
313 | }, | 335 | }, |
336 | typeHash: [ | ||
337 | { text: '#e5c07b', box: '#ae8003' }, | ||
338 | { text: '#e06c75', box: '#a23b47' }, | ||
339 | { text: '#98c379', box: '#428141' }, | ||
340 | { text: '#c678dd', box: '#854797' }, | ||
341 | { text: '#61afef', box: '#3982bb' }, | ||
342 | { text: '#e3d1b2', box: '#827662' }, | ||
343 | { text: '#e78b8f', box: '#904f53' }, | ||
344 | { text: '#abcc94', box: '#647e63' }, | ||
345 | { text: '#dbb2e8', box: '#805f89' }, | ||
346 | { text: '#92c0e9', box: '#4f7799' }, | ||
347 | ], | ||
314 | }, | 348 | }, |
315 | }, | 349 | }, |
316 | }, | 350 | }, |
diff --git a/subprojects/frontend/src/xtext/xtextServiceResults.ts b/subprojects/frontend/src/xtext/xtextServiceResults.ts index e473bd48..792c7de3 100644 --- a/subprojects/frontend/src/xtext/xtextServiceResults.ts +++ b/subprojects/frontend/src/xtext/xtextServiceResults.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | /* | 1 | /* |
2 | * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/> | 2 | * SPDX-FileCopyrightText: 2021-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 | */ |
@@ -137,6 +137,7 @@ export type ModelGenerationStartedResult = z.infer< | |||
137 | export const NodeMetadata = z.object({ | 137 | export const NodeMetadata = z.object({ |
138 | name: z.string(), | 138 | name: z.string(), |
139 | simpleName: z.string(), | 139 | simpleName: z.string(), |
140 | typeHash: z.string().optional(), | ||
140 | kind: z.enum(['IMPLICIT', 'INDIVIDUAL', 'NEW']), | 141 | kind: z.enum(['IMPLICIT', 'INDIVIDUAL', 'NEW']), |
141 | }); | 142 | }); |
142 | 143 | ||
@@ -182,15 +183,15 @@ export type SemanticsResult = z.infer<typeof SemanticsResult>; | |||
182 | 183 | ||
183 | export const ModelGenerationResult = z.union([ | 184 | export const ModelGenerationResult = z.union([ |
184 | z.object({ | 185 | z.object({ |
185 | uuid: z.string().nonempty(), | 186 | uuid: z.string().min(1), |
186 | status: z.string(), | 187 | status: z.string(), |
187 | }), | 188 | }), |
188 | z.object({ | 189 | z.object({ |
189 | uuid: z.string().nonempty(), | 190 | uuid: z.string().min(1), |
190 | error: z.string(), | 191 | error: z.string(), |
191 | }), | 192 | }), |
192 | SemanticsSuccessResult.extend({ | 193 | SemanticsSuccessResult.extend({ |
193 | uuid: z.string().nonempty(), | 194 | uuid: z.string().min(1), |
194 | }), | 195 | }), |
195 | ]); | 196 | ]); |
196 | 197 | ||