Offer hiding columns from the Performance Analysis table by JosephMarinier · Pull Request #129 · ServiceNow/azimuth

JosephMarinier · 2022-06-08T16:01:22Z

Resolve #126

Description:

Clean up
Offer hiding columns
- Hide filter options (with handy boolean attribute)
- Hide sort options since they are already available via the sorting button (in global CSS, as sx doesn't work since the popover menu is not a child of the DataGrid)
Have columns flex to accommodate hiding columns. Also taking this opportunity to adjust the widths to new outcome names.
Show columns separator in headers to avoid ambiguity with which column the menu button belongs to.
Refine sorting
- Show the initial sort
- Disable sortingOrder=null as it is redundant with sorting by utteranceCount desc
Set maxWidth so that columns stop getting wider going under 6 columns.

Checklist:

You should check all boxes before the PR is ready. If a box does not apply, check it to acknowledge
it.

PRE-COMMIT. You ran pre-commit on all commits, or else, you
ran pre-commit run --all-files at the end.
FRONTEND TYPES. Regenerate the front-ent types if you played with types and routes.
Run cd webapp && yarn types while the back-end is running.
USER CHANGES. The changes are added to CHANGELOG.md and the documentation, if they impact
our users.
DEV CHANGES.
- Update the documentation if this PR changes how to develop/launch on the app.
- Update the README files and our wiki for any big design decisions, if relevant.
- Add unit tests, docstrings, typing and comments for complex sections.

JosephMarinier · 2022-06-08T16:06:55Z

I know it's a shame that this ends up here, but that's the best I can come up with after an hour of trying different solutions.

@nandhinibsn

A general question to @JosephMarinier on the PR description. Can you explain a bit about hiding sort options? Do you mean the default sort of datagrid is disabled for all the columns in the performance analysis?

This is hiding the sort options from the column menu (visible on the first screenshot). I have not changed the options themselves.

Is it really important to hide this option? Like is it bad that we can sort from two places?

It's not "really" important, but I thought the extra 3 buttons were making the menu overly complex, given they were not adding functionality. Also, they are not affected by the sortingOrder we define, so the null sorting option is there even if it is useless.

It's probably fine but it seems brittle... what if MUI adds a new option to the menu?

JosephMarinier · 2022-06-08T16:07:59Z

So few letter were saved by this abbreviation. I added 5 pixels and the whole thing fits.

What about Utterance Count?

I'm fine with that too! I'm not sure why it was "Number of utterances" though. Maybe @christyler3030 can confirm?

nandhinibsn · 2022-06-08T18:25:43Z

A general question to @JosephMarinier on the PR description. Can you explain a bit about hiding sort options? Do you mean the default sort of datagrid is disabled for all the columns in the performance analysis?

- Hide filter options (with handy boolean attribute) - Hide sort options since they are already available via the sorting button (in global CSS, as `sx` doesn't work since the popover menu is not a child of the `DataGrid`)

to accommodate hiding columns. Also taking this opportunity to adjust the widths to new outcome names.

in headers to avoid ambiguity with which column the menu button belongs to.

- Show the initial sort - Disable `sortingOrder=null` as it is redundant with sorting by `utteranceCount` `desc`

christyler3030 · 2022-06-10T13:32:03Z

      field: outcome,
      headerName: OUTCOME_PRETTY_NAMES[outcome],
+      flex: 1,
+      minWidth: 160,


Would it be worth having maxWidth on the columns as well for uses where there are very few columns?

Ho interesting idea! 👍 Let me play with that...

Yup, pretty cool! I just Set maxWidth so that columns stop getting wider going under 6 columns.

JosephMarinier · 2022-06-10T13:48:33Z

    {
-      width: 206,
      field: "filterValue",
+      headerName: OPTION_PRETTY_NAME[selectedMetricPerFilterOption],


The headerName is not shown in the header since we have a renderHeader, but it is used in the show/hide columns menu. See second screenshot in PR description.

so that columns stop getting wider going under 6 columns.

christyler3030

Approved with some hesitancy about the table theme override

to remove sort menu items

JosephMarinier requested review from christyler3030, gabegma and nandhinibsn June 8, 2022 16:01

JosephMarinier self-assigned this Jun 8, 2022

JosephMarinier force-pushed the joseph/performance-analysis-table branch from 2f5819d to 6f02a43 Compare June 8, 2022 16:02

JosephMarinier commented Jun 8, 2022

View reviewed changes

JosephMarinier linked an issue Jun 8, 2022 that may be closed by this pull request

Ability to hide columns in the performance analysis table #126

Closed

JosephMarinier removed a link to an issue Jun 8, 2022

Ability to hide columns in the performance analysis table #126

Closed

JosephMarinier linked an issue Jun 8, 2022 that may be closed by this pull request

Ability to hide columns in the performance analysis table #126

Closed

JosephMarinier added 5 commits June 10, 2022 09:08

Clean up

b473b5e

Offer hiding columns

04ad7e2

- Hide filter options (with handy boolean attribute) - Hide sort options since they are already available via the sorting button (in global CSS, as `sx` doesn't work since the popover menu is not a child of the `DataGrid`)

Have columns flex

0f76cab

to accommodate hiding columns. Also taking this opportunity to adjust the widths to new outcome names.

Show columns separator

ff78d66

in headers to avoid ambiguity with which column the menu button belongs to.

Refine sorting

40237b9

- Show the initial sort - Disable `sortingOrder=null` as it is redundant with sorting by `utteranceCount` `desc`

JosephMarinier force-pushed the joseph/performance-analysis-table branch from 6f02a43 to 40237b9 Compare June 10, 2022 13:11

christyler3030 reviewed Jun 10, 2022

View reviewed changes

JosephMarinier commented Jun 10, 2022

View reviewed changes

Set maxWidth

0fa7cff

so that columns stop getting wider going under 6 columns.

christyler3030 approved these changes Jun 10, 2022

View reviewed changes

Create custom ColumnMenu

8a6ae38

to remove sort menu items

JosephMarinier merged commit 1145959 into dev Jun 10, 2022

JosephMarinier deleted the joseph/performance-analysis-table branch June 10, 2022 16:38

Conversation

JosephMarinier commented Jun 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description:

Checklist:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

christyler3030 Jun 10, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nandhinibsn commented Jun 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

christyler3030 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

JosephMarinier commented Jun 8, 2022 •

edited

Loading

christyler3030 Jun 10, 2022 •

edited

Loading

nandhinibsn commented Jun 8, 2022 •

edited

Loading