optimize bundle size by removing momentjs, and reducing the browser s…

…cope

package.json

@@ -18,7 +18,7 @@
     "codeflask": "^1.4.1",
     "js-yaml": "^4.1.0",
     "material-ui-confirm": "^3.0.5",
-    "moment": "^2.29.1",
+    "dayjs": "^1.11.13",
     "mqtt": "^5.7.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
@@ -43,16 +43,19 @@
     "extends": "react-app"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+   "production": [
+     "> 0.5%",
+     "last 2 versions",
+     "Firefox ESR",
+     "not dead",
+     "safari >= 15.4",
+     "iOS >= 15.4"
+   ],
+   "development": [
+     "last 1 chrome version",
+     "last 1 firefox version",
+     "last 1 safari version"
+   ]
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

src/EditConfig.jsx

@@ -16,7 +16,7 @@ import Editor from 'react-simple-code-editor';
 import { highlight, languages } from 'prismjs';
 import 'prismjs/components/prism-ini';
 
-import moment from "moment";
+import dayjs from "dayjs";
 
 
 function EditableCodeDiv(props) {
@@ -153,7 +153,7 @@ function EditableCodeDiv(props) {
                 onChange={onSelectionHistoricalChange}
               >
                 {state.historicalConfigs.map((v, i) => (
-                  <MenuItem key={v.timestamp} value={v.timestamp}>{i === 0 ? "Current" : moment(v.timestamp).format("MMM DD [at] hh:mm a")}</MenuItem>
+                  <MenuItem key={v.timestamp} value={v.timestamp}>{i === 0 ? "Current" : dayjs(v.timestamp).format("MMM DD, YYYY [at] hh:mm a")}</MenuItem>
                 ))}
               </Select>
             </div>

src/Experiments.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import moment from "moment";
+import dayjs from "dayjs";
 
 import FormLabel from '@mui/material/FormLabel';
 import FormControl from '@mui/material/FormControl';
@@ -49,7 +49,7 @@ function ExperimentSelection(props) {
   }
 
   const experimentOptions = experiments.map((v, index) => {
-            return <MenuItem key={index} value={v.experiment}>{v.experiment +  (v.created_at ? ` (${moment(v.created_at).format("MMMM D, YYYY")})` : "")}</MenuItem>
+            return <MenuItem key={index} value={v.experiment}>{v.experiment +  (v.created_at ? ` (${dayjs(v.created_at).format("MMMM D, YYYY")})` : "")}</MenuItem>
   })
 
   return (
@@ -70,7 +70,7 @@ function ExperimentSelection(props) {
           Experiment created
         </Typography>
         <Typography variant="body2" style={{whiteSpace: "pre-line"}} gutterBottom>
-          {moment(selectedExperient?.created_at).format("MMMM D, YYYY, h:mm a")}
+          {dayjs(selectedExperient?.created_at).format("MMMM D, YYYY, h:mm a")}
         </Typography>
         <Typography sx={{ fontSize: 16, pt: 1}} color="text.secondary" gutterBottom>
           Description

src/ExportData.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import moment from "moment";
+import dayjs from "dayjs";
 
 import Grid from '@mui/material/Grid';
 import FormLabel from '@mui/material/FormLabel';
@@ -70,7 +70,7 @@ function ExperimentSelection(props) {
           onChange={handleExperimentSelectionChange}
         >
           {experiments.map((v) => {
-            return <MenuItem key={v.experiment} value={v.experiment}>{v.experiment +  (v.created_at ? ` (started ${moment(v.created_at).format("MMMM D, YYYY")})` : "")}</MenuItem>
+            return <MenuItem key={v.experiment} value={v.experiment}>{v.experiment +  (v.created_at ? ` (started ${dayjs(v.created_at).format("MMMM D, YYYY")})` : "")}</MenuItem>
             }
           )}
         </Select>

src/Pioreactor.jsx

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import React, {useState, useEffect} from "react";
 
@@ -1281,7 +1281,7 @@ function SettingsActionsDialog(props) {
                     Last updated at
                 </td>
                 <td >
-                  <StylizedCode>{voltageInfo.timestamp ? moment.utc(voltageInfo.timestamp, 'YYYY-MM-DD[T]HH:mm:ss.SSSSS[Z]').local().format('MMMM Do, h:mm a') : "-"}</StylizedCode>
+                  <StylizedCode>{voltageInfo.timestamp ? dayjs.utc(voltageInfo.timestamp, 'YYYY-MM-DD[T]HH:mm:ss.SSSSS[Z]').local().format('MMMM Do, h:mm a') : "-"}</StylizedCode>
                 </td>
               </tr>
             </table>

src/Pioreactors.jsx

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import React, {useState, useEffect} from "react";
 
@@ -1474,7 +1474,7 @@ function SettingsActionsDialog(props) {
                     Last updated at
                 </td>
                 <td >
-                  <StylizedCode>{voltageInfo.timestamp ? moment.utc(voltageInfo.timestamp, 'YYYY-MM-DD[T]HH:mm:ss.SSSSS[Z]').local().format('MMMM Do, h:mm a') : "-"}</StylizedCode>
+                  <StylizedCode>{voltageInfo.timestamp ? dayjs.utc(voltageInfo.timestamp, 'YYYY-MM-DD[T]HH:mm:ss.SSSSS[Z]').local().format('MMMM Do, h:mm a') : "-"}</StylizedCode>
                 </td>
               </tr>
             </table>

src/Profiles.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import moment from "moment";
+import dayjs from "dayjs";
 
 import FormControl from '@mui/material/FormControl';
 import Grid from "@mui/material/Grid";
@@ -305,7 +305,7 @@ function ProfilesContainer({experiment, config}){
                 <CalendarTodayIcon sx={{ fontSize: 12, verticalAlign: "-1px" }}/> Profile started at:&nbsp;
               </Box>
               <Box fontWeight="fontWeightRegular" sx={{mr: "1%", display:"inline-block"}}>
-                {(startTime && moment(startTime).format("dddd, MMMM D, h:mm a")) || "-"}
+                {(startTime && dayjs(startTime).format("dddd, MMMM D, h:mm a")) || "-"}
               </Box>
             </Box>
 

src/StartNewExperiment.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import moment from "moment";
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 
 import Grid from '@mui/material/Grid';
 import FormGroup from '@mui/material/FormGroup';
@@ -14,14 +15,11 @@ import {useNavigate } from 'react-router-dom';
 import SaveIcon from '@mui/icons-material/Save';
 import LoadingButton from '@mui/lab/LoadingButton';
 
-
-//import CleaningScript from "./components/CleaningScript"
-// import AssignLabels from "./components/AssignLabels"
-//import RunFromExperimentProfile from "./components/RunFromExperimentProfile"
-//import StartSensors from "./components/StartSensors"
-//import StartCalculations from "./components/StartCalculations"
 import { useExperiment } from './providers/ExperimentContext';
 
+// Activate the UTC plugin
+dayjs.extend(utc);
+
 
 
 const filter = createFilterOptions();
@@ -104,7 +102,7 @@ function FreeSoloCreateOption(props) {
 
 function ExperimentSummaryForm(props) {
   const { updateExperiment } = useExperiment();
-  const timestamp = moment.utc()
+  const timestamp = dayjs.utc()
   const [formError, setFormError] = React.useState(false);
   const [helperText, setHelperText] = React.useState(" ");
   const [expName, setExpName] = React.useState("");

src/components/ActionManualDosingForm.jsx

@@ -9,7 +9,7 @@ import FormControl from '@mui/material/FormControl';
 import InputAdornment from '@mui/material/InputAdornment';
 import {runPioreactorJob} from "../utilities"
 
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 
 const actionTextField = {
@@ -40,7 +40,7 @@ export default function ActionPumpForm(props) {
     e.preventDefault();
     if (mL > 0) {
 
-      var msg = `Recorded ${actionToAct[manualAction]} of ${mL} mL at ${moment().format('h:mm:ss a')}.`
+      var msg = `Recorded ${actionToAct[manualAction]} of ${mL} mL at ${dayjs().format('h:mm:ss a')}.`
       var params = { ml: parseFloat(mL), source_of_event: "manually", manually: true};
       runPioreactorJob(props.unit, props.experiment, manualAction, [], params)
       setSnackbarMsg(msg)