Dashboard

Summary: This page explains how to build a NEXT dashboard - the most critical tool to monitor the performance of an active application.

Dashboard HTML

To make a custom dashboard, the two files Dashboard.py and myAppDashboard.html in next/apps/<app_id>/dashboard/ need editing.

In myAppDashboard.html valid HTML to show the desired output is written. In the Javascript on this page, an AJAX request is sent:

            $.ajax({
                    url: "{{ dashboard_url }}/get_stats",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({  
                        'exp_uid': "{{ exp_uid }}",
                        'args':{
                            'stat_id' : 'most_current_ranking',
                            'params'  : {'alg_label': "{{ alg.alg_label }}" }
                            }
                        }),
                    dataType: "json"
                    }).done( function(data,textStatus, jqXHR) {
                      delete data['meta']
                      // sets the data in the div above
                      most_current_ranking_{{ alg.alg_label_clean }}(data)
                    }).fail( function(error){
                      console.log("Failed to get stats", error);
                    });

These params in args are routed to most_current_ranking in MyAppDashboard#most_current_ranking. They appear as a string.

Note that in this myAppDashboard.html we use Jinja2 templates. In this we loop over all the algorithms as shown in https://github.com/nextml/NEXT/blob/master/apps/DuelingBanditsPureExploration/dashboard/myAppDashboard.html#L29

See https://github.com/nextml/NEXT/blob/master/apps/DuelingBanditsPureExploration/dashboard/myAppDashboard.html for an example.

Dashboard Content

...through Python.

As in existing apps, we see that we need to use

from next.apps.AppDashboard import AppDashboard

class MyAppDashboard(AppDashboard):
    def most_current_ranking(self,app, butler, alg_label=None):
        # ...

This is the function that gets called through the AJAX request.

Arguments

• app: the class for myApp. This contains getModel, getQuery etc.
• butler: The normal butler object
• alg_label: passed in through the AJAX request.

Note: we do not pass these arguments to most_current_ranking through the verifier. In practice we've found that the default dashboards are good enough and don't require modifications.

We do pass the arguments to getModel (which this typically calls) through the verifier.