@genspectrum/dashboard-components 0.10.0 → 0.10.2

package/src/web-components/input/gs-lineage-filter.tsx

@@ -48,7 +48,7 @@ export class LineageFilterComponent extends PreactLitAdapter {
      * The placeholder text to display in the input field.
      */
     @property()
-    placeholderText: string = '';
+    placeholderText: string | undefined = undefined;
 
     /**
      * The width of the component.

package/src/web-components/input/gs-location-filter.tsx

@@ -40,7 +40,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
      * Must be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.
      */
     @property()
-    initialValue = '';
+    initialValue: string | undefined = undefined;
 
     /**
      * Required.
@@ -65,7 +65,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
      * The placeholder text to display in the input field, if it is empty.
      */
     @property()
-    placeholderText: string = '';
+    placeholderText: string | undefined = undefined;
 
     override render() {
         return (

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

@@ -101,7 +101,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -109,7 +109,7 @@ declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

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';