@genspectrum/dashboard-components 0.4.2 → 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/dist/style.css

@@ -376,7 +376,7 @@ input[type="range"] {
     background-color: #C6C6C6;
     pointer-events: none;
 }/*
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -835,6 +835,10 @@ html {
   -webkit-tap-highlight-color: transparent;
 }
 
+* {
+  scrollbar-color: currentColor transparent;
+}
+
 :root {
   color-scheme: light;
   --in: 72.06% 0.191 231.6;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.4.2",
+    "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/preact/dateRangeSelector/date-range-selector.tsx

@@ -11,7 +11,6 @@ import {
     type PresetOptionValues,
 } from './selectableOptions';
 import { ErrorBoundary } from '../components/error-boundary';
-import { ResizeContainer } from '../components/resize-container';
 import { Select } from '../components/select';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
 
@@ -41,7 +40,7 @@ export const DateRangeSelector = <CustomLabel extends string>({
 
     return (
         <ErrorBoundary size={size}>
-            <ResizeContainer size={size}>
+            <div style={{ width }}>
                 <DateRangeSelectorInner
                     customSelectOptions={customSelectOptions}
                     earliestDate={earliestDate}
@@ -50,7 +49,7 @@ export const DateRangeSelector = <CustomLabel extends string>({
                     initialDateFrom={initialDateFrom}
                     initialDateTo={initialDateTo}
                 />
-            </ResizeContainer>
+            </div>
         </ErrorBoundary>
     );
 };

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}
             />
         );
     }