Fixing height readjustment issue

+ popup called "DataHarmonizer Demo
+ fix to call demoSchema()

Author: ddooley

lib/AppContext.js

@@ -627,9 +627,8 @@ export default class AppContext {
     let data_harmonizers = {}; // Tacitly ordered attribute object
 
     // If using DH_LinkML schema, this is the Schema Editor schema!
-    if (schema.name === 'DH_LinkML') { // referenced elsewhere as dh.context.schemaEditor
-      this.schemaEditor = new SchemaEditor(schema, this);
-    };
+    this.schemaEditor = schema.name === 'DH_LinkML' ? new SchemaEditor(schema, this) : null;
+
 
     Object.entries(schema.classes)
       // Container class is only used in input and output file coordination.
@@ -694,7 +693,7 @@ export default class AppContext {
               minRows: is_child ? 0 : 10,
               minSpareRows: 0,
               //minHeight: '200px', // nonsensical if no rows exist
-              height: '75vh',
+              height: '100%',
               // TODO: Workaround, possibly due to too small section column on child tables
               // colWidths: is_child ? 256 : undefined,
               colWidths: 200,

lib/DataHarmonizer.js

@@ -87,7 +87,7 @@ class DataHarmonizer {
 
     // interface layout pass-ins
     this.root = root;
-    this.hotRoot = options.hotRoot || $('<div>').appendTo(this.root)[0];
+    this.hotRoot = options.hotRoot || $('<div>').addClass('dh-hot-root').appendTo(this.root)[0];
     this.modalsRoot = options.modalsRoot || document.querySelector('body');
     this.loadingScreenRoot = options.loadingScreenRoot || this.root;
 
@@ -224,8 +224,7 @@ class DataHarmonizer {
         minRows: 5,
         minSpareRows: 0,
         width: '100%',
-        // Future: For empty dependent tables, tailor to minimize height.
-        height: '75vh',
+        height: '100%',
         fixedRowsTop: 0,
         // define your custom query method, e.g. queryMethod: searchMatchCriteria
         search: {},
@@ -362,7 +361,7 @@ class DataHarmonizer {
               hidden() {
                 return self.template_name != 'Schema';
               },
-              callback() { self.context.schemaEditor.previewSchema(); }
+              callback() { self.context.schemaEditor.demoSchema(); }
             },
             copy_to_schema: {
               name: 'Copy to schema',
@@ -941,14 +940,9 @@ class DataHarmonizer {
         afterRowMove: (movedRows, finalIndex, dropIndex, movePossible, orderChanged) => {
           if (!orderChanged) return;
           const numMoved = self._pendingMoveCount || 1;
-          const count = self.hot.countSourceRows();
-          const reordered = [];
-          for (let vRow = 0; vRow < count; vRow++) {
-            const physRow = self.hot.toPhysicalRow(vRow);
-            if (physRow !== null) {
-              reordered.push([...self.hot.getSourceDataAtRow(physRow)]);
-            }
-          }
+          // getData() returns the current visual-order rows as plain arrays,
+          // avoiding HOT-internal wrapper objects from getSourceDataAtRow.
+          const reordered = self.hot.getData();
           self.invalid_cells = {}; // physical row indices will reset; stale cache must be cleared
           // Capture scroll position before loadData resets it. Row count and
           // heights are unchanged (reorder only), so the same scrollTop pixel

lib/Footer.js

@@ -1,29 +1,29 @@
 import $ from 'jquery';
 
-const TEMPLATE = `
-<div class="input-group">
-  <div class="input-group-prepend">
+class Footer {
+  constructor(root, context, options = {}) {
+    this.root = $(root);
+
+    const modeLabel = options.modeLabel || (context.schemaEditor ? 'Schema Editor' : 'DataHarmonizer');
+
+    this.root.append(`
+<div style="overflow:auto">
+  <div id="dh-mode-badge" class="badge bg-secondary text-white px-3 py-2" style="float:right; font-size:1rem">${modeLabel}</div>
+  <div class="input-group" style="width:auto; display:inline-flex">
     <button class="btn btn-primary add-rows-button" type="submit" id="add-row"
         data-i18n="add-row">
       Add
     </button>
-  </div>
-  <input
-    type="text"
-    class="form-control add-rows-input"
-    value="1"
-  />
-  <div class="input-group-append">
+    <input
+      type="text"
+      class="form-control add-rows-input"
+      value="1"
+    />
     <span class="input-group-text" id="add-row-text" data-i18n="add-row-text">row(s)</span>
   </div>
-
 </div>
-`;
+`);
 
-class Footer {
-  constructor(root, context) {
-    this.root = $(root);
-    this.root.append(TEMPLATE);
     this.root.find('.add-rows-button').on('click', () => {
       const numRows = this.root.find('.add-rows-input').val();
       context.getCurrentDataHarmonizer().addRows('insert_row_below', numRows);

lib/Toolbar.js

@@ -527,6 +527,7 @@ class Toolbar {
   // INITIALIZATIN: Triggers only for loaded top-level template, rather than
   // any dependent.
   restartInterface(myContext) {
+    $('#dh-mode-badge').text(myContext.schemaEditor ? 'Schema Editor' : 'DataHarmonizer');
     this.updateGUI(
       myContext.getCurrentDataHarmonizer(),
       myContext.getTemplateName()
@@ -1378,6 +1379,7 @@ export function titleOverText(enm) {
     if (isMultiTab) {
       $('#concise-view-checkbox').prop('checked', true);
     }
+    $('#record-hierarchy-div').toggle(isMultiTab);
     this._syncConciseViewToDisplayMode();
   }
 

web/index.css

@@ -1,12 +1,64 @@
 html,
 body {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   margin: 0;
+  overflow: hidden;
   /* Prevents track or mouse scroll gestures from triggering page navigation in chrome off of displayed page. */
   overscroll-behavior: contain;
 }
 
+/* Full-viewport flex column: grid row grows with browser height; toolbar and footer stay content-height */
+#dh-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+#dh-layout-toolbar {
+  flex: 0 0 auto;
+}
+
+#dh-layout-footer {
+  flex: 0 0 auto;
+  padding-top: 6px;
+  padding-bottom: 8px;
+  border-top: 1px solid silver;
+}
+
+#dh-layout-grid {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+#dh-layout-grid > .col {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
+}
+
+#data-harmonizer-tabs {
+  flex: 0 0 auto;
+}
+
+#data-harmonizer-grid {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+#data-harmonizer-grid > .tab-pane {
+  height: 100%;
+}
+
+.dh-hot-root {
+  height: 100%;
+}
+
 /* For dh2-i18n-rc1 only! */
 #data-harmonizer-tabs {
   /* display: none; */

web/index.html

@@ -9,27 +9,26 @@
     <script src="dist-schemas/schemas.js"></script>
   </head>
   <body>
-    <div class="container-fluid">
-      <div class="row mt-3">
+    <div class="container-fluid" id="dh-layout">
+      <div class="row mt-3" id="dh-layout-toolbar">
         <div class="col">
           <div id="data-harmonizer-toolbar"></div>
         </div>
       </div>
 
-      <div class="row mt-3">
+      <div class="row mt-3" id="dh-layout-grid">
         <div class="col">
           <ul
             id="data-harmonizer-tabs"
             class="nav nav-tabs"
-            id="myTab"
             role="tablist"
           ></ul>
           <div id="data-harmonizer-grid" class="tab-content"></div>
         </div>
       </div>
 
-      <div class="row mt-3">
-        <div class="col"><!--  col-md-6 -->
+      <div class="row mt-2" id="dh-layout-footer">
+        <div class="col">
           <div id="data-harmonizer-footer"></div>
         </div>
       </div>

web/index.js

@@ -79,7 +79,7 @@ const main = async function () {
           getSchema: async (s) =>
             Template.create(s).then((result) => result.current.schema),
         });
-        new Footer(dhFooterRoot, context);
+        new Footer(dhFooterRoot, context, { modeLabel: 'DataHarmonizer Demo' });
       });
     }
     return;