Imrove graph zoom resize observer

Now the shifting of the graph is triggered, even when the zoom level
is <1.

#71

frontend/src/lib/main/ViaspDash.react.js

@@ -49,7 +49,7 @@ import {
 import DraggableList from 'react-draggable-list';
 import {MapInteraction} from 'react-map-interaction';
 import useResizeObserver from '@react-hook/resize-observer';
-
+import useWindowResizeObserver from '../hooks/windowResizeObserver';
 
 function postCurrentSort(backendURL, hash) {
     return fetch(`${backendURL('graph/sorts')}`, {
@@ -353,37 +353,31 @@ function MainWindow(props) {
         handleMapChangeOnDetailChange();
     }, [shownDetail, handleMapChangeOnDetailChange]);
 
-    const prevDetailWidth = React.useRef(0);
     const animateResize = React.useCallback(() => {
         if (shownDetail) {
             setMapShiftValue((oldShiftValue) => {
-                const rowWidth =
-                    contentDivRef.current.clientWidth * oldShiftValue.scale;
+                const contentWidth = contentDivRef.current.clientWidth;
+                const detailWidth = detailOpenWidthRatio * contentWidth;
+                const rowWidth = contentWidth * oldShiftValue.scale;
                 const distanceOfRightSideOfGraphFromRightBorder =
-                    rowWidth -
-                    contentDivRef.current.clientWidth +
-                    oldShiftValue.translation.x;
+                    contentWidth - rowWidth - oldShiftValue.translation.x;
                 if (
-                    distanceOfRightSideOfGraphFromRightBorder >=
-                    detailOpenShiftThreshold * contentDivRef.current.clientWidth
+                    detailWidth - distanceOfRightSideOfGraphFromRightBorder >=
+                    detailOpenShiftThreshold * contentWidth
                 ) {
                     return {...oldShiftValue};
                 }
-                const newDetailWidth = detailOpenWidthRatio * contentDivRef.current.clientWidth;
                 return {
                     ...oldShiftValue,
                     translation: {
                         ...oldShiftValue.translation,
                         x:
-                            prevDetailWidth.current === 0
-                                ? oldShiftValue.translation.x
-                                : oldShiftValue.translation.x -
-                                  (newDetailWidth - prevDetailWidth.current),
+                            contentWidth -
+                            rowWidth -
+                            detailWidth,
                     },
                 };
             });
-            prevDetailWidth.current =
-                detailOpenWidthRatio * contentDivRef.current.clientWidth;
         }
     }, [shownDetail, detailOpenWidthRatio]);
     useResizeObserver(contentDivRef, animateResize);