@nanoporetech-digital/components 3.7.0 → 3.8.0

package/dist/collection/components/table/table.js

@@ -9,18 +9,18 @@ import { TableRow, TableHeadFootRow } from './table.row';
 import { TableCell } from './table.cell';
 import { CSSNAMESPACE } from './table.constants';
 import { generateStore, storeSearch, storeSetConfig, storeSetData, storeSort, storeFilter, } from './table.store';
-import { arrMove, detectScrollSpeed, findScrollParent, isInViewport, } from './table.utils';
+import { arrMove, findScrollParent, isInViewport } from './table.utils';
 function perMark(name, end = false) {
   if (!Build.isDev || Build.isTesting || !performance)
     return;
   if (end) {
-    performance?.mark('end' + name);
-    performance?.measure(name, 'start' + name, 'end' + name);
-    const entries = performance?.getEntriesByName(name);
+    performance === null || performance === void 0 ? void 0 : performance.mark('end' + name);
+    performance === null || performance === void 0 ? void 0 : performance.measure(name, 'start' + name, 'end' + name);
+    const entries = performance === null || performance === void 0 ? void 0 : performance.getEntriesByName(name);
     console.log(entries[entries.length ? entries.length - 1 : 0]);
   }
   else {
-    performance?.mark('start' + name);
+    performance === null || performance === void 0 ? void 0 : performance.mark('start' + name);
   }
 }
 let id = 0;
@@ -45,12 +45,10 @@ export class Table {
     this.filters = [];
     this.currentFilters = '[]';
     this.currentSort = '';
+    this.cacheScrollPosition = 0;
     this.measureHeight = 0;
-    this.blockIos = new WeakMap();
     this.blockHeights = [];
     this.unitHeight = 0;
-    // Scroll / IO used for hiding / showing blocks
-    this.ignoreIO = true;
     this._isReady = false;
     /**
      * Fired when a column is dragged
@@ -130,52 +128,30 @@ export class Table {
           this._loading = false;
       }
     };
-    /**
-     * Attaches an intersection observer to each rendered tbody element
-     * shows / hides intersecting blocks' and sets heights for when they're hidden
-     * @param el - the tbody element to observe
-     * @param blockIndex - the rendering tbody we're attaching the IO to
-     */
-    this.setupBlockIO = (el, blockIndex) => {
-      if (!el || this.blockIos.has(el))
-        return;
-      const blockIo = new IntersectionObserver(([ioEntry]) => {
-        if (ioEntry.intersectionRatio === 0)
-          return;
-        // This is a bit gross
-        // The Intersection Observer (IO) fires in an incorrect order when the scrolling is very fast
-        // i.e. we go past blocks 3, 2, 1 and land on 0, but 3 can fire as 'intersecting' after 0.
-        // To fix that, we check - for realzies - if the block IS visible.
-        // BUT that test is not as sensitive to a block being visible via the IO,
-        // so doesn't always fire if scrolling slowly
-        // *sigh*
-        readTask(() => {
-          if (this.scrollSpeed < 100 || isInViewport(el, 0.01)) {
-            if (!this.ignoreIO) {
-              const potentialBlocks = [
-                blockIndex,
-                blockIndex + 1,
-                Math.max(0, blockIndex - 1),
-              ];
-              if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
-                this.debouncedBlockChange(potentialBlocks);
-              }
+    this.scrollHandler = () => {
+      this.cacheScrollPosition = this.scrollParent.scrollTop || window.scrollY;
+      requestAnimationFrame(() => {
+        let cumulativeHeight = 0;
+        let blockIndex = 0;
+        const blockLen = this.blocks.length;
+        while (blockIndex < blockLen &&
+          this.cacheScrollPosition >= cumulativeHeight) {
+          cumulativeHeight += this.getBlockHeight(blockIndex);
+          if (this.cacheScrollPosition < cumulativeHeight) {
+            const potentialBlocks = [
+              blockIndex,
+              blockIndex + 1,
+              Math.max(0, blockIndex - 1),
+            ];
+            if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
+              this.activeBlocks = potentialBlocks;
+              this.setBlockHeight();
             }
-            // fire the event regardless
-            this.nanoTblBlockRendered.emit({
-              block: blockIndex,
-              totalBlocks: this.blockElements.length,
-            });
+            this.primaryBlockIndex = blockIndex;
           }
-        });
-      }, {
-        threshold: [0],
-        root: this.scrollParent === document.scrollingElement
-          ? null
-          : this.scrollParent,
+          blockIndex++;
+        }
       });
-      blockIo.observe(el);
-      this.blockIos.set(el, blockIo);
     };
     this.handleColumnPinned = (positions) => {
       Object.entries(positions).forEach(([key, applied]) => {
@@ -183,8 +159,12 @@ export class Table {
       });
     };
     this.handleResizeChange = (e) => {
+      var _a;
       this.tableWrapperEle.className = '';
-      this.tableWrapperEle.classList.add(...(e.target.className + ' ' + `${CSSNAMESPACE}__wrap`).split(' '));
+      let classes = [`${CSSNAMESPACE}__wrap`];
+      if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.className)
+        classes = [...e.target.className.split(' '), ...classes];
+      this.tableWrapperEle.classList.add(...classes.filter((cl) => !!cl));
     };
     this.type = 'table';
     this.caption = undefined;
@@ -198,7 +178,7 @@ export class Table {
     this.rowRender = undefined;
     this.footRender = { pinned: 'bottom' };
     this.showFooter = false;
-    this.perBlock = 60;
+    this.perBlock = 40;
     this.searchTerm = undefined;
     this.customFilterFn = undefined;
     this.customSortFn = undefined;
@@ -208,7 +188,6 @@ export class Table {
     this.blocks = [];
     this.activeBlocks = [0, 1, 2];
     this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);
-    this.debouncedBlockChange = debounce(this.debouncedBlockChange.bind(this), 100);
   }
   get _loading() {
     return this.loading !== undefined ? this.loading : this.internalLoading;
@@ -305,6 +284,7 @@ export class Table {
   }
   // uses the first 'tr' of an active block as our yard stick
   set measureEle(el) {
+    var _a;
     if (!el)
       return;
     const potentialHeight = el.getBoundingClientRect().height;
@@ -313,7 +293,35 @@ export class Table {
         ? this.measureHeight
         : potentialHeight;
     this.unitHeight =
-      el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;
+      ((_a = el.querySelector('tr')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || this.unitHeight;
+  }
+  get scrollParent() {
+    return this._scrollParent;
+  }
+  set scrollParent(ele) {
+    if (ele === this._scrollParent)
+      return;
+    if (this._scrollParent) {
+      (this._scrollParent === document.documentElement
+        ? document
+        : this._scrollParent).removeEventListener('scroll', this.scrollHandler);
+    }
+    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler);
+    this._scrollParent = ele;
+  }
+  // used to fire `nanoTblBlockRendered` on block render change
+  get primaryBlockIndex() {
+    return this._primaryBlockIndex;
+  }
+  set primaryBlockIndex(blockIndex) {
+    if (this._primaryBlockIndex === blockIndex)
+      return;
+    this._primaryBlockIndex = blockIndex;
+    // fire block change event
+    this.nanoTblBlockRendered.emit({
+      block: blockIndex,
+      totalBlocks: this.blockElements.length,
+    });
   }
   // Misc.
   get isReady() {
@@ -328,18 +336,15 @@ export class Table {
   }
   // Private Logic
   // Listeners
-  scrollListener() {
-    // see explanation in `setupBlockIO`
-    const speed = detectScrollSpeed();
-    this.scrollSpeed = speed < 0 ? speed * -1 : speed;
-  }
   handleReady() {
     const hash = window.location.hash;
     if (hash.length > 1) {
-      const idRow = document.querySelector(hash);
-      if (idRow) {
-        idRow.scrollIntoView();
+      try {
+        const idRow = document.querySelector(hash);
+        if (idRow)
+          idRow.scrollIntoView();
       }
+      catch (e) { }
     }
     this.nanoTblReady.emit();
   }
@@ -351,8 +356,8 @@ export class Table {
   sortComplete(order, column) {
     this.columns = this.columns.map((c) => {
       if (c.prop === column)
-        return { ...c, order };
-      return { ...c, order: null };
+        return Object.assign(Object.assign({}, c), { order });
+      return Object.assign(Object.assign({}, c), { order: null });
     });
     this.nanoTblAfterSort.emit({ column: column, order });
     perMark('sort', true);
@@ -442,7 +447,8 @@ export class Table {
   }
   /** Scrolls to the top immediately - used whilst sorting / filtering */
   scrollToTop(element) {
-    const scrollBehaviour = this.scrollParent.style?.scrollBehavior;
+    var _a;
+    const scrollBehaviour = (_a = this.scrollParent.style) === null || _a === void 0 ? void 0 : _a.scrollBehavior;
     const scrollX = this.scrollParent.scrollLeft;
     this.scrollParent.style.scrollBehavior = 'auto';
     if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1)) {
@@ -454,10 +460,11 @@ export class Table {
       this.scrollParent.scrollLeft = scrollX;
     if (scrollBehaviour)
       this.scrollParent.style.scrollBehavior = scrollBehaviour;
+    this.scrollHandler();
   }
   setMeasureElement() {
     readTask(() => {
-      this.measureEle = this.blockElements.find((b) => !b?.classList?.contains(`${CSSNAMESPACE}__inactive`));
+      this.measureEle = this.blockElements.find((b) => { var _a; return !((_a = b === null || b === void 0 ? void 0 : b.classList) === null || _a === void 0 ? void 0 : _a.contains(`${CSSNAMESPACE}__inactive`)); });
     });
   }
   /**
@@ -466,7 +473,8 @@ export class Table {
    * So we just estimate for now
    */
   setInitialBlockDimension() {
-    if (!this.blockElements?.length)
+    var _a;
+    if (!((_a = this.blockElements) === null || _a === void 0 ? void 0 : _a.length))
       return;
     perMark('blockDims');
     const finishResizing = new Promise((resolve) => {
@@ -476,7 +484,8 @@ export class Table {
         if (!this.measureEle && !this.unitHeight)
           resolve();
         this.blockElements.forEach((el, i) => {
-          if (!el || !el.classList?.contains(`${CSSNAMESPACE}__inactive`)) {
+          var _a;
+          if (!el || !((_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains(`${CSSNAMESPACE}__inactive`))) {
             if (i === this.blockElements.length - 1)
               resolve();
             return;
@@ -525,7 +534,7 @@ export class Table {
       return;
     }
     perMark('setBlocks');
-    this.ignoreIO = true;
+    // this.ignoreIO = true;
     let i = 1;
     const l = this.virtualTotalItems > dRows.length
       ? this.virtualTotalItems
@@ -559,18 +568,16 @@ export class Table {
    * @returns a height string (incl px)
    */
   getBlockHeight(blockIndex) {
-    if (this.activeBlocks.includes(blockIndex))
-      return undefined;
     if (this.blockHeights.length) {
       const cachedBlockHeight = this.blockHeights.find((bh) => bh.blockIndex === blockIndex);
       if (cachedBlockHeight)
-        return cachedBlockHeight.height + 'px';
+        return cachedBlockHeight.height;
     }
     const blockLength = this.blocks[blockIndex].rows.length;
     if (blockLength === this.perBlock && this.measureHeight) {
-      return this.measureHeight + 'px';
+      return this.measureHeight;
     }
-    return this.unitHeight ? this.unitHeight * blockLength + 'px' : undefined;
+    return this.unitHeight ? this.unitHeight * blockLength : undefined;
   }
   /** cache the height for all active blocks for later renders */
   setBlockHeight() {
@@ -591,10 +598,6 @@ export class Table {
       });
     });
   }
-  debouncedBlockChange(newBlocks) {
-    this.activeBlocks = newBlocks;
-    this.setBlockHeight();
-  }
   /** Process slotted content */
   processSlots() {
     // see if we have slot content
@@ -624,14 +627,13 @@ export class Table {
     // but we don't want it to cause renders
     if (['rows', 'columns'].includes(stateName))
       return false;
-    if (Build.isDev)
+    if (Build.isDev && !Build.isTesting)
       console.log(stateName, _newVal, _oldVal);
   }
   componentWillRender() {
     perMark('render');
   }
   componentDidRender() {
-    requestAnimationFrame(() => (this.ignoreIO = false));
     this.setMeasureElement();
     perMark('render', true);
   }
@@ -650,7 +652,6 @@ export class Table {
         } }),
     ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("nano-skeleton", null) })))))))), !this._loading && !this.blocks.length && (h("tr", null, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found"))))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
-        requestAnimationFrame(() => this.setupBlockIO(tb, blockIndex));
       }, class: {
         [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
         [`${CSSNAMESPACE}__active`]: this.activeBlocks.includes(blockIndex),
@@ -658,7 +659,7 @@ export class Table {
       const rowIndex = blockIndex > 0 ? blockIndex * this.perBlock + i : i;
       return (h(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
     })) : (h("tr", null, h("td", { colSpan: this.store.config.state.columns.length, style: {
-        height: this.getBlockHeight(blockIndex),
+        height: this.getBlockHeight(blockIndex) + 'px',
       } })))))), this.showFooter && (h("tfoot", null, h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
       h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned, onColumnSortClick: this.sortStart, defaults: {
           sortable: this.defaultSort,
@@ -935,7 +936,7 @@ export class Table {
         "setter": false,
         "attribute": "per-block",
         "reflect": false,
-        "defaultValue": "60"
+        "defaultValue": "40"
       },
       "blocksLength": {
         "type": "number",
@@ -1490,14 +1491,5 @@ export class Table {
         "methodName": "virtualTotalItemsChangeHandler"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "scroll",
-        "method": "scrollListener",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
 }
 //# sourceMappingURL=table.js.map