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

Settings: Metric Configuration: Navigation (Table of Contents) (4/n) #85

Merged

Conversation

mxosman
Copy link
Contributor

@mxosman mxosman commented Oct 14, 2022

Description of the change

Adds table-of-content navigation of metrics in the settings menu once a user has clicked into a metric that allows users an easy way to toggle between metrics while in the detailed view.

New.Settings.-.Navigation.mov

Related issues

Closes #80

Checklists

Development

This box MUST be checked by the submitter prior to merging:

  • Double- and triple-checked that there is no Personally Identifiable Information (PII) being mistakenly added in this pull request

These boxes should be checked by the submitter prior to merging:

  • Tests have been written to cover the code changed/added as part of this pull request

Code review

These boxes should be checked by reviewers prior to merging:

  • This pull request has a descriptive title and information useful to a reviewer
  • This pull request has been moved out of a Draft state, has no "Work In Progress" label, and has assigned reviewers
  • Potential security implications or infrastructural changes have been considered, if relevant

…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
</TabbedItem>
)
)}
{activeDisaggregation &&
Copy link
Contributor Author

@mxosman mxosman Oct 14, 2022

Choose a reason for hiding this comment

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

This is the only thing that changed in this block.

@mxosman mxosman changed the title [WIP] Settings: Metric Configuration: Navigation (Table of Contents) (4/n) Settings: Metric Configuration: Navigation (Table of Contents) (4/n) Oct 14, 2022
@mxosman mxosman requested a review from a team October 14, 2022 16:53
Copy link
Collaborator

@lilidworkin lilidworkin left a comment

Choose a reason for hiding this comment

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

Nice! Can you test that this plays nicely with the tabs for different systems? i.e. if you switch to a different system, does the list of metrics change how we would expect?

@mxosman
Copy link
Contributor Author

mxosman commented Oct 17, 2022

Nice! Can you test that this plays nicely with the tabs for different systems? i.e. if you switch to a different system, does the list of metrics change how we would expect?

Yes! I already had our favorite multi-system agencies in mind and my solution was just to show the list of metrics for the system the user clicked a metric in - better demonstrated in a video:

Screen.Recording.2022-10-17.at.10.57.29.AM.mov

Let me know your thoughts?

Copy link
Collaborator

@lilidworkin lilidworkin left a comment

Choose a reason for hiding this comment

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

Looks perfect!! Thanks for the video showing the multiple systems!

@mxosman
Copy link
Contributor Author

mxosman commented Oct 17, 2022

Nice! Can you test that this plays nicely with the tabs for different systems? i.e. if you switch to a different system, does the list of metrics change how we would expect?

Oh and oops - to your other point - you can switch agencies and the view will update as well!

Screen.Recording.2022-10-17.at.11.00.32.AM.mov

@terryttsai
Copy link
Contributor

Screen Shot 2022-10-17 at 2 23 34 PM

Not related to your PR, but should content extend to the bottom of the window without bottom padding?

Copy link
Contributor

@terryttsai terryttsai left a comment

Choose a reason for hiding this comment

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

Looking great!

@mxosman
Copy link
Contributor Author

mxosman commented Oct 17, 2022

Screen Shot 2022-10-17 at 2 23 34 PM

Not related to your PR, but should content extend to the bottom of the window without bottom padding?

Totally fair call out - there was a sweet spot I found in the heights to have these nested scrollable containers play nicely. I can revisit this and see if there's a solution that will extend it to the bottom and keep everything else playing nice - but this was a product of how I set up the containers.

@mxosman mxosman merged commit 143b50a into mahmoud/settings-metric-config-3 Oct 18, 2022
@mxosman mxosman deleted the mahmoud/settings-metric-config-4 branch October 18, 2022 15:49
mxosman added a commit that referenced this pull request Oct 18, 2022
* 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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>
@mxosman mxosman mentioned this pull request Oct 18, 2022
5 tasks
mxosman added a commit that referenced this pull request Oct 26, 2022
* 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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>
mxosman added a commit that referenced this pull request Oct 27, 2022
* 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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

* 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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>
mxosman added a commit that referenced this pull request Nov 8, 2022
* 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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Rebase adjustments - updating imports, types and other react upgrade related adjustments

Refactor settings to use routes
mxosman added a commit that referenced this pull request Nov 8, 2022
* 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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Rebase adjustments - updating imports, types and other react upgrade related adjustments

Refactor settings to use routes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants