(WIP) Filtering and 360

vegbilder-client/.vscode/launch.json

@@ -1,15 +1,19 @@
 {
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
     {
-      "type": "chrome",
-      "request": "launch",
-      "name": "Launch Chrome against localhost",
+      "type": "pwa-chrome",
+      "request": "launch", 
+      "name": "Launch chrome against localhost",
       "url": "http://localhost:3000",
-      "webRoot": "${workspaceFolder}"
+      "webRoot": "${workspaceFolder}/src"
+    },
+    {
+      "type": "pwa-chrome",
+      "request": "attach", 
+      "port": "9222",
+      "name": "attach to chrome",
+      "webRoot": "${workspaceFolder}/src"
     }
   ]
-}
+}

vegbilder-client/.vscode/settings.json

@@ -5,5 +5,6 @@
   "typescript.format.semicolons": "insert",
   "javascript.format.semicolons": "insert",
   "typescript.preferences.quoteStyle": "double",
-  "javascript.preferences.quoteStyle": "double"
+  "javascript.preferences.quoteStyle": "double",
+  "typescript.tsdk": "node_modules\\typescript\\lib"
 }

vegbilder-client/package.json

@@ -19,6 +19,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-leaflet": "^3.2.0",
+    "react-pannellum": "git://github.com/theresmf/react-pannellum.git#vegbilder-modifications",
     "react-responsive": "^8.2.0",
     "react-scripts": "^4.0.3",
     "recoil": "^0.3.1",
@@ -42,6 +43,7 @@
   "devDependencies": {
     "@types/lodash": "^4.14.168",
     "@types/react-leaflet": "^2.8.1",
-    "@types/react-responsive": "^8.0.2"
+    "@types/react-responsive": "^8.0.2",
+    "@welldone-software/why-did-you-render": "^6.2.1"
   }
 }

vegbilder-client/src/apis/VegbilderOGC/getImagePointsInBbox.ts

@@ -1,16 +1,14 @@
 import { IBbox } from 'types';
 import vegbilderOGC from './vegbilderOGC';
 
-const getImagePointsInBbox = async (bbox: IBbox, year: number) => {
+const getImagePointsInBbox = async (bbox: IBbox, typename: string) => {
   const srsname = 'urn:ogc:def:crs:EPSG::4326';
-  const typename = `vegbilder_1_0:Vegbilder_${year}`;
 
   const params = {
     service: 'WFS',
     version: '2.0.0',
     request: 'GetFeature',
     typenames: typename,
-    typename: typename,
     startindex: 0,
     count: 10000,
     srsname: srsname,

vegbilder-client/src/apis/VegbilderOGC/getImagePointsInTilesOverlappingBbox.ts

@@ -8,7 +8,7 @@ const settings = {
   bboxSizeDecimals: 2, // Make sure this equals the number of decimals in bboxSizeInDegrees
 };
 
-const getImagePointsInTilesOverlappingBbox = async (bbox: IBbox, year: number) => {
+const getImagePointsInTilesOverlappingBbox = async (bbox: IBbox, typename: string) => {
   const { south, west, north, east } = bbox;
   const { bboxSizeInDegrees, bboxSizeDecimals } = settings;
 
@@ -34,7 +34,7 @@ const getImagePointsInTilesOverlappingBbox = async (bbox: IBbox, year: number) =
   }
 
   const promises = fetchedBboxes.map(async (bbox) => {
-    return await getImagePointsInBbox(bbox, year);
+    return await getImagePointsInBbox(bbox, typename);
   });
 
   const responses = await Promise.all(promises);

vegbilder-client/src/components/App.tsx

@@ -14,7 +14,8 @@ import {
   latLngZoomQueryParameterState,
   viewQueryParamterState,
   yearQueryParameterState,
-  vegsystemreferanseState
+  vegsystemreferanseState,
+  imageTypeQueryParameterState
 } from 'recoil/selectors';
 import useFetchNearestImagePoint from 'hooks/useFetchNearestImagePoint';
 import { DEFAULT_COORDINATES, DEFAULT_VIEW, DEFAULT_ZOOM } from 'constants/defaultParamters';
@@ -24,7 +25,7 @@ import MobileLandingPage from './MobileLandingPage/MobileLandingPage';
 import getVegByVegsystemreferanse from 'apis/NVDB/getVegByVegsystemreferanse';
 import { getCoordinatesFromWkt } from 'utilities/latlngUtilities';
 import { matchAndPadVegsystemreferanse } from 'utilities/vegsystemreferanseUtilities';
-import { IImagePoint, queryParameterNames } from 'types';
+import { imageType, IImagePoint, queryParameterNames } from 'types';
 import useAsyncError from 'hooks/useAsyncError';
 
 const useStyles = makeStyles({
@@ -80,17 +81,29 @@ const App = () => {
   const [currentCoordinates, setCurrentCoordinates] = useRecoilState(latLngZoomQueryParameterState);
   const [, setCurrentYear] = useRecoilState(yearQueryParameterState);
   const [, setCurrentView] = useRecoilState(viewQueryParamterState);
+  const [currentImageType, setCurrentImageType] = useRecoilState(imageTypeQueryParameterState);
   const [, setCurrentVegsystemreferanseState] = useRecoilState(vegsystemreferanseState);
 
   const [snackbarVisible, setSnackbarVisible] = useState(false);
   const [snackbarDuration, setSnackbarDuration] = useState(4000);
   const [snackbarMessage, setSnackbarMessage] = useState('');
   const isMobile = useIsMobile();
 
+  const searchParams = new URLSearchParams(window.location.search);
+  const imageTypeQuery = searchParams.get('imageType') as imageType;
+
+  //Setter imageType her og ikke i useEffect for å unngå at recoil state blir feil i oppstart av app.
+  if (!imageTypeQuery) {
+    setCurrentImageType("planar");
+  } else if (imageTypeQuery !== "planar") {
+    setCurrentImageType(imageTypeQuery);
+  }
+
+
   const onbardingIsHidden = localStorage.getItem('HideSplashOnStartup') === 'true';
   const [showPageInformation, setShowPageInformation] = useState(!onbardingIsHidden);
 
-  const searchParams = new URLSearchParams(window.location.search);
+
   const requester = searchParams.get('requester');
   let capitalisedRequesterName = requester && requester.charAt(0).toUpperCase() + requester.slice(1);
 
@@ -160,7 +173,7 @@ const App = () => {
 
   const openAppByVegsystemreferanse = async (
     vegsystemreferanse: string | undefined,
-    year: string | null
+    year: string | null,
   ) => {
     if (vegsystemreferanse) {
       const vegResponse = await getVegByVegsystemreferanse(vegsystemreferanse);
@@ -175,7 +188,7 @@ const App = () => {
 
         if (latlng) {
           if (year !== 'latest' && year !== null) {
-            fetchNearestImagePointToYearAndCoordinates(latlng, parseInt(year)).then(
+            fetchNearestImagePointToYearAndCoordinates(latlng, parseInt(year), currentImageType).then(
               (imagePoint: IImagePoint | undefined) => {
                 if (!imagePoint) {
                   setCurrentCoordinates({ ...latlng, zoom: 15 });
@@ -234,11 +247,11 @@ const App = () => {
     else if (imageIdQuery && imageIdQuery.length > 1) {
       if (latQuery && lngQuery && yearQuery && yearQuery !== 'latest') {
         const latlng = { lat: parseFloat(latQuery), lng: parseFloat(lngQuery) };
-        fetchNearestImagePointToYearAndCoordinatesByImageId(latlng, parseInt(yearQuery));
+          fetchNearestImagePointToYearAndCoordinatesByImageId(latlng, parseInt(yearQuery), imageTypeQuery);
       }
     }
 
-    // Initialize year, zoom, lat, and lng when opening the app the default way
+    // Initialize year, imageType, zoom, lat, and lng when opening the app the default way
     else {
       if (!yearQuery) {
         setCurrentYear('Nyeste');
@@ -250,6 +263,7 @@ const App = () => {
         setCurrentView(DEFAULT_VIEW);
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleSnackbarClose = (reason: any) => {

vegbilder-client/src/components/CloseButton/CloseButton.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { IconButton } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import { makeStyles } from '@material-ui/styles';
+import Theme from 'theme/Theme';
 
 const useStyles = makeStyles(() => ({
   closeButton: {
@@ -36,7 +37,7 @@ const CloseButton = ({ onClick, transparent, positionToTop, position }: ICloseBu
     <IconButton
       className={classes.closeButton}
       style={{
-        background: transparent ? 'transparent' : '',
+        background: transparent ? 'transparent' : `${Theme.palette.common.grayDark}`,
         top: positionToTop ?? '0.3125rem',
         position: position ? position : 'absolute',
       }}