browser-dev.org 2.9 KB
Newer Older
1
#+TITLE: Vidjil Browser -- development documentation
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
#+AUTHOR: The Vidjil team (Marc, Mathieu, Mikaël and Tatiana)


** Architecture

The Vidjil browser is a set of /views/ linked to a same /model/.
The model keeps the views in sync on some global properties, 
most notably dealing with the selection of clones, with the clone filtering,
as well with the locus selection.

- The model (=js/model.js=) is the main object of the Vidjil browser.
  It loads and saves =.vidjil= json data (either directly from data, or from a local file, or from some url).
  It provides function to access and edit information on the clones and on the global parameters
  It keeps all the views in sync.

- Each of the views (=Graph=, =ScatterPlot=, =List=, =Segment=) is rendered inside one or several =<div>= elements, 
  and kept sync with the model. All the views are optional, and several views of the same type can be added.
  See =js/main.js= for the invovcation 

- The link with the patient database/server is done with the =Database= object (=js/database.js=)

- Other objects: =Report=, =Shortcut=
24
  Extends functionalities but requires elements from the full =index.html=.
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39


** Integrating the browser

*** HTML and CSS
  - The =index.html= contains the =<div>= for all views and the menus
  - The CSS (=css/light.css=) is generated by =less= from =css/vidjil.less=

  - The =small_example.html= is a minimal example embedding basic HTML, CSS, as well as some data.
    As the menus are not embedded in this file, functionalities should be provided by direct calls to the models and the views.

*** Javascript    
  - The wonderful library =require.js= is used, so there is only one file to include
    <script data-main="js/app.js" src="js/lib/require.js"></script>

40 41
  - =js/main.js= creates the different views and binds them to the model.
    Another option is to directly define a function named =main()=, as in =small_example.html=.
42

43
*** JSON .vidjil data
44

45 46 47 48 49
Clone lists can be passed to the model through several ways:
  - directly by the user (import/export)
  - from a patient database (needs a database)
  - trough the API (see below)
  - or by directly providing data through Javascript (as in =small_example.html=)
50

51
The first three solutions needs some further elements from the full =index.html=.
52 53


54 55 56 57 58 59 60 61 62 63 64 65 66
**** Browser API

The browser can be opened on a data file specified from a =data= attribute,
and optionally on an analysis file specified from a =analysis= attribute,
as in the following URLs on our test server:

- http://rbx.vidjil.org/browser/?data=test.vidjil
- http://rbx.vidjil.org/browser/?data=test.vidjil&analysis=test.analysis
- http://rbx.vidjil.org/browser/?data=http://rbx.vidjil.org/browser/test.vidjil

Both GET and POST requests are accepted.
Note that the =browser/index.html= file and the =.vidjil/.analysis= files should be hosted on the same server.
Otherwise, the server hosting the =.vidjil/.analysis= files must accept cross-domain queries.