feat(web): toggle identifier coloring

3 files changed, 17 insertions, 8 deletions

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,