Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Global pins] Add clear all pins button #6828

Merged
merged 7 commits into from
Apr 16, 2024

Conversation

roseayeon
Copy link
Contributor

@roseayeon roseayeon commented Apr 11, 2024

Motivation for features / changes

Following #6821 As pin data is accumulated, unwanted pins can easily crowd the dashboard. Therefore, this PR adds a button that allows users to conveniently clear all pins at once.

Technical description of changes

  • 57c6a47 Introduced new action called metricsClearAllPinnedCards

    • When metricsClearAllPinnedCards is dispatched, the reducer removed all pinned cards in the state.
  • a04c2d7 Added clear all pins button in the pinned view container.

    • The button will be shown if there's at least one pinned card.
  • f0c3a54 Implemented removeAllScalarPins method in the saved pins data source.

    • This method removes stored pins from local storage.
  • e97b110 Added removeAllPins effect in the metrics/effects/index.ts

    • When metricsClearAllPinnedCards action is called, this effect will call removeAllScalarPins method defined in the saved pin data source.
  • c0edd37 guarded UI feature (button) with feature flag and added related tests.

Screenshots of UI changes (or N/A)

Light mode

image

Dark mode

image

Detailed steps to verify changes work correctly (as executed by you)

Unit test pass & cl TAP presubmit pass

Alternate designs / implementations considered (or N/A)

I also considered a feature to select a pinned card and remove the selected pinned card, but I thought that this would be the same as pressing the 'unpin' button individually from the user's perspective. So I implemented a 'clear all pins' button that removes all pinned cards. Any feedback is appreciated!

@roseayeon roseayeon marked this pull request as draft April 11, 2024 12:44
@roseayeon roseayeon marked this pull request as ready for review April 11, 2024 14:30
@roseayeon roseayeon changed the title [Global pins] Add clear all pins feature [Global pins] Add clear all pins button Apr 11, 2024
@roseayeon roseayeon requested review from hoonji and bmd3k April 11, 2024 15:11
Copy link
Member

@hoonji hoonji left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the super clean code, it was very easy to review!

One suggestion: maybe it's better to use an icon for the button instead, as most buttons on the dashboard are icons? I think a block icon could be very intuitive and take up less space.

But the current version is also very clean too so I think we can maybe gather other opinions in a teamfood first.

tensorboard/webapp/metrics/store/metrics_reducers.ts Outdated Show resolved Hide resolved
tensorboard/webapp/metrics/store/metrics_reducers.ts Outdated Show resolved Hide resolved
tensorboard/webapp/metrics/store/metrics_reducers.ts Outdated Show resolved Hide resolved
@roseayeon
Copy link
Contributor Author

One suggestion: maybe it's better to use an icon for the button instead, as most buttons on the dashboard are icons? I think a block icon could be very intuitive and take up less space.

Thanks for the idea, @hoonji ! I'll leave it as is for now and gather feedback from the team after the feature is fully implemented. (If you have any other comments please feel free to share them! ccing @bmd3k )

@roseayeon roseayeon merged commit 896c778 into tensorflow:master Apr 16, 2024
13 checks passed
roseayeon added a commit that referenced this pull request Apr 19, 2024
## Motivation for features / changes
Following #6828,

Since global pins are applied automatically, this PR allows users
disable the global pin feature.

## Technical description of changes
2cf2b11 Added `savingPinsEnabled` in the `MetricsSettings`
* Also added a selector getting `settings.savingPinsEnabled` value from
the store.

dec6a63 Introduced new action `metricsEnableSavingPinsToggled`
* If `metricsEnableSavingPinsToggled` is dispatched, it toggles the
`savingPinsEnabled` store value.

6ea22fd Added a checkbox UI to the settings view component.
* Also added a feature flag guard to the component. If check box is
clicked, it dispatched `metricsEnableSavingPinsToggled` action.

568febf Added a new effect `disableSavingPins`
* When `metricsEnableSavingPinsToggled` action is called, this effect
will call `removeAllScalarPins` method if `savingPinsEnabled` value is
false.
 
bbf9050 Added saving pins feature in persistent settings to preserve
user preferences.

3ff7cd2 Add buildMetricsSettingsOverrides util in the testing to use in
tbcorp

## Screenshots of UI changes (or N/A)

![image](https://github.com/tensorflow/tensorboard/assets/24772412/874dbc2b-f01f-4112-b34b-6b07330ea31f)

## Detailed steps to verify changes work correctly (as executed by you)
Unit test passes + created a cl/625208577 to pass TAP Presubmit tests
## Alternate designs / implementations considered (or N/A)
N/A

## Action Items in the next PR
In the next PR, I'll add a "confirmation dialog" that appears when the
user unchecks the checkbox to make the user aware that local storage is
disappearing.

- [ ] Add the confirmation dialog
AnuarTB pushed a commit to AnuarTB/tensorboard that referenced this pull request May 3, 2024
## Motivation for features / changes
Following tensorflow#6821 As pin data is accumulated, unwanted pins can easily
crowd the dashboard. Therefore, this PR adds a button that allows users
to conveniently clear all pins at once.

## Technical description of changes
* 57c6a47 Introduced new action called `metricsClearAllPinnedCards`
* When `metricsClearAllPinnedCards` is dispatched, the reducer removed
all pinned cards in the state.

* a04c2d7 Added `clear all pins` button in the pinned view container.
  * The button will be shown if there's at least one pinned card.

* f0c3a54 Implemented `removeAllScalarPins` method in the saved pins
data source.
  * This method removes stored pins from local storage.

* e97b110 Added `removeAllPins` effect in the `metrics/effects/index.ts`
* When `metricsClearAllPinnedCards` action is called, this effect will
call `removeAllScalarPins` method defined in the saved pin data source.

* c0edd37 guarded UI feature (button) with feature flag and added
related tests.

## Screenshots of UI changes (or N/A)
### Light mode

![image](https://github.com/tensorflow/tensorboard/assets/24772412/a0793e8b-7fea-45f0-b2d8-4e742ca40918)


### Dark mode

![image](https://github.com/tensorflow/tensorboard/assets/24772412/581468a1-1a9c-4ab4-b70a-13c5a5b168f6)

## Detailed steps to verify changes work correctly (as executed by you)
Unit test pass  & cl TAP presubmit pass
## Alternate designs / implementations considered (or N/A)
I also considered a feature to select a pinned card and remove the
selected pinned card, but I thought that this would be the same as
pressing the 'unpin' button individually from the user's perspective. So
I implemented a 'clear all pins' button that removes all pinned cards.
Any feedback is appreciated!
AnuarTB pushed a commit to AnuarTB/tensorboard that referenced this pull request May 3, 2024
## Motivation for features / changes
Following tensorflow#6828,

Since global pins are applied automatically, this PR allows users
disable the global pin feature.

## Technical description of changes
2cf2b11 Added `savingPinsEnabled` in the `MetricsSettings`
* Also added a selector getting `settings.savingPinsEnabled` value from
the store.

dec6a63 Introduced new action `metricsEnableSavingPinsToggled`
* If `metricsEnableSavingPinsToggled` is dispatched, it toggles the
`savingPinsEnabled` store value.

6ea22fd Added a checkbox UI to the settings view component.
* Also added a feature flag guard to the component. If check box is
clicked, it dispatched `metricsEnableSavingPinsToggled` action.

568febf Added a new effect `disableSavingPins`
* When `metricsEnableSavingPinsToggled` action is called, this effect
will call `removeAllScalarPins` method if `savingPinsEnabled` value is
false.
 
bbf9050 Added saving pins feature in persistent settings to preserve
user preferences.

3ff7cd2 Add buildMetricsSettingsOverrides util in the testing to use in
tbcorp

## Screenshots of UI changes (or N/A)

![image](https://github.com/tensorflow/tensorboard/assets/24772412/874dbc2b-f01f-4112-b34b-6b07330ea31f)

## Detailed steps to verify changes work correctly (as executed by you)
Unit test passes + created a cl/625208577 to pass TAP Presubmit tests
## Alternate designs / implementations considered (or N/A)
N/A

## Action Items in the next PR
In the next PR, I'll add a "confirmation dialog" that appears when the
user unchecks the checkbox to make the user aware that local storage is
disappearing.

- [ ] Add the confirmation dialog
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants