got rid of a bunch of old material-ui references and fixed a map import

src/bin/BinActions.tsx

@@ -12,7 +12,6 @@ import RemoveSelfIcon from "@mui/icons-material/ExitToApp";
 import MoreIcon from "@mui/icons-material/MoreVert";
 import GroupSettingsIcon from "@mui/icons-material/Settings";
 import ShareObjectIcon from "@mui/icons-material/Share";
-//import SensorIcon from "@material-ui/icons/Sensor";
 import SensorIcon from "@mui/icons-material/SettingsInputAntenna";
 import ObjectUsersIcon from "@mui/icons-material/AccountCircle";
 import ObjectTeamsIcon from "@mui/icons-material/SupervisedUserCircle";

src/bin/BinComponents.tsx

@@ -30,7 +30,6 @@ import { Component, Device } from "models";
 import { pond } from "protobuf-ts/pond";
 import React, { useCallback, useEffect, useState } from "react";
 import { useComponentAPI, useDeviceAPI, useSnackbar } from "hooks";
-// import { Autocomplete } from "@material-ui/lab";
 import { useBinAPI } from "providers";
 import { GetComponentIcon } from "pbHelpers/ComponentType";
 import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank, Remove } from "@mui/icons-material";

src/bin/BinVisualizerV2.tsx

@@ -26,7 +26,6 @@ import {
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
 import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
 import RefreshIcon from "@mui/icons-material/Refresh";
-// import { Skeleton, ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
 import HumidityIcon from "component/HumidityIcon";
 import TemperatureIcon from "component/TemperatureIcon";
 import GrainDescriber, { GrainOptions, ToGrainOption } from "grain/GrainDescriber";

src/common/DiffHistory.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-// import { createStyles, Theme, makeStyles, fade } from "@material-ui/core/styles";
 import { detailedDiff } from "deep-object-diff";
 import { 
   List, 
@@ -13,9 +12,7 @@ import {
 } from "@mui/material";
 import { Add, ChangeHistory, Remove, Face, Sync } from "@mui/icons-material";
 import { amber, red, blue, green } from "@mui/material/colors";
-// import MaterialTable from "material-table";
 import moment from "moment";
-// import { getTableIcons } from "common/ResponsiveTable";
 import { pond } from "protobuf-ts/pond";
 import { useUserAPI } from "hooks";
 import { useMobile } from "hooks";
@@ -28,7 +25,7 @@ const addedColour = alpha(green[600], 0.25);
 const deletedColour = alpha(red[600], 0.25);
 const updatedColour = alpha(blue[600], 0.25);
 const resyncedColour = alpha(amber[600], 0.25);
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles((_theme: Theme) => {
   return ({
     added: {
       backgroundColor: addedColour
@@ -270,15 +267,15 @@ export default function DiffHistory(props: Props) {
   const {
     kind,
     name,
-    headerStyle,
+    // headerStyle,
     cellStyle,
     list,
     translateKey,
     translateValue,
     showTitle,
-    noPaging,
-    sortingEnabled,
-    filteringEnabled,
+    // noPaging,
+    // sortingEnabled,
+    // filteringEnabled,
     drawer
   } = props;
   const userAPI = useUserAPI();
@@ -365,7 +362,7 @@ export default function DiffHistory(props: Props) {
               resolve({ data: data, page: page, totalCount: res.total });
             });
         })
-        .catch((err: any) => {
+        .catch((_err: any) => {
           setData([]);
           resolve({ data: [], page: 0, totalCount: 0 });
         });
@@ -487,7 +484,7 @@ export default function DiffHistory(props: Props) {
         />
       ))}
       columns={columns()}
-      total={0} 
+      total={total} 
       pageSize={0} 
       page={0} 
       setPage={setPage} 

src/common/Graph.tsx

@@ -1,9 +1,6 @@
 import React from "react";
-// import { darken, withTheme, WithTheme } from "@material-ui/core/styles";
-// import withWidth, { WithWidth } from "@material-ui/core/withWidth";
 import { Range } from "common/RangeInput";
 import moment from "moment";
-// import { RouteComponentProps, withRouter } from "react-router";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { abbreviateNum } from "utils/numbers";
 import { or } from "utils/types";
@@ -12,14 +9,12 @@ import {
   ScalePropType,
   VictoryArea,
   VictoryAxis,
-  VictoryBar,
   VictoryChart,
   VictoryLabel,
   VictoryLegend,
   VictoryLine,
   VictoryPie,
   VictoryScatter,
-  VictoryStringOrNumberCallback,
   VictoryTheme,
   VictoryTooltip,
   VictoryTooltipProps
@@ -34,9 +29,8 @@ import {
   Legend
 } from "recharts";
 import { pond } from "protobuf-ts/pond";
-import { styled, WithTheme } from "@mui/styles";
 import { getTextPrimary, getTextSecondary } from "theme/text";
-import { darken, useMediaQuery, useTheme, withTheme } from "@mui/material";
+import { darken, useTheme } from "@mui/material";
 import { useWidth } from "hooks";
 import { useNavigate } from "react-router-dom";
 const VictoryCursorVoronoiContainer: any = createContainer("cursor", "voronoi");
@@ -686,7 +680,6 @@ class Graph extends React.Component<Props, State> {
 
   render() {
     const theme = useTheme()
-    const width = useWidth()
     const { graphComponent } = this.props;
     const { interactionComponents, overlayComponents, dataComponent, updateCounter } = this.state;
 

src/common/MapGL.tsx

@@ -0,0 +1,103 @@
+import { Tooltip } from "@mui/material";
+import { Beenhere } from "@mui/icons-material";
+import { useThemeType } from "hooks";
+import moment from "moment";
+import React, { useEffect, useState } from "react";
+import ReactMapGL, { Marker } from "react-map-gl";
+
+export interface Coordinate {
+  latitude: number;
+  longitude: number;
+  timestamp: string;
+}
+interface Props {
+  paths: Map<string, Coordinate[]>;
+}
+
+export default function MapGL(props: Props) {
+  const themeType = useThemeType();
+  const { paths } = props;
+  const [viewport, setViewport] = useState({
+    latitude: 52.8118612,
+    longitude: -106.2459731,
+    zoom: 12
+  });
+
+  useEffect(() => {
+    let lat = 52.8118612;
+    let long = -106.2459731;
+    if (paths.size > 0) {
+      let first = Array.from(paths.values())[0][0];
+      if (first) {
+        lat = first.latitude;
+        long = first.longitude;
+      }
+    }
+    setViewport({
+      latitude: lat,
+      longitude: long,
+      zoom: 8
+    });
+  }, [paths]);
+
+  /*
+  const changeViewport = (vp: typeof viewport) => {
+    let transition: any = vp;
+    if (!transition || transition.width === 0 || transition.height === 0) return;
+    setViewport(vp);
+  };
+  */
+
+  const markers = (): any[] => {
+    let elems: any[] = [];
+    paths.forEach((path: Coordinate[], name: string) => {
+      let num = path.length;
+      let step = 1;
+      if (num > 0) {
+        step = 1.0 / (num * 1.0);
+      }
+      path
+        .sort((a: Coordinate, b: Coordinate) => {
+          if (a.timestamp < b.timestamp) return 1;
+          else if (b.timestamp < a.timestamp) return -1;
+          return 0;
+        })
+        .forEach((coord: Coordinate, i: number) => {
+          let ts = moment(coord.timestamp);
+          let title = coord.latitude + ", " + coord.longitude;
+          if (ts.isValid()) {
+            title += " @ " + ts.format("lll");
+          }
+          elems.push(
+            <Marker key={name + i} latitude={coord.latitude} longitude={coord.longitude}>
+              <React.Fragment>
+                <Tooltip title={title}>
+                  <Beenhere style={{ opacity: step * (num - i) }} />
+                </Tooltip>
+              </React.Fragment>
+            </Marker>
+          );
+        });
+    });
+    return elems;
+  };
+
+  let style =
+    themeType === "dark" ? "mapbox://styles/mapbox/dark-v10" : "mapbox://styles/mapbox/light-v10";
+  return (
+    <ReactMapGL
+      mapStyle={style}
+      width="100%"
+      height="100%"
+      {...viewport}
+      onViewStateChange={(e) => {
+        setViewport({
+          longitude: e.viewState.longitude,
+          latitude: e.viewState.latitude,
+          zoom: e.viewState.zoom,
+        });
+      }}>
+      {markers()}
+    </ReactMapGL>
+  );
+}

src/common/NotificationButton.tsx

@@ -1,6 +1,4 @@
 import { IconButton, Tooltip } from "@mui/material";
-// import { Theme } from "@/styles/createMuiTheme";
-// import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
 import NotificationsEnabledIcon from "@mui/icons-material/NotificationsActive";
 import NotificationsDisabledIcon from "@mui/icons-material/NotificationsOff";
 interface Props {

src/common/OutlinedBox.tsx

@@ -1,6 +1,5 @@
 import { Box, BoxProps, Theme, InputLabel } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-// import NotchedOutline from "@material-ui/core/OutlinedInput/NotchedOutline";
 import React, { PropsWithChildren } from "react";
 
 const useStyles = makeStyles((theme: Theme) => {

src/common/RangeInput.tsx

@@ -4,8 +4,6 @@ import {
   Grid2 as Grid, 
   TextField 
 } from "@mui/material";
-// import { Theme } from "@material-ui/core/styles/createMuiTheme";
-// import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
 import { Theme } from "@mui/material";
 import { withStyles, WithStyles } from "@mui/styles";
 import React from "react";

src/common/SearchSelect.tsx

@@ -1,7 +1,6 @@
 import { Autocomplete, Avatar, Box, CircularProgress, createFilterOptions } from "@mui/material";
 import TextField from "@mui/material/TextField";
 import { makeStyles } from "@mui/styles";
-// import Autocomplete, { createFilterOptions } from "@material-ui/lab/Autocomplete";
 import { isArray } from "lodash";
 import React, { CSSProperties } from "react";
 

src/common/SmartBreadcrumb.tsx

@@ -10,10 +10,7 @@ import {
   useTheme
 } from "@mui/material";
 import { Replay } from "@mui/icons-material";
-// import Link, { LinkProps } from "@material-ui/core/Link";
-// import { Skeleton } from "@mui/l";
 import { useMobile } from "hooks";
-// import { MatchParams } from "navigation/Routes";
 import { ReactNode } from "react";
 import { useLocation } from "react-router";
 import { Link as RouterLink } from "react-router-dom";

src/common/Tour.tsx

@@ -1,4 +1,3 @@
-// import { useTheme, makeStyles, createStyles, Theme } from "@material-ui/core/styles";
 import Joyride, { Step, CallBackProps, STATUS, TooltipRenderProps, Locale } from "react-joyride";
 import {
   Button,

src/common/time/DateSelect.tsx

@@ -10,7 +10,6 @@ import {
   Select,
   Theme
 } from "@mui/material";
-// import { DateRange, StaticDateRangePicker, DateRangeDelimiter } from "@material-ui/pickers";
 import moment, { Moment } from "moment";
 import React from "react";
 import ReactDOM from "react-dom";

src/common/time/TimeBar.tsx

@@ -3,7 +3,6 @@ import {
   DialogActions,
   DialogContent,
   Grid,
-  TextField,
   Theme,
   Typography
 } from "@mui/material";
@@ -11,11 +10,9 @@ import moment, { Moment } from "moment";
 import { DateRange as DateIcon } from "@mui/icons-material";
 import React, { useEffect, useState } from "react";
 import ResponsiveDialog from "common/ResponsiveDialog";
-// import { DateRange, DateRangeDelimiter, StaticDateRangePicker } from "@material-ui/pickers";
 import { DateRangePreset, GetDefaultDateRange, SetDefaultPreset } from "./DateRange";
 import { useThemeType } from "hooks";
 import { makeStyles } from "@mui/styles";
-import dayjs from "dayjs";
 
 interface Props {
   startDate: Moment;

src/component/ComponentForm.tsx

@@ -22,17 +22,14 @@ import {
   ExpandMore,
   Close as CloseIcon
 } from "@mui/icons-material";
-// import { Alert, AlertTitle } from "@material-ui/lab";
 import PeriodSelect from "common/time/PeriodSelect";
 import SearchSelect, { Option } from "common/SearchSelect";
-// import { GrainOptions } from "grain/GrainDescriber";
 import { cloneDeep } from "lodash";
 import { Component, Device } from "models";
 import {
   extension,
   getMeasurements,
   hasDimensions,
-  hasFan,
   isController,
   isMultiSensor,
   primaryMeasurement
@@ -42,16 +39,12 @@ import { pond } from "protobuf-ts/pond";
 import { quack } from "protobuf-ts/quack";
 import React, { useEffect, useState } from "react";
 import { bestUnit, milliToX } from "common/time/duration";
-// import CompModes from "component/ComponentMode.json";
-// import green from "@material-ui/core/colors/green";
-// import red from "@material-ui/core/colors/red";
-// import FanPicker from "fans/fanPicker";
 import { useGlobalState } from "providers";
 import { green, red } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import { getDistanceUnit } from "utils";
 import { GrainOptions } from "grain";
-// import { getDistanceUnit } from "utils";
+import CompModes from "component/ComponentMode.json";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -168,11 +161,11 @@ export default function ComponentForm(props: Props) {
       formComponent.settings.measurementPeriodMs !== formComponent.settings.reportPeriodMs
     );
     setDataUsageWarningDismissed(localStorage.getItem("dataUsageWarningDismissed") !== null);
-    // CompModes.forEach((mode: any) => {
-    //   if (formComponent.type() === mode.type && formComponent.subType() === mode.subtype) {
-    //     setCompMode(mode);
-    //   }
-    // });
+    CompModes.forEach((mode: any) => {
+      if (formComponent.type() === mode.type && formComponent.subType() === mode.subtype) {
+        setCompMode(mode);
+      }
+    });
 
     //get the dimension values for the form and convert them to the form display values (m or ft)
     let length = formComponent.settings.containerDimensions?.lengthCm ?? 0;

src/component/ComponentOrder.tsx

@@ -15,7 +15,6 @@ import {
   Theme
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-//import DragIcon from "@material-ui/icons/DragHandle";
 import { DragHandle as DragIcon } from "@mui/icons-material";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { useDeviceAPI, usePrevious, useSnackbar } from "hooks";
@@ -23,11 +22,11 @@ import { cloneDeep } from "lodash";
 import { Component, Device } from "models";
 import { sortComponents } from "pbHelpers/Component";
 import { pond, quack } from "protobuf-ts/pond";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
 import { useThemeType } from "../hooks/useThemeType";
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles((_theme: Theme) => {
     const themeType = useThemeType()
     return ({
     item: {

src/component/ComponentSettings.tsx

@@ -54,10 +54,6 @@ import { or } from "utils/types";
 import { ConfigurablePin } from "pbHelpers/AddressTypes";
 import ColourPicker from "common/ColourPicker";
 import classNames from "classnames";
-// import green from "@material-ui/core/colors/green";
-// import AddIcon from "@material-ui/icons/AddCircle";
-// import RemoveIcon from "@material-ui/icons/RemoveCircle";
-// import red from "@material-ui/core/colors/red";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import ComponentForm from "./ComponentForm";
 import { green, red } from "@mui/material/colors";

src/component/ExportDataSettings.tsx

@@ -13,8 +13,6 @@ import {
   Typography,
   Theme
 } from "@mui/material"
-//import { Theme } from "@material-ui/core/styles/createMuiTheme";
-//import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
 import { withStyles, WithStyles } from "@mui/styles";
 
 import DateSelect from "common/time/DateSelect";
@@ -93,7 +91,7 @@ class ExportDataSettings extends React.Component<Props, State> {
   };
 
   submit = () => {
-    const { device, component, newMeasurements, user } = this.props;
+    const { device, component, user } = this.props;
     const { startDate, endDate } = this.state;
     const { sampleMeasurements, listUnitMeasurements } = this.context;
 

src/component/GPS.tsx

@@ -1,4 +1,3 @@
-//import { withStyles, Theme, WithTheme, createStyles, WithStyles } from "@material-ui/core/styles";
 import { Theme } from "@mui/material"
 import { withStyles, createStyles, WithTheme, WithStyles } from "@mui/styles";
 import React from "react";

src/component/SensorLight.tsx

@@ -1,11 +1,10 @@
-//import { Box, createStyles, makeStyles, Theme } from "@material-ui/core";
 import { Box, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { Component } from "models";
 import { getMeasurementSummary } from "pbHelpers/ComponentType";
 import { pond } from "protobuf-ts/pond";
 import { quack } from "protobuf-ts/quack";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { or } from "utils";
 
 interface Props {

src/component/UnitMeasurementSummary.tsx

@@ -5,7 +5,6 @@ import { convertedUnitMeasurement } from "models/UnitMeasurement";
 import moment from "moment";
 import { pond } from "protobuf-ts/pond";
 import React, { useEffect, useState } from "react";
-// import Divider from "@material-ui/core/Divider";
 import { Plenum } from "models/Plenum";
 import { Pressure } from "models/Pressure";
 import { GrainCable } from "models/GrainCable";

src/device/VersionChip.tsx

@@ -1,6 +1,4 @@
 import { Chip, Theme, Tooltip } from "@mui/material";
-// import { Theme } from "@material-ui/core/styles/createMuiTheme";
-// import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
 import React from "react";
 import { getFirmwareVersionHelper } from "pbHelpers/FirmwareVersion";
 import { withStyles, WithStyles } from "@mui/styles";

src/services/google/mapHelpers.ts

@@ -1,3 +1,4 @@
+import { quack } from "protobuf-ts/quack";
 import { or } from "utils/types";
 
 function decode(encoded: string) {
@@ -10,16 +11,16 @@ function decode(encoded: string) {
   return res;
 }
 
-export function parseGPS(gps: { location: any; latitude: number; longitude: number; uncertainty: number; wifiAccessPoints: any[]; cellTower: any; }) {
+export function parseGPS(gps: { location: any; latitude: number; longitude: number; uncertainty: number; wifiAccessPoints: any[]; cellTower: any; } | quack.GPS | null | undefined) {
   gps = or(gps, {});
   let lat = 0;
   let lng = 0;
   let accuracy = 0;
   let request: { wifiAccessPoints?: any; cellTowers?: any; } | undefined = undefined;
   if (gps.location) {
-    lat = gps.latitude;
-    lng = gps.longitude;
-    accuracy = gps.uncertainty;
+    lat = gps.location.latitude;
+    lng = gps.location.latitude;
+    accuracy = gps.location.uncertainty;
   } else if (gps.wifiAccessPoints) {
     request = { wifiAccessPoints: [] };
     gps.wifiAccessPoints.forEach(function(ap) {