WIP: Dropdown Multiselector

frontend/package.json

@@ -9,6 +9,7 @@
     "chart.js": "^4.4.0",
     "d3": "^7.8.5",
     "leaflet": "^1.9.4",
+    "multiselect-react-dropdown": "^2.0.25",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-datepicker": "^4.19.0",

frontend/src/Components/Conditions/ConditionsMap.tsx

@@ -4,8 +4,10 @@ import { GeoJSON } from 'react-leaflet';
 import { Layer, PathOptions } from 'leaflet';
 import { Feature, FeatureCollection } from 'geojson';
 
-import Search from '../Map/Search';
-import MonthFilter from '../Map/MonthFilter';
+import Search from '../Map/Inputs/Search';
+import MonthFilter from '../Map/Inputs/MonthFilter';
+import MultiSelector from '../Map/Inputs/MultiSelector';
+
 import MapWrapper from '../Map/MapWrapper';
 import Selector from '../Map/Inputs/Selector';
 
@@ -411,7 +413,18 @@ const ConditionsMap = (props: any) => {
           />
         </div>
         <div className="filter-container">
-          <div className="input-selector-container">
+          <MultiSelector
+            options={[
+              { key: 'ALL' },
+              { key: 'KPI' },
+              { key: 'DI' },
+              { key: 'IRI' },
+              { key: 'Mu' },
+              { key: 'E_norm' },
+            ]}
+            onOptionChange={console.log(value)}
+          />
+          {/* <div className="input-selector-container">
             <select
               className="input"
               defaultValue={mode}
@@ -424,7 +437,7 @@ const ConditionsMap = (props: any) => {
               ))}
             </select>
             <p className="labelling">Condition Type</p>
-          </div>
+          </div> */}
         </div>
         <div className="filter-container">
           <Selector

frontend/src/Components/Map/Inputs/MultiSelector.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+import Multiselect from 'multiselect-react-dropdown';
+
+// FIGURE THIS OUT
+
+interface Props {
+  /**
+   * value: text input in the search bar
+   * onPlaceSelect: function taking argument "value"
+   */
+
+  options: any[];
+  onOptionChange: (value: any) => void;
+}
+
+// options formatting:
+// options = [{key: "ALL", key: "KPI", .... }]
+
+/**
+ * Component rendering Search bar
+ */
+
+const MultiSelect: React.FC<Props> = ({ options, onOptionChange }) => {
+  const [selectedOptions, setOptions] = useState<String[]>([]);
+
+  function onChange(selectedList) {}
+
+  return (
+    <Multiselect
+      // Options to display in the dropdown
+      displayValue="key"
+      options={(options: string[]) => setOptions(options)}
+      onSelect={(onOptionChange, onChange)} // Function will trigger on select event
+      onRemove={onOptionChange} // Function will trigger on remove event
+      showCheckbox
+    />
+  );
+};
+
+export default MultiSelect;