Skip to content

Commit 91f5374

Browse files
authored
Display unselected dashboards in height 0 divs (#902)
Previously, containers of unselected dashboards would not be displayed (They are set to `display:none;`). We now "display" unselected dashboards within a container of max-height 0, effectively hiding it, but also allowing Plottable logic to obtain correct container measurements. Fixes #554. Test Plan (for Chrome and Firefox): Run mnist_with_summaries.py and start TensorBoard. Switch from the scalars to the images dashboard. Toggle the train run. Navigate back to the scalars dashboards. Note that no line charts are degenerate.
1 parent 6eb7f94 commit 91f5374

File tree

1 file changed

+12
-4
lines changed

1 file changed

+12
-4
lines changed

tensorboard/components/tf_tensorboard/tf-tensorboard.html

+12-4
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
199199
<div
200200
class="dashboard-container"
201201
data-dashboard$="[[dashboardDatum.plugin]]"
202-
style="display: [[_displayStyle(_selectedDashboard, dashboardDatum.plugin)]]"
202+
data-selected$="[[_selectedStatus(_selectedDashboard, dashboardDatum.plugin)]]"
203203
><!-- Dashboards will be injected here dynamically. --></div>
204204
</template>
205205
</div>
@@ -301,6 +301,15 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
301301
height: 100%;
302302
}
303303

304+
/* Hide unselected dashboards. We still display them within a container
305+
of height 0 since Plottable produces degenerate charts when charts are
306+
reloaded while not displayed. */
307+
.dashboard-container:not([data-selected]) {
308+
max-height: 0;
309+
overflow: hidden;
310+
position: relative;
311+
}
312+
304313
.warning-message {
305314
max-width: 540px;
306315
margin: 80px auto 0 auto;
@@ -555,9 +564,8 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
555564
return dashboards[index];
556565
},
557566

558-
_displayStyle(selectedDashboard, candidateDashboard) {
559-
// Display only the selected dashboard.
560-
return selectedDashboard === candidateDashboard ? 'inherit' : 'none';
567+
_selectedStatus(selectedDashboard, candidateDashboard) {
568+
return selectedDashboard === candidateDashboard;
561569
},
562570

563571
/**

0 commit comments

Comments
 (0)