dondi
Menu bar expands unnecessarily when browser window resized for a PPI loaded from database
On GRNsight beta 7.2.2, I have the view set to "fit to window" and "restrict graph to viewport". If I resize the browser window, the menu bar gets fatter and impinges upon the viewport.
While the viewport should fit to the browser window, the menu bar and side panels are not required to do so.
This only appears to happen when I have loaded a PPI network from the database. Maybe it has something to do with the file information shown in the menu bar being very long when I load from the database.
Verified at meeting; one approach is to just drop “Network” from the label so that its length fits in the width allotted
Other possibilities:
- The menu bar is OK to extend past, and possibly its minimum width can just be extended
- There is a CSS property called
text-overflowwhich, in combination with other properties, will automatically truncate text with an ellipsis at the end. So if the menu bar is too narrow to fit all content in one line, the title can be made to truncate like “PPI Network (Yeastmine…”
@kdahlquist also notes the difference in behavior between GRN and PPI, and it was solved with GRN before. We should look for differences in implementation
As of now, this always happens when the size of the window is small enough for the weighted demos, Demo 2 and Demo 4, even without Restrict to Viewport and Fit to Window enabled.
Did some digging into this, and I can see the menu bar expanding like this for all of the Demos if the browser window is at a width in between when it disappears into the hidden menu bar or when it can all fit across one line. I'll try implementing the suggested text-overflow property before trying to just drop 'Network' from the menu bar.
Upon re-examining the issue, the preference instead is to have the menu bar scroll horizontally if it doesn’t have enough space. This is typically done with a combination of overflow-x: auto and other attributes that determine how elements’ widths are calculated
Quick correction: the overflow should apply to the entire app viewport and not just the menu bar. As such, the overflow property should apply to the overall app and there might be a min-width property required so that the app doesn’t always defer to the container dimensions for its size
Created a PR (PR #1256) that includes a fix - added some styling to set a minimum width that would line up the menu bar with the graph container beneath it, prevent it from expanding vertically when the demo file names were long, and added horizontal scrolling to the whole webpage for when the window gets too small.
Am having an issue with deploying GRNsight locally after pulling from beta - same issues I described here for issue #1213. Hoping to resolve this and have a new PR by next week.
Opened new PR (PR #1262) fixing menu bar over expanding issue!
And for documentation purposes incase it occurs again in the future, I was able to fix the local deployment issue through manually killing all running postgres servers.