@genspectrum/dashboard-components 0.10.0 → 0.10.1

package/dist/style.css

@@ -1561,6 +1561,38 @@ html {
 .select[multiple] {
   height: auto;
 }
+.stat {
+  display: inline-grid;
+  width: 100%;
+  grid-template-columns: repeat(1, 1fr);
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  --tw-border-opacity: 0.1;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.stat-title {
+  grid-column-start: 1;
+  white-space: nowrap;
+  color: var(--fallback-bc,oklch(var(--bc)/0.6));
+}
+.stat-value {
+  grid-column-start: 1;
+  white-space: nowrap;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  font-weight: 800;
+}
+.stat-desc {
+  grid-column-start: 1;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--fallback-bc,oklch(var(--bc)/0.6));
+}
 .steps {
   display: inline-grid;
   grid-auto-flow: column;
@@ -3427,6 +3459,15 @@ input.tab:checked + .tab-content,
   .sm\:max-w-5xl {
     max-width: 64rem;
   }
+
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
 }.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
       /*rtl:begin:ignore*/left:0/*
       /*rtl:end:ignore*/}/*

package/dist/util.d.ts

@@ -196,6 +196,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-statistics': StatisticsComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-date-range-selector': DateRangeSelectorComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.10.0",
+    "version": "0.10.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -132,7 +132,7 @@
         "storybook": "^8.0.9",
         "storybook-addon-fetch-mock": "^2.0.0",
         "tailwindcss": "^3.4.3",
-        "typescript": "~5.6.2",
+        "typescript": "~5.7.2",
         "vite": "^5.2.10",
         "vite-plugin-dts": "^4.0.3",
         "vitest": "^2.0.1"

package/src/preact/components/min-max-range-slider.tsx

@@ -75,8 +75,8 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
                 type='range'
                 value={min}
                 onInput={onMinChange}
-                min={rangeMin}
-                max={rangeMax}
+                min={`${rangeMin}`}
+                max={`${rangeMax}`}
                 step={step}
                 style={{ background, zIndex: 1, height: 0 }}
             />
@@ -84,8 +84,8 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
                 id='toSlider'
                 type='range'
                 value={max}
-                min={rangeMin}
-                max={rangeMax}
+                min={`${rangeMin}`}
+                max={`${rangeMax}`}
                 step={step}
                 onInput={onMaxChange}
                 style={{ background, zIndex: zIndexTo }}

package/src/preact/components/percent-intput.tsx

@@ -44,8 +44,8 @@ export const PercentInput: FunctionComponent<PercentInputProps> = ({
             <input
                 type='number'
                 step={0.1}
-                min={0}
-                max={100}
+                min='0'
+                max='100'
                 value={internalPercentage}
                 onInput={handleInputChange}
                 lang='en'

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -303,7 +303,6 @@ const SelectedFilter = ({ handleRemoveValue, mutationFilter }: SelectedFilterPro
     return (
         <span
             key={mutationFilter.value.toString()}
-            name={mutationFilter.value.toString()}
             className='center p-2 m-1 inline-flex text-black rounded-md'
             style={{
                 backgroundColor: backgroundColorMap(mutationFilter),

package/src/preact/statistic/__mockData__/denominator.json

@@ -0,0 +1,13 @@
+{
+    "data": [
+        {
+            "count": 2468
+        }
+    ],
+    "info": {
+        "dataVersion": "1712315293",
+        "requestId": "4603a85e-ae5e-495d-aee5-778a3af862c1",
+        "requestInfo": "sars_cov-2_nextstrain_open on s1.int.genspectrum.org at 2024-04-24T15:31:40.596677441",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report."
+    }
+}

package/src/preact/statistic/__mockData__/numerator.json

@@ -0,0 +1,13 @@
+{
+    "data": [
+        {
+            "count": 1234
+        }
+    ],
+    "info": {
+        "dataVersion": "1712315293",
+        "requestId": "4603a85e-ae5e-495d-aee5-778a3af862c1",
+        "requestInfo": "sars_cov-2_nextstrain_open on s1.int.genspectrum.org at 2024-04-24T15:31:40.596677441",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report."
+    }
+}

package/src/preact/statistic/statistics.stories.tsx

@@ -0,0 +1,81 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
+
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { LapisUrlContext } from '../LapisUrlContext';
+import denominatorData from './__mockData__/denominator.json';
+import numeratorData from './__mockData__/numerator.json';
+import { Statistics, type StatisticsProps } from './statistics';
+
+const meta: Meta<StatisticsProps> = {
+    title: 'Visualization/Statistics',
+    component: Statistics,
+    argTypes: {
+        width: { control: 'text' },
+        height: { control: 'text' },
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'denominatorData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: [],
+                            country: 'USA',
+                            division: 'Alabama',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: denominatorData,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'numeratorData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: [],
+                            country: 'USA',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numeratorData,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<StatisticsProps> = {
+    render: (args) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <Statistics {...args} />
+        </LapisUrlContext.Provider>
+    ),
+    args: {
+        numeratorFilter: {
+            country: 'USA',
+        },
+        denominatorFilter: {
+            country: 'USA',
+            division: 'Alabama',
+        },
+        width: '100%',
+        height: '100%',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(async () => {
+            await expect(canvas.getByText('1,234')).toBeInTheDocument();
+            await expect(canvas.getByText('50.00%')).toBeInTheDocument();
+        });
+    },
+};

package/src/preact/statistic/statistics.tsx

@@ -0,0 +1,78 @@
+import { type FunctionComponent } from 'preact';
+import { useContext } from 'preact/hooks';
+
+import { queryGeneralStatistics } from '../../query/queryGeneralStatistics';
+import { type LapisFilter } from '../../types';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ErrorBoundary } from '../components/error-boundary';
+import { LoadingDisplay } from '../components/loading-display';
+import { NoDataDisplay } from '../components/no-data-display';
+import { ResizeContainer } from '../components/resize-container';
+import { formatProportion } from '../shared/table/formatProportion';
+import { useQuery } from '../useQuery';
+
+export type StatisticsProps = {
+    width: string;
+    height: string;
+    numeratorFilter: LapisFilter;
+    denominatorFilter: LapisFilter;
+};
+
+export const Statistics: FunctionComponent<StatisticsProps> = (componentProps) => {
+    const { width, height } = componentProps;
+    const size = { height, width };
+
+    return (
+        <ErrorBoundary size={size}>
+            <ResizeContainer size={size}>
+                <StatisticsInner {...componentProps} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const StatisticsInner: FunctionComponent<StatisticsProps> = (componentProps) => {
+    const { numeratorFilter, denominatorFilter } = componentProps;
+    const lapis = useContext(LapisUrlContext);
+
+    const { data, error, isLoading } = useQuery(async () => {
+        return queryGeneralStatistics(numeratorFilter, denominatorFilter, lapis);
+    }, [numeratorFilter, denominatorFilter, lapis]);
+
+    if (isLoading) {
+        return <LoadingDisplay />;
+    }
+
+    if (error !== null) {
+        throw error;
+    }
+
+    if (data === null) {
+        return <NoDataDisplay />;
+    }
+
+    return <MetricDataTabs data={data} />;
+};
+
+type MetricDataTabsProps = {
+    data: { count: number; proportion: number };
+};
+
+const MetricDataTabs: FunctionComponent<MetricDataTabsProps> = ({ data }) => {
+    const { count, proportion } = data;
+    return (
+        <div className='flex flex-col sm:flex-row rounded-md border-2 border-gray-100'>
+            <div className='stat'>
+                <div className='stat-title'>Sequences</div>
+                <div className='stat-value text-2xl sm:text-4xl'>{count.toLocaleString('en-us')}</div>
+                <div className='stat-desc'>The total number of sequenced samples</div>
+            </div>
+
+            <div className='stat'>
+                <div className='stat-title'>Overall proportion</div>
+                <div className='stat-value text-2xl sm:text-4xl'>{formatProportion(proportion)}</div>
+                <div className='stat-desc'>The proportion among all sequenced samples</div>
+            </div>
+        </div>
+    );
+};

package/src/query/queryGeneralStatistics.ts

@@ -0,0 +1,18 @@
+import { type LapisFilter } from '../types';
+import { queryAggregateData } from './queryAggregateData';
+
+export async function queryGeneralStatistics(
+    numeratorFilter: LapisFilter,
+    denominatorFilter: LapisFilter,
+    lapis: string,
+    signal?: AbortSignal,
+) {
+    const numeratorCount = await queryAggregateData(numeratorFilter, [], lapis, undefined, signal);
+    const denominatorCount = await queryAggregateData(denominatorFilter, [], lapis, undefined, signal);
+
+    if (numeratorCount.length === 0 || denominatorCount.length === 0) {
+        throw new Error('No data found for the given filters');
+    }
+
+    return { proportion: numeratorCount[0].count / denominatorCount[0].count, count: numeratorCount[0].count };
+}

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

@@ -0,0 +1,95 @@
+import { type Meta, type StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import denominatorData from '../../preact/statistic/__mockData__/denominator.json';
+import numeratorData from '../../preact/statistic/__mockData__/numerator.json';
+import { type StatisticsProps } from '../../preact/statistic/statistics';
+
+import './gs-statistics';
+import '../app';
+
+const codeExample = `
+<gs-statistics
+    numeratorFilter='{"country": "USA", "division": "Alabama}'
+    denominatorFilter='{"country": "USA"}' 
+    width='100%'
+    height='700px'
+></gs-statistics>`;
+
+const meta: Meta<Required<StatisticsProps>> = {
+    title: 'Visualization/Statistics',
+    component: 'gs-statistics',
+    argTypes: {
+        width: { control: 'text' },
+        height: { control: 'text' },
+    },
+    parameters: withComponentDocs({
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'denominatorData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: [],
+                            country: 'USA',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: denominatorData,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'numeratorData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: [],
+                            country: 'USA',
+                            division: 'Alabama',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numeratorData,
+                    },
+                },
+            ],
+        },
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<Required<StatisticsProps>> = {
+    render: (args) => html`
+        <gs-app lapis="${LAPIS_URL}">
+            <gs-statistics
+                .numeratorFilter=${args.numeratorFilter}
+                .denominatorFilter=${args.denominatorFilter}
+                .width=${args.width}
+                .height=${args.height}
+            ></gs-statistics>
+        </gs-app>
+    `,
+    args: {
+        denominatorFilter: {
+            country: 'USA',
+        },
+        numeratorFilter: {
+            country: 'USA',
+            division: 'Alabama',
+        },
+        width: '100%',
+        height: '700px',
+    },
+};

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

@@ -0,0 +1,83 @@
+import { customElement, property } from 'lit/decorators.js';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+import { Statistics, type StatisticsProps } from '../../preact/statistic/statistics';
+import type { LapisFilter } from '../../types';
+import type { Equals, Expect } from '../../utils/typeAssertions';
+import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+
+/**
+ * ## Context
+ *
+ * This component displays general statistics (number of sequences, overall proportion)
+ * for a given numerator and denominator filter.
+ */
+@customElement('gs-statistics')
+export class StatisticsComponent extends PreactLitAdapterWithGridJsStyles {
+    /**
+     * The filter to apply to the data for the overall number of sequences and as the numerator for the proportion.
+     * It must be a valid LAPIS filter object.
+     */
+    @property({ type: Object })
+    numeratorFilter: LapisFilter = {};
+
+    /**
+     * The filter to apply to the data for the denominator of the proportion.
+     * It must be a valid LAPIS filter object.
+     */
+    @property({ type: Object })
+    denominatorFilter: LapisFilter = {};
+
+    /**
+     * The width of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    /**
+     * The height of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    height: string = '100%';
+
+    override render() {
+        return (
+            <Statistics
+                numeratorFilter={this.numeratorFilter}
+                denominatorFilter={this.denominatorFilter}
+                width={this.width}
+                height={this.height}
+            />
+        );
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-statistics': StatisticsComponent;
+    }
+}
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+type WidthMatches = Expect<Equals<typeof StatisticsComponent.prototype.width, StatisticsProps['width']>>;
+type HeightMatches = Expect<Equals<typeof StatisticsComponent.prototype.height, StatisticsProps['height']>>;
+type DenominatorFilterMatches = Expect<
+    Equals<typeof StatisticsComponent.prototype.denominatorFilter, StatisticsProps['denominatorFilter']>
+>;
+type NumeratorFilterMatches = Expect<
+    Equals<typeof StatisticsComponent.prototype.numeratorFilter, StatisticsProps['numeratorFilter']>
+>;
+/* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

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

@@ -5,3 +5,4 @@ export { RelativeGrowthAdvantageComponent } from './gs-relative-growth-advantage
 export { AggregateComponent } from './gs-aggregate';
 export { NumberSequencesOverTimeComponent } from './gs-number-sequences-over-time';
 export { MutationsOverTimeComponent } from './gs-mutations-over-time';
+export { StatisticsComponent } from './gs-statistics';