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 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -38,6 +38,7 @@ export default observer(function EditorArea({
       <EditorTheme
         showLineNumbers={editorStore.showLineNumbers}
         showActiveLine={!editorStore.hasSelection}
+        colorIdentifiers={editorStore.colorIdentifiers}
         ref={editorParentRef}
       />
     </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 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -8,8 +8,9 @@ import type { Diagnostic } from '@codemirror/lint';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CheckIcon from '@mui/icons-material/Check';
 import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
-import FormatPaint from '@mui/icons-material/FormatPaint';
+import FormatPaintIcon from '@mui/icons-material/FormatPaint';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import LooksIcon from '@mui/icons-material/Looks';
 import RedoIcon from '@mui/icons-material/Redo';
 import SearchIcon from '@mui/icons-material/Search';
 import UndoIcon from '@mui/icons-material/Undo';
@@ -72,6 +73,15 @@ export default observer(function EditorButtons({
           <FormatListNumberedIcon fontSize="small" />
         </ToggleButton>
         <ToggleButton
+          selected={editorStore?.colorIdentifiers ?? false}
+          disabled={editorStore === undefined}
+          onClick={() => editorStore?.toggleColorIdentifiers()}
+          aria-label="Color identifiers"
+          value="color-identifiers"
+        >
+          <LooksIcon fontSize="small" />
+        </ToggleButton>
+        <ToggleButton
           selected={editorStore?.searchPanel?.state ?? false}
           disabled={editorStore === undefined}
           onClick={() => editorStore?.searchPanel?.toggle()}
@@ -104,7 +114,7 @@ export default observer(function EditorButtons({
         aria-label="Automatic format"
         color="inherit"
       >
-        <FormatPaint fontSize="small" />
+        <FormatPaintIcon fontSize="small" />
       </IconButton>
       <ConnectButton editorStore={editorStore} />
     </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 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -62,6 +62,8 @@ export default class EditorStore {
 
   showLineNumbers = false;
 
+  colorIdentifiers = true;
+
   disposed = false;
 
   analyzing = false;
@@ -96,7 +98,7 @@ export default class EditorStore {
     })().catch((error) => {
       log.error('Failed to load XtextClient', error);
     });
-    this.graph = new GraphStore();
+    this.graph = new GraphStore(this);
     makeAutoObservable<EditorStore, 'client'>(this, {
       id: false,
       state: observable.ref,
@@ -279,6 +281,11 @@ export default class EditorStore {
     log.debug('Show line numbers', this.showLineNumbers);
   }
 
+  toggleColorIdentifiers(): void {
+    this.colorIdentifiers = !this.colorIdentifiers;
+    log.debug('Color identifiers', this.colorIdentifiers);
+  }
+
   get hasSelection(): boolean {
     return this.state.selection.ranges.some(({ from, to }) => from !== to);
   }
@@ -324,7 +331,7 @@ export default class EditorStore {
   }
 
   addGeneratedModel(uuid: string, randomSeed: number): void {
-    this.generatedModels.set(uuid, new GeneratedModelStore(randomSeed));
+    this.generatedModels.set(uuid, new GeneratedModelStore(randomSeed, this));
     this.selectGeneratedModel(uuid);
   }
 
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 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -8,10 +8,35 @@ 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';
+import {
+  alpha,
+  styled,
+  type CSSObject,
+  type Theme,
+} from '@mui/material/styles';
+import { range } from 'lodash-es';
 
 import svgURL from '../utils/svgURL';
 
+function createTypeHashStyles(
+  theme: Theme,
+  colorIdentifiers: boolean,
+): CSSObject {
+  if (!colorIdentifiers) {
+    return {};
+  }
+  const result: CSSObject = {};
+  range(theme.palette.highlight.typeHash.length).forEach((i) => {
+    result[`.tok-problem-typeHash-${i}`] = {
+      '&, .tok-typeName': {
+        color: theme.palette.highlight.typeHash[i]?.text,
+        fontWeight: theme.typography.fontWeightEditorTypeHash,
+      },
+    };
+  });
+  return result;
+}
+
 export default styled('div', {
   name: 'EditorTheme',
   shouldForwardProp: (propName) =>
@@ -19,7 +44,8 @@ export default styled('div', {
 })<{
   showLineNumbers: boolean;
   showActiveLine: boolean;
-}>(({ theme, showLineNumbers, showActiveLine }) => {
+  colorIdentifiers: boolean;
+}>(({ theme, showLineNumbers, showActiveLine, colorIdentifiers }) => {
   const editorFontStyle: CSSObject = {
     ...theme.typography.editor,
     fontWeight: theme.typography.fontWeightEditorNormal,
@@ -114,6 +140,11 @@ export default styled('div', {
     },
     '.tok-problem-error': {
       '&, & .tok-typeName': {
+        color: theme.palette.highlight.comment,
+      },
+    },
+    '.tok-invalid': {
+      '&, & .tok-typeName': {
         color: theme.palette.error.main,
       },
     },
@@ -124,6 +155,7 @@ export default styled('div', {
         fontStyle: 'normal',
       },
     },
+    ...createTypeHashStyles(theme, colorIdentifiers),
   };
 
   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 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -9,6 +9,8 @@ import { makeAutoObservable } from 'mobx';
 import GraphStore from '../graph/GraphStore';
 import type { SemanticsSuccessResult } from '../xtext/xtextServiceResults';
 
+import type EditorStore from './EditorStore';
+
 export default class GeneratedModelStore {
   title: string;
 
@@ -18,10 +20,15 @@ export default class GeneratedModelStore {
 
   graph: GraphStore | undefined;
 
-  constructor(randomSeed: number) {
+  constructor(
+    randomSeed: number,
+    private readonly editorStore: EditorStore,
+  ) {
     const time = new Date().toLocaleTimeString(undefined, { hour12: false });
     this.title = `Generated at ${time} (${randomSeed})`;
-    makeAutoObservable(this);
+    makeAutoObservable<GeneratedModelStore, 'editorStore'>(this, {
+      editorStore: false,
+    });
   }
 
   get running(): boolean {
@@ -43,7 +50,7 @@ export default class GeneratedModelStore {
 
   setSemantics(semantics: SemanticsSuccessResult): void {
     if (this.running) {
-      this.graph = new GraphStore();
+      this.graph = new GraphStore(this.editorStore);
       this.graph.setSemantics(semantics);
     }
   }
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 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -150,7 +150,7 @@ function DotGraphVisualizer({
     ],
   );
 
-  return <GraphTheme ref={setElement} />;
+  return <GraphTheme ref={setElement} colorNodes={graph.colorNodes} />;
 }
 
 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 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
 
 import { makeAutoObservable, observable } from 'mobx';
 
+import type EditorStore from '../editor/EditorStore';
 import type {
   RelationMetadata,
   SemanticsSuccessResult,
@@ -65,8 +66,9 @@ export default class GraphStore {
 
   selectedSymbol: RelationMetadata | undefined;
 
-  constructor() {
-    makeAutoObservable(this, {
+  constructor(private readonly editorStore: EditorStore) {
+    makeAutoObservable<GraphStore, 'editorStore'>(this, {
+      editorStore: false,
       semantics: observable.ref,
     });
   }
@@ -184,4 +186,8 @@ export default class GraphStore {
     });
     this.setSelectedSymbol(this.selectedSymbol);
   }
+
+  get colorNodes(): boolean {
+    return this.editorStore.colorIdentifiers;
+  }
 }
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 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -7,7 +7,13 @@
 import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw';
 import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw';
 import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw';
-import { alpha, styled, type CSSObject } from '@mui/material/styles';
+import {
+  alpha,
+  styled,
+  type CSSObject,
+  type Theme,
+} from '@mui/material/styles';
+import { range } from 'lodash-es';
 
 import svgURL from '../utils/svgURL';
 
@@ -31,9 +37,24 @@ function createEdgeColor(
   };
 }
 
+function createTypeHashStyles(theme: Theme, colorNodes: boolean): CSSObject {
+  if (!colorNodes) {
+    return {};
+  }
+  const result: CSSObject = {};
+  range(theme.palette.highlight.typeHash.length).forEach((i) => {
+    result[`.node-typeHash-${i}`] = {
+      '& [fill="green"]': {
+        fill: theme.palette.highlight.typeHash[i]?.box,
+      },
+    };
+  });
+  return result;
+}
+
 export default styled('div', {
   name: 'GraphTheme',
-})(({ theme }) => ({
+})<{ colorNodes: boolean }>(({ theme, colorNodes }) => ({
   '& svg': {
     userSelect: 'none',
     '.node': {
@@ -68,6 +89,7 @@ export default styled('div', {
     '.node-exists-UNKNOWN [stroke="black"]': {
       strokeDasharray: '5 2',
     },
+    ...createTypeHashStyles(theme, colorNodes),
     '.edge': {
       '& text': {
         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 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -142,6 +142,9 @@ function createNodes(
     if (data.unaryPredicates.size === 0) {
       classList.push('node-empty');
     }
+    if (node.typeHash !== undefined) {
+      classList.push(`node-typeHash-${node.typeHash}`);
+    }
     const classes = classList.join(' ');
     const name = nodeName(graph, node);
     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 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -24,6 +24,11 @@ interface OuterPalette {
   border: string;
 }
 
+interface TypeHashPalette {
+  text: string;
+  box: string;
+}
+
 interface HighlightPalette {
   number: string;
   parameter: string;
@@ -41,17 +46,20 @@ interface HighlightPalette {
     selected: string;
     contrastText: string;
   };
+  typeHash: TypeHashPalette[];
 }
 
 declare module '@mui/material/styles' {
   interface TypographyVariants {
     fontWeightEditorNormal: number;
+    fontWeightEditorTypeHash: number;
     fontWeightEditorBold: number;
     editor: TypographyStyle;
   }
 
   interface TypographyVariantsOptions {
     fontWeightEditorNormal?: number;
+    fontWeightEditorTypeHash?: number;
     fontWeightEditorBold?: number;
     editor?: TypographyStyle;
   }
@@ -78,6 +86,7 @@ function createResponsiveTheme(
         '"Open Sans Variable", "Open Sans", "Roboto", "Helvetica", "Arial", sans-serif',
       fontWeightMedium: 500,
       fontWeightEditorNormal: 400,
+      fontWeightEditorTypeHash: 500,
       fontWeightEditorBold: 700,
       button: {
         fontWeight: 600,
@@ -220,7 +229,7 @@ const lightTheme = (() => {
     palette: {
       mode: 'light',
       primary: { main: '#038a99' },
-      secondary: { main: '#e45649' },
+      secondary: { main: '#61afef' },
       error: { main: '#ca1243' },
       warning: { main: '#c18401' },
       success: { main: '#50a14f' },
@@ -256,6 +265,18 @@ const lightTheme = (() => {
           selected: '#d500f9',
           contrastText: '#fff',
         },
+        typeHash: [
+          { text: '#986801', box: '#e5c07b' },
+          { text: '#d6493e', box: '#e06c75' },
+          { text: '#50a14f', box: '#98c379' },
+          { text: '#a626a4', box: '#c678dd' },
+          { text: '#4078f2', box: '#80a7f4' },
+          { text: '#827662', box: '#e3d1b2' },
+          { text: '#904f53', box: '#e78b8f' },
+          { text: '#637855', box: '#abcc94' },
+          { text: '#805f89', box: '#dbb2e8' },
+          { text: '#5987ae', box: '#92c0e9' },
+        ],
       },
     },
   });
@@ -270,6 +291,7 @@ const darkTheme = (() => {
     {
       typography: {
         fontWeightEditorNormal: 350,
+        fontWeightEditorTypeHash: 350,
         fontWeightEditorBold: 650,
       },
       palette: {
@@ -277,7 +299,7 @@ const darkTheme = (() => {
         primary: { main: '#56b6c2' },
         secondary: { main: '#be5046' },
         error: { main: '#e06c75' },
-        warning: { main: '#e5c07b' },
+        warning: { main: '#d19a66' },
         success: { main: '#98c379' },
         info: { main: '#61afef' },
         background: {
@@ -311,6 +333,18 @@ const darkTheme = (() => {
             selected: '#dd33fa',
             contrastText: darkBackground,
           },
+          typeHash: [
+            { text: '#e5c07b', box: '#ae8003' },
+            { text: '#e06c75', box: '#a23b47' },
+            { text: '#98c379', box: '#428141' },
+            { text: '#c678dd', box: '#854797' },
+            { text: '#61afef', box: '#3982bb' },
+            { text: '#e3d1b2', box: '#827662' },
+            { text: '#e78b8f', box: '#904f53' },
+            { text: '#abcc94', box: '#647e63' },
+            { text: '#dbb2e8', box: '#805f89' },
+            { text: '#92c0e9', box: '#4f7799' },
+          ],
         },
       },
     },
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 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -137,6 +137,7 @@ export type ModelGenerationStartedResult = z.infer<
 export const NodeMetadata = z.object({
   name: z.string(),
   simpleName: z.string(),
+  typeHash: z.string().optional(),
   kind: z.enum(['IMPLICIT', 'INDIVIDUAL', 'NEW']),
 });
 
@@ -182,15 +183,15 @@ export type SemanticsResult = z.infer<typeof SemanticsResult>;
 
 export const ModelGenerationResult = z.union([
   z.object({
-    uuid: z.string().nonempty(),
+    uuid: z.string().min(1),
     status: z.string(),
   }),
   z.object({
-    uuid: z.string().nonempty(),
+    uuid: z.string().min(1),
     error: z.string(),
   }),
   SemanticsSuccessResult.extend({
-    uuid: z.string().nonempty(),
+    uuid: z.string().min(1),
   }),
 ]);