Zoom behavior on the graph #71
Comments
stephanzwicknagl
added a commit
that referenced
this issue
Mar 11, 2024
In preparation for the zoom behavior, the animations are improved. The AnimationUpdater is responsible for keeping the connections between nodes responsive, i. e. the Edges and Arrows are updated when the nodes change. Nodes change due to expanding their height, expanding recursion or changing the width of the window. During those changes, the animation updater changes state, so that the Edges and Arrows rerender. Height: Whenever the nodes change height, the animationUpdater is started. It updates the bounding rect of the nodes in the Aminmation Updater's state variable until the stopAnimationUpdater is called. Width: a ResizeObserver is added, to handle changes to nodes, when they don't change height, but width. Resolves: #61 Contributes: #71
stephanzwicknagl
added a commit
that referenced
this issue
Mar 13, 2024
In preparation for the zoom behavior, the animations are improved. The AnimationUpdater is responsible for keeping the connections between nodes responsive, i. e. the Edges and Arrows are updated when the nodes change. Nodes change due to expanding their height, expanding recursion or changing the width of the window. During those changes, the animation updater changes state, so that the Edges and Arrows rerender. Height: Whenever the nodes change height, the animationUpdater is started. It updates the bounding rect of the nodes in the Aminmation Updater's state variable until the stopAnimationUpdater is called. Width: a ResizeObserver is added, to handle changes to nodes, when they don't change height, but width. Resolves: #61 Contributes: #71
stephanzwicknagl
added a commit
that referenced
this issue
Mar 13, 2024
During the height animations of the nodes and rows, an event listener is added, so there is no need for the Interval-based animation-Updater. The horizontal overflow of nodes is now handled by individual branches, instead of the whole row. This is done by moving the checkForOverflow function to the Node, while passing a reference to the branchSpace. This prepares for the zoom-able graph. Resolves: #61 Contributes: #71
stephanzwicknagl
added a commit
that referenced
this issue
Mar 13, 2024
Improve loading animation: This adds a new propery to a node, `loading`, which is set to `true` when the node is a stand-in while loading data from the backend. This is used to show a loading animation in the node. The uuid of the node is not used to identify this anymore. Minor fixes for the overflow of the nodes and asthetic changes are included. Contributes: #71
stephanzwicknagl
added a commit
that referenced
this issue
Mar 15, 2024
Lock Rersize Observer to AnimateHeight div directly instead of its child. This fixes the dynamics when toggling recursive nodes in combination with highlighted nodes. Pass the values to the animationUpdater directly, instead of picking the element from the window by its id. Improves performance Ensure Edge&Arrow Animation when dragging rows. Large nodes can now be collapsed after being expanded. Contributes: #71
stephanzwicknagl
added a commit
that referenced
this issue
Mar 21, 2024
Edges behind RowHeader are drawn within the CSSClass of the RowContainer This is option 1 of a selection of solutions for the Edges. Contributes: #71
stephanzwicknagl
added a commit
that referenced
this issue
Mar 25, 2024
Animate position using contexts Contributes: #71
stephanzwicknagl
added a commit
that referenced
this issue
Mar 25, 2024
stephanzwicknagl
added a commit
that referenced
this issue
Mar 26, 2024
Positioning the edges inside the row_container works now. It is the best compromise, between available options. The edges sit behind the row_header in the row_container and stay behind when dragging a row. They appear in front of other rows' row_headers, but behind the own row_header. The scroll works in conjunction with the graph zoom. The new scrollable container is the 'content' div. Scroll behavior follows the standard and the draggable list attribute needed to be updated. When ctrl is pressed, a transparent 'overlay' div appears on top of the graph. This div is used to capture the mouse wheel event and zoom the graph. The overlay is removed when the ctrl key is released. Contributes: #71
stephanzwicknagl
added a commit
that referenced
this issue
Mar 29, 2024
The whole graph can be shown, when the detail is expanded. This is done by managing the minimum zoom level in the map zoom handler. It sets when the detail is expanded. The user is then able to zoom out. When the detail is collapsed, the minimum zoom level is reset to the default value 1, while shifting the graph along to be centered. Contributes: #71
stephanzwicknagl
added a commit
that referenced
this issue
Mar 31, 2024
Now the shifting of the graph is triggered, even when the zoom level is <1. #71
stephanzwicknagl
added a commit
that referenced
this issue
Apr 4, 2024
Zoom into the graph by pressing `ctrl` key and scrolling the mouse wheel or the trackpad. Zooming widens rows, allowing more space for individual nodes. To pan along the graph, click and drag the graph while pressing the ctrl key. When ctrl is pressed, the `<MainWindow>` places a transparent 'overlay' div on top of the graph. It is managed by the MapInteraction component. Drag and zoom events are captured and handled by functions in the MainWindow. This div captures the zoom and drag events. The overlay is removed when the ctrl key is released. Scrolling along the graph works as before (without ctrl). The scrollable container is the 'content' div. Opening the detail sidebar gives new options to zoom and pan the graph. The zoom range is set so the whole graph can be seen with the sidebar. Also, zoomed graphs keep their positions when the sidebar is opened or closed. Edges and Arrows are updated on the zoomed graph, because the AnimationState includes the current zoom/pan state. In preparation for the zoom behavior, the animations were improved. The AnimationUpdater is responsible for keeping the connections between nodes responsive, i. e. the Edges and Arrows are updated when the nodes change. Nodes change due to expanding their height, expanding recursion or changing the width of the window. During those changes, the animation updater changes state, so that the Edges and Arrows rerender. To manage the performance, use the react hook useResizeObserver, which uses a single ResizeObserver for tracking all elements used by the hooks. The horizontal overflow (showMini) of nodes is now handled by individual branches, instead of the whole row. This is done by moving the checkForOverflow function to the Node, while passing a reference to the branchSpace. Minor fix to improve loading animation: This adds a new propery to a node, `loading`, which is set to `true` when the node is a stand-in while loading data from the backend. This is used to show a loading animation in the node. The uuid of the node is not used to identify this anymore. Minor fix: Large nodes can now be collapsed after being expanded. Minor fix: Improve the zIndex positioning of the edges Positioning the edges inside the row_container works now. It is the best compromise, between available options. The edges sit behind the row_header in the row_container and stay behind when dragging a row. They appear in front of other rows' row_headers, but behind the own row_header. Contributes: #71 Contributes: #61
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Instead of increasing the size of elements on the graph, it should be possible to zoom into parts of the graph by ctrl+scrolling or pinching.
If there are many branches of the graph, so that nodes are just represented as dots, zooming into parts of the graph should reveal the dots of some branches while other branches overflow to parts off the screen.
This could be used to finally rewrite the AnimationUpdater, which is known to have the issue of constantly reloading ( #61 ).
The text was updated successfully, but these errors were encountered: