REFACTOR: mv tooltip container out of scroll area

tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html

@@ -31,21 +31,22 @@
     <div id="chart-and-spinner-container">
       <vz-line-chart2
         id="chart"
-        x-components-creation-method="[[xComponentsCreationMethod]]"
-        x-type="[[xType]]"
-        y-value-accessor="[[yValueAccessor]]"
         color-scale="[[colorScale]]"
-        tooltip-columns="[[tooltipColumns]]"
-        smoothing-enabled="[[smoothingEnabled]]"
-        smoothing-weight="[[smoothingWeight]]"
-        tooltip-sorting-method="[[tooltipSortingMethod]]"
-        ignore-y-outliers="[[ignoreYOutliers]]"
-        style="[[_computeLineChartStyle(dataLoading)]]"
         default-x-range="[[defaultXRange]]"
         default-y-range="[[defaultYRange]]"
         fill-area="[[fillArea]]"
-        symbol-function="[[symbolFunction]]"
+        ignore-y-outliers="[[ignoreYOutliers]]"
         on-chart-attached="_onChartAttached"
+        smoothing-enabled="[[smoothingEnabled]]"
+        smoothing-weight="[[smoothingWeight]]"
+        style="[[_computeLineChartStyle(dataLoading)]]"
+        symbol-function="[[symbolFunction]]"
+        tooltip-columns="[[tooltipColumns]]"
+        tooltip-position="[[tooltipPosition]]"
+        tooltip-sorting-method="[[tooltipSortingMethod]]"
+        x-components-creation-method="[[xComponentsCreationMethod]]"
+        x-type="[[xType]]"
+        y-value-accessor="[[yValueAccessor]]"
       ></vz-line-chart2>
       <template is="dom-if" if="[[dataLoading]]">
         <div id="loading-spinner-container">
@@ -137,12 +138,15 @@
         xComponentsCreationMethod: Object,
         xType: String,
         yValueAccessor: Object,
-        tooltipColumns: Array,
         fillArea: Object,
 
         smoothingEnabled: Boolean,
         smoothingWeight: Number,
+
+        tooltipColumns: Array,
         tooltipSortingMethod: String,
+        tooltipPosition: String,
+
         ignoreYOutliers: Boolean,
 
         defaultXRange: Array,

tensorboard/components/vz_chart_helpers/BUILD

@@ -9,12 +9,15 @@ tf_web_library(
     srcs = [
         "vz-chart-helpers.html",
         "vz-chart-helpers.ts",
+        "vz-chart-tooltip.html",
+        "vz-chart-tooltip.ts",
     ],
     path = "/vz-chart-helpers",
     deps = [
         "//tensorboard/components/tf_imports:d3",
         "//tensorboard/components/tf_imports:lodash",
         "//tensorboard/components/tf_imports:plottable",
+        "//tensorboard/components/tf_imports:polymer",
         "//tensorboard/components/vz_sorting",
     ],
 )

tensorboard/components/vz_chart_helpers/vz-chart-tooltip.html

@@ -0,0 +1,107 @@
+<!--
+@license
+Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-imports/lodash.html">
+
+<!--
+vz-line-chart creates an element that draws a line chart for
+displaying event values.
+
+This line chart supports drawing multiple lines at the same time, with features
+such as different X scales (linear and temporal), tooltips and smoothing.
+
+@element vz-line-chart
+@demo demo/index.html
+-->
+<dom-module id="vz-chart-tooltip">
+  <template>
+    <template id="template">
+      <div class="content">
+        <table>
+          <thead></thead>
+          <tbody></tbody>
+        </table>
+      </div>
+    </template>
+    <style>
+    :host {
+      pointer-events: none;
+    }
+
+    .content {
+      background: rgba(0, 0, 0, .8);
+      border-radius: 4px;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+      color: #fff;
+      opacity: 0;
+      overflow: hidden;
+      pointer-events: none;
+      position: fixed;
+      will-change: transform;
+      z-index: 5;
+    }
+
+    table {
+      font-size: 13px;
+      line-height: 1.4em;
+      margin-top: 10px;
+      padding: 8px;
+    }
+
+    thead {
+      font-size: 14px;
+    }
+
+    tbody {
+      font-size: 13px;
+      line-height: 21px;
+      white-space: nowrap;
+    }
+
+    td {
+      padding: 0 5px;
+    }
+
+    .swatch {
+      border-radius: 50%;
+      display: block;
+      height: 18px;
+      width: 18px;
+    }
+
+    .closest .swatch {
+      box-shadow: inset 0 0 0 2px #fff;
+    }
+
+    th {
+      padding: 0 5px;
+      text-align: left;
+    }
+
+    .distant td:not(.swatch) {
+      opacity: .8;
+    }
+
+    .ghost {
+      opacity: .2;
+      stroke-width: 1px;
+    }
+    </style>
+  </template>
+  <script src="vz-chart-tooltip.js"></script>
+</dom-module>

tensorboard/components/vz_chart_helpers/vz-chart-tooltip.ts

@@ -0,0 +1,173 @@
+/* Copyright 2018 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+namespace vz_chart_helper {
+
+export enum TooltipPosition {
+  /**
+   * Positions the tooltip to the bottom of the chart in most case. Positions
+   * the tooltip above the chart if there isn't sufficient space below.
+   */
+  AUTO = 'auto',
+  /**
+   * Position the tooltip on the bottom of the chart.
+   */
+  BOTTOM = 'bottom',
+  /**
+   * Positions the tooltip to the right of the chart.
+   */
+  RIGHT = 'right',
+}
+
+export interface VzChartTooltip extends Element {
+  content(): Element;
+  hide(): void;
+  updateAndPosition(anchorNode: Element, newDom: Array<any>): void;
+}
+
+Polymer({
+  is: 'vz-chart-tooltip',
+  properties: {
+    /**
+     * Possible values are TooltipPosition.BOTTOM and TooltipPosition.RIGHT.
+     */
+    position: {
+      type: String,
+      value: TooltipPosition.AUTO,
+    },
+
+    /**
+     * Minimum instance from the edge of the screen.
+     */
+    minDistFromEdge: {
+      type: Number,
+      value: 15,
+    },
+  },
+
+  ready() {
+    this._styleCache = null;
+    this._raf = null;
+    this._tunnel = null;
+  },
+
+  attached() {
+    this._tunnel = this._createTunnel();
+  },
+
+  detached() {
+    this.hide();
+    this._removeTunnel(this._tunnel);
+    this._tunnel = null;
+  },
+
+  hide() {
+    window.cancelAnimationFrame(this._raf);
+    this._styleCache = null;
+    this.content().style.opacity = 0;
+  },
+
+  content(): Element {
+    return this._tunnel.firstElementChild;
+  },
+
+  /**
+   * CSS Scopes the newly added DOM (in most tooltip where columns are
+   * invariable, only newly added rows are necessary to be scoped) and positions
+   * the tooltip with respect to the anchorNode.
+   */
+  updateAndPosition(anchorNode: Element, newDom: Element[]) {
+    newDom.forEach(row => this.scopeSubtree(row));
+
+    window.cancelAnimationFrame(this._raf);
+    this._raf = window.requestAnimationFrame(() => {
+      if (!this.isAttached) return;
+      this._repositionImpl(anchorNode);
+    });
+  },
+
+  _repositionImpl(anchorNode: Element) {
+    const tooltipContent = this.content();
+
+    const nodeRect = anchorNode.getBoundingClientRect();
+    const tooltipRect = tooltipContent.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const documentWidth = document.body.clientWidth;
+
+    const anchorTop = nodeRect.top;
+    const anchorBottom = anchorTop + nodeRect.height;
+    const effectiveTooltipHeight = tooltipRect.height +
+        vz_chart_helpers.TOOLTIP_Y_PIXEL_OFFSET;
+
+    let bottom = null;
+    let left = Math.max(this.minDistFromEdge, nodeRect.left);
+    let right = null;
+    let top = anchorTop;
+
+    if (this.position == TooltipPosition.RIGHT) {
+      left = nodeRect.right;
+    } else {
+      top = anchorBottom + vz_chart_helpers.TOOLTIP_Y_PIXEL_OFFSET;
+
+      // prevent it from falling off the right side of the screen.
+      if (documentWidth < left + tooltipRect.width + this.minDistFromEdge) {
+        left = null;
+        right = this.minDistFromEdge;
+      }
+    }
+
+    // If there is not enough space to render tooltip below the anchorNode in
+    // the viewport and there is enough space above, place it above the
+    // anchorNode.
+    if (this.position == TooltipPosition.AUTO &&
+        nodeRect.top - effectiveTooltipHeight > 0 &&
+        viewportHeight < nodeRect.top + nodeRect.height +
+            effectiveTooltipHeight) {
+      top = null;
+      bottom = viewportHeight - anchorTop +
+          vz_chart_helpers.TOOLTIP_Y_PIXEL_OFFSET;
+    }
+
+    const newStyle = {
+      opacity: 1,
+      left: left ? `${left}px` : null,
+      right: right ? `${right}px` : null,
+      top: top ? `${top}px` : null,
+      bottom: bottom ? `${bottom}px` : null,
+    };
+
+    // Do not update the style (which can cause re-layout) if it has not
+    // changed.
+    if (!_.isEqual(this._styleCache, newStyle)) {
+      Object.assign(tooltipContent.style, newStyle);
+      this._styleCache = newStyle;
+    }
+  },
+
+  _createTunnel(): Element {
+    const div = document.createElement('div');
+    div.classList.add(`${this.is}-tunnel`);
+    const template = this.instanceTemplate(this.$.template);
+    this.scopeSubtree(template);
+    div.appendChild(template);
+    document.body.appendChild(div);
+    return div;
+  },
+
+  _removeTunnel(tunnel: Element) {
+    document.body.removeChild(tunnel);
+  },
+});
+
+}  // namespace vz_chart_helper