Skip to content

Commit 7277d15

Browse files
stephanwleestephanwlee
authored
REFACTOR: mv tooltip container out of scroll area (#1406)
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"
1 parent 2c1a1dc commit 7277d15

File tree

10 files changed

+375
-190
lines changed

10 files changed

+375
-190
lines changed

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

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,21 +31,22 @@
3131
<div id="chart-and-spinner-container">
3232
<vz-line-chart2
3333
id="chart"
34-
x-components-creation-method="[[xComponentsCreationMethod]]"
35-
x-type="[[xType]]"
36-
y-value-accessor="[[yValueAccessor]]"
3734
color-scale="[[colorScale]]"
38-
tooltip-columns="[[tooltipColumns]]"
39-
smoothing-enabled="[[smoothingEnabled]]"
40-
smoothing-weight="[[smoothingWeight]]"
41-
tooltip-sorting-method="[[tooltipSortingMethod]]"
42-
ignore-y-outliers="[[ignoreYOutliers]]"
43-
style="[[_computeLineChartStyle(dataLoading)]]"
4435
default-x-range="[[defaultXRange]]"
4536
default-y-range="[[defaultYRange]]"
4637
fill-area="[[fillArea]]"
47-
symbol-function="[[symbolFunction]]"
38+
ignore-y-outliers="[[ignoreYOutliers]]"
4839
on-chart-attached="_onChartAttached"
40+
smoothing-enabled="[[smoothingEnabled]]"
41+
smoothing-weight="[[smoothingWeight]]"
42+
style="[[_computeLineChartStyle(dataLoading)]]"
43+
symbol-function="[[symbolFunction]]"
44+
tooltip-columns="[[tooltipColumns]]"
45+
tooltip-position="[[tooltipPosition]]"
46+
tooltip-sorting-method="[[tooltipSortingMethod]]"
47+
x-components-creation-method="[[xComponentsCreationMethod]]"
48+
x-type="[[xType]]"
49+
y-value-accessor="[[yValueAccessor]]"
4950
></vz-line-chart2>
5051
<template is="dom-if" if="[[dataLoading]]">
5152
<div id="loading-spinner-container">
@@ -137,12 +138,15 @@
137138
xComponentsCreationMethod: Object,
138139
xType: String,
139140
yValueAccessor: Object,
140-
tooltipColumns: Array,
141141
fillArea: Object,
142142

143143
smoothingEnabled: Boolean,
144144
smoothingWeight: Number,
145+
146+
tooltipColumns: Array,
145147
tooltipSortingMethod: String,
148+
tooltipPosition: String,
149+
146150
ignoreYOutliers: Boolean,
147151

148152
defaultXRange: Array,

‎tensorboard/components/vz_chart_helpers/BUILD‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@ tf_web_library(
99
srcs = [
1010
"vz-chart-helpers.html",
1111
"vz-chart-helpers.ts",
12+
"vz-chart-tooltip.html",
13+
"vz-chart-tooltip.ts",
1214
],
1315
path = "/vz-chart-helpers",
1416
deps = [
1517
"//tensorboard/components/tf_imports:d3",
1618
"//tensorboard/components/tf_imports:lodash",
1719
"//tensorboard/components/tf_imports:plottable",
20+
"//tensorboard/components/tf_imports:polymer",
1821
"//tensorboard/components/vz_sorting",
1922
],
2023
)

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!--
2+
@license
3+
Copyright 2016 The TensorFlow Authors. All Rights Reserved.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
18+
<link rel="import" href="../polymer/polymer.html">
19+
<link rel="import" href="../tf-imports/lodash.html">
20+
21+
<!--
22+
vz-line-chart creates an element that draws a line chart for
23+
displaying event values.
24+
25+
This line chart supports drawing multiple lines at the same time, with features
26+
such as different X scales (linear and temporal), tooltips and smoothing.
27+
28+
@element vz-line-chart
29+
@demo demo/index.html
30+
-->
31+
<dom-module id="vz-chart-tooltip">
32+
<template>
33+
<template id="template">
34+
<div class="content">
35+
<table>
36+
<thead></thead>
37+
<tbody></tbody>
38+
</table>
39+
</div>
40+
</template>
41+
<style>
42+
:host {
43+
pointer-events: none;
44+
}
45+
46+
.content {
47+
background: rgba(0, 0, 0, .8);
48+
border-radius: 4px;
49+
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
50+
color: #fff;
51+
opacity: 0;
52+
overflow: hidden;
53+
pointer-events: none;
54+
position: fixed;
55+
will-change: transform;
56+
z-index: 5;
57+
}
58+
59+
table {
60+
font-size: 13px;
61+
line-height: 1.4em;
62+
margin-top: 10px;
63+
padding: 8px;
64+
}
65+
66+
thead {
67+
font-size: 14px;
68+
}
69+
70+
tbody {
71+
font-size: 13px;
72+
line-height: 21px;
73+
white-space: nowrap;
74+
}
75+
76+
td {
77+
padding: 0 5px;
78+
}
79+
80+
.swatch {
81+
border-radius: 50%;
82+
display: block;
83+
height: 18px;
84+
width: 18px;
85+
}
86+
87+
.closest .swatch {
88+
box-shadow: inset 0 0 0 2px #fff;
89+
}
90+
91+
th {
92+
padding: 0 5px;
93+
text-align: left;
94+
}
95+
96+
.distant td:not(.swatch) {
97+
opacity: .8;
98+
}
99+
100+
.ghost {
101+
opacity: .2;
102+
stroke-width: 1px;
103+
}
104+
</style>
105+
</template>
106+
<script src="vz-chart-tooltip.js"></script>
107+
</dom-module>

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

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
/* Copyright 2018 The TensorFlow Authors. All Rights Reserved.
2+
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
7+
http://www.apache.org/licenses/LICENSE-2.0
8+
9+
Unless required by applicable law or agreed to in writing, software
10+
distributed under the License is distributed on an "AS IS" BASIS,
11+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
See the License for the specific language governing permissions and
13+
limitations under the License.
14+
==============================================================================*/
15+
namespace vz_chart_helper {
16+
17+
export enum TooltipPosition {
18+
/**
19+
* Positions the tooltip to the bottom of the chart in most case. Positions
20+
* the tooltip above the chart if there isn't sufficient space below.
21+
*/
22+
AUTO = 'auto',
23+
/**
24+
* Position the tooltip on the bottom of the chart.
25+
*/
26+
BOTTOM = 'bottom',
27+
/**
28+
* Positions the tooltip to the right of the chart.
29+
*/
30+
RIGHT = 'right',
31+
}
32+
33+
export interface VzChartTooltip extends Element {
34+
content(): Element;
35+
hide(): void;
36+
updateAndPosition(anchorNode: Element, newDom: Array<any>): void;
37+
}
38+
39+
Polymer({
40+
is: 'vz-chart-tooltip',
41+
properties: {
42+
/**
43+
* Possible values are TooltipPosition.BOTTOM and TooltipPosition.RIGHT.
44+
*/
45+
position: {
46+
type: String,
47+
value: TooltipPosition.AUTO,
48+
},
49+
50+
/**
51+
* Minimum instance from the edge of the screen.
52+
*/
53+
minDistFromEdge: {
54+
type: Number,
55+
value: 15,
56+
},
57+
},
58+
59+
ready() {
60+
this._styleCache = null;
61+
this._raf = null;
62+
this._tunnel = null;
63+
},
64+
65+
attached() {
66+
this._tunnel = this._createTunnel();
67+
},
68+
69+
detached() {
70+
this.hide();
71+
this._removeTunnel(this._tunnel);
72+
this._tunnel = null;
73+
},
74+
75+
hide() {
76+
window.cancelAnimationFrame(this._raf);
77+
this._styleCache = null;
78+
this.content().style.opacity = 0;
79+
},
80+
81+
content(): Element {
82+
return this._tunnel.firstElementChild;
83+
},
84+
85+
/**
86+
* CSS Scopes the newly added DOM (in most tooltip where columns are
87+
* invariable, only newly added rows are necessary to be scoped) and positions
88+
* the tooltip with respect to the anchorNode.
89+
*/
90+
updateAndPosition(anchorNode: Element, newDom: Element[]) {
91+
newDom.forEach(row => this.scopeSubtree(row));
92+
93+
window.cancelAnimationFrame(this._raf);
94+
this._raf = window.requestAnimationFrame(() => {
95+
if (!this.isAttached) return;
96+
this._repositionImpl(anchorNode);
97+
});
98+
},
99+
100+
_repositionImpl(anchorNode: Element) {
101+
const tooltipContent = this.content();
102+
103+
const nodeRect = anchorNode.getBoundingClientRect();
104+
const tooltipRect = tooltipContent.getBoundingClientRect();
105+
const viewportHeight = window.innerHeight;
106+
const documentWidth = document.body.clientWidth;
107+
108+
const anchorTop = nodeRect.top;
109+
const anchorBottom = anchorTop + nodeRect.height;
110+
const effectiveTooltipHeight = tooltipRect.height +
111+
vz_chart_helpers.TOOLTIP_Y_PIXEL_OFFSET;
112+
113+
let bottom = null;
114+
let left = Math.max(this.minDistFromEdge, nodeRect.left);
115+
let right = null;
116+
let top = anchorTop;
117+
118+
if (this.position == TooltipPosition.RIGHT) {
119+
left = nodeRect.right;
120+
} else {
121+
top = anchorBottom + vz_chart_helpers.TOOLTIP_Y_PIXEL_OFFSET;
122+
123+
// prevent it from falling off the right side of the screen.
124+
if (documentWidth < left + tooltipRect.width + this.minDistFromEdge) {
125+
left = null;
126+
right = this.minDistFromEdge;
127+
}
128+
}
129+
130+
// If there is not enough space to render tooltip below the anchorNode in
131+
// the viewport and there is enough space above, place it above the
132+
// anchorNode.
133+
if (this.position == TooltipPosition.AUTO &&
134+
nodeRect.top - effectiveTooltipHeight > 0 &&
135+
viewportHeight < nodeRect.top + nodeRect.height +
136+
effectiveTooltipHeight) {
137+
top = null;
138+
bottom = viewportHeight - anchorTop +
139+
vz_chart_helpers.TOOLTIP_Y_PIXEL_OFFSET;
140+
}
141+
142+
const newStyle = {
143+
opacity: 1,
144+
left: left ? `${left}px` : null,
145+
right: right ? `${right}px` : null,
146+
top: top ? `${top}px` : null,
147+
bottom: bottom ? `${bottom}px` : null,
148+
};
149+
150+
// Do not update the style (which can cause re-layout) if it has not
151+
// changed.
152+
if (!_.isEqual(this._styleCache, newStyle)) {
153+
Object.assign(tooltipContent.style, newStyle);
154+
this._styleCache = newStyle;
155+
}
156+
},
157+
158+
_createTunnel(): Element {
159+
const div = document.createElement('div');
160+
div.classList.add(`${this.is}-tunnel`);
161+
const template = this.instanceTemplate(this.$.template);
162+
this.scopeSubtree(template);
163+
div.appendChild(template);
164+
document.body.appendChild(div);
165+
return div;
166+
},
167+
168+
_removeTunnel(tunnel: Element) {
169+
document.body.removeChild(tunnel);
170+
},
171+
});
172+
173+
} // namespace vz_chart_helper

0 commit comments

Comments
 (0)