feat(web): semantic highlighting

13 files changed, 177 insertions, 52 deletions

diff --git a/language-ide/src/main/java/tools/refinery/language/ide/syntaxcoloring/ProblemSemanticHighlightingCalculator.java b/language-ide/src/main/java/tools/refinery/language/ide/syntaxcoloring/ProblemSemanticHighlightingCalculator.java
index 76a67f96..d9abf12d 100644
--- a/language-ide/src/main/java/tools/refinery/language/ide/syntaxcoloring/ProblemSemanticHighlightingCalculator.java
+++ b/language-ide/src/main/java/tools/refinery/language/ide/syntaxcoloring/ProblemSemanticHighlightingCalculator.java
@@ -17,30 +17,20 @@ import com.google.inject.Inject;
 
 import tools.refinery.language.model.ProblemUtil;
 import tools.refinery.language.model.problem.ClassDeclaration;
-import tools.refinery.language.model.problem.EnumDeclaration;
 import tools.refinery.language.model.problem.NamedElement;
 import tools.refinery.language.model.problem.Node;
-import tools.refinery.language.model.problem.Parameter;
 import tools.refinery.language.model.problem.PredicateDefinition;
 import tools.refinery.language.model.problem.ProblemPackage;
 import tools.refinery.language.model.problem.ReferenceDeclaration;
-import tools.refinery.language.model.problem.Variable;
 
 public class ProblemSemanticHighlightingCalculator extends DefaultSemanticHighlightingCalculator {
-        private static final String BUILTIN_CLASS = "cm-keyword";
-        private static final String CLASS_CLASS = "problem-class";
-        private static final String ABSTRACT_CLASS = "problem-abstract";
-        private static final String ENUM_CLASS = "problem-enum";
-        private static final String REFERENCE_CLASS = "problem-reference";
-        private static final String CONTAINMENT_CLASS = "problem-containment";
-        private static final String PREDICATE_CLASS = "problem-predicate";
-        private static final String ERROR_CLASS = "problem-error";
-        private static final String NODE_CLASS = "problem-node";
-        private static final String UNIQUE_NODE_CLASS = "problem-unique-node";
-        private static final String NEW_NODE_CLASS = "problem-new-node";
-        private static final String PARAMETER_CLASS = "problem-parameter";
-        private static final String VARIABLE_CLASS = "problem-variable";
-        private static final String SINGLETON_VARIABLE_CLASS = "problem-singleton-variable";
+        private static final String BUILTIN_CLASS = "builtin";
+        private static final String ABSTRACT_CLASS = "abstract";
+        private static final String CONTAINMENT_CLASS = "containment";
+        private static final String ERROR_CLASS = "error";
+        private static final String NODE_CLASS = "node";
+        private static final String UNIQUE_NODE_CLASS = "unique";
+        private static final String NEW_NODE_CLASS = "new";
 
         @Inject
         private OperationCanceledManager operationCanceledManager;
@@ -57,7 +47,7 @@ public class ProblemSemanticHighlightingCalculator extends DefaultSemanticHighli
                 if (!(object instanceof NamedElement)) {
                         return;
                 }
-                String[] highlightClass = getHighlightClass(object);
+                String[] highlightClass = getHighlightClass(object, null);
                 if (highlightClass.length > 0) {
                         highlightFeature(acceptor, object, ProblemPackage.Literals.NAMED_ELEMENT__NAME, highlightClass);
                 }
@@ -80,7 +70,7 @@ public class ProblemSemanticHighlightingCalculator extends DefaultSemanticHighli
 
         protected void highlightSingleValue(EObject object, EReference reference, IHighlightedPositionAcceptor acceptor) {
                 EObject valueObj = (EObject) object.eGet(reference);
-                String[] highlightClass = getHighlightClass(valueObj);
+                String[] highlightClass = getHighlightClass(valueObj, reference);
                 if (highlightClass.length > 0) {
                         highlightFeature(acceptor, object, reference, highlightClass);
                 }
@@ -94,41 +84,37 @@ public class ProblemSemanticHighlightingCalculator extends DefaultSemanticHighli
                 for (var i = 0; i < size; i++) {
                         EObject valueInList = values.get(i);
                         INode node = nodes.get(i);
-                        String[] highlightClass = getHighlightClass(valueInList);
+                        String[] highlightClass = getHighlightClass(valueInList, reference);
                         if (highlightClass.length > 0) {
                                 highlightNode(acceptor, node, highlightClass);
                         }
                 }
         }
 
-        protected String[] getHighlightClass(EObject eObject) {
+        protected String[] getHighlightClass(EObject eObject, EReference reference) {
                 if (ProblemUtil.isBuiltIn(eObject)) {
                         return new String[] { BUILTIN_CLASS };
                 }
                 ImmutableList.Builder<String> classesBuilder = ImmutableList.builder();
                 if (eObject instanceof ClassDeclaration classDeclaration) {
-                        classesBuilder.add(CLASS_CLASS);
                         if (classDeclaration.isAbstract()) {
                                 classesBuilder.add(ABSTRACT_CLASS);
                         }
                 }
-                if (eObject instanceof EnumDeclaration) {
-                        classesBuilder.add(ENUM_CLASS);
-                }
                 if (eObject instanceof ReferenceDeclaration referenceDeclaration) {
-                        classesBuilder.add(REFERENCE_CLASS);
                         if (referenceDeclaration.isContainment()) {
                                 classesBuilder.add(CONTAINMENT_CLASS);
                         }
                 }
                 if (eObject instanceof PredicateDefinition predicateDefinition) {
-                        classesBuilder.add(PREDICATE_CLASS);
                         if (predicateDefinition.isError()) {
                                 classesBuilder.add(ERROR_CLASS);
                         }
                 }
                 if (eObject instanceof Node node) {
-                        classesBuilder.add(NODE_CLASS);
+                        if (reference == ProblemPackage.Literals.VARIABLE_OR_NODE_ARGUMENT__VARIABLE_OR_NODE) {
+                                classesBuilder.add(NODE_CLASS);
+                        }
                         if (ProblemUtil.isUniqueNode(node)) {
                                 classesBuilder.add(UNIQUE_NODE_CLASS);
                         }
@@ -136,15 +122,6 @@ public class ProblemSemanticHighlightingCalculator extends DefaultSemanticHighli
                                 classesBuilder.add(NEW_NODE_CLASS);
                         }
                 }
-                if (eObject instanceof Parameter) {
-                        classesBuilder.add(PARAMETER_CLASS);
-                }
-                if (eObject instanceof Variable variable) {
-                        classesBuilder.add(VARIABLE_CLASS);
-                        if (ProblemUtil.isSingletonVariable(variable)) {
-                                classesBuilder.add(SINGLETON_VARIABLE_CLASS);
-                        }
-                }
                 List<String> classes = classesBuilder.build();
                 return classes.toArray(new String[0]);
         }
diff --git a/language-web/package.json b/language-web/package.json
index 9185f8fe..76d27865 100644
--- a/language-web/package.json
+++ b/language-web/package.json
@@ -75,6 +75,7 @@
     "@codemirror/language": "^0.19.3",
     "@codemirror/lint": "^0.19.2",
     "@codemirror/matchbrackets": "^0.19.3",
+    "@codemirror/rangeset": "^0.19.1",
     "@codemirror/rectangular-selection": "^0.19.1",
     "@codemirror/search": "^0.19.2",
     "@codemirror/state": "^0.19.0",
diff --git a/language-web/src/main/js/editor/EditorParent.ts b/language-web/src/main/js/editor/EditorParent.ts
index a19759a4..ea8c13b6 100644
--- a/language-web/src/main/js/editor/EditorParent.ts
+++ b/language-web/src/main/js/editor/EditorParent.ts
@@ -133,6 +133,34 @@ export const EditorParent = styled('div')(({ theme }) => {
     '.cmt-variableName': {
       color: '#c8ae9d',
     },
+    '.cmt-problem-node': {
+      '&, & .cmt-variableName': {
+        color: theme.palette.text.secondary,
+      },
+    },
+    '.cmt-problem-unique': {
+      '&, & .cmt-variableName': {
+        color: theme.palette.text.primary,
+      },
+    },
+    '.cmt-problem-abstract, .cmt-problem-new': {
+      fontStyle: 'italic',
+    },
+    '.cmt-problem-containment': {
+      fontWeight: 700,
+    },
+    '.cmt-problem-error': {
+      '&, & .cmt-typeName': {
+        color: theme.palette.error.main,
+      },
+    },
+    '.cmt-problem-builtin': {
+      '&, & .cmt-typeName, & .cmt-atom, & .cmt-variableName': {
+        color: theme.palette.primary.main,
+        fontWeight: 400,
+        fontStyle: 'normal',
+      },
+    },
     '.cm-tooltip-autocomplete': {
       background: theme.palette.background.paper,
       boxShadow: `0px 2px 4px -1px rgb(0 0 0 / 20%),
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts
index 78cf763c..f47f47a0 100644
--- a/language-web/src/main/js/editor/EditorStore.ts
+++ b/language-web/src/main/js/editor/EditorStore.ts
@@ -30,6 +30,7 @@ import {
   TransactionSpec,
 } from '@codemirror/state';
 import {
+  DecorationSet,
   drawSelection,
   EditorView,
   highlightActiveLine,
@@ -43,8 +44,9 @@ import {
 } from 'mobx';
 
 import { problemLanguageSupport } from '../language/problemLanguageSupport';
-import { getLogger } from '../utils/logger';
+import { semanticHighlighting, setSemanticHighlighting } from './semanticHighlighting';
 import type { ThemeStore } from '../theme/ThemeStore';
+import { getLogger } from '../utils/logger';
 import { XtextClient } from '../xtext/XtextClient';
 
 const log = getLogger('editor.EditorStore');
@@ -103,6 +105,7 @@ export class EditorStore {
           top: true,
           matchCase: true,
         }),
+        semanticHighlighting,
         // We add the gutters to `extensions` in the order we want them to appear.
         foldGutter(),
         lineNumbers(),
@@ -201,6 +204,10 @@ export class EditorStore {
     return null;
   }
 
+  updateSemanticHighlighting(decorations: DecorationSet): void {
+    this.dispatch(setSemanticHighlighting(decorations));
+  }
+
   /**
    * @returns `true` if there is history to undo
    */
diff --git a/language-web/src/main/js/editor/semanticHighlighting.ts b/language-web/src/main/js/editor/semanticHighlighting.ts
new file mode 100644
index 00000000..2d6804f8
--- /dev/null
+++ b/language-web/src/main/js/editor/semanticHighlighting.ts
@@ -0,0 +1,34 @@
+import { StateEffect, StateField, TransactionSpec } from '@codemirror/state';
+import { EditorView, Decoration, DecorationSet } from '@codemirror/view';
+
+const setSemanticHighlightingEffect = StateEffect.define<DecorationSet>();
+
+export function setSemanticHighlighting(decorations: DecorationSet): TransactionSpec {
+  return {
+    effects: [
+      setSemanticHighlightingEffect.of(decorations),
+    ],
+  };
+}
+
+export const semanticHighlighting = StateField.define<DecorationSet>({
+  create() {
+    return Decoration.none;
+  },
+  update(currentDecorations, transaction) {
+    let newDecorations: DecorationSet | null = null;
+    transaction.effects.forEach((effect) => {
+      if (effect.is(setSemanticHighlightingEffect)) {
+        newDecorations = effect.value;
+      }
+    });
+    if (newDecorations === null) {
+      if (transaction.docChanged) {
+        return currentDecorations.map(transaction.changes);
+      }
+      return currentDecorations;
+    }
+    return newDecorations;
+  },
+  provide: (f) => EditorView.decorations.from(f),
+});
diff --git a/language-web/src/main/js/index.tsx b/language-web/src/main/js/index.tsx
index 1b24eadb..13a62af0 100644
--- a/language-web/src/main/js/index.tsx
+++ b/language-web/src/main/js/index.tsx
@@ -24,7 +24,7 @@ enum TaxStatus {
 }
 
 % A child cannot have any dependents.
-error invalidTaxStatus(Person p) <->
+pred invalidTaxStatus(Person p) <->
   taxStatus(p, child),
   children(p, _q)
 ; taxStatus(p, retired),
diff --git a/language-web/src/main/js/xtext/HighlightingService.ts b/language-web/src/main/js/xtext/HighlightingService.ts
new file mode 100644
index 00000000..b8ceed20
--- /dev/null
+++ b/language-web/src/main/js/xtext/HighlightingService.ts
@@ -0,0 +1,43 @@
+import { Decoration } from '@codemirror/view';
+import { Range, RangeSet } from '@codemirror/rangeset';
+
+import type { EditorStore } from '../editor/EditorStore';
+import type { UpdateService } from './UpdateService';
+import { getLogger } from '../utils/logger';
+import { isHighlightingResult } from './xtextServiceResults';
+
+const log = getLogger('xtext.ValidationService');
+
+export class HighlightingService {
+  private store: EditorStore;
+
+  private updateService: UpdateService;
+
+  constructor(store: EditorStore, updateService: UpdateService) {
+    this.store = store;
+    this.updateService = updateService;
+  }
+
+  onPush(push: unknown): void {
+    if (!isHighlightingResult(push)) {
+      log.error('Invalid highlighting result', push);
+      return;
+    }
+    const allChanges = this.updateService.computeChangesSinceLastUpdate();
+    const decorations: Range<Decoration>[] = [];
+    push.regions.forEach(({ offset, length, styleClasses }) => {
+      if (styleClasses.length === 0) {
+        return;
+      }
+      const from = allChanges.mapPos(offset);
+      const to = allChanges.mapPos(offset + length);
+      if (to <= from) {
+        return;
+      }
+      decorations.push(Decoration.mark({
+        class: styleClasses.map((c) => `cmt-problem-${c}`).join(' '),
+      }).range(from, to));
+    });
+    this.store.updateSemanticHighlighting(RangeSet.of(decorations, true));
+  }
+}
diff --git a/language-web/src/main/js/xtext/ValidationService.ts b/language-web/src/main/js/xtext/ValidationService.ts
index 163b5535..31c8f716 100644
--- a/language-web/src/main/js/xtext/ValidationService.ts
+++ b/language-web/src/main/js/xtext/ValidationService.ts
@@ -24,15 +24,20 @@ export class ValidationService {
     }
     const allChanges = this.updateService.computeChangesSinceLastUpdate();
     const diagnostics: Diagnostic[] = [];
-    push.issues.forEach((issue) => {
-      if (issue.severity === 'ignore') {
+    push.issues.forEach(({
+      offset,
+      length,
+      severity,
+      description,
+    }) => {
+      if (severity === 'ignore') {
         return;
       }
       diagnostics.push({
-        from: allChanges.mapPos(issue.offset),
-        to: allChanges.mapPos(issue.offset + issue.length),
-        severity: issue.severity,
-        message: issue.description,
+        from: allChanges.mapPos(offset),
+        to: allChanges.mapPos(offset + length),
+        severity,
+        message: description,
       });
     });
     this.store.updateDiagnostics(diagnostics);
diff --git a/language-web/src/main/js/xtext/XtextClient.ts b/language-web/src/main/js/xtext/XtextClient.ts
index 7683a8ef..ccb58ab4 100644
--- a/language-web/src/main/js/xtext/XtextClient.ts
+++ b/language-web/src/main/js/xtext/XtextClient.ts
@@ -6,6 +6,7 @@ import type { Transaction } from '@codemirror/state';
 
 import type { EditorStore } from '../editor/EditorStore';
 import { ContentAssistService } from './ContentAssistService';
+import { HighlightingService } from './HighlightingService';
 import { UpdateService } from './UpdateService';
 import { getLogger } from '../utils/logger';
 import { ValidationService } from './ValidationService';
@@ -20,6 +21,8 @@ export class XtextClient {
 
   private contentAssistService: ContentAssistService;
 
+  private highlightingService: HighlightingService;
+
   private validationService: ValidationService;
 
   constructor(store: EditorStore) {
@@ -29,6 +32,7 @@ export class XtextClient {
     );
     this.updateService = new UpdateService(store, this.webSocketClient);
     this.contentAssistService = new ContentAssistService(this.updateService);
+    this.highlightingService = new HighlightingService(store, this.updateService);
     this.validationService = new ValidationService(store, this.updateService);
   }
 
@@ -50,12 +54,12 @@ export class XtextClient {
       await this.updateService.updateFullText();
     }
     switch (service) {
+      case 'highlight':
+        this.highlightingService.onPush(push);
+        return;
       case 'validate':
         this.validationService.onPush(push);
         return;
-      case 'highlight':
-        // TODO
-        return;
       default:
         log.error('Unknown push service:', service);
         break;
diff --git a/language-web/src/main/js/xtext/xtextServiceResults.ts b/language-web/src/main/js/xtext/xtextServiceResults.ts
index 6c3d9daf..e32d49c3 100644
--- a/language-web/src/main/js/xtext/xtextServiceResults.ts
+++ b/language-web/src/main/js/xtext/xtextServiceResults.ts
@@ -198,3 +198,29 @@ export function isContentAssistResult(result: unknown): result is IContentAssist
   return isDocumentStateResult(result)
     && isArrayOfType(contentAssistResult.entries, isContentAssistEntry);
 }
+
+export interface IHighlightingRegion {
+  offset: number;
+
+  length: number;
+
+  styleClasses: string[];
+}
+
+export function isHighlightingRegion(value: unknown): value is IHighlightingRegion {
+  const region = value as IHighlightingRegion;
+  return typeof region === 'object'
+    && typeof region.offset === 'number'
+    && typeof region.length === 'number'
+    && isArrayOfType(region.styleClasses, (s): s is string => typeof s === 'string');
+}
+
+export interface IHighlightingResult {
+  regions: IHighlightingRegion[];
+}
+
+export function isHighlightingResult(result: unknown): result is IHighlightingResult {
+  const highlightingResult = result as IHighlightingResult;
+  return typeof highlightingResult === 'object'
+    && isArrayOfType(highlightingResult.regions, isHighlightingRegion);
+}
diff --git a/language-web/src/test/java/tools/refinery/language/web/ProblemWebSocketServletIntegrationTest.java b/language-web/src/test/java/tools/refinery/language/web/ProblemWebSocketServletIntegrationTest.java
index 5ccd155f..d42cc15c 100644
--- a/language-web/src/test/java/tools/refinery/language/web/ProblemWebSocketServletIntegrationTest.java
+++ b/language-web/src/test/java/tools/refinery/language/web/ProblemWebSocketServletIntegrationTest.java
@@ -96,7 +96,7 @@ class ProblemWebSocketServletIntegrationTest {
                         case 0 -> session.getRemote().sendString(
                                         "{\"id\":\"foo\",\"request\":{\"resource\":\"test.problem\",\"serviceType\":\"update\",\"fullText\":\"class Person.\n\"}}");
                         case 3 -> session.getRemote().sendString(
-                                        "{\"id\":\"bar\",\"request\":{\"resource\":\"test.problem\",\"serviceType\":\"update\",\"requiredStateId\":\"-80000000\",\"deltaText\":\"class Car.\n\",\"deltaOffset\":\"0\",\"deltaReplaceLength\":\"0\"}}");
+                                        "{\"id\":\"bar\",\"request\":{\"resource\":\"test.problem\",\"serviceType\":\"update\",\"requiredStateId\":\"-80000000\",\"deltaText\":\"unique q.\nnode(q).\n\",\"deltaOffset\":\"0\",\"deltaReplaceLength\":\"0\"}}");
                         case 5 -> session.close();
                         }
                 }
diff --git a/language-web/src/test/java/tools/refinery/language/web/xtext/servlet/TransactionExecutorTest.java b/language-web/src/test/java/tools/refinery/language/web/xtext/servlet/TransactionExecutorTest.java
index 0892954b..975d120c 100644
--- a/language-web/src/test/java/tools/refinery/language/web/xtext/servlet/TransactionExecutorTest.java
+++ b/language-web/src/test/java/tools/refinery/language/web/xtext/servlet/TransactionExecutorTest.java
@@ -79,7 +79,7 @@ class TransactionExecutorTest {
                 var stateId = updateFullText();
                 var responseHandler = sendRequestAndWaitForAllResponses(
                                 new XtextWebRequest("bar", Map.of("resource", RESOURCE_NAME, "serviceType", "update", "requiredStateId",
-                                                stateId, "deltaText", "<invalid text>\n", "deltaOffset", "0", "deltaReplaceLength", "0")));
+                                                stateId, "deltaText", "unique q.\nnode(q).\n<invalid text>\n", "deltaOffset", "0", "deltaReplaceLength", "0")));
 
                 var captor = newCaptor();
                 verify(responseHandler, times(3)).onResponse(captor.capture());
@@ -92,7 +92,7 @@ class TransactionExecutorTest {
                 var stateId = updateFullText();
                 var responseHandler = sendRequestAndWaitForAllResponses(
                                 new XtextWebRequest("bar", Map.of("resource", RESOURCE_NAME, "serviceType", "update", "requiredStateId",
-                                                stateId, "deltaText", "class Vehicle.\n", "deltaOffset", "0", "deltaReplaceLength", "0")));
+                                                stateId, "deltaText", "unique q.\nnode(q).\n", "deltaOffset", "0", "deltaReplaceLength", "0")));
 
                 var captor = newCaptor();
                 verify(responseHandler, times(2)).onResponse(captor.capture());
diff --git a/language-web/yarn.lock b/language-web/yarn.lock
index a29eb715..7c00795a 100644
--- a/language-web/yarn.lock
+++ b/language-web/yarn.lock
@@ -1096,7 +1096,7 @@
     "@codemirror/state" "^0.19.0"
     "@codemirror/view" "^0.19.0"
 
-"@codemirror/rangeset@^0.19.0":
+"@codemirror/rangeset@^0.19.0", "@codemirror/rangeset@^0.19.1":
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/@codemirror/rangeset/-/rangeset-0.19.1.tgz#03ab6f93fb60d9ba98f810b98ed9471cba1e3854"
   integrity sha512-WaKTEw8JB/3QFlQzpdgRoklopcWvG8O/Xp+rxxOfFKYTaeaejpY/tjpyBBg+Ea65Ka3m7+pPp9d5j/oR2rd9NA==