npellet/visualizer

Concept

The visualizer is a tool developped by the cheminformatics department of the Swiss Federal Institute of Technology. We promote the development of open source projects that we use internally for our daily research. As a consequence, we release the visualizer under the MIT license unless specified otherwise. We try to use only open source third party libraries.

The visualizer aims at the rendering of complex datasets. It is suited to display and interact in a multiple of ways thanks to modules that can be placed on your browser page. The modules display some type of information in some way (table, chart, matrix, 2D list, 1D list), and they can interact with each other through a central API. The visualization is started by passing only three URLs in the browser address bar.

Modules may be added, moved, duplicated, resized and removed through the UI. Each module can be configured with built-in options to allow their customization. In addition, some modules can interact with the mouse pointer and are able to send variables and actions to other modules through an event-based system.

Visualize your data

To get started, you need three json files located anywhere accessible by XHR requests.

• view.json
• data.json
• config.json

The view file will contain information about the visualization in a JSON format : which modules should be placed and where, which mouse interactions should be defined, which variables or actions to send or receive, etc. The view.json is independant on the dataset you want to visualize. In the view file will be defined which modules should be displayed and which initial variables from the dataset should be readily available to the modules.

The data file contains the data to visualize in a JSON format. The user is responsible to generate that file according to a few guidelines.

The config file is typically common to your projects. It defines which modules are available (built-in or not), which buttons should be displayed in the header, which variable filters and action files should be available to the visualizer.

Variables and Actions

The visualizer allows the modules to comminucate via a central repository of variables and actions. When an event is triggered on a module ( mouse click, mouse hover, resize, ... ), a variable or an action is sent towards the repository.

Installation

To install the development version of the visualizer, you need Node.js.
Run npm install and all the dependencies will be downloaded.

visualizer's Issues

Add piechart in jit cladogram (new type)

type: "pie"

format for color / value ?
$colors:[]
$values:[]

$size should also work

Numbers are not rendering in jqgrid

Testcase : http://npellet.github.io/visualizer/src/index.html?viewURL=../testcase/data/chemcalcLookup/view.json&dataURL=../testcase/data/chemcalcLookup/data.json

Columns with numbers are not rendered and show "Loading" instead.

Custom user types

Possibility for the user to define his own types

Resize view

Add a possibility to resize a view (and each module relative to its new size)

More than 1 input variable in single value module

Accept more than 1 variable in the module, and combine them with the sprintf parameter.

Fix cladrogram jit

Out event does not work in the testcaee

Missing highlight

Say you have a module that listens to highlights (jqgrid for example).
With the following sequence of events :

1. highlight a value
2. unhighlight this value but do not highlight another value
3. highlight the same value

The third event does not occur and you have to highlight a second value to be able to highlight the first again.
To test : http://script-test.epfl.ch/script/Tiny/20140107/LdRwKmtoLM
Hover a value, get out of the table and hover the same value again.

Parenting elements

Question.

An element should always have a parent that it is referenced to (according to our previous discussion).

How about an element that could possibly have multiple parents ?

What would happen when you stringify this ?

For instance

var hasMultParents = { "hello": "world" };
var b = {};
var c = {};

b.a = hasMultParents;
c.a = hasMultParents;

var d = [ c,b ];

console.log( JSON.stringify( d ) );

This will output

[{"a":{"hello":"world"}},{"a":{"hello":"world"}}]

Which essentially copies the element.

This could be an issue someday.

Treat an event only if necessary

It would be nice to have the possibility to execute the logic of an event (data treatment, variable preparation) only when necessary, that is when at least 1 variable out or 1 action out is bound to this event.

No way to select jpath in "entry points"

In the "global preferences" it is not possible anymore to select a JPath. When trying to click on a arrow to open the item it will quit the drop down menu.

Input variable listeners are never stopped

Each time the configuration of a module is saved, a new listener is created, but the previous one is still here.
So in the situation where you edit 5 times de configuration, the "update" function will be called 5 times when an input variable changes

New options for object editor

1. Possibility to change the display type (view, edit, text) in the context menu
2. Option to auto-expand the JSON on load

General preferences and default input variable

The first level variable are not defined by default anymore. The variable are added in the "general preferences" but the corresponding jpath is not displayed

Where to put the default config ?

For development, we need a default config file. I put it under src/config/default.json but I had to modify the entry point and now it does not match the grunt config that creates default.json in src/

Add range in forms

Make the difference between a slider and a range using 2 different types. This allows to solve more easily the preferences

Fast table sorting and highlight

When sorting a fast array viewer the _highlights becomes crazy. Missing a kill highlight ?

Same problem when the value of the table change. The highlight is not reset.

Problems with version loader header

To test : http://npellet.github.io/visualizer/src/index.html?config=../testcase/config/multiview.json&viewURL=../testcase/data/multiview/view.json&dataURL=../testcase/data/multiview/data.json

In this simple example, there are three views. View 1 has two modules, view 2 has the same modules but at different places. View 3 is empty.
When the header button is used to switch views, the data initialization throws an error.

Datamining minification

Can you tell me a bit how the depencies work so that we may minify it ?

Jqgrid module does not allow to select al ine anymore

When clicking on a cell the cell is selected and not the row and it seems that the onClick event is not sent

?config=../testcase/config/default.json&viewURL=../testcase/data/chemcalcLookup/view.json&dataURL=../testcase/data/chemcalcLookup/data.json

mustache in lib ?

Seems wrong if it's gitted.

Form creator

1. Why is formcreator a global library. Is it used for something else than array filtering ?
2. Text field needs an option (checkbox?) to say if we want it to be case sensitive
3. Checkboxes do not work
4. Number field to compare numbers ("10"<"9" returns true)

View-specific filter

For specific cases, it could be useful to create a variable filter directly in the view so we do not need to create a file for it and add it to the filter list

Update array_search to take into account number and case sensitive

Numeric values does not appear in jqgrid

http://localhost/visualizer/src/index.html?config=../testcase/config/default.json&viewURL=../testcase/data/array/view.json&dataURL=../testcase/data/array/data.json

Separate range and slider items in form

Currently, the "range" and "normal" sliders are in the same category.
Make a separate range type, with default values for start AND end

Display the module information in the module preferences

The informations that is now present in the module:

controller.prototype.moduleInformation = {
    moduleName: 'Display dendrogram',
    description: 'Display a dendrogram based on jit',
    author: 'Luc Patiny',
    date: '30.12.2013',
    license: 'MIT'
};

Could be displayed somewhere. Maybe in the module general configuration.

Is there by the way a possible to update automatically the date when committing the code

Allow _highlight as array or directly a key

When sending a _highlight parameter allow both syntax:

_highlight:["A","B"]

or

_highlight:"A"

Currently the API checks if it is an array and do nothing if it is not

Migrate highlights

We have to change all

API.listenHighlight(element._highlight)

to

API.listenHighlight(element)

Luc, can you handle this in the modules ?
I'll upgrade the framework

Spectra superimposed and does not clear

If you go over the matrix example
http://npellet.github.io/visualizer/src/index.html?config=../testcase/config/default.json&viewURL=../testcase/data/fiber/view.json&dataURL=../testcase/data/fiber/data.json
If you are too fast the spectra superimpose and does not clear the previous. This seems to be an async loading problem

Multiple loading of module's CSS

for each instance of a module, the corresponding "style.css" is loaded into the DOM via the init method.
We need to load it only once

Version of modules

In the definition of the modules should we think about

{
moduleName: "Test",
url: "http:// ....",
versions: ["1.0","1.1","2.0"],
defaultVersion: "1.0"
}

In the configuration of a module we could then be able to switch from one version to another. This would allow to test new version of a module easily

JQgrid and 2D brid does not allow to show many molecules anymore

2D grid only display one molecule
JQgrid is more unpredictable about the number of molecules that will be displayed

http://npellet.github.io/visualizer/src/index.html?config=../testcase/config/default.json&viewURL=../testcase/data/molecule/view.json&dataURL=../testcase/data/molecule/data.json

Add events for module deletion

Possibility to execute a function when a module is about to be deleted

Rename "Configure entry poins"

Now that more options are available in entry points it should be renamed to something like "Global preferences"

Grunt fails on requirejs:compile

Running "requirejs:compile" (requirejs) task

Tracing dependencies for: init
Error: ENOENT, no such file or directory
'/Applications/MAMP/htdocs/test/SplashScreen/visualizer/build2/usr/datastruct
ures/filelist.js'
In module tree:
init
src/main/entrypoint
Warning: RequireJS failed. Use --force to continue.

Display relevant information in module configuration

Ok so I modified the forms so that we may print any HTML code in a group.

This way we may put some information almost anywhere (not between two fields belonging to the same group)

Now the question is, what do we want to show =D ?

I think we should have detailed information about the module, i.e. what it can actually receive, what it is, what it can send, how it displays the information, what it may do. This is information we already have encoded in the file, or that we could write in a json format and stick it in the controller.

init.js has a bug that prevent visualizer to work

Uncaught ReferenceError: el is not defined init.js:285
10

Variable in filter should be encapsulated in dataobject by default

jqgrid sorting remove canvas

If you try to sort a column in jqgrid the molecules disappear

http://npellet.github.io/visualizer/src/index.html?config=../testcase/config/default.json&viewURL=../testcase/data/molecule/view.json&dataURL=../testcase/data/molecule/data.json

Fast table does not show background color

In the example the fasttable on the right does not show the background colors

http://localhost/visualizer/src/index.html?config=../testcase/config/default.json&viewURL=../testcase/data/array/view.json&dataURL=../testcase/data/array/data.json

Development environment

Create a special dev.html page to help developing new features

eval bug in jpath function making

util/util, ln 182

 if( stack ) {
eval( ( stack ? 'stack[ "' + jpath + '" ] ' : 'el' ) + '= function( el ) { if (' + ifString + ') return el.' + jpaths2.replace(regNum, "[$1]$2") + '; else return "" }');        
}

It's not gonna work, we must return the function if stack is undefined and remove "el = "

Question is, where is it used, besides fasttable ?

Ex: http://jsfiddle.net/muR5j/

More options in the color picker

Possible enhancements :

• Directly write RGB values,
• Hexadecimal color
• Store recently used colors in local db ?

Fix and migrate phylogram

Try to migrate phylogram to d3 v3 library

Spectra displayer overflow

Testcase : http://npellet.github.io/visualizer/src/index.html?viewURL=../testcase/data/chemcalcLookup/view.json&dataURL=../testcase/data/chemcalcLookup/data.json

If you are too fast when you hover the mouse on the table, the spectra displayer will stop removing the serie before adding a new one. The series will stack and the page will become very slow.

Modify modules file system

We need to put some order in the basic available modules.

In order to change the file system we need to change the way a module is defined.
Currently

"Server interaction": {
        "button_url": "Button URL",
}

Each module must include the URL of a folder (relative or absolute) that MUST contain controller.js, model.js and view.js

We could actually think about a 4th file, config.json which contains all the config currently in the controller. Would make a lot of sense then to parse it and create an automatic documentation.

Context menu duplication

Each time a view is loaded (with the versionloader header), the "Add a module" element is duplicated in the context menu.

Hide useless tabs in module preferences

For instance, if no variable in / variable out, action in / action out, we may hide the tab.

Remove "field name" in filtering fields

Fix controllers

Please update the following controllers

dendrogram
jsmol
jsmol_script
phylogram
var_editor
webservice_nmr_spin