feat(plugin-chart-table): enable emitting cross-filters (#1041)

* feat(plugin-chart-table): enable emitting cross-filters * Hide filters checkbox when cross filters flag is disabled
apache · Nov 26, 2021 · fcd11cd · fcd11cd
1 parent 9070ac9
commit fcd11cd
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 22 deletions.
diff --git a/...rset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/Styles.tsx b/...rset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/Styles.tsx
@@ -48,11 +48,11 @@ export default styled.div`
     cursor: pointer;
   }
   td.dt-is-filter:hover {
-    background-color: linen;
+    background-color: ${({ theme: { colors } }) => colors.secondary.light4};
   }
   td.dt-is-active-filter,
   td.dt-is-active-filter:hover {
-    background-color: lightcyan;
+    background-color: ${({ theme: { colors } }) => colors.secondary.light3};
   }
 
   .dt-global-filter {

diff --git a/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/TableChart.tsx b/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/TableChart.tsx
@@ -161,13 +161,51 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     showCellBars = true,
     emitFilter = false,
     sortDesc = false,
-    onChangeFilter,
-    filters: initialFilters,
+    filters: initialFilters = {},
     sticky = true, // whether to use sticky header
   } = props;
 
   const [filters, setFilters] = useState(initialFilters);
 
+  const handleChange = useCallback(
+    (filters: { [x: string]: DataRecordValue[] }) => {
+      if (!emitFilter) {
+        return;
+      }
+
+      const groupBy = Object.keys(filters);
+      const groupByValues = Object.values(filters);
+      setDataMask({
+        crossFilters: {
+          extraFormData: {
+            append_form_data: {
+              filters:
+                groupBy.length === 0
+                  ? []
+                  : groupBy.map(col => {
+                      const val = filters?.[col];
+                      if (val === null || val === undefined)
+                        return {
+                          col,
+                          op: 'IS NULL',
+                        };
+                      return {
+                        col,
+                        op: 'IN',
+                        val: val as (string | number | boolean)[],
+                      };
+                    }),
+            },
+          },
+          currentState: {
+            value: groupByValues.length ? groupByValues : null,
+          },
+        },
+      });
+    },
+    [emitFilter, setDataMask],
+  );
+
   // only take relevant page size options
   const pageSizeOptions = useMemo(() => {
     const getServerPagination = (n: number) => n <= rowCount;
@@ -204,12 +242,13 @@ export default function TableChart<D extends DataRecord = DataRecord>(
       } else {
         updatedFilters[key] = [...(filters?.[key] || []), val];
       }
-      setFilters(updatedFilters);
-      if (onChangeFilter) {
-        onChangeFilter(updatedFilters);
+      if (Array.isArray(updatedFilters[key]) && updatedFilters[key].length === 0) {
+        delete updatedFilters[key];
       }
+      setFilters(updatedFilters);
+      handleChange(updatedFilters);
     },
-    [filters, isActiveFilterValue, onChangeFilter],
+    [filters, handleChange, isActiveFilterValue],
   );
 
   const getColumnConfigs = useCallback(

diff --git a/...rontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/controlPanel.tsx b/...rontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/controlPanel.tsx
@@ -340,18 +340,22 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [
-          {
-            name: 'table_filter',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Allow cross filter'),
-              renderTrigger: true,
-              default: false,
-              description: t('Whether to apply filter to dashboards when table cells are clicked'),
-            },
-          },
-        ],
+        isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)
+          ? [
+              {
+                name: 'table_filter',
+                config: {
+                  type: 'CheckboxControl',
+                  label: t('Enable emitting filters'),
+                  renderTrigger: true,
+                  default: false,
+                  description: t(
+                    'Whether to apply filter to dashboards when table cells are clicked',
+                  ),
+                },
+              },
+            ]
+          : [],
         [
           {
             name: 'column_config',

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/index.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
@@ -28,6 +28,7 @@ export { default as __hack__ } from './types';
 export * from './types';
 
 const metadata = new ChartMetadata({
+  behaviors: [Behavior.CROSS_FILTER],
   canBeAnnotationTypes: ['EVENT', 'INTERVAL'],
   description: '',
   name: t('Table'),

diff --git a/...ontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/transformProps.ts b/...ontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/transformProps.ts
@@ -241,7 +241,7 @@ const transformProps = (chartProps: TableChartProps): TableChartTransformedProps
       ? serverPageLength
       : getPageSize(pageLength, data.length, columns.length),
     filters,
-    emitFilter: tableFilter === true,
+    emitFilter: tableFilter,
     onChangeFilter,
   };
 };