dondi / GRNsight

Web app and service for modeling and visualizing gene regulatory networks.
http://dondi.github.io/GRNsight
BSD 3-Clause "New" or "Revised" License
17 stars 8 forks source link

Checking restrict graph to viewport makes the D-pad and zoom slider on the viewport disappear #1083

Closed kdahlquist closed 5 months ago

kdahlquist commented 8 months ago

Beta 7.0.8

ceciliazaragoza commented 8 months ago

@kdahlquist I was able to remove the D-pad disappearing issue. Also, in the code it seems like the disappearing was expected behavior since the user should be able to view all the nodes in the graph without moving around the graph. Should I also make it so that the user can use the D-pad and zoom slider to navigate around the graph and allow the user to use their cursor to navigate around the graph?

kdahlquist commented 8 months ago

@ceciliazaragoza, I'm not sure what you mean by "the user can use the D-pad and zoom slider to navigate around the graph and allow the user to use their cursor to navigate around the graph". Currently, you can "grab" the whole graph and move it around with a mouse click and drag. I think the issue is that sometimes the D-pad is there and sometimes it isn't. Maybe we need a check box somewhere to enable/disable the D-pad/zoom sliders, so it is under user control and it's clear when it is enabled or not.

kdahlquist commented 8 months ago

Oh, I see that when "Restrict graph to viewport" is checked, you can no longer move the graph with your mouse. We should still be able to move the graph around. We should be able to move it as long as it doesn't go outside the viewport.

dondi commented 7 months ago

PR has been merged and deployed to beta and feedback has been provided on restrict-graph-to-viewport behavior; the notion is that the graph is the object itself and the d-pad + zoom control that object within the visible rectangle of the browser. @dondi and @ceciliazaragoza will workshop through the full suite of behaviors sometime this week

dondi commented 6 months ago

The remaining issue appears to be restriction under < 1 zoom; @dondi pointed out that this is mathematically the composition of matrices representing translation and scale; @ceciliazaragoza can experiment with that then also plan to meet with @dondi to look directly at how the thresholds are computed

One of many possible references for 2D transforms: https://web.cse.ohio-state.edu/~shen.94/681/Site/Slides_files/transformation_review.pdf

ceciliazaragoza commented 6 months ago

I met with @dondi last week and he helped me understand how to calculate the borders of the viewport, so now stay within the viewport at all levels of zoom. Now working on clamping the nodes so that the nodes do not move outside of the viewport.

ceciliazaragoza commented 5 months ago

I met with @dondi last week to ensure that size of flexBox is being calculated correctly. When move graph to the left, the right bounding border is too wide and left border is too narrow, so need to recalculate right border and take into consideration when left border is in view. When move graph to the right and the right border is in view, sometimes the nodes move past the left border when moving on their own with force graph. Will need to use the xTranslation and graphZoom to see when the left or right borders are in view. Also need to alter bounds so that clamp graph correctly when zoomed out less than 100%.

dondi commented 5 months ago

@ceciliazaragoza is homing in on the final values of the thresholds; somewhere along the way, we’ll plan a live demo with @kdahlquist to confirm/calibrate the expected behaviors of the restrict-to-viewport feature

ceciliazaragoza commented 5 months ago

I committed this morning but did not mention the Issue number. I can now manually change the size of the boundingRectangle, but I cannot get it to match the borders of the viewport consistently. I may consider restructuring graph so that the graph is bounded by the viewport svg itself.

kdahlquist commented 5 months ago

Just make sure that when the restrict graph to viewport is unchecked that the graph would then not be bounded by the viewport.

ceciliazaragoza commented 5 months ago

After meeting with @dondi and @kdahlquist today, I fixed styling and solved one edge case. Edge case was when the graph was not moving, it could exceed bounds when dragged, so adjusted viewportBoundsMoveDrag to check when reach bounds when dragged. When restrict graph to viewport all nodes, not edges, are restricted to viewport. Graph can be dragged, zoomed, and moved with Dpad as well.

kdahlquist commented 5 months ago

Confirmed fixed in beta 7.0.15!