Merge branch 'dev' of https://github.com/potassco/viasp into BUG/robots

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

@@ -4,6 +4,7 @@ import Xarrow from "react-xarrows";
 import { useAnimationUpdater } from "../contexts/AnimationUpdater";
 import PropTypes from 'prop-types'
 import { v4 as uuidv4 } from 'uuid';
+import debounce from "lodash/debounce";
 
 
 export function Arrows() {
@@ -54,9 +55,14 @@ export function Arrows() {
             });
     }, [highlightedSymbol]);
 
+    const debouncedCalculateArrows = React.useMemo(
+        () => debounce(() => setArrows(calculateArrows()), 10),
+        [calculateArrows]
+    )
+
     React.useEffect(() => {
-        setArrows(calculateArrows());
-    }, [animationState, highlightedSymbol, calculateArrows]);
+        debouncedCalculateArrows();
+    }, [animationState, highlightedSymbol, debouncedCalculateArrows]);
 
     return (
         <div className="arrows_container">

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

@@ -4,19 +4,17 @@ import * as Constants from "../constants";
 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';
-import debounce from 'lodash/debounce';
-
+import {useDebouncedAnimateResize} from "../hooks/useDebouncedAnimateResize";
 
 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 branchSpaceRef = React.useRef(null);
     const rowbodyRef = React.useRef(null);
-    const {setAnimationState} = useAnimationUpdater();
-    const setAnimationStateRef = React.useRef(setAnimationState);
+    const transformationIdRef = React.useRef("-1");
+
+    useDebouncedAnimateResize(rowbodyRef, transformationIdRef);
 
     React.useEffect(() => {
         if (
@@ -36,25 +34,7 @@ export function Facts() {
         }
     }, [currentDragged]);
 
-    const animateResize = React.useCallback(() => {
-        const setAnimationState = setAnimationStateRef.current;
-        const element = rowbodyRef.current;
-        setAnimationState((oldValue) => ({
-            ...oldValue,
-            "-1": {
-                ...oldValue["-1"],
-                width: element.clientWidth,
-                height: element.clientHeight,
-                top: element.offsetTop,
-                left: element.offsetLeft,
-            },
-        }));
-    }, []);
 
-    const debouncedAnimateResize = React.useMemo(() => {
-        return debounce(animateResize, Constants.DEBOUNCETIMEOUT);
-    }, [animateResize]);
-    useResizeObserver(rowbodyRef, debouncedAnimateResize);
 
     if (fact === null) {
         return (

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

@@ -20,6 +20,7 @@ import useResizeObserver from '@react-hook/resize-observer';
 import {findChildByClass} from '../utils';
 import debounce from 'lodash.debounce';
 import * as Constants from '../constants';
+import {useDebouncedAnimateResize} from '../hooks/useDebouncedAnimateResize';
 
 function any(iterable) {
     for (let index = 0; index < iterable.length; index++) {
@@ -188,6 +189,35 @@ function NodeContent(props) {
     }
     useResizeObserver(setContainerRef, visibilityManager);
 
+    // const nodeUuidRef = React.useRef(node.uuid);
+    // const {setAnimationState} = useAnimationUpdater();
+    // const setAnimationStateRef = React.useRef(setAnimationState);
+    // const animateResize = React.useCallback((entry) => {
+    //     const nodeUuid = nodeUuidRef.current;
+    //     const setAnimationState = setAnimationStateRef.current;
+    //     setAnimationState((oldValue) => ({
+    //         [nodeUuid]: {
+    //             ...oldValue[nodeUuid],
+    //             width: entry.contentRect.width,
+    //             height: entry.contentRect.height,
+    //             top: entry.contentRect.top,
+    //             left: entry.contentRect.left,
+    //         },
+    //     }));
+    // }, []);
+
+    // const debouncedAnimateResize = React.useCallback(
+    //     (entry) => {
+    //         return debounce(
+    //             () => animateResize(entry),
+    //             Constants.DEBOUNCETIMEOUT
+    //         );
+    //     },
+    //     [animateResize]
+    // );
+    // useResizeObserver(setContainerRef, debouncedAnimateResize);
+
+
     const classNames2 = `set_value`;
     const renderedSymbols = contentToShow
         .filter((symbol) => symbolShouldBeShown(symbol))
@@ -403,13 +433,16 @@ export function Node(props) {
     const {dispatch: dispatchShownNodes} = useShownNodes();
     const classNames = useHighlightedNodeToCreateClassName(node);
     const [height, setHeight] = React.useState(Constants.minimumNodeHeight);
-    const {animationState, setAnimationState} = useAnimationUpdater();
-    const setAnimationStateRef = React.useRef(setAnimationState);
+    const {animationState} = useAnimationUpdater();
     const {setShownDetail} = useShownDetail();
     const dispatchShownNodesRef = React.useRef(dispatchShownNodes);
     const nodeuuidRef = React.useRef(node.uuid);
     const animateHeightRef = React.useRef(null);
 
+    useDebouncedAnimateResize(
+        animateHeightRef, nodeuuidRef
+    );
+
     const notifyClick = (node) => {
         setShownDetail(node.uuid);
     };
@@ -422,17 +455,6 @@ export function Node(props) {
         };
     }, []);
 
-    React.useEffect(() => {
-        const setAnimationState = setAnimationStateRef.current;
-        const nodeuuid = nodeuuidRef.current;
-        setAnimationState((oldValue) => ({...oldValue, [nodeuuid]: null}));
-        return () => {
-            setAnimationState((v) => {
-                const {[nodeuuid]: _, ...rest} = v;
-                return rest;
-            });
-        };
-    }, []);
 
     React.useEffect(() => {
         setIsCollapsibleV(height > Constants.standardNodeHeight);

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

@@ -13,13 +13,9 @@ import {MAPZOOMSTATE, TRANSFORMATION, TRANSFORMATIONWRAPPER} from '../types/prop
 import {ColorPaletteContext} from '../contexts/ColorPalette';
 import {useShownRecursion} from '../contexts/ShownRecursion';
 import {make_default_nodes} from '../utils';
-import useResizeObserver from '@react-hook/resize-observer';
-import {
-    AnimationUpdater,
-    useAnimationUpdater,
-} from '../contexts/AnimationUpdater';
+import {AnimationUpdater} from '../contexts/AnimationUpdater';
 import {DragHandle} from './DragHandle.react';
-import debounce from 'lodash/debounce';
+import {useDebouncedAnimateResize} from '../hooks/useDebouncedAnimateResize';
 
 
 export class RowTemplate extends React.Component {
@@ -203,7 +199,6 @@ RowTemplate.propTypes = {
 
 export function Row(props) {
     const {transformation, dragHandleProps, transform} = props;
-
     const {
         state: {transformations, transformationNodesMap, isSortable},
     } = useTransformations();
@@ -213,8 +208,8 @@ export function Row(props) {
     const handleRef = React.useRef(null);
     const [shownRecursion, ,] = useShownRecursion();
     const transformationIdRef = React.useRef(transformation.id);
-    const {setAnimationState} = useAnimationUpdater();
-    const setAnimationStateRef = React.useRef(setAnimationState);
+
+    useDebouncedAnimateResize(rowbodyRef, transformationIdRef);
 
     React.useEffect(() => {
         if (headerRef.current && handleRef.current) {
@@ -223,20 +218,6 @@ export function Row(props) {
         }
     }, []);
 
-    React.useEffect(() => {
-        const setAnimationState = setAnimationStateRef.current;
-        const transformationId = transformationIdRef.current;
-        setAnimationState((oldValue) => ({
-            ...oldValue,
-            [transformationId]: null,
-        }));
-        return () => {
-            setAnimationState((v) => {
-                const {[transformationId]: _, ...rest} = v;
-                return rest;
-            });
-        };
-    }, []);
 
     React.useEffect(() => {
         if (
@@ -247,25 +228,6 @@ export function Row(props) {
         }
     }, [transformationNodesMap, transformation.id]);
 
-    const animateResize = React.useCallback(() => {
-        const transformationId = transformationIdRef.current;
-        const setAnimationState = setAnimationStateRef.current;
-        const element = rowbodyRef.current;
-        setAnimationState((oldValue) => ({
-            [transformationId]: {
-                ...oldValue[transformationId],
-                width: element.clientWidth,
-                height: element.clientHeight,
-                top: element.offsetTop,
-                left: element.offsetLeft,
-            },
-            }));
-    }, []);
-
-    const debouncedAnimateResize = React.useCallback(() => {
-        return debounce(animateResize, Constants.DEBOUNCETIMEOUT);
-    }, [animateResize]);
-    useResizeObserver(rowbodyRef, debouncedAnimateResize);
 
     const showNodes =
         transformations.find(

frontend/src/lib/hooks/useDebouncedAnimateResize.js

@@ -0,0 +1,45 @@
+import React from "react";
+import * as Constants from "../constants";
+import debounce from "lodash/debounce";
+import { useAnimationUpdater } from "../contexts/AnimationUpdater";
+import useResizeObserver from '@react-hook/resize-observer';
+
+
+export const useDebouncedAnimateResize = (elementRef, elementIdRef) => {
+    const {setAnimationState} = useAnimationUpdater();
+    const setAnimationStateRef = React.useRef(setAnimationState);
+    const animateResize = React.useCallback(
+        (key, entry) => {
+            const setAnimationState = setAnimationStateRef.current;
+            setAnimationState((oldValue) => ({
+                ...oldValue,
+                [key]: entry.contentRect,
+            }));
+    }, []);
+
+    const debouncedAnimateResize = React.useMemo(
+        () => debounce((key, entry) => animateResize(key, entry), Constants.DEBOUNCETIMEOUT),
+        [animateResize]
+    );
+
+    React.useEffect(() => {
+        const setAnimationState = setAnimationStateRef.current;
+        const elementId = elementIdRef.current;
+        setAnimationState((oldValue) => ({
+            ...oldValue,
+            [elementId]: null,
+        }));
+        return () => {
+            setAnimationState((v) => {
+                const {[elementId]: _, ...rest} = v;
+                return rest;
+            });
+        };
+    }, [elementIdRef]);
+
+    useResizeObserver(elementRef, (entry) =>
+        debouncedAnimateResize(elementIdRef.current, entry)
+    );
+
+
+};