feat(web): toggle identifier coloring

8 files changed, 63 insertions, 22 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 b536dc0c..1cad4a36 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -18,7 +18,13 @@ import { range } from 'lodash-es';
 
 import svgURL from '../utils/svgURL';
 
-function createTypeHashStyles(theme: Theme): CSSObject {
+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}`] = {
@@ -38,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,
@@ -148,7 +155,7 @@ export default styled('div', {
         fontStyle: 'normal',
       },
     },
-    ...createTypeHashStyles(theme),
+    ...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 60fd7925..7334f559 100644
--- a/subprojects/frontend/src/graph/GraphTheme.tsx
+++ b/subprojects/frontend/src/graph/GraphTheme.tsx
@@ -37,7 +37,10 @@ function createEdgeColor(
   };
 }
 
-function createTypeHashStyles(theme: Theme): CSSObject {
+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}`] = {
@@ -51,7 +54,7 @@ function createTypeHashStyles(theme: Theme): CSSObject {
 
 export default styled('div', {
   name: 'GraphTheme',
-})(({ theme }) => ({
+})<{ colorNodes: boolean }>(({ theme, colorNodes }) => ({
   '& svg': {
     userSelect: 'none',
     '.node': {
@@ -86,7 +89,7 @@ export default styled('div', {
     '.node-exists-UNKNOWN [stroke="black"]': {
       strokeDasharray: '5 2',
     },
-    ...createTypeHashStyles(theme),
+    ...createTypeHashStyles(theme, colorNodes),
     '.edge': {
       '& text': {
         fontFamily: theme.typography.fontFamily,