Settings: Metric Configuration: Definitions (3/n) #83

mxosman · 2022-10-13T17:18:14Z

Description of the change

Implements the UI for the metric configuration definitions (includes/excludes) and moves the metric context configuration to the overall metric's definition. Currently it uses a mock settings object that is appended to the response and for now updates do not persist - the logic to save settings and send them to the backend will be implemented in a follow up PR (#82 specifically).

New.Settings.-.Metric.Config.Definitions.mov

Related issues

Closes #73

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

mxosman · 2022-10-13T17:34:23Z

publisher/src/components/MetricConfiguration/MetricConfiguration.tsx

-  }[];
+  contexts: MetricContext[];
+  disaggregations: MetricConfigurationMetricDisaggregation[];
+  settings: MetricConfigurationSettings[];


When I do a refactor, I'll find a way to merge these with the shared types by adding the new settings types to the existing metric types - doing so in this PR would require cascading updates to tests and other unrelated components.

mxosman · 2022-10-13T17:35:52Z

publisher/src/components/MetricConfiguration/MetricConfiguration.tsx

  saveAndUpdateMetricSettings: (
    typeOfUpdate: "METRIC" | "DISAGGREGATION" | "DIMENSION" | "CONTEXT",
    updatedSetting: MetricSettings,
    debounce?: boolean
  ) => void;
+  setActiveDimension: React.Dispatch<
+    React.SetStateAction<MetricConfigurationMetricDimension | undefined>
+  >;


[L156, L162-164]: Changed the name of MetricsViewMetric to MetricConfigurationMetric.

mxosman · 2022-10-13T17:38:22Z

publisher/src/components/MetricConfiguration/MetricConfiguration.tsx

@@ -396,7 +405,7 @@ const MetricContextConfiguration: React.FC<MetricContextConfigurationProps> = ({
    if (contexts) {
      contexts.forEach((context) => {
        if (context.type === "NUMBER") {
-          contextNumberValidation(context.key, context.value || "");
+          contextNumberValidation(context.key, (context.value || "") as string);


Added as string to satisfy the type additions - nothing changed here aside from explicitly typing this as a string. Will revisit in the refactor when I merge the types.

mxosman · 2022-10-13T17:39:06Z

publisher/src/components/MetricConfiguration/MetricConfiguration.tsx

+    const reportSettings =
+      (await response.json()) as MetricConfigurationMetric[];
+    const metricKeyToMetricMap: { [key: string]: MetricConfigurationMetric } =
+      {};


[L579, L793-796]: Changed the name of MetricsViewMetric to MetricConfigurationMetric.

…ig to overall metric definition panel, set up mocks for definitions, add and update types, fix adjustments dependent on changes

lilidworkin

The video looks beautiful to me! Not sure if @terryttsai wants to take a look too, but will accept to unblock. Code looks clean, seems like you gave this all a lot of thought. Thanks for the pre-comments!

terryttsai

This is looking awesome! Left a small comment

terryttsai · 2022-10-17T21:09:19Z

publisher/src/components/MetricConfiguration/MetricConfiguration.tsx

+  key: string;
+  label: string;
+  included: MetricConfigurationSettingsOptions;
+  default: MetricConfigurationSettingsOptions;


What is default? Is it used?

Thanks Terry! default refers to the metric's default includes/excludes settings (which is pre-set as far as I understand). If a user makes changes and wants to revert back to the default includes/excludes settings, we can refer to the default property on each setting.

…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>

* 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>

* 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>

* 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 changed the title ~~[WIP] Settings: Metric Configuration - Definitions~~ [WIP] Settings: Metric Configuration - Definitions (3/n) Oct 13, 2022

mxosman marked this pull request as ready for review October 13, 2022 17:33

mxosman commented Oct 13, 2022

View reviewed changes

mxosman changed the title ~~[WIP] Settings: Metric Configuration - Definitions (3/n)~~ Settings: Metric Configuration - Definitions (3/n) Oct 13, 2022

mxosman added the Type: Feature label Oct 13, 2022

mxosman changed the title ~~Settings: Metric Configuration - Definitions (3/n)~~ Settings: Metric Configuration: Definitions (3/n) Oct 13, 2022

mxosman requested a review from a team October 13, 2022 17:43

Base automatically changed from mahmoud/settings-metric-config-2 to settings-feature October 13, 2022 17:57

mxosman force-pushed the mahmoud/settings-metric-config-3 branch from 6cd0bf3 to 274ad5e Compare October 13, 2022 18:08

Mahmoud added 5 commits October 13, 2022 13:30

Initial work on MetricDefinitions component

2e6a5bb

Continue fleshing out definitions component, move metric context conf…

3066a4f

…ig to overall metric definition panel, set up mocks for definitions, add and update types, fix adjustments dependent on changes

Adjust styles for scrolling

a965240

Clean up

177ebb4

Style and comment clean up

3ab0e3a

mxosman force-pushed the mahmoud/settings-metric-config-3 branch from 274ad5e to 3ab0e3a Compare October 13, 2022 18:31

Mahmoud added 2 commits October 13, 2022 13:53

Fix type

fd2a98f

Use undefined vs empty string

9416941

mxosman mentioned this pull request Oct 13, 2022

Settings Feature #84

Merged

5 tasks

Fix key warning

7f4c870

lilidworkin approved these changes Oct 14, 2022

View reviewed changes

terryttsai approved these changes Oct 17, 2022

View reviewed changes

mxosman merged commit 41a1e29 into settings-feature Oct 18, 2022

mxosman deleted the mahmoud/settings-metric-config-3 branch October 18, 2022 15:50

mxosman mentioned this pull request Nov 8, 2022

[Do Not Merge: Reference Only] Settings: Routes (Rough Draft) #139

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Settings: Metric Configuration: Definitions (3/n) #83

Settings: Metric Configuration: Definitions (3/n) #83

mxosman commented Oct 13, 2022 •

edited

Loading

mxosman Oct 13, 2022

mxosman Oct 13, 2022

mxosman Oct 13, 2022

mxosman Oct 13, 2022

lilidworkin left a comment

terryttsai left a comment

terryttsai Oct 17, 2022

mxosman Oct 17, 2022

Settings: Metric Configuration: Definitions (3/n) #83

Settings: Metric Configuration: Definitions (3/n) #83

Conversation

mxosman commented Oct 13, 2022 • edited Loading

Description of the change

Related issues

Checklists

Development

Code review

mxosman Oct 13, 2022

Choose a reason for hiding this comment

mxosman Oct 13, 2022

Choose a reason for hiding this comment

mxosman Oct 13, 2022

Choose a reason for hiding this comment

mxosman Oct 13, 2022

Choose a reason for hiding this comment

lilidworkin left a comment

Choose a reason for hiding this comment

terryttsai left a comment

Choose a reason for hiding this comment

terryttsai Oct 17, 2022

Choose a reason for hiding this comment

mxosman Oct 17, 2022

Choose a reason for hiding this comment

mxosman commented Oct 13, 2022 •

edited

Loading