diff options
Diffstat (limited to 'subprojects/frontend/src/editor/GenerateButton.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/GenerateButton.tsx | 68 |
1 files changed, 52 insertions, 16 deletions
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx index 3837ef8e..b6b1655a 100644 --- a/subprojects/frontend/src/editor/GenerateButton.tsx +++ b/subprojects/frontend/src/editor/GenerateButton.tsx | |||
@@ -4,10 +4,9 @@ | |||
4 | * SPDX-License-Identifier: EPL-2.0 | 4 | * SPDX-License-Identifier: EPL-2.0 |
5 | */ | 5 | */ |
6 | 6 | ||
7 | import DangerousOutlinedIcon from '@mui/icons-material/DangerousOutlined'; | 7 | import CancelIcon from '@mui/icons-material/Cancel'; |
8 | import CloseIcon from '@mui/icons-material/Close'; | ||
8 | import PlayArrowIcon from '@mui/icons-material/PlayArrow'; | 9 | import PlayArrowIcon from '@mui/icons-material/PlayArrow'; |
9 | import Button from '@mui/material/Button'; | ||
10 | import type { SxProps, Theme } from '@mui/material/styles'; | ||
11 | import { observer } from 'mobx-react-lite'; | 10 | import { observer } from 'mobx-react-lite'; |
12 | 11 | ||
13 | import AnimatedButton from './AnimatedButton'; | 12 | import AnimatedButton from './AnimatedButton'; |
@@ -18,26 +17,59 @@ const GENERATE_LABEL = 'Generate'; | |||
18 | const GenerateButton = observer(function GenerateButton({ | 17 | const GenerateButton = observer(function GenerateButton({ |
19 | editorStore, | 18 | editorStore, |
20 | hideWarnings, | 19 | hideWarnings, |
21 | sx, | ||
22 | }: { | 20 | }: { |
23 | editorStore: EditorStore | undefined; | 21 | editorStore: EditorStore | undefined; |
24 | hideWarnings?: boolean | undefined; | 22 | hideWarnings?: boolean | undefined; |
25 | sx?: SxProps<Theme> | undefined; | ||
26 | }): JSX.Element { | 23 | }): JSX.Element { |
27 | if (editorStore === undefined) { | 24 | if (editorStore === undefined) { |
28 | return ( | 25 | return ( |
29 | <Button | 26 | <AnimatedButton color="inherit" disabled> |
27 | Loading… | ||
28 | </AnimatedButton> | ||
29 | ); | ||
30 | } | ||
31 | |||
32 | const { | ||
33 | delayedErrors: { analyzing, errorCount, warningCount, semanticsError }, | ||
34 | generating, | ||
35 | } = editorStore; | ||
36 | |||
37 | if (analyzing) { | ||
38 | return ( | ||
39 | <AnimatedButton color="inherit" disabled> | ||
40 | Analyzing… | ||
41 | </AnimatedButton> | ||
42 | ); | ||
43 | } | ||
44 | |||
45 | if (generating) { | ||
46 | return ( | ||
47 | <AnimatedButton | ||
30 | color="inherit" | 48 | color="inherit" |
31 | className="rounded shaded" | 49 | onClick={() => editorStore.cancelModelGeneration()} |
32 | disabled | 50 | startIcon={<CloseIcon />} |
33 | {...(sx === undefined ? {} : { sx })} | ||
34 | > | 51 | > |
35 | Loading… | 52 | Cancel |
36 | </Button> | 53 | </AnimatedButton> |
37 | ); | 54 | ); |
38 | } | 55 | } |
39 | 56 | ||
40 | const { errorCount, warningCount } = editorStore; | 57 | if (semanticsError !== undefined && editorStore.opened) { |
58 | return ( | ||
59 | <AnimatedButton | ||
60 | color="error" | ||
61 | disabled | ||
62 | startIcon={<CancelIcon />} | ||
63 | sx={(theme) => ({ | ||
64 | '&.Mui-disabled': { | ||
65 | color: `${theme.palette.error.main} !important`, | ||
66 | }, | ||
67 | })} | ||
68 | > | ||
69 | Analysis error | ||
70 | </AnimatedButton> | ||
71 | ); | ||
72 | } | ||
41 | 73 | ||
42 | const diagnostics: string[] = []; | 74 | const diagnostics: string[] = []; |
43 | if (errorCount > 0) { | 75 | if (errorCount > 0) { |
@@ -54,8 +86,7 @@ const GenerateButton = observer(function GenerateButton({ | |||
54 | aria-label={`Select next diagnostic out of ${summary}`} | 86 | aria-label={`Select next diagnostic out of ${summary}`} |
55 | onClick={() => editorStore.nextDiagnostic()} | 87 | onClick={() => editorStore.nextDiagnostic()} |
56 | color="error" | 88 | color="error" |
57 | startIcon={<DangerousOutlinedIcon />} | 89 | startIcon={<CancelIcon />} |
58 | {...(sx === undefined ? {} : { sx })} | ||
59 | > | 90 | > |
60 | {summary} | 91 | {summary} |
61 | </AnimatedButton> | 92 | </AnimatedButton> |
@@ -67,7 +98,13 @@ const GenerateButton = observer(function GenerateButton({ | |||
67 | disabled={!editorStore.opened} | 98 | disabled={!editorStore.opened} |
68 | color={warningCount > 0 ? 'warning' : 'primary'} | 99 | color={warningCount > 0 ? 'warning' : 'primary'} |
69 | startIcon={<PlayArrowIcon />} | 100 | startIcon={<PlayArrowIcon />} |
70 | {...(sx === undefined ? {} : { sx })} | 101 | onClick={(event) => { |
102 | if (event.shiftKey) { | ||
103 | editorStore.startModelGeneration(1); | ||
104 | } else { | ||
105 | editorStore.startModelGeneration(); | ||
106 | } | ||
107 | }} | ||
71 | > | 108 | > |
72 | {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`} | 109 | {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`} |
73 | </AnimatedButton> | 110 | </AnimatedButton> |
@@ -76,7 +113,6 @@ const GenerateButton = observer(function GenerateButton({ | |||
76 | 113 | ||
77 | GenerateButton.defaultProps = { | 114 | GenerateButton.defaultProps = { |
78 | hideWarnings: false, | 115 | hideWarnings: false, |
79 | sx: undefined, | ||
80 | }; | 116 | }; |
81 | 117 | ||
82 | export default GenerateButton; | 118 | export default GenerateButton; |