feat(website): Sequence loading tweaks

kubernetes/loculus/templates/_common-metadata.tpl

@@ -73,6 +73,7 @@ organisms:
     schema:
       {{- with $instance.schema }}
       instanceName: {{ quote .instanceName }}
+      loadSequencesAutomatically: {{ .loadSequencesAutomatically | default false }}
       {{ if .image }}
       image: {{ .image }}
       {{ end }}

kubernetes/loculus/values.yaml

@@ -316,6 +316,7 @@ defaultOrganisms:
           sequence: MKQYIVLACMCLVAAAMPTSLQQSSSSCTEEENKHHMGIDVIIKVTKQDQTPTNDKICQSVTEVTETEDDEVSEEVVKGDPTTYYTIVGAGLNMNFGFTKCPKISSISESSDGNTVNTRLSSVSPGQGKDSPAITREEALAMIKDCEMSIDIRCSEEEKDSDIKTHPVLGSNISHKKVSYKDIIGSTIVDTKCVKNLEFSVRIGDMCEESSELEVKDGFKYVDGSASEGATDDTSLIDSTKLKACV*
   ebola-zaire:
     schema:
+      loadSequencesAutomatically: true
       instanceName: "Ebola Zaire"
       image: "https://cdn.britannica.com/01/179201-050-FED1B381/filamentous-ebolavirus-particles-scanning-electron-micrograph-cell.jpg?w=400&h=300&c=crop"
       description: "Ebolavirus Zaire"

website/src/components/SequenceDetailsPage/SequenceContainer.spec.tsx

@@ -26,6 +26,7 @@ function renderSequenceViewer({
                 clientConfig={testConfig.public}
                 genes={genes}
                 nucleotideSegmentNames={nucleotideSegmentNames}
+                loadSequencesAutomatically={false}
             />
         </QueryClientProvider>,
     );

website/src/components/SequenceDetailsPage/SequencesContainer.tsx

@@ -1,4 +1,4 @@
-import { type Dispatch, type FC, type SetStateAction, useState } from 'react';
+import { type Dispatch, type FC, type SetStateAction, useState, useEffect } from 'react';
 
 import { SequencesViewer } from './SequenceViewer';
 import type { ClientConfig } from '../../types/runtimeConfig';
@@ -20,6 +20,7 @@ type SequenceContainerProps = {
     clientConfig: ClientConfig;
     genes: string[];
     nucleotideSegmentNames: [string, ...string[]];
+    loadSequencesAutomatically: boolean;
 };
 
 export const InnerSequencesContainer: FC<SequenceContainerProps> = ({
@@ -28,8 +29,14 @@ export const InnerSequencesContainer: FC<SequenceContainerProps> = ({
     clientConfig,
     genes,
     nucleotideSegmentNames,
+    loadSequencesAutomatically,
 }) => {
     const [loadSequences, setLoadSequences] = useState(false);
+    useEffect(() => {
+        if (loadSequencesAutomatically) {
+            setLoadSequences(true);
+        }
+    }, [loadSequencesAutomatically]);
     const [sequenceType, setSequenceType] = useState<SequenceType>(unalignedSequenceSegment(nucleotideSegmentNames[0]));
 
     if (!loadSequences) {

website/src/components/SequenceDetailsPage/SequencesDetailsPage.astro

@@ -4,6 +4,7 @@ import { RevokeButton } from './RevokeButton';
 import { SequencesContainer } from './SequencesContainer';
 import { type TableDataEntry } from './getTableData';
 import { getReferenceGenomes, getRuntimeConfig } from '../../config';
+import { getSchema } from '../../config.ts';
 import { routes } from '../../routes/routes.ts';
 import { type DataUseTermsHistoryEntry } from '../../types/backend';
 import { checkIsMyGroup } from '../../utils/checkIsMyGroup';
@@ -45,6 +46,8 @@ const session = Astro.locals.session;
 const accessToken = getAccessToken(session);
 
 const isMyGroup = accessToken !== undefined && (await checkIsMyGroup(accessToken, groupId));
+
+const loadSequencesAutomatically = getSchema(organism).loadSequencesAutomatically === true;
 ---
 
 {
@@ -61,7 +64,7 @@ const isMyGroup = accessToken !== undefined && (await checkIsMyGroup(accessToken
 <DataTable tableData={tableData} dataUseTermsHistory={dataUseTermsHistory} />
 <div>
     <a
-        class='mt-4 inline-block text-blue-600 hover:text-blue-800'
+        class='mt-4 inline-block text-primary-700 hover:text-blue-800'
         href={routes.sequencesFastaPage(accessionVersion) + '?download'}
     >
         Download FASTA
@@ -75,6 +78,7 @@ const isMyGroup = accessToken !== undefined && (await checkIsMyGroup(accessToken
         clientConfig={runtimeConfig.public}
         genes={genes}
         nucleotideSegmentNames={nucleotideSegmentNames}
+        loadSequencesAutomatically={loadSequencesAutomatically}
     />
 </div>
 

website/src/types/config.ts

@@ -76,6 +76,7 @@ const schema = z.object({
     primaryKey: z.string(),
     defaultOrderBy: z.string(),
     defaultOrder: orderByType,
+    loadSequencesAutomatically: z.boolean().optional(),
 });
 export type Schema = z.infer<typeof schema>;