Fixup linting errors

src/components/ControlPanel/SweSelector.tsx

@@ -25,10 +25,12 @@ const BasemapSelector: React.FC = () => {
     setSelectedSweVariableId(eventKey);
   };
 
+  // TODO: This isn't how we handle errors! Let's catch it with an error
+  // boundary instead? Do we need a wrapper component for that? Ugh.
   if (sweVariablesIndexQuery.isError) {
-    console.debug(`Error!: ${sweVariablesIndexQuery.error}`);
+    console.debug(`Error!: ${sweVariablesIndexQuery.error.message}`);
     return (
-      <span>{`Error: ${sweVariablesIndexQuery.error}`}</span>
+      <span>{`Error: ${sweVariablesIndexQuery.error.message}`}</span>
     );
   }
 

src/components/MainWindow/LinePlot.tsx

@@ -8,48 +8,33 @@ import HighchartsReact from 'highcharts-react-official';
 
 import '@src/style/LinePlot.css';
 import '@src/style/card.css';
-import {selectedRegionAtom} from '@src/state/client/derived/selectedRegion';
 import {plotDataQueryAtomFamily} from '@src/state/server/plotData';
 import {IPlotData} from '@src/types/query/plotData';
 import {IRichSuperRegionVariable} from '@src/types/query/variables';
-import LoadingIcon from '@src/components/common/LoadingIcon';
+import {IGenericRegion} from '@src/types/query/regions';
 
 HighchartsAccessibility(Highcharts);
 HighchartsMore(Highcharts);
 
 
 interface ILinePlotProps {
-  selectedSatelliteVariableId: string | undefined;
-  selectedSatelliteVariable: IRichSuperRegionVariable | undefined;
+  selectedSatelliteVariableId: string;
+  selectedSatelliteVariable: IRichSuperRegionVariable;
+  selectedRegion: IGenericRegion;
 }
 
 
 // TODO: This component re-renders too frequently!!!
 const LinePlot: React.FC<ILinePlotProps> = (props) => {
   const chartRef = useRef<HighchartsReact.RefObject>(null);
 
-  const selectedRegion = useAtomValue(selectedRegionAtom);
-
-  if (
-    props.selectedSatelliteVariable === undefined
-    || props.selectedSatelliteVariableId === undefined
-    || selectedRegion === undefined
-  ) {
-    return (
-      <div className={'LinePlot'}>
-        <div className={'card-loading-overlay'}>
-          <LoadingIcon size={200} />
-        </div>
-      </div>
-    );
-  }
   const plotDataQuery = useAtomValue(plotDataQueryAtomFamily({
-    regionId: selectedRegion.id,
+    regionId: props.selectedRegion.id,
     variableId: props.selectedSatelliteVariableId,
   }));
 
   const varLongname = props.selectedSatelliteVariable.longNamePlot;
-  const regionLongname = selectedRegion.longName;
+  const regionLongname = props.selectedRegion.longName;
   if (plotDataQuery.isError) {
     console.debug(`Error!: ${String(plotDataQuery.error)}`);
     return (

src/components/MainWindow/SlippyMap/index.tsx

@@ -52,8 +52,8 @@ import SlippyMapTooltip from './Tooltip';
 
 
 interface ISlippyMapProps {
-  selectedSatelliteVariableId: string | undefined;
-  selectedSatelliteVariable: IRichSuperRegionVariable | undefined;
+  selectedSatelliteVariableId: string;
+  selectedSatelliteVariable: IRichSuperRegionVariable;
 }
 
 
@@ -183,19 +183,6 @@ const SlippyMap: React.FC<ISlippyMapProps> = (props) => {
   slippyMapRef.current = openLayersMap || null;
   const divId = `map-container-${slippyMapUid}`
 
-  if (
-    props.selectedSatelliteVariable === undefined
-    || props.selectedSatelliteVariableId === undefined
-  ) {
-    return (
-      <div
-        id={divId}
-        ref={slippyMapHtmlElement}
-        className="map-container">
-      </div>
-    );
-  }
-
   return (
     <>
       <div className={"SlippyMap"}>

src/components/MainWindow/Tile.tsx

@@ -7,10 +7,10 @@ import '@src/style/Tile.css';
 import {CITATION} from '@src/constants/citation';
 import {ErrorFallbackTileComponent} from '@src/components/common/ErrorFallback';
 import {ITileIdentifier} from '@src/types/layout';
-import {selectedRegionIdAtom} from '@src/state/client/selectedRegionId';
 import {selectedSatelliteVariableIdAtomFamily} from '@src/state/client/selectedSatelliteVariableId';
-import {selectedSatelliteVariableAtomFamily} from '@src/state/client/derived/selectedSatelliteVariable';
 import {selectedTileTypeAtomFamily} from '@src/state/client/selectedTileType';
+import {selectedSatelliteVariableAtomFamily} from '@src/state/client/derived/selectedSatelliteVariable';
+import {selectedRegionAtom} from '@src/state/client/derived/selectedRegion';
 import LoadingIcon from '@src/components/common/LoadingIcon';
 import LinePlot from './LinePlot';
 import SlippyMap from './SlippyMap';
@@ -29,18 +29,26 @@ const Tile: React.FC<ITileProps> = (props) => {
   const selectedTileType = useAtomValue(
     selectedTileTypeAtomFamily(tileIdentifier)
   );
-  const selectedRegionId = useAtomValue(selectedRegionIdAtom);
-  console.debug(selectedRegionId);
+  const selectedRegion = useAtomValue(selectedRegionAtom);
+
+  // NOTE: Hoisted these checks out of the visualization components so they
+  // don't have to worry about undefined. 
+  if (
+    selectedRegion === undefined
+    || selectedSatelliteVariableId === undefined
+    || selectedSatelliteVariable === undefined
+  ) {
+    return (<LoadingIcon size={200} />);
+  }
 
-  // TODO: Pass in selected variable as props? Or pass in row and column as
-  // props and let the tiles themselves access state?
 
   let content: JSX.Element;
   if (selectedTileType === 'plot') {
     content = (
       <LinePlot
         selectedSatelliteVariableId={selectedSatelliteVariableId}
         selectedSatelliteVariable={selectedSatelliteVariable}
+        selectedRegion={selectedRegion}
       />
     );
   } else if (selectedTileType === 'map') {
@@ -58,7 +66,7 @@ const Tile: React.FC<ITileProps> = (props) => {
     <div className={'Tile snow-today-card'} style={props.style}>
       <ErrorBoundary
         FallbackComponent={ErrorFallbackTileComponent}
-        resetKeys={[selectedTileType, selectedRegionId, selectedSatelliteVariableId]}
+        resetKeys={[selectedTileType, selectedRegion, selectedSatelliteVariableId]}
       >
         <Suspense fallback={<LoadingIcon size={200} />}>
           {content}

src/state/client/derived/availableVariables.ts

@@ -16,8 +16,8 @@ export interface IAvailableVariablesIndex {
 
 export const availableVariablesAtom = atom<Promise<IAvailableVariablesIndex | undefined>>(
   async (get) => {
-    const variablesIndex = await get(sspRichVariablesIndexAtom);
     const selectedSuperRegion = await get(selectedSuperRegionAtom);
+    const variablesIndex = get(sspRichVariablesIndexAtom);
 
     if (
       selectedSuperRegion === undefined

src/state/client/derived/defaultVariableId.ts

@@ -15,18 +15,20 @@ export const defaultVariableIdAtom = atom<Promise<string | undefined>>(
     const vars = Object.entries(availableVariables);
     const defaults = vars.filter(([k, v]) => !!v.default);
 
-    if (defaults.length == 1) {
+    if (defaults.length === 1) {
       return defaults[0][0];
     } else if (defaults.length > 1) {
       console.warn(
         'Expected exactly 1 default variable.'
-        + ` Got ${defaults.length}, defaulting to first:\n${defaults}`
+        + ` Got ${defaults.length}. Defaulting to first element of:\n`
+        + `${JSON.stringify(defaults)}`
       );
       return vars[0][0];
     }
 
     throw new Error(
-      `Expected exactly 1 default variable. Got 0. Variables:\n${availableVariables}`
+      'Expected exactly 1 default variable. Got 0. Variables:\n'
+      + `${JSON.stringify(availableVariables)}`
     );
   },
 );

src/state/client/derived/mapView.ts

@@ -25,7 +25,7 @@ export const mapViewAtomFamily = atomFamily(
       // if (geoJsonGeometryFeatures.length !== 1) {
       //   throw new Error('GeoJSON should only include 1 feature.');
       // }
-      if (geoJsonGeometryFeatures.length == 0) {
+      if (geoJsonGeometryFeatures.length === 0) {
         throw new Error('GeoJSON should include >=1 features; found 0.');
       }
       const superRegionExtent = geoJsonGeometryFeatures[0].getGeometry()!.getExtent();

src/state/client/derived/selectedSweVariable.ts

@@ -10,8 +10,8 @@ import {sweRichVariablesIndexAtom} from '@src/state/client/derived/richVariables
 
 
 type AtomValue = ISweRichVariable | undefined;
-export const selectedSweVariableAtom = atom<Promise<AtomValue>>(
-  async (get) => {
+export const selectedSweVariableAtom = atom<AtomValue>(
+  (get) => {
     // TODO: Should change rich index query to async and await it?
     const variablesIndex = get(sweRichVariablesIndexAtom);
     const selectedVariable = get(selectedSweVariableIdAtom);

src/util/sideEffects/slippyMap.ts

@@ -145,30 +145,27 @@ export const useMapView = (
 export const useNotProcessedLayerToggle = (
   slippyMapUid: string,
   notProcessedLayerEnabled: boolean,
-  selectedSatelliteVariableObject: ISspRichVariable | undefined,
-  // FIXME: no any...
+  selectedSatelliteVariableObject: ISspRichVariable,
   availableVariables: IAvailableVariablesIndex | undefined,
 ): void => {
   useEffect(() => {
-    if (
-      selectedSatelliteVariableObject === undefined
-      || availableVariables === undefined
-    ) {
+    if (availableVariables === undefined) {
       return;
     }
 
     const notProcessedVariables = Object.entries(availableVariables).filter(
       ([key, params]) => (
         params.layerType === 'raster_notprocessed'
-        && params.sensor == selectedSatelliteVariableObject.sensor
-        && params.platform == selectedSatelliteVariableObject.platform
-        && params.algorithm == selectedSatelliteVariableObject.algorithm
+        && params.sensor === selectedSatelliteVariableObject.sensor
+        && params.platform === selectedSatelliteVariableObject.platform
+        && params.algorithm === selectedSatelliteVariableObject.algorithm
       )
     );
 
     if (notProcessedVariables.length !== 1) {
       throw new Error(
-        `Exactly one matching notprocessed variable is expected. Got ${notProcessedVariables}.`
+        'Exactly one matching notprocessed variable is expected.'
+        + `Got: ${JSON.stringify(notProcessedVariables)}.`
       );
     }
     const notProcessedVariableParams = notProcessedVariables[0][1];
@@ -214,14 +211,11 @@ export const useSelectedRegionShape = (
 
 export const useSelectedRasterVariable = (
   slippyMapUid: string,
-  selectedSatelliteVariableObject: IRichSuperRegionVariable | undefined,
+  selectedSatelliteVariableObject: IRichSuperRegionVariable,
   openLayersMap: OptionalOpenLayersMap,
 ): void => {
   useEffect(() => {
-    if (
-      openLayersMap === undefined
-      || selectedSatelliteVariableObject === undefined
-    ) {
+    if (openLayersMap === undefined) {
       return;
     }