feat: implement Monaco editor error markers and validate programs before saving

Author: iislucas

animated-transformer/src/app/logic-explorer/__screenshots__/logic-explorer.component.spec.ts/LogicExplorerComponent-Simulation-and-Custom-Mapping-should-respect-changes-in-the-source-code-when-compiling-and-running-simulation-1.png

@@ -42,7 +42,7 @@ <h2>Logic Program Source</h2>
         <label>Selected Program</label>
         <button 
           [matMenuTriggerFor]="presetsMenu" 
-          class="presets-trigger-btn"
+          class="menu-trigger-btn"
         >
           <mat-icon class="preset-btn-icon">snippet_folder</mat-icon>
           <span class="selected-preset-name">{{ selectedPresetName() }}</span>
@@ -564,7 +564,7 @@ <h3>Probabilistic Population Simulator</h3>
 
           <div class="sim-controls">
             <div class="control-row">
-              <div class="control-item">
+              <div class="control-item steps-item">
                 <label for="sim-steps">Steps</label>
                 <input 
                   id="sim-steps" 
@@ -578,19 +578,27 @@ <h3>Probabilistic Population Simulator</h3>
               </div>
 
               <div class="control-item">
-                <label for="sim-mode">Probability Mode</label>
-                <select 
-                  id="sim-mode" 
-                  [value]="simMode()" 
-                  (change)="onSimModeChange($event)"
-                  class="styled-select"
+                <label>Probability Mode</label>
+                <button 
+                  [matMenuTriggerFor]="simModeMenu" 
+                  class="menu-trigger-btn"
                 >
-                  <option value="proportional">Proportional Rates</option>
-                  <option value="softmax">Softmax Temperature</option>
-                </select>
+                  <span>{{ simMode() === 'softmax' ? 'Softmax Temperature' : 'Proportional Rates' }}</span>
+                  <mat-icon class="arrow-icon">arrow_drop_down</mat-icon>
+                </button>
+                <mat-menu #simModeMenu="matMenu" class="sim-mode-menu-panel">
+                  <button mat-menu-item (click)="simMode.set('proportional')" [class.active-mode]="simMode() === 'proportional'">
+                    <mat-icon>trending_up</mat-icon>
+                    <span>Proportional Rates</span>
+                  </button>
+                  <button mat-menu-item (click)="simMode.set('softmax')" [class.active-mode]="simMode() === 'softmax'">
+                    <mat-icon>thermostat</mat-icon>
+                    <span>Softmax Temperature</span>
+                  </button>
+                </mat-menu>
               </div>
 
-              <div class="control-item" *ngIf="simMode() === 'softmax'">
+              <div class="control-item temp-item" *ngIf="simMode() === 'softmax'">
                 <label for="sim-temp">Temperature</label>
                 <input 
                   id="sim-temp" 

animated-transformer/src/app/logic-explorer/__screenshots__/logic-explorer.component.spec.ts/LogicExplorerComponent-Simulation-and-Custom-Mapping-should-respect-edits-in-simulation-due-to-auto-compile-even-if-compile-is-NOT-manually-triggered-1.png

@@ -231,7 +231,7 @@ limitations under the License.
   letter-spacing: 0.05em;
 }
 
-.presets-trigger-btn {
+.menu-trigger-btn {
   background: #ffffff;
   color: #0f172a;
   border: 1px solid #cbd5e1;
@@ -263,7 +263,7 @@ limitations under the License.
     justify-content: center;
   }
 
-  .selected-preset-name {
+  span {
     flex-grow: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -286,12 +286,13 @@ limitations under the License.
 
 /* Material Menu Styling */
 ::ng-deep {
-  .presets-menu-panel.mat-mdc-menu-panel {
+  .presets-menu-panel.mat-mdc-menu-panel,
+  .sim-mode-menu-panel.mat-mdc-menu-panel {
     border-radius: 8px !important;
     border: 1px solid #cbd5e1 !important;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
     background: #ffffff !important;
-    min-width: 260px !important;
+    min-width: 200px !important;
     padding: 4px 0 !important;
 
     .presets-menu-header {
@@ -323,7 +324,7 @@ limitations under the License.
         margin-right: 10px !important;
       }
 
-      &.active-preset {
+      &.active-preset, &.active-mode {
         background: #f0fdf4 !important; /* light green for active */
         color: #15803d !important;
         font-weight: 600 !important;
@@ -333,11 +334,15 @@ limitations under the License.
         }
       }
 
-      &:hover:not(.active-preset) {
+      &:hover:not(.active-preset):not(.active-mode) {
         background: #f8fafc !important;
       }
     }
   }
+
+  .presets-menu-panel.mat-mdc-menu-panel {
+    min-width: 260px !important;
+  }
 }
 
 .editor-wrapper {
@@ -1372,6 +1377,16 @@ h3 {
 .btn-item {
   flex: 0;
   min-width: max-content;
+
+  .btn {
+    height: 38px;
+    box-sizing: border-box;
+  }
+}
+
+.steps-item, .temp-item {
+  flex: 0 0 90px;
+  min-width: 90px;
 }
 
 .styled-input {
@@ -1384,6 +1399,7 @@ h3 {
   outline: none;
   transition: all 0.15s ease;
   width: 100%;
+  height: 38px;
   box-sizing: border-box;
 
   &:focus {

animated-transformer/src/app/logic-explorer/__screenshots__/logic-explorer.component.spec.ts/LogicExplorerComponent-Simulation-and-Custom-Mapping-should-respect-edits-when-running-simulation--then-editing-and-compiling--and-running-simulation-again-1.png

@@ -19,6 +19,7 @@ import {
   MonacoJavaScriptEditorComponent,
   CodeStrUpdate,
   CodeStrUpdateKind,
+  EditorError,
 } from '../monaco-js-editor/monaco-js-editor.component';
 import { updateLinearLogicTokens, updateLogicTheme, DEFAULT_THEME_CONFIG, LogicThemeConfig } from '../monaco-editor-loader';
 import { D3LineChartComponent, NamedChartPoint, CurveKind, ScalingKind, defaultChartConfig } from '../d3-line-chart/d3-line-chart.component';
@@ -337,12 +338,55 @@ export class LogicExplorerComponent implements OnInit {
     return [];
   }
 
+  private parseErrorString(errorMessage: string): EditorError {
+    let line = 1;
+    let column = 1;
+    
+    const lineColRegex = /(?:line|at)\s+(\d+)(?:,?\s+col(?:umn)?\s+(\d+))?/i;
+    const colonRegex = /(\d+):(\d+)/;
+    
+    let match = errorMessage.match(lineColRegex);
+    if (match) {
+      line = parseInt(match[1], 10);
+      if (match[2]) column = parseInt(match[2], 10);
+    } else {
+      match = errorMessage.match(colonRegex);
+      if (match) {
+        line = parseInt(match[1], 10);
+        column = parseInt(match[2], 10);
+      }
+    }
+    
+    return {
+      message: errorMessage,
+      start: {
+        line,
+        column
+      }
+    };
+  }
+
   saveProgram(saveAs = false) {
     const isCustom = this.isCustomPreset();
     const currentName = this.selectedPresetName();
 
     // Get latest code text directly from Monaco
-    const currentSrc = this.monacoEditor() ? this.monacoEditor()!.editor.getValue() : this.rawSource();
+    const currentSrc = this.monacoEditor()?.editor ? this.monacoEditor()!.editor.getValue() : this.rawSource();
+
+    // Compile check to validate before saving
+    try {
+      const ctxt = parseContext(currentSrc);
+      registerDefaultTSFunctions(ctxt);
+      this.errorMessage.set(null);
+      this.monacoEditor()?.setEditorError(null);
+    } catch (e) {
+      const errMsg = (e as Error).message;
+      this.errorMessage.set(errMsg);
+      const parsedError = this.parseErrorString(errMsg);
+      this.monacoEditor()?.setEditorError(parsedError);
+      alert(`Cannot save program: compilation failed.\nError: ${errMsg}`);
+      return;
+    }
 
     // Find current config if available to copy it over
     const preset = this.presetsList().find(p => p.name === currentName);
@@ -519,6 +563,9 @@ export class LogicExplorerComponent implements OnInit {
 
       this.refreshApplicableActions();
 
+      // Clear any errors in the Monaco editor
+      this.monacoEditor()?.setEditorError(null);
+
       // Dynamically extract registered names to keep editor highlights synchronized perfectly!
       const rawData = ctxt.getRawData();
       const constructors = Object.keys(rawData.constructors);
@@ -527,10 +574,15 @@ export class LogicExplorerComponent implements OnInit {
       const types = Object.keys(rawData.types);
       updateLinearLogicTokens(constructors, functions, actions, types);
     } catch (e) {
-      this.errorMessage.set((e as Error).message);
+      const errMsg = (e as Error).message;
+      this.errorMessage.set(errMsg);
       this.story.set(null);
       this.currentContext.set(null);
       this.applicableActions.set([]);
+      
+      // Draw red squiggly lines in Monaco editor!
+      const parsedError = this.parseErrorString(errMsg);
+      this.monacoEditor()?.setEditorError(parsedError);
     }
   }
 
@@ -555,7 +607,8 @@ export class LogicExplorerComponent implements OnInit {
   }
 
   onCompileClick() {
-    this.compileSource(this.rawSource());
+    const currentSrc = this.monacoEditor()?.editor ? this.monacoEditor()!.editor.getValue() : this.rawSource();
+    this.compileSource(currentSrc);
   }
 
   /**
@@ -896,13 +949,12 @@ export class LogicExplorerComponent implements OnInit {
     return isNaN(val) ? 1.0 : val;
   }
 
-  onSimModeChange(event: Event) {
-    this.simMode.set((event.target as HTMLSelectElement).value as any);
-  }
+
 
   runSimulation() {
-    if (this.rawSource() !== this.compiledSource) {
-      this.compileSource(this.rawSource());
+    const currentSrc = this.monacoEditor()?.editor ? this.monacoEditor()!.editor.getValue() : this.rawSource();
+    if (currentSrc !== this.compiledSource) {
+      this.compileSource(currentSrc);
     }
 
     const startContext = this.currentContext();

animated-transformer/src/app/logic-explorer/__screenshots__/logic-explorer.component.spec.ts/LogicExplorerComponent-Simulation-and-Custom-Mapping-should-run-simulation-and-record-final-state-and-dataPoints-matching-custom-mapping-1.png

@@ -50,6 +50,17 @@ export type CodeStrUpdate =
       close: true;
     };
 
+export interface EditorPosition {
+  line?: number;
+  column?: number;
+}
+
+export interface EditorError {
+  message: string;
+  start?: EditorPosition;
+  end?: EditorPosition;
+}
+
 @Component({
   selector: 'app-monaco-js-editor',
   templateUrl: './monaco-js-editor.component.html',
@@ -151,6 +162,13 @@ export class MonacoJavaScriptEditorComponent implements OnInit, AfterViewInit, O
         if (this.changed() !== changedNow) {
           this.changed.set(changedNow);
         }
+        // Clear editor markers on user typing
+        loadMonaco().then((monaco) => {
+          const model = this.editor.getModel();
+          if (model) {
+            monaco.editor.setModelMarkers(model, 'logic-explorer', []);
+          }
+        });
       });
     }).catch(err => {
       console.error('Failed to initialize Monaco JS editor:', err);
@@ -237,4 +255,49 @@ export class MonacoJavaScriptEditorComponent implements OnInit, AfterViewInit, O
     };
     this.update.emit(configUpdate);
   }
+
+  setEditorError(error: EditorError | null) {
+    if (!this.editor) return;
+    
+    loadMonaco().then((monaco) => {
+      const model = this.editor.getModel();
+      if (!model) return;
+      
+      if (!error) {
+        monaco.editor.setModelMarkers(model, 'logic-explorer', []);
+        return;
+      }
+      
+      const lineCount = model.getLineCount();
+      
+      let startLine = error.start?.line ?? 1;
+      let startColumn = error.start?.column ?? 1;
+      if (startLine > lineCount) {
+        startLine = 1;
+        startColumn = 1;
+      }
+      
+      let endLine = error.end?.line ?? startLine;
+      let endColumn = error.end?.column;
+      if (endLine > lineCount) {
+        endLine = startLine;
+      }
+      
+      if (endColumn === undefined) {
+        const maxCol = model.getLineMaxColumn(endLine);
+        endColumn = Math.min(startColumn + 5, maxCol);
+      }
+      
+      const marker: any = {
+        severity: monaco.MarkerSeverity.Error,
+        message: error.message,
+        startLineNumber: startLine,
+        startColumn: startColumn,
+        endLineNumber: endLine,
+        endColumn: endColumn,
+      };
+      
+      monaco.editor.setModelMarkers(model, 'logic-explorer', [marker]);
+    });
+  }
 }