translation form fixes and new styling

Author: ddooley

lib/SchemaEditor.js

@@ -293,7 +293,7 @@ export class SchemaEditor {
 	    // row cell metadata. Issue: if a schema has lost focus, and instead
 	    // all schemas are selected ...
 	    const schema_row = schema.current_selection[0];
-	    if (schema_row < 0) {
+	    if (schema_row == null || schema_row < 0) {
 	      alert("In order to see the translation form, first select a row with a schema that has locales.")
 	      return false;
 	    }
@@ -311,6 +311,7 @@ export class SchemaEditor {
 
 	    // Translation table form for all selected rows.
 	    const [schema_part, key_name, sub_part, sub_part_key_name, text_columns] = this.TRANSLATABLE[dh.template_name];
+	    const colPct = Math.floor(100 / text_columns.length);
 
 	    let translate_rows = '';
 
@@ -378,7 +379,7 @@ export class SchemaEditor {
 	              value = value.join(';')
 	          }
 
-	          translate_cells += `<td><textarea name="${column_name}" data-path="${path}">${value}</textarea></td>`;
+	          translate_cells += `<td style="width:${colPct}%;max-width:${colPct}%"><textarea name="${column_name}" data-path="${path}">${value}</textarea></td>`;
 	        }
 	        // Because origin is different, we can't bring google 
 	        // translate results directly into an iframe.
@@ -394,7 +395,7 @@ export class SchemaEditor {
 	          <thead>
 	            <tr>
 	              <th class="locale">locale</th>
-	              <th>${this.TRANSLATABLE[dh.template_name][4].join('</th><th>')}</th>
+	              ${text_columns.map(col => '<th style="width:' + colPct + '%;max-width:' + colPct + '%">' + col + '</th>').join('')}
 	              <th>translate</th>
 	            </tr>
 	          </thead>
@@ -510,6 +511,83 @@ export class SchemaEditor {
 	//initSchemaTab (dh, hot_settings) {}
 	//initSlotGroupTab (dh, hot_settings) {}
 
+	/**
+	 * Build (or rebuild) an index of schema-defined slot rows for the Slot tab.
+	 * The index maps `${schema_id}\0${slot_name}` → physical row number for every
+	 * row whose slot_type is 'slot'.  Used by the cells() callback so it can look
+	 * up inherited values in O(1) instead of walking adjacent visual rows (which
+	 * broke under sorting, drag-and-drop, or row deletion).
+	 */
+	buildSlotDefinitionIndex(dh) {
+	  const index = new Map();
+	  const sourceData = dh.hot.getSourceData();
+	  if (!sourceData) return;
+	  for (let physRow = 0; physRow < sourceData.length; physRow++) {
+	    const slot_type = dh.hot.getSourceDataAtCell(physRow, dh.slot_type_column);
+	    if (slot_type === 'slot') {
+	      const schema = dh.hot.getSourceDataAtCell(physRow, dh.schema_name_column);
+	      const name   = dh.hot.getSourceDataAtCell(physRow, dh.slot_name_column);
+	      if (schema != null && schema !== '' && name != null && name !== '') {
+	        index.set(`${schema}\0${name}`, physRow);
+	      }
+	    }
+	  }
+	  dh.slotDefinitionIndex = index;
+	}
+
+	/**
+	 * Post-filter validation errors for the Slot tab.
+	 * Removes errors on empty cells of slot_usage rows where the corresponding
+	 * schema-defined slot row (same schema_id + slot_name) has a non-empty value
+	 * for that column.  Those cells are intentionally blank — their value is
+	 * supplied by LinkML inheritance — so flagging them as required-but-empty
+	 * would be a false positive.  Cells in slot/attribute rows, and non-empty
+	 * cells in slot_usage rows, are left untouched.
+	 *
+	 * @param {Object} dh  DataHarmonizer instance for the Slot tab.
+	 * @param {Array}  data  Visual-row data array from hot.getData().
+	 * @param {Object} errors  Raw error map {visualRow: {col: message}}.
+	 * @returns {Object}  Filtered error map.
+	 */
+	filterInheritedSlotUsageErrors(dh, data, errors) {
+	  if (!dh.slotDefinitionIndex || dh.slotDefinitionIndex.size === 0) return errors;
+
+	  const filtered = {};
+	  for (const [vRowStr, colErrors] of Object.entries(errors)) {
+	    const vRow = Number(vRowStr);
+	    const slotType = data[vRow]?.[dh.slot_type_column];
+
+	    if (slotType !== 'slot_usage') {
+	      filtered[vRowStr] = colErrors;
+	      continue;
+	    }
+
+	    // For slot_usage rows keep only errors on cells that are not inherited.
+	    const slotName  = data[vRow][dh.slot_name_column];
+	    const schemaName = data[vRow][dh.schema_name_column];
+	    const defPhysRow = dh.slotDefinitionIndex.get(`${schemaName}\0${slotName}`);
+
+	    const keptErrors = {};
+	    for (const [colStr, message] of Object.entries(colErrors)) {
+	      const col = Number(colStr);
+	      const cellValue = data[vRow][col];
+	      const isEmpty = cellValue === null || cellValue === undefined || cellValue === '';
+
+	      if (isEmpty && defPhysRow !== undefined) {
+	        const defValue = dh.hot.getSourceDataAtCell(defPhysRow, col);
+	        const defHasValue = defValue !== null && defValue !== undefined && defValue !== '';
+	        if (defHasValue) continue; // inherited — suppress error
+	      }
+	      keptErrors[colStr] = message;
+	    }
+
+	    if (Object.keys(keptErrors).length > 0) {
+	      filtered[vRowStr] = keptErrors;
+	    }
+	  }
+	  return filtered;
+	}
+
 	initSlotTab (dh, hot_settings) {
 
 	  const slot_table_attribute_column = ['rank','inlined','inlined_as_list'].map((x) => dh.slot_name_to_column[x]);
@@ -526,31 +604,62 @@ export class SchemaEditor {
 
 	  hot_settings.fixedColumnsLeft = 4; // Freeze both schema and slot name.
 
+	  // Override getInvalidCells so that empty inherited cells in slot_usage rows
+	  // are not reported as validation errors.  The standard validator sees them
+	  // as required-but-empty, but they are intentionally blank (values are
+	  // supplied by downstream LinkML inheritance from the parent slot definition).
+	  const originalGetInvalidCells = dh.getInvalidCells.bind(dh);
+	  dh.getInvalidCells = (data) => {
+	    const errors = originalGetInvalidCells(data);
+	    return this.filterInheritedSlotUsageErrors(dh, data, errors);
+	  };
+
+	  // Maintain the slot-definition index so cells() can do O(1) lookups.
+	  // indexDirty starts true so the very first render always attempts a build.
+	  // beforeRender fires just before HOT calls cells() for each visible cell.
+	  // We stay dirty until a render sees actual source rows, because in HOT 15
+	  // afterLoadData fires AFTER the render cycle that follows updateSettings({data}),
+	  // so we cannot rely on afterLoadData to mark dirty before the first real render.
+	  let indexDirty = true;
+	  const markDirty = () => { indexDirty = true; };
+	  dh.hot.addHook('afterChange', (changes) => { if (changes) markDirty(); });
+	  dh.hot.addHook('afterRemoveRow', markDirty);
+	  dh.hot.addHook('afterRowMove', markDirty);
+	  dh.hot.addHook('beforeRender', () => {
+	    if (indexDirty) {
+	      this.buildSlotDefinitionIndex(dh);
+	      // Only mark clean once real data is present.  If HOT hasn't loaded its
+	      // rows yet the rebuilt index will be empty and we retry next render.
+	      const sourceData = dh.hot.getSourceData();
+	      if (sourceData && sourceData.length > 0) {
+	        indexDirty = false;
+	      }
+	    }
+	  });
+
 	  // function(row, col, prop) has prop == column name if implemented; otherwise = col #
 	  // In some report views certain kinds of row are readOnly, e.g. Schema
 	  // Editor schema slots if looking at a class's slot_usage slots.
 	  // Issue: https://forum.handsontable.com/t/gh-6274-best-place-to-set-cell-meta-data/4710
 	  // We can't lookup existing .getCellMeta() without causing stack overflow.
-	  // ISSUE: We have to disable sorting for 'Slot' table because 
+	  // ISSUE: We have to disable sorting for 'Slot' table because
 	  // separate reporting controls are at work.
 
-	  // ASSUMES VISUAL alphabetical order with schema fields at top
 	  const slot_editable_keys = [dh.slot_type_column, dh.slot_class_name_column, dh.slot_name_column];
 
 	  // ISSUE: user clicking on "toggle expert user mode" doesn't visually
-	  // take effect until after dh.render(), so cellProp.readOnly doesn't 
+	  // take effect until after dh.render(), so cellProp.readOnly doesn't
 	  // work right away.
-	  // NOTE: cells() receives visual row indices; toPhysicalRow() maps to source data.
-	  hot_settings.cells = function(row, col) { 
+	  // NOTE: In HOT 15+, cells() receives PHYSICAL row and column indices
+	  // (see dynamicCellMeta.js: cellMeta.cells(physicalRow, physicalColumn, prop)).
+	  // All lookups below use getSourceDataAtCell with the physical row directly.
+	  hot_settings.cells = function(row, col) {
 	    let cellProp = {};
 	    let read_only = false;
 
-	    // cells() receives a visual row index; convert to physical for source data access.
-	    const physicalRow = dh.hot.toPhysicalRow(row);
-	    // slot, slot_usage, attribute
-	    let slot_type = dh.hot.getSourceDataAtCell(physicalRow, dh.slot_type_column);
+	    // row is already a physical row index in HOT 15+.
+	    const slot_type = dh.hot.getSourceDataAtCell(row, dh.slot_type_column);
 	    cellProp.className = 'tabFieldTd ' + slot_type;
-	    let visual_row = row;
 
 			if (col in [dh.schema_name_column]) { // 0th column usually.
 				read_only = true;
@@ -564,29 +673,21 @@ export class SchemaEditor {
 				if (slot_editable_keys.includes(col)) {
 		    	read_only = false;
 				}
-
-				// INHERIT read-only from slot fields.
-	    	// If previous row has type 'slot' and same 'name'    
-				else
-			    if (read_only === false) {
-			    	// Source data or visual data?
-			    	let found = false;
-			    	const this_slot_name = dh.hot.getDataAtCell(visual_row, dh.slot_name_column);
-			    	const this_schema = dh.hot.getDataAtCell(visual_row, dh.schema_name_column);
-				    while (visual_row > 0 && this_slot_name === dh.hot.getDataAtCell(visual_row-1, dh.slot_name_column) 
-				    	&& this_schema === dh.hot.getDataAtCell(visual_row-1, dh.schema_name_column)) {
-				    	visual_row += -1;
-				    	found = true;
-				   	}
-				   	if (found) {
-				    	const prev_slot_type = dh.hot.getDataAtCell(visual_row, dh.slot_type_column);
-				    	const prev_value = dh.hot.getDataAtCell(visual_row, col);
-				    	if (prev_value && prev_slot_type === 'slot') {
-				    		read_only = true;
-				    		cellProp.className += ' inherited'
-				    	}
-				    }
-				  }
+				// Inherit read-only from the schema-defined slot, if one exists.
+				// Look it up by (schema_id, slot_name) in the pre-built index so
+				// this is O(1) and unaffected by sort order or row position.
+				else if (read_only === false && dh.slotDefinitionIndex) {
+			    const this_slot_name = dh.hot.getSourceDataAtCell(row, dh.slot_name_column);
+			    const this_schema    = dh.hot.getSourceDataAtCell(row, dh.schema_name_column);
+			    const defPhysRow = dh.slotDefinitionIndex.get(`${this_schema}\0${this_slot_name}`);
+			    if (defPhysRow !== undefined) {
+			      const def_value = dh.hot.getSourceDataAtCell(defPhysRow, col);
+			      if (def_value !== null && def_value !== undefined && def_value !== '') {
+			        read_only = true;
+			        cellProp.className += ' inherited';
+			      }
+			    }
+				}
 			}
 
 	    /* Handsontable assigns .htDimmed to any cell with .readOnly = true
@@ -1427,7 +1528,7 @@ export class SchemaEditor {
               version:     value.version,
               class_uri:   value.class_uri,
               is_a:        value.is_a,
-              tree_root:   this.getBoolean(value.tree_root), // Not needed?
+              tree_root:   value.tree_root ?? null,
               see_also:    this.getDelimitedString(value.see_also)
             }); 
 
@@ -1584,19 +1685,19 @@ export class SchemaEditor {
       class_id:  class_name, 
       rank:        slot_obj.rank, 
       slot_group:  slot_obj.slot_group || '',
-      inlined:     this.getBoolean(slot_obj.inlined),
-      inlined_as_list: this.getBoolean(slot_obj.inlined_as_list),
+      inlined:     slot_obj.inlined ?? null,
+      inlined_as_list: slot_obj.inlined_as_list ?? null,
 
       slot_uri:    slot_obj.slot_uri,
       title:       slot_obj.title,
       range:       slot_obj.range || this.getDelimitedString(slot_obj.any_of, 'range'),
       unit:        slot_obj.unit?.ucum_code || '', // See https://linkml.io/linkml-model/latest/docs/UnitOfMeasure/
-      required:    this.getBoolean(slot_obj.required),
-      recommended: this.getBoolean(slot_obj.recommended),
+      required:    slot_obj.required ?? null,
+      recommended: slot_obj.recommended ?? null,
       description: slot_obj.description,
       aliases:     slot_obj.aliases,
-      identifier:  this.getBoolean(slot_obj.identifier),
-      multivalued: this.getBoolean(slot_obj.multivalued),
+      identifier:  slot_obj.identifier ?? null,
+      multivalued: slot_obj.multivalued ?? null,
       minimum_value: slot_obj.minimum_value,
       maximum_value: slot_obj.maximum_value,
       minimum_cardinality: slot_obj.minimum_cardinality,
@@ -1640,18 +1741,10 @@ export class SchemaEditor {
   }
 
 
-  /** Incomming data has booleans as json true/false; convert to handsontable TRUE / FALSE
-   * Return string so validation works on that (validateValAgainstVocab() where picklist
-   * is boolean)
-   */
-  getBoolean(value) {
-    if (value === undefined)
-      return value; // Allow default / empty-value to be passed along.
-    return(!!value).toString().toUpperCase();
-  };
-
   setToBoolean(value) {
-    return value?.toLowerCase?.() === 'true';
+    if (typeof value === 'boolean') return value;
+    if (value === null || value === undefined) return false;
+    return value.toLowerCase() === 'true';
   }
 
   deleteRowsByKeys(class_name, keys) {