show dash cam images nearby to current location (#168)

* rebased on top of dev

* cleaning plus using distance survey for images

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,30 @@ const ImageGallery: React.FC = () => {
 
     if (type === 'surveys') {
       getImagesForASurvey(id, true, (images) => {
-        setCameraImages(images);
+        setCameraImages(
+          images.filter((image) => {
+            if (rangeDashCamImages === undefined || rangeDashCamImages === null)
+              return true;
+            return (
+              image.distance_survey >=
+                (rangeDashCamImages.minRange - 5 > 0
+                  ? rangeDashCamImages.minRange - 5
+                  : 0) &&
+              image.distance_survey <=
+                (rangeDashCamImages.maxRange + 5 <
+                rangeDashCamImages.maxRangeSurvey
+                  ? rangeDashCamImages.maxRange + 5
+                  : rangeDashCamImages.maxRangeSurvey)
+            );
+          }),
+        );
       });
     } 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,19 @@ 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,10 +39,15 @@ 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>
   );
 };
 
+// {rangeDashCamImages !== undefined && rangeDashCamImages !== null ? (
+//     <ImageGallery rangeDashCamImages={rangeDashCamImages} />
+// ) : null}  should we put something like this?
+
 export default MapArea;

frontend/src/models/models.ts

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

frontend/src/pages/Inspect.tsx

@@ -13,6 +13,7 @@ import { useParams } from 'react-router-dom';
 import {
   Conditions,
   ImageType,
+  IRangeForDashCam,
   LatLng,
   PathWithConditions,
 } from '../models/models';
@@ -113,6 +114,9 @@ const Inspect: FC = () => {
   /** Boolean to show loading circle */
   const [loading, setLoading] = useState<boolean>(true);
 
+  const [rangeForDashCamImages, setRangeForDashCamImages] =
+    useState<IRangeForDashCam>({ minRange: 0, maxRange: 0, maxRangeSurvey: 0 });
+
   const availableGraphIndicatorType = useMemo(() => {
     return Array.from(
       new Set(
@@ -123,6 +127,21 @@ const Inspect: FC = () => {
     );
   }, [data]);
 
+  useEffect(() => {
+    if (
+      gradientLineData === undefined ||
+      roadDistanceLeftToRight === null ||
+      chartData === undefined
+    )
+      return;
+
+    setRangeForDashCamImages({
+      minRange: roadDistanceLeftToRight[0],
+      maxRange: roadDistanceLeftToRight[1],
+      maxRangeSurvey: Math.max(...chartData.map((item) => item.maxX)) + 1,
+    });
+  }, [roadDistanceLeftToRight]);
+
   useEffect(() => {
     if (id === undefined || type === undefined) return;
     setLoading(true);
@@ -261,7 +280,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}