(feat): SeqSet details page graphs and layout updates

integration-tests/tests/pages/seqset.page.ts

@@ -22,7 +22,7 @@ export class SeqSetPage {
     }
 
     getHeading(name: string) {
-        return this.page.getByRole('heading', { name });
+        return this.page.getByRole('heading').filter({ hasText: name });
     }
 
     async openCreateDialog() {
@@ -35,7 +35,7 @@ export class SeqSetPage {
     async createSeqSet(input: SeqSetFormInput) {
         await this.openCreateDialog();
         await this.fillSeqSetForm(input);
-        await this.submitSeqSetForm(input.name);
+        await this.submitSeqSetForm();
     }
 
     async fillSeqSetForm(input: SeqSetFormInput) {
@@ -58,18 +58,23 @@ export class SeqSetPage {
         }
     }
 
-    async submitSeqSetForm(expectedName: string) {
+    async submitSeqSetForm() {
         await this.page.getByRole('button', { name: 'Save' }).click();
-        await expect(this.getHeading(expectedName)).toBeVisible();
     }
 
-    async expectDetailLayout(name: string) {
-        await expect(this.getHeading(name)).toBeVisible();
+    async expectDetailLayout(name: string, description: string) {
+        await this.expectAccessionMatchesUrl();
         await expect(this.page.getByRole('button', { name: 'Export' })).toBeVisible();
         await expect(this.page.getByRole('button', { name: 'Edit' })).toBeVisible();
         await expect(this.page.getByRole('button', { name: 'Delete' })).toBeVisible();
-        await expect(this.page.getByText('Created date')).toBeVisible();
+        await expect(this.page.getByText('Name', { exact: true })).toBeVisible();
+        await expect(this.page.getByText(name, { exact: true })).toBeVisible();
+        await expect(this.page.getByText('Description', { exact: true })).toBeVisible();
+        await expect(this.page.getByText(description, { exact: true })).toBeVisible();
         await expect(this.page.getByText('Version', { exact: true })).toBeVisible();
+        await expect(this.page.getByText('Created by', { exact: true })).toBeVisible();
+        await expect(this.page.getByText('Created date', { exact: true })).toBeVisible();
+        await expect(this.page.getByText('Size', { exact: true })).toBeVisible();
         await expect(this.page.getByText('Accession', { exact: true })).toBeVisible();
     }
 
@@ -111,12 +116,19 @@ export class SeqSetPage {
         await this.page.waitForLoadState('networkidle');
     }
 
+    async expectAccessionMatchesUrl() {
+        const url = this.page.url();
+        const accession = url.split('/seqsets/')[1];
+        await expect(this.getHeading(accession)).toBeVisible();
+    }
+
     async editSeqSetName(newName: string) {
         await this.page.getByRole('button', { name: 'Edit' }).click();
         const nameField = this.page.locator('#seqSet-name');
         await nameField.waitFor({ state: 'visible' });
         await nameField.fill(newName);
         await this.page.getByRole('button', { name: 'Save' }).click();
-        await expect(this.getHeading(newName)).toBeVisible();
+        await this.expectAccessionMatchesUrl();
+        await expect(this.page.getByText(newName, { exact: true })).toBeVisible();
     }
 }

integration-tests/tests/specs/features/seqsets.dependent.spec.ts

@@ -61,7 +61,7 @@ test.describe('SeqSet management', () => {
             backgroundAccessions: [backgroundAccession],
         });
 
-        await seqSetPage.expectDetailLayout(seqSetName);
+        await seqSetPage.expectDetailLayout(seqSetName, seqSetDescription);
 
         const jsonDownload = await seqSetPage.exportSeqSet('json');
         expect(jsonDownload.suggestedFilename()).toContain(seqSetName);

website/.dockerignore

@@ -6,6 +6,6 @@ src/**/*.spec.ts*
 !package-lock.json
 !astro.config.mjs
 !tailwind.config.cjs
-!colors.cjs
+!colors.json
 !tsconfig.json
 !.env.docker

website/colors.json

@@ -0,0 +1,16 @@
+{
+    "mainTailwindColor": {
+        "50": "#f3f6fb",
+        "100": "#e4e9f5",
+        "200": "#cfdaee",
+        "300": "#aec1e2",
+        "400": "#88a1d2",
+        "500": "#6b84c6",
+        "600": "#586bb8",
+        "700": "#4d5ba8",
+        "800": "#3e467e",
+        "900": "#3a416e",
+        "950": "#272b44",
+        "1500": "#25396e"
+    }
+}

website/package.json

@@ -34,6 +34,7 @@
         "axios": "^1.13.6",
         "change-case": "~5.3.0",
         "chart.js": "^4.5.1",
+        "chartjs-adapter-date-fns": "^3.0.0",
         "cookie": "^1.1.1",
         "fflate": "^0.8.2",
         "flowbite-react": "^0.10.2",

website/src/components/SeqSetCitations/CitationPlot.tsx

@@ -1,25 +1,15 @@
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
-import { type FC, useState, useEffect } from 'react';
-import { Bar } from 'react-chartjs-2';
+import React from 'react';
 
-import type { CitedByResult } from '../../types/seqSetCitation';
+import { type CitedByResult } from '../../types/seqSetCitation';
+import { BarPlot } from '../common/BarPlot';
 
 type CitationPlotProps = {
     citedByData: CitedByResult;
+    description?: string;
+    barColor?: string;
 };
 
-export const CitationPlot: FC<CitationPlotProps> = ({ citedByData }) => {
-    const [isRegistered, setIsRegistered] = useState(false);
-
-    useEffect(() => {
-        ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-        setIsRegistered(true);
-    }, []);
-
-    if (!isRegistered) {
-        return null;
-    }
-
+export const CitationPlot: React.FC<CitationPlotProps> = ({ citedByData, description, barColor }) => {
     const emptyCitedByData = {
         years: [2020, 2021, 2022, 2023, 2024],
         citations: [0, 0, 0, 0, 0],
@@ -28,37 +18,30 @@ export const CitationPlot: FC<CitationPlotProps> = ({ citedByData }) => {
     const renderData = citedByData.years.length > 0 ? citedByData : emptyCitedByData;
 
     return (
-        <Bar
+        <BarPlot
             data={{
                 labels: renderData.years,
                 datasets: [
                     {
                         data: renderData.citations,
                         label: 'Citation count',
-                        backgroundColor: '#54858c',
+                        backgroundColor: barColor,
                     },
                 ],
             }}
             options={{
-                maintainAspectRatio: false,
-                responsive: false,
-                plugins: {
-                    title: {
-                        display: true,
-                    },
-                    legend: {
-                        display: false,
-                    },
-                },
                 scales: {
-                    y: {
-                        suggestedMax: 10,
+                    x: {
                         grid: {
                             color: 'rgba(0, 0, 0, 0)',
                         },
                     },
+                    y: {
+                        suggestedMax: 10,
+                    },
                 },
             }}
+            description={description}
         />
     );
 };