feat(components): number of sequences over time: implement bar chart …

…view

closes #316

components/src/preact/numberSequencesOverTime/getNumberOfSequencesOverTimeTableData.ts

@@ -1,10 +1,11 @@
 import type { NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
-import type { TemporalGranularity } from '../../types';
 import { generateAllInRange, getMinMaxTemporal, type Temporal } from '../../utils/temporal';
 
-export const getNumberOfSequencesOverTimeTableData = (
+type TableRow<DateRangeKey extends string> = { [K in DateRangeKey]: string } & { [key: string]: number };
+
+export const getNumberOfSequencesOverTimeTableData = <DateRangeKey extends string>(
     data: NumberOfSequencesDatasets,
-    granularity: TemporalGranularity,
+    dateRangeKey: DateRangeKey,
 ) => {
     const datasetsWithCountByDate = data.map(({ displayName, content }) => ({
         displayName,
@@ -32,7 +33,7 @@ export const getNumberOfSequencesOverTimeTableData = (
                 ...acc,
                 [dataset.displayName]: dataset.content.get(dateRange?.toString())?.count ?? 0,
             }),
-            { [granularity]: dateRange?.toString() ?? 'Unknown' } as Record<string, number | string>,
+            { [dateRangeKey]: dateRange?.toString() ?? 'Unknown' } as TableRow<DateRangeKey>,
         );
     });
 };

components/src/preact/numberSequencesOverTime/number-sequences-over-time-bar-chart.tsx

@@ -0,0 +1,58 @@
+import { Chart, type ChartConfiguration, type ChartDataset, registerables } from 'chart.js';
+import { useMemo } from 'preact/hooks';
+
+import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
+import { type NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
+import GsChart from '../components/chart';
+import { singleGraphColorRGBAById } from '../shared/charts/colors';
+
+interface NumberSequencesOverBarChartProps {
+    data: NumberOfSequencesDatasets;
+}
+
+Chart.register(...registerables);
+
+export const NumberSequencesOverTimeBarChart = ({ data }: NumberSequencesOverBarChartProps) => {
+    const config: ChartConfiguration = useMemo(
+        () => ({
+            type: 'bar',
+            data: {
+                datasets: getDatasets(data),
+            },
+            options: {
+                maintainAspectRatio: false,
+                animation: false,
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                    },
+                },
+            },
+        }),
+        [data],
+    );
+
+    return <GsChart configuration={config} />;
+};
+
+const getDatasets = (data: NumberOfSequencesDatasets) => {
+    const tableData = getNumberOfSequencesOverTimeTableData(data, 'date');
+
+    return data.map(
+        ({ displayName }, index) =>
+            ({
+                borderWidth: 1,
+                label: displayName,
+                backgroundColor: singleGraphColorRGBAById(index, 0.3),
+                borderColor: singleGraphColorRGBAById(index),
+                data: tableData.map((row) => ({
+                    x: row.date,
+                    y: row[displayName],
+                })),
+            }) as ChartDataset<'bar', { x: string; y: number }[]>,
+    );
+};

components/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -1,5 +1,6 @@
 import { useContext } from 'preact/hooks';
 
+import { NumberSequencesOverTimeBarChart } from './number-sequences-over-time-bar-chart';
 import { NumberSequencesOverTimeTable } from './number-sequences-over-time-table';
 import {
     type NumberOfSequencesDatasets,
@@ -87,7 +88,7 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: Num
     const getTab = (view: NumberSequencesOverTimeView) => {
         switch (view) {
             case 'bar':
-                return { title: 'Bar', content: <div>not implemented, TODO #316</div> };
+                return { title: 'Bar', content: <NumberSequencesOverTimeBarChart data={data} /> };
             case 'line':
                 return { title: 'Line', content: <div>not implemented, TODO #317</div> };
             case 'table':

components/src/query/queryNumberOfSequencesOverTime.ts

@@ -4,6 +4,7 @@ import { sortNullToBeginningThenByDate } from '../utils/sort';
 import { makeArray } from '../utils/utils';
 
 export type NumberOfSequencesDatasets = Awaited<ReturnType<typeof queryNumberOfSequencesOverTime>>;
+export type NumberOfSequencesDataset = NumberOfSequencesDatasets[number];
 
 export async function queryNumberOfSequencesOverTime(
     lapis: string,

components/src/web-components/visualization/gs-number-sequences-over-time.stories.ts

@@ -9,6 +9,7 @@ import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import oneVariantEG from '../../preact/numberSequencesOverTime/__mockData__/oneVariantEG.json';
 import twoVariantsEG from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsEG.json';
 import twoVariantsJN1 from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsJN1.json';
+import twoVariantsXBB from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsXBB.json';
 import type { NumberSequencesOverTimeProps } from '../../preact/numberSequencesOverTime/number-sequences-over-time';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
@@ -104,12 +105,23 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
     },
 };
 
+export const OneDatasetBarChart: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time');
+
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Bar' })).toBeVisible());
+
+        await fireEvent.click(canvas.getByRole('button', { name: 'Bar' }));
+    },
+};
+
 export const OneDatasetTable: StoryObj<NumberSequencesOverTimeProps> = {
     ...Template,
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time');
 
-        await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeVisible());
 
         await fireEvent.click(canvas.getByRole('button', { name: 'Table' }));
     },
@@ -121,8 +133,8 @@ export const TwoDatasets: StoryObj<NumberSequencesOverTimeProps> = {
         ...Template.args,
         lapisFilter: [
             {
-                displayName: 'EG until 2023-06',
-                lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateTo: '2023-06-30' },
+                displayName: 'EG',
+                lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-10-01' },
             },
             { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
         ],
@@ -137,7 +149,6 @@ export const TwoDatasets: StoryObj<NumberSequencesOverTimeProps> = {
                         body: {
                             country: 'USA',
                             pangoLineage: 'EG*',
-                            dateTo: '2023-06-30',
                             fields: ['date'],
                         },
                     },
@@ -166,3 +177,56 @@ export const TwoDatasets: StoryObj<NumberSequencesOverTimeProps> = {
         },
     },
 };
+
+export const TwoDatasetsWithNonOverlappingDates: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        lapisFilter: [
+            {
+                displayName: 'XBB',
+                lapisFilter: { country: 'USA', pangoLineage: 'XBB*', dateFrom: '2022-01-01', dateTo: '2022-12-31' },
+            },
+            { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
+        ],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedEG',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'XBB*',
+                            dateFrom: '2022-01-01',
+                            dateTo: '2022-12-31',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: twoVariantsXBB,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aggregatedJN.1',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2023-01-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: twoVariantsJN1,
+                    },
+                },
+            ],
+        },
+    },
+};

components/tests/visualizationStories.ts

@@ -30,6 +30,11 @@ export const visualizationStories = [
     },
     { id: 'visualization-mutation-comparison--venn-diagram', title: 'Mutation comparison' },
     { id: 'visualization-aggregate--table', title: 'Aggregate', testDownloadWithFilename: 'aggregate.csv' },
+    { id: 'visualization-number-sequences-over-time--one-dataset-bar-chart', title: 'Number of sequences of time' },
     { id: 'visualization-number-sequences-over-time--one-dataset-table', title: 'Number of sequences of time' },
     { id: 'visualization-number-sequences-over-time--two-datasets', title: 'Number of sequences of time' },
+    {
+        id: 'visualization-number-sequences-over-time--two-datasets-with-non-overlapping-dates',
+        title: 'Number of sequences of time',
+    },
 ];