Design and implement a user interface for accessing GRN data

[dondi]

With the emerging GRN database for this semester, we will need an end-user UI for navigating and accessing that database. The UI should allow a user to query our GRN data and to derive a visualizable network based on the query.

[Onariaginosa]

Proposed UI Note, for the top bar the Network tab would be before layout. I just put it where the old species tab was for convienience and visualization purposes

[dondi]

Some design notes:

• Move Network to the leftmost spot, replacing File
• The Open and Reload items in File now go to Network; plan on providing feedback (maybe on the right side of menu bar) indicating active source of what’s visible
• Factor in Demo as a third source of network data
• Move Export and Print items to a new Export menu that is positioned where Species is now
• Use the right side of the menu bar (where demo or file name currently appear) to give the user a status on what they’re looking at

[Onariaginosa]

Began creating the UI in GRNsight

Ran into issues with the top navbar implementation. On click the top nav collapses. This means that we can't actually search in the search bar. I am considering making the create a network a button that pops out to a modal, then both upper nav and side can look as follows:

Top Bar / Box Navigation:

• Network

  • Reload

  • Species (works in accordance with original species tab)

  • Load from Workbook (Title)

    • Open FIle (Button)

  • Load from Demo

    • Dropdown of all the demo network options

  • Create custom Network (Title)

    • Create Network (Opens a modal that lets you create using Network Database
      • Page 1
      • Species Selection (Only shows species in Database, so only yeast)
      • Dataset Selection
      • Page 2
        • Gene search bar
        • Genes added ( on click to remove)

  • Species (works in accordance with original species tab)

[dondi]

Try attaching a click handler to the input element and make it have the following:

event => {
  event.stopPropagation()
  // .....etc.
}

[dondi]

Proposed new hierarchy:

• Network Source
  • Demo
  • Open File…
  • Load from Database…
• Reload
• Species (informational only—eliminate warning as well)

We should also transition existing species functionalities out and possibly the Gene Page completely.

[dondi]

Also look into Pug’s include feature to make the overall source file more readable and have fewer copied elements

[Onariaginosa]

Created a bare bones version of this. Once I connect the Network database to the front end we should be able to test it out. All other functionality (reload, loading demos, opening a file) appears to be working in all of the Network sections, and will pretty up the css once a workable product is made

[dondi]

@dondi reviewed this with @Onariaginosa and overall it looks good, with some suggested tweaks for greater clarity. Primarily, in the sidebar version, we’ll try to make it clearer that Demo, File, and Database are “under” the Network Source heading (in the same vein as in the dropdown menu version). Also, to save space, the file extension guidance for “Open File” will be turned into a tooltip

[Onariaginosa]

Attached are the pictures of the UI. I made the changes above and began connecting the backend network database to the Create Network Modal. I have successfully connected the Network Source dropdown menu, and am in the process of connecting the search bar to select genes from said source.

[dondi]

Progress is looking good; we discovered a behavior that appears to be correct only on Firefox (i.e., selection of demo from sidebar select element) and @Onariaginosa will look into using the jQuery change event rather than click to see if that addresses things

Next up is continuing work on the database dialog

After the functionality is established, we’ll do a styling pass to ensure uniform padding, sizes, etc.

[dondi]

We found this page, which may have relevant information on select behavior: https://caniuse.com/?search=select

[dondi]

The feature looks nearly ready, just needing some wrap-up work:

• Minor styling tweaks just to line things up
• Updates to the testing document (@ahmad00m said he would help)
• Final pull request for review and eventual merge into beta
• Potential target of GRNsight v6.0.0 (with @Sarronnn’s fixes potentially) in early summer (or maybe even before May 16 😉)

[dondi]

@Onariaginosa is slated to present this work on Wednesday 4/20 4:30pm in Featherston 120. @Onariaginosa will seek to acquire a streaming link for those who can’t be there physically

[Onariaginosa]

@kdahlquist @dondi Streaming link obtained: https://lmula.zoom.us/j/87301578677

[dondi]

@Onariaginosa try revising your event handlers such that they invoke event.preventDefault() and/or event.stopPropagation(). Try some combination of those two calls in the event handler(s) and see if that makes a difference

[dondi]

If this doesn’t get resolved @dondi can take a deeper dive

[kdahlquist]

Feature has been implemented. Feature requests and bugs will be reported as new issues.