fluxViz Styles

July 8, 2013 email from Graham:

Here is a movie that roughly shows how the following could look in action... in this sequence A turns onto ~60% (a single GPCR partially activated by an antagonist), B adds input until it hits a threshold and then slowly increases to 100% on.  When C receives 50% signal from A, it starts to get deactivated by A.  Would have been nice to close the circuit so A gets turned off, but didn't think of that until late.  Also note, nothing is exact in this- its just a sketch.

I've included formulas for the visuals and suggestions for node defaults and animations below:

• 1. Yes, each node should have visual properties/attributes

     1. There should be a subset of parameters available through the GUI for users to adjust them.  Of the top of my head

     2. Node:

        1. Fill Color, Stroke color, Text Color, Text Size, Node size (absolute or %), Stroke Weight (absolute pixels or %)...maybe opacity

        2. Shape

           1. All Cytoscape shape options

           2. Custom vector graphics that will be provided by Megan and Graham

           3. Option for custom vector file import?

     3. Edge: 

• • • 1. Color

      2. Opacity

      3. Dash (with a ratio or absolute size for space to dash

      4. Straight, dog-legged, or curved?

      5. "Ends" = arrowheads, blocks, other?... 

         1. option for custom vector importer?

• 2. For each of your 5 node types, these attributes should be set to defaults... these will likely change in the very near future, but please use the following for draft 1 defaults:

• • 1. for all molecules below initial values for all parameters should be set to:

       1. initial fill color = ~5% black (i.e. very light grey), e.g., (240,240,240)

       2. initial stroke color = ~20% black e.g. (225,225,225)

       3. Text= default size and color (black) i.e.(0,0,0)

       4. initial shapes:

          1. kinase

             1. V

          2. small molecules

• • • • • 1. Triangle

• • 1. 4. 3. GTPase

• • • • • 1. Hexagon

• • 1. 4. 4. Receptor

• • • • • 1. Parallelogram

• • 1. 4. 5. ReceptorTKinase

• • • • • 1. Parallelogram

• • 2. Edges should be set to:

• • • 1. initial stroke color = ~20% black (225,225,225)

      2. initial weight = default

• • 3. Over time, the following parameters should change as the simulation runs to provide visual clues to what is occurring.  We will use a one-color/parameter approach with a linear scale where color indicates activity to follow "best methods" practices for clarity in visualization.

• • • 1. Changes in time (recall that activityLevel = the only output of a node, from 0 to 1.0):

         1. Node color indicates activity, where Blueness = activity  (Note, maximum blue is a mix of rgb=(0,120,240)

         2. Node Fill color = (1-activityLevel, 1-activityLevel*2, 1)•(240,240,240)

            1. activityLevel=0: nodeColor = lightGrey = (240,240,240)

            2. activityLevel=1: nodeColor = ~100%blue = (0,120,240)

         3. Edge color and weight indicates activity (artificially with a boolean integer) from -1.0 to 1.0

• • • • • 1. activatingEdge = 1  Greenness = activatingness

          2. deactivatingEdge = -1   Redness = deactivatingness

          3. Edge Stroke color if activatingEdge == 1

             1. activating arrow with regular arrowhead e.g., –––>

             2. edgeColor = (1-activityLevel, 1-activityLevel*.67, 1-activityLevel)•(225,225,225)

             3. activityLevel=0: nodeColor = 10%black = (225,225,225)

             4. activityLevel=1, activatingEdge: nodeColor = ~100%green = (0,150,0)

          4. Edge Stroke color if activatingEdge == -1

• • • • • • 1. deactivating arrow with "perpendicular blocking" arrowhead, e.g,  ––––|

            2. edgeColor = (1-activityLevel*.67, 1-activityLevel, 1-activityLevel)•(225,225,225)

            3. activityLevel=0: nodeColor = 10%black = (225,225,225)

            4. activityLevel=1, activatingEdge: nodeColor = ~100%redish = (150,0,0)

• • • • • 5. For all edges, weight could also indicates activity:

• • • • • • 1. This should be an option set by the user and it should be off by default

            2. default weight is set by cytoscape, max weight is set globally by user

            3. weight = (maxWeight-defaultWeight)*activityLevel + default weight.

• 3. STRETCH GOAL?:

• • 1. In the proposal phase we talked about animating flow along the edges.  If possible, my suggestion is to use the "marching ants" approach visible for decades in photoshop selections, but I'll make some other options too.

       1. Hack 1 ("ugly", but simple):

          1. could be a user option in the GUI that is off by default so a user can just toggle on and off to confirm flow direction manually

          2. if activatingEdge: Edge Line Styles = SEPARATE_ARROW

          3. if deactivatingEdge: Edge Line Styles = CONTIGUOUS_ARROW

       2. Marching Ants animated "flow": 

• • • • 1. I can think of three ways to do this (no idea if there are cytoscape properties)

        2. Offset the startPoint of the dashing.

           1. Set Edge Line Styles = DASH_DOT

           2. If cytoscape offers a line offset, then its easy:

              1. animate the offset over time, e.g.:

                 1. userInputSpeed = user set speed value (for now a float from -10 to 10), default = 2

                 2. offset+=LineOffsetStepSize*userInputSpeed

           3. if cytoscape has no line offset, can you create it by splitting an edge into two edges with 4 ghost nodes?

• • • • • • 1. Animate the two middle ghostNodes (invisible nodes) along the vector with the same offset equation described above

• • • • 3. Animate the edge:

• • • • • 1. An edge is a vector or raster graphic that is a pre rendered dashed line with 3to10 frames

          2. The frames play in a constant cycle to make the dashes appear to slide along the edge.

• • • • 4. Animated "Peristaltic Bead" nodes:

• • • • • 1. Build small nodes along the edges (could be at low frequency for now)... effectively a dot, and move it along the edge over time.

Hopefully equations like this can be added fairly easily, but if not, we can just pick one thing like change in nodeFillColor over time. We can go over this tomorrow if you have questions.