Migrate unique Heatmap controls (#9360)

* Migrate Heatmap controls

* Lint

CONTRIBUTING.md

@@ -1070,7 +1070,6 @@ The filter-box configuration references column names (via the `column` key) and
 | `y_axis_showminmax` | _boolean_       | The **Y bounds** widget      |
 | `y_axis_zero`       | _N/A_           | _Deprecated?_                |
 | `y_log_scale`       | _boolean_       | The **Y Log Scale** widget   |
-| `yscale_interval`   | _N/A_           | _Deprecated?_                |
 
 Note the `y_axis_format` is defined under various section for some charts.
 
@@ -1093,7 +1092,6 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `autozoom`                      | _N/A_ |       |
 | `bar_stacked`                   | _N/A_ |       |
 | `cache_timeout`                 | _N/A_ |       |
-| `canvas_image_rendering`        | _N/A_ |       |
 | `charge`                        | _N/A_ |       |
 | `clustering_radius`             | _N/A_ |       |
 | `code`                          | _N/A_ |       |
@@ -1204,15 +1202,12 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `show_druid_time_granularity`   | _N/A_ |       |
 | `show_druid_time_origin`        | _N/A_ |       |
 | `show_labels`                   | _N/A_ |       |
-| `show_perc`                     | _N/A_ |       |
 | `show_sqla_time_column`         | _N/A_ |       |
 | `show_sqla_time_granularity`    | _N/A_ |       |
 | `show_values`                   | _N/A_ |       |
 | `size_from`                     | _N/A_ |       |
 | `size_to`                       | _N/A_ |       |
 | `slice_name`                    | _N/A_ |       |
-| `sort_x_axis`                   | _N/A_ |       |
-| `sort_y_axis`                   | _N/A_ |       |
 | `spatial`                       | _N/A_ |       |
 | `stacked_style`                 | _N/A_ |       |
 | `start_spatial`                 | _N/A_ |       |

superset-frontend/src/explore/controlPanels/Heatmap.js

@@ -18,6 +18,14 @@
  */
 import { t } from '@superset-ui/translation';
 import { nonEmpty } from '../validators';
+import { formatSelectOptionsForRange } from '../../modules/utils';
+
+const sortAxisChoices = [
+  ['alpha_asc', t('Axis ascending')],
+  ['alpha_desc', t('Axis descending')],
+  ['value_asc', t('Metric ascending')],
+  ['value_desc', t('Metric descending')],
+];
 
 export default {
   controlPanelSections: [
@@ -36,13 +44,96 @@ export default {
       expanded: true,
       controlSetRows: [
         ['linear_color_scheme'],
-        ['xscale_interval', 'yscale_interval'],
-        ['canvas_image_rendering', 'normalize_across'],
+        [
+          {
+            name: 'xscale_interval',
+            config: {
+              type: 'SelectControl',
+              label: t('XScale Interval'),
+              renderTrigger: true,
+              choices: formatSelectOptionsForRange(1, 50),
+              default: '1',
+              clearable: false,
+              description: t(
+                'Number of steps to take between ticks when displaying the X scale',
+              ),
+            },
+          },
+          {
+            name: 'yscale_interval',
+            config: {
+              type: 'SelectControl',
+              label: t('YScale Interval'),
+              choices: formatSelectOptionsForRange(1, 50),
+              default: '1',
+              clearable: false,
+              renderTrigger: true,
+              description: t(
+                'Number of steps to take between ticks when displaying the Y scale',
+              ),
+            },
+          },
+        ],
+        [
+          {
+            name: 'canvas_image_rendering',
+            config: {
+              type: 'SelectControl',
+              label: t('Rendering'),
+              renderTrigger: true,
+              choices: [
+                ['pixelated', 'pixelated (Sharp)'],
+                ['auto', 'auto (Smooth)'],
+              ],
+              default: 'pixelated',
+              description: t(
+                'image-rendering CSS attribute of the canvas object that ' +
+                  'defines how the browser scales up the image',
+              ),
+            },
+          },
+          'normalize_across',
+        ],
         ['left_margin', 'bottom_margin'],
         ['y_axis_bounds', 'y_axis_format'],
-        ['show_legend', 'show_perc'],
+        [
+          'show_legend',
+          {
+            name: 'show_perc',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show percentage'),
+              renderTrigger: true,
+              description: t(
+                'Whether to include the percentage in the tooltip',
+              ),
+              default: true,
+            },
+          },
+        ],
         ['show_values', 'normalized'],
-        ['sort_x_axis', 'sort_y_axis'],
+        [
+          {
+            name: 'sort_x_axis',
+            config: {
+              type: 'SelectControl',
+              label: t('Sort X Axis'),
+              choices: sortAxisChoices,
+              clearable: false,
+              default: 'alpha_asc',
+            },
+          },
+          {
+            name: 'sort_y_axis',
+            config: {
+              type: 'SelectControl',
+              label: t('Sort Y Axis'),
+              choices: sortAxisChoices,
+              clearable: false,
+              default: 'alpha_asc',
+            },
+          },
+        ],
       ],
     },
   ],

superset-frontend/src/explore/controls.jsx

@@ -119,12 +119,6 @@ const timeColumnOption = {
       'account',
   ),
 };
-const sortAxisChoices = [
-  ['alpha_asc', 'Axis ascending'],
-  ['alpha_desc', 'Axis descending'],
-  ['value_asc', 'sum(value) ascending'],
-  ['value_desc', 'sum(value) descending'],
-];
 
 const groupByControl = {
   type: 'SelectControl',
@@ -377,22 +371,6 @@ export const controls = {
     description: '',
   },
 
-  sort_x_axis: {
-    type: 'SelectControl',
-    label: t('Sort X Axis'),
-    choices: sortAxisChoices,
-    clearable: false,
-    default: 'alpha_asc',
-  },
-
-  sort_y_axis: {
-    type: 'SelectControl',
-    label: t('Sort Y Axis'),
-    choices: sortAxisChoices,
-    clearable: false,
-    default: 'alpha_asc',
-  },
-
   linear_color_scheme: {
     type: 'ColorSchemeControl',
     label: t('Linear Color Scheme'),
@@ -437,45 +415,6 @@ export const controls = {
     ),
   },
 
-  canvas_image_rendering: {
-    type: 'SelectControl',
-    label: t('Rendering'),
-    renderTrigger: true,
-    choices: [
-      ['pixelated', 'pixelated (Sharp)'],
-      ['auto', 'auto (Smooth)'],
-    ],
-    default: 'pixelated',
-    description: t(
-      'image-rendering CSS attribute of the canvas object that ' +
-        'defines how the browser scales up the image',
-    ),
-  },
-
-  xscale_interval: {
-    type: 'SelectControl',
-    label: t('XScale Interval'),
-    renderTrigger: true,
-    choices: formatSelectOptionsForRange(1, 50),
-    default: '1',
-    clearable: false,
-    description: t(
-      'Number of steps to take between ticks when displaying the X scale',
-    ),
-  },
-
-  yscale_interval: {
-    type: 'SelectControl',
-    label: t('YScale Interval'),
-    choices: formatSelectOptionsForRange(1, 50),
-    default: '1',
-    clearable: false,
-    renderTrigger: true,
-    description: t(
-      'Number of steps to take between ticks when displaying the Y scale',
-    ),
-  },
-
   include_time: {
     type: 'CheckboxControl',
     label: t('Include Time'),
@@ -495,14 +434,6 @@ export const controls = {
     ),
   },
 
-  show_perc: {
-    type: 'CheckboxControl',
-    label: t('Show percentage'),
-    renderTrigger: true,
-    description: t('Whether to include the percentage in the tooltip'),
-    default: true,
-  },
-
   bar_stacked: {
     type: 'CheckboxControl',
     label: t('Stacked Bars'),