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

fix(sqllab): fix query results sorting #18666

Conversation

corbinrobb
Copy link
Contributor

@corbinrobb corbinrobb commented Feb 10, 2022

SUMMARY

  • Adds/fixes sorting for results with more than 50 columns
  • Adds third sort state that clears the sort and returns list to its initial order
  • Adds a little more padding for the sorting icons because they were being truncated on some headers

Sorting

In SQL Lab there is currently no sorting for data with more than 50 columns because FilterableTable switches from using the react-virtualized Table to the react-virtualized Grid. Grid isn't set up to have sorting the way that Table is.

The UI is the same as far as the user can tell so the sorting appears to stop working when there are too many columns.

I added listeners to the grid headers and added a displayedList state that gets sorted and used by the grid cells when rendering. I used the SortIndicator icon component and used the same sortBy and sortDirection state that the Table uses. They are never rendered at the same time so it didn't feel necessary to give the Grid its own separate states.

For the same reason I slightly changed the renderTable method to use the new displayedList state as well.

This allows the initial list to remain intact because it is now doing "out of place" sorting instead of "in place" sorting. This allowed me to add a third cleared sort state that reverts the sorting back to before it was sorted.


Third Sort State (Cleared Sort State)

Added a third sorting state to FilterableTable that will return the results to its original order. As far as I know, this was not requested anywhere but I added it because I was in the area.

This is done by having an initial list and a displayed list and only mutating the displayed list when sorting. Then we just set the list back to its initial state when we have already sorted by descending and ascending.

The logic and flow is simple enough

The current sorting flow is:

  • Original list order
  • Click -> Ascending list order
  • Click -> Descending list order
  • Click -> Ascending list order

This PR will change it to:

  • Original list order
  • Click -> Ascending list order
  • Click -> Descending list order
  • Click -> Original list order

Logic:

sort({
    sortBy,
    sortDirection,
  }: {
    sortBy: string;
    sortDirection: SortDirectionType;
  }) {
    this.setState(
      ({
        sortBy: prevSortBy,
        sortDirection: prevSortDirection,
        displayedList: prevDisplayedList,
      }) => {
        const shouldClearSort =
          prevSortDirection === SortDirection.DESC && prevSortBy === sortBy;
        if (shouldClearSort)
          return {
            sortBy: undefined,
            sortDirection: undefined,
            displayedList: [...this.list],
          };

        return {
          sortBy,
          sortDirection,
          displayedList: prevDisplayedList.sort(
            this.sortResults(sortBy, sortDirection === SortDirection.DESC),
          ),
        };
      },
    );
  }

Extra Padding

Increases the constant for the default padding on cells from 40 to 50

The sorting icon was being truncated on some cells so I added a little more padded to fix it.

Screenshots

BEFORE

Example of clicking on headers in table with >50 columns

Screen Recording BEFORE 1

Example of sorting on tables <50 columns

Screen Recording BEFORE 2

Examples of headers being truncated after triggering sorting

Screen Shot 2022-02-10 at 11 17 08 AM

Screen Shot 2022-02-10 at 11 17 19 AM

AFTER

Example of clicking on headers in table with >50 columns

Screen Recording AFTER

Examples of headers not being truncated after triggering sorting

Screen Shot 2022-02-10 at 11 18 43 AM

Screen Shot 2022-02-10 at 11 19 12 AM

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

  • Has associated issue: Sqllab results columns are not sortable for large number of columns #16261
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

@superset-github-bot superset-github-bot bot added the Superset-Community-Partners Preset community partner program participants label Feb 10, 2022
@corbinrobb corbinrobb marked this pull request as ready for review February 10, 2022 23:00
@yousoph
Copy link
Member

yousoph commented Feb 10, 2022

/testenv up

@github-actions
Copy link
Contributor

@yousoph Container image not yet published for this PR. Please try again when build is complete.

@github-actions
Copy link
Contributor

@yousoph Ephemeral environment creation failed. Please check the Actions logs for details.

@@ -114,8 +114,9 @@ interface FilterableTableProps {

interface FilterableTableState {
sortBy?: string;
sortDirection: SortDirectionType;
sortDirection?: SortDirectionType;
Copy link
Member

Choose a reason for hiding this comment

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

why is this optional?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's because of the third unsorted state that I added. Before it was being set with an initial value of "DESC" but it would be unsorted because sortBy starts as undefined. On the first click it would be set to "ASC" and sortBy gets set to that columns name. So now I have it set as undefined/optional initially and then clicking will set it to "ASC" then "DESC" then back to undefined.

I don't really like using undefined like that and I prefer to use null but the in the react-virtualized typing for SortIndicator and Table they have sortDirection set as optional. So if i used null I would have to do a fallback to undefined anyways because of their typing

fitted: false,
displayedList: [...this.list],
Copy link
Member

Choose a reason for hiding this comment

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

is this the entirety of the data?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Should be all of it. The data gets formatted and set to the list variable in the constructor

constructor(props: FilterableTableProps) {
    super(props);
    this.list = this.formatTableData(props.data);

That's all the data that needs to be sorted from what I can tell. Lemme know if you think I missed something though

@@ -295,7 +296,30 @@ export default class FilterableTable extends PureComponent<
sortBy: string;
sortDirection: SortDirectionType;
}) {
this.setState({ sortBy, sortDirection });
this.setState(
Copy link
Member

Choose a reason for hiding this comment

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

this is a lot to put in a setState, could we make the sort direction into its own function and pass it in here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We probably can. What do you mean by sort direction though? I am only seeing the sortDirection param for the sort method and the prevSortDirection param in the setState callback. I am not sure how to turn either into its own function though

@AAfghahi
Copy link
Member

This looks really good, I had some basic questions and one suggestion.

@codecov
Copy link

codecov bot commented Feb 10, 2022

Codecov Report

Merging #18666 (dda6bbf) into master (f03b4db) will decrease coverage by 0.04%.
The diff coverage is 64.28%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #18666      +/-   ##
==========================================
- Coverage   66.29%   66.24%   -0.05%     
==========================================
  Files        1603     1604       +1     
  Lines       62744    62787      +43     
  Branches     6320     6336      +16     
==========================================
- Hits        41593    41591       -2     
- Misses      19499    19545      +46     
+ Partials     1652     1651       -1     
Flag Coverage Δ
javascript 51.21% <64.28%> (-0.08%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...src/components/FilterableTable/FilterableTable.tsx 71.42% <64.28%> (-0.60%) ⬇️
...frontend/src/SqlLab/components/SouthPane/index.tsx 63.33% <0.00%> (ø)
...rontend/src/components/AsyncEsmComponent/index.tsx 96.29% <0.00%> (ø)
...ontend/src/SqlLab/components/QuerySearch/index.tsx 73.07% <0.00%> (ø)
...ntend/src/SqlLab/components/QueryHistory/index.tsx 50.00% <0.00%> (ø)
.../src/components/Select/WindowedSelect/windowed.tsx 70.00% <0.00%> (ø)
...legacy-preset-chart-deckgl/src/DeckGLContainer.jsx 0.00% <0.00%> (ø)
...hart-echarts/src/MixedTimeseries/transformProps.ts 0.00% <0.00%> (ø)
...rontend/src/SqlLab/components/QueryTable/index.jsx
...src/dashboard/components/DeleteComponentButton.jsx
... and 8 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f03b4db...dda6bbf. Read the comment docs.

@yousoph
Copy link
Member

yousoph commented Feb 11, 2022

/testenv up

@github-actions
Copy link
Contributor

@yousoph Ephemeral environment spinning up at http://34.219.227.216:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

Copy link
Member

@geido geido left a comment

Choose a reason for hiding this comment

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

Manual tested it and it looks good!

@eschutho eschutho merged commit 5bb406b into apache:master Feb 14, 2022
@eschutho eschutho deleted the corbin/sqllab-fix-query-results-sorting branch February 14, 2022 21:42
@github-actions
Copy link
Contributor

Ephemeral environment shutdown and build artifacts deleted.

@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.5.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/L Superset-Community-Partners Preset community partner program participants 🚢 1.5.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants