component page graphs now render

src/component/ComponentSettings.tsx

@@ -273,8 +273,6 @@ export default function ComponentSettings(props: Props) {
 
   const hasAvailablePositions = (component: Component) => {
     // return true // TODO: actually fix this
-    console.log(component.settings.addressType)
-    console.log(quack.AddressType.ADDRESS_TYPE_INCREMENTAL)
     if (component.settings.addressType === quack.AddressType.ADDRESS_TYPE_INCREMENTAL) {
       return true;
     }

src/component/ComponentTypeChip.tsx

@@ -1,20 +1,18 @@
 import {
   Chip,
   Tooltip,
-  makeStyles,
-  createStyles,
   Theme,
   Avatar,
-  useTheme
-} from "@material-ui/core";
-import { purple } from "@material-ui/core/colors";
-import DefaultIcon from "@material-ui/icons/Memory";
+  useTheme,
+} from "@mui/material";
 import { getDescription, GetComponentIcon } from "pbHelpers/ComponentType";
-import React from "react";
 import { Component } from "models";
+import { purple } from "@mui/material/colors";
+import { makeStyles } from "@mui/styles";
+import { Memory as DefaultIcon } from "@mui/icons-material"
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
     icon: {
       color: purple["500"]
     },
@@ -23,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) =>
       width: theme.spacing(2.5)
     }
   })
-);
+});
 
 interface Props {
   component: Component;
@@ -36,7 +34,7 @@ export default function ComponentTypeChip(props: Props) {
   const classes = useStyles();
 
   const icon = () => {
-    let componentIcon = GetComponentIcon(type, subtype, theme.palette.type);
+    let componentIcon = GetComponentIcon(type, subtype, theme.palette.mode);
     return componentIcon ? (
       <Avatar
         variant="square"

src/component/MeasurementSummary.tsx

@@ -1,4 +1,10 @@
-import { Box, Grid, Typography, makeStyles, createStyles, Theme } from "@material-ui/core";
+import { 
+  Box, 
+  Grid, 
+  Typography,
+  Theme 
+} from "@mui/material";
+import { makeStyles } from "@mui/styles";
 import { Component } from "models";
 import moment from "moment";
 import { getMeasurementSummary, Summary } from "pbHelpers/ComponentType";
@@ -16,8 +22,8 @@ interface Props {
   omitTime?: boolean;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
     "@keyframes ripple": {
       from: {
         transform: "scale(.8)",
@@ -39,7 +45,7 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: "transparent"
     }
   })
-);
+});
 
 //TODO: deprecated as unit measurements use a new measurement summary file
 export default function MeasurementSummary(props: Props) {
@@ -148,7 +154,7 @@ export default function MeasurementSummary(props: Props) {
     const blacklist: Array<any> = [];
     const filteredSummaries = summaries.filter((item: any) => !blacklist.includes(item.label));
     return (
-      <Grid container direction="row" justify={centered ? "center" : "flex-start"} spacing={1}>
+      <Grid container direction="row" justifyContent={centered ? "center" : "flex-start"} spacing={1}>
         {filteredSummaries.map((summary: Summary, i: number) => {
           let sumVal = summary.value;
           if (component.settings.type === quack.ComponentType.COMPONENT_TYPE_EDGE_TRIGGERED) {