Superset series 2/6 — Control Panel

5 min readMay 17, 2023

Teclead Ventures
We enable our enterprise clients to reach the mass market and digitalize internal and external businees processes. https://teclead-ventures.de/en

We are hiring!

Introduction

The control panel is an essential component of every plugin in superset. This guide explains first how the control panel is set up and how props are passed from the control panel to the plugin.

Version

In this Guide we are using Superset version 2.1.0

Result Repository

This Superset documentation series will guide you through each step of customizing Superset. If you’d like to use the results directly, you can clone our Git repository, which includes all changes made during the course of this guide:

(OPTIONAL)
git clone https://github.com/Teclead-Ventures/superset

What is the Control Panel ?

First open a plugin: Click the + in the top right corner → Chart → Select a Dataset (video_game_sales) → Select a Plugin (heatmap)

In the opened plugin we can see this column with settings in the middle:

This is the control panel component. It passes the settings to the main component which creates the query for the data visualization.

Control Panel structure

In every plugin folder we can find a controlPanel.tsx/js file. In the heatmap plugin for example it is:

/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/controlPanel.tsx

The file mainly consists of an object which includes an Array of every setting used in the plugin. Superset passes these settings as props to the plugin which are used for data query or other visualization Options in the plugin. This could be a boolean which toggles elements inside the visualization.

Lets look at the config Object to see how elements of the control panel are stored :

const config: ControlPanelConfig = {
    controlPanelSections: [
        sections.legacyRegularTime,
        {
            label: t("Query"),
            expanded: true,
            controlSetRows: [
						// 
						//Fields are setup here 						
						//
						]
				}

There are two kinds of fields: Default Fields and Custom Fields

Default Fields

It is possible to use fields that are already preset by superset, for example:

{
	controlSetRows: [
			["adhoc_filters"],
			//  or 
			["series"]
	]	
}

It is advisable to look at existing plugins in superset and compare how the associated control panels were edited. A list of all existing default fields can be found in:

/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx

We can see how the default plugins are setup by following the corresponding declaration. For example lets look at limit :

Here we can see for example which label and description is set.

So only by using the preset options from shared controls you are able to build your own control panel. Just choose which categories you need and set them like this :

const config: ControlPanelConfig = {
  controlPanelSections: [
    sections.legacyRegularTime,
    {
      label: t('Query'),
      expanded: true,
      controlSetRows: [
        ['entity'],  
        ['adhoc_filters'],
        ['row_limit'], 
				//... 
				//Add more fields here
				//...       
      ],
    },

Let’s now look at the world map plugin which implemented both default and custom fields.

We can find the controlPanel.ts in the following directory:

superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts

In this example we can see that the world-map plugin implements customised fields in addition to default fields:

const config: ControlPanelConfig = {
  controlPanelSections: [
    sections.legacyRegularTime,
    {
      label: t('Query'),
      expanded: true,
      controlSetRows: [
        ['entity'],  //Default
        [
          {
            name: 'country_fieldtype',  //Custom
            config: {
              type: 'SelectControl',
              label: t('Country Field Type'),
              default: 'cca2',
              choices: [
                ['name', t('Full name')],
                ['cioc', t('code International Olympic Committee (cioc)')],
                ['cca2', t('code ISO 3166-1 alpha-2 (cca2)')],
                ['cca3', t('code ISO 3166-1 alpha-3 (cca3)')],
              ],
              description: t(
                'The country code standard that Superset should expect ' +
                  'to find in the [country] column',
              ),
            },
          },
        ],
        ['metric'], //Default 
        ['adhoc_filters'], //Default
        ['row_limit'], //Default
        [
          {
            name: 'sort_by_metric', //Custom
            config: {
              type: 'CheckboxControl',
              label: t('Sort by metric'),
              description: t(
                'Whether to sort results by the selected metric in descending order.',
              ),
            },
          },
        ],
      ],
    },

This leads us to the following section:

Custom Fields

If the default fields do not meet your requirements or need to be edited, they can also be created directly in the control panel.

Here’s an example:

You want to add another checkbox to the control panel and change the description to make the function clear for the user. The default checkbox does not allow this:

{
        controlSetRows: [
			["CheckboxControl"],   //Default Field
	]	
}

Solution:

Find the corresponding constant in the Superset Git (see steps in Default Fields)
Insert the found const order_desc directly into the controlPanel:

{
	controlSetRows: [
			[       type: 'CheckboxControl',   // Custom Field
			       label: t('Sort Descending'),
			     default: true,
		         description: t('My new Description'), //Changes possible
                          visibility: ({ controls }) =>
                           Boolean(
				controls?.timeseries_limit_metric.value &&
		        !isEmpty(controls?.timeseries_limit_metric.value),
        ),],
    ]	
}

Caution! It is very important to pay close attention here and ensure that the settings are listed exactly as in the index.tsx, as otherwise, errors can occur while rendering the control panel.
In case of problems, it is advisable to take a look at the index.tsx from the Docker. → See modifying the plugin

Perfect! This all you have to know about the controlpanel. In the following guide of our superset series we will clone superset plugins. The guide after that uses the controlpanel to modify plugins to extend existing features.

Superset Setup Part 1 : https://medium.com/@teclead-ventures/superset-series-1-6-setting-up-superset-a750481c228e

Cloning Superset Plugins Part 3: https://medium.com/@teclead-ventures/superset-series-3-6-cloning-plugins-3336a8a979a0

Modifying Superset Plugins Part 4 : https://medium.com/@teclead-ventures/superset-series-4-6-modifying-plugins-abad61517230

Adding Superset Plugins Part 5 : https://medium.com/@teclead-ventures/superset-series-5-6-adding-plugins-4677c6a1ff5b

Visualizing Maps using Openlayers in Superset Part 6 : https://teclead-ventures.medium.com/superset-series-6-6-openlayers-map-visualization-e72e2976cfa0

Author : Daniel Jin Wodke

Editors: Ruben Karlsson, Matthias Daiber, Cherif Khlass, Lukas Zöllner, John Einicke