#188 fix re-render bg bug

Author: Michael Mrowetz

src/css-raw/perf-cascade.css

@@ -95,7 +95,7 @@
 .block-undefined {fill: #0f0;}
 
 /* Info overlay SVG - wrapper */
-.info-overlay {fill: #fff; stroke: #cdcdcd;}
+.info-overlay-bg {fill: #fff; stroke: #cdcdcd;}
 .info-overlay-close-btn {fill: rgba(205, 205, 205, 0.8); transform: translate(-23px, -23px); cursor: pointer;}
 .info-overlay-close-btn text {fill: #111; pointer-events: none;}
 .info-overlay-close-btn:focus {border: solid 1px #36c;}

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

@@ -48,40 +48,14 @@ class OverlayManager implements OverlayManagerClass {
   /** Collection of currely open overlays */
   private openOverlays: OpenOverlay[] = [];
 
-  constructor(private context: Context, private rowHolder: SVGGElement) {
+  constructor(private context: Context) {
   }
 
   /** all open overlays height combined */
   public getCombinedOverlayHeight(): number {
     return this.openOverlays.reduce((pre, curr) => pre + curr.height, 0);
   }
 
-  /**
-   * Get ref to Overlay SVG Element in DOM.
-   *
-   * _Item might be re-drawn, when another Overlay is changed_
-   */
-  public getOpenOverlayDomEl(overlay: OpenOverlay) {
-    return this.rowHolder.querySelector(`.overlay-index-${overlay.index}`) as SVGGElement;
-  }
-
-  /**
-   * Get ref to the last (DOM element wise) Overlay SVG Element in DOM.
-   *
-   * _Item might be re-drawn, when another Overlay is changed_
-   */
-  public getLastOpenOverlayDomEl() {
-    const overlays = this.rowHolder.querySelectorAll(".info-overlay-holder");
-    return overlays.item(overlays.length - 1) as SVGGElement;
-  }
-
-  /**
-   * Are any overlays currently open?
-   */
-  public hasOpenOverlays() {
-    return this.openOverlays.length > 0;
-  }
-
   /**
    * Opens an overlay - rerenders others internaly
    */
@@ -111,7 +85,6 @@ class OverlayManager implements OverlayManagerClass {
       "openOverlays": self.openOverlays,
       "type": "open",
     } as OverlayChangeEvent);
-    this.realignBars(rowItems);
   }
 
   /**
@@ -142,32 +115,19 @@ class OverlayManager implements OverlayManagerClass {
       "openOverlays": self.openOverlays,
       "type": "closed",
     } as OverlayChangeEvent);
-    this.realignBars(rowItems);
   }
 
   /**
-   * sets the offset for request-bars
-   * @param  {SVGAElement[]} rowItems
+   * Sets the offset for a request-bar
+   * @param {SVGAElement[]} rowItems
+   * @param {number} offset
    */
-  private realignBars(rowItems: SVGAElement[]) {
-    rowItems.forEach((bar, j) => {
-      let offset = this.getOverlayOffset(j);
-      bar.setAttribute("transform", `translate(0, ${offset})`);
-    });
-  }
-
-  /** y offset to it's default y position */
-  private getOverlayOffset(rowIndex: number): number {
-    return this.openOverlays.reduce((col, overlay) => {
-      if (overlay.index < rowIndex) {
-        return col + overlay.height;
-      }
-      return col;
-    }, 0);
+  private realignRow = (rowItem: SVGAElement, offset: number) => {
+    rowItem.setAttribute("transform", `translate(0, ${offset})`);
   }
 
   /**
-   * removes all overlays and renders them again
+   * Renders / Adjusts Overlays
    *
    * @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
@@ -178,6 +138,7 @@ class OverlayManager implements OverlayManagerClass {
     /** shared variable to keep track of heigth */
     let currY = 0;
     let updateHeight = (overlay, y, currHeight) => {
+      // console.log(currY, currHeight);
       currY += currHeight;
       overlay.actualY = y;
       overlay.height = currHeight;
@@ -198,11 +159,11 @@ class OverlayManager implements OverlayManagerClass {
       overlayHolder.appendChild(infoOverlay);
       updateHeight(overlay, y, infoOverlay.getBoundingClientRect().height);
     };
-
-    // 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;
+      this.realignRow(rowItem, currY);
+
       if (overlay === undefined) {
         if (overlayEl) {
           // remove closed overlay
@@ -216,8 +177,10 @@ class OverlayManager implements OverlayManagerClass {
       }
       if (overlayEl) {
         updateHeight(overlay, overlay.defaultY + currY, overlay.height);
-        const fo = overlayEl.getElementsByTagName("foreignObject").item(0) as SVGForeignObjectElement;
+        const fo = overlayEl.querySelector("foreignObject");
+        const bg = overlayEl.querySelector(".info-overlay-bg");
         fo.setAttribute("y", overlay.actualY.toString());
+        bg.setAttribute("y", overlay.actualY.toString());
         return;
       }
       addNewOverlay(rowItem.nextElementSibling as SVGGElement, overlay);

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

@@ -29,25 +29,22 @@ function createCloseButtonSvg(y: number): SVGGElement {
 }
 
 function createHolder(y: number, detailsHeight: number) {
-
-  let innerHolder = svg.newG("info-overlay-holder");
-
+  let holder = svg.newG("info-overlay-holder");
   let bg = svg.newRect({
     "height": detailsHeight,
     "rx": 2,
     "ry": 2,
     "width": "100%",
     "x": "0",
     "y": y,
-  }, "info-overlay");
+  }, "info-overlay-bg");
 
-  innerHolder.appendChild(bg);
-  return innerHolder;
+  holder.appendChild(bg);
+  return holder;
 }
 
 export function createRowInfoOverlay(overlay: OpenOverlay, y: number, detailsHeight: number): SVGGElement {
   const requestID = overlay.index + 1;
-  let wrapper = svg.newG(`outer-info-overlay-holder overlay-index-${overlay.index}`);
   let holder = createHolder(y, detailsHeight);
 
   let foreignObject = svg.newForeignObject({
@@ -82,7 +79,5 @@ export function createRowInfoOverlay(overlay: OpenOverlay, y: number, detailsHei
   holder.appendChild(foreignObject);
   holder.appendChild(closeBtn);
 
-  wrapper.appendChild(holder);
-
-  return wrapper;
+  return holder;
 }

src/ts/waterfall/svg-chart.ts

@@ -51,7 +51,7 @@ function getSvgHeight(marks: Mark[], diagramHeight: number): number {
  * @return {Context} Context object
  */
 function createContext(data: WaterfallData, options: ChartRenderOption,
-                       entriesToShow: WaterfallEntry[], rowHolder: SVGGElement): Context {
+                       entriesToShow: WaterfallEntry[]): Context {
   const unit = data.durationMs / 100;
   const diagramHeight = (entriesToShow.length + 1) * options.rowHeight;
   let context = {
@@ -62,7 +62,7 @@ function createContext(data: WaterfallData, options: ChartRenderOption,
     options,
   };
   // `overlayManager` needs the `context` reference, so it's attached later
-  context.overlayManager = new OverlayManager(context, rowHolder);
+  context.overlayManager = new OverlayManager(context);
 
   return context;
 }
@@ -85,7 +85,7 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti
   /** Holds all rows */
   let rowHolder = svg.newG("rows-holder");
 
-  const context = createContext(data, options, entriesToShow, rowHolder);
+  const context = createContext(data, options, entriesToShow);
 
   /** full height of the SVG chart in px */
   const chartHolderHeight = getSvgHeight(data.marks, context.diagramHeight);