wip show only dashcam images in range

frontend/src/Components/RoadDetails/ImageGallery.tsx

@@ -3,14 +3,19 @@ import ImageZoom from './ImageAbleZoom';
 import { IImage } from '../../models/path';
 import { getImagesForASurvey, getImagesForWays } from '../../queries/images';
 import { useParams } from 'react-router-dom';
+import { IRangeForDashCam } from '../../models/models';
 
+interface Props {
+  /** The distance from left to right displayed on surface images to display nearby dashcam images*/
+  rangeDashCamImages?: IRangeForDashCam | null;
+}
 /**
  * React functional component for the Image Gallery of Dash Camera image.
  * Image gallery is for show the real road image, and user can scroll to check
  *
  * @author: Chen, Lyons
  */
-const ImageGallery: React.FC = () => {
+const ImageGallery: React.FC<Props> = ({ rangeDashCamImages }) => {
   /** The id and type of the object to display (in the url) */
   const { id, type } = useParams();
 
@@ -34,14 +39,32 @@ const ImageGallery: React.FC = () => {
 
     if (type === 'surveys') {
       getImagesForASurvey(id, true, (images) => {
-        setCameraImages(images);
+        setCameraImages(
+          images.filter((image) => {
+            console.log('santi0', rangeDashCamImages);
+            if (rangeDashCamImages === undefined || rangeDashCamImages === null)
+              return true;
+            return (
+              image.distance_way >=
+                (rangeDashCamImages.minRange - 5 > 0
+                  ? rangeDashCamImages.minRange - 5
+                  : 0) &&
+              image.distance_way <=
+                (rangeDashCamImages.maxRange + 5 <
+                rangeDashCamImages.maxRangeSurvey
+                  ? rangeDashCamImages.maxRange + 5
+                  : rangeDashCamImages.maxRangeSurvey)
+            );
+          }),
+        );
+        console.log('santiVIVA', cameraImages);
       });
     } else if (type === 'paths') {
       getImagesForWays(id.split(','), true, (images) => {
         setCameraImages(images);
       });
     }
-  }, [id]);
+  }, [id, rangeDashCamImages]);
 
   // Function to open the pop-up
   const openImageInPopup = useCallback(

frontend/src/Components/RoadDetails/MapArea.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ImageGallery from './ImageGallery';
 import MapWrapper from '../Map/MapWrapper';
 import ForceMapUpdate from '../Map/Hooks/ForceMapUpdate';
-import { LatLng } from '../../models/models';
+import { IRangeForDashCam, LatLng } from '../../models/models';
 
 interface Props {
   /** The trigger to update the map */
@@ -11,11 +11,18 @@ interface Props {
   children?: React.ReactNode;
   /** The center of the map */
   center?: LatLng;
+  /** The distance from left to right displayed on surface images */
+  rangeDashCamImages?: IRangeForDashCam | null;
 }
 /**
  * The map area op the road details(road inspect) page
  */
-const MapArea: React.FC<Props> = ({ triggerUpdate, children, center }) => {
+const MapArea: React.FC<Props> = ({
+  triggerUpdate,
+  children,
+  center,
+  rangeDashCamImages,
+}) => {
   return (
     <div
       className="map-area"
@@ -31,7 +38,8 @@ const MapArea: React.FC<Props> = ({ triggerUpdate, children, center }) => {
         className="imageGallery_container"
         style={{ height: '95px', overflow: 'hidden' }}
       >
-        <ImageGallery /> {/* Use the imageGallery component */}
+        <ImageGallery rangeDashCamImages={rangeDashCamImages} />{' '}
+        {/* Use the imageGallery component */}
       </div>
     </div>
   );

frontend/src/models/models.ts

@@ -40,6 +40,12 @@ export interface Conditions {
   distance: number;
 }
 
+export interface IRangeForDashCam {
+  minRange: number;
+  maxRange: number;
+  maxRangeSurvey: number;
+}
+
 export interface PathWithConditions {
   geometry: number[][];
   data: Conditions[];

frontend/src/pages/Inspect.tsx

@@ -13,6 +13,7 @@ import { useParams } from 'react-router-dom';
 import {
   Conditions,
   ImageType,
+  IRangeForDashCam,
   LatLng,
   PathWithConditions,
 } from '../models/models';
@@ -110,6 +111,9 @@ const Inspect: FC = () => {
   /** The data to display */
   const [data, setData] = useState<Conditions[]>();
 
+  const [rangeForDashCamImages, setRangeForDashCamImages] =
+    useState<IRangeForDashCam>({ minRange: 0, maxRange: 0, maxRangeSurvey: 0 });
+
   const availableGraphIndicatorType = useMemo(() => {
     return Array.from(
       new Set(
@@ -120,6 +124,24 @@ const Inspect: FC = () => {
     );
   }, [data]);
 
+  useEffect(() => {
+    console.log('santi33', roadDistanceLeftToRight);
+    console.log('santi44', chartData);
+    if (
+      gradientLineData === undefined ||
+      roadDistanceLeftToRight === null ||
+      chartData === undefined
+    )
+      return;
+
+    setRangeForDashCamImages({
+      minRange: roadDistanceLeftToRight[0],
+      maxRange: roadDistanceLeftToRight[1],
+      maxRangeSurvey: Math.max(...chartData.map((item) => item.maxX)) + 1,
+    });
+    console.log('santi55 rangeForDashCamImages', rangeForDashCamImages);
+  }, [roadDistanceLeftToRight]);
+
   useEffect(() => {
     if (id === undefined || type === undefined) return;
 
@@ -252,7 +274,11 @@ const Inspect: FC = () => {
             <div
               style={{ width: `calc(${mapAreaSize}% - ${halfSizeOfSplitBar})` }}
             >
-              <MapArea triggerUpdate={triggerUpdate} center={mapCenter}>
+              <MapArea
+                triggerUpdate={triggerUpdate}
+                center={mapCenter}
+                rangeDashCamImages={rangeForDashCamImages}
+              >
                 <GradientLine
                   geometry={gradientLineData?.geometry}
                   data={gradientLineData?.data}