feat: connect model generator to UI

1 files changed, 18 insertions, 2 deletions

diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index 5bac0464..b8dcd531 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -5,6 +5,7 @@
  */
 
 import CancelIcon from '@mui/icons-material/Cancel';
+import CloseIcon from '@mui/icons-material/Close';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import { observer } from 'mobx-react-lite';
 
@@ -28,8 +29,10 @@ const GenerateButton = observer(function GenerateButton({
     );
   }
 
-  const { analyzing, errorCount, warningCount, semanticsError } =
-    editorStore.delayedErrors;
+  const {
+    delayedErrors: { analyzing, errorCount, warningCount, semanticsError },
+    generating,
+  } = editorStore;
 
   if (analyzing) {
     return (
@@ -39,6 +42,18 @@ const GenerateButton = observer(function GenerateButton({
     );
   }
 
+  if (generating) {
+    return (
+      <AnimatedButton
+        color="inherit"
+        onClick={() => editorStore.cancelModelGeneration()}
+        startIcon={<CloseIcon />}
+      >
+        Cancel
+      </AnimatedButton>
+    );
+  }
+
   if (semanticsError !== undefined && editorStore.opened) {
     return (
       <AnimatedButton
@@ -83,6 +98,7 @@ const GenerateButton = observer(function GenerateButton({
       disabled={!editorStore.opened}
       color={warningCount > 0 ? 'warning' : 'primary'}
       startIcon={<PlayArrowIcon />}
+      onClick={() => editorStore.startModelGeneration()}
     >
       {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`}
     </AnimatedButton>