Improve ECL builder resilience and bindings sandbox UX

- Fall back to < 762705008 attribute range and << 138875005 value range when MRCM is unavailable; show a subtle info hint instead of silently failing
- Retry ecl-string-to-model and ecl-model-to-string against the central Snowstorm server when the configured server lacks those util endpoints
- Change answer options ECL field to a 3-row textarea
- Widen properties panel to 1/3 of the workspace layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: alopezo

src/app/bindings-sandbox/bindings-sandbox.component.css

@@ -44,7 +44,7 @@
 .workspace-layout {
   position: relative;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 420px;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
   gap: var(--bs-space-4);
   align-items: start;
 }

src/app/bindings-sandbox/bindings-sandbox.component.html

@@ -260,7 +260,7 @@ <h4>Answer</h4>
             @if (newBindingForm.controls.type.value != 'Section header' && newBindingForm.controls.type.value != 'Text box' && newBindingForm.controls.type.value != 'Checkbox' && newBindingForm.controls.type.value != 'Integer' && newBindingForm.controls.type.value != 'Decimal') {
               <mat-form-field class="input-field">
                 <mat-label>Answer options: ECL Expression</mat-label>
-                <input matInput type="text" formControlName="ecl" placeholder="Enter ECL...">
+                <textarea matInput rows="3" formControlName="ecl" placeholder="Enter ECL..."></textarea>
                 <a href="javascript:void(0)" class="field-builder-link" (click)="openEclBuilder(newBindingForm.get('ecl')?.value, 'ecl')">ECL Builder</a>
                 @if (newBindingForm.get('ecl')?.value) {
                   <button matSuffix mat-icon-button aria-label="Clear" (click)="newBindingForm.get('ecl')?.reset()">

src/app/bindings/ecl-builder/attribute-editor/attribute-editor.component.css

@@ -51,6 +51,20 @@
   color: rgba(0, 0, 0, 0.7);
 }
 
+.mrcm-fallback-hint {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--mat-sys-outline);
+}
+
+.mrcm-fallback-hint .hint-icon {
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+}
+
 @media (max-width: 900px) {
   .field-grid {
     grid-template-columns: 1fr;

src/app/bindings/ecl-builder/attribute-editor/attribute-editor.component.html

@@ -13,6 +13,13 @@
     </div>
   }
 
+  @if (mrcmFailed) {
+    <div class="mrcm-fallback-hint">
+      <mat-icon class="hint-icon">info_outline</mat-icon>
+      <span>MRCM unavailable — showing all attributes</span>
+    </div>
+  }
+
   <div class="field-grid">
     <app-constraint-operator-select
       class="attribute-operator-cell"
@@ -25,7 +32,7 @@
 
     <app-multi-prefix-select-binding
       class="attribute-name-cell"
-      [binding]="{ title: 'Attribute name', note: domainAttributesEcl ? 'Restricted by MRCM' : '', ecl: domainAttributesEcl, type: 'Select' }"
+      [binding]="{ title: 'Attribute name', note: mrcmFailed ? '' : (domainAttributesEcl ? 'Restricted by MRCM' : ''), ecl: domainAttributesEcl, type: 'Select' }"
       [term]="attributeNameSelection"
       [readonly]="readonly"
       [appearance]="'outline'"
@@ -57,7 +64,7 @@
     <app-concept-picker
       class="value-cell"
       [label]="'Value'"
-      [note]="getAttributeRangeEcl() ? 'Constrained by attribute range' : ''"
+      [note]="mrcmFailed ? 'Any SNOMED concept' : (getAttributeRangeEcl() ? 'Constrained by attribute range' : '')"
       [ecl]="getAttributeRangeEcl()"
       [conceptId]="valueConceptId"
       [readonly]="readonly"

src/app/bindings/ecl-builder/attribute-editor/attribute-editor.component.ts

@@ -19,6 +19,7 @@ export class AttributeEditorComponent implements OnChanges {
   domainAttributes: EclDomainAttribute[] = [];
   domainAttributesEcl = '';
   loadingDomainAttributes = false;
+  mrcmFailed = false;
   attributeNameSelection: { code: string; display: string } | null = null;
 
   readonly comparisonOperators: EclComparisonOperator[] = ['=', '!='];
@@ -96,6 +97,7 @@ export class AttributeEditorComponent implements OnChanges {
   }
 
   getAttributeRangeEcl(): string {
+    if (this.mrcmFailed) return '<< 138875005';
     const conceptId = this.extractConceptId(this.attribute.attributeName.conceptId);
     const matching = this.domainAttributes.find((item) => item.conceptId === conceptId);
     return matching?.attributeRange?.[0]?.rangeConstraint || '';
@@ -109,6 +111,7 @@ export class AttributeEditorComponent implements OnChanges {
       return;
     }
 
+    this.mrcmFailed = false;
     this.loadingDomainAttributes = true;
     this.eclBuilderService.getDomainAttributes(conceptId).subscribe({
       next: (attributes) => {
@@ -119,8 +122,9 @@ export class AttributeEditorComponent implements OnChanges {
         this.loadingDomainAttributes = false;
       },
       error: () => {
+        this.mrcmFailed = true;
         this.domainAttributes = [];
-        this.domainAttributesEcl = '';
+        this.domainAttributesEcl = '< 762705008';
         this.loadingDomainAttributes = false;
       }
     });

src/app/bindings/ecl-builder/ecl-builder.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Observable, map, of } from 'rxjs';
+import { Observable, catchError, map, of } from 'rxjs';
 import { TerminologyService } from '../../services/terminology.service';
 import {
   EclAttribute,
@@ -26,27 +26,43 @@ export class EclBuilderService {
       return of(this.transformIn({ wildcard: true, returnAllMemberFields: false }));
     }
 
+    const headers = new HttpHeaders({ 'Content-Type': 'text/plain' });
+    const options = { headers, responseType: 'json' as const };
+
     return this.http
-      .post<any>(`${this.getSnowstormBaseUrl()}/util/ecl-string-to-model`, normalized, {
-        headers: new HttpHeaders({
-          'Content-Type': 'text/plain'
-        }),
-        responseType: 'json' as const
-      })
-      .pipe(map((model) => this.transformIn(model)));
+      .post<any>(`${this.getSnowstormBaseUrl()}/util/ecl-string-to-model`, normalized, options)
+      .pipe(
+        catchError(() =>
+          this.http.post<any>(
+            `${this.fallbackSnowstormBase}/util/ecl-string-to-model`,
+            normalized,
+            options
+          )
+        ),
+        map((model) => this.transformIn(model))
+      );
   }
 
+  private readonly fallbackSnowstormBase = 'https://snowstorm.ihtsdotools.org/snowstorm/snomed-ct';
+
   modelToString(model: EclExpressionConstraint): Observable<string> {
     const clonedModel = this.deepClone(model);
     this.transformOut(clonedModel);
 
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+
     return this.http
-      .post<any>(`${this.getSnowstormBaseUrl()}/util/ecl-model-to-string`, clonedModel, {
-        headers: new HttpHeaders({
-          'Content-Type': 'application/json'
-        })
-      })
-      .pipe(map((response) => response?.eclString ?? ''));
+      .post<any>(`${this.getSnowstormBaseUrl()}/util/ecl-model-to-string`, clonedModel, { headers })
+      .pipe(
+        catchError(() =>
+          this.http.post<any>(
+            `${this.fallbackSnowstormBase}/util/ecl-model-to-string`,
+            clonedModel,
+            { headers }
+          )
+        ),
+        map((response) => response?.eclString ?? '')
+      );
   }
 
   getDomainAttributes(parentConceptId: string): Observable<EclDomainAttribute[]> {