Create collapsible sections and organize side bar

[kdahlquist]

As discussed in the meeting on 10/2, I am opening a new issue for organizing the side bar and creating collapsible sections for all of the options we have. As a result of opening this issue, I'm going to close some related ones that will fit under this umbrella, like #608, hiding/showing node coloring information.

Should edge weights and normalization factor be available before a graph is loaded or when unweighted graph is loaded?? #533 is another issue that this will address.

[dondi]

• Group related sidebar settings within a single collapsible box (like the GRNsight docs)
• Instead of hiding inapplicable controls (when encountered), automatically collapse and disable them when inapplicable

[mihirsamdarshi]

This is done in the sidebar redesign PR (#807) and is ready to be merged. I can show a demo before merge today. There are definitely other design decisions to make, but the organization and panels have been added.

[mihirsamdarshi]

Fix font size in Firefox, and sidebar width

[kdahlquist]

I reviewed the new sidebar layout on Firefox on Windows and have the following observations:

• Layout section
  • "Force Graph" and "Grid Layout" are not centered in their buttons
  • When the "Link Distance" value hits 3 or 4 digits, the number rolls over to the next line.
  • There are scroll bars in this section
• Node section
  • "Node Coloring" should just say "Node" for this section to be consistent with the menu
  • I can't test or look at this because node coloring is not working on beta v4.0.8 Node coloring not functional in beta v4.0.8 #817
• Edge section
  • has scroll bars
  • Radio buttons and check boxes are on different lines than their labels
  • Probably don' t need the empty line between the Edge Weight Normalization Factor label and the next line that shows the range and field box.
  • Can we make the "Set" and "Reset Factor" boxes be the same size?
• View section
  • has scroll bars

[dondi]

It was noted that these issues may have varying contexts; the ones identified were:

• Scroll bars always present vs. not
• Different browsers
• Different platforms

An initial pass that identifies which issue pertains to which context can help organize what's required to fix which.

[dondi]

OK I've made a pass and took a stab at the following issues:

• Layout section
  • "Force Graph" and "Grid Layout" are not centered in their buttons
  • When the "Link Distance" value hits 3 or 4 digits, the number rolls over to the next line.
  • There are scroll bars in this section
• Node section
  • "Node Coloring" should just say "Node" for this section to be consistent with the menu
• Edge section
  • has scroll bars
  • Radio buttons and check boxes are on different lines than their labels
  • Probably don' t need the empty line between the Edge Weight Normalization Factor label and the next line that shows the range and field box.
    • I pulled the “(0.0001-1000)” up to the label but couldn’t keep the input field on the same line so I just dropped it below as a full-width field. We can consider other options if this doesn’t work out well.
    • The normalization factor field also displayed a spurious error message in Firefox because the granularity of the field was set to single integer steps. I set it to a step of 0.0001 to eliminate that error message.
  • Can we make the "Set" and "Reset Factor" boxes be the same size?
• View section
  • has scroll bars

As noted, the “Node” section cannot be activated because graphs aren’t loading correctly. So next up will be a look at #817, then I’ll come back here once that loading function is restored.

[kdahlquist]

Verified that all changes above reported by @dondi are seen in Firefox and Chrome on Windows.

[dondi]

The issues with #817 (at least whatever was blocking this issue) appear to be resolved, and so the Node collapsible section can now be looked at. Revisions can now be made on this section after it has been reviewed.

My notes so far are as follows:

• Add more vertical space between the Top Dataset label and the Disable Node Coloring button
• Bottom Dataset label can also use a little bit more vertical space, so that the combination of the label, the expression dataset dropdown, and the average checkbox look more cohesive as a group
• Reformat Log Fold Change Max Value label/input/button to look more like the Edge Weight Normalization Factor controls, except the input and button can probably fit on one line since there’s only one button

[kdahlquist]

Agreed to the notes in the previous comment. Now looking at the Node and Edge sections next to each other, does it seem strange that we have a button for Enable/Disable Node Coloring and a Check box for Enable/Disable edge coloring? Perhaps a check box would be more clear for both?

To a lesser extent, radio buttons might be better for the Force Graph versus Grid layout buttons at the top. Thoughts?

[dondi]

I chipped away a bit at the Node section but didn't go far enough to merit a beta release. The work snowballed a bit: on the theme of keeping things consistent, I spotted some asymmetries with the menu bar:

• Grid Layout comes first in menu bar but is the option on the right in sidebar—regarding radio buttons, I came to interpret Force Graph and Grid Layout as action buttons because there isn't a strict dichotomy between the two: in both cases, one can then manually drag nodes to "fix" their position, thus no longer strictly falling into force graph vs. grid layout. Plus one can actually think of grid layout as an automated manual drag that aligns anything…I’m OK with these as buttons for now
• The above one is pretty straightforward and is already done; however the asymmetry that created more work is this:
  • The Node menu has a single toggle-able choice labeled "Disable Node Coloring"—I'm looking to change that to "Enable Node Coloring" in order to align with the checkbox (plus it’s sort of a double-negative to have an item labeled "Disable" that is then either checked or unchecked)
  • However, the Edge menu has two choices for edge weights, one apiece for enable and disable; plus the labeling isn't the same ("Edge Coloring" in sidebar but "Formatting of Edges" in menu)

So the scope here got expanded to reconciling these. I am thinking of unifying as a single menu item that can be checked or unchecked—so it works in the same way as the checkboxes in the sidebar. We can discuss if there are objections to that choice.

[dondi]

I’ve finished making the node coloring and edge coloring controls more consistent with each other (now both checkboxes in the sidebar, now both checkable items in the menu).

• Add more vertical space between the Top Dataset label and the Disable Node Coloring button (now the Enable Node Coloring checkbox)
• Bottom Dataset label can also use a little bit more vertical space, so that the combination of the label, the expression dataset dropdown, and the average checkbox look more cohesive as a group
• Reformat Log Fold Change Max Value label/input/button to look more like the Edge Weight Normalization Factor controls, except the input and button can probably fit on one line since there’s only one button

These have been placed on beta and as far as I can tell, this should cover the scope of this issue. I think there are additional priority 0.5 or 1 issues that relate to user interface, so we can move on to those if it’s determined that the specific notes from this one have been addressed.

[kdahlquist]

This all looks good to me. Closing.