fix multi-select

Author: johnnzhou

package-lock.json

@@ -11,6 +11,7 @@
     "@mui/icons-material": "^6.4.7",
     "@mui/material": "^6.4.7",
     "@mui/x-date-pickers": "^7.27.3",
+    "add": "^2.0.6",
     "arquero": "^8.0.1",
     "axios": "^1.6.7",
     "cors": "^2.8.5",
@@ -24,6 +25,7 @@
     "react-dom": "^19.0.0",
     "react-router": "^7.3.0",
     "react-router-dom": "^7.3.0",
+    "react-select": "^5.10.1",
     "web-vitals": "^4.2.4"
   },
   "scripts": {

package.json

@@ -8,7 +8,7 @@ import DialogTitle from '@mui/material/DialogTitle';
 import TextField from '@mui/material/TextField';
 import Slider from '@mui/material/Slider';
 import QrCodeIcon from '@mui/icons-material/QrCode';
-import QRCode from 'qrcode.react';
+import { QRCodeCanvas } from 'qrcode.react';
 
 interface ViewQRCodeProp {
   identity: string;
@@ -47,10 +47,10 @@ export default function ViewQRCode(props: ViewQRCodeProp) {
           <DialogContentText>
             The code will be valid for 30 minuites
           </DialogContentText>
-          <QRCode
+          <QRCodeCanvas
             size={size}
             value={props.qrCode.length > 1500 ? '' : props.qrCode}
-          ></QRCode>
+          ></QRCodeCanvas>
           <Slider
             defaultValue={512}
             min={64}

src/admin/ViewQRCode.tsx

@@ -1,12 +1,21 @@
-// import React from 'react';
-import { Route, BrowserRouter, Routes } from 'react-router-dom';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Vis from './vis/Vis';
 import Login from './admin/Login';
 import AdminPortal from './admin/AdminPortal';
 import './index.css';
 
-ReactDOM.render(
+// Get the root element
+const rootElement = document.getElementById('root');
+
+// Make sure the element exists
+if (!rootElement) throw new Error('Failed to find the root element');
+
+// Create a root
+const root = createRoot(rootElement);
+
+// Render your app
+root.render(
   <BrowserRouter>
     <Routes>
       <Route path='/' element={<Vis />} />
@@ -23,6 +32,5 @@ ReactDOM.render(
         element={<AdminPortal page='edit-data' />}
       />
     </Routes>
-  </BrowserRouter>,
-  document.getElementById('root'),
+  </BrowserRouter>
 );

src/index.tsx

@@ -20,7 +20,7 @@ type DisplayOption = {
   checked: boolean;
 };
 
-type SiteStatus = 'active' | 'confirmed' | 'in-conversation';
+type SiteStatus = 'active' | 'confirmed' | 'in-conversation' | 'unknown';
 
 type DeviceType = 'CPEL' | 'CPEH' | 'LGG8' | 'Pixel4';
 

src/types.d.ts

@@ -39,11 +39,13 @@ const DateSelect = (props: SidebarProps) => {
             label='Start Date'
             value={dayjs(props.timeFrom)}
             onChange={handleChangeTimeFrom}
+            disabled={!props.loading}
           />
           <DateTimePicker
             label='End Date'
             value={dayjs(props.timeTo)}
             onChange={handleChangeTimeTo}
+            disabled={!props.loading}
           />
         </Stack>
       </LocalizationProvider>

src/vis/DateSelect.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import { MultiSelect } from 'react-multi-select-component';
+import Select from 'react-select';
 import { DEVICE_OPTIONS } from '../utils/config';
 import '@fontsource/roboto';
 
@@ -12,22 +12,24 @@ interface SidebarProps {
 }
 
 const DeviceSelect = (props: SidebarProps) => {
-  const siteOptions = DEVICE_OPTIONS.map(({ label, value }) => ({
+  const deviceOptions = DEVICE_OPTIONS.map(({ label, value }) => ({
     label: value,
     value: value,
   }));
+  
   return (
-    <Box mb={2} style={{ zIndex: 1450 }}>
+    <Box mb={2} sx={{ zIndex: 1450 }}>
       <Typography variant='overline'>Display markers</Typography>
-      <MultiSelect
-        options={siteOptions}
+      <Select
+        isMulti
+        options={deviceOptions}
         value={props.selectedDevices}
-        onChange={props.setSelectedDevices}
-        labelledBy='Select'
-        disabled={props.loading}
+        onChange={(selected) => props.setSelectedDevices(selected as DeviceOption[])}
+        isDisabled={props.loading}
+        placeholder="Select..."
       />
     </Box>
   );
 };
 
-export default DeviceSelect;
+export default DeviceSelect;

src/vis/DeviceSelect.tsx

@@ -55,6 +55,7 @@ export default function DisplaySelection(props: DisplayOptionsProps) {
                   checked={option.checked}
                   name={option.name}
                   onChange={handleChange}
+                  disabled={!props.loading}
                 />
               }
               label={option.label}