10 files changed, 410 insertions, 44 deletions

diff --git a/subprojects/frontend/src/editor/AnalysisErrorNotification.tsx b/subprojects/frontend/src/editor/AnalysisErrorNotification.tsx
new file mode 100644
index 00000000..591a3600
--- /dev/null
+++ b/subprojects/frontend/src/editor/AnalysisErrorNotification.tsx
@@ -0,0 +1,74 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import { reaction } from 'mobx';
+import { type SnackbarKey, useSnackbar } from 'notistack';
+import { useEffect, useState } from 'react';
+
+import type EditorStore from './EditorStore';
+
+function MessageObserver({
+  editorStore,
+}: {
+  editorStore: EditorStore;
+}): React.ReactNode {
+  const [message, setMessage] = useState(
+    editorStore.delayedErrors.semanticsError ?? '',
+  );
+  // Instead of making this component an `observer`,
+  // we only update the message is one is present to make sure that the
+  // disappear animation has a chance to complete.
+  useEffect(
+    () =>
+      reaction(
+        () => editorStore.delayedErrors.semanticsError,
+        (newMessage) => {
+          if (newMessage !== undefined) {
+            setMessage(newMessage);
+          }
+        },
+        { fireImmediately: false },
+      ),
+    [editorStore],
+  );
+  return message;
+}
+
+export default function AnalysisErrorNotification({
+  editorStore,
+}: {
+  editorStore: EditorStore;
+}): null {
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+  useEffect(() => {
+    let key: SnackbarKey | undefined;
+    const disposer = reaction(
+      () => editorStore.delayedErrors.semanticsError !== undefined,
+      (hasError) => {
+        if (hasError) {
+          if (key === undefined) {
+            key = enqueueSnackbar({
+              message: <MessageObserver editorStore={editorStore} />,
+              variant: 'error',
+              persist: true,
+            });
+          }
+        } else if (key !== undefined) {
+          closeSnackbar(key);
+          key = undefined;
+        }
+      },
+      { fireImmediately: true },
+    );
+    return () => {
+      disposer();
+      if (key !== undefined) {
+        closeSnackbar(key);
+      }
+    };
+  }, [editorStore, enqueueSnackbar, closeSnackbar]);
+  return null;
+}
diff --git a/subprojects/frontend/src/editor/AnimatedButton.tsx b/subprojects/frontend/src/editor/AnimatedButton.tsx
index dbbda618..606aabea 100644
--- a/subprojects/frontend/src/editor/AnimatedButton.tsx
+++ b/subprojects/frontend/src/editor/AnimatedButton.tsx
@@ -45,10 +45,10 @@ export default function AnimatedButton({
   children,
 }: {
   'aria-label'?: string;
-  onClick?: () => void;
+  onClick?: React.MouseEventHandler<HTMLElement>;
   color: 'error' | 'warning' | 'primary' | 'inherit';
   disabled?: boolean;
-  startIcon: JSX.Element;
+  startIcon?: JSX.Element;
   sx?: SxProps<Theme> | undefined;
   children?: ReactNode;
 }): JSX.Element {
@@ -79,7 +79,11 @@ export default function AnimatedButton({
       className="rounded shaded"
       disabled={disabled ?? false}
       startIcon={startIcon}
-      width={width === undefined ? 'auto' : `calc(${width} + 50px)`}
+      width={
+        width === undefined
+          ? 'auto'
+          : `calc(${width} + ${startIcon === undefined ? 28 : 50}px)`
+      }
     >
       <Box
         display="flex"
@@ -100,6 +104,7 @@ AnimatedButton.defaultProps = {
   'aria-label': undefined,
   onClick: undefined,
   disabled: false,
+  startIcon: undefined,
   sx: undefined,
   children: undefined,
 };
diff --git a/subprojects/frontend/src/editor/DiagnosticValue.ts b/subprojects/frontend/src/editor/DiagnosticValue.ts
index 20478262..410a46b7 100644
--- a/subprojects/frontend/src/editor/DiagnosticValue.ts
+++ b/subprojects/frontend/src/editor/DiagnosticValue.ts
@@ -14,6 +14,7 @@ export default class DiagnosticValue extends RangeValue {
     error: new DiagnosticValue('error'),
     warning: new DiagnosticValue('warning'),
     info: new DiagnosticValue('info'),
+    hint: new DiagnosticValue('hint'),
   };
 
   private constructor(public readonly severity: Severity) {
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index 9b187e5c..ca51f975 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -5,8 +5,8 @@
  */
 
 import type { Diagnostic } from '@codemirror/lint';
+import CancelIcon from '@mui/icons-material/Cancel';
 import CheckIcon from '@mui/icons-material/Check';
-import ErrorIcon from '@mui/icons-material/Error';
 import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
 import FormatPaint from '@mui/icons-material/FormatPaint';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
@@ -28,7 +28,7 @@ import type EditorStore from './EditorStore';
 function getLintIcon(severity: Diagnostic['severity'] | undefined) {
   switch (severity) {
     case 'error':
-      return <ErrorIcon fontSize="small" />;
+      return <CancelIcon fontSize="small" />;
     case 'warning':
       return <WarningIcon fontSize="small" />;
     case 'info':
@@ -95,7 +95,7 @@ export default observer(function EditorButtons({
             })}
           value="show-lint-panel"
         >
-          {getLintIcon(editorStore?.highestDiagnosticLevel)}
+          {getLintIcon(editorStore?.delayedErrors?.highestDiagnosticLevel)}
         </ToggleButton>
       </ToggleButtonGroup>
       <IconButton
diff --git a/subprojects/frontend/src/editor/EditorErrors.tsx b/subprojects/frontend/src/editor/EditorErrors.tsx
new file mode 100644
index 00000000..40becf7e
--- /dev/null
+++ b/subprojects/frontend/src/editor/EditorErrors.tsx
@@ -0,0 +1,93 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import { Diagnostic } from '@codemirror/lint';
+import { type IReactionDisposer, makeAutoObservable, reaction } from 'mobx';
+
+import type EditorStore from './EditorStore';
+
+const HYSTERESIS_TIME_MS = 250;
+
+export interface State {
+  analyzing: boolean;
+  errorCount: number;
+  warningCount: number;
+  infoCount: number;
+  semanticsError: string | undefined;
+}
+
+export default class EditorErrors implements State {
+  private readonly disposer: IReactionDisposer;
+
+  private timer: number | undefined;
+
+  analyzing = false;
+
+  errorCount = 0;
+
+  warningCount = 0;
+
+  infoCount = 0;
+
+  semanticsError: string | undefined;
+
+  constructor(private readonly store: EditorStore) {
+    this.updateImmediately(this.getNextState());
+    makeAutoObservable<EditorErrors, 'disposer' | 'timer'>(this, {
+      disposer: false,
+      timer: false,
+    });
+    this.disposer = reaction(
+      () => this.getNextState(),
+      (nextState) => {
+        if (this.timer !== undefined) {
+          clearTimeout(this.timer);
+          this.timer = undefined;
+        }
+        if (nextState.analyzing) {
+          this.timer = setTimeout(
+            () => this.updateImmediately(nextState),
+            HYSTERESIS_TIME_MS,
+          );
+        } else {
+          this.updateImmediately(nextState);
+        }
+      },
+      { fireImmediately: true },
+    );
+  }
+
+  get highestDiagnosticLevel(): Diagnostic['severity'] | undefined {
+    if (this.errorCount > 0) {
+      return 'error';
+    }
+    if (this.warningCount > 0) {
+      return 'warning';
+    }
+    if (this.infoCount > 0) {
+      return 'info';
+    }
+    return undefined;
+  }
+
+  private getNextState(): State {
+    return {
+      analyzing: this.store.analyzing,
+      errorCount: this.store.errorCount,
+      warningCount: this.store.warningCount,
+      infoCount: this.store.infoCount,
+      semanticsError: this.store.semanticsError,
+    };
+  }
+
+  private updateImmediately(nextState: State) {
+    Object.assign(this, nextState);
+  }
+
+  dispose() {
+    this.disposer();
+  }
+}
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index 87f408fe..1125a0ec 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -13,6 +13,7 @@ import { useState } from 'react';
 
 import { useRootStore } from '../RootStoreProvider';
 
+import AnalysisErrorNotification from './AnalysisErrorNotification';
 import ConnectionStatusNotification from './ConnectionStatusNotification';
 import EditorArea from './EditorArea';
 import EditorButtons from './EditorButtons';
@@ -39,7 +40,7 @@ export default observer(function EditorPane(): JSX.Element {
   const { editorStore } = useRootStore();
 
   return (
-    <Stack direction="column" flexGrow={1} flexShrink={1} overflow="auto">
+    <Stack direction="column" height="100%" overflow="auto">
       <Toolbar variant="dense">
         <EditorButtons editorStore={editorStore} />
       </Toolbar>
@@ -48,6 +49,7 @@ export default observer(function EditorPane(): JSX.Element {
           <EditorLoading />
         ) : (
           <>
+            <AnalysisErrorNotification editorStore={editorStore} />
             <ConnectionStatusNotification editorStore={editorStore} />
             <SearchPanelPortal editorStore={editorStore} />
             <EditorArea editorStore={editorStore} />
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index b98f085e..9508858d 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -26,9 +26,13 @@ import { makeAutoObservable, observable, runInAction } from 'mobx';
 import { nanoid } from 'nanoid';
 
 import type PWAStore from '../PWAStore';
+import GraphStore from '../graph/GraphStore';
 import getLogger from '../utils/getLogger';
 import type XtextClient from '../xtext/XtextClient';
+import type { SemanticsSuccessResult } from '../xtext/xtextServiceResults';
 
+import EditorErrors from './EditorErrors';
+import GeneratedModelStore from './GeneratedModelStore';
 import LintPanelStore from './LintPanelStore';
 import SearchPanelStore from './SearchPanelStore';
 import createEditorState from './createEditorState';
@@ -54,13 +58,26 @@ export default class EditorStore {
 
   readonly lintPanel: LintPanelStore;
 
+  readonly delayedErrors: EditorErrors;
+
   showLineNumbers = false;
 
   disposed = false;
 
+  analyzing = false;
+
+  semanticsError: string | undefined;
+
+  graph: GraphStore;
+
+  generatedModels = new Map<string, GeneratedModelStore>();
+
+  selectedGeneratedModel: string | undefined;
+
   constructor(initialValue: string, pwaStore: PWAStore) {
     this.id = nanoid();
     this.state = createEditorState(initialValue, this);
+    this.delayedErrors = new EditorErrors(this);
     this.searchPanel = new SearchPanelStore(this);
     this.lintPanel = new LintPanelStore(this);
     (async () => {
@@ -75,6 +92,7 @@ export default class EditorStore {
     })().catch((error) => {
       log.error('Failed to load XtextClient', error);
     });
+    this.graph = new GraphStore();
     makeAutoObservable<EditorStore, 'client'>(this, {
       id: false,
       state: observable.ref,
@@ -213,19 +231,6 @@ export default class EditorStore {
     this.doCommand(nextDiagnostic);
   }
 
-  get highestDiagnosticLevel(): Diagnostic['severity'] | undefined {
-    if (this.errorCount > 0) {
-      return 'error';
-    }
-    if (this.warningCount > 0) {
-      return 'warning';
-    }
-    if (this.infoCount > 0) {
-      return 'info';
-    }
-    return undefined;
-  }
-
   updateSemanticHighlighting(ranges: IHighlightRange[]): void {
     this.dispatch(setSemanticHighlighting(ranges));
   }
@@ -282,8 +287,109 @@ export default class EditorStore {
     return true;
   }
 
+  analysisStarted() {
+    this.analyzing = true;
+  }
+
+  analysisCompleted(semanticAnalysisSkipped = false) {
+    this.analyzing = false;
+    if (semanticAnalysisSkipped) {
+      this.semanticsError = undefined;
+    }
+  }
+
+  setSemanticsError(semanticsError: string) {
+    this.semanticsError = semanticsError;
+  }
+
+  setSemantics(semantics: SemanticsSuccessResult) {
+    this.semanticsError = undefined;
+    this.graph.setSemantics(semantics);
+  }
+
   dispose(): void {
     this.client?.dispose();
+    this.delayedErrors.dispose();
     this.disposed = true;
   }
+
+  startModelGeneration(randomSeed?: number): void {
+    this.client
+      ?.startModelGeneration(randomSeed)
+      ?.catch((error) => log.error('Could not start model generation', error));
+  }
+
+  addGeneratedModel(uuid: string, randomSeed: number): void {
+    this.generatedModels.set(uuid, new GeneratedModelStore(randomSeed));
+    this.selectGeneratedModel(uuid);
+  }
+
+  cancelModelGeneration(): void {
+    this.client
+      ?.cancelModelGeneration()
+      ?.catch((error) => log.error('Could not start model generation', error));
+  }
+
+  selectGeneratedModel(uuid: string | undefined): void {
+    if (uuid === undefined) {
+      this.selectedGeneratedModel = uuid;
+      return;
+    }
+    if (this.generatedModels.has(uuid)) {
+      this.selectedGeneratedModel = uuid;
+      return;
+    }
+    this.selectedGeneratedModel = undefined;
+  }
+
+  deleteGeneratedModel(uuid: string | undefined): void {
+    if (uuid === undefined) {
+      return;
+    }
+    if (this.selectedGeneratedModel === uuid) {
+      let previous: string | undefined;
+      let found: string | undefined;
+      this.generatedModels.forEach((_value, key) => {
+        if (key === uuid) {
+          found = previous;
+        }
+        previous = key;
+      });
+      this.selectGeneratedModel(found);
+    }
+    const generatedModel = this.generatedModels.get(uuid);
+    if (generatedModel !== undefined && generatedModel.running) {
+      this.cancelModelGeneration();
+    }
+    this.generatedModels.delete(uuid);
+  }
+
+  modelGenerationCancelled(): void {
+    this.generatedModels.forEach((value) =>
+      value.setError('Model generation cancelled'),
+    );
+  }
+
+  setGeneratedModelMessage(uuid: string, message: string): void {
+    this.generatedModels.get(uuid)?.setMessage(message);
+  }
+
+  setGeneratedModelError(uuid: string, message: string): void {
+    this.generatedModels.get(uuid)?.setError(message);
+  }
+
+  setGeneratedModelSemantics(
+    uuid: string,
+    semantics: SemanticsSuccessResult,
+  ): void {
+    this.generatedModels.get(uuid)?.setSemantics(semantics);
+  }
+
+  get generating(): boolean {
+    let generating = false;
+    this.generatedModels.forEach((value) => {
+      generating = generating || value.running;
+    });
+    return generating;
+  }
 }
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index e057ce18..055b62e2 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -4,15 +4,13 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import errorSVG from '@material-icons/svg/svg/error/baseline.svg?raw';
+import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw';
 import expandMoreSVG from '@material-icons/svg/svg/expand_more/baseline.svg?raw';
 import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw';
 import warningSVG from '@material-icons/svg/svg/warning/baseline.svg?raw';
 import { alpha, styled, type CSSObject } from '@mui/material/styles';
 
-function svgURL(svg: string): string {
-  return `url('data:image/svg+xml;utf8,${svg}')`;
-}
+import svgURL from '../utils/svgURL';
 
 export default styled('div', {
   name: 'EditorTheme',
@@ -56,15 +54,16 @@ export default styled('div', {
     '.cm-activeLineGutter': {
       background: 'transparent',
     },
-    '.cm-cursor, .cm-cursor-primary': {
+    '.cm-cursor, .cm-dropCursor, .cm-cursor-primary': {
       borderLeft: `2px solid ${theme.palette.info.main}`,
+      marginLeft: -1,
     },
     '.cm-selectionBackground': {
       background: theme.palette.highlight.selection,
     },
     '.cm-focused': {
       outline: 'none',
-      '.cm-selectionBackground': {
+      '& > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
         background: theme.palette.highlight.selection,
       },
     },
@@ -106,7 +105,7 @@ export default styled('div', {
         color: theme.palette.text.primary,
       },
     },
-    '.tok-problem-abstract, .tok-problem-new': {
+    '.tok-problem-abstract': {
       fontStyle: 'italic',
     },
     '.tok-problem-containment': {
@@ -331,7 +330,7 @@ export default styled('div', {
     '.cm-lintRange-active': {
       background: theme.palette.highlight.activeLintRange,
     },
-    ...lintSeverityStyle('error', errorSVG, 120),
+    ...lintSeverityStyle('error', cancelSVG, 120),
     ...lintSeverityStyle('warning', warningSVG, 110),
     ...lintSeverityStyle('info', infoSVG, 100),
   };
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 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import DangerousOutlinedIcon from '@mui/icons-material/DangerousOutlined';
+import CancelIcon from '@mui/icons-material/Cancel';
+import CloseIcon from '@mui/icons-material/Close';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import Button from '@mui/material/Button';
-import type { SxProps, Theme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 
 import AnimatedButton from './AnimatedButton';
@@ -18,26 +17,59 @@ const GENERATE_LABEL = 'Generate';
 const GenerateButton = observer(function GenerateButton({
   editorStore,
   hideWarnings,
-  sx,
 }: {
   editorStore: EditorStore | undefined;
   hideWarnings?: boolean | undefined;
-  sx?: SxProps<Theme> | undefined;
 }): JSX.Element {
   if (editorStore === undefined) {
     return (
-      <Button
+      <AnimatedButton color="inherit" disabled>
+        Loading&hellip;
+      </AnimatedButton>
+    );
+  }
+
+  const {
+    delayedErrors: { analyzing, errorCount, warningCount, semanticsError },
+    generating,
+  } = editorStore;
+
+  if (analyzing) {
+    return (
+      <AnimatedButton color="inherit" disabled>
+        Analyzing&hellip;
+      </AnimatedButton>
+    );
+  }
+
+  if (generating) {
+    return (
+      <AnimatedButton
         color="inherit"
-        className="rounded shaded"
-        disabled
-        {...(sx === undefined ? {} : { sx })}
+        onClick={() => editorStore.cancelModelGeneration()}
+        startIcon={<CloseIcon />}
       >
-        Loading&hellip;
-      </Button>
+        Cancel
+      </AnimatedButton>
     );
   }
 
-  const { errorCount, warningCount } = editorStore;
+  if (semanticsError !== undefined && editorStore.opened) {
+    return (
+      <AnimatedButton
+        color="error"
+        disabled
+        startIcon={<CancelIcon />}
+        sx={(theme) => ({
+          '&.Mui-disabled': {
+            color: `${theme.palette.error.main} !important`,
+          },
+        })}
+      >
+        Analysis error
+      </AnimatedButton>
+    );
+  }
 
   const diagnostics: string[] = [];
   if (errorCount > 0) {
@@ -54,8 +86,7 @@ const GenerateButton = observer(function GenerateButton({
         aria-label={`Select next diagnostic out of ${summary}`}
         onClick={() => editorStore.nextDiagnostic()}
         color="error"
-        startIcon={<DangerousOutlinedIcon />}
-        {...(sx === undefined ? {} : { sx })}
+        startIcon={<CancelIcon />}
       >
         {summary}
       </AnimatedButton>
@@ -67,7 +98,13 @@ const GenerateButton = observer(function GenerateButton({
       disabled={!editorStore.opened}
       color={warningCount > 0 ? 'warning' : 'primary'}
       startIcon={<PlayArrowIcon />}
-      {...(sx === undefined ? {} : { sx })}
+      onClick={(event) => {
+        if (event.shiftKey) {
+          editorStore.startModelGeneration(1);
+        } else {
+          editorStore.startModelGeneration();
+        }
+      }}
     >
       {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`}
     </AnimatedButton>
@@ -76,7 +113,6 @@ const GenerateButton = observer(function GenerateButton({
 
 GenerateButton.defaultProps = {
   hideWarnings: false,
-  sx: undefined,
 };
 
 export default GenerateButton;
diff --git a/subprojects/frontend/src/editor/GeneratedModelStore.ts b/subprojects/frontend/src/editor/GeneratedModelStore.ts
new file mode 100644
index 00000000..5088d603
--- /dev/null
+++ b/subprojects/frontend/src/editor/GeneratedModelStore.ts
@@ -0,0 +1,50 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import { makeAutoObservable } from 'mobx';
+
+import GraphStore from '../graph/GraphStore';
+import type { SemanticsSuccessResult } from '../xtext/xtextServiceResults';
+
+export default class GeneratedModelStore {
+  title: string;
+
+  message = 'Waiting for server';
+
+  error = false;
+
+  graph: GraphStore | undefined;
+
+  constructor(randomSeed: number) {
+    const time = new Date().toLocaleTimeString(undefined, { hour12: false });
+    this.title = `Generated at ${time} (${randomSeed})`;
+    makeAutoObservable(this);
+  }
+
+  get running(): boolean {
+    return !this.error && this.graph === undefined;
+  }
+
+  setMessage(message: string): void {
+    if (this.running) {
+      this.message = message;
+    }
+  }
+
+  setError(message: string): void {
+    if (this.running) {
+      this.error = true;
+      this.message = message;
+    }
+  }
+
+  setSemantics(semantics: SemanticsSuccessResult): void {
+    if (this.running) {
+      this.graph = new GraphStore();
+      this.graph.setSemantics(semantics);
+    }
+  }
+}