feat: improve semantics error reporting

Also makes model seeds cancellable to reduce server load during semantic
analysis.

8 files changed, 238 insertions, 37 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..24ec69be 100644
--- a/subprojects/frontend/src/editor/AnimatedButton.tsx
+++ b/subprojects/frontend/src/editor/AnimatedButton.tsx
@@ -48,7 +48,7 @@ export default function AnimatedButton({
   onClick?: () => void;
   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/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 c9f86496..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';
@@ -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 c79f6ec1..563725bb 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -29,6 +29,7 @@ import type PWAStore from '../PWAStore';
 import getLogger from '../utils/getLogger';
 import type XtextClient from '../xtext/XtextClient';
 
+import EditorErrors from './EditorErrors';
 import LintPanelStore from './LintPanelStore';
 import SearchPanelStore from './SearchPanelStore';
 import createEditorState from './createEditorState';
@@ -54,15 +55,22 @@ export default class EditorStore {
 
   readonly lintPanel: LintPanelStore;
 
+  readonly delayedErrors: EditorErrors;
+
   showLineNumbers = false;
 
   disposed = false;
 
+  analyzing = false;
+
+  semanticsError: string | undefined;
+
   semantics: unknown = {};
 
   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 () => {
@@ -82,6 +90,7 @@ export default class EditorStore {
       state: observable.ref,
       client: observable.ref,
       view: observable.ref,
+      semantics: observable.ref,
       searchPanel: false,
       lintPanel: false,
       contentAssist: false,
@@ -215,19 +224,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));
   }
@@ -284,12 +280,29 @@ 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: unknown) {
+    this.semanticsError = undefined;
     this.semantics = semantics;
   }
 
   dispose(): void {
     this.client?.dispose();
+    this.delayedErrors.dispose();
     this.disposed = true;
   }
 }
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index 4afb93e6..dd551a52 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -4,7 +4,7 @@
  * 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';
@@ -331,7 +331,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..5bac0464 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -4,10 +4,8 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import DangerousOutlinedIcon from '@mui/icons-material/DangerousOutlined';
+import CancelIcon from '@mui/icons-material/Cancel';
 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 +16,45 @@ 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
-        color="inherit"
-        className="rounded shaded"
-        disabled
-        {...(sx === undefined ? {} : { sx })}
-      >
+      <AnimatedButton color="inherit" disabled>
         Loading&hellip;
-      </Button>
+      </AnimatedButton>
+    );
+  }
+
+  const { analyzing, errorCount, warningCount, semanticsError } =
+    editorStore.delayedErrors;
+
+  if (analyzing) {
+    return (
+      <AnimatedButton color="inherit" disabled>
+        Analyzing&hellip;
+      </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 +71,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 +83,6 @@ const GenerateButton = observer(function GenerateButton({
       disabled={!editorStore.opened}
       color={warningCount > 0 ? 'warning' : 'primary'}
       startIcon={<PlayArrowIcon />}
-      {...(sx === undefined ? {} : { sx })}
     >
       {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`}
     </AnimatedButton>
@@ -76,7 +91,6 @@ const GenerateButton = observer(function GenerateButton({
 
 GenerateButton.defaultProps = {
   hideWarnings: false,
-  sx: undefined,
 };
 
 export default GenerateButton;