timeseries: fix visibility bug on filtered scalar cards#5235
Merged
Conversation
bmd3k
approved these changes
Aug 12, 2021
yatbear
pushed a commit
to yatbear/tensorboard
that referenced
this pull request
Mar 27, 2023
…#5235) ScalarCardContainer provides boolean observables `isCardVisible` and `isEverVisible` to inform whether the line chart should be shown: `<ng-container *ngIf="isEverVisible"><line-chart>...` The `isCardVisible` uses the misleading ngrx selector `getVisibleCardIds`, giving the impression that a "visible cardId" is equivalent to "this card's DOM element is visible". That assumption is false when there are 2 different DOM elements (filtered and unfiltered) for the same cardId and the filtered DOM element happens to be shown first before the unfiltered one is ever visible (in the sense that it is in the DOM without 'display: none'. When a user enters a tag filter that shows a card that was previously not in the visible viewport, it actually causes the 'display: none'd unfiltered card's ngIf to insert its line chart into the DOM. Since it is 'display: none'd, the line chart thinks its width: 0, height: 0, so after clearing the tag filter, we see a blank card. This change provides a more accurate computation of `isCardVisible`, using the same `intersectionObserver` directive used by the Histogram component for this same purpose. Manually tested a consistent repro and saw that charts were no longer blank. Googlers, see b/186682025, which includes a concrete repro.
dna2github
pushed a commit
to dna2fork/tensorboard
that referenced
this pull request
May 1, 2023
…#5235) ScalarCardContainer provides boolean observables `isCardVisible` and `isEverVisible` to inform whether the line chart should be shown: `<ng-container *ngIf="isEverVisible"><line-chart>...` The `isCardVisible` uses the misleading ngrx selector `getVisibleCardIds`, giving the impression that a "visible cardId" is equivalent to "this card's DOM element is visible". That assumption is false when there are 2 different DOM elements (filtered and unfiltered) for the same cardId and the filtered DOM element happens to be shown first before the unfiltered one is ever visible (in the sense that it is in the DOM without 'display: none'. When a user enters a tag filter that shows a card that was previously not in the visible viewport, it actually causes the 'display: none'd unfiltered card's ngIf to insert its line chart into the DOM. Since it is 'display: none'd, the line chart thinks its width: 0, height: 0, so after clearing the tag filter, we see a blank card. This change provides a more accurate computation of `isCardVisible`, using the same `intersectionObserver` directive used by the Histogram component for this same purpose. Manually tested a consistent repro and saw that charts were no longer blank. Googlers, see b/186682025, which includes a concrete repro.
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ScalarCardContainer provides boolean observables
isCardVisibleandisEverVisibleto inform whether the line chart should be shown:<ng-container *ngIf="isEverVisible"><line-chart>...The
isCardVisibleuses the misleading ngrx selectorgetVisibleCardIds,giving the impression that a "visible cardId" is equivalent to "this card's
DOM element is visible". That assumption is false when there are 2
different DOM elements (filtered and unfiltered) for the same cardId and
the filtered DOM element happens to be shown first before the unfiltered
one is ever visible (in the sense that it is in the DOM without 'display: none'.
When a user enters a tag filter that shows a card that was previously not in
the visible viewport, it actually causes the 'display: none'd unfiltered card's
ngIf to insert its line chart into the DOM. Since it is 'display: none'd, the
line chart thinks its width: 0, height: 0, so after clearing the tag filter, we see
a blank card.
This change provides a more accurate computation of
isCardVisible,using the same
intersectionObserverdirective used by the Histogramcomponent for this same purpose.
Manually tested a consistent repro and saw that charts were no longer blank.
Googlers, see b/186682025, which includes a concrete repro.