@zac-apps/helium 2.0.0-beta.13 → 2.0.0-beta.14

package/dist/index.js

@@ -1,18 +1,1909 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useEffect } from 'react';
+import React, { createContext, useContext, useState, useEffect } from 'react';
 import { useImmer } from 'use-immer';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Grid from '@mui/material/Grid';
-import GraphsPanel from '@/helium/panels/GraphsPanel.js';
-import CalculatorPanel from '@/helium/panels/CalculatorPanel.js';
-import SpectrometerSetPanel from '@/helium/panels/SpectrometerSetPanel.js';
-import EstimatedConsumptionPanel from '@/helium/panels/EstimatedConsumptionPanel.js';
-import EstimationPanel from '@/helium/panels/EstimationPanel.js';
-import FillTargetPanel from '@/helium/panels/FillTargetPanel.js';
-import { AppTheme, PublicFetch, Progress, AppGrid } from '@zac-apps/commons';
-import { HeliumContext } from '@/helium/HeliumContext.js';
+import { AppTheme, AppTable, TableHeadCell, DivTitle, AppCard, ErrorAlert, Percentage, SpecSwitch, PublicFetch, Progress, AppGrid } from '@zac-apps/commons';
+import moment from 'moment';
+import Paper from '@mui/material/Paper';
+import { LineChart, Line, CartesianGrid, XAxis, Label, YAxis, ReferenceLine, ReferenceArea, Tooltip } from 'recharts';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Button from '@mui/material/Button';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import TableHead from '@mui/material/TableHead';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import TableBody from '@mui/material/TableBody';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import regression from 'regression';
+import { mean, sqrt, sum } from 'mathjs';
+import IconButton from '@mui/material/IconButton';
+import SaveIcon from '@mui/icons-material/Save';
+import EditIcon from '@mui/icons-material/Edit';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import moment$1 from 'moment/moment.js';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+import FormControl from '@mui/material/FormControl';
+import Checkbox from '@mui/material/Checkbox';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import Chip from '@mui/material/Chip';
+import AddBoxIcon from '@mui/icons-material/AddBox';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+// Define context
+
+var HeliumContext = /*#__PURE__*/createContext(null);
+
+function ShowEstimate(_ref) {
+  var spec = _ref.spec,
+    estimatedBoiloff = _ref.estimatedBoiloff,
+    estimatedError = _ref.estimatedError;
+  var heliumLookupData = useContext(HeliumContext).heliumLookupData;
+
+  // Get stored data
+
+  var storedBoiloff = heliumLookupData.boilOff[spec].toFixed(3) || "N/A";
+
+  // Round values from props
+
+  estimatedBoiloff = estimatedBoiloff.toFixed(3) || "N/A";
+  estimatedError = estimatedError.toFixed(3) || "N/A";
+
+  // Warn if values differ
+
+  var renderEstimatedBoiloff = Math.abs(estimatedBoiloff - storedBoiloff) < 0.01 ? estimatedBoiloff : /*#__PURE__*/jsx("strong", {
+    style: {
+      color: AppTheme.palette.primary.main
+    },
+    children: estimatedBoiloff
+  });
+  return /*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsx("h4", {
+      children: "Boiloff coefficients (%/day)"
+    }), /*#__PURE__*/jsx(Grid, {
+      container: true,
+      children: /*#__PURE__*/jsxs(AppTable, {
+        children: [/*#__PURE__*/jsx(TableHead, {
+          children: /*#__PURE__*/jsxs(TableRow, {
+            children: [/*#__PURE__*/jsx(TableHeadCell, {
+              children: "Estimated"
+            }), /*#__PURE__*/jsx(TableHeadCell, {
+              children: "Stored"
+            })]
+          })
+        }), /*#__PURE__*/jsx(TableBody, {
+          children: /*#__PURE__*/jsxs(TableRow, {
+            children: [/*#__PURE__*/jsxs(TableCell, {
+              children: [renderEstimatedBoiloff, " ", /*#__PURE__*/jsxs("em", {
+                style: {
+                  color: AppTheme.palette.secondary.main
+                },
+                children: ["(\xB1", estimatedError, ")"]
+              })]
+            }), /*#__PURE__*/jsx(TableCell, {
+              children: storedBoiloff
+            })]
+          })
+        })]
+      })
+    })]
+  });
+}
+
+function EstimateSlope(_ref) {
+  var data = _ref.data;
+    _ref.spec;
+  // define slope and intercept
+
+  var slope = 0;
+  var intercept = 0;
+
+  // Define firstMax and firstMaxIndex
+
+  var firstMax = Number(data[data.length - 1].level);
+  var firstMaxIndex = data.length - 1;
+
+  // Check if the last time when the spectrometer was filled is more than 45 days ago
+
+  var lastMaxIndex = data.length - 1;
+  var lastMax = Number(data[lastMaxIndex].level);
+  for (var i = data.length - 2; i >= 0; i--) {
+    var level = Number(data[i].level);
+    if (level > firstMax) {
+      lastMax = level;
+      lastMaxIndex = i;
+    }
+
+    // stop if level decreases from maximum
+
+    if (level < lastMax) {
+      break;
+    }
+  }
+
+  // if the last maximum is less than 45 days ago, use the last maximum as the first maximum
+  // otherwise, the initial firstMaxIndex is the last maximum index
+
+  if (lastMaxIndex >= data.length - 45) {
+    firstMaxIndex = lastMaxIndex - 1;
+    firstMax = Number(data[firstMaxIndex].level);
+  }
+
+  // minimum level is the level at firstMaxIndex
+
+  var minLevelIndex = firstMaxIndex - 1;
+
+  // find previous time when spectrometer was filled - for this start from lastMinimumIndex and go back until a maximum is found or until level reaches 90%
+
+  var maxLevel = Number(data[minLevelIndex].level);
+  var maxLevelIndex = minLevelIndex;
+  for (var _i = minLevelIndex - 1; _i >= 0; _i--) {
+    var _level = Number(data[_i].level);
+    if (_level > maxLevel) {
+      maxLevel = _level;
+      maxLevelIndex = _i;
+    }
+
+    // stop if level is decreases from maximum or if level is above 90%
+
+    if (_level < maxLevel - 1 || _level >= 90) {
+      break;
+    }
+  }
+
+  // Create an array of points between maximum and minimum in the form [[x1, y1], [x2, y2], ...]
+
+  var points = [];
+  for (var _i2 = maxLevelIndex; _i2 <= minLevelIndex; _i2++) {
+    points.push([_i2, Number(data[_i2].level)]);
+  }
+
+  // Perform linear regression on the points
+
+  var result = regression.linear(points, {
+    precision: 6
+  });
+  slope = result.equation[0];
+  intercept = result.equation[1];
+
+  // Determine slope uncertainty based on regression result
+  // For that, create an array of control values
+  var control = [];
+  for (var _i3 = maxLevelIndex; _i3 <= minLevelIndex; _i3++) {
+    control.push([_i3, _i3 * slope + intercept]);
+  }
+
+  // Calculate mean x value
+
+  var meanX = mean(points.map(function (point) {
+    return point[0];
+  }));
+
+  // Calculate standard slope error
+
+  var slopeError = sqrt(1 / (control.length - 2) * sum(points.map(function (point, i) {
+    return Math.pow(point[1] - control[i][1], 2);
+  })) / sum(points.map(function (point, i) {
+    return Math.pow(point[0] - meanX, 2);
+  })));
+  return {
+    slope: slope,
+    intercept: intercept,
+    slopeError: slopeError
+  };
+}
+
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function RenderGraph(_ref) {
+  var data = _ref.data,
+    height = _ref.height,
+    width = _ref.width,
+    spec = _ref.spec;
+  // Import Context
+
+  var heliumLookupData = useContext(HeliumContext).heliumLookupData;
+
+  // Get estimated data
+
+  var estimateResult = EstimateSlope(_objectSpread$4({}, {
+    data: data,
+    spec: spec
+  }));
+  var estimatedBoiloff = estimateResult.slope;
+  var estimatedIntercept = estimateResult.intercept;
+  var estimatedError = estimateResult.slopeError;
+
+  // Custom Tooltip for LineChart
+
+  var CustomTooltip = function CustomTooltip(_ref2) {
+    var active = _ref2.active,
+      payload = _ref2.payload,
+      label = _ref2.label;
+    if (active && payload && payload.length) {
+      var date = moment(payload[0].payload.date, "ddd MMM D HH:mm:ss YYYY").format("LL");
+      return /*#__PURE__*/jsxs("div", {
+        style: {
+          border: "solid 1px " + AppTheme.palette.secondary.main,
+          padding: "0.75em",
+          backgroundColor: "#ffffffaa"
+        },
+        children: [/*#__PURE__*/jsx("strong", {
+          children: date
+        }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsxs("em", {
+          children: ["(", label, " days ago)"]
+        }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsxs("strong", {
+          style: {
+            color: AppTheme.palette.primary.main
+          },
+          children: [payload[0].value, " %"]
+        })]
+      });
+    }
+  };
+
+  // Button for days state change
+
+  function DayButton(_ref3) {
+    var value = _ref3.value;
+    return /*#__PURE__*/jsx(Button, {
+      onClick: function onClick() {
+        return SetDays(value);
+      },
+      color: value === days ? "primary" : "secondary" // Active button style
+      ,
+      variant: value === days ? "contained" : "outlined" // Active button style
+      ,
+      size: "small",
+      children: value
+    });
+  }
+
+  // State
+
+  var _useState = useState(90),
+    _useState2 = _slicedToArray(_useState, 2),
+    days = _useState2[0],
+    SetDays = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showMinima = _useState4[0],
+    setShowMinima = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showEstimate = _useState6[0],
+    setShowEstimate = _useState6[1];
+
+  // Add days ago to data (do not mutate props — create a new array)
+  var dataWithDays = (data || []).map(function (item) {
+    return _objectSpread$4(_objectSpread$4({}, item), {}, {
+      days: -moment(item.date, "ddd MMM D HH:mm:ss YYYY").diff(moment(), "days")
+    });
+  });
+
+  // Get chart data from estimate
+
+  // First, get difference between today and last data point
+
+  // Guard against empty data
+  var daysSinceUpate = 0;
+  if (dataWithDays.length > 0) {
+    daysSinceUpate = moment().diff(moment(dataWithDays[dataWithDays.length - 1].date, "ddd MMM D HH:mm:ss YYYY"), "days");
+  }
+
+  // Then calculate estimated data points
+
+  // Build final dataset (with optional estimate) without mutating original
+  var dataWithEstimate = showEstimate ? dataWithDays.map(function (item) {
+    var itemDays = item.days;
+    var level = item.level;
+    var estimate = estimatedBoiloff * (dataWithDays.length - itemDays + daysSinceUpate) + estimatedIntercept;
+    return {
+      date: item.date,
+      days: itemDays,
+      level: level,
+      estimate: estimate
+    };
+  }) : dataWithDays;
+
+  // Get last n elements of array
+
+  var slicedData = dataWithEstimate.slice(Math.max(dataWithEstimate.length - days, 0));
+
+  // Improve visibility of estimate
+
+  var lineColor = showEstimate ? AppTheme.palette.grey[300] : AppTheme.palette.primary.main;
+  return /*#__PURE__*/jsxs(React.Fragment, {
+    children: [/*#__PURE__*/jsxs(LineChart, {
+      height: height,
+      width: width,
+      data: slicedData,
+      margin: {
+        top: 5,
+        right: 20,
+        bottom: 25,
+        left: 0
+      },
+      children: [/*#__PURE__*/jsx(Line, {
+        dataKey: "level",
+        stroke: lineColor,
+        fill: lineColor,
+        type: "linear",
+        dot: {
+          r: 1.5
+        }
+      }), showEstimate ? /*#__PURE__*/jsx(Line, {
+        dataKey: "estimate",
+        stroke: AppTheme.palette.action.main,
+        type: "monotone",
+        strokeDasharray: "5 5",
+        strokeWidth: 2,
+        dot: false
+      }) : null, /*#__PURE__*/jsx(CartesianGrid, {
+        stroke: AppTheme.palette.divider,
+        strokeDasharray: "5 5"
+      }), /*#__PURE__*/jsx(XAxis, {
+        dataKey: "days",
+        interval: days < 15 ? 1 : Math.round(days / 3),
+        children: /*#__PURE__*/jsx(Label, {
+          value: "Days ago",
+          offset: 1,
+          position: "bottom"
+        })
+      }), /*#__PURE__*/jsx(YAxis, {
+        dataKey: "level",
+        unit: "%",
+        type: "number",
+        domain: [0, 100]
+      }), showMinima ? /*#__PURE__*/jsxs(React.Fragment, {
+        children: [/*#__PURE__*/jsx(ReferenceLine, {
+          y: heliumLookupData.minima[spec],
+          stroke: AppTheme.palette.secondary.main,
+          strokeDasharray: (3)
+        }), /*#__PURE__*/jsx(ReferenceArea, {
+          y1: heliumLookupData.minima[spec],
+          y2: 0,
+          stroke: "none",
+          stro: true,
+          fill: AppTheme.palette.secondary.main,
+          fillOpacity: 0.1
+        })]
+      }) : null, /*#__PURE__*/jsx(Tooltip, {
+        content: /*#__PURE__*/jsx(CustomTooltip, {})
+      })]
+    }), /*#__PURE__*/jsxs(ButtonGroup, {
+      disableElevation: true,
+      variant: "outlined",
+      fullWidth: true,
+      color: "secondary",
+      "aria-label": "contained primary button group",
+      sx: {
+        justifySelf: "center",
+        px: 5
+      },
+      size: "small",
+      children: [/*#__PURE__*/jsx(DayButton, {
+        value: 7
+      }), /*#__PURE__*/jsx(DayButton, {
+        value: 30
+      }), /*#__PURE__*/jsx(DayButton, {
+        value: 90
+      }), /*#__PURE__*/jsx(DayButton, {
+        value: 180
+      }), /*#__PURE__*/jsx(DayButton, {
+        value: 365
+      })]
+    }), /*#__PURE__*/jsxs(FormGroup, {
+      children: [/*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Switch, {
+          label: "Show Minimum",
+          checked: showMinima,
+          onChange: function onChange() {
+            return setShowMinima(!showMinima);
+          }
+        }),
+        label: "Show Minimum",
+        sx: {
+          justifyContent: "center"
+        }
+      }), /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Switch, {
+          label: "Show Estimate",
+          checked: showEstimate,
+          onChange: function onChange() {
+            return setShowEstimate(!showEstimate);
+          }
+        }),
+        label: "Show Estimate",
+        sx: {
+          justifyContent: "center"
+        }
+      })]
+    }), /*#__PURE__*/jsx(ShowEstimate, {
+      spec: spec,
+      estimatedBoiloff: estimatedBoiloff,
+      estimatedError: estimatedError
+    })]
+  });
+}
+
+function HeliumGraph(_ref) {
+  var graphData = _ref.graphData,
+    graphDataMeta = _ref.graphDataMeta,
+    matches = _ref.matches;
+  var height = matches ? 250 : 200;
+  var width = matches ? 300 : 280;
+  var heliumLookupData = useContext(HeliumContext).heliumLookupData;
+
+  // remove spectrometers not existing in heliumLookupData
+
+  Object.keys(graphData).forEach(function (spec) {
+    if (!heliumLookupData.boilOff[spec]) {
+      delete graphData[spec];
+    }
+  });
+
+  // Catch missing data
+
+  if (graphData.error) {
+    return /*#__PURE__*/jsxs(React.Fragment, {
+      children: [/*#__PURE__*/jsx(DivTitle, {
+        children: /*#__PURE__*/jsx("strong", {
+          children: "Helium level monitoring"
+        })
+      }), /*#__PURE__*/jsx(Grid, {
+        sx: {
+          display: "flex",
+          justifyContent: "center"
+        },
+        children: /*#__PURE__*/jsx("em", {
+          children: "No graph data available"
+        })
+      })]
+    });
+  }
+
+  // Render component
+
+  return /*#__PURE__*/jsxs(React.Fragment, {
+    children: [/*#__PURE__*/jsxs(DivTitle, {
+      children: [/*#__PURE__*/jsx("strong", {
+        children: "Helium level monitoring"
+      }), " ", /*#__PURE__*/jsxs("em", {
+        children: ["(updated ", moment(graphDataMeta.date).fromNow(), ")"]
+      })]
+    }), /*#__PURE__*/jsx(Grid, {
+      container: true,
+      sx: {
+        display: "flex",
+        justifyContent: "center"
+      },
+      children: Object.keys(graphData).map(function (spec) {
+        return /*#__PURE__*/jsxs(Paper, {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            justifyItems: "center",
+            stroke: AppTheme.palette.divider,
+            px: 2,
+            paddingBottom: 2,
+            margin: 2
+          },
+          children: [/*#__PURE__*/jsx("h4", {
+            children: spec
+          }), /*#__PURE__*/jsx(RenderGraph, {
+            data: graphData[spec],
+            height: height,
+            width: width,
+            spec: spec
+          })]
+        }, "graph_" + spec);
+      })
+    })]
+  });
+}
+
+function GraphsPanel(_ref) {
+  var graphData = _ref.graphData,
+    graphDataMeta = _ref.graphDataMeta;
+  var context = useContext(HeliumContext);
+  var collapsed = context.collapsed;
+  var matches = context.matches;
+  return /*#__PURE__*/jsx(AppCard, {
+    title: "Helium Graphs",
+    size: 12,
+    collapsed: collapsed,
+    children: /*#__PURE__*/jsx(HeliumGraph, {
+      graphData: graphData,
+      graphDataMeta: graphDataMeta,
+      matches: matches
+    })
+  });
+}
+
+function NumField(_ref) {
+  var input = _ref.input,
+    SetInput = _ref.SetInput,
+    error = _ref.error,
+    SetError = _ref.SetError,
+    minValue = _ref.minValue,
+    maxValue = _ref.maxValue,
+    adornment = _ref.adornment,
+    size = _ref.size;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    errorMessage = _useState2[0],
+    SetErrorMessage = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    alert = _useState4[0],
+    SetAlert = _useState4[1];
+  var sx = {};
+  if (size === "small") {
+    sx = {
+      maxWidth: 75
+    };
+  }
+  function handleEntry(e) {
+    var errorFound = false;
+    var inputVal = e.target.value;
+    if (!inputVal.match(/[0-9-]*/)[0] || inputVal.match(/[0-9-]*/)[0] !== inputVal) {
+      errorFound = true;
+      SetErrorMessage("Input is not numerical.");
+    }
+    if (inputVal > maxValue || inputVal < minValue) {
+      errorFound = true;
+      SetErrorMessage("Input is outside allowed boundaries.");
+    }
+    SetInput(inputVal);
+    SetError(errorFound);
+    SetAlert(errorFound);
+  }
+  return /*#__PURE__*/jsxs(React.Fragment, {
+    children: [/*#__PURE__*/jsx(TextField, {
+      size: "small",
+      sx: sx,
+      onChange: function onChange(e) {
+        return handleEntry(e);
+      },
+      value: input,
+      error: error,
+      inputProps: {
+        inputMode: "numeric"
+      },
+      InputProps: {
+        endAdornment: /*#__PURE__*/jsx(InputAdornment, {
+          position: "end",
+          children: adornment
+        })
+      }
+    }), /*#__PURE__*/jsx(ErrorAlert, {
+      alert: alert,
+      SetAlert: SetAlert,
+      message: errorMessage
+    })]
+  });
+}
+
+// Look up amount in liters for specific spectrometer
+
+function CalcLiters(_ref) {
+  var spec = _ref.spec,
+    value = _ref.value;
+  var heliumLookup = useContext(HeliumContext).heliumLookupData.lookup;
+
+  // Catch negative values
+
+  if (value < 0 || !value) {
+    value = 0;
+  } else {
+    value = Number(value);
+  }
+  var returnVal = heliumLookup[spec].find(function (m) {
+    return m.level === value;
+  }).liters;
+  return returnVal;
+}
+
+// Look up percentage for liter value in specific spectrometer
+
+function CalcPercent(_ref2) {
+  var spec = _ref2.spec,
+    value = _ref2.value;
+  var heliumLookup = useContext(HeliumContext).heliumLookupData.lookup;
+  var returnVal = 0;
+
+  // Catch values out of boundary
+
+  if (value < 0 || !value) {
+    value = 0;
+  } else {
+    value = Number(value);
+  }
+  if (value > heliumLookup[spec].find(function (m) {
+    return m.level === 100;
+  }).liters) {
+    returnVal = 100;
+  } else {
+    var closestLiters = heliumLookup[spec].reduce(function (prev, curr) {
+      return Math.abs(curr.liters - value) < Math.abs(prev.liters - value) ? curr : prev;
+    }).liters;
+    returnVal = heliumLookup[spec].find(function (m) {
+      return m.liters === closestLiters;
+    }).level;
+  }
+  return returnVal;
+}
+
+// Look up difference from maximum
+
+function CalcToMax(_ref3) {
+  var spec = _ref3.spec,
+    value = _ref3.value;
+  var heliumLookup = useContext(HeliumContext).heliumLookupData.lookup;
+
+  // Catch negative values
+
+  value = Number(value) || 0;
+  if (value < 0 || !value) {
+    value = 0;
+  }
+  var maxLiters = Math.max.apply(null, heliumLookup[spec].map(function (m) {
+    return m.liters;
+  }));
+  var returnVal = maxLiters - heliumLookup[spec].find(function (m) {
+    return m.level === value;
+  }).liters;
+  returnVal = Math.round(returnVal * 10) / 10;
+  return returnVal;
+}
+
+function HeliumEntry(_ref) {
+  var spec = _ref.spec;
+  var context = useContext(HeliumContext);
+  var heliumLookup = context.heliumLookupData.lookup;
+  var heliumData = context.heliumData;
+  var SetHeliumData = context.SetHeliumData;
+  var SetLevelsEdited = context.SetLevelsEdited;
+  var value = Number(heliumData.helium[spec]) || 0;
+  var maxValue = Math.max.apply(null, heliumLookup[spec].map(function (m) {
+    return m.level;
+  }));
+  var minValue = 0;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    edit = _useState2[0],
+    SetEdit = _useState2[1];
+  var _useState3 = useState(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    input = _useState4[0],
+    SetInput = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    SetError = _useState6[1];
+  if (edit) {
+    return /*#__PURE__*/jsxs(TableCell, {
+      children: [/*#__PURE__*/jsx(NumField, {
+        input: input,
+        SetInput: SetInput,
+        error: error,
+        SetError: SetError,
+        minValue: minValue,
+        maxValue: maxValue,
+        adornment: "%",
+        size: "small"
+      }), /*#__PURE__*/jsx(IconButton, {
+        disabled: error,
+        onClick: function onClick() {
+          SetHeliumData(function (heliumData) {
+            heliumData.helium[spec] = Number(input);
+          });
+          SetEdit(!edit);
+          SetLevelsEdited(true);
+        },
+        children: /*#__PURE__*/jsx(SaveIcon, {})
+      })]
+    });
+  } else {
+    return /*#__PURE__*/jsxs(TableCell, {
+      children: [Percentage(value, true), /*#__PURE__*/jsx(IconButton, {
+        size: "small",
+        onClick: function onClick() {
+          return SetEdit(!edit);
+        },
+        children: /*#__PURE__*/jsx(EditIcon, {})
+      })]
+    });
+  }
+}
+
+// render Helium level table
+
+function HeliumTable() {
+  var context = useContext(HeliumContext);
+  var heliumData = context.heliumData;
+  context.SetHeliumData;
+  context.SetLevelsEdited;
+
+  // Catch if no data present
+
+  if (heliumData.helium.length === 0) {
+    return /*#__PURE__*/jsx(Grid, {
+      children: /*#__PURE__*/jsx("em", {
+        children: "No Helium data found."
+      })
+    });
+  }
+
+  // Calculate sum of missing helium
+
+  var totalToMax = Object.keys(heliumData.helium).reduce(function (total, current) {
+    return total + CalcToMax({
+      spec: current,
+      value: heliumData.helium[current]
+    });
+  }, 0);
+  totalToMax = Math.round(totalToMax * 10) / 10;
+  return /*#__PURE__*/jsxs(AppTable, {
+    children: [/*#__PURE__*/jsx(TableHead, {
+      children: /*#__PURE__*/jsxs(TableRow, {
+        children: [/*#__PURE__*/jsx(TableHeadCell, {
+          children: "Spectrometer"
+        }), /*#__PURE__*/jsxs(TableHeadCell, {
+          children: ["Helium level", /*#__PURE__*/jsx("br", {}), "[%]"]
+        }), /*#__PURE__*/jsxs(TableHeadCell, {
+          children: ["Helium level", /*#__PURE__*/jsx("br", {}), "[liters]"]
+        }), /*#__PURE__*/jsxs(TableHeadCell, {
+          children: ["Diff. to maximum", /*#__PURE__*/jsx("br", {}), "[liters]"]
+        })]
+      })
+    }), /*#__PURE__*/jsx(TableBody, {
+      children: Object.keys(heliumData.helium).map(function (m) {
+        return /*#__PURE__*/jsxs(TableRow, {
+          children: [/*#__PURE__*/jsx(TableCell, {
+            children: m
+          }), /*#__PURE__*/jsx(HeliumEntry, {
+            spec: m
+          }), /*#__PURE__*/jsx(TableCell, {
+            children: /*#__PURE__*/jsx(CalcLiters, {
+              spec: m,
+              value: heliumData.helium[m]
+            })
+          }), /*#__PURE__*/jsx(TableCell, {
+            children: /*#__PURE__*/jsx("strong", {
+              children: /*#__PURE__*/jsx(CalcToMax, {
+                spec: m,
+                value: heliumData.helium[m]
+              })
+            })
+          })]
+        }, m + "_entry");
+      })
+    }), /*#__PURE__*/jsx("tfoot", {
+      children: /*#__PURE__*/jsxs(TableRow, {
+        children: [/*#__PURE__*/jsx(TableCell, {
+          children: /*#__PURE__*/jsx("strong", {
+            children: "Sum"
+          })
+        }), /*#__PURE__*/jsx(TableCell, {}), /*#__PURE__*/jsx(TableCell, {}), /*#__PURE__*/jsx(TableCell, {
+          children: /*#__PURE__*/jsx("strong", {
+            children: totalToMax
+          })
+        })]
+      })
+    })]
+  });
+}
+
+function EditAdmon() {
+  var context = useContext(HeliumContext);
+  if (context.levelsEdited) {
+    return /*#__PURE__*/jsxs(React.Fragment, {
+      children: [", ", /*#__PURE__*/jsx("strong", {
+        children: "edited"
+      })]
+    });
+  } else {
+    return null;
+  }
+}
+
+function CalculatorPanel() {
+  var context = useContext(HeliumContext);
+  var heliumData = context.heliumData;
+  context.levelsEdited;
+  return /*#__PURE__*/jsxs(AppCard, {
+    title: "Helium Calculator",
+    size: context.cardSize,
+    collapsed: context.collapsed,
+    sx: {
+      mb: context.bottomMargin
+    },
+    children: [/*#__PURE__*/jsx(Grid, {
+      children: /*#__PURE__*/jsxs(DivTitle, {
+        children: [/*#__PURE__*/jsx("strong", {
+          children: "Current levels"
+        }), " ", /*#__PURE__*/jsxs("em", {
+          children: [heliumData.meta.date || heliumData.meta.date !== 0 ? "(updated " + moment(heliumData.meta.date).fromNow() + ")" : "(manual)", /*#__PURE__*/jsx(EditAdmon, {})]
+        })]
+      })
+    }), /*#__PURE__*/jsx(Grid, {
+      children: /*#__PURE__*/jsx(HeliumTable, {})
+    })]
+  });
+}
+
+function LiterInput(_ref) {
+  var limit = _ref.limit,
+    SetLimit = _ref.SetLimit,
+    error = _ref.error,
+    SetError = _ref.SetError;
+  var _useState = useState(limit),
+    _useState2 = _slicedToArray(_useState, 2),
+    input = _useState2[0],
+    SetInput = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    edit = _useState4[0],
+    SetEdit = _useState4[1];
+  if (edit) {
+    return /*#__PURE__*/jsxs(React.Fragment, {
+      children: [/*#__PURE__*/jsx(NumField, {
+        input: input,
+        SetInput: SetInput,
+        error: error,
+        SetError: SetError,
+        size: "medium",
+        adornment: "L"
+      }), " ", /*#__PURE__*/jsx(IconButton, {
+        disabled: error,
+        size: "small",
+        onClick: function onClick() {
+          SetEdit(!edit);
+          SetLimit(Number(input));
+        },
+        children: /*#__PURE__*/jsx(SaveIcon, {})
+      })]
+    });
+  } else {
+    return /*#__PURE__*/jsxs(React.Fragment, {
+      children: [limit, " L", " ", /*#__PURE__*/jsx(IconButton, {
+        size: "small",
+        onClick: function onClick() {
+          return SetEdit(!edit);
+        },
+        children: /*#__PURE__*/jsx(EditIcon, {})
+      })]
+    });
+  }
+}
+
+function SelectSpecs(_ref) {
+  var specs = _ref.specs,
+    SetSpecs = _ref.SetSpecs;
+  function SetAll(value) {
+    SetSpecs(function (specs) {
+      Object.keys(specs).map(function (spec) {
+        return specs[spec] = value;
+      });
+    });
+    return;
+  }
+  return /*#__PURE__*/jsxs(FormControl, {
+    children: [/*#__PURE__*/jsx(Divider, {
+      textAlign: "left",
+      children: /*#__PURE__*/jsx("strong", {
+        children: "Select spectrometers"
+      })
+    }), /*#__PURE__*/jsxs(FormGroup, {
+      row: true,
+      sx: {
+        px: 2
+      },
+      children: [Object.keys(specs).map(function (m) {
+        return /*#__PURE__*/jsx(FormControlLabel, {
+          control: /*#__PURE__*/jsx(Checkbox, {
+            size: "small"
+          }),
+          checked: specs[m],
+          onChange: function onChange() {
+            return SetSpecs(function (specs) {
+              specs[m] = !specs[m];
+            });
+          },
+          label: m
+        }, m + "_check");
+      }), " ", /*#__PURE__*/jsx(Button, {
+        size: "small",
+        onClick: function onClick() {
+          return SetAll(true);
+        },
+        children: "all"
+      }), " ", "\u2002", " ", /*#__PURE__*/jsx(Button, {
+        size: "small",
+        onClick: function onClick() {
+          return SetAll(false);
+        },
+        children: "none"
+      })]
+    })]
+  });
+}
+
+function FindPair(_ref) {
+  var currSpecs = _ref.currSpecs,
+    heliumData = _ref.heliumData,
+    boilOff = _ref.boilOff,
+    limit = _ref.limit;
+  // find all possible pairs of spectrometers
+
+  var specPairs = [];
+  currSpecs.map(function (spec1) {
+    currSpecs.map(function (spec2) {
+      if (spec1 !== spec2) {
+        specPairs.push([spec1, spec2].sort()); // sort to facilitate duplicate removal
+      }
+    });
+  });
+
+  // remove duplicates from array by conversion to string
+
+  specPairs = Array.from(new Set(specPairs.map(JSON.stringify)), JSON.parse);
+  var specPairsLiters = [];
+  var _loop = function _loop() {
+    var j = 1;
+    var pairBoil = 0;
+
+    // Add current pair of specs
+
+    specPairsLiters.push(specPairs[i]);
+
+    // Calculate L. to max for pair until reaching target value
+
+    do {
+      pairBoil = specPairs[i].reduce(function (total, current) {
+        var boil = Math.round(heliumData.helium[current] + j * boilOff[current]);
+
+        // Catch negative values
+        if (boil < 0) {
+          boil = 0;
+        }
+        var boilToMax = CalcToMax({
+          value: boil,
+          spec: current
+        });
+        return total + boilToMax;
+      }, 0);
+      j++;
+    } while (pairBoil < limit && j < 300);
+
+    // Result to pair
+
+    specPairsLiters[i].push(j);
+    specPairsLiters[i].push(pairBoil);
+    specPairsLiters[i].push(pairBoil > limit);
+  };
+  for (var i in specPairs) {
+    _loop();
+  }
+
+  // Remove pairs that did not converge
+
+  specPairsLiters = specPairsLiters.filter(function (pair) {
+    return pair[4];
+  });
+
+  // Find pair with minimal number of days
+
+  var minPair = [];
+  switch (specPairsLiters.length) {
+    case 0:
+      minPair = [];
+      break;
+    case 1:
+      minPair = _toConsumableArray(specPairsLiters);
+      break;
+    default:
+      minPair = specPairsLiters.reduce(function (min, current) {
+        var i = current[2] < min[2] ? current : min;
+        return i;
+      });
+      break;
+  }
+  minPair = minPair.flat();
+  return minPair;
+}
+function FindTriple(_ref2) {
+  var currSpecs = _ref2.currSpecs,
+    heliumData = _ref2.heliumData,
+    boilOff = _ref2.boilOff,
+    limit = _ref2.limit;
+  // find all possible triples of spectrometers
+
+  var specTriples = [];
+  currSpecs.map(function (spec1) {
+    currSpecs.map(function (spec2) {
+      currSpecs.map(function (spec3) {
+        if (!(spec1 === spec2 || spec2 === spec3 || spec3 === spec1)) {
+          specTriples.push([spec1, spec2, spec3].sort()); // sort to facilitate duplicate removal
+        }
+      });
+    });
+  });
+
+  // remove duplicates from array by conversion to string
+
+  specTriples = Array.from(new Set(specTriples.map(JSON.stringify)), JSON.parse);
+  var specTriplesLiters = [];
+  var _loop2 = function _loop2() {
+    var j = 1;
+    var pairBoil = 0;
+
+    // Add current pair of specs
+
+    specTriplesLiters.push(specTriples[i]);
+
+    // Calculate L. to max for pair until reaching target value
+
+    do {
+      pairBoil = specTriples[i].reduce(function (total, current) {
+        var boil = Math.round(heliumData.helium[current] + j * boilOff[current]);
+
+        // Catch negative values
+        if (boil < 0) {
+          boil = 0;
+        }
+        var boilToMax = CalcToMax({
+          value: boil,
+          spec: current
+        });
+        return total + boilToMax;
+      }, 0);
+      j++;
+    } while (pairBoil < limit && j < 300);
+
+    // Result to triple
+
+    specTriplesLiters[i].push(j);
+    specTriplesLiters[i].push(pairBoil);
+    specTriplesLiters[i].push(pairBoil > limit);
+  };
+  for (var i in specTriples) {
+    _loop2();
+  }
+
+  // Remove triples that did not converge
+
+  specTriplesLiters = specTriplesLiters.filter(function (pair) {
+    return pair[5];
+  });
+
+  // Find triple with minimal number of days
+
+  var minTriple = [];
+  switch (specTriplesLiters.length) {
+    case 0:
+      minTriple = [];
+      break;
+    case 1:
+      minTriple = _toConsumableArray(specTriplesLiters);
+      break;
+    default:
+      minTriple = specTriplesLiters.reduce(function (min, current) {
+        var i = current[3] < min[3] ? current : min;
+        return i;
+      });
+      break;
+  }
+  minTriple = minTriple.flat();
+  return minTriple;
+}
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function TupleResult(_ref) {
+  var children = _ref.children,
+    title = _ref.title;
+  return /*#__PURE__*/jsx(Grid, {
+    children: /*#__PURE__*/jsxs(AppTable, {
+      children: [/*#__PURE__*/jsx(TableHead, {
+        children: /*#__PURE__*/jsx(TableRow, {
+          children: /*#__PURE__*/jsx(TableHeadCell, {
+            children: title
+          })
+        })
+      }), /*#__PURE__*/jsx(TableBody, {
+        children: /*#__PURE__*/jsx(TableRow, {
+          children: /*#__PURE__*/jsx(TableCell, {
+            children: children
+          })
+        })
+      })]
+    })
+  });
+}
+function PairResult(_ref2) {
+  var minPair = _ref2.minPair;
+  if (minPair.length !== 0) {
+    var d = new Date();
+    d.setDate(d.getDate() + minPair[2]);
+    var date = moment$1(d).format("ll");
+    return /*#__PURE__*/jsxs(TupleResult, {
+      title: "Pair",
+      children: [/*#__PURE__*/jsx("strong", {
+        children: minPair[0]
+      }), " and ", /*#__PURE__*/jsx("strong", {
+        children: minPair[1]
+      }), " ", "in ", /*#__PURE__*/jsxs("strong", {
+        children: [minPair[2], " days"]
+      }), " (", date, ")"]
+    });
+  } else {
+    return /*#__PURE__*/jsx(TupleResult, {
+      title: "Pair",
+      children: /*#__PURE__*/jsx("em", {
+        children: "No spectrometer pair reaches the target value."
+      })
+    });
+  }
+}
+function TripleResult(_ref3) {
+  var minTriple = _ref3.minTriple;
+  if (minTriple.length !== 0) {
+    var d = new Date();
+    d.setDate(d.getDate() + minTriple[3]);
+    var date = moment$1(d).format("ll");
+    return /*#__PURE__*/jsxs(TupleResult, {
+      title: "Triple",
+      children: [/*#__PURE__*/jsx("strong", {
+        children: minTriple[0]
+      }), ", ", /*#__PURE__*/jsx("strong", {
+        children: minTriple[1]
+      }), ", and ", /*#__PURE__*/jsx("strong", {
+        children: minTriple[2]
+      }), " in", " ", /*#__PURE__*/jsxs("strong", {
+        children: [minTriple[3], " days"]
+      }), " (", date, ")"]
+    });
+  } else {
+    return /*#__PURE__*/jsx(TupleResult, {
+      title: "Triple",
+      children: /*#__PURE__*/jsx("p", {
+        children: /*#__PURE__*/jsx("em", {
+          children: "No spectrometer triple reaches the target value."
+        })
+      })
+    });
+  }
+}
+function PairWizard() {
+  var context = useContext(HeliumContext);
+  var heliumLookupData = context.heliumLookupData;
+  var heliumData = context.heliumData;
+
+  // Define lookup objects
+
+  var boilOff = heliumLookupData.boilOff;
+  var defaultSpecs = {};
+  Object.keys(boilOff).map(function (spec) {
+    return defaultSpecs = _objectSpread$3(_objectSpread$3({}, defaultSpecs), {}, _defineProperty({}, spec, true));
+  });
+  var _useImmer = useImmer(defaultSpecs),
+    _useImmer2 = _slicedToArray(_useImmer, 2),
+    specs = _useImmer2[0],
+    SetSpecs = _useImmer2[1];
+  var currSpecs = Object.keys(specs).filter(function (spec) {
+    return specs[spec];
+  });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    error = _useState2[0],
+    SetError = _useState2[1];
+  var _useState3 = useState(100),
+    _useState4 = _slicedToArray(_useState3, 2),
+    limit = _useState4[0],
+    SetLimit = _useState4[1];
+  var minPair = FindPair(_objectSpread$3({}, {
+    currSpecs: currSpecs,
+    heliumData: heliumData,
+    boilOff: boilOff,
+    limit: limit
+  }));
+  var minTriple = FindTriple(_objectSpread$3({}, {
+    currSpecs: currSpecs,
+    heliumData: heliumData,
+    boilOff: boilOff,
+    limit: limit
+  }));
+  return /*#__PURE__*/jsx(React.Fragment, {
+    children: /*#__PURE__*/jsxs(Grid, {
+      container: true,
+      columns: {
+        xs: 6,
+        md: 12
+      },
+      children: [/*#__PURE__*/jsxs(Grid, {
+        sx: {
+          px: 2
+        },
+        size: 6,
+        children: [/*#__PURE__*/jsx(Divider, {
+          textAlign: "left",
+          children: /*#__PURE__*/jsx("strong", {
+            children: "Find earliest set of spectrometers requiring"
+          })
+        }), /*#__PURE__*/jsx(Grid, {
+          sx: {
+            padding: 2,
+            display: "flex",
+            justifyContent: "center"
+          },
+          children: /*#__PURE__*/jsx(Typography, {
+            variant: "h4",
+            children: /*#__PURE__*/jsx(LiterInput, {
+              limit: limit,
+              SetLimit: SetLimit,
+              error: error,
+              SetError: SetError
+            })
+          })
+        }), /*#__PURE__*/jsx(Grid, {
+          children: /*#__PURE__*/jsx(SelectSpecs, {
+            specs: specs,
+            SetSpecs: SetSpecs
+          })
+        })]
+      }), /*#__PURE__*/jsxs(Grid, {
+        sx: {
+          px: 2
+        },
+        size: 6,
+        children: [/*#__PURE__*/jsx(Divider, {
+          textAlign: "left",
+          children: /*#__PURE__*/jsx("strong", {
+            children: "Result"
+          })
+        }), /*#__PURE__*/jsxs(Grid, {
+          sx: {
+            px: 3
+          },
+          children: [/*#__PURE__*/jsx(PairResult, {
+            minPair: minPair
+          }), /*#__PURE__*/jsx(TripleResult, {
+            minTriple: minTriple
+          })]
+        })]
+      })]
+    })
+  });
+}
+
+function SpectrometerSetPanel() {
+  var context = useContext(HeliumContext);
+  return /*#__PURE__*/jsx(AppCard, {
+    title: "Spectrometer Set",
+    size: context.cardSize,
+    collapsed: context.collapsed,
+    sx: {
+      mb: context.bottomMargin
+    },
+    children: /*#__PURE__*/jsx(Grid, {
+      children: /*#__PURE__*/jsx(PairWizard, {})
+    })
+  });
+}
+
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function EstimateConsumption() {
+  // Get data
+
+  var heliumLookupData = useContext(HeliumContext).heliumLookupData;
+  var boilOff = heliumLookupData.boilOff;
+  var lookup = heliumLookupData.lookup;
+
+  // Define array and populate with days and liters to get from 100% to 50%
+
+  var specCons = [];
+  Object.keys(lookup).map(function (spec) {
+    return specCons.push({
+      name: spec,
+      liters: (lookup[spec].filter(function (x) {
+        return x.level === 100;
+      })[0].liters - lookup[spec].filter(function (x) {
+        return x.level === 50;
+      })[0].liters).toFixed(1),
+      days: (-50 / boilOff[spec]).toFixed(1)
+    });
+  });
+
+  // Calculate consumption per day, month, year from values above
+
+  specCons = specCons.map(function (spec) {
+    return _objectSpread$2(_objectSpread$2({}, spec), {}, {
+      perDay: spec.liters / spec.days,
+      perMonth: (spec.liters / spec.days * 30).toFixed(1),
+      perYear: (spec.liters / spec.days * 365).toFixed(1)
+    });
+  });
+  return /*#__PURE__*/jsxs(React.Fragment, {
+    children: [/*#__PURE__*/jsx("p", {
+      children: "Helium consumption estimated based on lookup values."
+    }), /*#__PURE__*/jsxs(AppTable, {
+      children: [/*#__PURE__*/jsx(TableHead, {
+        children: /*#__PURE__*/jsxs(TableRow, {
+          children: [/*#__PURE__*/jsx(TableHeadCell, {}), specCons.map(function (spec) {
+            return /*#__PURE__*/jsx(TableHeadCell, {
+              children: spec.name
+            }, "Head" + spec.name);
+          }), /*#__PURE__*/jsx(TableHeadCell, {
+            children: "Sum"
+          })]
+        })
+      }), /*#__PURE__*/jsxs(TableBody, {
+        children: [/*#__PURE__*/jsxs(TableRow, {
+          children: [/*#__PURE__*/jsx(TableCell, {
+            children: "per month"
+          }), specCons.map(function (spec) {
+            return /*#__PURE__*/jsxs(TableCell, {
+              children: [spec.perMonth, " L ", /*#__PURE__*/jsx("br", {}), "(", (spec.perMonth * 0.79).toFixed(2), " m", /*#__PURE__*/jsx("sup", {
+                children: "3"
+              }), " Gas)"]
+            }, "perMonth" + spec.name);
+          }), /*#__PURE__*/jsx(TableCell, {
+            children: /*#__PURE__*/jsxs("strong", {
+              children: [specCons.reduce(function (total, spec) {
+                return total + Number(spec.perMonth);
+              }, 0).toFixed(1), " ", "L", /*#__PURE__*/jsx("br", {}), "(", (specCons.reduce(function (total, spec) {
+                return total + Number(spec.perMonth);
+              }, 0) * 0.79).toFixed(2), " ", "m", /*#__PURE__*/jsx("sup", {
+                children: "3"
+              }), " Gas)"]
+            })
+          })]
+        }), /*#__PURE__*/jsxs(TableRow, {
+          children: [/*#__PURE__*/jsx(TableCell, {
+            rowSpan: 2,
+            children: "per year"
+          }), specCons.map(function (spec) {
+            return /*#__PURE__*/jsxs(TableCell, {
+              children: [spec.perYear, " L ", /*#__PURE__*/jsx("br", {}), "(", (spec.perYear * 0.79).toFixed(2), " m", /*#__PURE__*/jsx("sup", {
+                children: "3"
+              }), " ", "Gas)"]
+            }, "perYear" + spec.name);
+          }), /*#__PURE__*/jsx(TableCell, {
+            children: /*#__PURE__*/jsxs("strong", {
+              children: [specCons.reduce(function (total, spec) {
+                return total + Number(spec.perYear);
+              }, 0).toFixed(1), " ", "L", /*#__PURE__*/jsx("br", {}), "(", (specCons.reduce(function (total, spec) {
+                return total + Number(spec.perYear);
+              }, 0) * 0.79).toFixed(2), " ", "m", /*#__PURE__*/jsx("sup", {
+                children: "3"
+              }), " Gas)"]
+            })
+          })]
+        })]
+      })]
+    })]
+  });
+}
+
+function EstimatedConsumptionPanel() {
+  var context = useContext(HeliumContext);
+  var cardSize = context.cardSize;
+  var collapsed = context.collapsed;
+  return /*#__PURE__*/jsx(AppCard, {
+    title: "Estimated Consumption",
+    size: cardSize,
+    collapsed: collapsed,
+    sx: {
+      mb: context.bottomMargin
+    },
+    children: /*#__PURE__*/jsx(Grid, {
+      children: /*#__PURE__*/jsx(EstimateConsumption, {})
+    })
+  });
+}
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+
+// Admonition colors
+
+var errorBg = AppTheme.palette.primary.main;
+var errorText = AppTheme.palette.primary.contrastText;
+var warnText = AppTheme.palette.warning.main;
+function HePrognosisEntry(_ref) {
+  var value = _ref.value,
+    days = _ref.days,
+    spec = _ref.spec;
+  var context = useContext(HeliumContext);
+  var heliumLookupData = context.heliumLookupData;
+
+  // Define lookup objects
+
+  var boilOff = heliumLookupData.boilOff;
+  var minima = heliumLookupData.minima;
+  var boil = Math.round(value + days * boilOff[spec]);
+
+  // Catch negative values
+
+  if (boil < 0) {
+    boil = 0;
+  }
+  var boilLiter = CalcLiters({
+    value: boil,
+    spec: spec
+  });
+  var boilToMax = CalcToMax({
+    value: boil,
+    spec: spec
+  });
+  var style = {};
+  if (boil < minima[spec] - 30 * boilOff[spec]) {
+    style = {
+      backgroundColor: errorBg,
+      color: errorText
+    };
+  } else if (boil < minima[spec] - 60 * boilOff[spec]) {
+    style = {
+      color: warnText
+    };
+  }
+  return /*#__PURE__*/jsxs(TableCell, {
+    sx: style,
+    children: [Percentage(boil, true), " ", /*#__PURE__*/jsx("br", {}), boilLiter, " L", /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsxs("strong", {
+      children: [boilToMax, " L"]
+    })]
+  });
+}
+
+// Calculate total missing helium at prognosed date
+
+function HePrognosisSum(_ref2) {
+  var currHeliumData = _ref2.currHeliumData,
+    days = _ref2.days;
+  var context = useContext(HeliumContext);
+  var heliumLookupData = context.heliumLookupData;
+
+  // Define lookup objects
+
+  var boilOff = heliumLookupData.boilOff;
+  var boilData = {};
+  Object.keys(currHeliumData).map(function (spec) {
+    boilData = _objectSpread$1(_objectSpread$1({}, boilData), {}, _defineProperty({}, spec, Math.round(currHeliumData[spec] + days * boilOff[spec])));
+    return null;
+  });
+  var toMaxSum = Object.keys(boilData).reduce(function (total, current) {
+    return total + CalcToMax({
+      spec: current,
+      value: boilData[current]
+    });
+  }, 0);
+  toMaxSum = Math.round(toMaxSum * 10) / 10;
+  return /*#__PURE__*/jsx(TableCell, {
+    children: /*#__PURE__*/jsxs("strong", {
+      children: [toMaxSum, " L"]
+    })
+  });
+}
+
+// Cell for day increment with edit switch
+
+function HePrognosisIncr(_ref3) {
+  var days = _ref3.days,
+    increments = _ref3.increments,
+    SetIncrements = _ref3.SetIncrements,
+    dates = _ref3.dates;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    edit = _useState2[0],
+    SetEdit = _useState2[1];
+  var _useState3 = useState(days),
+    _useState4 = _slicedToArray(_useState3, 2),
+    input = _useState4[0],
+    SetInput = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    SetError = _useState6[1];
+  if (edit) {
+    return /*#__PURE__*/jsxs(TableCell, {
+      children: [dates[days], " ", /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx(NumField, {
+        input: input,
+        SetInput: SetInput,
+        error: error,
+        SetError: SetError,
+        size: "small"
+      }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx(IconButton, {
+        disabled: error,
+        size: "small",
+        onClick: function onClick() {
+          SetEdit(!edit);
+          SetIncrements(increments.map(function (inc) {
+            if (inc === days) {
+              return Number(input);
+            } else {
+              return inc;
+            }
+          }));
+        },
+        children: /*#__PURE__*/jsx(SaveIcon, {})
+      }), /*#__PURE__*/jsx(IconButton, {
+        size: "small",
+        onClick: function onClick() {
+          return SetIncrements(increments.filter(function (n) {
+            return n !== days;
+          }));
+        },
+        children: /*#__PURE__*/jsx(DeleteIcon, {})
+      })]
+    });
+  } else {
+    return /*#__PURE__*/jsxs(TableCell, {
+      children: [dates[days], " ", /*#__PURE__*/jsx("br", {}), " in ", days, " days ", /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx(IconButton, {
+        size: "small",
+        onClick: function onClick() {
+          return SetEdit(!edit);
+        },
+        children: /*#__PURE__*/jsx(EditIcon, {})
+      }), /*#__PURE__*/jsx(IconButton, {
+        size: "small",
+        onClick: function onClick() {
+          return SetIncrements(increments.filter(function (n) {
+            return n !== days;
+          }));
+        },
+        children: /*#__PURE__*/jsx(DeleteIcon, {})
+      })]
+    });
+  }
+}
+
+// Render table row in prognosis table
+
+function HePrognosisBody(_ref4) {
+  var increments = _ref4.increments,
+    SetIncrements = _ref4.SetIncrements,
+    currHeliumData = _ref4.currHeliumData,
+    dates = _ref4.dates;
+  return /*#__PURE__*/jsx(React.Fragment, {
+    children: increments.map(function (m) {
+      return /*#__PURE__*/jsxs(TableRow, {
+        children: [/*#__PURE__*/jsx(HePrognosisIncr, {
+          days: m,
+          increments: increments,
+          SetIncrements: SetIncrements,
+          dates: dates
+        }), Object.keys(currHeliumData).map(function (spec) {
+          return /*#__PURE__*/jsx(HePrognosisEntry, {
+            value: currHeliumData[spec],
+            days: m,
+            spec: spec
+          }, spec + "_progentry");
+        }), /*#__PURE__*/jsx(HePrognosisSum, {
+          currHeliumData: currHeliumData,
+          days: m
+        })]
+      }, m + "_incr");
+    })
+  });
+}
+
+// function for adding additional table entries
+
+function AddPrognoEntry(_ref5) {
+  var increments = _ref5.increments,
+    SetIncrements = _ref5.SetIncrements;
+  var _useState7 = useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    input = _useState8[0],
+    SetInput = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    error = _useState0[0],
+    SetError = _useState0[1];
+  return /*#__PURE__*/jsxs(React.Fragment, {
+    children: [/*#__PURE__*/jsx(Divider, {
+      textAlign: "left",
+      children: /*#__PURE__*/jsx("strong", {
+        children: "Add prediction row"
+      })
+    }), /*#__PURE__*/jsxs(Grid, {
+      children: [/*#__PURE__*/jsx(NumField, {
+        input: input,
+        SetInput: SetInput,
+        error: error,
+        SetError: SetError,
+        adornment: "days",
+        size: "medium"
+      }), /*#__PURE__*/jsx(IconButton, {
+        disabled: error,
+        onClick: function onClick() {
+          SetIncrements([Number(input)].concat(_toConsumableArray(increments)));
+        },
+        children: /*#__PURE__*/jsx(AddBoxIcon, {})
+      })]
+    })]
+  });
+}
+
+// render prognosis table based on day increments state array
+
+function HePrognosis() {
+  var context = useContext(HeliumContext);
+  var heliumLookupData = context.heliumLookupData;
+  var heliumData = context.heliumData;
+  // Define lookup objects
+
+  var minima = heliumLookupData.minima;
+  var specDefault = {};
+  var specList = Object.keys(heliumData.helium);
+  specList.map(function (spec) {
+    return specDefault = _objectSpread$1(_objectSpread$1({}, specDefault), {}, _defineProperty({}, spec, true));
+  });
+  var _useImmer = useImmer(specDefault),
+    _useImmer2 = _slicedToArray(_useImmer, 2),
+    specs = _useImmer2[0],
+    SetSpecs = _useImmer2[1];
+  var _useState1 = useState([14, 30, 60, 90]),
+    _useState10 = _slicedToArray(_useState1, 2),
+    increments = _useState10[0],
+    SetIncrements = _useState10[1];
+  var currHeliumData = {};
+  Object.keys(specs).filter(function (spec) {
+    return specs[spec];
+  }).map(function (spec) {
+    return currHeliumData = _objectSpread$1(_objectSpread$1({}, currHeliumData), {}, _defineProperty({}, spec, heliumData.helium[spec]));
+  });
+  var dates = {};
+  for (var i in increments) {
+    var d = new Date();
+    d.setDate(d.getDate() + increments[i]);
+    dates = _objectSpread$1(_objectSpread$1({}, dates), {}, _defineProperty({}, increments[i], moment(d).format("ll")));
+  }
+  return /*#__PURE__*/jsxs(Grid, {
+    container: true,
+    columns: {
+      xs: 6,
+      sm: 12
+    },
+    children: [/*#__PURE__*/jsx(Grid, {
+      size: 6,
+      children: /*#__PURE__*/jsx(SelectSpecs, {
+        specs: specs,
+        SetSpecs: SetSpecs
+      })
+    }), /*#__PURE__*/jsx(Grid, {
+      size: 6,
+      children: /*#__PURE__*/jsx(AddPrognoEntry, {
+        increments: increments,
+        SetIncrements: SetIncrements
+      })
+    }), /*#__PURE__*/jsx(Grid, {
+      size: 12,
+      children: /*#__PURE__*/jsxs(AppTable, {
+        children: [/*#__PURE__*/jsxs(TableHead, {
+          children: [/*#__PURE__*/jsxs(TableRow, {
+            children: [/*#__PURE__*/jsx(TableHeadCell, {}), Object.keys(currHeliumData).map(function (spec) {
+              return /*#__PURE__*/jsxs(TableHeadCell, {
+                children: [spec, /*#__PURE__*/jsx("br", {}), "(", minima[spec], " %)"]
+              }, spec + "_th");
+            }), /*#__PURE__*/jsx(TableHeadCell, {
+              children: "Sum"
+            })]
+          }), /*#__PURE__*/jsxs(TableRow, {
+            children: [/*#__PURE__*/jsx(TableHeadCell, {}), /*#__PURE__*/jsx(TableHeadCell, {
+              align: "center",
+              colSpan: Object.keys(specs).length + 1,
+              children: /*#__PURE__*/jsx("em", {
+                children: "[%], Liters, L. to max"
+              })
+            })]
+          })]
+        }), /*#__PURE__*/jsx(TableBody, {
+          children: /*#__PURE__*/jsx(HePrognosisBody, {
+            increments: increments,
+            SetIncrements: SetIncrements,
+            dates: dates,
+            currHeliumData: currHeliumData
+          })
+        })]
+      })
+    }), /*#__PURE__*/jsxs(Grid, {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        pt: 2
+      },
+      size: 12,
+      children: [/*#__PURE__*/jsx(Chip, {
+        sx: {
+          backgroundColor: errorBg,
+          color: errorText,
+          mx: 1
+        },
+        label: "Minimum in less than 30 days"
+      }), /*#__PURE__*/jsx(Chip, {
+        sx: {
+          color: warnText,
+          mx: 1
+        },
+        variant: "outlined",
+        label: "Minimum in less than 60 days"
+      })]
+    })]
+  });
+}
+
+function EstimationPanel() {
+  var context = useContext(HeliumContext);
+  return /*#__PURE__*/jsx(AppCard, {
+    title: "Helium Estimation",
+    size: context.cardSize,
+    sx: {
+      mb: context.bottomMargin
+    },
+    children: /*#__PURE__*/jsx(HePrognosis, {})
+  });
+}
+
+function FillTarget() {
+  var context = useContext(HeliumContext);
+  var heliumLookupData = context.heliumLookupData;
+  var heliumData = context.heliumData;
+  var boilOff = heliumLookupData.boilOff;
+  var lookup = heliumLookupData.lookup;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    error = _useState2[0],
+    SetError = _useState2[1];
+  var _useState3 = useState(25),
+    _useState4 = _slicedToArray(_useState3, 2),
+    amount = _useState4[0],
+    SetAmount = _useState4[1];
+  var _useState5 = useState(Object.keys(lookup)[0]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    spec = _useState6[0],
+    SetSpec = _useState6[1];
+  var currLevel = heliumData.helium[spec];
+  var currLiter = CalcLiters({
+    value: currLevel,
+    spec: spec
+  });
+  var finalLiter = currLiter + amount;
+  var finalLevel = CalcPercent({
+    value: finalLiter,
+    spec: spec
+  });
+  return /*#__PURE__*/jsx(React.Fragment, {
+    children: /*#__PURE__*/jsxs(Grid, {
+      container: true,
+      columns: {
+        xs: 6,
+        md: 12
+      },
+      children: [/*#__PURE__*/jsxs(Grid, {
+        sx: {
+          px: 2
+        },
+        size: 6,
+        children: [/*#__PURE__*/jsx(Divider, {
+          textAlign: "left",
+          children: /*#__PURE__*/jsx("strong", {
+            children: "Select Spectrometer"
+          })
+        }), /*#__PURE__*/jsx(Grid, {
+          sx: {
+            padding: 2,
+            display: "flex",
+            justifyContent: "center"
+          },
+          children: /*#__PURE__*/jsx(SpecSwitch, {
+            setup: boilOff,
+            spec: spec,
+            SetSpec: SetSpec
+          })
+        })]
+      }), /*#__PURE__*/jsxs(Grid, {
+        sx: {
+          px: 2
+        },
+        size: 6,
+        children: [/*#__PURE__*/jsx(Divider, {
+          textAlign: "left",
+          children: /*#__PURE__*/jsx("strong", {
+            children: "Current status"
+          })
+        }), /*#__PURE__*/jsx(Grid, {
+          sx: {
+            padding: 2,
+            display: "flex",
+            justifyContent: "center"
+          },
+          children: /*#__PURE__*/jsxs(Typography, {
+            variant: "h4",
+            children: [currLevel, " % (", currLiter, " L)"]
+          })
+        })]
+      }), /*#__PURE__*/jsxs(Grid, {
+        sx: {
+          px: 2
+        },
+        size: 6,
+        children: [/*#__PURE__*/jsx(Divider, {
+          textAlign: "left",
+          children: /*#__PURE__*/jsx("strong", {
+            children: "Helium fill amount"
+          })
+        }), /*#__PURE__*/jsx(Grid, {
+          sx: {
+            padding: 2,
+            display: "flex",
+            justifyContent: "center"
+          },
+          children: /*#__PURE__*/jsx(Typography, {
+            variant: "h4",
+            children: /*#__PURE__*/jsx(LiterInput, {
+              error: error,
+              SetError: SetError,
+              limit: amount,
+              SetLimit: SetAmount
+            })
+          })
+        })]
+      }), /*#__PURE__*/jsxs(Grid, {
+        sx: {
+          px: 2
+        },
+        size: 6,
+        children: [/*#__PURE__*/jsx(Divider, {
+          textAlign: "left",
+          children: /*#__PURE__*/jsx("strong", {
+            children: "After filling"
+          })
+        }), /*#__PURE__*/jsx(Grid, {
+          sx: {
+            padding: 2,
+            display: "flex",
+            justifyContent: "center"
+          },
+          children: /*#__PURE__*/jsx(Typography, {
+            variant: "h4",
+            children: /*#__PURE__*/jsxs("em", {
+              style: {
+                color: AppTheme.palette.warning.main
+              },
+              children: ["~ ", finalLevel, " % (", CalcLiters({
+                value: finalLevel,
+                spec: spec
+              }), " L)"]
+            })
+          })
+        })]
+      })]
+    })
+  });
+}
+
+function FillTargetPanel() {
+  var context = useContext(HeliumContext);
+  return /*#__PURE__*/jsx(AppCard, {
+    title: "Fill Target",
+    size: context.cardSize,
+    sx: {
+      mb: context.bottomMargin
+    },
+    children: /*#__PURE__*/jsx(FillTarget, {})
+  });
+}
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }