front: intervals editor, redraw the PR when the window is resized and…

… display them above the main component
OpenRailAssociation · Aug 9, 2023 · 33ec7ba · 33ec7ba
1 parent 2f3bc09
commit 33ec7ba
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 30 deletions.
diff --git a/front/src/common/IntervalsDataViz/data.ts b/front/src/common/IntervalsDataViz/data.ts
@@ -620,7 +620,7 @@ export function cropOperationPointsForDatavizViewbox(
   wrapper: React.MutableRefObject<HTMLDivElement | null>,
   fullLength: number
 ): Array<OperationalPoint & { positionInPx: number }> {
-  if (wrapper.current !== null) {
+  if (wrapper.current !== null && fullLength > 0) {
     const wrapperWidth = wrapper.current.offsetWidth;
     return (
       [...operationalPoints]
@@ -634,7 +634,8 @@ export function cropOperationPointsForDatavizViewbox(
           const lengthToDisplay = currentViewBox
             ? operationalPoint.position - currentViewBox[0]
             : operationalPoint.position;
-          const positionInPx = (lengthToDisplay * wrapperWidth) / fullLength;
+          // subtract 2px for the display
+          const positionInPx = (lengthToDisplay * wrapperWidth) / fullLength - 2;
           return {
             ...operationalPoint,
             positionInPx,

diff --git a/front/src/common/IntervalsDataViz/dataviz.tsx b/front/src/common/IntervalsDataViz/dataviz.tsx
@@ -123,46 +123,61 @@ export const LinearMetadataDataviz = <T extends { [key: string]: any }>({
    * When data change
    * => we recompute the data for the viz
    * => we recompute the full length of the displayed data.
-   */
-  useEffect(() => {
-    const nData = cropForDatavizViewbox(data, viewBox);
-    setData4viz(nData);
-    setFullLength((last(nData)?.end || 0) - (head(nData)?.begin || 0));
-  }, [data]);
-
-  /**
-   * When operationalPoints or fullLength change
    * => we recompute the operationalPoints4viz
    */
   useEffect(() => {
+    const nData = cropForDatavizViewbox(data, viewBox);
+    const nFullLength = (last(nData)?.end || 0) - (head(nData)?.begin || 0);
     const nOperationalPoints = cropOperationPointsForDatavizViewbox(
       operationalPoints,
       viewBox,
       wrapper,
-      fullLength
+      nFullLength
     );
+    setData4viz(nData);
+    setFullLength(nFullLength);
     setOperationalPoints4viz(nOperationalPoints);
+  }, [data, viewBox]);
+
+  /**
+   * When operationalPoints change
+   * => we recompute the operationalPoints4viz
+   */
+  useEffect(() => {
+    if (fullLength > 0) {
+      const nOperationalPoints = cropOperationPointsForDatavizViewbox(
+        operationalPoints,
+        viewBox,
+        wrapper,
+        fullLength
+      );
+      setOperationalPoints4viz(nOperationalPoints);
+    }
   }, [operationalPoints, fullLength]);
 
   /**
-   * When viewbox changes
-   * => we recompute the data for the viz
-   * => we recompute the full length of the displayed data.
+   * When the window is resized horizontally
    * => we recompute the operationalPoints4viz
    */
   useEffect(() => {
-    const nData = cropForDatavizViewbox(data, viewBox);
-    const nFullLength = (last(nData)?.end || 0) - (head(nData)?.begin || 0);
-    const nOperationalPoints = cropOperationPointsForDatavizViewbox(
-      operationalPoints,
-      viewBox,
-      wrapper,
-      nFullLength
-    );
-    setData4viz(nData);
-    setFullLength(nFullLength);
-    setOperationalPoints4viz(nOperationalPoints);
-  }, [viewBox]);
+    const debounceResize = () => {
+      let debounceTimeoutId;
+      clearTimeout(debounceTimeoutId);
+      debounceTimeoutId = setTimeout(() => {
+        const nOperationalPoints = cropOperationPointsForDatavizViewbox(
+          operationalPoints,
+          viewBox,
+          wrapper,
+          fullLength
+        );
+        setOperationalPoints4viz(nOperationalPoints);
+      }, 15);
+    };
+    window.addEventListener('resize', debounceResize);
+    return () => {
+      window.removeEventListener('resize', debounceResize);
+    };
+  }, [operationalPoints, viewBox, wrapper, fullLength]);
 
   /**
    * When the wrapper div change
@@ -265,6 +280,32 @@ export const LinearMetadataDataviz = <T extends { [key: string]: any }>({
 
   return (
     <div className={cx('linear-metadata-visualisation')}>
+      <div
+        className={cx(
+          'data',
+          viewBox !== null && draginStartAt && 'dragging',
+          resizing && 'resizing',
+          (viewBox === null || viewBox[0] === 0) && 'start-visible',
+          (viewBox === null || viewBox[1] === last(data)?.end) && 'end-visible'
+        )}
+        style={{ height: '30px' }}
+      >
+        {/* Display the operational points */}
+        {operationalPoints4viz.map((operationalPoint) => (
+          <div
+            key={`op-${operationalPoint.id}`}
+            className="operational-point"
+            style={{
+              position: 'absolute',
+              height: '50px',
+              left: `${operationalPoint.positionInPx}px`,
+              borderLeft: '2px dashed #a0a0a0',
+            }}
+          >
+            <p>{operationalPoint.name}</p>
+          </div>
+        ))}
+      </div>
       <div
         id="linear-metadata-dataviz-content"
         ref={wrapper}
@@ -328,9 +369,7 @@ export const LinearMetadataDataviz = <T extends { [key: string]: any }>({
               left: `${operationalPoint.positionInPx}px`,
               borderLeft: '2px dashed #a0a0a0',
             }}
-          >
-            <p>{operationalPoint.name}</p>
-          </div>
+          />
         ))}
 
         {/* Create one div per item for the X axis */}