Skip to content
This repository was archived by the owner on Jul 6, 2023. It is now read-only.

Frontend V2.0

Jump to bottom
Colorado Reed edited this page May 5, 2013 · 9 revisions

As of May 2013, we are revamping our frontend display/functionality to allow:

  • URL routing for a given view
  • Smooth integration of exploration, learning, and editing displays
  • Allow graphical changes based on the desired depth of understanding
  • New exploration mode options such as expanding/collapsing nodes, showing paths between nodes
  • Frontend (javascript) calculation of graph placement
  • Display user contributed content next to "original" content

We will strive for a modular MVP frontend, where initially we will use backbone.js to help eliminate ambiguity in design choices and streamline the development of the core kmap functionality. Backbone.js also has a large community base and strong documentation, which bode well for future frontend contributors.

User Flow

  1. user searches for foo
  2. if foo is ambiguous present user with disambiguation display
  3. present the user with the exploration-view, with the foo node highlighted and its parents (canvas + sidebar) (TODO: all parents/ancestors or just direct parents for initial view?)
  • the user can expand/collapse the parents or expand/collapse foo to see/hide its children (expand/collapse and expand-all/collapse-all functionality)
  • the user can mark nodes they already understand (collapsed nodes assume the user understands all collapsed dependencies)
  1. at any point (e.g. once the appropriate nodes are expanded/collapsed/maked-as-known) the user can switch to the learning view
  2. the learning view presents a linear list of topics that can be expanded and marked as learned (turn green, add a checkmark, etc)

NB: in addition, both the exploration view and the learning view will have an "edit" button that will pull up the editing view for the selected content

Frontend Technical Flow

  1. the user query is an ajax request to the server that returns the complete data for all ancestors and children of the searched node (further descendents will require additional ajax queries)
  2. asynchronously: use js-graphviz to obtain coordinates of edges and nodes for initial view
  3. populate an ancilliary view object that maintains (client-id, coordinates) pairs for both the nodes and edges
  4. draw the graph view on the canvas
  5. asynchronously: populate the models described below
  6. select the searched node in the exploration view and load the sidebar at a 75 (canvas) 25 (sidebar) split (adjustable by the user to a reasonable max/min value)
  7. collapsing/expanding nodes will involve recomputing the coordinates from js-graphviz, where smooth animation transitions for already present nodes should help ease disorientation for the user (TODO unless we can modify graphviz so that it keeps some nodes at the same coordinates)
  8. marking nodes as "known" will simply dim them (light gray display) and propagate this information to the server for registered users
  9. transition to the learning view will replace the canvas-sidebar view with a 50-50 canvas/ordered-list view, where the 50-50 split can be adjusted by the user (with max/min buttons for quick transitions)

Models

  • Node : the node is the central model

    • title [text]: human-readable title
    • id [text]: server-side id for the node
    • summary [text]: human-readable summary
    • pointers [markdown text]: directives to other nodes (may change to a model with combination text/collection)
    • questions [model collection]: collection of "Question" models
    • resources [text] [model collection]: collection of "Resource" models
    • inlinks [model collection]: collection of "DirectedEdge" models
    • outlinks [model collection]: collection of "DirectedEdge" models
    • visible [boolean]: is the node current visible to the user
    • learned [boolean]: whether the user understands this concept

  • Question: contains comprehension question text and meta information for a given node

    • text [text]: comprehension question text
    • node [text]: pointer to the node that uses this question

  • Resource: contains information regarding a given resource

    • title [text]: title for the given resource
    • location [text]: location for the resource (should be a verbal description, if applicable)
    • url [text]: url to the given resource
    • other text and array based fields TBD

  • DirectedEdge: represents directed edges between nodes

    • to [text]: destination node
    • from [text]: origin node
    • reason [text]: reason for directed edge
    • visible [boolean]: is the node current visible to the user

Views

The central AGFK view will be a variable width two-column display (where the width of one pane can be 0).

TODO this section will become a detailed list of all general purpose views and specific purpose sub-views

URL routing

The guiding principle for agfk URL routing will be to provide users with a direct URL to any specific expanded/collapsed version of a given graph but user-specific details (learned concepts) will be saved on the server for registered users

Clone this wiki locally