Tracker Maps

This document aims to give future developers/maintainers an introduction to the "Tracker Maps Reloaded" website.

Design

An important design decision is that adding additional resources should be as easy as possible. A data file (data.js) contains the resource name to be displayed on the checkboxes, the - as concrete as possible - resource name (i.e. location).

Collections (~Classes)

• ParamEncoder.js: Generation of the parameter string in the url to be created when sharing the link
• ParamDecoder.js: Reverse of encoder; parse parameters and recreate the view
• Loader.js: Loads the data, and handles data initialization / new run selection
• ModeHandler.js: Handles the chaning of viewmodes which affects mostly the PanelBuilder
• TimelinePlayer.js: TODO
• PanelBuilder.js: Generator of the panels which are used to display the resources. Different behaviour depending on resource type (txt, log, out, png)
• PanZoomHandler.js: Handle synchronizing zooming and panning in images (libs/panzoom)
• DiffHandler.js: Handle calls to the diff library (libs/jsdifflib)
• FileTree.js: Handles the file browsing and data selection (libs/FileTree)

Hints

Simple addition of new plots

If the resource you want to add is a png, txt, log, out just add it to the corresponding detector and submodule in data.json.

Adding new resource type

Understand how the data is loaded and displayed. Specifically take a look at data.json where the data is defined. The function loadCheckboxes() directly handles the generation of the checkboxes from the data. loadCheckboxes() is called in the onclick handlers found in main.js. From there take a look at the onclick handler that listens for the .panel-extend-checkbox class. From there you're going to have to take a look how the PanelBuilder works. The important functions to consider are PanelBulider::addRmTkMapPanel, and PanelBulider::addToComparisonView. It is here were you will have to adapt things - if at all.

Changing Decoder / Encoder

It is unlikely that you're going to have to touch either ParamEn/Decoder; if it turns out that you do need to add something always do it in both. Don't introduce asymetries.

General

The expected lifespan of this tool is just until ~2020.
Test thoroughly on Chrome, Firefox, Safari before pushing to live.

Additional Material

Keep the manual 'doc/tkmap_manual.pdf' up to date.

Libraries Used

• JQuery
• PanZoom
• JsDiffLib
• JQuery File Tree

Leave the code in better shape than you found it - Sun Tzu