Fix ts warnings

.eslintrc

@@ -99,7 +99,8 @@
       "plugins": ["@typescript-eslint"],
       "rules": {
         "prettier/prettier": 0,
-        "@typescript-eslint/no-unused-vars": 2
+        "@typescript-eslint/no-unused-vars": 2,
+        "@typescript-eslint/no-non-null-assertion": 0
       },
       // Weird behavior with no-unused-vars
       // See https://stackoverflow.com/a/58513127

app/scripts/components/analysis/results/use-analysis-params.ts

@@ -77,7 +77,9 @@ export function useAnalysisParams(): {
 
       // Create an array with all the dataset layers.
       const allDatasetLayers = Object.values(vedaDatasets).flatMap(
-        (d) => d.data.layers
+        // When accessing the object values with Object.values, they'll always
+        // be defined.
+        (d) => d!.data.layers
       );
       const layers = datasetsLayers.split('|').map((id) =>
         // Find the one we're looking for.

app/scripts/components/common/mapbox/index.tsx

@@ -216,7 +216,7 @@ function MapboxMapComponent(props: MapboxMapProps, ref) {
   // The compare date is specified by the user.
   // If no date is specified anywhere we just use the same.
   const compareToDate = useMemo(() => {
-    const theDate = compareDate || date;
+    const theDate = compareDate ?? date;
     return theDate instanceof Date && !isNaN(theDate.getTime())
       ? theDate
       : null;
@@ -454,6 +454,7 @@ interface MapPosition {
 }
 
 export interface MapboxMapProps {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   as?: any;
   className?: string;
   id?: string;

app/scripts/components/common/mapbox/layers/raster-timeseries.tsx

@@ -22,32 +22,32 @@ const LOG = true;
 
 const FIT_BOUNDS_PADDING = 32;
 
-export interface MapLayerRasterTimeseriesProps {
+interface MapLayerRasterTimeseriesProps {
   id: string;
   stacCol: string;
-  date: Date;
+  date?: Date;
   mapInstance: mapboxgl.Map;
   sourceParams: object;
-  zoomExtent: [number, number];
+  zoomExtent?: [number, number];
   onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
   isHidden: boolean;
 }
 
-export type StacFeature = {
+export interface StacFeature {
   bbox: [number, number, number, number];
-};
+}
 
 enum STATUS_KEY {
   Global,
   Layer,
   StacSearch
 }
 
-type Statuses = {
+interface Statuses {
   [STATUS_KEY.Global]: ActionStatus;
   [STATUS_KEY.Layer]: ActionStatus;
   [STATUS_KEY.StacSearch]: ActionStatus;
-};
+}
 
 export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
   const {
@@ -63,7 +63,7 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
 
   const theme = useTheme();
   const primaryColor = theme.color?.primary;
-  const minZoom = zoomExtent?.[0];
+  const minZoom = zoomExtent?.[0] ?? -Infinity;
 
   const [showMarkers, setShowMarkers] = useState(
     mapInstance.getZoom() < minZoom
@@ -134,7 +134,7 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
     mapInstance.on('zoomend', zoomEnd);
 
     return () => {
-      mapInstance?.off('zoomend', zoomEnd);
+      mapInstance.off('zoomend', zoomEnd);
     };
   }, [minZoom, mapInstance]);
 
@@ -149,7 +149,7 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
 
     const load = async () => {
       try {
-        changeStatus?.({ status: S_LOADING, context: STATUS_KEY.StacSearch });
+        changeStatus({ status: S_LOADING, context: STATUS_KEY.StacSearch });
         const payload = {
           'filter-lang': 'cql2-json',
           filter: getFilterPayload(date, stacCol),
@@ -163,7 +163,7 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
         /* eslint-disable no-console */
         LOG &&
           console.groupCollapsed(
-            'MapLayerRasterTimeseries %cLoading Markers',
+            'MapLayerRasterTimeseries %cLoading STAC features',
             'color: orange;',
             id
           );
@@ -180,7 +180,7 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
         /* eslint-disable no-console */
         LOG &&
           console.groupCollapsed(
-            'MapLayerRasterTimeseries %cAdding Markers',
+            'MapLayerRasterTimeseries %cAdding STAC features',
             'color: green;',
             id
           );
@@ -189,15 +189,16 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
         /* eslint-enable no-console */
 
         setStacCollection(responseData.features);
-        changeStatus?.({ status: S_SUCCEEDED, context: STATUS_KEY.StacSearch });
+        changeStatus({ status: S_SUCCEEDED, context: STATUS_KEY.StacSearch });
       } catch (error) {
         if (!controller.signal.aborted) {
-          changeStatus?.({ status: S_FAILED, context: STATUS_KEY.StacSearch });
+          setStacCollection([]);
+          changeStatus({ status: S_FAILED, context: STATUS_KEY.StacSearch });
         }
         LOG &&
           /* eslint-disable-next-line no-console */
           console.log(
-            'MapLayerRasterTimeseries %cAborted Markers',
+            'MapLayerRasterTimeseries %cAborted STAC features',
             'color: red;',
             id
           );
@@ -206,16 +207,16 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
     };
     load();
     return () => {
-      controller && controller.abort();
-      changeStatus?.({ status: 'idle', context: STATUS_KEY.StacSearch });
+      controller.abort();
+      changeStatus({ status: 'idle', context: STATUS_KEY.StacSearch });
     };
   }, [id, changeStatus, stacCol, date]);
 
   //
   // Markers
   //
   useEffect(() => {
-    if (!id || !stacCol || !date || !minZoom || !stacCollection) return;
+    if (!id || !stacCol || !date || !minZoom || !stacCollection.length) return;
 
     // Create points from bboxes
     const points = stacCollection.map((f) => {
@@ -246,17 +247,14 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
     });
 
     return () => {
-      if (mapInstance) {
-        addedMarkers.current.forEach((marker) => marker.remove());
-        addedMarkers.current = [];
-      }
+      addedMarkers.current.forEach((marker) => marker.remove());
+      addedMarkers.current = [];
     };
     // The showMarkers and isHidden dep are left out on purpose, as visibility
     // is controlled below, but we need the value to initialize the markers
     // visibility.
   }, [
     id,
-    changeStatus,
     stacCol,
     stacCollection,
     date,
@@ -270,12 +268,12 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
   // Tiles
   //
   useEffect(() => {
-    if (!id || !stacCol || !date || !stacCollection) return;
+    if (!id || !stacCol || !date || !stacCollection.length) return;
 
     const controller = new AbortController();
 
     const load = async () => {
-      changeStatus?.({ status: S_LOADING, context: STATUS_KEY.Layer });
+      changeStatus({ status: S_LOADING, context: STATUS_KEY.Layer });
       try {
         const payload = {
           'filter-lang': 'cql2-json',
@@ -285,7 +283,7 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
         /* eslint-disable no-console */
         LOG &&
           console.groupCollapsed(
-            'MapLayerRasterTimeseries %cLoading',
+            'MapLayerRasterTimeseries %cLoading Mosaic',
             'color: orange;',
             id
           );
@@ -312,7 +310,7 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
         /* eslint-disable no-console */
         LOG &&
           console.groupCollapsed(
-            'MapLayerRasterTimeseries %cAdding',
+            'MapLayerRasterTimeseries %cAdding Mosaic',
             'color: green;',
             id
           );
@@ -344,26 +342,33 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
           },
           'admin-0-boundary-bg'
         );
-        changeStatus?.({ status: S_SUCCEEDED, context: STATUS_KEY.Layer });
-
+        changeStatus({ status: S_SUCCEEDED, context: STATUS_KEY.Layer });
       } catch (error) {
         if (!controller.signal.aborted) {
-          changeStatus?.({ status: S_FAILED, context: STATUS_KEY.Layer });
+          changeStatus({ status: S_FAILED, context: STATUS_KEY.Layer });
         }
         LOG &&
           /* eslint-disable-next-line no-console */
-          console.log('MapLayerRasterTimeseries %cAborted', 'color: red;', id);
+          console.log(
+            'MapLayerRasterTimeseries %cAborted Mosaic',
+            'color: red;',
+            id
+          );
         return;
       }
     };
 
     load();
 
     return () => {
-      controller && controller.abort();
-      changeStatus?.({ status: 'idle', context: STATUS_KEY.Layer });
+      controller.abort();
+      changeStatus({ status: 'idle', context: STATUS_KEY.Layer });
 
-      if (mapInstance?.getSource(id)) {
+      const source = mapInstance.getSource(id) as
+        | mapboxgl.AnySourceImpl
+        | undefined;
+
+      if (source) {
         mapInstance.removeLayer(id);
         mapInstance.removeSource(id);
       }
@@ -381,7 +386,7 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
     sourceParams
   ]);
 
-  // 
+  //
   // FitBounds when needed
   //
   useEffect(() => {

app/scripts/components/common/related-content.tsx

@@ -107,7 +107,7 @@ function formatContents(relatedData: RelatedContentData[]) {
     // Even though type should be one of the defined values, this values comes
     // from user generated content and we can't be sure, so the checks are in
     // place.
-    const matchingContent = contentCategory[type]?.[id].data;
+    const matchingContent = contentCategory[type][id]?.data;
 
     if (!matchingContent) {
       throw Error(

app/scripts/components/datasets/s-explore/dataset-layers.tsx

@@ -31,6 +31,9 @@ interface DatasetLayersProps {
 export default function DatasetLayers(props: DatasetLayersProps) {
   const { datasetId, asyncLayers, onAction, selectedLayerId } = props;
 
+  const dataset = datasets[datasetId];
+  if (!dataset) return null;
+
   return (
     <AccordionManager>
       <LayerList>
@@ -49,7 +52,7 @@ export default function DatasetLayers(props: DatasetLayersProps) {
               );
             case S_FAILED: {
               // The order of the asyncLayers is the same as the source layers.
-              const sourceLayer = datasets[datasetId].data.layers[idx];
+              const sourceLayer = dataset.data.layers[idx];
               return (
                 /* eslint-disable-next-line react/no-array-index-key */
                 <li key={idx}>

app/scripts/context/layer-data.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useDeepCompareMemo } from "use-deep-compare";
+import { useDeepCompareMemo } from 'use-deep-compare';
 import {
   QueryState,
   useQueries,
@@ -76,6 +76,12 @@ export interface AsyncDatasetLayer {
   reFetch: (() => void) | null;
 }
 
+interface NullAsyncDatasetLayer {
+  baseLayer: null;
+  compareLayer: null;
+  reFetch: null;
+}
+
 const useLayersInit = (layers: DatasetLayer[]): AsyncDatasetLayer[] => {
   const queryClient = useQueryClient();
 
@@ -97,7 +103,9 @@ const useLayersInit = (layers: DatasetLayer[]): AsyncDatasetLayer[] => {
   // useQueries does not produce a stable result, so `layerQueries` will be
   // changing on every render. This is a problem because we must compute the
   // final layer data which should only be done if the data actually changes.
-  const layerQueries = useQueries({ queries }) as UseQueryResult<STACLayerData>[];
+  const layerQueries = useQueries({
+    queries
+  }) as UseQueryResult<STACLayerData>[];
   // There is an issue for this behavior but seems like it won't be fixed in the
   // near future:
   // https://github.com/tannerlinsley/react-query/issues/3049
@@ -111,6 +119,7 @@ const useLayersInit = (layers: DatasetLayer[]): AsyncDatasetLayer[] => {
     >(baseData: T) {
       // At this point the result of queryClient.getQueryState will never be
       // undefined.
+      /* eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style */
       const dataSTAC = queryClient.getQueryState([
         'layer',
         baseData.stacCol
@@ -155,10 +164,14 @@ const useLayersInit = (layers: DatasetLayer[]): AsyncDatasetLayer[] => {
 };
 
 // Context consumers.
-export const useDatasetAsyncLayer = (datasetId?: string, layerId?: string) => {
+export const useDatasetAsyncLayer = (
+  datasetId?: string,
+  layerId?: string
+): NullAsyncDatasetLayer | AsyncDatasetLayer => {
   const hasParams = !!datasetId && !!layerId;
+  const dataset = datasets[datasetId ?? ''];
   // Get the layer information from the dataset defined in the configuration.
-  const layersList = datasetId ? datasets[datasetId]?.data.layers : [];
+  const layersList = dataset ? dataset.data.layers : [];
   const layer = layersList.find((l) => l.id === layerId);
 
   // The layers must be defined in the configuration otherwise it is not
@@ -172,7 +185,7 @@ export const useDatasetAsyncLayer = (datasetId?: string, layerId?: string) => {
 
   return useMemo(
     () =>
-      asyncLayers?.[0] || {
+      asyncLayers[0] || {
         baseLayer: null,
         compareLayer: null,
         reFetch: null
@@ -182,8 +195,9 @@ export const useDatasetAsyncLayer = (datasetId?: string, layerId?: string) => {
 };
 
 export const useDatasetAsyncLayers = (datasetId) => {
+  const dataset = datasets[datasetId ?? ''];
   // Get the layer information from the dataset defined in the configuration.
-  return useLayersInit(datasets[datasetId]?.data.layers);
+  return useLayersInit(dataset?.data.layers ?? []);
 };
 
 interface ReferencedLayer {
@@ -197,8 +211,9 @@ export const useAsyncLayers = (referencedLayers: ReferencedLayer[]) => {
   const layers = useMemo(
     () =>
       referencedLayers.map(({ datasetId, layerId, skipCompare }) => {
+        const layers = datasets[datasetId]?.data.layers;
         // Get the layer information from the dataset defined in the configuration.
-        const layer = datasets[datasetId]?.data.layers?.find(
+        const layer = layers?.find(
           (l) => l.id === layerId
         ) as DatasetLayer | null;