Customization

This topic describes how to use the servers.json file to define the default connection behavior in Heavy Immerse. It describes how to enable default behavior using servers.json, provides basic syntax, and includes examples. You can define the HEAVY.AI database to connect to, as well as the username and password. You can also configure Immerse to use additional tile sources for geo charts.

Editing heavy.conf to Enable servers.json

To enable default behavior through a servers.json file, you must first edit heavy.conf to include servers.json information:

1. In your HEAVYAI_STORAGE directory, open heavy.conf. For information about heavy.conf and available options, see Configuration Parameters.

2. In the [web] section of heavy.conf, reference servers.json by adding the following line:

   servers-json = "/servers.json"

   Replace with the full path to servers.json.

3. Save heavy.conf.

servers.json File Properties

Configuring Data Source and User Login Credentials

You can create a servers.json file to control the default configuration when you log in to Heavy Immerse. The information in servers.json can identify the database you connect to and credentials to use during automatic login.

1. If servers.json does not exist yet, create a file by that name in the HEAVYAI_STORAGE directory.

2. In servers.json, specify the database to connect to, as well as username and password information. You can use host, port, and protocol to specify the path to the data:

   [
      {
             "database": "<database_name>",
             "port": "<port_number>",
             "host": "<hostname>",
             "protocol": "<protocol>",
             "username": "<username>",
             "password": "<password>"
           }
   ]

   Alternatively, you can define the data source using a URL:

   [
      {
             "database": "<database_name>",
             "url": "<URL>",
             "username": "<username>",
             "password": "<password>"
           }
   ]

3. Save servers.json.

Feature Flags

The feature_flags section lets you set global default settings for the Immerse user interface.

Immerse User Interface Keys

The immerse_ui_keys section of servers.json enables you to configure which parts of the Immerse user interface are visible to the user.

For example, turn off all turn off all parts of the UI, and then explicitly turn back on tabs, the SQL editor, and the global side navigation.

"immerse_ui_keys": { 
   "default": "NONE", 
   "ui_on": ["tabs", "sql_editor", "global_side_nav"] 
   }

The following table shows the names of the user interface keys that can be used to turn UI features on or off. Values are not case sensitive and can be prepended with IMMERSE_UI_.

Using Query Strings

You can use query strings in URLs to configure Immerse user interface keys, using the ui_on and ui_off parameters:

<url>?ui_on=<key_value>,[<key_value>...] 

<url>?ui_off=<key_value>,[<key_value>...]

For example, to turn on the tabs and SQL Editor button:

?ui_off=tabs,sql_editor

All of the key values described in Immerse User Interface Keys apply to query strings. Values are not case sensitive and can be prepended with IMMERSE_UI_.

Custom Styles

To productize Immerse, you can add the customStyles JSON object to servers.json. Use the customStyles elements to:

• Customize colors
• Customize the text displayed in the browser tab
• Add your own logo
• Customize the login text
• Disable the Help menu dropdown on the navigation bar

JSON Branding Elements

Notes

• You can also set fonts and colors in the Immerse UI Settings panel. For more information, see Configuring the Dashboard User Interface.
• There are no visual design guarantees when using a large number of colors. For example, visual elements might bleed beyond borders or have an unexpected layout.
• Custom styles do not affect the settings for charts or dashboards saved before the custom styles are defined. However, you can edit existing charts and replace the colors in use to colors in your custom palette.

Loading Custom Stylesheets Using override.css

You can load custom stylesheets after the default Immerse styles by replacing override.css with with your own stylesheet.

The following example shows a login container style override. The code changes are reflected in the figures that follow.

*/ .login-container { 
   background-color: blue !important 
}
/* Dark mode variants (AKA "Heavier mode") can be specified with :not(.lighter-mode)
*/ .login-container:not(.lighter-mode) { 
   background-color: rebeccapurple !important; 
}

Full servers.json Example

The following example shows a complete servers.json file that includes customization. When you want to change any of the settings in servers.json, you must replace all settings in servers.json, even if you duplicate the default values.

[
{
   "database": "heavyai",
   "url": "localhost",
   "port": "6273",
   "username": "admin",
   "password": "HyperInteractive",
   "feature_flags": {
      "ui/default_theme": "light"
   },
   "customStyles": {
      "logoURL": "http://www.heavyai.com/docs/latest/images/3_panda.png",
      "loginText": "Log in to Panda Bear Wear Ware",
      "title": "Where Panda Bear Wear Ware Wearers Dare Care",
      "buttonPrimaryColor": "#888888",
      "buttonSecondaryColor": "#444444",
      "buttonSecondaryHighlightColor": "#000000",
      "colors": {
        "solid": [
           "#333333",
           "#555555",
           "#777777",
           "#999999",
           "#aaaaaa",
           "#cccccc",
           "#eeeeee",
           "#ffffff"
        ],
        "custom": [
           "#000000",
           "#eeeeee",
           "#222222",
           "#cccccc",
           "#444444",
           "#bbbbbb",
           "#666666",
           "#aaaaaa",
           "#333333",
           "#dddddd",
           "#111111"
        ],
        "ordinal": [
           [
              "#111111",
              "#cccccc"
           ],
           [
              "#111111",
              "#777777",
              "#cccccc"
           ],
           [
              "#111111",
              "#555555",
              "#999999",
              "#bbbbbb",
              "#eeeeee"
           ],
           [
              "#111111",
              "#333333",
              "#555555",
              "#777777",
              "#999999",
              "#bbbbbb",
              "#dddddd",
              "#eeeeee"
           ]
        ],
        "quantitative": [
           [
              "#555555",
              "#cccccc"
           ],
           [  "#111111",
              "#eeeeee"
           ]
        ]
      }
   }
}
]

This example is for the totally-not-made-up company Panda Bear Wear Ware, where you can find all of your Panda Bear Wear Ware in one lair with time to spare. There is an understandable predilection toward black, white and everything in between on their color palette.

The first section contains branding information for their Heavy Immerse instance.

"logoURL": "http://www.heavyai.com/docs/latest/images/3_panda.png",
"loginText": "Log in to Panda Bear Wear Ware",
"title": "Where Panda Bear Wear Ware Wearers Dare Care",
"buttonPrimaryColor": "#888888",
"buttonSecondaryColor": "#444444",
"buttonSecondaryHighlightColor": "#000000",

The logo, labeling, and button colors are visible at the dashboard level.

The Solid palette colors all items in Line, Pie, Bar, and other charts with one color. You can define the array of available colors.

      "colors": {
        "solid": [
           "#333333",
           "#555555",
           "#777777",
           "#999999",
           "#aaaaaa",
           "#cccccc",
           "#eeeeee",
           "#ffffff"
        ],

The Ordinal palette defines a range of colors that are iterated repeatedly in a chart with many values. You can define multiple ranges from which to select.

"        ordinal": [
           [
              "#111111",
              "#cccccc"
           ],
           [
              "#111111",
              "#777777",
              "#cccccc"
           ],
           [
              "#111111",
              "#555555",
              "#999999",
              "#bbbbbb",
              "#eeeeee"
           ],
           [
              "#111111",
              "#333333",
              "#555555",
              "#777777",
              "#999999",
              "#bbbbbb",
              "#dddddd",
              "#eeeeee"
           ]
        ],

For example, a Pie chart can cycle through colors on the Ordinal palette to color each segment.

The Custom palette populates the Custom and Color By Dimension pop-ups, allowing you to assign specific colors to one or more values.

        "custom": [
           "#000000",
           "#eeeeee",
           "#222222",
           "#cccccc",
           "#444444",
           "#bbbbbb",
           "#666666",
           "#aaaaaa",
           "#333333",
           "#dddddd",
           "#111111"
        ],

The Quantitative palette gives a range of two or more colors. Values are expressed as a gradient on a continuum between the colors you define. You can create multiple value sets.

        "quantitative": [
           [
              "#555555",
              "#cccccc"
           ],
           [  "#111111",
              "#eeeeee"
           ]
        ]

Enable Custom Basemap Styles for Geo Charts

If you work extensively with geospatial data, you might need to use basemap styles that are different than those provided by Immerse. By modifying servers.json, you can use custom map styles created with Mapbox Studio, as well as third-party OGC-compliant raster tile sources.

To use different basemap styles, add the mapboxCustomStyles property, and then define the source.

If you are an administrator, you can change the built-in styles to a new set of Mapbox tiles.

To delete a theme, add a custom style without a value. For example, to delete the Satellite theme, add the theme and then define the value as follows:

{
    "label" : "Satellite"
    "value" : ""
}

A custom theme can be defined as the new default. Normally, the default theme is Current Immerse Theme, but by specifying "default" : true, the new theme becomes the default. For example:

{"label: "my-cool-theme", "value" : "mapbox://my.mapbox.url", "default" : true}

The default theme appears first in the map theme selector.

If a theme’s value is changed (including changing the value of an Immerse-installed theme), a map using them will update to keep the same theme, but use the new Mapbox URL value.

If a theme is deleted, then any maps referencing that theme revert to the default.

The following example syntax shows how to add custom base maps using the mapboxCustomStyles property, in the following order:

• A custom map style created in Mapbox Studio and hosted on mapbox.com.
• A basemap style hosted on a Mapbox Atlas Server.
• A third-party OGC-compliant raster tiles source not affiliated with Mapbox. This source must adhere to the Mapbox Style Specification.

[
  {
        "database": "<database>",
        "password": "<password>",
        "url": "<heavyaiserver>",
        "port": "<port_number>",
        "username": "<username>",
        "mapboxCustomStyles": [
          {
                "label": "custom-mapbox-studio-source",
                "value": "mapbox://styles/heavyai/<mapbox-studio-style-id>"
          },
          {
                "label": "mapbox-atlas-source",
                "value": "http://<domain>:<port>/pages/<style_name>/<style_name>.json"
          },
          {
                "label": "3rd-party-raster-source",
                "value": {
                  "version": 8,
                  "sources": {
                          "openstreetmap": {
                                  "type": "raster",
                                  "tiles": [
                                          "http://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
                                          "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png"
                                  ],
                                  "tileSize": 256
                          }
                  },
                  "layers": [{
                          "id": "openstreetmap",
                          "type": "raster",
                          "source": "openstreetmap",
                          "minzoom": 0,
                          "maxzoom": 22
                  }]
                }
          }
        ]
  }
]