@genspectrum/dashboard-components 0.11.5 → 0.11.7

package/src/preact/aggregatedData/aggregate-bar-chart.tsx

@@ -0,0 +1,177 @@
+import { BarController, Chart, type ChartConfiguration, type ChartDataset, registerables } from 'chart.js';
+import { type FunctionComponent } from 'preact';
+import { useMemo } from 'preact/hooks';
+
+import type { AggregateData } from '../../query/queryAggregateData';
+import GsChart from '../components/chart';
+import { UserFacingError } from '../components/error-display';
+import { NoDataDisplay } from '../components/no-data-display';
+import { singleGraphColorRGBAById } from '../shared/charts/colors';
+import { formatProportion } from '../shared/table/formatProportion';
+
+interface AggregateBarChartProps {
+    data: AggregateData;
+    fields: string[];
+    maxNumberOfBars: number;
+}
+
+Chart.register(...registerables, BarController);
+
+type DataPoint = {
+    y: string;
+    x: number;
+    proportion: number;
+};
+
+export const AggregateBarChart: FunctionComponent<AggregateBarChartProps> = ({ data, fields, maxNumberOfBars }) => {
+    if (data.length === 0) {
+        return <NoDataDisplay />;
+    }
+
+    if (fields.length === 0) {
+        throw new UserFacingError(
+            'No fields given',
+            'Cannot display a bar chart when the "fields" attribute of this component is empty, i.e. there are no fields given that the data should be stratified by. This must be fixed by the administrator of this page.',
+        );
+    }
+
+    if (fields.length > 2) {
+        throw new UserFacingError(
+            'Too many fields given',
+            `Cannot display a bar chart when the "fields" attribute of this component contains more than two values. Got the fields: ${fields.join(', ')}. This must be fixed by the administrator of this page.`,
+        );
+    }
+
+    return <AggregateBarChartInner data={data} fields={fields} maxNumberOfBars={maxNumberOfBars} />;
+};
+
+const AggregateBarChartInner: FunctionComponent<AggregateBarChartProps> = ({ data, fields, maxNumberOfBars }) => {
+    const config = useMemo((): ChartConfiguration<'bar', DataPoint[]> => {
+        const { datasets, countsOfEachBar } = getDatasets(fields, maxNumberOfBars, data);
+
+        return {
+            type: 'bar',
+            data: {
+                datasets,
+            },
+            options: {
+                maintainAspectRatio: false,
+                animation: false,
+                indexAxis: 'y',
+                scales: {
+                    x: {
+                        stacked: true,
+                    },
+                    y: {
+                        stacked: true,
+                    },
+                },
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: {
+                        mode: 'y',
+                        callbacks: {
+                            afterTitle:
+                                countsOfEachBar === undefined
+                                    ? undefined
+                                    : (tooltipItems) => {
+                                          return `Total: ${countsOfEachBar.get(tooltipItems[0].label)}`;
+                                      },
+                            label: (context) => {
+                                const { x, proportion } = context.dataset.data[
+                                    context.dataIndex
+                                ] as unknown as DataPoint;
+                                return fields.length === 1
+                                    ? `${x} (${formatProportion(proportion)})`
+                                    : `${context.dataset.label}: ${x} (${formatProportion(proportion)})`;
+                            },
+                        },
+                    },
+                },
+            },
+        };
+    }, [data, fields, maxNumberOfBars]);
+
+    return <GsChart configuration={config} />;
+};
+
+function getDatasets(
+    fields: string[],
+    maxNumberOfBars: number,
+    data: (Record<string, string | number | boolean | null> & {
+        count: number;
+        proportion: number;
+    })[],
+) {
+    const sortedData = data.sort((a, b) => b.count - a.count);
+
+    if (fields.length === 1) {
+        return {
+            datasets: [
+                {
+                    borderWidth: 1,
+                    backgroundColor: singleGraphColorRGBAById(0, 0.3),
+                    borderColor: singleGraphColorRGBAById(0),
+                    data: sortedData.slice(0, maxNumberOfBars).map((row) => ({
+                        y: row[fields[0]] as string,
+                        x: row.count,
+                        proportion: row.proportion,
+                    })),
+                },
+            ],
+        };
+    }
+
+    const map = new Map<string, DataPoint[]>();
+    const countsOfEachBar = new Map<string, number>();
+
+    for (const row of sortedData) {
+        const yValue = row[fields[0]];
+        const secondaryValue = row[fields[1]];
+        if (yValue === null || secondaryValue === null) {
+            continue;
+        }
+        const yAxisKey = String(yValue);
+        const secondaryKey = String(secondaryValue);
+
+        if (!map.has(secondaryKey)) {
+            map.set(secondaryKey, []);
+        }
+        map.get(secondaryKey)?.push({
+            y: yAxisKey,
+            x: row.count,
+            proportion: row.proportion,
+        });
+        countsOfEachBar.set(yAxisKey, (countsOfEachBar.get(yAxisKey) ?? 0) + row.count);
+    }
+
+    const datasets: ChartDataset<'bar', DataPoint[]>[] = Array.from(map.entries())
+        .map(sortAndTruncateYAxisKeys(countsOfEachBar, maxNumberOfBars))
+        .map(([key, value], index) => ({
+            borderWidth: 1,
+            backgroundColor: singleGraphColorRGBAById(index, 0.3),
+            borderColor: singleGraphColorRGBAById(index),
+            label: key,
+            data: value,
+        }));
+    return { datasets, countsOfEachBar };
+}
+
+function sortAndTruncateYAxisKeys(countsOfEachBar: Map<string, number>, maxNumberOfBars: number) {
+    const yAxisKeysToConsider = new Set(
+        Array.from(countsOfEachBar.entries())
+            .sort((a, b) => b[1] - a[1])
+            .slice(0, maxNumberOfBars)
+            .map(([key]) => key),
+    );
+
+    return ([key, value]: [string, DataPoint[]]): [string, DataPoint[]] => {
+        const sortedValues = value.sort((a, b) => (countsOfEachBar.get(b.y) ?? 0) - (countsOfEachBar.get(a.y) ?? 0));
+        const valuesWithLargestBars = sortedValues
+            .slice(0, maxNumberOfBars)
+            .filter((v) => yAxisKeysToConsider.has(v.y));
+        return [key, valuesWithLargestBars];
+    };
+}

package/src/preact/aggregatedData/aggregate-table.tsx

@@ -1,4 +1,5 @@
 import { type FunctionComponent } from 'preact';
+import { useMemo } from 'preact/hooks';
 
 import { type AggregateData, compareAscending } from '../../query/queryAggregateData';
 import { Table } from '../components/table';
@@ -8,9 +9,17 @@ type AggregateTableProps = {
     fields: string[];
     data: AggregateData;
     pageSize: boolean | number;
+    initialSortField: string;
+    initialSortDirection: 'ascending' | 'descending';
 };
 
-export const AggregateTable: FunctionComponent<AggregateTableProps> = ({ data, fields, pageSize }) => {
+export const AggregateTable: FunctionComponent<AggregateTableProps> = ({
+    data,
+    fields,
+    pageSize,
+    initialSortField,
+    initialSortDirection,
+}) => {
     const headers = [
         ...fields.map((field) => {
             return {
@@ -31,5 +40,18 @@ export const AggregateTable: FunctionComponent<AggregateTableProps> = ({ data, f
         },
     ];
 
-    return <Table data={data} columns={headers} pageSize={pageSize} />;
+    const sortedData = useMemo(() => {
+        const validSortFields = ['count', 'proportion', ...fields];
+        if (!validSortFields.includes(initialSortField)) {
+            throw new Error(`InitialSort field not in fields. Valid fields are: ${validSortFields.join(', ')}`);
+        }
+
+        return data.sort((a, b) =>
+            initialSortDirection === 'ascending'
+                ? compareAscending(a[initialSortField], b[initialSortField])
+                : compareAscending(b[initialSortField], a[initialSortField]),
+        );
+    }, [data, initialSortField, initialSortDirection, fields]);
+
+    return <Table data={sortedData} columns={headers} pageSize={pageSize} />;
 };

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -5,7 +5,7 @@ import aggregatedData from './__mockData__/aggregated.json';
 import { Aggregate, type AggregateProps } from './aggregate';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
+import { expectInvalidAttributesErrorMessage, playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<AggregateProps> = {
     title: 'Visualization/Aggregate',
@@ -50,7 +50,7 @@ export const Default: StoryObj<AggregateProps> = {
     ),
     args: {
         fields: ['division', 'host'],
-        views: ['table'],
+        views: ['table', 'bar'],
         lapisFilter: {
             country: 'USA',
         },
@@ -59,6 +59,7 @@ export const Default: StoryObj<AggregateProps> = {
         initialSortField: 'count',
         initialSortDirection: 'descending',
         pageSize: 10,
+        maxNumberOfBars: 20,
     },
 };
 
@@ -108,3 +109,61 @@ export const WithEmptyFieldString: StoryObj<AggregateProps> = {
         });
     },
 };
+
+export const BarChartWithNoFields: StoryObj<AggregateProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        views: ['bar', 'table'],
+        fields: [],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedData',
+                        url: AGGREGATED_ENDPOINT,
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedData,
+                    },
+                },
+            ],
+        },
+    },
+    play: playThatExpectsErrorMessage(
+        'Error - No fields given',
+        `Cannot display a bar chart when the "fields" attribute of this component is empty`,
+    ),
+};
+
+export const BarChartWithMoreThan2Fields: StoryObj<AggregateProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        views: ['bar', 'table'],
+        fields: ['division', 'host', 'country'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedData',
+                        url: AGGREGATED_ENDPOINT,
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedData,
+                    },
+                },
+            ],
+        },
+    },
+    play: playThatExpectsErrorMessage(
+        'Error - Too many fields given',
+        'Cannot display a bar chart when the "fields" attribute of this component contains more than two values.',
+    ),
+};

package/src/preact/aggregatedData/aggregate.tsx

@@ -15,8 +15,9 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
+import { AggregateBarChart } from './aggregate-bar-chart';
 
-const aggregateViewSchema = z.literal(views.table);
+const aggregateViewSchema = z.union([z.literal(views.table), z.literal(views.bar)]);
 export type AggregateView = z.infer<typeof aggregateViewSchema>;
 
 const aggregatePropsSchema = z.object({
@@ -28,6 +29,7 @@ const aggregatePropsSchema = z.object({
     pageSize: z.union([z.boolean(), z.number()]),
     width: z.string(),
     height: z.string(),
+    maxNumberOfBars: z.number(),
 });
 export type AggregateProps = z.infer<typeof aggregatePropsSchema>;
 
@@ -49,10 +51,7 @@ export const AggregateInner: FunctionComponent<AggregateProps> = (componentProps
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
-        return queryAggregateData(lapisFilter, fields, lapis, {
-            field: initialSortField,
-            direction: initialSortDirection,
-        });
+        return queryAggregateData(lapisFilter, fields, lapis);
     }, [lapisFilter, fields, lapis, initialSortField, initialSortDirection]);
 
     if (isLoading) {
@@ -78,7 +77,7 @@ type AggregatedDataTabsProps = {
 const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, originalComponentProps }) => {
     const getTab = (view: AggregateView) => {
         switch (view) {
-            case 'table':
+            case views.table:
                 return {
                     title: 'Table',
                     content: (
@@ -86,6 +85,19 @@ const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data,
                             data={data}
                             fields={originalComponentProps.fields}
                             pageSize={originalComponentProps.pageSize}
+                            initialSortField={originalComponentProps.initialSortField}
+                            initialSortDirection={originalComponentProps.initialSortDirection}
+                        />
+                    ),
+                };
+            case views.bar:
+                return {
+                    title: 'Bar',
+                    content: (
+                        <AggregateBarChart
+                            data={data}
+                            fields={originalComponentProps.fields}
+                            maxNumberOfBars={originalComponentProps.maxNumberOfBars}
                         />
                     ),
                 };