feat(editor): mark derived variables as computed in the EDIT grid

Derived variables are read-only, but they were rendered exactly like any other
read-only column: dimmed via readonlyCell, with no indication that the column is
computed at read time rather than locked by a rule or by column level security.
The grid could not tell the difference either - getdata holds a derived column
read-only with a READONLY DQ rule, which is also a rule type a table can be
configured with.

getdata now names the derived columns in sasparams.DERIVEDVARS (space separated,
upper case, from MPE_DERIVED's outvars). The EDIT screen holds that list, and
marks those columns with their own classes instead of the read-only dimming:
a tinted header with an 'fx' marker and a tooltip, tinted italic cells, and a
left edge on the first derived column so the computed block reads as a group.
Blue is the info family, leaving the primary key green and the warning ochre to
their existing meanings. Light and dark values are both set.

The SASjs mock getdata.js returns the same field, so the Cypress suite exercises
the styling; the existing derived-variables spec asserted readonlyCell on the
derived header, which is now the fallback for a plain read-only column, so that
assertion moves to dc-derived-header and a physical column stays the control.

Lint: prettier --check clean on the touched client files; sasjs lint reports no
new warnings for getdata.sas.

client/cypress/e2e/derived-variables.cy.ts

@@ -79,12 +79,22 @@ context('derived variables: ', function () {
   it('4 | a derived column is marked read-only, and opens no editor', () => {
     openEditor('TESTDATA.DERIVED_DEMO')
 
-    // the editor marks a read-only column with this class, on the header and on
-    // its cells (editor.component.ts, afterGetColHeader / afterGetCellMeta), so
-    // this asserts the state rather than inferring it from something not
-    // happening. STATE is the control: same grid, not read-only.
-    headerCell('REGION').should('have.class', 'readonlyCell')
-    headerCell('STATE').should('not.have.class', 'readonlyCell')
+    // a derived column is read-only AND computed, so the grid marks it apart
+    // from an ordinary read-only column - its own header/cell class, no
+    // readonlyCell dimming (editor.component.ts, afterGetColHeader /
+    // afterGetCellMeta). STATE is the control: same grid, a physical column.
+    headerCell('REGION').should('have.class', 'dc-derived-header')
+    headerCell('REGION').should('not.have.class', 'readonlyCell')
+    headerCell('STATE')
+      .should('not.have.class', 'dc-derived-header')
+      .and('not.have.class', 'readonlyCell')
+    getCellByHeaderAndRow(0, 'REGION').should('have.class', 'dc-derived-cell')
+    getCellByHeaderAndRow(0, 'STATE').should(
+      'not.have.class',
+      'dc-derived-cell'
+    )
+    // REGION is the first derived column, so it opens the computed block
+    headerCell('REGION').should('have.class', 'dc-derived-first')
 
     enterEditMode()
 

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

@@ -575,6 +575,8 @@ export class EditorComponent
   public hasBaseDropZoneOver = false
   public hasAnotherDropZoneOver = false
   public headerPks: string[] = []
+  /** Derived (computed) columns from MPE_DERIVED - read-only, and marked as such */
+  public derivedVars: string[] = []
   public columnLevelSecurityFlag = false
   public dateTimeHeaders: string[] = []
   public timeHeaders: string[] = []
@@ -1089,6 +1091,20 @@ export class EditorComponent
     return colRules?.readOnly
   }
 
+  /**
+   * A derived (computed) column - configured in MPE_DERIVED, created at read
+   * time. Read-only, and styled apart from an ordinary read-only column so the
+   * user can see that there is nothing to edit rather than that they may not.
+   */
+  isDerivedCol(col: string | number) {
+    const name =
+      typeof col === 'number'
+        ? (this.hotInstance?.colToProp(col) as string) || this.columnHeader[col]
+        : col
+
+    return !!name && this.derivedVars.includes(name.toUpperCase())
+  }
+
   isColHeader(col: string) {
     return this.headerArray.indexOf(col.toUpperCase()) > -1
   }
@@ -3964,6 +3980,12 @@ export class EditorComponent
 
     this.headerColumns = response.data.sasparams[0].COLHEADERS.split(',')
     this.headerPks = response.data.sasparams[0].PK.split(' ')
+    // Derived (computed) columns, named by getdata from MPE_DERIVED - read-only
+    // through a READONLY DQ rule, and marked in the grid so they read as
+    // computed rather than merely non-editable.
+    this.derivedVars = (response.data.sasparams[0].DERIVEDVARS || '')
+      .split(' ')
+      .filter((col: string) => !!col)
     this.columnLevelSecurityFlag = !!response.data.sasparams[0].CLS_FLAG
 
     if (this.columnLevelSecurityFlag)
@@ -4338,9 +4360,24 @@ export class EditorComponent
           // header columns styling - primary keys
           const isPKCol = column && this.isColPk(column)
           const isReadonlyCol = column && this.isReadonlyCol(column)
+          const isDerivedCol = column && this.isDerivedCol(column)
 
           if (isPKCol) th.classList.add('primaryKeyHeaderStyle')
-          if (isReadonlyCol && !isPKCol) th.classList.add('readonlyCell')
+          if (isReadonlyCol && !isPKCol && !isDerivedCol) {
+            th.classList.add('readonlyCell')
+          }
+
+          // a derived column is computed, not merely locked - give it its own
+          // hue and an 'fx' marker rather than the read-only dimming
+          if (isDerivedCol) {
+            th.classList.add('dc-derived-header')
+            th.title =
+              'Derived variable - computed at read time and cannot be edited'
+            const firstDerivedCol = this.columnHeader.findIndex(
+              (name: string) => this.isDerivedCol(name)
+            )
+            if (col === firstDerivedCol) th.classList.add('dc-derived-first')
+          }
 
           // Remove header arrow from Delete column
           if (col === 0) {
@@ -4356,6 +4393,7 @@ export class EditorComponent
           cellProperties: Handsontable.CellProperties
         ) => {
           const isReadonlyCol = col && this.isReadonlyCol(col)
+          const isDerivedCol = col && this.isDerivedCol(col)
 
           // Check if this cell should be marked as invalid due to duplicate primary key values
           // Only applies to primary key columns (col 1 through readOnlyFields)
@@ -4379,7 +4417,26 @@ export class EditorComponent
           }
 
           // Add readonlyCell class for readonly columns to maintain original styling
-          if (isReadonlyCol && !classes.includes('readonlyCell')) {
+          if (isDerivedCol) {
+            // a derived cell carries its own tint; the read-only dimming would
+            // wash it out, and "greyed out" is a different message from
+            // "computed here"
+            classes = classes.filter((c: string) => c !== 'readonlyCell')
+            if (!classes.includes('dc-derived-cell')) {
+              classes.push('dc-derived-cell')
+            }
+            // derived columns are appended after the physical ones - mark the
+            // start of the block so it reads as one group
+            const firstDerivedCol = this.columnHeader.findIndex(
+              (name: string) => this.isDerivedCol(name)
+            )
+            if (
+              col === firstDerivedCol &&
+              !classes.includes('dc-derived-first')
+            ) {
+              classes.push('dc-derived-first')
+            }
+          } else if (isReadonlyCol && !classes.includes('readonlyCell')) {
             classes.push('readonlyCell')
           }
 

client/src/app/models/TableData.ts

@@ -51,6 +51,11 @@ export interface SASParam {
   TRUNCATED?: number
   /** Reason shown in the tooltip when TRUNCATED is 1, else empty */
   TRUNC_MSG?: string
+  /**
+   * Space separated list of the derived (computed) columns from MPE_DERIVED,
+   * upper case. Empty when the table has none.
+   */
+  DERIVEDVARS?: string
 }
 
 export interface ExcelRule {

client/src/styles.scss

@@ -5019,6 +5019,57 @@ body[cds-theme='dark'] {
   border: 1px solid var(--cds-alias-status-warning) !important;
 }
 
+/* Derived (computed) columns: read-only, but computed at read time rather than
+  locked by policy.  Tinted and marked with an 'fx' glyph instead of the
+  read-only dimming, so the two do not read as the same thing.  Blue is the
+  info family - the primary key green and the warning ochre keep their meaning. */
+.handsontable th.dc-derived-header {
+  background: #d3e5f2 !important;
+  box-shadow: inset 0 -2px 0 #1a6ea3;
+}
+
+.handsontable th.dc-derived-header div::after {
+  content: 'fx';
+  margin-left: 4px;
+  font-size: 9px;
+  font-style: italic;
+  opacity: 0.7;
+}
+
+.handsontable td.dc-derived-cell {
+  background: #eef5fa !important;
+  font-style: italic;
+}
+
+/* the first derived column starts the computed block */
+.handsontable th.dc-derived-first {
+  border-left: 2px solid #1a6ea3 !important;
+}
+
+.handsontable td.dc-derived-cell.dc-derived-first {
+  box-shadow: inset 2px 0 0 #1a6ea3;
+}
+
+body[cds-theme='dark'] {
+  .handsontable th.dc-derived-header {
+    background: #2b4a5c !important;
+    box-shadow: inset 0 -2px 0 #4b9cc9;
+  }
+
+  .handsontable td.dc-derived-cell {
+    background: #24343d !important;
+    color: #dbe7ee;
+  }
+
+  .handsontable th.dc-derived-first {
+    border-left-color: #4b9cc9 !important;
+  }
+
+  .handsontable td.dc-derived-cell.dc-derived-first {
+    box-shadow: inset 2px 0 0 #4b9cc9;
+  }
+}
+
 .handsontable .numericListbox {
   text-align: right;
 }

sas/mocks/sasjs/services/editors/getdata.js

@@ -436,7 +436,11 @@ if (tableData && tableData.columns && tableData.rows) {
             CLS_FLAG: 0,
             ISMAP: 0,
             TRUNCATED: truncated,
-            TRUNC_MSG: truncMsg
+            TRUNC_MSG: truncMsg,
+            // names the derived columns for the grid, as getdata.sas does - the
+            // READONLY rule above is why they cannot be edited, this is how the
+            // EDIT screen knows they are computed rather than locked
+            DERIVEDVARS: derived.map(d => d.name).join(' ')
         }],
         versions: [],
         xl_rules: []
@@ -451,7 +455,7 @@ if (tableData && tableData.columns && tableData.rows) {
         ],
         maxvarlengths: [], query: [], sasdata: [],
         $sasdata: { vars: {} },
-        sasparams: [{ COLHEADERS: '', FILTER_TEXT: ' ', PKCNT: 0, PK: '', DTVARS: '', DTTMVARS: '', TMVARS: '', LOADTYPE: 'UPDATE', RK_FLAG: 0, CLS_FLAG: 0, ISMAP: 0, TRUNCATED: 0, TRUNC_MSG: '' }],
+        sasparams: [{ COLHEADERS: '', FILTER_TEXT: ' ', PKCNT: 0, PK: '', DTVARS: '', DTTMVARS: '', TMVARS: '', LOADTYPE: 'UPDATE', RK_FLAG: 0, CLS_FLAG: 0, ISMAP: 0, TRUNCATED: 0, TRUNC_MSG: '', DERIVEDVARS: '' }],
         versions: [], xl_rules: []
     }
 }

sas/sasjs/services/editors/getdata.sas

@@ -21,6 +21,10 @@
     DC_MAXOBS_WEBEDIT / DC_MAXCELLS_WEBEDIT limit, else 0
   @li TRUNC_MSG - the reason shown against the table name when TRUNCATED=1,
     else empty
+  @li DERIVEDVARS - space separated list of the derived (computed) columns
+    configured in MPE_DERIVED, upper case, empty when there are none.  They
+    are appended after the physical columns and are read-only; the EDIT grid
+    marks them so a user can see why a column cannot be edited.
 
   <h5> approvers </h5>
   <h5> dqrules </h5>
@@ -629,8 +633,19 @@ proc sql noprint;
 select count(*) into: ismap from &mpelib..mpe_xlmap_info
   where XLMAP_TARGETLIBDS="&orig_libds" and &dc_dttmtfmt. le TX_TO;
 
+/* the derived columns, named for the EDIT grid so it can mark them as special.
+  They are read-only through the READONLY DQ rule below, but that rule does not
+  say WHY the column cannot be edited - a computed column is a different thing
+  from an ordinary read-only one.  work.derived_vars exists on every path, empty
+  when the table has no derived variables. */
+%let derivedvars=;
+proc sql noprint;
+select upcase(name) into: derivedvars separated by ' '
+  from work.derived_vars;
+quit;
+
 data sasparams;
-  length colHeaders $20000 filter_text $32767 trunc_msg $200;
+  length colHeaders $20000 filter_text $32767 trunc_msg $200 derivedvars $32767;
   colHeaders=cats(upcase("%mf_getvarlist(sasdata1,dlm=%str(,))"));
   pkCnt=countw("&pk");
   pk="&pk";
@@ -641,6 +656,7 @@ data sasparams;
   if trim(symget('rk_underlying')) ne '' then rk_flag=1;
   else rk_flag=0;
   filter_text=symget('filter_text');
+  derivedvars=symget('derivedvars');
   /* set when the selection was cut down to the row / cell limit, so the EDIT
     screen can say so against the table name */
   truncated=&truncated;