Handle dataset loading and error

app/scripts/components/common/loading-skeleton.tsx

@@ -15,7 +15,7 @@ const pulse = keyframes`
   }
 `;
 
-const pulsingAnimation = css`
+export const pulsingAnimation = css`
   animation: ${pulse} 0.8s ease 0s infinite alternate;
 `;
 

app/scripts/components/exploration/constants.ts

@@ -13,12 +13,20 @@ export enum TimeDensity {
   DAY = 'day'
 }
 
+export enum TimelineDatasetStatus {
+  IDLE = 'idle',
+  LOADING = 'loading',
+  SUCCEEDED = 'succeeded',
+  ERRORED = 'errored'
+}
+
 export interface TimelineDataset {
-  status: 'idle' | 'loading' | 'succeeded' | 'errored';
+  status: TimelineDatasetStatus;
   data: any;
   error: any;
   settings: {
     // user defined settings like visibility, opacity
+    isVisible?: boolean;
   };
 }
 

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from 'styled-components';
+import { themeVal } from '@devseed-ui/theme-provider';
+
+import { DATASET_TRACK_BLOCK_HEIGHT } from './constants';
+
+import { pulsingAnimation } from '$components/common/loading-skeleton';
+
+const loadingPattern = '.-.. --- .- -.. .. -. --.'
+  .split(' ')
+  .map((c) => c.split(''));
+
+const errorPattern = '. .-. .-. --- .-. . -..'
+  .split(' ')
+  .map((c) => c.split(''));
+
+const Track = styled.div`
+  display: flex;
+  gap: 1.5rem;
+  margin: auto;
+  padding: 0 1rem;
+`;
+
+const Item = styled.div<{ code: string }>`
+  height: ${DATASET_TRACK_BLOCK_HEIGHT}px;
+  width: ${({ code }) => (code === '.' ? '1rem' : '2rem')};
+  border-radius: 4px;
+`;
+
+const TrackBlock = styled.div`
+  display: flex;
+  gap: 0.25rem;
+`;
+
+const TrackLoading = styled(Track)`
+  ${pulsingAnimation}
+
+  ${Item} {
+    background: ${themeVal('color.base-200')};
+  }
+`;
+
+const TrackError = styled(Track)`
+  ${Item} {
+    background: ${themeVal('color.danger-200')};
+  }
+`;
+
+export function DatasetTrackLoading() {
+  /* eslint-disable react/no-array-index-key */
+  return (
+    <TrackLoading>
+      {loadingPattern.map((letter, i) => (
+        <TrackBlock key={i}>
+          {letter.map((s, i2) => (
+            <Item key={i2} code={s} />
+          ))}
+        </TrackBlock>
+      ))}
+    </TrackLoading>
+  );
+  /* eslint-enable react/no-array-index-key */
+}
+
+export function DatasetTrackError() {
+  /* eslint-disable react/no-array-index-key */
+  return (
+    <TrackError>
+      {errorPattern.map((letter, i) => (
+        <TrackBlock key={i}>
+          {letter.map((s, i2) => (
+            <Item key={i2} code={s} />
+          ))}
+        </TrackBlock>
+      ))}
+    </TrackError>
+  );
+  /* eslint-enable react/no-array-index-key */
+}

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

@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
+import { useAtomValue } from 'jotai';
 import { Reorder, useDragControls } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 import {
@@ -14,6 +15,7 @@ import {
 } from 'date-fns';
 import { ScaleTime } from 'd3';
 import {
+  CollecticonArrowSpinCw,
   CollecticonEye,
   CollecticonEyeDisabled,
   CollecticonGripVertical
@@ -26,8 +28,14 @@ import {
   DATASET_TRACK_BLOCK_HEIGHT,
   HEADER_COLUMN_WIDTH,
   TimeDensity,
-  TimelineDataset
+  TimelineDataset,
+  TimelineDatasetStatus
 } from './constants';
+import { useTimelineDatasetAtom, useTimelineDatasetVisibility } from './hooks';
+import {
+  DatasetTrackError,
+  DatasetTrackLoading
+} from './dataset-list-item-status';
 
 import { LayerGradientGraphic } from '$components/common/mapbox/layer-legend';
 
@@ -103,45 +111,64 @@ const DatasetData = styled.div`
   padding: ${glsp(0.25, 0)};
   display: flex;
   align-items: center;
+  flex-grow: 1;
 `;
 
 interface DatasetListItemProps {
-  dataset: TimelineDataset;
+  datasetId: string;
   width: number;
   xScaled: ScaleTime<number, number>;
 }
 
 export function DatasetListItem(props: DatasetListItemProps) {
-  const { dataset, width, xScaled } = props;
+  const { datasetId, width, xScaled } = props;
 
-  const [isVisible, setVisible] = useState(true);
+  const datasetAtom = useTimelineDatasetAtom(datasetId);
+  const dataset = useAtomValue(datasetAtom);
+
+  const [isVisible, setVisible] = useTimelineDatasetVisibility(datasetAtom);
 
   const controls = useDragControls();
 
+  const isError = dataset.status === TimelineDatasetStatus.ERRORED;
+
   return (
     <Reorder.Item value={dataset} dragListener={false} dragControls={controls}>
       <DatasetItem>
         <DatasetHeader>
           <CollecticonGripVertical onPointerDown={(e) => controls.start(e)} />
           <DatasetInfo>
             <DatasetHeadline>
-              <Heading as='h3' size='xsmall'>
+              <Heading
+                as='h3'
+                size='xsmall'
+                variation={isError ? 'danger' : undefined}
+              >
                 {dataset.data.title}
               </Heading>
               <Toolbar size='small'>
-                <ToolbarIconButton onClick={() => setVisible((v) => !v)}>
-                  {isVisible ? (
-                    <CollecticonEye
+                {!isError ? (
+                  <ToolbarIconButton onClick={() => setVisible((v) => !v)}>
+                    {isVisible ? (
+                      <CollecticonEye
+                        meaningful
+                        title='Toggle dataset visibility'
+                      />
+                    ) : (
+                      <CollecticonEyeDisabled
+                        meaningful
+                        title='Toggle dataset visibility'
+                      />
+                    )}
+                  </ToolbarIconButton>
+                ) : (
+                  <ToolbarIconButton variation='danger-text'>
+                    <CollecticonArrowSpinCw
                       meaningful
-                      title='Toggle dataset visibility'
+                      title='Retry dataset loading'
                     />
-                  ) : (
-                    <CollecticonEyeDisabled
-                      meaningful
-                      title='Toggle dataset visibility'
-                    />
-                  )}
-                </ToolbarIconButton>
+                  </ToolbarIconButton>
+                )}
               </Toolbar>
             </DatasetHeadline>
             <LayerGradientGraphic
@@ -154,12 +181,18 @@ export function DatasetListItem(props: DatasetListItemProps) {
           </DatasetInfo>
         </DatasetHeader>
         <DatasetData>
-          <DatasetTrack
-            width={width}
-            xScaled={xScaled}
-            dataset={dataset}
-            isVisible={isVisible}
-          />
+          {dataset.status === TimelineDatasetStatus.LOADING && (
+            <DatasetTrackLoading />
+          )}
+          {isError && <DatasetTrackError />}
+          {dataset.status === TimelineDatasetStatus.SUCCEEDED && (
+            <DatasetTrack
+              width={width}
+              xScaled={xScaled}
+              dataset={dataset}
+              isVisible={!!isVisible}
+            />
+          )}
         </DatasetData>
       </DatasetItem>
     </Reorder.Item>

app/scripts/components/exploration/datasets-mock.tsx

@@ -5,9 +5,10 @@ import styled from 'styled-components';
 import { Button } from '@devseed-ui/button';
 
 import { timelineDatasetsAtom } from './atoms';
-import { TimelineDataset } from './constants';
+import { TimelineDataset, TimelineDatasetStatus } from './constants';
 
 const extraDataset = {
+  id: 'infinity',
   title: 'Daily infinity!',
   timeDensity: 'day',
   domain: eachDayOfInterval({
@@ -18,6 +19,7 @@ const extraDataset = {
 
 const datasets = [
   {
+    id: 'monthly',
     title: 'Monthly dataset',
     timeDensity: 'month',
     domain: [
@@ -29,6 +31,7 @@ const datasets = [
     ]
   },
   {
+    id: 'daily',
     title: 'Daily dataset',
     timeDensity: 'day',
     domain: [
@@ -96,6 +99,7 @@ const datasets = [
     ]
   },
   {
+    id: 'daily2',
     title: 'Daily 2',
     timeDensity: 'day',
     domain: [
@@ -107,49 +111,103 @@ const datasets = [
     ]
   },
   {
+    id: 'daily3',
     title: 'Daily 3',
     timeDensity: 'day',
     domain: eachDayOfInterval({
       start: new Date('2020-01-01'),
       end: new Date('2021-01-01')
     })
   }
-].map(makeDataset);
+].map((d) => makeDataset(d));
 
-function makeDataset(data): TimelineDataset {
+function makeDataset(
+  data,
+  status = TimelineDatasetStatus.SUCCEEDED,
+  settings: Record<string, any> = {}
+): TimelineDataset {
   return {
-    status: 'succeeded',
+    status,
     data,
     error: null,
-    settings: {}
+    settings: {
+      ...settings,
+      isVisible: settings.isVisible === undefined ? true : settings.isVisible
+    }
+  };
+}
+
+function toggleDataset(dataset) {
+  return (d) => {
+    if (d.find((dd) => dd.data.id === dataset.data.id)) {
+      return d.filter((dd) => dd.data.id !== dataset.data.id);
+    }
+    return [...d, dataset];
   };
 }
 
 const MockPanel = styled.div`
+  display: flex;
+  flex-direction: row wrap;
   padding: 1rem;
+  gap: 1rem;
 `;
 
 export function MockControls() {
   const set = useSetAtom(timelineDatasetsAtom);
 
   return (
     <MockPanel>
+      <Button onClick={() => set([])} variation='base-outline'>
+        Clear
+      </Button>
       <Button onClick={() => set(datasets)} variation='base-outline'>
         Base datasets
       </Button>
       <Button
         onClick={() => {
-          set((d) => {
-            if (d.find((dd) => dd.data.title === extraDataset.title)) {
-              return d.filter((dd) => dd.data.title !== extraDataset.title);
-            }
-            return [...d, makeDataset(extraDataset)];
-          });
+          set(toggleDataset(makeDataset(extraDataset)));
         }}
         variation='base-outline'
       >
         Toggle infinity dataset
       </Button>
+      <Button
+        onClick={() => {
+          set(
+            toggleDataset(
+              makeDataset(
+                {
+                  id: 'loading',
+                  title: 'Loading dataset'
+                },
+                TimelineDatasetStatus.LOADING
+              )
+            )
+          );
+        }}
+        variation='base-outline'
+      >
+        Toggle Loading dataset
+      </Button>
+      <Button
+        onClick={() => {
+          set(
+            toggleDataset(
+              makeDataset(
+                {
+                  id: 'errored',
+                  title: 'Error dataset'
+                },
+                TimelineDatasetStatus.ERRORED
+              )
+            )
+          );
+        }}
+        variation='base-outline'
+      >
+        Toggle Error dataset
+      </Button>
     </MockPanel>
   );
 }