User Interface

Products selection panel (aka Catalog)

All available products are listed in the left panel.
The products may be grouped based on tags.
The user can filter the list with a search query to be matched against the product's label and tags.
This panel allows the user to add or remove them from the Display data dialog.

Display data dialog

This dialog is accessible by clicking on the "Display data" button in the top bar.

This dialog allows the user to:

Timeline

The timeline is located at the bottom of the application.
It's initially collapsed (i.e. the detailed view is hidden).

The timeline is composed of three parts:

  1. the timeline bar
  2. the coverage timeline
  3. the detailed timeline

Timeline bar

Item Description
Animation controls Allows to start and stop the animation, and control its speed.
Timespan selection Allows to change the current timespan by picking one from a configurable list.
Find nearest button Allows to go to the nearest datetime containing at least one dataset.
Colocation toggle Toggles the colocation feature which changes the behavior of the coverage timeline. Will be red with active. For more info see the coverage timeline.
Number of datasets in the map Shows the number of datasets in the map, visible or not (see pagination).
Pagination controls Allows to change the current page, and shows the number of datasets currently visible. For more info see pagination.
Dataset selection info Shows the number of selected datasets, or when only one is selected its ID and the ID of its product. (Only visible when one or more datasets are selected)
The current date and time Shows the current current datetime. (Only visible when no dataset is selected)
Coordinates Shows the coordinates of the mouse pointer (or the map center) in degrees latitude and longitude.

Coverage timeline

Composed of three rows:

  1. Contains all the possible years.
  2. Contains all the months of the selected year.
  3. Contains all the days of the selected month of the selected year.

Each cell (year/month/day) of the calendar can be:

Note: The yellow and red states are only used if the colocation is active (the colocation toggle in the timeline bar is red).

Each cell also has a tooltip with the list of all products it contains.

Note: Some products do not advertise their availability and thus are not included in the coverage timeline.

Detailed timeline

Hidden by default, can be shown by clicking on the arrow pointing upward just above the timeline and centered horizontally.

Its full width represents the current timespan.
The vertical line in the center represents the current datetime.

The dots and horizontal lines represent datasets.
A horizontal line represent the datetime range of a dataset.
A horizontal line become a dot when it's too small, that is when its length on screen is less then half the width of a dot (10 pixels by default).

The dots and horizontal lines can be:

The dots and horizontal lines are clickable (if their datasets are in the map).
When clicked its respective dataset is selected in the map.

They also have a tooltip which contains the ID of their respective dataset.

Pagination

Syntool is rendered unresponsive or unusable when the number of datasets in the map gets too big.
To solve this the datasets are split into pages, and shown one page at a time.

The datasets are distributed among the pages using the algorithm described bellow.

Let maxDatasetsWeight be the rendering budget, datasetWeight of a product be the average cost of rendering one of its datasets, and minPageSize of a product be the minimum number of its datasets to be rendered (even if we go over-budget).

The pagination system tries to maximize the number of rendered datasets. While distributing as uniformly as possible the budget on all selected products and respecting the minPageSize of all products.

The priority of a product comes in play in the case that the budget can't be distributed uniformly (the number of rendered datasets must be an integer). In which case the products with the highest priorities (biggest priority) will have their datasets rendered.

Examples

  1. Normal
    Product priority datasetWeight minPageSize Number of datasets
    Product A 0 1 0 1000
    Product B 0 1 0 1000
    Product C 0 1 0 1000

    1st iteration

    • maxDatasetsWeight is 10
    • BudgetPerProduct = maxDatasetsWeight / 3 = 10 / 3 = 3

    We distribute the budget uniformly.

    Product Page size Number remaining of datasets
    Product A 3 997
    Product B 3 997
    Product C 3 997

    2nd iteration

    • maxDatasetsWeight is 10 - 3 - 3 - 3 = 1
    • BudgetPerProduct = maxDatasetsWeight / 3 = 1 / 3 = 0

    Since maxDatasetsWeight is 1 greater than 0 and BudgetPerProduct is 0, then this means that we can't distribute the budget uniformly. So starting from the product with the highest priority down to the one with lowest, we give 1 from the budget to each one until we run-out.

    Product Page size Number remaining of datasets
    Product A 4 996
    Product B 3 997
    Product C 3 997
  2. Priority
    Product priority datasetWeight minPageSize Number of datasets
    Product A 0 1 0 1000
    Product B 0 1 0 1000
    Product C 1 1 0 1000

    1st iteration

    • maxDatasetsWeight is 10
    • BudgetPerProduct = maxDatasetsWeight / 3 = 10 / 3 = 3

    We distribute the budget uniformly.

    Product Page size Number remaining of datasets
    Product A 3 997
    Product B 3 997
    Product C 3 997

    2nd iteration

    • maxDatasetsWeight is 10 - 3 - 3 - 3 = 1
    • BudgetPerProduct = maxDatasetsWeight / 3 = 1 / 3 = 0

    Since maxDatasetsWeight is 1 greater than 0 and BudgetPerProduct is 0, then this means that we can't distribute the budget uniformly. So starting from the product with the highest priority down to the one with lowest, we give 1 from the budget to each one until we run-out.

    Product Page size Number remaining of datasets
    Product A 3 997
    Product B 3 997
    Product C 4 996
  3. Weight
    Product priority datasetWeight minPageSize Number of datasets
    Product A 0 2 0 1000
    Product B 0 1 0 1000
    Product C 0 1 0 1000

    1st iteration

    • maxDatasetsWeight is 10
    • BudgetPerProduct = maxDatasetsWeight / 3 = 10 / 3 = 3

    We distribute the budget uniformly.

    Product Page size Number remaining of datasets
    Product A 3 / 2 = 1 999
    Product B 3 997
    Product C 3 997

    2nd iteration

    • maxDatasetsWeight is 10 - (1 * 2) - 3 - 3 = 2
    • BudgetPerProduct = maxDatasetsWeight / 3 = 2 / 3 = 0

    Since maxDatasetsWeight is 2 greater than 0 and BudgetPerProduct is 0, then this means that we can't distribute the budget uniformly. So starting from the product with the highest priority down to the one with lowest, we give 1 from the budget to each one until we run-out.

    Product Page size Number remaining of datasets
    Product A 3 + 1 / 2 = 3 999
    Product B 3 + 1 = 4 996
    Product C 3 + 1 = 4 996
  4. minPageSize
    Product priority datasetWeight minPageSize Number of datasets
    Product A 0 1 0 1000
    Product B 0 1 4 1000
    Product C 0 1 0 1000

    before iterating (applying minPageSize constraint)

    • maxDatasetsWeight is 10
    Product Page size Number remaining of datasets
    Product A 0 1000
    Product B 4 996
    Product C 0 1000

    1st iteration

    • maxDatasetsWeight is 10 - 4 = 6
    • BudgetPerProduct = maxDatasetsWeight / 3 = 6 / 3 = 2

    We distribute the budget uniformly.

    Product Page size Number remaining of datasets
    Product A 2 998
    Product B 4 + 2 = 6 994
    Product C 2 996
  5. minPageSize with going over-budget
    Product priority datasetWeight minPageSize Number of datasets
    Product A 0 2 4 1000
    Product B 0 1 4 1000
    Product C 0 1 0 1000

    before iterating (applying minPageSize constraint)

    • maxDatasetsWeight is 10
    Product Page size Number remaining of datasets
    Product A 4 996
    Product B 4 996
    Product C 0 1000

    1st iteration

    • maxDatasetsWeight is 10 - (4 * 2) - 4 = -2

    Since maxDatasetsWeight is negative (-2) then we have blown our budget. So we stop.

Messages

A message is like a notification, it conveys some information that the user should see.

Hotspots

A hotspot is a bookmark of the current view (datetime, timespan, map viewport and the selected products with their respective transparency levels, order, and filters), with an associated name or title and an optional description link (a link to an external web page that describes it, like an article).

Hotspots can be created, viewed, shared, and deleted from the "Hotspots" popup (accessible by clicking on the "Hotspots" button in the top bar).