Visualization

The Visualization Widget category consist of the following widgets:

• Graph
• Image gallery
• Map
• Table
• Toast
• Tree

---

Graph

The following tables offer usage details about the properties available to Graph widgets. Several examples follow the tables.

Properties

IEdges

INodes

Examples

Dynamic Graph

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "camera": {
    "ratio": null,
    "x": null,
    "y": null
  },
  "edges": {
    "sourceNodeIds": "{{graph.sourceNodeIds}}",
    "targetNodeIds": "{{graph.targetNodeIds}}"
  },
  "nodes": {
    "iconUrls": "{{graph.iconUrls}}",
    "ids": "{{graph.ids}}",
    "labels": "{{graph.ids}}",
    "xPositions": "{{graph.xPositions}}",
    "yPositions": "{{graph.yPositions}}"
  },
  "selectedNodeIds": [
    "n18"
  ]
}

Static Graph

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
{
  "camera": {
    "ratio": null,
    "x": null,
    "y": null
  },
  "defaultIconUrl": "resources/map-people.svg",
  "edges": {
    "ids": [
      "e1",
      "e2",
      "e3",
      "e4",
      "e5"
    ],
    "labels": [
      "e1",
      "e2",
      "e3",
      "e4",
      "e5"
    ],
    "sourceNodeIds": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "targetNodeIds": [
      "n2",
      "n3",
      "n4",
      "n5",
      "n1"
    ]
  },
  "layout": {
    "type": "layered"
  },
  "nodes": {
    "ids": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "labels": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "xPositions": [
      100,
      30.9,
      -80.9,
      -80.9,
      30.9
    ],
    "yPositions": [
      0,
      95.1,
      58.78,
      -58.78,
      -95.1
    ]
  },
  "selectedNodeIds": [
    "n1"
  ]
}

Defaults

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "camera": {
    "ratio": null,
    "x": null,
    "y": null
  },
  "edges": {
    "sourceNodeIds": [],
    "targetNodeIds": []
  },
  "nodes": {
    "ids": [],
    "xPositions": [],
    "yPositions": []
  },
  "selectedNodeIds": []
}

---

Image Gallery

The following tables offer usage details about the properties available to Image Gallery widgets.

Properties

---

Map

Slate’s Map widget is backed by Leaflet ↗.

The Map is composed of layers: a base layer (also called a tile layer; this is the background map imagery), and some number of overlay layers (also called feature layers; this is the data you are interested in). The Map widget supports both raster and vector tiles for feature layers.

See the Mapbox documentation ↗ for a helpful introduction to web map technology. Slate uses Mapbox as the source for its base map imagery.

Terminology

• Map tile: the base layer of the Map widget, these tiles are simply images. They do not contain data. You can think of map tiles as the “background” of the map. Map tiles are configured in the Misc tab and apply to the entire Map widget, rather than just a single layer. Only one kind of map tile can be displayed at a time.
• Feature: a point or shape drawn on top of a map, associated with some kind of data.
• Vector: an alternative method of representing an image. A raster image describes the image pixel by pixel; essentially, as a grid of colored pixels. A vector image, by contrast, describes lines between points. This means that vector images can be displayed at different sizes cleanly.
• Vector tile: contains shape data as vectors.
• Tile server: dynamically serves shape data as tiles.
• Map tile source: serves base tiles for a map. It is technically also a tile server.

Layer types

Slate has the following types of overlay layers:

• Location
• Heat map and heat grid
• Shape
• Vector
• Choropleth
• Raven

Location

Location layers simply contain points (Leaflet markers ↗), identified by latitude/longitude pairs. You can configure the Map widget to display these points as circles or icons.

Heat map and heat grid

Heat map and heat grid layers also deal with point data, but rather than simply displaying the points on a map, they display an overlay with computations about the distribution of those points. Heat maps show the density of the points as a colored gradient, whereas heat grid groups points into buckets and displays the buckets as discrete color cells.

Shape

Instead of just individual points, shape and vector layers can also have data in the form of polygons — information stored as a series of points and the lines between them. Shape layers provide these polygons in GeoJSON ↗ format. GeoJSON files can be served directly from your Slate server.

GeoJSON features are stored as JSON and translated into SVG (image) files. These images are all loaded at once when the Map widget is first loaded.

Vector

Vector layers provide shape data in vector tiles. You must have an external tile server running to serve vector tiles. Vector tiles are loaded dynamically (only as they come into view on the map). Vector tiles also draw features directly on the canvas, rather than rendering them as images, so a vector layer can have many more features than a shape layer

Choropleth

Choropleth layers also deal with polygon data, but they add an additional value to each feature, and project these values onto a color scale. Each feature, then, is displayed on the map with a color corresponding to that value. This serves as a visualization of some specific statistic.

For example, you might have a map with states colored by population density, or zip codes colored by social vulnerability index.

Raven

Contact your Palantir representative if you need to use a Raven map in your Slate applications.

Base tiles

The Map widget comes with several options for the base tile layer. The options include a dark theme, a light theme, a satellite theme, a street map theme, and our default theme. There is also an All option, which lets you switch between themes on the map directly using the Layer Selector.

In the Misc tab of the Property Editor, choose from the Tile Layer dropdown:

Data scale on the map

Shape layers (GeoJSON) support the lowest data scale. At about 1,000 features, map performance slows down noticeably. For data larger than that, you should use vector layers instead. You may also try simplifying the geometry in your GeoJSON to increase performance.

Location layers slow down at about 5,000-10,000 points.

Disabling interactivity

You can disable panning and zooming if you want to display a static map in your application. You can also remove the base layer if you simply want to show feature data (and not the base map tiles).

Examples

Location map layer

Includes custom styles:

You can also style all markers/clusters in a layer using the layer name or .layer${layerIndex}. Only layer names that are valid CSS classes will be added:

Choropleth map layer

Vector map layer

Heat map layer

Properties

IBaseLayerOptions

IBounds

IChoroplethLayerOptions

IColorScaleOptions

IHeatgridLayerOptions

IHeatmapLayerOptions

ILatLng

ILayerModel

ILocationLayerOptions

IMapSelection

IRectangleShape

ICircleShape

IRavenLayerFilterOptions

IRavenLayerOptions

IShapeLayerOptions

IVectorTileLayerOptions

IVectorTileOptions

IVectorTileStyleOptions

---

Table

The following tables offer usage details about the properties available to Table widgets. Several examples follow the tables.

Properties

IColumnOption

IGridOptions

ISelectionOptions

ISortOptions

ITableHover

ITablePagingOptions

Examples

Dynamic Table

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{
  "columnData": "{{query1}}",
  "columnOptions": {
    "id": {
      "name": "ID",
      "width": 50
    },
    "name": {
      "name": "Full Name"
    },
    "address": {
      "name": "Home Address"
    },
    "phone_number": {
      "name": "Phone Number"
    },
    "score": {
      "name": "Score",
      "horizontalAlignment": "right"
    }
  },
  "columnOrder": [
    "id",
    "name",
    "address",
    "phone_number",
    "score"
  ],
  "gridOptions": {
    "enableSelection": true,
    "enableSorting": true,
    "pagingOptions": {
      "currentOffset": 0,
      "pageSize": 10,
      "totalServerItems": 100
    },
    "selectionOptions": {
      "checkbox": false,
      "multiSelect": true
    },
    "sortOptions": {
      "columnId": "score",
      "isAscending": false
    }
  },
  "selectedRowKeys": [],
  "selectionIdentityColumnId": "id",
  "serverEnabled": true,
  "tooltipsEnabled": false
}

Static Table

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "columnData": {
    "staticOptions": [
      "option1",
      "option2",
      "option3"
    ]
  },
  "columnOptions": {},
  "columnOrder": [],
  "gridOptions": {
    "enableSelection": true,
    "selectionOptions": {
      "checkbox": true,
      "multiSelect": false
    }
  },
  "selectedRowKeys": [],
  "selectionIdentityColumnId": "staticOptions",
  "serverEnabled": false,
  "tooltipsEnabled": false
}

Defaults

Copied!
1
2
3
4
5
6
7
8
9
{
  "columnOptions": {},
  "columnOrder": [],
  "gridOptions": {},
  "selectedRowKeys": [],
  "selectionIdentityColumnId": "Metric",
  "serverEnabled": false,
  "tooltipsEnabled": false
}

Tutorial: Add a table widget

Say that you want to add a Table widget to display flight data. Select the Widget button in the upper left corner, then choose Visualization > Table to add a Table widget to your Slate application.

Rename the Table widget to something easier to identify. Select the name of the widget in the property editor and change it to w_flightTable.

Configure the table to use a q_allFlights query by entering "{{q_allFlights}}" in the Data field. You should see the table populate with data.

Note that "{{q_allFlights}}" is not pure JSON syntax. The brackets are Handlebars syntax, where each expression is represented as {{expression}}. See Handlebars to learn more about its use in Slate.)

Your table now has the correct data, but the formatting could be improved. Select Add all columns to view formatting options for each column in the underlying data.

Since the flight_id column is not a human-readable column, hide that column for now. However, we will keep it in the table to refer to later when configuring the ability to select one or more rows.

For the rest of the columns, choose a display name as Title and add a format string to clean up the timestamps using formatting strings from MomentJS ↗.

We now have a table that cleanly displays all of the data:

Next, set how a user can interact with the table through selection and sorting.

Switch to the Misc tab in the property editor, and check Allow Selection and Enable Sorting. A user can now select columns directly to see the table sorted in different ways and can click a specific row to select it.

Finally, decide what to use as the unique identifier for a given row in your table. In this case, use the name of the flight. In the dropdown labeled Key column ID, select flight_id.

Configure paging and sorting

Check the box for Enable Paging and Server Paging/Sorting. Choose a number for Page Size to set the number of rows to display to the user at a single time.

With these options enabled, your table will now keep track of the current page; we can use this information in our query to bring back just the relevant rows to display.

Open the query editor and return to q_allFlights. We will now update the LIMIT statement to reflect the page size configured in the table and add an OFFSET statement to ask Postgres to give us the correct page of results.

Use the same Handlebars syntax that we used to include data from our query into the Table widget to reference the Table widget state from inside our query:

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
SELECT
    flight_id,
    carrier_code,
    tail_num,
    origin,
    dest,
    dep_ts_utc,
    arr_ts_utc,
    distance,
    actual_elapsed_time
FROM "foundry_sync"."{{v_flightTable}}"
LIMIT {{w_flightTable.gridOptions.pagingOptions.pageSize}}
OFFSET {{w_flightTable.gridOptions.pagingOptions.currentOffset}}

Now, your table displays 20 rows at a time and you can select the next buttons or jump to a specific page. Now, let the table widget know the total number of rows so it can correctly display the "total entries".

To do this, create a new query called q_flightCount and count the number of rows:

Copied!
1
2
3
SELECT
    COUNT(flight_id) as num_flights
FROM "foundry_sync"."{{v_flightTable}}"

Select Update to save the query and return to the table widget Misc tab. In the Server Total input, use Handlebars to reference the count in our query:

{{q_flightCount.num_flights.[0]}}

Now, our table knows that we are showing a particular set of rows out of the total entries (either 4.2M for the flights dataset or 73,946 for last-mile-flights).

This takes care of the paging and will let us iterate through large datasets without weighing down user browsers or timing out our queries. We still must turn on the server-side sorting so that our query responds to the user's interaction with the table.

Return to q_allFlights and add an ORDER BY clause to our query. Just as you referred to the pagingOptions.pageSize and pagingOptions.currentOffset, refer to the .sortOptions.columnId and .sortOptions.isAscending to create the right SQL statement:

Copied!
1
2
3
4
5
6
ORDER BY {{w_flightTable.gridOptions.sortOptions.columnId}}
    {{#if w_flightTable.gridOptions.sortOptions.isAscending}}
        ASC
    {{else}}
        DESC
    {{/if}}

You should see a newly available conditional Handlebars block statement. This statement allows you to inject logic into text interpolation. In this case, we can choose either ASC or DESC based on the user's selection in the table.

Now, your full query should look like this:

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
SELECT
    flight_id,
    carrier_code,
    tail_num,
    origin,
    dest,
    dep_ts_utc,
    arr_ts_utc,
    distance,
    actual_elapsed_time
FROM "foundry_sync"."{{v_flightTable}}"
ORDER BY {{w_flightTable.gridOptions.sortOptions.columnId}}
    {{#if w_flightTable.gridOptions.sortOptions.isAscending}}
        ASC
    {{else}}
        DESC
    {{/if}}
LIMIT {{w_flightTable.gridOptions.pagingOptions.pageSize}}
OFFSET {{w_flightTable.gridOptions.pagingOptions.currentOffset}}

Give the table a title that explains the information it displays at a glance.

Select the Widget button, select a plain Text widget from the options.

Fill in the Text widget with the title of the table: All Flights or Last Mile Flights as appropriate.

Move the Text widget to sit at the top left corner of the table, using the gridlines to ensure everything is aligned.

Now, properly line up the table beneath the title and subtitle. Select both the table and its title by holding the Cmd key and selecting (or drag-selecting) both widgets, then move both widgets so they are properly aligned under the application title.

Your application should now look like the following, with the finished Table widget. Notice that you can now select a row and sort the table.

---

Toast

The following tables offer usage details about the properties available to Toast widgets. Several examples follow the tables.

Properties

Actions

Events

Examples

Toast

Copied!
1
2
3
4
5
6
7
{
  "actionText": "Toast Example",
  "hasAction": false,
  "intent": -1,
  "message": "Toast Message",
  "timeout": 600
}

Defaults

Copied!
1
2
3
4
5
6
7
{
  "actionText": "Action!",
  "hasAction": false,
  "intent": -1,
  "message": "Message",
  "timeout": 3000
}

---

Tree

The following tables offer usage details about the properties available to Tree widgets.

Properties

Defaults

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "contents": [
                {
                  "childNodes": [
                      {id: 3, label: "bar 1"},
                      {id: 4, label: "bar 2"}
                  ],
                  "iconName": "folder-close",
                  "id": 1,
                  "label": "bars",
                },
                {
                  "id": 2,
                  "label": "foo"
                }
              ],
  "searchText": "",
  "selectedNodes": [],
  "selectionType": SelectionType.SINGLE
}