Closed dondi closed 2 years ago
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
Some design notes:
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)
Load from Demo
Create custom Network (Title)
Species (works in accordance with original species tab)
Try attaching a click
handler to the input
element and make it have the following:
event => {
event.stopPropagation()
// .....etc.
}
Proposed new hierarchy:
We should also transition existing species functionalities out and possibly the Gene Page completely.
Also look into Pug’s include
feature to make the overall source file more readable and have fewer copied elements
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 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
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.
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.
We found this page, which may have relevant information on select
behavior: https://caniuse.com/?search=select
The feature looks nearly ready, just needing some wrap-up work:
@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
@kdahlquist @dondi Streaming link obtained: https://lmula.zoom.us/j/87301578677
@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
If this doesn’t get resolved @dondi can take a deeper dive
Feature has been implemented. Feature requests and bugs will be reported as new issues.
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.