MultiSelector (Condition Type Filter)

DTU-SE-Group-D · Nov 7, 2023 · a416f8a · a416f8a
1 parent aacb1c4
commit a416f8a
Show file tree

Hide file tree

Showing 9 changed files with 437 additions and 250 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,11 +19,11 @@
     "react-leaflet-hotline": "^1.4.12",
     "react-router-dom": "^6.16.0",
     "react-scripts": "^5.0.1",
+    "react-select": "^5.7.7",
     "react-slider": "^2.0.6",
     "react-split": "^2.0.14",
     "typescript": "^4.9.5",
-    "web-vitals": "^3.4.0",
-    "chartjs-plugin-zoom": "^2.0.1"
+    "web-vitals": "^3.4.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -53,6 +53,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/traverse": ">=7.23.2",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
@@ -70,14 +71,13 @@
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
+    "nth-check": ">=2.0.1",
+    "postcss": ">=8.4.31",
     "prettier": "^3.0.3",
     "react-docgen-typescript": "^2.2.2",
     "react-styleguidist": "^13.1.1",
     "ts-loader": "^9.4.4",
-    "webpack": "^5.88.2",
-    "@babel/traverse": ">=7.23.2",
-    "nth-check": ">=2.0.1",
-    "postcss": ">=8.4.31"
+    "webpack": "^5.88.2"
   },
   "jest": {
     "moduleNameMapper": {

diff --git a/frontend/src/Components/Conditions/ConditionsMap.tsx b/frontend/src/Components/Conditions/ConditionsMap.tsx
@@ -13,6 +13,7 @@ import {
   KPI,
   Mu,
   YearMonth,
+  MultiMode,
 } from '../../models/conditions';
 import { getAllConditions } from '../../queries/conditions';
 
@@ -102,8 +103,8 @@ const getConditionColor = (properties: GeoJSON.GeoJsonProperties): string => {
 interface ConditionsMapProps {
   /** The children of the component **/
   children: React.ReactNode;
-  /** The mode of the conditions to show **/
-  mode: string;
+  /** The mode of the conditions to show (allows for multimodes)**/
+  multiMode: MultiMode;
   /** The range of date to use to filter the conditions **/
   rangeSelected: DateRange;
 }
@@ -113,7 +114,7 @@ interface ConditionsMapProps {
  */
 const ConditionsMap: FC<ConditionsMapProps> = ({
   children,
-  mode,
+  multiMode,
   rangeSelected,
 }) => {
   const geoJsonRef = useRef<any>();
@@ -166,13 +167,14 @@ const ConditionsMap: FC<ConditionsMapProps> = ({
       geoJsonRef.current.addData(data);
     };
 
-    // filter the data
+    // Filters the data
+    // multiMode functionality added by @author Hansen
     const featureCollection: FeatureCollection = {
       type: 'FeatureCollection',
       features: dataAll.features.filter(
         (f) =>
           f.properties !== null &&
-          (mode === 'ALL' || f.properties.type === mode) &&
+          (multiMode.ALL! || multiMode.mode.includes(f.properties.type)) &&
           (f.properties.valid_yearmonth === undefined ||
             ((rangeSelected.start === undefined ||
               lessOrEqualThan(
@@ -187,7 +189,7 @@ const ConditionsMap: FC<ConditionsMapProps> = ({
       ),
     };
     setConditions(featureCollection);
-  }, [dataAll, mode, rangeAll, rangeSelected]);
+  }, [dataAll, multiMode, rangeAll, rangeSelected]);
 
   return (
     <MapWrapper>
@@ -214,7 +216,7 @@ const ConditionsMap: FC<ConditionsMapProps> = ({
               feature.properties.type !== undefined
             ) {
               // When in mode 'ALL' show dashline using a color for each type
-              if (mode === 'ALL') {
+              if (multiMode.mode.includes(feature.properties.type)) {
                 mapStyle.color = getTypeColor(feature.properties.type);
                 mapStyle.opacity = 0.5;
                 switch (feature.properties.type) {
@@ -235,8 +237,9 @@ const ConditionsMap: FC<ConditionsMapProps> = ({
                     mapStyle.dashArray = '22 22';
                 }
               } else if (feature.properties.value !== undefined) {
-                // otherwise use a specific color gradient for each type
                 mapStyle.color = getConditionColor(feature.properties);
+              } else if (multiMode.count === 0) {
+                mapStyle.color = getTypeColor('default'); // @author Hansen
               }
             }
 

diff --git a/frontend/src/Components/Map/Inputs/MonthFilter.tsx b/frontend/src/Components/Map/Inputs/MonthFilter.tsx
@@ -15,6 +15,8 @@ interface CustomInputProps {
  *
  * A class component is used to remove the following warning:
  * Function components cannot be given refs. Attempts to access this ref will fail.
+ *
+ * @author Hansen
  */
 class CustomInput extends React.Component<CustomInputProps> {
   constructor(props: CustomInputProps) {
@@ -38,6 +40,8 @@ interface MonthFilterProps {
 
 /**
  * Component rendering Month Filter
+ *
+ * @author Hansen
  */
 const MonthFilter: React.FC<MonthFilterProps> = ({
   onEndChange,

diff --git a/frontend/src/Components/Map/Inputs/MultiSelector.tsx b/frontend/src/Components/Map/Inputs/MultiSelector.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import Select from 'react-select';
+
+import '../../../css/multiselector.css';
+import { MultiSelectOptions } from '../../../models/conditions';
+
+interface MultiSelectProps {
+  /** The function to call when an option is selected */
+  handleSelectionChange: (value: any) => void;
+  /** The options to show in the dropdown menu */
+  options: any;
+  /** The text to show in the selector */
+  placeholder: string;
+  /** The children for the MultiSelector */
+  children?: React.ReactNode;
+}
+
+/**
+ * MultiSelector is a component that is a dropdown list
+ * that allows for multiple selection
+ *
+ * @author Hansen
+ */
+
+const MultiSelector: React.FC<MultiSelectProps> = ({
+  handleSelectionChange,
+  children,
+  options,
+  placeholder,
+}) => {
+  return (
+    <div className="input-selector-container">
+      <>
+        <Select
+          isMulti
+          closeMenuOnSelect={false}
+          options={options}
+          onChange={handleSelectionChange}
+          defaultValue={MultiSelectOptions[0]}
+          placeholder={placeholder}
+          className="react-select-container"
+          classNamePrefix="select"
+        ></Select>
+        {children}
+      </>
+    </div>
+  );
+};
+
+export default MultiSelector;
diff --git a/frontend/src/Components/Map/Inputs/Search.tsx b/frontend/src/Components/Map/Inputs/Search.tsx
@@ -18,57 +18,21 @@ interface Props {
 
 /**
  * Component rendering Search bar
+ *
+ * @author Hansen
  */
 
 const Search: React.FC<Props> = ({ onPlaceSelect }) => {
   function onSuggestionChange(value: any) {
     console.log(value);
   }
 
-  // function preprocessHook(value: any) {
-  //   return `${value}, Munich, Germany`;
-  // }
-
-  // function postprocessHook(feature: any) {
-  //   return feature.properties.street;
-  // }
-
-  // function suggestionsFilter(suggestions: any) {
-  //   const processedStreets: any[] = [];
-
-  //   const filtered = suggestions.filter((value: any) => {
-  //     if (
-  //       !value.properties.street ||
-  //       processedStreets.indexOf(value.properties.street) >= 0
-  //     ) {
-  //       return false;
-  //     } else {
-  //       processedStreets.push(value.properties.street);
-  //       return true;
-  //     }
-  //   });
-
-  //   return filtered;
-  // }
-
   return (
     <GeoapifyContext apiKey="bb524d9939ae497688b9b2dddc5cf0a2">
       <GeoapifyGeocoderAutocomplete
         placeholder="Enter address here"
-        // value={value}
         type={'street'}
-        // lang={language}
-        // position={position}
-        // countryCodes={countryCodes}
-        // limit={limit}
-        filterByCountryCode={['dk', 'sa']}
-        // filterByCircle={filterByCircle}
-        // filterByRect={filterByRect}
-        // filterByPlace={filterByPlace}
-        // biasByCountryCode={biasByCountryCode}
-        // biasByCircle={biasByCircle}
-        // biasByRect={biasByRect}
-        // biasByProximity={biasByProximity}
+        filterByCountryCode={['dk', 'sa']} // Denmark and Saudi Arabia
         placeSelect={onPlaceSelect}
         suggestionsChange={onSuggestionChange}
       />

diff --git a/frontend/src/css/multiselector.css b/frontend/src/css/multiselector.css
@@ -0,0 +1,31 @@
+.select__menu {
+  background-color: #dddddd9b !important;
+}
+
+.react-select-container {
+  background-color: transparent;
+}
+
+.react-select__control {
+  font-size: small;
+}
+
+.select__placeholder {
+  font-size: 14px;
+}
+
+.react-select__indicators {
+  color: black;
+  font-size: 12px;
+}
+
+.select__menu-list {
+  background-color: #dddddd9b;
+  color: var(--background);
+  font-size: 12px;
+}
+.select__option {
+  background-color: black;
+  color: black;
+  font-size: 12px;
+}
diff --git a/frontend/src/models/conditions.ts b/frontend/src/models/conditions.ts
@@ -15,6 +15,33 @@ export const conditionTypes = [
   Enrg,
 ];
 
+// Options for condition indicator multiselect
+
+export const MultiSelectOptions = [
+  { value: 'ALL', label: 'ALL' },
+  { value: 'KPI', label: 'KPI' },
+  { value: 'DI', label: 'DI' },
+  { value: 'IRI', label: 'IRI' },
+  { value: 'Mu', label: 'Mu' },
+  { value: 'E_norm', label: 'E_norm' },
+];
+
+// MultiMode manager
+
+export interface MultiMode {
+  count?: number;
+  mode?: any;
+  ALL?: boolean;
+}
+
+// MultiMode manager default
+
+export const DefaultMode: MultiMode = {
+  count: 5,
+  mode: ['KPI', 'DI', 'IRI', 'Mu', 'E_norm'],
+  ALL: true,
+};
+
 export interface YearMonth {
   year: number;
   month: number;