#188 remove re-query of rows and fix type

Author: Michael Mrowetz

src/ts/helpers/dom.ts

@@ -67,17 +67,3 @@ export function getLastItemOfNodeList<T extends Node>(list: NodeListOf<T>) {
   }
   return list.item(list.length - 1);
 }
-
-/**
- * Helper to make `NodeListOf` iterable
- * @param list NodeListOf e.g. return value of `getElementsByClassName`
- * @param fn Function called for
- */
-export function forEachNodeList<T extends Node>(list: NodeListOf<T>, fn: {(el: T, index: number): void}): void {
-  if (!list || list.length === 0) {
-    return undefined;
-  }
-  for (let i = 0, len = list.length; i < len; i ++) {
-    fn(list.item(i), i);
-  }
-}

src/ts/typing/context.ts

@@ -32,13 +32,13 @@ export interface OverlayManagerClass {
 
   /** Opens an overlay - rerenders others  */
   openOverlay: (index: number, y: number, detailsHeight: number, entry: WaterfallEntry,
-    barEls: SVGGElement[]) => void;
+    rowItems: SVGAElement[]) => void;
   /** toggles an overlay - rerenders others  */
   toggleOverlay: (index: number, y: number, detailsHeight: number, entry: WaterfallEntry,
-    barEls: SVGGElement[]) => void;
+    rowItems: SVGAElement[]) => void;
 
   /** closes on overlay - rerenders others internally */
-  closeOverlay: (index: number, detailsHeight: number, barEls: SVGGElement[]) => void;
+  closeOverlay: (index: number, detailsHeight: number, rowItems: SVGAElement[]) => void;
 
   // constructor(context: Context, overlayHolder: SVGGElement);
 }

src/ts/waterfall/details-overlay/overlay-manager.ts

@@ -1,5 +1,4 @@
 import {
-  forEachNodeList,
   getLastItemOfNodeList,
   getParentByClassName,
   removeChildren,
@@ -87,7 +86,7 @@ class OverlayManager implements OverlayManagerClass {
    * Opens an overlay - rerenders others internaly
    */
   public openOverlay(index: number, y: number, detailsHeight: number,
-                     entry: WaterfallEntry, barEls: SVGGElement[]) {
+                     entry: WaterfallEntry, rowItems: SVGAElement[]) {
     if (this.openOverlays.some((o) => o.index === index)) {
       return;
     }
@@ -97,61 +96,61 @@ class OverlayManager implements OverlayManagerClass {
       "entry": entry,
       "index": index,
       "onClose": () => {
-        self.closeOverlay(index, detailsHeight, barEls);
+        self.closeOverlay(index, detailsHeight, rowItems);
       },
       "openTabIndex": 0,
     };
     this.openOverlays.push(newOverlay);
     this.openOverlays = this.openOverlays.sort((a, b) => a.index > b.index ? 1 : -1);
 
-    this.renderOverlays(detailsHeight);
+    this.renderOverlays(detailsHeight, rowItems);
     this.context.pubSub.publishToOverlayChanges({
       "changedIndex": index,
       "changedOverlay": newOverlay,
       "combinedOverlayHeight": self.getCombinedOverlayHeight(),
       "openOverlays": self.openOverlays,
       "type": "open",
     } as OverlayChangeEvent);
-    this.realignBars(barEls);
+    this.realignBars(rowItems);
   }
 
   /**
    * Toggles an overlay - rerenders others
    */
   public toggleOverlay(index: number, y: number, detailsHeight: number,
-                       entry: WaterfallEntry, barEls: SVGGElement[]) {
+                       entry: WaterfallEntry, rowItems: SVGAElement[]) {
     if (this.openOverlays.some((o) => o.index === index)) {
-      this.closeOverlay(index, detailsHeight, barEls);
+      this.closeOverlay(index, detailsHeight, rowItems);
     } else {
-      this.openOverlay(index, y, detailsHeight, entry, barEls);
+      this.openOverlay(index, y, detailsHeight, entry, rowItems);
     }
   }
 
   /**
    * closes on overlay - rerenders others internally
    */
-  public closeOverlay(index: number, detailsHeight: number, barEls: SVGGElement[]) {
+  public closeOverlay(index: number, detailsHeight: number, rowItems: SVGAElement[]) {
     const self = this;
     this.openOverlays.splice(this.openOverlays.reduce((prev: number, curr, i) => {
       return (curr.index === index) ? i : prev;
     }, -1), 1);
 
-    this.renderOverlays(detailsHeight);
+    this.renderOverlays(detailsHeight, rowItems);
     this.context.pubSub.publishToOverlayChanges({
       "changedIndex": index,
       "combinedOverlayHeight": self.getCombinedOverlayHeight(),
       "openOverlays": self.openOverlays,
       "type": "closed",
     } as OverlayChangeEvent);
-    this.realignBars(barEls);
+    this.realignBars(rowItems);
   }
 
   /**
    * sets the offset for request-bars
-   * @param  {SVGGElement[]} barEls
+   * @param  {SVGAElement[]} rowItems
    */
-  private realignBars(barEls: SVGGElement[]) {
-    barEls.forEach((bar, j) => {
+  private realignBars(rowItems: SVGAElement[]) {
+    rowItems.forEach((bar, j) => {
       let offset = this.getOverlayOffset(j);
       bar.setAttribute("transform", `translate(0, ${offset})`);
     });
@@ -173,9 +172,9 @@ class OverlayManager implements OverlayManagerClass {
    * @summary this is to re-set the "y" position since there is a bug in chrome with
    * tranform of an SVG and positioning/scoll of a foreignObjects
    * @param  {number} detailsHeight
-   * @param  {SVGGElement} overlayHolder
+   * @param  {SVGAElement[]} rowItems
    */
-  private renderOverlays(detailsHeight: number) {
+  private renderOverlays(detailsHeight: number, rowItems: SVGAElement[]) {
     /** shared variable to keep track of heigth */
     let currY = 0;
     let updateHeight = (overlay, y, currHeight) => {
@@ -200,8 +199,8 @@ class OverlayManager implements OverlayManagerClass {
       updateHeight(overlay, y, infoOverlay.getBoundingClientRect().height);
     };
 
-    const rowItems = this.rowHolder.getElementsByClassName("row-item") as NodeListOf<SVGAElement>;
-    forEachNodeList(rowItems, (rowItem, index) => {
+    // const rowItems = this.rowHolder.getElementsByClassName("row-item") as NodeListOf<SVGAElement>;
+    rowItems.forEach((rowItem, index) => {
       const overlay = find(this.openOverlays, (o) => o.index === index);
       const overlayEl = rowItem.nextElementSibling.firstElementChild as SVGGElement;
       if (overlay === undefined) {

src/ts/waterfall/svg-chart.ts

@@ -137,7 +137,7 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti
   const widestRequestNumber = getWidestDigitString(entriesToShow.length);
   const maxNumberWidth = svg.getNodeTextWidth(svg.newTextEl(`${widestRequestNumber}`), true);
 
-  let barEls: SVGGElement[] = [];
+  let rowItems: SVGAElement[] = [];
 
   function getChartHeight(): number {
     return chartHolderHeight + context.overlayManager.getCombinedOverlayHeight();
@@ -169,12 +169,12 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti
     } as RectData;
 
     let showDetailsOverlay = () => {
-      context.overlayManager.toggleOverlay(i, y + options.rowHeight, detailsHeight, entry, barEls);
+      context.overlayManager.toggleOverlay(i, y + options.rowHeight, detailsHeight, entry, rowItems);
     };
 
     let rowItem = row.createRow(context, i, maxIconsWidth, maxNumberWidth, rectData, entry, showDetailsOverlay);
 
-    barEls.push(rowItem);
+    rowItems.push(rowItem);
     rowHolder.appendChild(rowItem);
     rowHolder.appendChild(svg.newG("row-overlay-holder"));
   }