Representation structure

[carmen-tm]

Appearance, features and interactions. Based on my GSoC Submitted Proposal initial material reviewed.

A. Intro Stage

Presentation. First approach to the Bio4j Database Representation and main aspects

Elements proposed:

• General info of the project: the Bio4j Database, the Visualization project, description, what's for, credits...
• Modules Graphical representation.
  • Textual description of each Module (On hover)
  • Selection of the Modules that will be loaded to the Network Visualization (On click)
• Dependencies between Modules (Doubts about this topic on this issue #6)
  • Visual representation into the Modules Graphical scheme.
  • Textual description of each dependencies.
• "Access to the Network" button -> The network will be loaded with the selected Modules (the selection could be changed afterwards).

(Optional):

• Numbers section:
  • Updated section with all numbers re. the project (Nº of nodes, Nº of edges, Nº of properties..), last revision date, etc.
  • Small histogram diagram showing the database update activity history in general, by modules, etc.

---

B. Main Network Stage

Basic Network exploration through different views
The goal is to represent the domain model network allowing both the whole picture and a smaller detailed exploration of a portion of the dataset, as on this example with fluid transitions and path-drawing actions while exploring the node and defining a certain path for a further Bio4j request.

Elements proposed:

• FULL NETWORK VIEW

  • Modules loaded diagram as schematic guide : will highlighted the modules loaded on the network (selected on the previous Intro Stage). Will allows to remove/add any desired module into the Network view.
  • Network Visualization of all selected/loaded Modules.
    Two ways of exploring the graph are proposed (Doubts about this topic on this issue #7 )
    • Step by Step -> Path drawing case. The user defines the route as far as explores the network by clicking on the nodes consecutively. Contextual Menu options will allow to perform specific graph actions (filtering, neighbors, etc) as on this dagre+d3 example to support the exploration.
    • Target defined -> Path finding case. The user already knows the info is looking for, and how is called. He writes it on a Search element (_ _ _ _) as on this case and the nodes/edges required are highlighted on the network. By selecting one, a Contextual Menu option will allow to perform again specific graph actions plus the shortest pathway to the root, and maybe more path alternatives.
  • On both cases, a Highlighted Pathway will be standing out on the network (either selecting nodes step by step or choosing a path with a defined target). It will updated as tree/path diagram on the Route Map, corresponding with it node by node.
  • Re. the graphical aspect of the network, it will be simple, not visualizing detailed info about the network, as that will be show on the Detailed Network View next to it. Its sense is to give a whole picture/context and a path drawing of the route. Maybe no labels appearing on it, as appearing on the Detailed View? To be defined. Re. colours, always by module, persistent in all views.
  • Minimap on top of the network slightly highlighting the partial set of nodes and edges loaded on the Detailed Zoom view.

  js graph layout and rendering:

  • Not sure. Something simple as the d3 native force layout or its alternative cola.js could work, in order to represent the network as a whole, but not sure if it is a good idea to have this with a different layout to the zoomed view, code wise, or keep both views with the same dagre layout.

  d3-based possible components:

  • d3.behaviour: zoom ,drag...
  • js events: onClick, onMouseOver, on MouseOut... to allow interacting with the diagram

• ZOOMED NETWORK VIEW

  • Threshold/Degree of the fragment: Nº of steps/links to be loaded as fragment.
  • Partial Network Visualization of the set of nodes/links specified with the threshold, starting from a selected node.
  • In/Out switch option, allowing to see the network connected afterwards the node or backwards. As selecting a node on the route (on click here or on the full network view), the focus will change to it.
  • Legend of the graphical aspects of the network represented (arity, always defined, etc). (See here)
  • Contextual Menu options will allow to perform specific graph actions (filtering, neighbors, etc) as on this dagre+d3 example to support the exploration. NOTE: Not sure if this should happens on both full/zoomed views or just on this one.
  • (Optional): whatever other elements useful to improve the users navigation wit the the network: spring tension, etc.

  js graph algorithms:

  • graphlib Digraph functions: inEdges, outEdges, filterNodes... to returns
  • graphlib alg modules: alg.topsort, alg.tarjan, alg.dijkstra... to sort nodes,find groups of strongly connected components, find the shortest path.. etc for all the Contextual Menu options allowed.

  js graph layout:

  • dagre layout: tidy and simple way to lay out the network.

  graph rendering: d3 possible components + dagre-d3 lib:

  • d3 selection.data: enter, update, exit... with [transitions](https://github.com/mbostock/d3/wiki/Transitions) to update the partial network as the users interacts with it.
  • d3.behaviour: zoom ,drag...
  • js events: onClick, onMouseOver, on MouseOut... to allow interacting with the diagram.

• ROUTE MAP VIEW

  • Protein node as root of the diagram.
  • From root will grow a small tree path. Each branch will corresponds to a different Module.
  • Contextual Menu: Allows removing steps, go backwards.
  • Important info accompanying the diagram:
    • Indexes/typing information listed for the route covered (up of the each step on the diagram)
    • Properties of nodes & edges (down each node and each edge of the digram)
    • "Copy route" button of the Indexes list for a further easy copy/paste operation on the Bio4j platform (lateral position)
  • (Optional): When hovering a node/link, it will be highlighted on both the Full Network and the Zoomed Network

  d3-based possible components to be used:

  • d3.layout.tree() to give it the basic hierarchy structure (root, parent...)
  • selection.data: enter, update, exit... with transitions to update the diagram as the user network selections changes.
  • js events: onClick, onMouseOver, on MouseOut... to allow interacting with the diagram