Display error message when the analysis items is over max

app/scripts/components/exploration/analysis-data.ts

@@ -7,6 +7,7 @@ import {
   TimelineDatasetAnalysis,
   TimelineDatasetStatus
 } from './types.d.ts';
+import { ExtendedError } from './data-utils';
 import {
   combineFeatureCollection,
   getFilterPayload
@@ -59,6 +60,7 @@ async function getDatasetAssets(
 }
 
 interface TimeseriesRequesterParams {
+  maxItems: number;
   start: Date;
   end: Date;
   aoi: FeatureCollection<Polygon>;
@@ -73,6 +75,7 @@ interface TimeseriesRequesterParams {
  * area of interest.
  */
 export async function requestDatasetTimeseriesData({
+  maxItems,
   start,
   end,
   aoi,
@@ -129,6 +132,24 @@ export async function requestDatasetTimeseriesData({
       }
     });
 
+    if (assets.length > maxItems) {
+      const e = new ExtendedError(
+        'Too many assets to analyze',
+        'TOO_MANY_ASSETS'
+      );
+      e.details = {
+        assetCount: assets.length
+      };
+
+      onProgress({
+        ...datasetAnalysis,
+        status: TimelineDatasetStatus.ERROR,
+        error: e,
+        data: null
+      });
+      return;
+    }
+
     let loaded = 0;
 
     const layerStatistics = await Promise.all(

app/scripts/components/exploration/components/datasets/dataset-list-item-status.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import { Button } from '@devseed-ui/button';
 import { CollecticonArrowLoop } from '@devseed-ui/collecticons';
 
 import { pulsingAnimation } from '$components/common/loading-skeleton';
-import { DATASET_TRACK_BLOCK_HEIGHT } from '$components/exploration/constants';
+import {
+  DATASET_TRACK_BLOCK_HEIGHT,
+  MAX_QUERY_NUM
+} from '$components/exploration/constants';
+import { ExtendedError } from '$components/exploration/data-utils';
 
 const loadingPattern = '.-.. --- .- -.. .. -. --.'
   .split(' ')
@@ -33,7 +37,7 @@ const TrackBlock = styled.div`
   gap: 0.25rem;
 `;
 
-const TrackMessage = styled.div`
+const TrackMessage = styled.div<{ isError?: boolean }>`
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -42,6 +46,15 @@ const TrackMessage = styled.div`
   z-index: ${themeVal('zIndices.overlay')};
   display: flex;
   gap: 1rem;
+  font-weight: ${themeVal('type.base.bold')};
+  font-size: 0.875rem;
+  text-align: center;
+
+  ${({ isError }) =>
+    isError &&
+    css`
+      color: ${themeVal('color.danger')};
+    `}
 `;
 
 const TrackLoading = styled(Track)`
@@ -79,24 +92,44 @@ export function DatasetTrackLoading(props: { message?: React.ReactNode }) {
 }
 
 export function DatasetTrackError(props: {
+  error?: any;
   message?: React.ReactNode;
   onRetryClick?: () => void;
 }) {
-  const { message, onRetryClick } = props;
+  const { message, onRetryClick, error } = props;
+
   /* eslint-disable react/no-array-index-key */
+  const patternContent = (
+    <TrackError>
+      {errorPattern.map((letter, i) => (
+        <TrackBlock key={i}>
+          {letter.map((s, i2) => (
+            <Item key={i2} code={s} />
+          ))}
+        </TrackBlock>
+      ))}
+    </TrackError>
+  );
+
+  if (error instanceof ExtendedError && error.code === 'TOO_MANY_ASSETS') {
+    return (
+      <>
+        {patternContent}
+        <TrackMessage isError>
+          <p>
+            Analysis is limited to {MAX_QUERY_NUM} data points. Your selection
+            includes {error.details?.assetCount} points. Please select a shorter time range.
+          </p>
+        </TrackMessage>
+      </>
+    );
+  }
+
   return (
     <>
-      <TrackError>
-        {errorPattern.map((letter, i) => (
-          <TrackBlock key={i}>
-            {letter.map((s, i2) => (
-              <Item key={i2} code={s} />
-            ))}
-          </TrackBlock>
-        ))}
-      </TrackError>
+      {patternContent}
       {message && (
-        <TrackMessage>
+        <TrackMessage isError>
           <p>{message}</p>
           {typeof onRetryClick === 'function' ? (
             <Button variation='danger-fill' size='small' onClick={onRetryClick}>

app/scripts/components/exploration/components/datasets/dataset-list-item.tsx

@@ -281,6 +281,7 @@ export function DatasetListItem(props: DatasetListItemProps) {
               )}
               {isAnalysisAndError && (
                 <DatasetTrackError
+                  error={dataset.analysis.error}
                   message='Oh no, something went wrong'
                   onRetryClick={() => {
                     /* eslint-disable-next-line no-console */

app/scripts/components/exploration/constants.ts

@@ -9,3 +9,5 @@ export const emptyDateRange = {
   start: null,
   end: null
 };
+
+export const MAX_QUERY_NUM = 300;

app/scripts/components/exploration/data-utils.ts

@@ -167,3 +167,13 @@ export function urlDatasetsHydrate(
   const parsed = JSON.parse(encoded);
   return parsed;
 }
+
+export class ExtendedError extends Error {
+  code: string;
+  details?: any;
+
+  constructor(message: string, code: string) {
+    super(message);
+    this.code = code;
+  }
+}

app/scripts/components/exploration/hooks/use-analysis-data-request.ts

@@ -8,6 +8,7 @@ import { analysisControllerAtom, selectedIntervalAtom } from '../atoms/atoms';
 import { useTimelineDatasetAnalysis } from '../atoms/hooks';
 import { analysisConcurrencyManager } from '../concurrency';
 import { TimelineDataset, TimelineDatasetStatus } from '../types.d.ts';
+import { MAX_QUERY_NUM } from '../constants';
 import useAois from '$components/common/map/controls/hooks/use-aois';
 
 export function useAnalysisController() {
@@ -96,6 +97,7 @@ export function useAnalysisDataRequest({
     const { start, end } = selectedInterval;
 
     requestDatasetTimeseriesData({
+      maxItems: MAX_QUERY_NUM,
       start,
       end,
       aoi,

app/scripts/components/exploration/types.d.ts.ts

@@ -61,7 +61,7 @@ export interface TimelineDatasetAnalysisLoading {
 export interface TimelineDatasetAnalysisError {
   status: TimelineDatasetStatus.ERROR;
   data: null;
-  error: unknown;
+  error: any;
   meta: Partial<AnalysisMeta>
 }
 export interface TimelineDatasetAnalysisSuccess {