@genspectrum/dashboard-components 0.4.3 → 0.4.4

package/dist/genspectrum-components.d.ts

@@ -57,6 +57,15 @@ export declare class AggregateComponent extends PreactLitAdapterWithGridJsStyles
      * The headline of the component. Set to an empty string to hide the headline.
      */
     headline: string;
+    /**
+     * The field by which the table is initially sorted.
+     * Must be one of the fields specified in the fields property, 'count', or 'proportion'.
+     */
+    initialSortField: string;
+    /**
+     * The initial sort direction of the table.
+     */
+    initialSortDirection: 'ascending' | 'descending';
     render(): JSX_2.Element;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.4.3",
+    "version": "0.4.4",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

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

@@ -13,6 +13,8 @@ const meta: Meta<AggregateProps> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        initialSortField: { control: 'text' },
+        initialSortDirection: { control: 'radio', options: ['ascending', 'descending'] },
     },
     parameters: {
         fetchMock: {
@@ -53,5 +55,7 @@ export const Default: StoryObj<AggregateProps> = {
         width: '100%',
         height: '700px',
         headline: 'Aggregate',
+        initialSortField: 'count',
+        initialSortDirection: 'descending',
     },
 };

package/src/preact/aggregatedData/aggregate.tsx

@@ -17,6 +17,7 @@ import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
 export type View = 'table';
+export type InitialSort = { field: string; direction: 'ascending' | 'descending' };
 
 export type AggregateProps = {
     width: string;
@@ -28,6 +29,8 @@ export interface AggregateInnerProps {
     filter: LapisFilter;
     fields: string[];
     views: View[];
+    initialSortField: string;
+    initialSortDirection: 'ascending' | 'descending';
 }
 
 export const Aggregate: FunctionComponent<AggregateProps> = ({
@@ -37,6 +40,8 @@ export const Aggregate: FunctionComponent<AggregateProps> = ({
     headline = 'Mutations',
     filter,
     fields,
+    initialSortField,
+    initialSortDirection,
 }) => {
     const size = { height, width };
 
@@ -44,18 +49,30 @@ export const Aggregate: FunctionComponent<AggregateProps> = ({
         <ErrorBoundary size={size} headline={headline}>
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
-                    <AggregateInner fields={fields} filter={filter} views={views} />
+                    <AggregateInner
+                        fields={fields}
+                        filter={filter}
+                        views={views}
+                        initialSortField={initialSortField}
+                        initialSortDirection={initialSortDirection}
+                    />
                 </Headline>
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const AggregateInner: FunctionComponent<AggregateInnerProps> = ({ fields, views, filter }) => {
+export const AggregateInner: FunctionComponent<AggregateInnerProps> = ({
+    fields,
+    views,
+    filter,
+    initialSortField,
+    initialSortDirection,
+}) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
-        return queryAggregateData(filter, fields, lapis);
+        return queryAggregateData(filter, fields, lapis, { field: initialSortField, direction: initialSortDirection });
     }, [filter, fields, lapis]);
 
     if (isLoading) {

package/src/query/queryAggregateData.spec.ts

@@ -4,7 +4,7 @@ import { queryAggregateData } from './queryAggregateData';
 import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../vitest.setup';
 
 describe('queryAggregateData', () => {
-    test('should fetch aggregate data', async () => {
+    test('should fetch aggregate data and sort initially by count descending when no initialSort is provided', async () => {
         const fields = ['division', 'host'];
         const filter = { country: 'USA' };
 
@@ -23,10 +23,124 @@ describe('queryAggregateData', () => {
         const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL);
 
         expect(result).to.deep.equal([
+            { proportion: 0.5, count: 16, region: 'region2', host: 'host2' },
+            { proportion: 0.25, count: 8, region: 'region2', host: 'host1' },
             { proportion: 0.125, count: 4, region: 'region1', host: 'host1' },
             { proportion: 0.125, count: 4, region: 'region1', host: 'host2' },
-            { proportion: 0.25, count: 8, region: 'region2', host: 'host1' },
-            { proportion: 0.5, count: 16, region: 'region2', host: 'host2' },
         ]);
     });
+
+    test('should sort by initialSort field ascending', async () => {
+        const fields = ['division', 'host'];
+        const filter = { country: 'USA' };
+        const initialSortField = 'host';
+        const initialSortDirection = 'ascending';
+
+        lapisRequestMocks.aggregated(
+            { fields, ...filter },
+            {
+                data: [
+                    { count: 4, region: 'region1', host: 'A_host' },
+                    { count: 4, region: 'region1', host: 'B_host' },
+                    { count: 8, region: 'region2', host: 'A_host1' },
+                    { count: 16, region: 'region2', host: 'C_host' },
+                ],
+            },
+        );
+
+        const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL, {
+            field: initialSortField,
+            direction: initialSortDirection,
+        });
+
+        expect(result).to.deep.equal([
+            { proportion: 0.125, count: 4, region: 'region1', host: 'A_host' },
+            { proportion: 0.25, count: 8, region: 'region2', host: 'A_host1' },
+            { proportion: 0.125, count: 4, region: 'region1', host: 'B_host' },
+            { proportion: 0.5, count: 16, region: 'region2', host: 'C_host' },
+        ]);
+    });
+
+    test('should sort by initialSort field descending', async () => {
+        const fields = ['division', 'host'];
+        const filter = { country: 'USA' };
+        const initialSortField = 'host';
+        const initialSortDirection = 'descending';
+
+        lapisRequestMocks.aggregated(
+            { fields, ...filter },
+            {
+                data: [
+                    { count: 4, region: 'region1', host: 'A_host' },
+                    { count: 4, region: 'region1', host: 'B_host' },
+                    { count: 8, region: 'region2', host: 'A_host1' },
+                    { count: 16, region: 'region2', host: 'C_host' },
+                ],
+            },
+        );
+
+        const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL, {
+            field: initialSortField,
+            direction: initialSortDirection,
+        });
+
+        expect(result).to.deep.equal([
+            { proportion: 0.5, count: 16, region: 'region2', host: 'C_host' },
+            { proportion: 0.125, count: 4, region: 'region1', host: 'B_host' },
+            { proportion: 0.25, count: 8, region: 'region2', host: 'A_host1' },
+            { proportion: 0.125, count: 4, region: 'region1', host: 'A_host' },
+        ]);
+    });
+
+    test('should sort by initialSort number field', async () => {
+        const fields = ['division', 'host'];
+        const filter = { country: 'USA' };
+        const initialSortField = 'proportion';
+        const initialSortDirection = 'descending';
+
+        lapisRequestMocks.aggregated(
+            { fields, ...filter },
+            {
+                data: [
+                    { count: 4, region: 'region1', host: 'A_host' },
+                    { count: 4, region: 'region1', host: 'B_host' },
+                    { count: 8, region: 'region2', host: 'A_host1' },
+                    { count: 16, region: 'region2', host: 'C_host' },
+                ],
+            },
+        );
+
+        const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL, {
+            field: initialSortField,
+            direction: initialSortDirection,
+        });
+
+        expect(result).to.deep.equal([
+            { proportion: 0.125, count: 4, region: 'region1', host: 'A_host' },
+            { proportion: 0.125, count: 4, region: 'region1', host: 'B_host' },
+            { proportion: 0.25, count: 8, region: 'region2', host: 'A_host1' },
+            { proportion: 0.5, count: 16, region: 'region2', host: 'C_host' },
+        ]);
+    });
+
+    test('should throw if initialSortField is not in fields', async () => {
+        const fields = ['division', 'host'];
+        const filter = { country: 'USA' };
+        const initialSortField = 'not_in_fields';
+        const initialSortDirection = 'descending';
+
+        lapisRequestMocks.aggregated(
+            { fields, ...filter },
+            {
+                data: [{ count: 4, region: 'region1', host: 'A_host' }],
+            },
+        );
+
+        await expect(
+            queryAggregateData(filter, fields, DUMMY_LAPIS_URL, {
+                field: initialSortField,
+                direction: initialSortDirection,
+            }),
+        ).rejects.toThrowError('InitialSort field not in fields. Valid fields are: count, proportion, division, host');
+    });
 });

package/src/query/queryAggregateData.ts

@@ -1,4 +1,6 @@
 import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
+import { SortOperator } from '../operator/SortOperator';
+import { type InitialSort } from '../preact/aggregatedData/aggregate';
 import { type LapisFilter } from '../types';
 
 export type AggregateData = (Record<string, string | null | number | boolean> & {
@@ -6,9 +8,36 @@ export type AggregateData = (Record<string, string | null | number | boolean> &
     proportion: number;
 })[];
 
-export async function queryAggregateData(variant: LapisFilter, fields: string[], lapis: string, signal?: AbortSignal) {
+const compareAscending = (a: string | null | number, b: string | null | number) => {
+    if (typeof a === 'number' && typeof b === 'number') {
+        return a - b;
+    }
+
+    const strA = a != null ? String(a) : '';
+    const strB = b != null ? String(b) : '';
+
+    return strA.localeCompare(strB);
+};
+
+export async function queryAggregateData(
+    variant: LapisFilter,
+    fields: string[],
+    lapis: string,
+    initialSort: InitialSort = { field: 'count', direction: 'descending' },
+    signal?: AbortSignal,
+) {
+    const validSortFields = ['count', 'proportion', ...fields];
+    if (!validSortFields.includes(initialSort.field)) {
+        throw new Error(`InitialSort field not in fields. Valid fields are: ${validSortFields.join(', ')}`);
+    }
+
     const fetchData = new FetchAggregatedOperator<Record<string, string | null | number>>(variant, fields);
-    const data = (await fetchData.evaluate(lapis, signal)).content;
+    const sortData = new SortOperator(fetchData, (a, b) => {
+        return initialSort.direction === 'ascending'
+            ? compareAscending(a[initialSort.field], b[initialSort.field])
+            : compareAscending(b[initialSort.field], a[initialSort.field]);
+    });
+    const data = (await sortData.evaluate(lapis, signal)).content;
 
     const total = data.reduce((acc, row) => acc + row.count, 0);
 

package/src/web-components/visualization/gs-aggregate.stories.ts

@@ -17,6 +17,8 @@ const codeExample = `
     headline="Aggregate"
     width='100%'
     height='700px'
+    initialSortField="count"
+    initialSortDirection="descending"
 ></gs-aggregate>`;
 
 const meta: Meta<Required<AggregateProps>> = {
@@ -31,6 +33,11 @@ const meta: Meta<Required<AggregateProps>> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        initialSortField: { control: 'text' },
+        initialSortDirection: {
+            options: ['ascending', 'descending'],
+            control: { type: 'radio' },
+        },
     },
     parameters: withComponentDocs({
         fetchMock: {
@@ -72,6 +79,8 @@ export const Table: StoryObj<Required<AggregateProps>> = {
                 .width=${args.width}
                 .height=${args.height}
                 .headline=${args.headline}
+                .initialSortField=${args.initialSortField}
+                .initialSortDirection=${args.initialSortDirection}
             ></gs-aggregate>
         </gs-app>
     `,
@@ -84,5 +93,7 @@ export const Table: StoryObj<Required<AggregateProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Aggregate',
+        initialSortField: 'count',
+        initialSortDirection: 'descending',
     },
 };

package/src/web-components/visualization/gs-aggregate.tsx

@@ -67,6 +67,19 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: String })
     headline: string = 'Aggregate';
 
+    /**
+     * The field by which the table is initially sorted.
+     * Must be one of the fields specified in the fields property, 'count', or 'proportion'.
+     */
+    @property({ type: String })
+    initialSortField: string = 'count';
+
+    /**
+     * The initial sort direction of the table.
+     */
+    @property({ type: String })
+    initialSortDirection: 'ascending' | 'descending' = 'descending';
+
     override render() {
         return (
             <Aggregate
@@ -76,6 +89,8 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
+                initialSortField={this.initialSortField}
+                initialSortDirection={this.initialSortDirection}
             />
         );
     }