From a924e718281c4492abcb24008c72fca0764f1e48 Mon Sep 17 00:00:00 2001 From: Brian Dubois Date: Tue, 29 Mar 2022 06:01:47 -0400 Subject: [PATCH] Show histogram tooltips that bleed out of content box. (#5631) * Motivation for features / changes The small histogram tooltip can be cutoff by the top or right edges (Googlers, see b/226775031). * Technical description of changes A couple of ancestor elements of the tooltip element currently set `overflow: hidden`. We change these elements so that the effective value is 'overflow: visible'. This has the somewhat unintended side effect of exposing an additional ~1px height flat line just above the x axis (because the set of lines in the '.content' element ever so slightly overflow). This is probably ok since we'd prefer for the user to see all histogram lines. We should consider in the future tightening up the histogram rendering so that all the lines fit nicely into the '.content' element. (Googlers, see screenshot diffs in cl/437279846). --- .../views/card_renderer/histogram_card_component.scss | 1 - .../webapp/widgets/histogram/histogram_component.scss | 6 ++++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss index d671976a6f3..7095f80d773 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss +++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss @@ -106,7 +106,6 @@ mat-spinner { tb-histogram { flex-grow: 1; - overflow: hidden; } .empty-message { diff --git a/tensorboard/webapp/widgets/histogram/histogram_component.scss b/tensorboard/webapp/widgets/histogram/histogram_component.scss index 9ccec8161b9..5f8c6a6c633 100644 --- a/tensorboard/webapp/widgets/histogram/histogram_component.scss +++ b/tensorboard/webapp/widgets/histogram/histogram_component.scss @@ -140,6 +140,12 @@ svg { .content { grid-area: content; + // Allow overflow to be visible so that the tooltip can be shown for points + // near the edges. + overflow: visible; + // Raise the content area above the axes so that the tooltip can be shown over + // the axes marks. + z-index: 1; .tick { stroke-width: 1px;