search

bio4j / el-grafo

GSoC 2014 project - D3-based Bio4j data model visualization
4 stars 3 forks source link

plan development & deliverables for Phase2 #18

Open carmen-tm opened 10 years ago

carmen-tm commented 10 years ago

Here on docs/meeting folder is a first draft to be discussed

carmen-tm commented 10 years ago

@eparejatobes @laughedelic Can we let this for tomorrow? I have to go in 10 min...

Tomorrow I'm available all day, you let me know what time works for you. :) thanksss

laughedelic commented 10 years ago

fine for me

eparejatobes commented 10 years ago

:+1:

carmen-tm commented 10 years ago

CONTENT PHASE2

Project Structure

Set the Project structure with require.js.

3 Navigation Levels:

A. INTRO: BIO4J DATABASE GLOBAL VIEW, GENERIC INFO

Intro page of the project.

  1. Represent the whole graph on a very simple graphical way, with all the modules connected to the root protein vertex and the module dependencies between modules.
    • Get the model data of all the modules via http request. By now 'http://localhost:8080/schema/...'
    • Filter the data to separate modules and dependencies. Relevant info here
    • Load all json files at once and represent them on something schematic visually based on relevant graph data (Nº of vertex and nodes, etc).
    • Vertex colored by its module, by selecting them with attribute/classes.
    • "LOAD button" to load the desire module selection as graph, by associating an url with the json file to each module representation
  2. Link to it all general info about each module loaded: a simple function to say the module name and a resume about it, the existence or not of dependencies, the number of vertex and edges loaded, last update, etc.
    • Find this info on Bio4j platform.
    • Code it so it is automatically linked. A post about this here. With jquery function get() info here
  3. Once a module is loaded, exit this page, but keep the whole schmema as small icon on the main page (highlighting the module hat has been loaded as guide), so it works as link to intro page.

B. GRAPH REPRESENTATION BY MODULES: Basic Representation & Interactions (test/user/interaction/graph)

Finish representation and user interaction aspects.

  1. All modules integration. Re-code the request/load/graph functions in a way that everything comes automatically from an initial schema request --> IN PROGRESS
    • Function that reads the numbers of modules of the domain model.
    • Populate buttons based on them, accessing to each module name.
    • Function to automatically generate each url based on their names
    • Function to automatically generate a color for each module.
    • Onclick function for each button, that returns the graph draw() function.
  2. Use graphlib/algos (sources, neighbors, tarjan...) on a interactive way instead of the alert boxes/console.log with textual info.
    • Selection test: selecting and graphically highlighting them when clicking on a specific vertex, etc. --> DONE
    • Test the filtering dagre-d3 command digraph.filterNodes(f) to make a copy of the diagraph that only includes the nodes based on a filter function.
    • Implement this coding with a contextual menu or something similar to choose between the different options. Relevant example and here
  3. Graphical representation of ARITY possibilities -> many/many, many/one, etc with a legend. Some useful info here.
    • Test: Select the edges by classes/attributes and modify their style, for example its color.
    • Select and modify the svg edge path elements to represent the different possibilities.
      • a. Playing with the line-tension/multiplying elements at the beginning/end of the edge.
      • b. Edge tapering possibilities.
  4. Dependencies between modules to be represented graphically collapsing the modules connected, highlighting the vertex connected by them.
    • Research how to collpase communities with d3 and code it. Relevant examples: bundle nodes, here, here and here.
    • On click expand its community (could be the connected components for example, instead of the whole module)
  5. Potential path drawing on the network when clicking on consecutive vertex, for pre-defining queries.
    • Select and hightlihg edgepaths wiht onclick events on vertex.
    • Display the relevant info (id and properties) of each node/vertex selected useful for further queries.
  6. Append relevant info published about each vertex and edge.
    • Find and select this info
    • Code it by linking it as on the Intro page.
  7. Optional:

C. LOCAL VIEW VISUALIZATION

Potential visualization complementing the Global view. 2 possibilities to be explored.

On both cases, an RouteMap/histiogram to accompaign the navigation and go steps backwards if needed.

(+) OPTIONAL IMPLEMENTATIONS

  1. Add a Search text box to browse the network on this way and searching for a specific element/family.
  2. Automatized the queries on basic level, by defining a function that takes the indexes and parse them as they are needed on the Bio4j model.
  3. Express somehow the quantity of data will be received with an specific request on both vertex/edges, like an order or magnitude.
  4. Intangible properties ---> if a relation exists, then that means many other will be, or not... choose a representative example of this.

Timeline PHASE2