-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
REFACTOR: mv tooltip container out of scroll area
Chart tooltip (or all popovers) should render at the body level in order to prevent clipping from a scrollable area. To be more specific, even position:fixed can get contained inside a region if it is within a scrollable region. As a remedy, most tools render popover in children of body. To achieve this in a component structure, there are two competing goals: 1. intuitive component structure (tooltip is a subcomponent chart) 2. DOM-wise, tooltip should not be nested in chart but should be at body level. Libraries like React allows such pattern via "tunneling". By manually creating an element in the body, we emulated the behavior. In this commit, we: - introduced vz-chart-tooltip that knows how to position - applied the new tooltip to scalar-card - introduced new positioning, "auto"
- Loading branch information
1 parent
2c1a1dc
commit 9eec174
Showing
10 changed files
with
375 additions
and
190 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
107 changes: 107 additions & 0 deletions
107
tensorboard/components/vz_chart_helpers/vz-chart-tooltip.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
173 changes: 173 additions & 0 deletions
173
tensorboard/components/vz_chart_helpers/vz-chart-tooltip.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
Oops, something went wrong.