Changes to UI to support new features

[kdahlquist]

@dondi, @NAnguiano, and @kdahlquist had a meeting on 2/27 to discuss changes to the GRNsight UI needed to support the new features of drafting board and viewport resizing, showing/hiding weights, changing weight normalization value, and eventually graph statistics.

We didn't have as much time to meet as we would have liked, but here is a summary of what we talked about:

• Make the force graph parameter sliders, sizing, showing/hiding weights into collapsible sections.
• What is in the collapsible sections should also be redundant with what's in the menu. @dondi pointed out that we can customize the menus to have sliders and other features, too.
• The graph statistics layout should appear below the drafting board, but also be a collapsible section.
• The menus need to be reorganized to make sense with the current feature set. It is worth looking at the menu systems for competing software because users may be familiar with it. However, we should do what's best for us.
  • The File, Demo, and Help menus should remain as is.
  • The Edit, Format, and Data menus are what will be reorganized pending further discussion.
  • One suggestion is to have a "Graph Layout" menu with the options of "force graph layout" and "hierarchical layout", with submenus that have the slider options.
  • A "View" menu could control the viewport and drafting board options, and the choice to color or use black edges, and possible show/hide edge weights.
  • A "Data" menu would have options related to data.
    • It is not clear whether some options better belonged in "View" or "Data" or maybe should be in both.

[kdahlquist]

When discussing #396, #397, and #399, @NAnguiano and @kdahlquist discussed the following changes to the UI that should be implemented right away:

1. We no longer need the message "Mouse over the edges to see the weight parameter values." to appear when a weighted graph is loaded, since we now have radio buttons showing the choices to the user.
2. We need to organize the Viewport/Drafting Board options.
   • Below the weight options, there should be a header that says "Drafting Board/Viewport Options"
   • Underneath that, it should have the radio buttons for:
     • Fixed (Graph confined to viewable area)
     • Adaptive (Drafting Board automatically enlarged to fit graph; graph may extend outside viewable area)
   • Underneath that, it should have a header that says "Viewport Size"
     • then the radio buttons for small, medium, large. These should be made a little bit closer together, the same spacing as for the weight options.

[dondi]

I looked at the beta in its current state as of Saturday April 1 (which according to another issue is consistent with version 2.0.3) alongside the comment above, and have the following thoughts:

• Looks like item (1) is done, and that works for me, for the reason stated above.
• For (2) I think we've agreed that the Viewport and Drafting Board are distinct entities, and the beta I am seeing bears this out: When "Fixed" is chosen and the user is sufficiently zoomed out, the gray boundary around the graph is the Drafting Board. The Viewport is the darker gray area within the app layout itself. However we've also established that Drafting Board is more of a GenMAPP-specific term, and more intuitive alternatives may be available. Off the top of my head, phrases like "Graph Boundaries" or "Graph Bounding Box" come to mind. We might want to brainstorm over this.
  • Whatever alternative we come up with for "Drafting Board," I think the heading for the Fixed and Adaptive should become that alternative, like "Graph Boundary Options" or something like that. To communicate the distinction more clearly, perhaps we should draw the graph boundary and the viewport more distinctly that a gray shade, such as perhaps a dashed line for the graph boundary. When the graph boundary and the viewport are aligned, the dashed box can be flush against the viewport box, to communicate that they are in sync.
  • The dashed vs. solid visual can also be used in the options section, perhaps as little thumbnails, to strengthen the visual association that the dashed line indicates the graph boundary and the solid line indicates the viewport boundary.
  • The Viewport Size options strike me as pretty intuitive, although for numeric types, perhaps an actual dimension can provide additional guidance? (e.g., "Small (1104x648)").
  • Also for Viewport Size, the arbitrarily resizable window of the browser seems to motivate a fourth option, "Fit to Window (w x h)" —Choosing this option will lock the right and bottom of the viewport to the exact boundary of the browser window, and will resize as the window resizes.

Those are my "big picture" thoughts on seeing the beta scrolling and zooming functionality/user interface in its current state. I will scan the other issues to see if more focused thoughts come to mind.

[kdahlquist]

To respond to @dondi's comments:

• I like "Graph Bounding Box" as the substitute for "Drafting Board". I'm not sure that I like the idea of a dashed line, though. I think there is further discussion on issue #399, so I'll comment there on that. Ditto on the thumbnails. Let's leave off making icons until the last possible moment, in case we change our minds again.
• I agree with having the numbers labeling small, medium, large and would add that the units should be appended, i.e. pixels, even though it should be obvious (the scientist in me wants units labeled!)
• I really like the idea of the "Fit to Window" option, since I am one who is constantly maximizing windows, this really appeals to me.

[NAnguiano]

I think everything here is done as well and in PR #459. I am particularly enjoying the Fixed to Window option. Enough that I think it may be worth it to have that as the default option rather than the sizes.

[kdahlquist]

I'm looking at beta v2.0.14. Just a small issue in the labels:

Instead of (1104x648px), it should say (1104 X 648 pixels) and etc. for the others.

I think there's room for that.

[NAnguiano]

Like this? @kdahlquist

[kdahlquist]

Yes, exactly. Also, while you're at it, can you tighten up the vertical spacing? Right now when I'm using my laptop and got the menu bar flush with the top of my browser screen, the options for Normalization are off the bottom of my screen. If we tighten the vertical space, there's a chance it will all fit on one screen's worth of real estate.

[NAnguiano]

Found and fixed a bug where whenever the window was resized it would switch it to Fit to Window.. oops! As for that vertical spacing, @kdahlquist what do you think of this?

Here it is in reference with the UI, on my 13" laptop.

[kdahlquist]

Sure, looks good. Won't be able to give a final comment until I can see it "live". By the way, @anuvarsh, I'm pretty sure we don't need the "minimum" field for the normalization factor anymore. I don't know if it will mess up anything that she'd doing if @NAnguiano takes it out.

[NAnguiano]

I've made some changes to the structure of the sidebar in the code, so it may cause some merge conflicts regardless. I can remove it now, but it will ultimately be removed when @anuvarsh merges her fork in. I've made a PR with the visual changes as well as that bug fix.

[anuvarsh]

The minimum box isn't there anymore in my branch. The newest version of normalization has not been merged to beta yet because of all of the bugs. Once I issue a pull request the extra box will be gone.

[kdahlquist]

All open tasks from this issue have been moved to new issues #462, #463, #464. So, I'm closing this one.