-
Notifications
You must be signed in to change notification settings - Fork 0
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
Settings: Metric Configuration: Metric Details & Breakdowns (2/n) #66
Conversation
…ove MetricViewMocks Restyle metric details up to breakdown dimensions New breakdown copy Refactor breakdowns with toggles
} | ||
|
||
&:hover:after { | ||
content: "➝"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Using this arrow for now because it's much easier to implement.
})} | ||
</Disaggregation> | ||
</MetricDisaggregations> | ||
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The logic didn't really change here - it's just now rendering the disaggregations based on the active tab and conforming to the new design (replaces toggle switches with checkboxes).
definitions and context. | ||
</NoDefinitionsSelected> | ||
</DefinitionsDisplay> | ||
</MetricConfigurationWrapper> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just added a wrapper here and added space for the definitions (includes/excludes) - nothing else changed.
<NoDefinitionsSelected> | ||
<GearsIcon /> | ||
Choose the Annual or Monthly reporting frequency to edit the | ||
definitions and context. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Temporary copy from the designs - will request new copy that's more relevant to the current implementation (without the frequency toggles).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for all of these inline comments!
This is looking great!
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This isn't a part of your PR but for the MetricConfiguration file, do we still need to call getDatapoints
if we're not showing the charts?
@@ -220,6 +267,41 @@ export const DimensionTitle = styled.div<{ enabled?: boolean }>` | |||
enabled ? palette.solid.darkgrey : palette.highlight.grey8}; | |||
`; | |||
|
|||
export const CheckboxWrapper = styled.div` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Perhaps in the future we'll put components such as checkboxes, forms, buttons etc in something like a shared primitives
components directory? Doesn't have to be the focus now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah - when things feel less variable, I think there is plenty of work we can do with the styled components to reorganize and put into a shared library.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah doesn't have to be for the current metric settings work, but perhaps for a new page / feature we can discuss organizing components and try putting new general components into the shared directory?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Absolutely!!! Would also love to at some point do a sweep and merger of all our current "finalized" primitives to the new shared directory.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Love this idea! Maybe we can make some time for this at the end of this sprint
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the MetricsView component in MetricConfiguration.tsx, do we need to keep track of both the metricSettings
and filteredMetricSettings
in state? I think we just need filteredMetricSettings
?
Thought about it a bit more, so I'm thinking when we fetch metric settings we can set metric settings in state as usual, but for
I put this right below |
Thank you for the feedback, Humphrey!
The current behavior sounds exactly like what you described -- sorry I might be confused! Current behavior is -- if no dimensions within a breakdown are turned on, then the checkmark on the overall breakdown (in the tab) will be unchecked/turned off. If at least one dimension within a breakdown is checked, then the overall breakdown is checked. It behaves similar to the previous overall breakdown toggle (unchecking it/"turning it off" means you want to turn all of the dimensions off - similarly, if you turn all of the dimensions of a breakdown off, then the overall breakdown checkmark switches to unchecked/turns off). Please let me know if I'm completely misunderstanding this! Is there's a timeframe in the video I can reference? Here's an isolated video of the behavior in case its helpful to see by itself: Screen.Recording.2022-10-11.at.4.51.01.PM.mov
Absolutely!
Sounds good! What do you think of this?
It is! The boxes' border thickness is set to 1px. Mimicking the design - the boxes touch side by side and don't overlap each other which is why you'll see a 2px border in between the intersection of two boxes - but the hover state border the same as the border thickness - 1px. Here's a close up: Screen.Recording.2022-10-11.at.4.07.40.PM.movLet me know your thoughts! |
If the Data section won't appear within the MetricConfiguration, then no. @hobuobi - a question that came up was where the Data Viz that was previously in the Metric Config section was going to live? |
Great catch! You're right - we don't need There's also plenty within this component that could use a lot of refactoring - and though I'm tempted to refactor everything, to better prioritize, I'm trying to make forward changes and only refactoring old code where necessary - until the very end (as time permits). Not sure if this is a good strategy - but it's helping me keep focused on updating the items that need to be changed, implementing new changes and do a full clean up (where I can also separate these components out into their own files) at the very end. 😄 Let me know your thoughts! |
Yes, that generally sounds like a good strategy to me! I felt like this page is in active development so I didn't leave comments like breaking up the components into separate files for clarity. I left a comment on refactoring the file in the PR but it's not related to this specific PR so no need for that to block on this PR. |
That makes perfect sense - thanks for clarifying & for all of the feedback, Terry! |
Yeah thanks for clarifying how you're prioritizing work too! |
This is all looking great to me! @mxosman / @terryttsai I think this general approach of how to handle refactoring and cleaning up makes sense. Generally I would encourage us to keep new code as clean as possible, and to "refactor as you write", basically. But I think it's totally fine to leave old code for a more dedicated refactoring sprint, to avoid getting distracted and pulled down a rabbit hole. Does that make sense? @mxosman I'm also not sure what @hobuobi meant by the checkmark behavior -- it looks perfect to me! |
@mxosman actually quick question -- are these changes still hooked up to the old API? So like the changes you're making to the checkmarks are persisting like they used to? |
Yeah - the behavior of the toggles and checkmarks is exactly the same - that logic went untouched. Mostly updated the CSS. |
* Restructure settings files, rename, extract styles * Refactor settings page and set up existing components in new structure * Styling adjustment * Change text to Your Account * Settings: Metric Configuration (1/n) (#64) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Remove routing to old metrics page - remove from menu * Styling adjustment * Fix key warning Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Metric Details & Breakdowns (2/n) (#66) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Styling adjustment * Change MetricView to MetricConfiguration and update all imports - remove MetricViewMocks Restyle metric details up to breakdown dimensions New breakdown copy Refactor breakdowns with toggles * Refactor disaggregations to use checkboxes and remove toggle switch * Add definitions panel, add icon * Style clean up - comments * Clean up * Feedback: reduce height in metric boxes, only use filteredMetricSettings optimization Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Definitions (3/n) (#83) * Initial work on MetricDefinitions component * Continue fleshing out definitions component, move metric context config to overall metric definition panel, set up mocks for definitions, add and update types, fix adjustments dependent on changes * Adjust styles for scrolling * Clean up * Style and comment clean up * Fix type * Use undefined vs empty string * Fix key warning * Settings: Metric Configuration: Navigation (Table of Contents) (4/n) (#85) * Add table of contents navigation when inside of metric details, move shared state to settings page and pass state to menu and metric config, fix disaggregation issues, add styling for table of contents, fix bug in mocks, add types, various adjustments to accommodate new change * Clean up * Add comments Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Refactor & Clean Up (5/n) (#91) * Major clean up - separate components into their own files * Fix dimension bug * Fix switch agency bug * Minor clean up * Merge types with existing types and update all connected components * Clean up * Handle cases when settings array is empty or non-existent * Handle cases when settings array is empty or non-existent * Styling adjustments per prev feedback * Recreate MetricsView Component for Data Visualization (#101) * Recreate old MetricsView component Update route and add to menu Update styling Remove unnecessary code - minor refactor Clean up * Fix styling issue * Add spacing between header and data viz * Add border top to data viz dropdown * Update tooltip and link to direct users to Settings to change metric config Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Save Definitions (and Replace Mocks) (6/n) (#108) * [Summary] Remove mocks and implement definition saving functionality and UI update functionality * Revert to default values functionality * Fix revert to default for metric setting * Clean up comment * PR feedback: reverse the conditionals * Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (1/n) (#110) * Remove tabs in metric list when agency has only one system * Change casing to capitalized case on Monthly Annual badges * Reduce spacing of Settings menu * Scroll gap adjustment * Settings: Metric Configuration: Playtesting Followups - Selection States (2/n) (#112) * Add arrow vector, add logic for persisting on click, update hover and active states, clean up * Settings: Metric Configuration: Playtesting Followups - Default Definition Hover State (3/n) (#113) * Add hover feature to display the default settings when user hovers over the revert button * Update to Choose instead of Revert per design * Clean up * Settings: Metric Configuration: Playtesting Followups - Enable Dimension Selection When Disaggregation is Off (4/n) (#115) * When disaggregation and dimensions are all off, checking on a dimension will turn on the disaggregation * Styling bug fixes * Implement responsiveness per design (#117) Co-authored-by: Mahmoud <[email protected]>
* Settings: Scaffolding (#59) * Restructure settings files, rename, extract styles * Refactor settings page and set up existing components in new structure * Styling adjustment * Change text to Your Account * Settings: Metric Configuration (1/n) (#64) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Remove routing to old metrics page - remove from menu * Styling adjustment * Fix key warning Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Metric Details & Breakdowns (2/n) (#66) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Styling adjustment * Change MetricView to MetricConfiguration and update all imports - remove MetricViewMocks Restyle metric details up to breakdown dimensions New breakdown copy Refactor breakdowns with toggles * Refactor disaggregations to use checkboxes and remove toggle switch * Add definitions panel, add icon * Style clean up - comments * Clean up * Feedback: reduce height in metric boxes, only use filteredMetricSettings optimization Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Definitions (3/n) (#83) * Initial work on MetricDefinitions component * Continue fleshing out definitions component, move metric context config to overall metric definition panel, set up mocks for definitions, add and update types, fix adjustments dependent on changes * Adjust styles for scrolling * Clean up * Style and comment clean up * Fix type * Use undefined vs empty string * Fix key warning * Settings: Metric Configuration: Navigation (Table of Contents) (4/n) (#85) * Add table of contents navigation when inside of metric details, move shared state to settings page and pass state to menu and metric config, fix disaggregation issues, add styling for table of contents, fix bug in mocks, add types, various adjustments to accommodate new change * Clean up * Add comments Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Refactor & Clean Up (5/n) (#91) * Major clean up - separate components into their own files * Fix dimension bug * Fix switch agency bug * Minor clean up * Merge types with existing types and update all connected components * Clean up * Handle cases when settings array is empty or non-existent * Handle cases when settings array is empty or non-existent * Styling adjustments per prev feedback * Recreate MetricsView Component for Data Visualization (#101) * Recreate old MetricsView component Update route and add to menu Update styling Remove unnecessary code - minor refactor Clean up * Fix styling issue * Add spacing between header and data viz * Add border top to data viz dropdown * Update tooltip and link to direct users to Settings to change metric config Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Save Definitions (and Replace Mocks) (6/n) (#108) * [Summary] Remove mocks and implement definition saving functionality and UI update functionality * Revert to default values functionality * Fix revert to default for metric setting * Clean up comment * PR feedback: reverse the conditionals * Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (1/n) (#110) * Remove tabs in metric list when agency has only one system * Change casing to capitalized case on Monthly Annual badges * Reduce spacing of Settings menu * Scroll gap adjustment * Settings: Metric Configuration: Playtesting Followups - Selection States (2/n) (#112) * Add arrow vector, add logic for persisting on click, update hover and active states, clean up * Settings: Metric Configuration: Playtesting Followups - Default Definition Hover State (3/n) (#113) * Add hover feature to display the default settings when user hovers over the revert button * Update to Choose instead of Revert per design * Clean up * Settings: Metric Configuration: Playtesting Followups - Enable Dimension Selection When Disaggregation is Off (4/n) (#115) * When disaggregation and dimensions are all off, checking on a dimension will turn on the disaggregation * Styling bug fixes * Implement responsiveness per design (#117) Co-authored-by: Mahmoud <[email protected]> * Rebase adjustments - updating imports, types and other react upgrade related adjustments * Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (6/n) (#121) * Fix overflow scroll bars * Adjust overall spacing and font size, fix squished arrow in metric box * Adjust Context and update copy for items without tech definition Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]>
* Restructure settings files, rename, extract styles * Refactor settings page and set up existing components in new structure * Styling adjustment * Change text to Your Account * Settings: Metric Configuration (1/n) (#64) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Remove routing to old metrics page - remove from menu * Styling adjustment * Fix key warning Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Metric Details & Breakdowns (2/n) (#66) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Styling adjustment * Change MetricView to MetricConfiguration and update all imports - remove MetricViewMocks Restyle metric details up to breakdown dimensions New breakdown copy Refactor breakdowns with toggles * Refactor disaggregations to use checkboxes and remove toggle switch * Add definitions panel, add icon * Style clean up - comments * Clean up * Feedback: reduce height in metric boxes, only use filteredMetricSettings optimization Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Definitions (3/n) (#83) * Initial work on MetricDefinitions component * Continue fleshing out definitions component, move metric context config to overall metric definition panel, set up mocks for definitions, add and update types, fix adjustments dependent on changes * Adjust styles for scrolling * Clean up * Style and comment clean up * Fix type * Use undefined vs empty string * Fix key warning * Settings: Metric Configuration: Navigation (Table of Contents) (4/n) (#85) * Add table of contents navigation when inside of metric details, move shared state to settings page and pass state to menu and metric config, fix disaggregation issues, add styling for table of contents, fix bug in mocks, add types, various adjustments to accommodate new change * Clean up * Add comments Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Refactor & Clean Up (5/n) (#91) * Major clean up - separate components into their own files * Fix dimension bug * Fix switch agency bug * Minor clean up * Merge types with existing types and update all connected components * Clean up * Handle cases when settings array is empty or non-existent * Handle cases when settings array is empty or non-existent * Styling adjustments per prev feedback * Recreate MetricsView Component for Data Visualization (#101) * Recreate old MetricsView component Update route and add to menu Update styling Remove unnecessary code - minor refactor Clean up * Fix styling issue * Add spacing between header and data viz * Add border top to data viz dropdown * Update tooltip and link to direct users to Settings to change metric config Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Save Definitions (and Replace Mocks) (6/n) (#108) * [Summary] Remove mocks and implement definition saving functionality and UI update functionality * Revert to default values functionality * Fix revert to default for metric setting * Clean up comment * PR feedback: reverse the conditionals * Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (1/n) (#110) * Remove tabs in metric list when agency has only one system * Change casing to capitalized case on Monthly Annual badges * Reduce spacing of Settings menu * Scroll gap adjustment * Settings: Metric Configuration: Playtesting Followups - Selection States (2/n) (#112) * Add arrow vector, add logic for persisting on click, update hover and active states, clean up * Settings: Metric Configuration: Playtesting Followups - Default Definition Hover State (3/n) (#113) * Add hover feature to display the default settings when user hovers over the revert button * Update to Choose instead of Revert per design * Clean up * Settings: Metric Configuration: Playtesting Followups - Enable Dimension Selection When Disaggregation is Off (4/n) (#115) * When disaggregation and dimensions are all off, checking on a dimension will turn on the disaggregation * Styling bug fixes * Implement responsiveness per design (#117) Co-authored-by: Mahmoud <[email protected]> Rebase adjustments - updating imports, types and other react upgrade related adjustments Refactor settings to use routes
* Restructure settings files, rename, extract styles * Refactor settings page and set up existing components in new structure * Styling adjustment * Change text to Your Account * Settings: Metric Configuration (1/n) (#64) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Remove routing to old metrics page - remove from menu * Styling adjustment * Fix key warning Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Metric Details & Breakdowns (2/n) (#66) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Styling adjustment * Change MetricView to MetricConfiguration and update all imports - remove MetricViewMocks Restyle metric details up to breakdown dimensions New breakdown copy Refactor breakdowns with toggles * Refactor disaggregations to use checkboxes and remove toggle switch * Add definitions panel, add icon * Style clean up - comments * Clean up * Feedback: reduce height in metric boxes, only use filteredMetricSettings optimization Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Definitions (3/n) (#83) * Initial work on MetricDefinitions component * Continue fleshing out definitions component, move metric context config to overall metric definition panel, set up mocks for definitions, add and update types, fix adjustments dependent on changes * Adjust styles for scrolling * Clean up * Style and comment clean up * Fix type * Use undefined vs empty string * Fix key warning * Settings: Metric Configuration: Navigation (Table of Contents) (4/n) (#85) * Add table of contents navigation when inside of metric details, move shared state to settings page and pass state to menu and metric config, fix disaggregation issues, add styling for table of contents, fix bug in mocks, add types, various adjustments to accommodate new change * Clean up * Add comments Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Refactor & Clean Up (5/n) (#91) * Major clean up - separate components into their own files * Fix dimension bug * Fix switch agency bug * Minor clean up * Merge types with existing types and update all connected components * Clean up * Handle cases when settings array is empty or non-existent * Handle cases when settings array is empty or non-existent * Styling adjustments per prev feedback * Recreate MetricsView Component for Data Visualization (#101) * Recreate old MetricsView component Update route and add to menu Update styling Remove unnecessary code - minor refactor Clean up * Fix styling issue * Add spacing between header and data viz * Add border top to data viz dropdown * Update tooltip and link to direct users to Settings to change metric config Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]> Settings: Metric Configuration: Save Definitions (and Replace Mocks) (6/n) (#108) * [Summary] Remove mocks and implement definition saving functionality and UI update functionality * Revert to default values functionality * Fix revert to default for metric setting * Clean up comment * PR feedback: reverse the conditionals * Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (1/n) (#110) * Remove tabs in metric list when agency has only one system * Change casing to capitalized case on Monthly Annual badges * Reduce spacing of Settings menu * Scroll gap adjustment * Settings: Metric Configuration: Playtesting Followups - Selection States (2/n) (#112) * Add arrow vector, add logic for persisting on click, update hover and active states, clean up * Settings: Metric Configuration: Playtesting Followups - Default Definition Hover State (3/n) (#113) * Add hover feature to display the default settings when user hovers over the revert button * Update to Choose instead of Revert per design * Clean up * Settings: Metric Configuration: Playtesting Followups - Enable Dimension Selection When Disaggregation is Off (4/n) (#115) * When disaggregation and dimensions are all off, checking on a dimension will turn on the disaggregation * Styling bug fixes * Implement responsiveness per design (#117) Co-authored-by: Mahmoud <[email protected]> Rebase adjustments - updating imports, types and other react upgrade related adjustments Refactor settings to use routes
Description of the change
Continues iteration on the new Metric Configuration page and specifically implements the checkbox breakdowns (replacing the toggle switches) and sets up the Definitions (includes/excludes) panel.
Metric.Config.-.Breakdowns.mov
Related issues
Closes #72
Checklists
Development
This box MUST be checked by the submitter prior to merging:
These boxes should be checked by the submitter prior to merging:
Code review
These boxes should be checked by reviewers prior to merging: