Using the app

The app is divided into two sections - the sidemenu on the left and the main body on the right. The sidemenu houses all of the controls that are needed to generate the plots you required. The generated plot then appears in the main body of the page.

Sidemenu

The sidemenu houses all of the widgets used to control the app. Each control can be configured to be shown or hidden on the sidemenu. By default, all of the controls are set to be shown. To completely hide the sidemenu from the app, simply set the sidemenu show option to false at initialisation:

var options = {
   sdcat: {
      url: "http://localhost:8082/api/v2/"
   },
   sidemenu: {
      show: false
   }
};
var app = new SDCat.App(options);

The next sections deal with each of the individual controls and how they work.

Radars

The radars section is made up of multiple controls - the main one being the radar selection box. When the app is initialised, this selection box is populated with the radar codes of all SuperDARN radars available from your API. The user can then selected the ones they require.

Below the selection box are additional “shortcut” controls which can pre-selected groups of radars based on various parameters. The North and South buttons allow the user to select only the radars located in the Northern or Southern hemisphere respectively. The next control is a drop down box which allows users to select radars based on the institute that maintains them. The final drop down box allows users to select radars based on the country in which they are located. Lastly, there is a control which determines how to display the radar names in the selection box. By default, the app shows the radars as their unique three-letter ID code. Using this control, users can change the display to show the radar names instead.

The options to control whether or not to show these controls are:

• showRadarList for the radar list
• showRadarHemisphereButtons for the hemisphere buttons
• showRadarInstituteSelection for the institute selection box
• showRadarCountrySelection for the country selection box
• showRadarNameDisplayButton for the name display buttons

To change the default way the radars are listed, set the appropriate radarNameOptions item to true after initialisation:

var app = new SDCat.App(options);
app.items.radarNameOptions.list.code.selected = false;
app.items.radarNameOptions.list.name.selected = true;

app.display();

In this example, the code option is deselected and the name option is selected before the app is displayed.

File Types

The file types section is comprised of a single selection box populated with the different file types available from the API. Similarly to the radars list, users can select the file types they require from the list. To hide this control from the sidemenu, set the showFileTypeList option to false.

Date Range

The date range section allows the user to pick a date range over which to show the coverage. This section is made up of three controls. The first set of controls allow the user to pick a specific date range. The next set of controls allow the user to jump forwards or backwards in increments of the currently selected time periods. This is accomplished by using the < or > buttons. The user can also jump to the start or the end of the available date range by using the << or >> buttons. Note that the time periods are expressed in days, so if the currently selected time period covers the entirety of a leap year, the jump buttons would go forward or backwards 366 days as opposed to a year. The final control is a drop down box of pre-selected date ranges.

The options to control whether or not to show these controls are:

• showDatePicker for the date picker and the jump buttons
• showPreselectedDateRanges for the date range drop down box.

Date ranges can be added to the drop down box programatically. This is accomplished by adding an additional element to the app object’s preselectedDateRanges object:

var app = new SDCat.App(options);
app.preSelectedDateRanges["Last Month"] = {
   start: new Date(Date.UTC(app.now.getUTCFullYear(), app.now.getUTCMonth() - 1, 1,  0,  0,  0)),
   end:   new Date(Date.UTC(app.now.getUTCFullYear(), app.now.getUTCMonth(),     0, 23, 59, 59))
};
app.display();

This will add a new date range called “Last Month” to the list of date ranges.

Buttons

The final set of controls are a collection of buttons which perform various tasks. The information for the buttons shown in this part of the sidemenu can be found in SDCat.App.sidemenuButtons. The buttons are as follows:

Select All

Clicking this button will select all the radars and file types.

Clear Selection

Clicking this button will clear any selected radars and file types.

Reset View

Clicking this button will reset the view of the plot after zooming in. At initialisation, this button is disabled.

Generate Plot

Clicking this button will generate the plot according to the parameters selected by the user.

Main Body

The main body houses the actual plot once it has been generated. It has been designed to share the same look and feel of the static plots available on the VT website. The difference here being that it is an interactive plot.

The plot shows the coverage of a dataset via bars, where the bars denote the time period where data is available for a particular radar and the colour of the bar represents the data type. The time is along the x-axis and the different radars are along the y-axis.

Using the mouse scroll wheel, a user can zoom in and out of the plot. The user can also zoom into a specific date range on the plot by clicking and dragging out a selection box along the plot. To return the plot to the original view, click the Reset View button.

Hovering over a bar reveals a tooltip which contains the start and end date of the bar beneath the cursor. The display below the plot shows the date and time of the point where the cursor is located - rounded down to the nearest two hour block so missing two-hourly SuperDARN files can be identified quickly.