feat(chart-explore): add select all functionality to table viz type #19979

cccs-RyanK · 2022-05-06T17:42:15Z

SUMMARY

The select all functionality was removed previously, but our users rely on this useful feature in the chart explorer, so this PR is for bringing back that feature.

With the way things currently are, the user must manually select columns one by one by clicking or dragging and dropping into the columns field when building a query in the explore view. When the user is initially creating a chart, it is often the case that they want to query all the possible fields to identify what is relevant and narrow it down. This becomes tedious when dealing with data-sets that have many columns (100+).

We have had to create a temporary solution in our fork just to allow our users who rely on it to use the chart explorer. This design aims to reintroduce the select all functionality in a non disruptive way while keeping the UX clean. It is only shown in the columns select when in the raw records query mode in the explore view on the 'table plugin', since this is the place where it is needed by our users.

Thoughts and feedback are appreciated!

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Drag and Drop Feature Enabled:

SELECT ALL
When the columns field is empty, the select all button can be clicked to populate the columns field with all available options.

DESELECT ALL
Once any option(s) have been selected, the button text changes to deselect all. If it is clicked in this state, it empties the columns field (and the button text changes back to 'SELECT ALL').

Drag and Drop Feature Disabled:

* the columns field is "full" when all options are currently selected (list of selected values equals list of options)
SELECT ALL
When the columns field is not full*, the select all button can be clicked to add all remaining options. Since there is already a 'clear' button built in to select control when the Drag and Drop Feature is disabled, the select all button does not turn into a deselect all button when an item is added. This allows a user to select all options without first clearing the values and then selecting all. The user can still clear the values at any time with the 'clear' button.

SELECT ALL Disabled
When the columns field is full*, the select all button is disabled because all options are currently selected.

TESTING INSTRUCTIONS

Drag and Drop Feature enabled

Explore a chart that uses the 'Table' viz type.
In the 'Data' tab, under the 'Query' drop down, select 'Raw Records' as the 'Query Mode'.
For the 'Columns' selector, you should see a 'Select All' or 'Deselect All' button.
Clicking it should select all options when the button is in select all mode, and should deselect all buttons when in deselect mode.

Drag and Drop Feature disabled

Explore a chart that uses the 'Table' viz type.
In the 'Data' tab, under the 'Query' drop down, select 'Raw Records' as the 'Query Mode'.
For the 'Columns' selector, you should see a 'SELECT ALL' button.
If all options are selected, the button should be disabled.
Otherwise, the button should be enabled and should select all remaining options.
The clear button in the selector component should still clear all selected values.

ADDITIONAL INFORMATION

Has associated issue: "Select All" functionality needed in column select #18247
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

ktmud

Thanks for the contribution! Added a couple of style suggestions.

For non-DnD mode, have you considered adding a "Select all" option like the old select control has?

ktmud · 2022-05-06T22:11:15Z

superset-frontend/src/explore/components/SelectAllButton/index.tsx

+      }
+      onClick={onSelectAll}
+    >
+      {deselectEnabled && !selectMode()? t('Deselect All'): t('Select All')}


Suggested change

{deselectEnabled && !selectMode()? t('Deselect All'): t('Select All')}

{deselectEnabled && !selectMode()? t('Deselect all'): t('Select all')}

We use sentence case for control buttons. Although in this case it doesn't matter since it's all capitalized by CSS.

ktmud · 2022-05-06T22:12:37Z

superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx

@@ -118,6 +118,7 @@ const all_columns: typeof sharedControls.groupby = {
  }),
  visibility: isRawMode,
  resetOnHide: false,
+  showSelectAllButton: true,


Suggested change

showSelectAllButton: true,

showSelectAll: true,

I think it's okay to call this prop showSelectAll in case we want to change how the "select all" trigger looks like.

ktmud · 2022-05-06T22:13:52Z

superset-frontend/src/explore/components/SelectAllButton/index.tsx

+      css={(theme: SupersetTheme) =>
+        css`
+          padding: 0;
+        `
+      }


Suggested change

css={(theme: SupersetTheme) =>

css`

padding: 0;

`

}

css={{ padding: 0 }}

Since theme is not used, this should be good enough.

ktmud · 2022-05-06T22:24:10Z

superset-frontend/src/explore/components/controls/SelectControl.jsx

+  handleSelectAll() {
+    /**
+     * Function to handle select all button.
+     * Adds all options to the selected values.
+     */


Suggested change

handleSelectAll() {

/**

* Function to handle select all button.

* Adds all options to the selected values.

*/

/**

* Function to handle select all button.

* Adds all options to the selected values.

*/

handleSelectAll() {

Nit: normally we put function doc string above the function name.

ktmud · 2022-05-06T22:24:47Z

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx

+   * Adds a select all button next to the header, allowing the user to 
+   * select all options in one click. Can only be a SelectAllButton or null.  
+   */
+  selectAllButton?: ReactNode;


Suggested change

selectAllButton?: ReactNode;

headerAfter?: ReactNode;

I think it's okay to make this node more generic. You never know if you want to add a different type of control here. For example, in non-DnD mode adhoc metrics control, this is a plus button.

ktmud · 2022-05-06T22:30:25Z

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx

@@ -229,6 +271,7 @@ export function DndColumnSelect(props: DndColumnSelectProps) {
            ? openPopover
            : undefined
        }
+        selectAllButton={showSelectAllButton ? <SelectAllButton {...selectAllButtonProps} /> : null}


Suggested change

selectAllButton={showSelectAllButton ? <SelectAllButton {...selectAllButtonProps} /> : null}

selectAllButton={

showSelectAllButton ? (

<Button

buttonStyle="link"

disabled={hasSelectedAll}

onClick={

hasSelectedAll

? undefined

: () => hasSelectedSome ? deselectAll() : selectAll()

}

>

{hasSelectedSome ? t('Deselect all') : t('Select all')}

</Button>

) : null

}

I think it's possible to directly render the button without all the "mode" conversion. This should make things easier to understand.

kasiazjc · 2022-05-09T13:52:05Z

Hi @cccs-RyanK! Wanted to let you know that we are currently working on adding "select all" feature to all of the multiple choice select fields (besides dnd) which should be available soon (probably 2-3 weeks). Drag&drop select all is something that I hope we will tackle in the upcoming weeks so there will be a better solution provided from our side.

Thank you for helping an developing this solution 🙏

cccs-rc · 2022-05-09T15:40:33Z

Hi @cccs-RyanK! Wanted to let you know that we are currently working on adding "select all" feature to all of the multiple choice select fields (besides dnd) which should be available soon (probably 2-3 weeks). Drag&drop select all is something that I hope we will tackle in the upcoming weeks so there will be a better solution provided from our side.

Thank you for helping an developing this solution 🙏

Hi @kasiazjc! Thanks for the info! Is there anywhere we can track what features are being actively worked on from your end? We'd like to avoid duplicating effort if we can!

kasiazjc · 2022-05-10T10:36:08Z

Hi @cccs-RyanK! Wanted to let you know that we are currently working on adding "select all" feature to all of the multiple choice select fields (besides dnd) which should be available soon (probably 2-3 weeks). Drag&drop select all is something that I hope we will tackle in the upcoming weeks so there will be a better solution provided from our side.
Thank you for helping an developing this solution 🙏

Hi @kasiazjc! Thanks for the info! Is there anywhere we can track what features are being actively worked on from your end? We'd like to avoid duplicating effort if we can!

Unfortunately there is no way to track it right now 😢 we're trying to find a way to sort it out, but it may not happen anytime soon. I will try my best to keep you updated for now about this one 🤞

SharonCastel · 2022-08-18T15:18:15Z

I think that it can be expressed as * as well on the saved expressions
I have tables of 150-250 columns and its a nightmare for me,
please keep on the hard work and add it to the next version.

David-Parro-P · 2025-01-15T17:20:40Z

Was this ever added back?

cccs-RyanK added 3 commits May 5, 2022 15:58

added selectall button to regular and dnd selector

cd8c3c0

removed unecessary stories file, added accidentally removed package

2bb1a29

removed accidental changes

e081337

pull-request-size bot added the size/L label May 6, 2022

Merge branch 'master' into feature/CLDN-1278

5d6bbec

cccs-RyanK changed the title ~~[WIP] feat(chart-explore): add select all functionality to table viz type~~ feat(chart-explore): add select all functionality to table viz type May 6, 2022

cccs-RyanK marked this pull request as ready for review May 6, 2022 18:09

cccs-RyanK requested review from michael-s-molina, geido and ktmud as code owners May 6, 2022 18:09

ktmud reviewed May 6, 2022

View reviewed changes

cccs-RyanK closed this May 10, 2022

michael-s-molina mentioned this pull request May 20, 2022

feat: Adds the "Select all" option to the Select component #20143

Closed

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(chart-explore): add select all functionality to table viz type #19979

feat(chart-explore): add select all functionality to table viz type #19979

cccs-RyanK commented May 6, 2022 •

edited

Loading

ktmud left a comment

ktmud May 6, 2022

ktmud May 6, 2022

ktmud May 6, 2022

ktmud May 6, 2022

ktmud May 6, 2022

ktmud May 6, 2022

kasiazjc commented May 9, 2022

cccs-rc commented May 9, 2022

kasiazjc commented May 10, 2022

SharonCastel commented Aug 18, 2022

David-Parro-P commented Jan 15, 2025

	{deselectEnabled && !selectMode()? t('Deselect All'): t('Select All')}
	{deselectEnabled && !selectMode()? t('Deselect all'): t('Select all')}

-        selectAllButton={showSelectAllButton ? <SelectAllButton {...selectAllButtonProps} /> : null}
+        selectAllButton={
+          showSelectAllButton ? (
+            <Button
+              buttonStyle="link"
+              disabled={hasSelectedAll}
+              onClick={
+                hasSelectedAll
+                 ? undefined
+                 : () => hasSelectedSome ? deselectAll() : selectAll()
+               }
+            >
+              {hasSelectedSome ? t('Deselect all') : t('Select all')}
+            </Button>
+          ) : null
+        }

feat(chart-explore): add select all functionality to table viz type #19979

feat(chart-explore): add select all functionality to table viz type #19979

Conversation

cccs-RyanK commented May 6, 2022 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Drag and Drop Feature Enabled:

Drag and Drop Feature Disabled:

TESTING INSTRUCTIONS

Drag and Drop Feature enabled

Drag and Drop Feature disabled

ADDITIONAL INFORMATION

ktmud left a comment

Choose a reason for hiding this comment

ktmud May 6, 2022

Choose a reason for hiding this comment

ktmud May 6, 2022

Choose a reason for hiding this comment

ktmud May 6, 2022

Choose a reason for hiding this comment

ktmud May 6, 2022

Choose a reason for hiding this comment

ktmud May 6, 2022

Choose a reason for hiding this comment

ktmud May 6, 2022

Choose a reason for hiding this comment

kasiazjc commented May 9, 2022

cccs-rc commented May 9, 2022

kasiazjc commented May 10, 2022

SharonCastel commented Aug 18, 2022

David-Parro-P commented Jan 15, 2025

cccs-RyanK commented May 6, 2022 •

edited

Loading