Improve dynamic Animations and height expansion

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

frontend/src/lib/components/Arrows.react.js

@@ -3,8 +3,7 @@ import { useHighlightedSymbol } from "../contexts/HighlightedSymbol";
 import Xarrow from "react-xarrows";
 import { useAnimationUpdater } from "../contexts/AnimationUpdater";
 import PropTypes from 'prop-types'
-import {getRandomKey} from '../utils'
-
+import { v4 as uuidv4 } from 'uuid';
 
 
 export function Arrows() {
@@ -43,47 +42,7 @@ export function Arrows() {
             .map((arrow) => {
                 return (
                     <Xarrow
-                        key={getRandomKey()}
-                        start={arrow.src}
-                        end={arrow.tgt}
-                        startAnchor={'auto'}
-                        endAnchor={'auto'}
-                        color={arrow.color}
-                        strokeWidth={2}
-                        headSize={5}
-                        zIndex={10}
-                    />
-                );
-            });
-        return highlightedSymbol
-            .map((arrow) => {
-                const suffix1 = `_${
-                    document.getElementById(arrow.src + '_main')
-                        ? 'main'
-                        : 'sub'
-                }`;
-                const suffix2 = `_${
-                    document.getElementById(arrow.tgt + '_main')
-                        ? 'main'
-                        : 'sub'
-                }`;
-                return {
-                    src: arrow.src + suffix1,
-                    tgt: arrow.tgt + suffix2,
-                    color: arrow.color,
-                };
-            })
-            .filter((arrow) => {
-                // filter false arrows that are not in the DOM
-                return (
-                    document.getElementById(arrow.src) &&
-                    document.getElementById(arrow.tgt)
-                );
-            })
-            .map((arrow) => {
-                return (
-                    <Xarrow
-                        key={getRandomKey()}
+                        key={uuidv4()}
                         start={arrow.src}
                         end={arrow.tgt}
                         startAnchor={'auto'}

frontend/src/lib/components/Facts.react.js

@@ -3,12 +3,19 @@ import React from "react";
 import {Node} from "./Node.react";
 import {useTransformations} from "../contexts/transformations";
 import {make_default_nodes} from "../utils";
+import {useAnimationUpdater} from "../contexts/AnimationUpdater";
+import useResizeObserver from '@react-hook/resize-observer';
+
 
 export function Facts() {
     const { state: {currentDragged, transformationNodesMap} } = useTransformations();
     const [fact, setFact] = React.useState(make_default_nodes()[0]);
     const [style, setStyle] = React.useState({opacity: 1.0});
     const opacityMultiplier = 0.8;
+    const branchSpaceRef = React.useRef(null);
+    const rowbodyRef = React.useRef(null);
+    const {animationUpdater} = useAnimationUpdater();
+    const animationUpdaterRef = React.useRef(animationUpdater);
 
     React.useEffect(() => {
         if (
@@ -28,17 +35,44 @@ export function Facts() {
         }
     }, [currentDragged, opacityMultiplier]);
 
+    const animateResize = React.useCallback(() => {
+        const animationUpdater = animationUpdaterRef.current;
+        const element = rowbodyRef.current;
+        animationUpdater(-1, {
+            width: element.clientWidth,
+            height: element.clientHeight,
+            top: element.offsetTop,
+            left: element.offsetLeft,
+        });
+    }, []);
+    useResizeObserver(rowbodyRef, animateResize);
+
     if (fact === null) {
         return (
             <div className="row_container">
             </div>
         )
     }
-    return <div className="row_row" style={style}><Node 
+    return (
+    <div 
+        className="row_row" 
+        style={style}
+        ref={rowbodyRef}
+    >
+        <div
+            className="branch_space"
+            key={fact.uuid}
+            style={{flex: '0 0 100%'}}
+            ref={branchSpaceRef}
+        >
+            <Node 
                 key={fact.uuid} 
                 node={fact}
-                showMini={false}/>
+                isSubnode={false}
+                branchSpace={branchSpaceRef}/>
         </div>
+    </div>
+    );
 }
 
 Facts.propTypes = {}