@genspectrum/dashboard-components 0.1.1 → 0.1.3

package/src/preact/aggregatedData/aggregate.tsx

@@ -0,0 +1,98 @@
+import { type FunctionComponent } from 'preact';
+import { useContext } from 'preact/hooks';
+
+import { AggregateTable } from './aggregate-table';
+import { type AggregateData, queryAggregateData } from '../../query/queryAggregateData';
+import { type LapisFilter } from '../../types';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { CsvDownloadButton } from '../components/csv-download-button';
+import { ErrorDisplay } from '../components/error-display';
+import Headline from '../components/headline';
+import Info from '../components/info';
+import { LoadingDisplay } from '../components/loading-display';
+import { NoDataDisplay } from '../components/no-data-display';
+import Tabs from '../components/tabs';
+import { useQuery } from '../useQuery';
+
+export type View = 'table';
+
+export interface AggregateProps {
+    filter: LapisFilter;
+    fields: string[];
+    views: View[];
+}
+
+export const Aggregate: FunctionComponent<AggregateProps> = ({ fields, views, filter }) => {
+    const lapis = useContext(LapisUrlContext);
+
+    const { data, error, isLoading } = useQuery(async () => {
+        return queryAggregateData(filter, fields, lapis);
+    }, [filter, fields, lapis]);
+
+    const headline = 'Aggregate';
+
+    if (isLoading) {
+        return (
+            <Headline heading={headline}>
+                <LoadingDisplay />
+            </Headline>
+        );
+    }
+
+    if (error !== null) {
+        return (
+            <Headline heading={headline}>
+                <ErrorDisplay error={error} />
+            </Headline>
+        );
+    }
+
+    if (data === null) {
+        return (
+            <Headline heading={headline}>
+                <NoDataDisplay />
+            </Headline>
+        );
+    }
+
+    return (
+        <Headline heading={headline}>
+            <AggregatedDataTabs data={data} views={views} fields={fields} />
+        </Headline>
+    );
+};
+
+type AggregatedDataTabsProps = {
+    data: AggregateData;
+    fields: string[];
+    views: View[];
+};
+
+const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, views, fields }) => {
+    const getTab = (view: View) => {
+        switch (view) {
+            case 'table':
+                return {
+                    title: 'Table',
+                    content: <AggregateTable data={data} fields={fields} />,
+                };
+        }
+    };
+
+    const tabs = views.map((view) => getTab(view));
+
+    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} />} />;
+};
+
+type ToolbarProps = {
+    data: AggregateData;
+};
+
+const Toolbar: FunctionComponent<ToolbarProps> = ({ data }) => {
+    return (
+        <div class='flex flex-row'>
+            <CsvDownloadButton className='mx-1 btn btn-xs' getData={() => data} filename='aggregate.csv' />
+            <Info className='mx-1' content='Info for aggregate' />
+        </div>
+    );
+};

package/src/query/queryAggregateData.spec.ts

@@ -0,0 +1,32 @@
+import { describe, expect, test } from 'vitest';
+
+import { queryAggregateData } from './queryAggregateData';
+import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../vitest.setup';
+
+describe('queryAggregateData', () => {
+    test('should fetch aggregate data', async () => {
+        const fields = ['division', 'host'];
+        const filter = { country: 'USA' };
+
+        lapisRequestMocks.aggregated(
+            { fields, ...filter },
+            {
+                data: [
+                    { count: 4, region: 'region1', host: 'host1' },
+                    { count: 4, region: 'region1', host: 'host2' },
+                    { count: 8, region: 'region2', host: 'host1' },
+                    { count: 16, region: 'region2', host: 'host2' },
+                ],
+            },
+        );
+
+        const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL);
+
+        expect(result).to.deep.equal([
+            { 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' },
+        ]);
+    });
+});

package/src/query/queryAggregateData.ts

@@ -0,0 +1,25 @@
+import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
+import { type LapisFilter } from '../types';
+
+export type AggregateData = (Record<string, string | null | number | boolean> & {
+    count: number;
+    proportion: number;
+})[];
+
+export async function queryAggregateData(variant: LapisFilter, fields: string[], lapis: string, signal?: AbortSignal) {
+    const fetchData = new FetchAggregatedOperator<Record<string, string | null | number>>(variant, fields);
+    const data = (await fetchData.evaluate(lapis, signal)).content;
+
+    const total = data.reduce((acc, row) => acc + row.count, 0);
+
+    return data.map(
+        (row) =>
+            ({
+                ...row,
+                proportion: row.count / total,
+            }) as Record<string, string | null | number | boolean> & {
+                count: number;
+                proportion: number;
+            },
+    );
+}

package/src/web-components/display/aggregate-component.mdx

@@ -0,0 +1,25 @@
+import { ArgTypes, Description, Meta, Story, Title, Source } from '@storybook/blocks';
+
+import * as AggregateComponentStories from './aggregate-component.stories.ts';
+
+<Meta of={AggregateComponentStories} name='Docs' />
+
+<Title of={AggregateComponentStories} />
+
+<Description of={AggregateComponentStories} />
+
+## Specification
+
+<ArgTypes of={AggregateComponentStories} />
+
+## Example
+
+<Source
+    code={`<gs-aggregate-component fields="['division', 'host']" filter='{"country": "USA"}'></gs-aggregate-component>`}
+/>
+
+### Live Example
+
+[See here](?path=/story/visualization-aggregate--template)
+
+<Story of={AggregateComponentStories.Table} />

package/src/web-components/display/aggregate-component.stories.ts

@@ -0,0 +1,63 @@
+import { type Meta, type StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import aggregatedData from '../../preact/aggregatedData/__mockData__/aggregated.json';
+import type { AggregateProps } from '../../preact/aggregatedData/aggregate';
+import './aggregate-component';
+import '../app';
+
+const meta: Meta<AggregateProps> = {
+    title: 'Visualization/Aggregate',
+    component: 'gs-aggregate-component',
+    argTypes: {
+        fields: [{ control: 'object' }],
+        views: {
+            options: ['table'],
+            control: { type: 'check' },
+        },
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['division', 'host'],
+                            country: 'USA',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedData,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export default meta;
+
+export const Table: StoryObj<AggregateProps> = {
+    render: (args) => html`
+        <div class="w-11/12 h-11/12">
+            <gs-app lapis="${LAPIS_URL}">
+                <gs-aggregate-component
+                    .fields=${args.fields}
+                    .filter=${args.filter}
+                    .views=${args.views}
+                ></gs-aggregate-component>
+            </gs-app>
+        </div>
+    `,
+    args: {
+        fields: ['division', 'host'],
+        views: ['table'],
+        filter: {
+            country: 'USA',
+        },
+    },
+};

package/src/web-components/display/aggregate-component.tsx

@@ -0,0 +1,51 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import { Aggregate, type View } from '../../preact/aggregatedData/aggregate';
+import { type LapisFilter } from '../../types';
+import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+
+/**
+ * ## Tag
+ *
+ * `gs-aggregate-component`
+ *
+ * ## Context
+ *
+ * This component displays aggregated data, which can provide an overview of the underlying data.
+ *
+ * It expects a list of fields to aggregate by and a filter to apply to the data.
+ */
+@customElement('gs-aggregate-component')
+export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
+    /**
+     * The fields to aggregate by.
+     */
+    @property({ type: Array })
+    fields: string[] = [];
+
+    /**
+     * The views are used to display the aggregated data.
+     * In the table view, the data is presented in a table format where each field is a column,
+     * along with the aggregated value and its proportion.
+     * The proportion represents the ratio of the aggregated value to the total count of the data
+     * (considering the applied filter).
+     */
+    @property({ type: Array })
+    views: View[] = ['table'];
+
+    /**
+     * The filter to apply to the data.
+     */
+    @property({ type: Object })
+    filter: LapisFilter = {};
+
+    override render() {
+        return <Aggregate fields={this.fields} views={this.views} filter={this.filter} />;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-aggregate-component': AggregateComponent;
+    }
+}

package/src/web-components/display/index.ts

@@ -2,3 +2,4 @@ export { MutationComparisonComponent } from './mutation-comparison-component';
 export { MutationsComponent } from './mutations-component';
 export { PrevalenceOverTimeComponent } from './prevalence-over-time-component';
 export { RelativeGrowthAdvantageComponent } from './relative-growth-advantage-component';
+export { AggregateComponent } from './aggregate-component';

package/src/web-components/input/location-filter-component.stories.ts

@@ -97,7 +97,7 @@ export const FetchingLocationsFails: StoryObj<LocationFilterProps> = {
                 {
                     matcher: aggregatedEndpointMatcher,
                     response: {
-                        status: 500,
+                        status: 400,
                         body: { error: 'no data' },
                     },
                 },
@@ -108,9 +108,7 @@ export const FetchingLocationsFails: StoryObj<LocationFilterProps> = {
         const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');
 
         await waitFor(() =>
-            expect(
-                canvas.getByText('Internal Server Error: {"error":"no data"} ', { exact: false }),
-            ).toBeInTheDocument(),
+            expect(canvas.getByText('Bad Request: {"error":"no data"} ', { exact: false })).toBeInTheDocument(),
         );
     },
 };