fix(va): enable readOnly and hold filtering while editing

client/src/app/editor/editor.component.html

@@ -257,6 +257,7 @@
         >
           <ng-container *ngIf="hotTable.readOnly && !uploadPreview">
             <button
+              *ngIf="!isVaEmbed"
               type="button"
               class="btnView btn icon-collapse btn-sm btn-icon btn-block btn-dimmed"
               (click)="openQb()"
@@ -285,9 +286,7 @@
             </button>
           </ng-container>
 
-          <ng-container
-            *ngIf="!hotTable.readOnly && !uploadPreview && !isVaEmbed"
-          >
+          <ng-container *ngIf="!hotTable.readOnly && !uploadPreview">
             <button
               type="button"
               class="btn btn-sm btn-icon btn-outline-danger"
@@ -471,51 +470,46 @@
               </clr-tooltip-content>
             </clr-tooltip>
 
-            <!-- VA data-driven content mode: single Submit below the grid.
-                 Routes through the same checkSave() pipeline as the normal
-                 editor (validation + approval modal + saveTable). -->
+            <!-- VA data-driven content mode: filter controls only. Edit/Submit
+                 use the normal top toolbar (same as embed=true). VA opens
+                 read-only and filters live with the report; filtering
+                 repopulates the grid, so it is held while editing (change shown
+                 pending) and resumes on return to read-only. -->
             <ng-container *ngIf="isVaEmbed">
-              <!-- Single VA action bar: Submit | Auto-apply toggle | filter
-                   status (pending/loading), all on one line. -->
               <div class="va-filter-controls w-100 mt-2-i">
-                <button
-                  type="button"
-                  class="btn btn-sm btn-primary"
-                  [disabled]="submitLoading"
-                  (click)="checkSave()"
-                  title="Submit changes for approval"
-                >
-                  <clr-icon
-                    aria-hidden="true"
-                    shape="check"
-                    size="20"
-                  ></clr-icon>
-                  Submit
-                </button>
+                <!-- Read-only: auto-apply toggle + manual Apply (confirm mode).
+                     Hidden while editing (filtering is held). -->
+                <ng-container *ngIf="hotTable.readOnly">
+                  <label class="va-toggle">
+                    <input
+                      type="checkbox"
+                      [checked]="vaAutoApply"
+                      (change)="toggleVaAutoApply()"
+                    />
+                    Auto-apply VA filters
+                  </label>
 
-                <label class="va-toggle">
-                  <input
-                    type="checkbox"
-                    [checked]="vaAutoApply"
-                    (change)="toggleVaAutoApply()"
-                  />
-                  Auto-apply VA filters
-                </label>
+                  <button
+                    *ngIf="!vaAutoApply"
+                    [disabled]="
+                      vaFilterStatus !== 'pending' &&
+                      vaFilterStatus !== 'loading'
+                    "
+                    type="button"
+                    class="btn btn-sm btn-primary"
+                    (click)="applyPendingVaFilter()"
+                  >
+                    Apply filter
+                  </button>
+                </ng-container>
 
-                <button
-                  *ngIf="!vaAutoApply"
-                  [disabled]="
-                    vaFilterStatus !== 'pending' && vaFilterStatus !== 'loading'
-                  "
-                  type="button"
-                  class="btn btn-sm btn-primary"
-                  (click)="applyPendingVaFilter()"
-                >
-                  Apply filter
-                </button>
+                <!-- Edit mode: filtering is held so edits aren't wiped. -->
+                <span *ngIf="!hotTable.readOnly" class="va-disabled-text">
+                  VA filtering paused while editing
+                </span>
 
-                <!-- Persistent live region so screen readers announce the
-                     pending/loading transitions as they happen. -->
+                <!-- Persistent live region (shown in both modes) so a filter
+                     change that arrives while editing is announced as pending. -->
                 <span class="va-filter-status" role="status" aria-live="polite">
                   <span
                     *ngIf="vaFilterStatus === 'pending'"

client/src/app/editor/editor.component.scss

@@ -1,4 +1,3 @@
-
 .va-filter-controls {
   display: flex;
   align-items: center;
@@ -23,3 +22,8 @@
   font-style: italic;
   color: #0072a3;
 }
+
+.va-disabled-text {
+  font-style: italic;
+  opacity: 0.7;
+}

client/src/app/editor/editor.component.ts

@@ -1003,6 +1003,14 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     const hot = this.hotInstance
     if (!hot) return
 
+    // Entering edit mode: cancel any scheduled VA filter apply so it can't fire
+    // mid-edit and wipe the edits. A pending filter is re-applied on the return
+    // to read-only (cancelEdit).
+    if (this.vaDebounceTimer) {
+      clearTimeout(this.vaDebounceTimer)
+      this.vaDebounceTimer = undefined
+    }
+
     const columnSorting = hot.getPlugin('multiColumnSorting')
     const sortConfigs = this.getCurrentSortConfigs()
 
@@ -1098,6 +1106,16 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     this.checkRowLimit()
+
+    // Back to read-only: apply any VA filter change that was held pending while
+    // editing (live mode). Confirm mode leaves it staged for the Apply button.
+    if (
+      this.isVaEmbed &&
+      this.vaAutoApply &&
+      this.vaFilterStatus === 'pending'
+    ) {
+      this.applyPendingVaFilter()
+    }
   }
 
   /**
@@ -3576,11 +3594,11 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
       this.fixAriaAccessibility()
     }, 500)
 
-    // SAS Visual Analytics data-driven content mode: open editable immediately,
-    // re-apply any column visibility chosen by VA before this (filter) reload,
-    // and start receiving VA messages over the postMessage interface.
+    // SAS Visual Analytics data-driven content mode: open in read-only view (NOT
+    // immediate edit — the user clicks Edit to make changes), re-apply any column
+    // visibility chosen by VA before this (filter) reload, and start receiving VA
+    // messages over the postMessage interface.
     if (this.isVaEmbed) {
-      this.editTable()
       if (this.vaMessaging.visibleColumns) {
         this.applyVaColumnVisibility(new Set(this.vaMessaging.visibleColumns))
         if (this.hotInstance) this.hotInstance.render()
@@ -3673,9 +3691,12 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
     this.vaPendingSignature = signature
     this.vaFilterStatus = 'pending'
 
-    // Live mode auto-advances after the debounce settles; confirm waits for the
-    // Apply button. The pending indicator stays visible throughout the debounce.
-    if (this.vaAutoApply) this.scheduleVaFilterApply()
+    // Filtering repopulates the grid, so it must never run while the user is
+    // editing (it would wipe their in-progress edits). While in edit mode we
+    // only surface the pending indicator; the filter is applied on return to
+    // read-only (see cancelEdit). Live mode auto-advances after the debounce
+    // settles; confirm waits for the Apply button.
+    if (this.vaAutoApply && this.hotTable.readOnly) this.scheduleVaFilterApply()
   }
 
   /** Live mode: debounce a burst of VA changes into a single apply of the latest. */
@@ -3738,6 +3759,9 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
   /** Apply the staged VA filter (the debounce in live mode, or the Apply button). */
   public applyPendingVaFilter(): void {
     if (!this.vaPendingClauses) return
+    // Never apply while editing — the reload would wipe in-progress edits. The
+    // pending filter stays staged and is applied when the user leaves edit mode.
+    if (!this.hotTable.readOnly) return
     const clauses = this.vaPendingClauses
     const signature = this.vaPendingSignature
     this.vaPendingClauses = null