couple hotfixes:

raised the idle flow constant (could be something entered by the user in the future when hitting the button to retrieve flow events) to be 3.5, also fixed the gate visual to be up at the topp rather than centered as that was causing it to move down the page when flipping to the sensor view

src/gate/GateDevice.tsx

@@ -56,55 +56,6 @@ export default function GateDevice(props: Props) {
   const [lastTemps, setLastTemps] = useState({ t1: 0, t2: 0 });
   const [lastPressures, setLastPressures] = useState({ p1: 0, p2: 0 });
 
-  // const StyledToggleButtonGroup = withStyles(theme => ({
-  //   grouped: {
-  //     margin: theme.spacing(-0.5),
-  //     border: "none",
-  //     padding: theme.spacing(1),
-  //     "&:not(:first-child):not(:last-child)": {
-  //       borderRadius: 24,
-  //       marginRight: theme.spacing(0.5),
-  //       marginLeft: theme.spacing(0.5)
-  //     },
-  //     "&:first-child": {
-  //       borderRadius: 24,
-  //       marginLeft: theme.spacing(0.25)
-  //     },
-  //     "&:last-child": {
-  //       borderRadius: 24,
-  //       marginRight: theme.spacing(0.25)
-  //     }
-  //   },
-  //   root: {
-  //     backgroundColor: darken(
-  //       theme.palette.background.paper,
-  //       getThemeType() === "light" ? 0.05 : 0.25
-  //     ),
-  //     borderRadius: 24,
-  //     content: "border-box"
-  //   }
-  // }))(ToggleButtonGroup);
-
-  // const StyledToggle = withStyles({
-  //   root: {
-  //     backgroundColor: "transparent",
-  //     overflow: "visible",
-  //     content: "content-box",
-  //     "&$selected": {
-  //       backgroundColor: "gold",
-  //       color: "black",
-  //       borderRadius: 24,
-  //       fontWeight: "bold"
-  //     },
-  //     "&$selected:hover": {
-  //       backgroundColor: "rgb(255, 255, 0)",
-  //       color: "black",
-  //       borderRadius: 24
-  //     }
-  //   },
-  //   selected: {}
-  // })(ToggleButton);
-
   useEffect(() => {
     if (comprehensiveDevice.device) {
       setDevice(Device.any(comprehensiveDevice.device));
@@ -340,7 +291,8 @@ export default function GateDevice(props: Props) {
       container
       direction={(isMobile) ? "column" : "row"}
       width="100%"
-      alignItems="center"
+      spacing={(isMobile) ? 7 : 0}
+      //alignItems="center"
       >
       <Grid size={{ sm: 12, lg: isMobile || drawerView ? 12 : 4}} style={{ padding: 10 }}>
         <Box
@@ -363,7 +315,7 @@ export default function GateDevice(props: Props) {
             ]}
           />
         </Box>
-        <Card raised>
+        <Card>
           <GateSVG
             finalTemp={
               gate.gateMutations[device.id().toString()] &&

src/gate/GateFlowGraph.tsx

@@ -70,8 +70,9 @@ export default function GateFlowGraph(props: Props) {
   const classes = useStyles();
   const [flowEvents, setFlowEvents] = useState<pond.AirFlowEvent[]>([]);
   const [eventsLoading, setEventsLoading] = useState(false);
-  const eventThreshold = 5;
-  const idleFlow = 2.44;
+  //these two constants could be entered by the user at time of retrieval
+  const eventThreshold = 5; //the threshold that if crossed from one measurement to the next during a flow event will end the current flow event and start a new one
+  const idleFlow = 3.5; //the mass air flow that must be crossed in order to start a flow event, anything below this will not start an event but must go below this to end an event
 
   useEffect(() => {
     if (loadingChartData) return;
@@ -102,7 +103,6 @@ export default function GateFlowGraph(props: Props) {
                 timestamp: time.valueOf(),
                 value: val.airFlow ?? 0
               };
-
               data.push(newPoint);
               if (!recent || recent.timestamp < newPoint.timestamp) {
                 recent = newPoint;