feat: add banner informing about data feed issues

GenSpectrum · Jan 12, 2025 · 5347d56 · 5347d56
1 parent 9372a61
commit 5347d56
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/src/data/api-lapis.ts b/src/data/api-lapis.ts
@@ -82,7 +82,7 @@ export async function checkSiloAvailability(signal?: AbortSignal): Promise<SiloA
   return { isAvailable: false, retryAfterInSeconds: Number(retryAfterInSeconds) };
 }
 
-export async function fetchLapisDataVersion(signal?: AbortSignal): Promise<string> {
+export async function fetchLapisDataVersion(signal?: AbortSignal): Promise<number> {
   let url = '/info';
   if (ACCESS_KEY) {
     url += '?accessKey=' + ACCESS_KEY;
@@ -92,8 +92,7 @@ export async function fetchLapisDataVersion(signal?: AbortSignal): Promise<strin
     throw new Error('Error fetching info');
   }
   const info = (await response.json()) as LapisInformation;
-  currentLapisDataVersion = Number(info.dataVersion);
-  return dayjs.unix(currentLapisDataVersion).locale('en').calendar();
+  return Number(info.dataVersion);
 }
 
 export async function fetchNextcladeDatasetInfo(signal?: AbortSignal): Promise<NextcladeDatasetInfo> {

diff --git a/src/layout/base/Footer.tsx b/src/layout/base/Footer.tsx
@@ -3,6 +3,7 @@ import { sequenceDataSource } from '../../helpers/sequence-data-source';
 import { ExternalLink } from '../../components/ExternalLink';
 import React from 'react';
 import styled from 'styled-components';
+import dayjs from 'dayjs';
 
 const FooterStyle = styled.footer`
   margin-top: 50px;
@@ -16,11 +17,15 @@ export function Footer({
   lapisDataVersion,
 }: {
   nextcladeDatasetInfo?: NextcladeDatasetInfo;
-  lapisDataVersion?: string;
+  lapisDataVersion?: number;
 }) {
+  let lapisUpdateFormattedString = '';
+  if (lapisDataVersion !== undefined) {
+    lapisUpdateFormattedString = dayjs.unix(lapisDataVersion).locale('en').calendar();
+  }
   return (
     <FooterStyle className='text-center'>
-      {lapisDataVersion && <div>The sequence data was updated: {lapisDataVersion}</div>}
+      {lapisUpdateFormattedString && <div>The sequence data was updated: {lapisUpdateFormattedString}</div>}
       {nextcladeDatasetInfo?.tag && <div>Nextclade dataset version: {nextcladeDatasetInfo.tag}</div>}
       {sequenceDataSource === 'gisaid' && (
         <div>

diff --git a/src/pages/ExplorePage.tsx b/src/pages/ExplorePage.tsx
@@ -17,6 +17,8 @@ import { useSingleSelectorsFromExploreUrl } from '../helpers/selectors-from-expl
 import { InternalLink } from '../components/InternalLink';
 import { MdOutlineOpenInNew } from 'react-icons/md';
 import { Link } from 'react-router-dom';
+import { sequenceDataSource } from '../helpers/sequence-data-source';
+import { fetchLapisDataVersion } from '../data/api-lapis';
 
 type Props = {
   isSmallScreen: boolean;
@@ -54,6 +56,7 @@ export const ExplorePage = ({ isSmallScreen }: Props) => {
 
   return (
     <div className={`w-full mx-auto max-w-6xl mt-4`}>
+      <MissingDataUpdateBanner />
       <GenspectrumBanner />
       <div className='p-2 mr-4 '>
         <h1>Detect and analyze variants of SARS-CoV-2</h1>
@@ -100,6 +103,36 @@ export const ExplorePage = ({ isSmallScreen }: Props) => {
   );
 };
 
+function MissingDataUpdateBanner() {
+  const { data: lapisDataVersion } = useQuery(fetchLapisDataVersion, []);
+  console.log(lapisDataVersion);
+  if (sequenceDataSource === 'gisaid' && lapisDataVersion === 1734968364) {
+    return (
+      <div className='w-full bg-yellow-100 shadow-lg mt-4 rounded-xl p-4 dark:bg-gray-800 mx-2 mr-4'>
+        <h2>Data feed interruption</h2>
+        <p>
+          Data on this dashboard has not been updated since{' '}
+          <span className='font-bold'>23 December 2024</span> due to an interruption in the data feed. We have
+          contacted the data provider GISAID regarding this issue and hope for a resolution soon. In the
+          meantime, you can check out the{' '}
+          <Link to='https://open.cov-spectrum.org' className='text-active-secondary'>
+            Open instance of CoV-Spectrum
+          </Link>{' '}
+          or the new{' '}
+          <Link to={'https://genspectrum.org/'} className={'text-active-secondary'}>
+            <span className='inline-flex gap-1 items-center'>
+              GenSpectrum dashboard
+              <MdOutlineOpenInNew />
+            </span>
+          </Link>{' '}
+          for more recent data from INSDC.
+        </p>
+      </div>
+    );
+  }
+  return <></>;
+}
+
 function GenspectrumBanner() {
   return (
     <div className='w-full bg-blue-50 shadow-lg mt-4 rounded-xl p-4 dark:bg-gray-800 mx-2 mr-4'>