controlled visibility based on foreign key(s) of dependent tables.

moved version over to help menu

Author: ddooley

lib/AppContext.js

@@ -418,7 +418,7 @@ export default class AppContext {
           const [class_name, tree_obj] = obj;
 
           // if it shares a key with another class which is its parent, this DH must be a child
-          const is_child = this.relations?.[class_name]?.parent;
+          const is_child = this.getParents(class_name);
 
           // Doesn't build if tab id already exists.
           const dhId = `data-harmonizer-grid-${index}`;
@@ -497,6 +497,14 @@ export default class AppContext {
     return data_harmonizers;
   }
 
+  getParents(template_name) {
+    return this.relations?.[template_name]?.parent;
+  }
+
+  getChildren(template_name) {
+    return this.relations?.[template_name]?.child;
+  }
+
   // Determine if parent relationships link class_name to given ancestor
   isAncestor(class_names, ancestor_name) {
     let subject_name = class_names.shift();
@@ -508,12 +516,32 @@ export default class AppContext {
       if (this.relations[subject_name].parent[ancestor_name])
         return true;
       // Ancestor wasn't one of parents, so try search on all ancestors.
-      //console.log(this.relations[subject_name].parent, Object.values(this.relations[subject_name].parent))
       class_names.push(Object.values(this.relations[subject_name].parent));
     }
     return this.isAncestor(class_names, ancestor_name)
   }
 
+  /* Retrieves ordered list of tables that ultimately have given template as
+   * a foreign key.  Whether it is to enact cascading visibility, update or
+   * deletion events, this provides the order in which to trigger changes.
+   * Issue is that intermediate tables need to be checked in order due to 
+   * dependencies by foreign keys.
+   * Relying on javascript implicit ordering of dictionary added elements.
+   */
+  getDependents(class_names) {
+    // Initialization case
+    if (typeof class_names == "string") {
+      class_names = {...this.getChildren(class_names)};
+    }
+    //
+    let children = this.getChildren(class_names);
+    if (children) {
+      class_names = {...children};
+      return getDependents(class_names);
+    }
+    return class_names;
+  }
+
   /*
   Return initialized, rendered dataHarmonizer instances rendered in order.
   If a template name is provided, only include that one in its schema, and any underlings.

lib/DataHarmonizer.js

@@ -2,6 +2,7 @@ import '@selectize/selectize';
 import Handsontable from 'handsontable';
 import SheetClip from 'sheetclip';
 import $ from 'jquery';
+import {range as arrayRange} from 'lodash';
 import 'jquery-ui-bundle';
 import 'jquery-ui/dist/themes/base/jquery-ui.css';
 
@@ -751,11 +752,25 @@ class DataHarmonizer {
           }
         },
         afterSelection: (row, column, row2, column2) => {
+          // A change in selected row
+          if (self.current_selection[0] != row) {
+            // Possibly focused key has changed child table's filter.
+            // Issue: need to cascade this down immediately to any
+            // subordinate table, otherwise if doing on-demand from a table's 
+            // perspective, then if such a table depends on an intermediate that
+            // hasn't been refreshed, we'll get a wrong display.
+
+            Object.entries(this.context.getDependents(this.template_name))
+            .forEach(([child_name, child]) => {
+              // Dependent tables determine what parent foreign key values they
+              // need to filter view by
+              console.log("showing", child_name)
+              this.showRowsByKeyVals(child_name);
+            });
+          };
+
           self.current_selection = [row, column, row2, column2];
-          // Two possible actions:
-          // - For each subordinate table send a message to refilter
           // - See if sidebar info is required for top column click.
-
           if (this.helpSidebar) {
             if (column > -1) {
               const field = self.slots[column];
@@ -834,24 +849,48 @@ class DataHarmonizer {
     if (startRowIndex === false)
       startRowIndex = this.hot.countRows();
 
-    console.log("menu",this.template_name, this.context.relations?.[this.template_name]?.parent)
-
+    let parents = this.context.getParents(this.template_name);
     // If this has no foreign key parent table(s) then go ahead and add x rows.
-    if (! this.context.relations?.[this.template_name]?.parent) {
+    if (!parents) {
       // Insert the new rows below the last existing row
       this.hot.alter(row_where, startRowIndex, numRows);
       return;
     }
 
-    // Here we deal with adding rows that need foreign keys.
-    // Locate each foreign key and fetch its focused value, and copy into new
-    // records below.  
-    // If missing key value(s), prompt user to focus appropriate tab(s) row
-    // and try again.
+    let [required_selections, errors] = this.getForeignKeyValues(parents);
+
+    if (errors) {
+      // Prompt user to select appropriate parent table row(s) first.
+      $('#empty-parent-key-modal-info').html(errors);
+      $('#empty-parent-key-modal').modal('show');
+      return;
+    }
+
+    this.hot.alter(row_where, startRowIndex, numRows);
 
+    // Populate new rows with selected foreign key value(s)
+    this.hot.batch(() => {
+      for (let row = startRowIndex; row < startRowIndex + numRows; row++) {
+        Object.entries(required_selections).forEach(([slot_name, value]) => {
+          const col = this.getColumnIndexByFieldName(slot_name);
+          this.hot.setDataAtCell(row, col, value);
+        });
+      };
+    });
+
+  }
+
+
+
+  // Here we deal with adding rows that need foreign keys.
+  // Locate each foreign key and fetch its focused value, and copy into new
+  // records below.  
+  // If missing key value(s), prompt user to focus appropriate tab(s) row
+  // and try again.
+  getForeignKeyValues(parents) {
     let required_selections = {};
-    let selection_error = '';
-    Object.entries(this.context.relations?.[this.template_name]?.parent)
+    let errors = '';
+    Object.entries(parents)
     .forEach(([parent_name, parent]) => {
       Object.entries(parent)
       .forEach(([slot_name, foreign_slot_name]) => {
@@ -871,33 +910,14 @@ class DataHarmonizer {
         }
         if (!selected) {
           //required_selections[slot_name] = {source: parent_name};
-          selection_error += `<li> <b>${parent_name}</b> (${foreign_slot_name})</li>`;
+          errors += `<li> <b>${parent_name}</b> (${foreign_slot_name})</li>`;
         }
         else {
           required_selections[slot_name] = slot_value;
         }
       });
     });
-
-    if (selection_error) {
-      // Prompt user to select appropriate parent table row(s) first.
-      $('#empty-parent-key-modal-info').html(selection_error);
-      $('#empty-parent-key-modal').modal('show');
-      return;
-    }
-
-    this.hot.alter(row_where, startRowIndex, numRows);
-
-    // Populate new rows with selected value(s)
-    this.hot.batch(() => {
-      for (let row = startRowIndex; row < startRowIndex + numRows; row++) {
-        Object.entries(required_selections).forEach(([slot_name, value]) => {
-          const col = this.getColumnIndexByFieldName(slot_name);
-          this.hot.setDataAtCell(row, col, value);
-        });
-      };
-    });
-
+    return [required_selections, errors]
   }
 
   getColumnIndexByFieldName(slot_name) {
@@ -910,6 +930,7 @@ class DataHarmonizer {
     return -1;
   }
 
+
 /*
   // Function to find the nearest index after the last non-empty value
   findNearestIndexAfterLastNonEmpty(column) {
@@ -1066,33 +1087,30 @@ class DataHarmonizer {
     filtersPlugin.filter();
   }
 
-  hideMatchingRows(columnIndex, valueToMatch = null) {
-    function resetHiddenRows(hotInstance) {
-      const hiddenRowsPlugin = hotInstance.getPlugin('hiddenRows');
-      hiddenRowsPlugin.showRows(hiddenRowsPlugin.getHiddenRows()); // Reset any previously hidden rows
-    }
-
-    function getAllRowIndices(hotInstance) {
-      const totalRows = hotInstance.countRows();
-      return Array.from({ length: totalRows }, (_, i) => i); // Return array of row indices [0, 1, 2, ..., totalRows - 1]
-    }
-
-    const hotInstance = this.hot;
+  /* For given template name, show only rows that conform to that class's
+   * foreign key-value constraints;
+   */
+  showRowsByKeyVals(template_name) {
+    const hotInstance = this.context.dhs[template_name].hot;
     const hiddenRowsPlugin = hotInstance.getPlugin('hiddenRows');
-    resetHiddenRows(hotInstance); // Reset any previously hidden rows
 
-    let rowsToHide;
-
-    if (valueToMatch === null || isEmptyUnitVal(columnIndex)) {
-      // Hide all rows if no valueToMatch is provided
-      rowsToHide = getAllRowIndices(hotInstance);
-    } else {
-      // Hide rows that do not match the value at the given columnIndex
-      rowsToHide = getAllRowIndices(hotInstance).filter((row) => {
-        const cellValue = hotInstance.getDataAtCell(row, columnIndex);
-        return cellValue !== valueToMatch;
-      });
-    }
+    // Ensure all rows are visible
+    hiddenRowsPlugin.showRows(hiddenRowsPlugin.getHiddenRows()); 
+
+    //Fetch key-values to match
+    let parents = this.context.getParents(template_name);
+    let [required_selections, errors] = this.getForeignKeyValues(parents);
+    // arrayRange() makes [0, ... n]
+    let rowsToHide = arrayRange(0,hotInstance.countRows()) 
+    .filter((row) => {
+      for (let [slot_name, value] of Object.entries(required_selections)) {
+        const col = this.context.dhs[template_name].getColumnIndexByFieldName(slot_name);
+        const cellValue = hotInstance.getDataAtCell(row, col);
+        console.log(template_name,row,slot_name, col,cellValue,value)
+        if (cellValue != value)
+          return true;
+      }
+    });
 
     hiddenRowsPlugin.hideRows(rowsToHide); // Hide the calculated rows
     hotInstance.render(); // Render the table to apply changes

lib/toolbar.html

@@ -144,8 +144,6 @@
           data-target="#fill-modal"
           >Fill column...</span
         >
-
-        <span class="dropdown-item disabled" id="version-dropdown-item"></span>
       </div>
     </div>
     <button
@@ -211,6 +209,7 @@
         data-i18n="help_contact"
         >Contact Us</span
       >
+      <span class="dropdown-item disabled" id="version-dropdown-item"></span>
     </div>
   </div>