diff --git a/backend/lib/BieMetadata/MetadataObject.cs b/backend/lib/BieMetadata/MetadataObject.cs index 2e389db0..b0bfcfe4 100644 --- a/backend/lib/BieMetadata/MetadataObject.cs +++ b/backend/lib/BieMetadata/MetadataObject.cs @@ -1,6 +1,5 @@ using MongoDB.Bson; using MongoDB.Bson.Serialization.Attributes; -// ReSharper disable InconsistentNaming namespace BieMetadata; @@ -75,6 +74,12 @@ public class AdditionalData /// Table data populated by the data pipeline. Contains the name and the size of the all .yaml files correlated to that specific dataset. /// public List Tables { get; set; } = new List(); + + /// + /// A polygon coloring rule for different values. + /// + [BsonIgnoreIfNull] // Add this attribute to ignore null values + public PolygonColoring? PolygonColoring { get; set; } } /// @@ -113,4 +118,19 @@ public class DisplayProperty // The value to show public string value { get; set; } = string.Empty; } + + /// + /// Polygon coloring rules + /// + public class PolygonColoring + { + public string attributeName { get; set; } = string.Empty; + public List colors { get; set; } = new List(); + } + + public class PolygonColor + { + public string color { get; set; } = string.Empty; + public List values { get; set; } = new List(); + } } diff --git a/backend/metadata-database/init-db.js b/backend/metadata-database/init-db.js index 1e1c8867..212c2ae0 100644 --- a/backend/metadata-database/init-db.js +++ b/backend/metadata-database/init-db.js @@ -29,6 +29,7 @@ const datasets = [ MinZoomLevel: -1, MarkersThreshold: -1, DisplayProperty: [], + PolygonColoring: null, Tables: [], }, }, @@ -46,7 +47,8 @@ const datasets = [ LongDescription: `A map of EV charging stations displays the locations of electric vehicle charging points located in Germany, helping drivers plan routes and manage charging needs. It is essential for supporting the adoption and convenience of electric vehicles.`, MinZoomLevel: 11, MarkersThreshold: -1, - DisplayProperty: [{ displayName: "Operator", value: "text" }], + DisplayProperty: [{ displayName: "Operator", value: "operator" }], + PolygonColoring: null, Tables: [], }, }, @@ -65,6 +67,7 @@ const datasets = [ MinZoomLevel: 11, MarkersThreshold: 17, DisplayProperty: [], + PolygonColoring: null, Tables: [], }, }, @@ -81,8 +84,55 @@ const datasets = [ DataType: "SHAPE", LongDescription: `The Actual Use map describes the use of the earth's surface in four main groups (settlement, traffic, vegetation and water bodies). The division of these main groups into almost 140 different types of use, such as residential areas, road traffic, agriculture or flowing water, enables detailed evaluations and analyses of the use of the earth's surface.`, MinZoomLevel: 11, - MarkersThreshold: 17, + MarkersThreshold: 15, DisplayProperty: [], + PolygonColoring: { + attributeName: "nutzart", + colors: [ + { + color: "DarkOrchid", + values: [ + "Wohnbaufläche", + "Industrie- und Gewerbefläche", + "Halde", + "Bergbaubetrieb", + "Tagebau, Grube Steinbruch", + "Fläche gemischter Nutzung", + "Fläche besonderer funktionaler Prägung", + "Sport-, Freizeit- und Erholungsfläche", + "Friedhof", + ], + }, + { + color: "green", + values: ["Wald", "Gehölz", "Sumpf"], + }, + { + color: "yellow", + values: [ + "Landwirtschaft", + "Heide", + "Moor", + "Unland/Vegetationslose Fläche", + ], + }, + { + color: "RosyBrown", + values: [ + "Straßenverkehr", + "Weg", + "Platz", + "Bahnverkehr", + "Flugverkehr", + "Schiffsverkehr", + ], + }, + { + color: "Cyan", + values: ["Fließgewässer", "Hafenbecken", "Stehendes Gewässer"], + }, + ], + }, Tables: [], }, }, @@ -91,15 +141,16 @@ const datasets = [ DatasetId: "building_models", Name: "Building Models", ShortDescription: `Simplified 3D building models.`, - Icon: '', + Icon: '', }, additionalData: { - Icon: '', + Icon: '', Type: "areas", LongDescription: `The building models have a 3D object of each building plus additional information on its dimentions.`, MinZoomLevel: 11, MarkersThreshold: 17, DisplayProperty: [], + PolygonColoring: null, Tables: [], }, }, diff --git a/backend/src/BIE.Core/BIE.Core.API/DatasetHandlers/CsvDatasetHandler.cs b/backend/src/BIE.Core/BIE.Core.API/DatasetHandlers/CsvDatasetHandler.cs index 4ce27da6..c92a7020 100644 --- a/backend/src/BIE.Core/BIE.Core.API/DatasetHandlers/CsvDatasetHandler.cs +++ b/backend/src/BIE.Core/BIE.Core.API/DatasetHandlers/CsvDatasetHandler.cs @@ -71,7 +71,7 @@ public string GetDataInsideArea(BoundingBox boundingBox) { "properties", new Dictionary { - { "text", $"{row["operator"]}" } + { "operator", $"{row["operator"]}" } } } }; diff --git a/frontend/src/components/Alerts/ErrorAlert.tsx b/frontend/src/components/Alerts/ErrorAlert.tsx index f3bcf77c..5f188e87 100644 --- a/frontend/src/components/Alerts/ErrorAlert.tsx +++ b/frontend/src/components/Alerts/ErrorAlert.tsx @@ -8,10 +8,15 @@ import "./Alerts.css"; import { useContext, useEffect } from "react"; import { AlertContext } from "../../contexts/AlertContext"; +/** + * A component handling error alert on the bottom edge of the screen. + */ const ErrorAlert: React.FC = () => { const { currentAlertCache, setCurrentAlertCache } = useContext(AlertContext); - // Auto-hide + /** + * Auto-hiding of the component after some time. + */ useEffect(() => { const timeId = setTimeout(() => { // After 3 seconds set the show value to false diff --git a/frontend/src/components/DataView/DataRow.tsx b/frontend/src/components/DataView/DataRow.tsx index 6be0649e..9732e8d8 100644 --- a/frontend/src/components/DataView/DataRow.tsx +++ b/frontend/src/components/DataView/DataRow.tsx @@ -25,6 +25,9 @@ interface RowProps { currentDatasets: DatasetBasicData[]; } +/** + * A single data row for the data view. + */ const DataRow: React.FC = ({ row, currentDatasets }) => { const [open, setOpen] = useState(false); const [shouldFlyTo, setShouldFlyTo] = useState(null); diff --git a/frontend/src/components/DataView/DataView.tsx b/frontend/src/components/DataView/DataView.tsx index 2805fffe..4cbe3896 100644 --- a/frontend/src/components/DataView/DataView.tsx +++ b/frontend/src/components/DataView/DataView.tsx @@ -40,6 +40,9 @@ function getOuterPolygons(multiPolygon: MultiPolygon): Position[][] { return multiPolygon.coordinates.map((polygon) => polygon[0]); } +/** + * Data view component for the right side of the main page. + */ const DataView = () => { const [isLoading, setIsLoading] = useState(false); const { currentTabsCache, getCurrentTab } = useContext(TabsContext); diff --git a/frontend/src/components/DataView/LoadDataButton.tsx b/frontend/src/components/DataView/LoadDataButton.tsx index db5a5b7b..01844aca 100644 --- a/frontend/src/components/DataView/LoadDataButton.tsx +++ b/frontend/src/components/DataView/LoadDataButton.tsx @@ -8,6 +8,9 @@ interface LoadDataButtonProps { disabled: boolean; } +/** + * A reload button for fetching the newest location data. + */ const LoadDataButton: React.FC = ({ ifNeedsReloading, disabled, diff --git a/frontend/src/components/DatasetsList/CustomSvgIcon.tsx b/frontend/src/components/DatasetsList/CustomSvgIcon.tsx index d5067f0a..b126c6fb 100644 --- a/frontend/src/components/DatasetsList/CustomSvgIcon.tsx +++ b/frontend/src/components/DatasetsList/CustomSvgIcon.tsx @@ -7,6 +7,9 @@ interface CustomSvgIconProps extends SvgIconProps { size?: number; } +/** + * Custom svg icon for the map markers. + */ const CustomSvgIcon: React.FC = ({ svgString, size = 32, diff --git a/frontend/src/components/DatasetsList/DatasetsList.tsx b/frontend/src/components/DatasetsList/DatasetsList.tsx index c865c35b..3126bb1e 100644 --- a/frontend/src/components/DatasetsList/DatasetsList.tsx +++ b/frontend/src/components/DatasetsList/DatasetsList.tsx @@ -21,6 +21,10 @@ interface DatasetsListProps { closeDialog: () => void; } +/** + * Component for listing all available datasets. + * @returns + */ const DatasetsList: React.FC = ({ closeDialog }) => { const [datasets, setDatasets] = useState([]); const { openNewTab } = useContext(TabsContext); diff --git a/frontend/src/components/MainMenu/MainMenu.tsx b/frontend/src/components/MainMenu/MainMenu.tsx index a72c5437..34fb3c9a 100644 --- a/frontend/src/components/MainMenu/MainMenu.tsx +++ b/frontend/src/components/MainMenu/MainMenu.tsx @@ -6,6 +6,9 @@ import DatasetsList from "../DatasetsList/DatasetsList"; import "./MainMenu.css"; +/** + * The main menu of the website. + */ const MainMenu = () => { return ( diff --git a/frontend/src/components/MapView/LeafletMap.tsx b/frontend/src/components/MapView/LeafletMap.tsx index dd03b6d5..f443a59d 100644 --- a/frontend/src/components/MapView/LeafletMap.tsx +++ b/frontend/src/components/MapView/LeafletMap.tsx @@ -37,6 +37,9 @@ interface LeafletMapProps { if3D: boolean; } +/** + * Leaflet map visible in the map view on the left side of the page. + */ const LeafletMap: React.FC = ({ datasetId, if3D }) => { const { currentTabsCache, getCurrentTab, getOrFetchMetadata } = useContext(TabsContext); diff --git a/frontend/src/components/MapView/MapDatasetVisualizer.tsx b/frontend/src/components/MapView/MapDatasetVisualizer.tsx index 35d434fc..1f51cff7 100644 --- a/frontend/src/components/MapView/MapDatasetVisualizer.tsx +++ b/frontend/src/components/MapView/MapDatasetVisualizer.tsx @@ -55,6 +55,9 @@ const MapDatasetVisualizer: React.FC = ({ new LatLng(51.505, -0.09) ); + /** + * Updates the data for a specific dataset. + */ const updateDatasetData = useCallback( (newData: FeatureCollection, bounds: LatLngBounds) => { setCurrentTabsCache((prevCache) => { @@ -87,6 +90,27 @@ const MapDatasetVisualizer: React.FC = ({ updateDatasetData ); + /** + * Function to determine the color based on usageType using PolygonColoring from metadata + * @param usageType the usage type string + * @returns the color to use + */ + const getColor = (usageType: string) => { + console.log(usageType); + if (dataset.metaData && dataset.metaData.polygonColoring) { + const coloring = dataset.metaData.polygonColoring; + for (const colorRule of coloring.colors) { + if (colorRule.values.includes(usageType)) { + return colorRule.color; + } + } + } + return "#3388ff"; + }; + + /** + * Fetches the data for current viewport. + */ useEffect(() => { // Check if data has been fetched if (!geoData || !dataset.metaData) return; @@ -101,7 +125,23 @@ const MapDatasetVisualizer: React.FC = ({ if (currentMapCache.zoom > dataset.metaData.markersThreshold) { // Add the polygons to the map try { - const geojsonLayer = L.geoJson(geoData); + const geojsonLayer = L.geoJson(geoData, { + style: (feature) => { + return { + color: + feature && + dataset.metaData && + dataset.metaData.polygonColoring + ? getColor( + feature.properties[ + dataset.metaData.polygonColoring.attributeName + ] + ) + : "#3388ff", + fillOpacity: 0.2, + }; + }, + }); geojsonLayer.addTo(map); return () => { map.removeLayer(geojsonLayer); diff --git a/frontend/src/components/MapView/MapEventsHandler.tsx b/frontend/src/components/MapView/MapEventsHandler.tsx index 88916941..ec057226 100644 --- a/frontend/src/components/MapView/MapEventsHandler.tsx +++ b/frontend/src/components/MapView/MapEventsHandler.tsx @@ -9,7 +9,9 @@ import { flushSync } from "react-dom"; import { MarkerSelection } from "../../types/MapSelectionTypes"; import "./MapEventsHandler.css"; -// Utility function to render a React component to HTML string +/** + * Utility function to render a React component to HTML string + */ const renderToHtml = (Component: React.FC) => { const div = document.createElement("div"); const root = createRoot(div); @@ -19,6 +21,9 @@ const renderToHtml = (Component: React.FC) => { return div.innerHTML; }; +/** + * Returns a MapPin div for one map marker. + */ const divIconMarker: DivIcon = L.divIcon({ html: renderToHtml(() => ( @@ -28,6 +33,9 @@ const divIconMarker: DivIcon = L.divIcon({ iconAnchor: [18, 36], // Adjust the anchor point as needed }); +/** + * Takes care of the leaflet map events and renders a single selection marker + */ const MapEventsHandler: React.FC = () => { const { currentMapCache, setCurrentMapCache } = useContext(MapContext); diff --git a/frontend/src/components/MapView/MapOptions.tsx b/frontend/src/components/MapView/MapOptions.tsx index 18fc2188..f1dd41b8 100644 --- a/frontend/src/components/MapView/MapOptions.tsx +++ b/frontend/src/components/MapView/MapOptions.tsx @@ -12,6 +12,9 @@ interface MapOptionsProps { toggle3D: () => void; } +/** + * Additional options buttons visible in the top right corner of the map. + */ const MapOptions: React.FC = ({ onMapTypeChange, if3D, diff --git a/frontend/src/components/MapView/MapView.tsx b/frontend/src/components/MapView/MapView.tsx index c2414603..7a4d5078 100644 --- a/frontend/src/components/MapView/MapView.tsx +++ b/frontend/src/components/MapView/MapView.tsx @@ -25,6 +25,9 @@ interface MapViewProps { datasetId: string; } +/** + * One of the main components on the website. Displays the map on the left side of the page. + */ const MapView: React.FC = ({ datasetId }) => { const [if3D, setIf3D] = useState(false); const { currentMapCache, setCurrentMapCache } = useContext(MapContext); diff --git a/frontend/src/components/MultiMap/MultiMap.tsx b/frontend/src/components/MultiMap/MultiMap.tsx index 84e9e791..6efbc19b 100644 --- a/frontend/src/components/MultiMap/MultiMap.tsx +++ b/frontend/src/components/MultiMap/MultiMap.tsx @@ -11,11 +11,16 @@ import { TabProps, TabsContext } from "../../contexts/TabsContext"; import NewTabButton from "./NewTabButton"; import TabOptions from "./TabOptions"; +/** + * Main tabs component allowing for opening and saving of new map tabs. + */ const MultiMap = () => { // Access the tabs context const { currentTabsCache, setCurrentTabsCache } = useContext(TabsContext); - // Dropdown menu for the tab options + /** + * Dropdown menu for the tab options + */ const [anchorElementTabOptions, setAnchorElementTabOptions] = useState(null); @@ -35,7 +40,10 @@ const MultiMap = () => { const [selectedTabId, setSelectedTabId] = useState(null); - // Handles the change of the current tab id + /** + * Handles the change of the current tab id + * @param newTabID new current tab + */ const handleChange = (newTabID: string) => { setCurrentTabsCache({ ...currentTabsCache, currentTabID: newTabID }); }; diff --git a/frontend/src/components/MultiMap/NewTabButton.tsx b/frontend/src/components/MultiMap/NewTabButton.tsx index 8e2d2c4e..ee6e0003 100644 --- a/frontend/src/components/MultiMap/NewTabButton.tsx +++ b/frontend/src/components/MultiMap/NewTabButton.tsx @@ -4,9 +4,16 @@ import { useState } from "react"; import DatasetsPopUp from "../PopUp/DatasetsPopUp"; import "./NewTabButton.css"; +/** + * The new tab button for adding a new tab. + */ const NewTabButton = () => { // Stores the state of if the datasets popup is open const [ifOpenedDialog, setIfOpenedDialog] = useState(false); + + /** + * Toggles the new tab dialog. + */ const toggleIfOpenedDialog = () => { setIfOpenedDialog(!ifOpenedDialog); }; diff --git a/frontend/src/components/MultiMap/TabOptions.tsx b/frontend/src/components/MultiMap/TabOptions.tsx index 1348049d..99335721 100644 --- a/frontend/src/components/MultiMap/TabOptions.tsx +++ b/frontend/src/components/MultiMap/TabOptions.tsx @@ -12,6 +12,9 @@ interface TabOptionsProps { currentTab: TabProps | undefined; } +/** + * Tab options popup, allows for seeing additional data of the tab, closing it and pinning. + */ const TabOptions: React.FC = ({ anchorElementTabOptions, handleClose, diff --git a/frontend/src/components/PopUp/DatasetsPopUp.tsx b/frontend/src/components/PopUp/DatasetsPopUp.tsx index 26b5b0a4..eb88cd9a 100644 --- a/frontend/src/components/PopUp/DatasetsPopUp.tsx +++ b/frontend/src/components/PopUp/DatasetsPopUp.tsx @@ -7,6 +7,9 @@ interface DatasetsPopUpProps { ifOpenedDialog: boolean; } +/** + * Pop-up for list of the datasets. + */ const DatasetsPopUp: React.FC = ({ onToggleIfOpenedDialog, ifOpenedDialog, diff --git a/frontend/src/components/PopUp/PopUp.tsx b/frontend/src/components/PopUp/PopUp.tsx index ab862dd4..ce96f759 100644 --- a/frontend/src/components/PopUp/PopUp.tsx +++ b/frontend/src/components/PopUp/PopUp.tsx @@ -17,11 +17,15 @@ interface PopUpProps { titleIcon: JSX.Element | undefined; } -// This is the partent component for all PopUps. -// - ifOpenedDialog - a boolean storing if the popup is currently opened. -// - onClose - on close function handler -// - title - the title of the PopUp -// - children - all children JSX components +/** + * This is the partent component for all PopUps. + * @param ifOpenedDialog - a boolean storing if the popup is currently opened. + * @param onClose - on close function handler + * @param title - the title of the PopUp + * @param children - all children JSX components + * @param titleIcon - the icon displayed in front of the title + * @returns + */ const PopUp: React.FC = ({ ifOpenedDialog, onClose, diff --git a/frontend/src/components/PopUp/TabInfoPopup.tsx b/frontend/src/components/PopUp/TabInfoPopup.tsx index 00b3ffba..8261699f 100644 --- a/frontend/src/components/PopUp/TabInfoPopup.tsx +++ b/frontend/src/components/PopUp/TabInfoPopup.tsx @@ -11,6 +11,9 @@ interface TabInfoPopUpProps { currentTab: TabProps; } +/** + * Pop-up for the tab info panel. + */ const TabInfoPopUp: React.FC = ({ onToggleIfOpenedDialog, ifOpenedDialog, diff --git a/frontend/src/components/SearchBar/SearchBar.tsx b/frontend/src/components/SearchBar/SearchBar.tsx index 13c06d49..44e3b0aa 100644 --- a/frontend/src/components/SearchBar/SearchBar.tsx +++ b/frontend/src/components/SearchBar/SearchBar.tsx @@ -1,4 +1,10 @@ -import React, { useContext, useState, useEffect, useMemo } from "react"; +import React, { + useContext, + useState, + useEffect, + useMemo, + Fragment, +} from "react"; import { Autocomplete, Box, TextField, IconButton, Grid } from "@mui/material"; import StarIcon from "@mui/icons-material/Star"; import { MagnifyingGlass } from "@phosphor-icons/react"; @@ -22,6 +28,9 @@ declare module "leaflet-geosearch/dist/providers/openStreetMapProvider.js" { } } +/** + * Search bar used for searching locations on the map and selecting them. + */ const SearchBar: React.FC = () => { const [inputValue, setInputValue] = useState(""); const [options, setOptions] = useState>([]); @@ -74,6 +83,10 @@ const SearchBar: React.FC = () => { }; }, [inputValue, fetch]); + /** + * Adds a location to favourites list. + * @param newLocation location to add + */ const addToFavourites = (newLocation: MapSelection) => { if ( !currentSearchCache.favourites.some((fav) => @@ -98,12 +111,20 @@ const SearchBar: React.FC = () => { }); }; + /** + * Flies to the selected location after some timeout + * @param item map selection to fly to + */ const onItemSelected = (item: MapSelection) => { setTimeout(() => { flyToLocation(item); }, 400); }; + /** + * Flies to the selected location + * @param item map selection to fly to + */ const flyToLocation = (item: MapSelection) => { const targetPosition = new LatLng( item.coordinates.lat, @@ -161,6 +182,9 @@ const SearchBar: React.FC = () => { return Array.from(uniqueOptions.values()); }; + /** + * Handler for clicking on result + */ const handleSearchIconClick = () => { if (options.length > 0) { onItemSelected(options[0]); @@ -170,7 +194,7 @@ const SearchBar: React.FC = () => { }; return ( - <> + { ); }} /> - + ); }; diff --git a/frontend/src/components/ThreeDView/ThreeDView.tsx b/frontend/src/components/ThreeDView/ThreeDView.tsx index 0ea27f90..41e61c1c 100644 --- a/frontend/src/components/ThreeDView/ThreeDView.tsx +++ b/frontend/src/components/ThreeDView/ThreeDView.tsx @@ -12,6 +12,9 @@ interface ThreeDViewProps { datasetId: string; } +/** + * The 3D view component of the map. + */ const ThreeDView: React.FC = ({ datasetId }) => { const mountRef = useRef(null); const threedMapRef = useRef(null); diff --git a/frontend/src/components/ZoomWarningLabel/ZoomWarningLabel.tsx b/frontend/src/components/ZoomWarningLabel/ZoomWarningLabel.tsx index 967caad1..ac20c3e9 100644 --- a/frontend/src/components/ZoomWarningLabel/ZoomWarningLabel.tsx +++ b/frontend/src/components/ZoomWarningLabel/ZoomWarningLabel.tsx @@ -5,6 +5,9 @@ import { TabsContext } from "../../contexts/TabsContext"; import "./ZoomWarningLabel.css"; import { Warning } from "@phosphor-icons/react"; +/** + * Displays a zoom warning label if the user zoomed out too much to see the data. + */ const ZoomWarningLabel: React.FC = () => { const map = useMap(); const { getCurrentTab } = useContext(TabsContext); diff --git a/frontend/src/contexts/SearchContext.tsx b/frontend/src/contexts/SearchContext.tsx index 4790aca3..0e303926 100644 --- a/frontend/src/contexts/SearchContext.tsx +++ b/frontend/src/contexts/SearchContext.tsx @@ -1,10 +1,9 @@ import L, { LatLng } from "leaflet"; import React, { createContext, useState, ReactNode } from "react"; -import { GeoJSON } from 'geojson'; +import { GeoJSON } from "geojson"; export declare type PointTuple = [number, number]; export declare type LatLngBoundsLiteralBoundsTuple = [PointTuple, PointTuple]; - export type LatLngTuple = [number, number, number?]; export type LatLngBoundsLiteral = [LatLngTuple, LatLngTuple]; @@ -44,50 +43,13 @@ const defaultSearchCache: SearchCacheProps = { { coordinates: L.latLng([49.5732, 12.0288]), displayName: "Nuremberg", - bounds: [[40,50],[50,60]], + bounds: [ + [40, 50], + [50, 60], + ], area: false, polygon: null, }, - // { - // coordinates: L.latLng([49.5732, 13.0288]), - // displayName: "Munich", - // }, - // { - // coordinates: L.latLng([49.5732, 14.0288]), - // displayName: "Andreij Sacharow Platz 1, 90402 Nuremberg", - // }, - // { - // coordinates: L.latLng([49.5732, 15.0288]), - // displayName: "Main train station Nuremberg", - // }, - // { - // coordinates: L.latLng([49.5732, 16.0288]), - // displayName: "Walter-Meckauer-Street 20", - // }, - // { - // coordinates: L.latLng([49.5732, 17.0288]), - // displayName: "49°26'46.6\"N 11°04'33.7\"E", - // }, - // { - // coordinates: L.latLng([41.40338, 2.17403]), - // displayName: "41°24'12.2\"N 2°10'26.5\"E", - // }, - // { - // coordinates: L.latLng([34.05223, -118.24368]), - // displayName: "34.05223, -118.24368", - // }, - // { - // coordinates: L.latLng([48.858844, 2.294351]), - // displayName: "48.858844, 2.294351", - // }, - // { - // coordinates: L.latLng([40.748817, -73.985428]), - // displayName: "40°44'55.7\"N 73°59'07.5\"W", - // }, - // { - // coordinates: L.latLng([51.500729, -0.124625]), - // displayName: "51°30'02.6\"N 0°07'28.7\"W", - // }, ], favourites: [], }; diff --git a/frontend/src/services/locationDataService.ts b/frontend/src/services/locationDataService.ts index f4438ac4..3d06374a 100644 --- a/frontend/src/services/locationDataService.ts +++ b/frontend/src/services/locationDataService.ts @@ -19,12 +19,10 @@ export const fetchLocationData = async ( location: location, }; try { - console.log(requestBody); const response = await axios.put( getAPIGatewayURL() + "/api/loadLocationData", requestBody ); - if (response.status === 200) { return response.data; } else { diff --git a/frontend/src/services/metadataService.ts b/frontend/src/services/metadataService.ts index 41c52723..7f154902 100644 --- a/frontend/src/services/metadataService.ts +++ b/frontend/src/services/metadataService.ts @@ -14,7 +14,6 @@ export const fetchMetadataForDataset = async ( const params = { datasetID: datasetID, }; - try { // Make the API call const response = await axios.get( diff --git a/frontend/src/types/DatasetTypes.tsx b/frontend/src/types/DatasetTypes.tsx index 773526db..e4407431 100644 --- a/frontend/src/types/DatasetTypes.tsx +++ b/frontend/src/types/DatasetTypes.tsx @@ -2,7 +2,9 @@ import { FeatureCollection } from "geojson"; import { MarkersTypes } from "./MarkersTypes"; import { LatLngBounds } from "leaflet"; -// Dataset Type +/** + * Type corresponding to one dataset. + */ export type Dataset = { id: string; displayName: string; @@ -13,6 +15,9 @@ export type Dataset = { metaData: DatasetMetaData | undefined; }; +/** + * Type for the basicData from the metadata database. + */ export interface DatasetBasicData { datasetId: string; name: string; @@ -20,6 +25,9 @@ export interface DatasetBasicData { icon: string; } +/** + * Type of the additionalData from the metadata database. + */ export interface DatasetMetaData { icon: string; type: MarkersTypes; @@ -28,14 +36,37 @@ export interface DatasetMetaData { markersThreshold: number; displayProperty: DisplayProperty[]; tables: Table[]; + polygonColoring: PolygonColoring | null; } +/** + * Display property type used for the marker popups. + */ export interface DisplayProperty { displayName: string; value: string; } +/** + * Table type for storing the number of ingested lines for each dataset. + */ export interface Table { name: string; numberOfLines: number; } + +/** + * The map of types of colors for the polygons. + */ +export interface PolygonColoring { + attributeName: string; + colors: PolygonColor[]; +} + +/** + * Individual entry in the color map. + */ +export interface PolygonColor { + color: string; + values: string[]; +} diff --git a/frontend/src/types/LocationDataTypes.tsx b/frontend/src/types/LocationDataTypes.tsx index 66233b38..4a55fd48 100644 --- a/frontend/src/types/LocationDataTypes.tsx +++ b/frontend/src/types/LocationDataTypes.tsx @@ -1,13 +1,14 @@ +/** + * A response object from the location endpoint. + */ export interface LocationDataResponse { individualData: DatasetItem[]; selectionData: DatasetItem[]; } -export interface SubdataItem { - key: string; - value: string; -} - +/** + * A single dataset row visible in the data view. + */ export interface DatasetItem { displayName: string; value: string | null; @@ -15,3 +16,11 @@ export interface DatasetItem { coordinate: number[] | null; subdata: SubdataItem[]; } + +/** + * Sub rows for the data view and the dataset row. + */ +export interface SubdataItem { + key: string; + value: string; +} diff --git a/frontend/src/types/MapSelectionTypes.tsx b/frontend/src/types/MapSelectionTypes.tsx index f1c0f8c3..283de0d8 100644 --- a/frontend/src/types/MapSelectionTypes.tsx +++ b/frontend/src/types/MapSelectionTypes.tsx @@ -1,7 +1,9 @@ import { LatLng } from "leaflet"; import { MultiPolygon } from "geojson"; -// Define PolygonSelection class +/** + * A map selection of a polygon. Either by manualy drawing it or by search bar. + */ export class PolygonSelection { polygon: MultiPolygon; displayName: string; @@ -18,7 +20,9 @@ export class PolygonSelection { } } -// An interface for a single marker selection +/** + * A map selection of a single location/marker. + */ export class MarkerSelection { marker: LatLng; displayName: string; diff --git a/frontend/src/types/MapTypes.tsx b/frontend/src/types/MapTypes.tsx index 64098087..54175d27 100644 --- a/frontend/src/types/MapTypes.tsx +++ b/frontend/src/types/MapTypes.tsx @@ -1,4 +1,6 @@ -// Enum for types of maps +/** + * Enum for types of background maps for the map view. + */ export enum MapTypes { Normal = "normal", Satellite = "satellite", diff --git a/frontend/src/types/MarkersTypes.tsx b/frontend/src/types/MarkersTypes.tsx index 0f1ba3fa..b84cf847 100644 --- a/frontend/src/types/MarkersTypes.tsx +++ b/frontend/src/types/MarkersTypes.tsx @@ -1,6 +1,11 @@ -// Enum for types of markers +/** + * Enum for the types of markers for individual datasets. + */ export enum MarkersTypes { - Markers = "markers", // Map will display single coordinates with markers on top. - Areas = "areas", // Map will display polygon areas. - None = "none", // Map will not display anything. + // Map will display single coordinates with markers on top. + Markers = "markers", + // Map will display polygon areas. + Areas = "areas", + // Map will not display anything. + None = "none", }