diff --git a/superset-frontend/src/explore/components/Control.tsx b/superset-frontend/src/explore/components/Control.tsx
index f1b6925..d3ae6bb 100644
--- a/superset-frontend/src/explore/components/Control.tsx
+++ b/superset-frontend/src/explore/components/Control.tsx
@@ -19,7 +19,7 @@
 import React, { ReactNode } from 'react';
 import { ControlType } from '@superset-ui/chart-controls';
 import { JsonValue, QueryFormData } from '@superset-ui/core';
-import { ExploreActions } from '../actions/exploreActions';
+import { ExploreActions } from 'src/explore/actions/exploreActions';
 import controlMap from './controls';
 
 import './Control.less';
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index a53395a..8fafaa4 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -40,12 +40,13 @@
 import { PluginContext } from 'src/components/DynamicPlugins';
 import Loading from 'src/components/Loading';
 
-import { sectionsToRender } from 'src/explore/controlUtils';
+import { getSectionsToRender } from 'src/explore/controlUtils';
 import {
   ExploreActions,
   exploreActions,
 } from 'src/explore/actions/exploreActions';
 import { ExplorePageState } from 'src/explore/reducers/getInitialState';
+import { ChartState } from 'src/explore/types';
 
 import ControlRow from './ControlRow';
 import Control from './Control';
@@ -53,7 +54,8 @@
 export type ControlPanelsContainerProps = {
   actions: ExploreActions;
   datasource_type: DatasourceType;
-  exploreState: Record<string, any>;
+  exploreState: ExplorePageState['explore'];
+  chart: ChartState;
   controls: Record<string, ControlState>;
   form_data: QueryFormData;
   isDatasourceMetaLoading: boolean;
@@ -100,7 +102,7 @@
   }
 `;
 
-class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps> {
+export class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps> {
   // trigger updates to the component when async plugins load
   static contextType = PluginContext;
 
@@ -111,7 +113,7 @@
   }
 
   sectionsToRender(): ExpandedControlPanelSectionConfig[] {
-    return sectionsToRender(
+    return getSectionsToRender(
       this.props.form_data.viz_type,
       this.props.datasource_type,
     );
@@ -314,8 +316,6 @@
   }
 }
 
-export { ControlPanelsContainer };
-
 export default connect(
   function mapStateToProps(state: ExplorePageState) {
     const { explore, charts } = state;
diff --git a/superset-frontend/src/explore/controlPanels/sections.jsx b/superset-frontend/src/explore/controlPanels/sections.tsx
similarity index 94%
rename from superset-frontend/src/explore/controlPanels/sections.jsx
rename to superset-frontend/src/explore/controlPanels/sections.tsx
index d69a69e..c86acbb 100644
--- a/superset-frontend/src/explore/controlPanels/sections.jsx
+++ b/superset-frontend/src/explore/controlPanels/sections.tsx
@@ -18,16 +18,17 @@
  */
 import React from 'react';
 import { t } from '@superset-ui/core';
+import { ControlPanelSectionConfig } from '@superset-ui/chart-controls';
 import { formatSelectOptions } from 'src/modules/utils';
 
-export const druidTimeSeries = {
+export const druidTimeSeries: ControlPanelSectionConfig = {
   label: t('Time'),
   expanded: true,
   description: t('Time related form attributes'),
   controlSetRows: [['time_range']],
 };
 
-export const datasourceAndVizType = {
+export const datasourceAndVizType: ControlPanelSectionConfig = {
   label: t('Chart type'),
   expanded: true,
   controlSetRows: [
@@ -74,19 +75,19 @@
   ],
 };
 
-export const colorScheme = {
+export const colorScheme: ControlPanelSectionConfig = {
   label: t('Color scheme'),
   controlSetRows: [['color_scheme', 'label_colors']],
 };
 
-export const sqlaTimeSeries = {
+export const sqlaTimeSeries: ControlPanelSectionConfig = {
   label: t('Time'),
   description: t('Time related form attributes'),
   expanded: true,
   controlSetRows: [['granularity_sqla'], ['time_range']],
 };
 
-export const annotations = {
+export const annotations: ControlPanelSectionConfig = {
   label: t('Annotations and layers'),
   tabOverride: 'data',
   expanded: true,
@@ -107,7 +108,7 @@
   ],
 };
 
-export const NVD3TimeSeries = [
+export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
   {
     label: t('Query'),
     expanded: true,
diff --git a/superset-frontend/src/explore/controlUtils/getControlConfig.ts b/superset-frontend/src/explore/controlUtils/getControlConfig.ts
new file mode 100644
index 0000000..6be87e4
--- /dev/null
+++ b/superset-frontend/src/explore/controlUtils/getControlConfig.ts
@@ -0,0 +1,68 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import memoizeOne from 'memoize-one';
+import { getChartControlPanelRegistry } from '@superset-ui/core';
+import {
+  ControlPanelSectionConfig,
+  expandControlConfig,
+} from '@superset-ui/chart-controls';
+
+const getMemoizedControlConfig = memoizeOne(
+  (controlKey, controlPanelConfig) => {
+    const {
+      controlOverrides = {},
+      controlPanelSections = [],
+    } = controlPanelConfig;
+    const control = expandControlConfig(
+      findControlItem(controlPanelSections, controlKey),
+      controlOverrides,
+    );
+    return control && 'config' in control ? control.config : control;
+  },
+);
+
+/**
+ * Find control item from control panel config.
+ */
+export function findControlItem(
+  controlPanelSections: ControlPanelSectionConfig[],
+  controlKey: string,
+) {
+  return (
+    controlPanelSections
+      .map(section => section.controlSetRows)
+      .flat(2)
+      .find(
+        control =>
+          controlKey === control ||
+          (control !== null &&
+            typeof control === 'object' &&
+            'name' in control &&
+            control.name === controlKey),
+      ) ?? null
+  );
+}
+
+export const getControlConfig = function getControlConfig(
+  controlKey: string,
+  vizType: string,
+) {
+  const controlPanelConfig = getChartControlPanelRegistry().get(vizType) || {};
+  return getMemoizedControlConfig(controlKey, controlPanelConfig);
+};
diff --git a/superset-frontend/src/explore/controlUtils/getSectionsToRender.ts b/superset-frontend/src/explore/controlUtils/getSectionsToRender.ts
new file mode 100644
index 0000000..244114f
--- /dev/null
+++ b/superset-frontend/src/explore/controlUtils/getSectionsToRender.ts
@@ -0,0 +1,95 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import memoizeOne from 'memoize-one';
+import {
+  DatasourceType,
+  getChartControlPanelRegistry,
+} from '@superset-ui/core';
+import {
+  ControlPanelConfig,
+  expandControlConfig,
+} from '@superset-ui/chart-controls';
+
+import * as SECTIONS from 'src/explore/controlPanels/sections';
+
+const getMemoizedSectionsToRender = memoizeOne(
+  (datasourceType: DatasourceType, controlPanelConfig: ControlPanelConfig) => {
+    const {
+      sectionOverrides = {},
+      controlOverrides,
+      controlPanelSections = [],
+    } = controlPanelConfig;
+
+    // default control panel sections
+    const sections = { ...SECTIONS };
+
+    // apply section overrides
+    Object.entries(sectionOverrides).forEach(([section, overrides]) => {
+      if (typeof overrides === 'object' && overrides.constructor === Object) {
+        sections[section] = {
+          ...sections[section],
+          ...overrides,
+        };
+      } else {
+        sections[section] = overrides;
+      }
+    });
+
+    const { datasourceAndVizType } = sections;
+
+    // list of datasource-specific controls that should be removed
+    const invalidControls =
+      datasourceType === 'table'
+        ? ['granularity', 'druid_time_origin']
+        : ['granularity_sqla', 'time_grain_sqla'];
+
+    return [datasourceAndVizType]
+      .concat(controlPanelSections)
+      .filter(section => !!section)
+      .map(section => {
+        const { controlSetRows } = section;
+        return {
+          ...section,
+          controlSetRows:
+            controlSetRows?.map(row =>
+              row
+                .filter(
+                  control =>
+                    typeof control !== 'string' ||
+                    !invalidControls.includes(control),
+                )
+                .map(item => expandControlConfig(item, controlOverrides)),
+            ) || [],
+        };
+      });
+  },
+);
+
+/**
+ * Get the clean and processed control panel sections
+ */
+export function getSectionsToRender(
+  vizType: string,
+  datasourceType: DatasourceType,
+) {
+  const controlPanelConfig =
+    // TODO: update `chartControlPanelRegistry` type to use ControlPanelConfig
+    (getChartControlPanelRegistry().get(vizType) as ControlPanelConfig) || {};
+  return getMemoizedSectionsToRender(datasourceType, controlPanelConfig);
+}
diff --git a/superset-frontend/src/explore/controlUtils/index.js b/superset-frontend/src/explore/controlUtils/index.js
index 4e1f0ac..b426754 100644
--- a/superset-frontend/src/explore/controlUtils/index.js
+++ b/superset-frontend/src/explore/controlUtils/index.js
@@ -16,12 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import memoizeOne from 'memoize-one';
-import { getChartControlPanelRegistry } from '@superset-ui/core';
-import { expandControlConfig } from '@superset-ui/chart-controls';
-import * as SECTIONS from '../controlPanels/sections';
+import { getSectionsToRender } from './getSectionsToRender';
+import { getControlConfig } from './getControlConfig';
 
 export * from './getFormDataFromControls';
+export * from './getControlConfig';
+export * from './getSectionsToRender';
 
 export function validateControl(control, processedState) {
   const { validators } = control;
@@ -38,44 +38,6 @@
   return { ...control, validationErrors };
 }
 
-/**
- * Find control item from control panel config.
- */
-export function findControlItem(controlPanelSections, controlKey) {
-  return (
-    controlPanelSections
-      .map(section => section.controlSetRows)
-      .flat(2)
-      .find(
-        control =>
-          controlKey === control ||
-          (control !== null &&
-            typeof control === 'object' &&
-            control.name === controlKey),
-      ) ?? null
-  );
-}
-
-const getMemoizedControlConfig = memoizeOne(
-  (controlKey, controlPanelConfig) => {
-    const {
-      controlOverrides = {},
-      controlPanelSections = [],
-    } = controlPanelConfig;
-
-    const control = expandControlConfig(
-      findControlItem(controlPanelSections, controlKey),
-      controlOverrides,
-    );
-    return control?.config || control;
-  },
-);
-
-export const getControlConfig = function getControlConfig(controlKey, vizType) {
-  const controlPanelConfig = getChartControlPanelRegistry().get(vizType) || {};
-  return getMemoizedControlConfig(controlKey, controlPanelConfig);
-};
-
 function handleMissingChoice(control) {
   // If the value is not valid anymore based on choices, clear it
   const { value } = control;
@@ -160,68 +122,9 @@
   );
 }
 
-const getMemoizedSectionsToRender = memoizeOne(
-  (datasourceType, controlPanelConfig) => {
-    const {
-      sectionOverrides = {},
-      controlOverrides,
-      controlPanelSections = [],
-    } = controlPanelConfig;
-
-    // default control panel sections
-    const sections = { ...SECTIONS };
-
-    // apply section overrides
-    Object.entries(sectionOverrides).forEach(([section, overrides]) => {
-      if (typeof overrides === 'object' && overrides.constructor === Object) {
-        sections[section] = {
-          ...sections[section],
-          ...overrides,
-        };
-      } else {
-        sections[section] = overrides;
-      }
-    });
-
-    const { datasourceAndVizType } = sections;
-    // list of datasource-specific controls that should be removed
-    const invalidControls =
-      datasourceType === 'table'
-        ? ['granularity', 'druid_time_origin']
-        : ['granularity_sqla', 'time_grain_sqla'];
-
-    return []
-      .concat(datasourceAndVizType, controlPanelSections)
-      .filter(section => !!section)
-      .map(section => {
-        const { controlSetRows } = section;
-        return {
-          ...section,
-          controlSetRows:
-            controlSetRows?.map(row =>
-              row
-                .filter(control => !invalidControls.includes(control))
-                .map(item => expandControlConfig(item, controlOverrides)),
-            ) || [],
-        };
-      });
-  },
-);
-
-/**
- * Get the clean and processed control panel sections
- */
-export const sectionsToRender = function sectionsToRender(
-  vizType,
-  datasourceType,
-) {
-  const controlPanelConfig = getChartControlPanelRegistry().get(vizType) || {};
-  return getMemoizedSectionsToRender(datasourceType, controlPanelConfig);
-};
-
 export function getAllControlsState(vizType, datasourceType, state, formData) {
   const controlsState = {};
-  sectionsToRender(vizType, datasourceType).forEach(section =>
+  getSectionsToRender(vizType, datasourceType).forEach(section =>
     section.controlSetRows.forEach(fieldsetRow =>
       fieldsetRow.forEach(field => {
         if (field && field.config && field.name) {