MDC Migration: Merging feature branch with all new Angular Components Styled as desired. #6631
Conversation
This file contains 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
## Motivation for features / changes Background: We are trying to migrate to all the non legacy angular components. To accomplish this we changed them all over at once and began hunting for differences. One of the biggest differences is that the header is totally foobar. This seems to be primarily due to the following issues: 1) The header had a lot of custom hacky css in it 2) The `mat-tab` component had a significant number of structural changes ## Screenshots of UI changes (or N/A) ### Before   ### After   ### With Restyling   ### Googlers Light Mode https://screenshot.googleplex.com/AJdQE3T35aQSxpT Dark Mode https://screenshot.googleplex.com/4Tn3XYqd6FSKCzS
## Motivation for features / changes Updating the style of this menu after update to new MDC components. T ## Technical description of changes The new MDC mat-menu no longer uses `<label>` and can also handle mat-icons on its own. ## Screenshots of UI changes (or N/A) <img width="173" alt="Screenshot 2023-09-28 at 12 02 41 PM" src="https://github.com/tensorflow/tensorboard/assets/8672809/57b3d6c7-4b43-484e-8668-03dc43081e27"> <img width="170" alt="Screenshot 2023-09-28 at 12 04 19 PM" src="https://github.com/tensorflow/tensorboard/assets/8672809/cd1ec903-9c05-463f-ac93-c97cdea8b0ee">
## Motivation for features / changes After migrating to the new Material Components many of the styles were broken. This cleans up the buttons in the runs table context menu. ## Screenshots of UI changes (or N/A) <img width="196" alt="Screenshot 2023-09-28 at 2 59 22 PM" src="https://github.com/tensorflow/tensorboard/assets/8672809/01ef7e8e-7ea0-4de6-ae75-c9fc232e0549"> <img width="196" alt="Screenshot 2023-09-28 at 2 59 12 PM" src="https://github.com/tensorflow/tensorboard/assets/8672809/21842916-7805-4aa2-baec-8357ac5ec77f">
…ow#6614) This restyles the right-hand pane dropdowns. The end result is: 1. selection trigger looks mostly like current. 2. selection panel is styled similar to current but selection rendering is different and the panel is offset lower and slightly to the right. Here are some sample screenshots but please patch it in locally and give it a try:  
…6615) Restyle the checkboxes in both the runs table and right pane. For runs table this is mostly just about removing and adjusting padding. For right pane this: * adds negative margin to account for checkbox padding - aligning the checkboxes with other elements in the pane. * adjusting the text of checkbox labels to look more like the current style. Sample screenshots:  
…tensorflow#6612) This is another attempt at styling the plugins selector component for MDC Migration. We start by reverting the previous attempt so that we have a good base for the conversion. (See b846aae) We then take the approach of attempting to adjust the current styling to mdc components as much as possible, in order to preserve current styling and current behavior. (See 4012cae for the clean diff compared to original) The end result is: * The header plugin tabs appear and behave almost identically to current. * The inactive plugin selector is styled slightly differently but still, in spirit, is similar to current. Sample screenshots:  
## Motivation for features / changes One of the biggest changes we have noticed during the mdc migration appears in the `mat-icon-button`. I am opting to attempt to fix them all at once by modifying the global files present in the theme file, then tweaking specific buttons. ## Screenshots of UI changes (or N/A) ### Before #### Light Mode  #### Dark Mode  ##### Extent Button  #### Table Header Buttons  ### After #### Light Mode  #### Dark Mode  #### Extent Button  #### Table Header Buttons  ### After with Restyling #### Light Mode  #### Dark Mode  #### Extent Button  #### Table Header Buttons  ### Googlers see [Light Mode](https://screenshot.googleplex.com/85bjNe5T2H6nBhy) [Dark Mode](https://screenshot.googleplex.com/5grTGURG8kddzfX)
tensorflow#6617) Restyle the runs data table column selector. The contents end up being larger than current master version. The search icon, and search text input are bigger. The height of each item in the list is taller to match the larger button touch target. Some sample screenshots:  
…ensorflow#6616) Restyle the height of header and rows in the runs data table. The height of these rows does need to increase compared to current master in order to account for the increase in height of the checkbox touch target. But they don't need to be as tall as they are now compared to current MDCMigration. The end result is: * Header and rows height are now 48px. (compared to 56px and 49px in MDCMigration and compared to 48px and 44px in master). So the non-header rows grow in height by 4px compared to master. Header rows remain the same compared to master. Implementation Detail: * I move the common `padding: 4px` out of content_cell_component and header_cell_component and now make this padding the responsibility of runs_data_data and scalar_card_data_table to specify. * scalar_card_data_table specifies, for the time being, `padding: 4px` until we determine we need to make adjustments to it as well for MDC migration. * runs_data_table specifies different padding and adjust its height. Some sample screenshots: 
Style the readme button for MDC Migration. In global theme we change the rules that ensure a read `<a>` link remains white. Screenshots:  
…on. (tensorflow#6618) Style the "settings" button and the "scalars | images | histograms" plugin chooser button. We can do this by adjusting the global styles we recently introduced, meaning that other buttons we add in the future will also adhere to these styles: 1. Set letter-spacing to normal for all button text. 2. Reuse the .mat-icon styling we introduced even for non icon-button buttons. Sample screenshot: 
Style the alert snackbar buttons for MDC migration. They were appearing a dark color at all times. Now we ask it to inherit its color. Sample screenshots:  
## Motivation for features / changes After an update to the new MDC Components the style of this feature was messed up. This fixes that style. ## Screenshots of UI changes (or N/A) <img width="458" alt="Screenshot 2023-10-05 at 3 03 57 PM" src="https://github.com/tensorflow/tensorboard/assets/8672809/6ddc2e53-f129-4fc2-b06e-7a7e1debdb59"> <img width="456" alt="Screenshot 2023-10-05 at 3 04 04 PM" src="https://github.com/tensorflow/tensorboard/assets/8672809/961bca54-d8b3-4f5c-961e-014ba0d1bdcd"> <img width="476" alt="Screenshot 2023-10-05 at 3 04 17 PM" src="https://github.com/tensorflow/tensorboard/assets/8672809/8c66d5ec-16aa-42fd-92b8-fdea3623c8bf">
## Motivation for features / changes After migrating to the new MDC components many new components needed style fixes. This is that fix for the SettingsDialogComponent. ## Screenshots of UI changes (or N/A) before: <img width="409" alt="Screenshot 2023-10-06 at 3 58 41 PM" src="https://github.com/tensorflow/tensorboard/assets/8672809/5f91c6b0-3941-4a9e-a4a1-48a779ead69a"> after: <img width="400" alt="Screenshot 2023-10-06 at 3 20 11 PM" src="https://github.com/tensorflow/tensorboard/assets/8672809/4420a432-0092-428e-a5af-21e84ba4e8cb">
## Motivation for features / changes Fixing regex since it looked pretty bad after MDC Migration. While doing this I also standardized the padding across the entire page to 16px. ## Screenshots of UI changes (or N/A) Before: <img width="774" alt="Screenshot 2023-10-10 at 11 46 33 AM" src="https://github.com/tensorflow/tensorboard/assets/8672809/dcb14b93-2afd-4f45-b269-a8b3d6c6d9b8"> After: 
rileyajones
approved these changes
Oct 10, 2023
There was a problem hiding this comment.
I believe you said that tap actually passed with cl/571955565
bmd3k
approved these changes
Oct 10, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Contributors: @rileyajones, @bmd3k, @JamesHollyer
Motivation for features / changes
Angular is deprecating the "Legacy" Material Components. We are migrating to the new MDC Components. This was done in a feature branch. This PR merges the feature branch into master with all components except for the mat-slider converted and styled properly.
Technical description of changes
This was all done in a feature branch for commit history please see that branch here: https://github.com/tensorflow/tensorboard/tree/MDCMigration
Screenshots of UI changes (or N/A)
Here is one basic screenshot of what a TensorBoard looks like now. For more detailed screenshots please see commit history with above link.
