Superset series 3/6 — Cloning Plugins

6 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

As the Superset community continues to grow and evolve, so does the need for additional functionality and customization. Plugins are the perfect solution to extend Superset’s capabilities, catering to the unique requirements of different users and organizations. This comprehensive guide aims to provide a detailed walkthrough on copying plugins in Apache Superset, allowing users to effectively utilize, customize, and share these valuable extensions with their team and the broader Superset community.

Version

In this Guide we are using Superset version 2.1.0

If you want to use the same version check out into the corresponding branch

git checkout 2.1.0

Preparation

Make sure to stop any other superset non-related PostgreSQL instances
Node 16.9.1
Python 3.6 or newer

If you have not set up superset you can check out the first part of this guide which gives you an introduction how to start.

Run from root directory:

cd superset-frontend
npm i
npm run build
cd ..
superset load_examples
superset db upgrade
superset init
superset run -p 8088 --with-threads --reload --debugger

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

Default Plugin Preview

💡It can take a bit for the datasets to fetch , if you can not see them try closing the page and reopen it

To preview our heatmap Plugin we can create a new chart by clicking the plus button in the top right corner and selecting ‘Chart’.

Then a dataset has to be chosen, in our example we choose the video_game_sales, as well as the heatmap Chart type:

Confirm your selection by clicking on the “CREATE NEW CHART” in the bottom right.

Now we can set our query in the control panel on the left hand side to create a default heatmap chart.

(Here we set X-Axis : Year, Y-Axis: Genre , Metric : Count)

The next step shows how this plugin can be copied.

Clone the plugin

The first step to start changing / adding features to the plugin is to create a copy of the plugin folder. So in our case we have to create a copy of superset-frontend/plugins/legacy-plugin-chart-heatmap.

You can use the following command :

cp -R superset-frontend/plugins/legacy-plugin-chart-heatmap superset-frontend/plugins/legacy-plugin-chart-heatmapcopy

⚠️ If your plugins parents folder is not /superset-frontend/plugins but instead is located in the parent plugin directory /plugin-chart-echarts then it is recommended to copy the entire /plugin-chart-echarts directory.

Rename the copy so you can identify it:

/legacy-plugin-chart-heatmapcopy

Now in your plugin folder you should see both versions of the plugin

plugins/legacy-plugin-chart-heatmap
plugins/legacy-plugin-chart-heatmapcopy

2. It is important to adjust the names of the heatmapcopy. In the directory of our cloned plugin there is a package.json, change the “name” value to :

{
  "name": "@superset-ui/legacy-plugin-chart-heatmapcopy", 
  //Replace "heatmapcopy" with your plugin name 
}

3. To later identify which plugin is which we also change the description in legacy-plugin-chart-heatmapcopy/src/index.js

name: t('Heatmap Copy'), //Rename the description

Also change the name of the export class to HeatmapChatPluginCopy :

export default class HeatmapChartPluginCopy extends ChartPlugin {
  constructor() {
    super({
      loadChart: () => import('./ReactHeatmap'),
      metadata,
      transformProps,
      controlPanel,
    });
  }
}

4. Okay The plugin now has unique names. Now we need to add our plugin to the package.json located in superset-frontend/package.json

{
...
"dependencies": 
"@superset-ui/legacy-plugin-chart-heatmapcopy": "file:./plugins/legacy-plugin-chart-heatmapcopy",
...
}

5. Now add your plugin to the MainPreset.js file which is located in /superset-frontend/src/visualizations/presets/MainPreset.js

Add the import :

import HeatmapChartPluginCopy from '@superset-ui/legacy-plugin-chart-heatmapcopy';

and to the MainPreset class in the plugins array:

new HeatmapChartPluginCopy().configure({ key: 'heatmapcopy' }),

6. Navigate to superset-frontend , stop superset if it is still running and run the following commands

cd superset-frontend
npm i
npm run build
cd ..
superset db upgrade
superset init
superset run -p 8088 --with-threads --reload --debugger

If the project does not start, it can help to

wait a bit, since the process usually takes a couple of minutes
close the page and reopen it
reinstall node-modules

Perfect! The copied Plugin should be listed when you view all Charts:

The next step is optional if the visualisation is not shown.

If the plugin shows: “Unexpected Error”when loading -> adjust the visualisation:

The visualization will not work for all Plugins without a buildQuery.ts. Check if your Plugin contains a buildQuery.ts file in the /src directory.

If your plugin does not contain a buildQuery.ts just like in our Heat map example, then you will have to do the following steps :

We will have to find the python file where the python script for the corresponding query is located.

We can find the file by Searching in our IDE/Code Editor for this following term:

//Search for
<nameOfCopiedPlugin>viz

In our example:

Depending on which plugin you choose the python file can be different. Now follow the steps:

7. Look into the file and find the class for your plugin

In our case it is :

8. Duplicate the entire class below

9. Change the name of the class e.g.: HeatmapViz → HeatmapVizCopy

10. Change the viz_type Variable to the Key which you gave to the plugin in the Mainpreset.js

So the key from example is :

// In the Mainpreset.js File 
new HeatmapChartPluginCopy().configure({ key: 'heatmapcopy' }),
// -> heatmapcopy is the key

Change viz_type variable to the same key:

viz_type = "heatmapcopy"

So in viz.pyit should look like this :

class HeatmapVizCopy(BaseViz):
"""A nice heatmap visualization that support high density through canvas"""
     viz_type = "heatmapcopy"
     verbose_name = _("Heatmap")
    is_timeseries = False
    credits = (
        'inspired from mbostock @<a href="<http://bl.ocks.org/mbostock/3074470>">'
        "bl.ocks.org</a>"
    )
// Rest of the HeatmapViz Class
// Copy it below and modify it just like demonstrated in the steps before

Now start superset to see the changes. From root run:

superset init
superset run -p 8088 --with-threads --reload --debugger

Remember that these steps only apply if you copy a plugin which does not have a buildQuery.ts.

Cool, Now your all set!

Try to enter the same settings which we set for the default Heatmap, the result should be the same:

There are many cases where you want to edit plugins, just like the heatmap, but want to keep the original version. That is why knowing how to copy plugins is a very useful skill when working with superset.

The next guide shows how to modify plugins so we can adjust their usability to our preferences.

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

Superset Controlpanel Part 2 : https://medium.com/@teclead-ventures/superset-series-2-6-control-panel-31a84afae465

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