Customizing Apache Superset UI – Config , Theme Changes

Lets talk something different than Traditional BI today which is about Apache Superset , A modern UI framework based on Flask and React JS.

As of my writing I am on Superset 0.99.0a version : Assuming I have my virtualenv , node module everything running and I have superset installer synced from docker Hub or cloned from Github I am straight going to the customization of different pieces of UI.

I am touching basics of the installation quickly : and my local folder where Superset exist is ‘ssdev’

pip install virtualenv
virtualenv venvdxp — create the env called ssdev
. ./venvdxp/bin/activate or source venvdxp/bin/activate — Activating virtualenv ssdev

Create your own Superset Dev env directory:
mkdir ssdev
cd ssdev
sudo git clone https://github.com/apache/incubator-superset
or
sudo git clone https://github.com/pauldx/incubator-superset
cd incubator-superset
(venv) dpaul@<HOST> ~/ssdev/incubator-superset $
sudo pip install -r requirements.txt
cd ~/superset_dxp
sudo chmod -R 777 incubator-superset/
cd incubator-superset/
sudo pip install -e .
fabmanager create-admin –app superset (note you can’t have multiple account in same name and same emailid in 1 venv )
superset db upgrade
superset init or superset-init
superset load_examples
nohup superset runserver -d -p 8080 &
tail -f nohup.out

The version I am working on below is :

cat $HOME/ssdev/incubator-superset/superset/assets/version_info.json
{“GIT_SHA”: “0509d7aefd71ee21b417c315c8f29cb51bb6b48c”, “version”: “0.999.0dev”}

Create Custom Folder for UI in Superset to make custom change localized here : In my case my custom changes placed under TC folder :

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

cd ~/ssdev/incubator-superset/superset/assets/stylesheets/less/

mkdir TC

cp -r cosmo/* TC/

cd ~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC

mv cosmoTheme.js TCTheme.js

 

~/ssdev/incubator-superset/superset/assets/stylesheets/less/index.less

Comment below and Add TC config :

//@import “./cosmo/variables.less”;

//@import “./cosmo/bootswatch.less”;

 

// TC Branding Config

@import “./TC/variables.less”;

@import “./TC/bootswatch.less”;

 

~/ssdev/incubator-superset/superset/assets/stylesheets/superset.less

Comment below and Add TC Config:

@import ‘./less/index.less’;

//@import “./less/cosmo/variables.less”;

 

// TC Branding Config change

@import “./less/TC/variables.less”;

Changing All UI Fonts to “Lato” Font:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Replace below to change all font to Lato: (Note Lato file must be copied/ deployed to the Superset Unix/ Linux env in ~/.fonts)

and then :

$fc-cache -fv

$fc-list

to load the fonts.

if fc-cache is not available in docker then use :  apt-get install fontconfig

Now change below on  :  ~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC/variables.less

 

 

//@font-family-sans-serif:  Helvetica, Arial;

 

@font-family-sans-serif:  Lato;

 

//@font-family-serif:       Georgia, “Times New Roman”, Times, serif;

 

@font-family-serif:       Lato ;

//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.

//@font-family-monospace:   Menlo, Monaco, Consolas, “Courier New”, monospace;

 

@font-family-monospace:   Lato;

Changing Logo:

~~~~~~~~~~~~~~

Copy new logo here: ~/ssdev/incubator-superset/superset/assets/images/TClogo.png

 

Edit ~/ssdev/incubator-superset/superset/config.py

Change the Logo name there:

APP_ICON = ‘/static/assets/images/TClogo.png’

Shaping the Top Nav Bar(height) plus bgcolor and font color:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC/variables.less

 

Replace below:

//@navbar-height:                    50px;

@navbar-height:                      30px;

//TC Branding colors

@tcbrand-blue:         #0093e0;

//@navbar-inverse-bg:                         #fff;

@navbar-inverse-bg:                         @tcbrand-blue;

//@navbar-inverse-link-color:                 @gray-dark;

@navbar-inverse-link-color:                 #ffffff;

Navbar onhover underline color:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC/bootswatch.less

 

.navbar-inverse .navbar-nav > li.active > a {

//  border-bottom: 3px solid @brand-primary;

border-bottom: 3px solid #F38A00;

}

.navbar-nav > li > a {

//  padding-top: 18px;

// padding-top: 8px;

}

Changing the Caret color:

~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC/bootswatch.less

 

.caret {

  border: none;

  color:  #ffffff;

}

.caret:hover {

  color:  #ffffff;

}

Changing The filterbox visualizations:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/src/visualizations/filter_box.jsx

 

const backgroundImage = (

                ‘linear-gradient(to right, lightgrey, ‘ +

              //  `lightgrey ${perc}%, rgba(0,0,0,0) ${perc}%`

                `lightgrey ${0}%, rgba(0,0,0,0) ${0}%`

              );

 

<DateFilterControl

              name={since}

              label={t(‘Start Date’)}

              description={t(‘Select starting date’)}

              onChange={this.changeFilter.bind(this, since)}

              value={this.state.selectedValues[since]}

            />

 

 

              name={until}

              label={t(‘End Date’)}

              description={t(‘Select end date’)}

              onChange={this.changeFilter.bind(this, until)}

              value={this.state.selectedValues[until]}

            />

Background blue onhover color:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/stylesheets/react-select/select.less

 

.VirtualizedSelectFocusedOption {

//  background-color: rgba(0, 0, 0, 0.1);

background-color: #ffffff ;

color: #0093e0;

}

 

.VirtualizedSelectFocusedOption:hover {

  cursor: pointer;

background-color: #0093e0 ;

color: #ffffff;

}

Changing the Brand Primary color from SS default green to TC Blue:

Will change Dashboard links to blue , Fav color to blue and export link color to blue:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC/variables.less

 

//@brand-primary:         #00A699;

@brand-primary:         #0093E0;

Changes the style of the Input fields:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC/variables.less

 

//** Text color for “s

//@input-color:                    @text-color;

@input-color:                    #0093e0;

 

//@input-bg-disabled:              @gray-lighter;

@input-bg-disabled:             #0093e0 ;

 

//@input-border-focus:             #66afe9;

@input-border-focus:             #0093e0;

Button shape change:

~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC/variables.less

 

// Allows for customizing button radius independently from global border radius

//@btn-border-radius-base:         @border-radius-base;

//@btn-border-radius-large:        @border-radius-large;

//@btn-border-radius-small:        @border-radius-small;

 

@btn-border-radius-base:         30px;

@btn-border-radius-large:        30px;

@btn-border-radius-small:        30px;

Removing the table border color:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC/variables.less

 

//** Border color for table and cell borders.

//@table-border-color:            #ddd;

@table-border-color:            #fff;

Dropdown menu changes:

~~~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC/variables.less

 

//@dropdown-border:                rgba(0,0,0,.15);

@dropdown-border:                #0093e0;

 

//@dropdown-link-color:            @gray-dark;

@dropdown-link-color:            #495057;

Fix custom logo alignment issue:

$ASSET/node_modules/bootstrap/less/navbar.less

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

(Not available in older SS version) And add margin on below section at :

 

 

.navbar-brand {

  float: left;

  padding: @navbar-padding-vertical @navbar-padding-horizontal;

  font-size: @font-size-large;

  line-height: @line-height-computed;

  height: @navbar-height;

  &:hover,

  &:focus {

    text-decoration: none;

  }

  > img {

    display: block;

    margin-top: -7px ;

  }

Else change in here :

Add new entry after navbar section as below :

~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC/bootswatch.less

.navbar-brand > img {

  display: block;

margin-top: -7px !important;

height: 34px !important;

}

Changing Filter control text:

~~~~~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/src/explore/components/controls/DateFilterControl.jsx

 

              bsSize=”small”

              className=”float-left ok”

              bsStyle=”primary”

              onClick={this.close.bind(this)}

            >

             Apply

            

              className=”float-right”

            >

                bsSize=”small”

                className=”now”

                onClick={this.setValueAndClose.bind(this, ‘now’)}

              >

               Today

              

                bsSize=”small”

                className=”clear”

                onClick={this.setValueAndClose.bind(this, ”)}

              >

               Reset

              

Removing Right side navbar menu items : (Profile / Languages)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/templates/appbuilder/navbar_right.html

Commented out this section:

<!–li class=”dropdown”>

    <a class=”dropdown-toggle” data-toggle=”dropdown” href=”javascript:void(0)”>

       

 

       

        

    </a>

    <ul class=”dropdown-menu” id=”language-picker”>

      <li class=”dropdown”>

        {% for lang in languages %}

            {% if lang != locale %}

                <a tabindex=”-1″ href=”{{appbuilder.get_url_for_locale(lang)}}”>

 

                     – {{languages[lang].get(‘name’)}}

                  

                </a>

            {% endif %}

        {% endfor %}

      </li>

    </ul>

</li–!>

 

Add below for Dropdown after : {% if not current_user.is_anonymous() %}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<li class=”dropdown”>

      <a

        class=”dropdown-toggle”

        data-toggle=”dropdown”

        title=”{{g.user.get_full_name()}}”

        href=”javascript:void(0)”

      >

 

<SPAN STYLE=”font-family: Lato”>Dashboards</SPAN>

  &nbsp;<b class=”caret”></b>

      </a>

        <ul class=”dropdown-menu”>

             <li>

<a

         href=”/superset/dashboard/world_health” title=”Pricing Analysis” target=”_self”>

        <SPAN STYLE=”font-family: Lato”>Pricing</SPAN>

          </a>

</li>

            <li>

<a

         href=”/superset/dashboard/births/” title=”Supply Analysis” target=”_self”>

        <SPAN STYLE=”font-family: Lato”>Supply</SPAN>

          </a>

</li>

        </ul>

    </li>

Add links as tabs in Menu:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

add below after : {% include ‘appbuilder/navbar_right.html’ %}

~/ssdev/incubator-superset/superset/templates/appbuilder/navbar.html

      <li >

          <a

         href=”/superset/dashboard/world_health” title=”WorldBank” target=”_self”>

        <SPAN STYLE=”font-family: Lato”>Pricing</SPAN>

          </a>

        </li>

        <li >

          <a

         href=”/superset/dashboard/births/” title=”Birth” target=”_self”>

        <SPAN STYLE=”font-family: Lato”>Supply</SPAN>

          </a>

       </li>

Change ~/ssdev/incubator-superset/superset/templates/appbuilder/navbar.html

<img

          width=”146″ height=”43″ src=”{{ appbuilder.app_icon }}”

          alt=”{{ appbuilder.app_name }}”

        />

To remove Right side navbar menu items : (Version info /Superset’s Github / Documentation  )

Remove all text below:

<li>

          <a href=”/static/assets/version_info.json” title=”Version info”>

            <i class=”fa fa-code-fork”></i> &nbsp;

          </a>

        </li>

        <li>

 

          <a href=”http://google.com” title=”Google” target=”_blank”>

            <i class=”fa fa-github”></i> &nbsp;

          </a>

        </li>

        <li>

          <a href=”https://superset.incubator.apache.org” title=”Documentation” target=”_blank”>

            <i class=”fa fa-book”></i> &nbsp;

          </a>

        </li>

Superset default Menu items text can be changed by editing below file content:

./incubator-superset/superset/views/core.py

 

Changing the Dashboard in place Button  look and feel to be brand button:

.button

{

background-color:    #0093e0;

border-radius:     3rem;

border-color:     #0093e0;

}

Add TC brand color palettes for all visualizations:

~/ssdev/incubator-superset/superset/assets/src/modules/colors.js

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

Add TC new color palette

In superset/assets/src/modules/colors.js, add this part of code in line 43:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

export const tcColors = [

  ‘#F38A00’,

  ‘#FFBF69’,

  ‘#0093E0’,

  ‘#98D2EB’,

  ‘#4D7EA8’,

  ‘#9EB5C9’,

  ‘#3E4958’,

  ‘#6A7E95’,

  ‘#6D6E70’,

  ‘#DBDBDB’,

];

And once that part is added, add this in line 104:

tcColors,

Resulting:

 

export const ALL_COLOR_SCHEMES = {

  bnbColors,

  d3Category10,

  d3Category20,

  d3Category20b,

  d3Category20c,

  googleCategory10c,

  googleCategory20c,

  lyftColors,

  tcColors,

};

To change Heatmap control to add TC color Visualizations:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/src/modules/colors.js

 

Add below in line 129 :

 

tcbrand_blue: [

    ‘#C1EAFF’,

    ‘#94DAFF’,

    ‘#6BCCFF’,

    ‘#47C0FF’,

    ‘#0093E0’,

  ],

Add below highlight:

~/ssdev/incubator-superset/superset/assets/src/explore/controls.jsx

 

  linear_color_scheme: {

    type: ‘ColorSchemeControl’,

    label: t(‘Linear Color Scheme’),

    choices: [

      [‘fire’, ‘fire’],

      [‘white_black’, ‘white/black’],

      [‘black_white’, ‘black/white’],

      [‘tcbrand_blue’, ‘tcbrand_blue’],

      [‘dark_blue’, ‘light/dark blue’],

      [‘pink_grey’, ‘pink/white/grey’],

      [‘greens’, ‘greens’],

      [‘purples’, ‘purples’],

      [‘oranges’, ‘oranges’],

      [‘blue_white_yellow’, ‘blue/white/yellow’],

      [‘red_yellow_blue’, ‘red/yellowish/blue’],

      [‘brown_white_green’, ‘brown/white/green’],

      [‘purple_white_green’, ‘purple/white/green’],

    ],

    default: ‘tcbrand_blue’,

And change the slice view parameter default to : tcbrand_blue or we can change Default in control.jsx 

Adding new SuperSet menu item:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

Add below in #2752 Line

~/ssdev/incubator-superset/superset/views/core.py

 

appbuilder.add_link(

    ‘NewLink1’,

    label=_(‘NewLink1’),

    href=’/superset/dashboard/newlink1′,

#    category_icon=’fa-flask’,

#    icon=’fa-flask’,

    category=’Dashboard’,

    category_label=__(‘Dashboard’),

)

 

 

appbuilder.add_link(

    ‘NewLink2’,

    label=_(‘NewLink2’),

    href=’/superset/dashboard/newlink2′,

#    category_icon=’fa-flask’,

#    icon=’fa-flask’,

    category=’Dashboard’,

    category_label=__(‘Dashboard’),

)

 

appbuilder.add_link(

    ‘Demand360’,

    label=_(‘Demand360’),

    href='<place any URL here>’,

#    category_icon=’fa-flask’,

#    icon=’fa-flask’,

    category=’HT360′,

    category_label=__(‘HT360’),

)

I would only do this if you mind the extra space between container body with navbar:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

$ASSET/stylesheets/superset.less

 

div.navbar {

  z-index: 999;

margin-bottom: 10px;

}

Adding lato font:

~~~~~~~~~~~~~~~~~~~~

$ASSET/stylesheets/superset.less

 

Add below :

@import url(https://fonts.googleapis.com/css?family=Lato);

 

body {

margin: 0px !important;

font-family: ‘Lato’, sans-serif !important;

}

Removing Select[xxx] in dropdown :

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~/ssdev/incubator-superset/superset/assets/src/visualizations/filter_box.jsx

 

Remove space[%s] :

<OnPasteSelect

            placeholder={t(‘Select [%s]’, filter)}

Customize free form text to ‘Custom Range’ :

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

$ASSET/src/explore/components/controls/DateFilterControl.jsx

 

<PopoverSection

            title=”Free form”

            isSelected={this.state.type === ‘free’}

            onSelect={this.setType.bind(this, ‘free’)}

Title is not in Lato Font :

~~~~~~~~~~~~~~~~~~~~~~

$ASSET/stylesheets/superset.less

 

.editable-title input {

    padding: 2px 6px 3px 6px;

    font-family: Lato ;

}

 

.editable-title input[type=”button”] {

    border-color: transparent;

    background: transparent;

    white-space: normal;

    text-align: left;

font-family: Lato ;

 

}

Dashboard and header component change:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

$ASSET/src/dashboard/components/Header.jsx

$ASSET/src/dashboard/components/Dashboard.jsx

./src/components/EditableTitle.jsx

./src/explore/components/ControlHeader.jsx

./src/dashboard/components/SaveModal.jsx

Also CSS list of changes in individual dashboards is possible from Superset dashboard pages itself