@genspectrum/dashboard-components 0.5.3 → 0.5.5

package/dist/genspectrum-components.d.ts

@@ -453,6 +453,77 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
     render(): JSX_2.Element;
 }
 
+/**
+ * TODO(#330) write docs
+ */
+export declare class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
+    /**
+     *   Required.
+     * Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.
+     *
+     * The `lapisFilter` will be sent as is to LAPIS to select the data.
+     * It must be a valid LAPIS filter object.
+     *
+     * The `displayName` will be used as the label the prevalence in the views.
+     * It should be human-readable.
+     *
+     */ lapisFilter: {
+        lapisFilter: Record<string, string | number | null | boolean>;
+        displayName: string;
+    } | {
+        lapisFilter: Record<string, string | number | null | boolean>;
+        displayName: string;
+    }[];
+    /**
+     * Required.
+     *
+     * The LAPIS field that the data should be aggregated by.
+     * The values will be used on the x-axis of the diagram.
+     * Must be a field of type `date` in LAPIS.
+     */
+    lapisDateField: string;
+    /**
+     * A list of tabs with views that this component should provide.
+     */
+    views: ('bar' | 'line' | 'table')[];
+    /**
+     * The headline of the component. Set to an empty string to hide the headline.
+     */
+    headline: string;
+    /**
+     * The width of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     */
+    width: string;
+    /**
+     * The height of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     */
+    height: string;
+    /**
+     * The granularity of the time axis.
+     */
+    granularity: 'day' | 'week' | 'month' | 'year';
+    /**
+     * The number of time steps to use for smoothing the data.
+     * `0` means no smoothing.
+     * Must be a non-negative integer.
+     *
+     * For a given time, the shown value is the mean of the neighbouring measured values.
+     * The `smoothingWindow` value provides the number of neighbouring values to take into account.
+     * The resulting time is computed via `Math.floor(smoothingWindow / 2)`.
+     */
+    smoothingWindow: number;
+    /**
+     * The maximum number of rows to display in the table view.
+     * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
+     */
+    pageSize: boolean | number;
+    render(): JSX_2.Element;
+}
+
 declare abstract class PreactLitAdapter extends ReactiveElement {
     static styles: CSSResult[];
     /* Excluded from this release type: lapis */
@@ -824,6 +895,13 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-date-range-selector': DateRangeSelectorComponent;

package/package.json

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

package/src/lapisApi/ReferenceGenome.ts

@@ -28,3 +28,5 @@ export const getSegmentNames = (referenceGenome: ReferenceGenome, sequenceType:
         }
     }
 };
+
+export const isSingleSegmented = (referenceGenome: ReferenceGenome) => referenceGenome.nucleotideSequences.length === 1;

package/src/preact/aggregatedData/aggregate.tsx

@@ -35,15 +35,10 @@ export interface AggregateInnerProps {
 }
 
 export const Aggregate: FunctionComponent<AggregateProps> = ({
-    views,
     width,
     height,
     headline = 'Mutations',
-    filter,
-    fields,
-    pageSize,
-    initialSortField,
-    initialSortDirection,
+    ...innerProps
 }) => {
     const size = { height, width };
 
@@ -51,14 +46,7 @@ export const Aggregate: FunctionComponent<AggregateProps> = ({
         <ErrorBoundary size={size} headline={headline}>
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
-                    <AggregateInner
-                        fields={fields}
-                        filter={filter}
-                        views={views}
-                        initialSortField={initialSortField}
-                        initialSortDirection={initialSortDirection}
-                        pageSize={pageSize}
-                    />
+                    <AggregateInner {...innerProps} />
                 </Headline>
             </ResizeContainer>
         </ErrorBoundary>

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -28,27 +28,15 @@ export interface DateRangeSelectorPropsInner<CustomLabel extends string> {
 }
 
 export const DateRangeSelector = <CustomLabel extends string>({
-    customSelectOptions,
-    earliestDate = '1900-01-01',
-    initialValue,
     width,
-    dateColumn,
-    initialDateFrom,
-    initialDateTo,
+    ...innerProps
 }: DateRangeSelectorProps<CustomLabel>) => {
     const size = { width, height: '3rem' };
 
     return (
         <ErrorBoundary size={size}>
             <div style={{ width }}>
-                <DateRangeSelectorInner
-                    customSelectOptions={customSelectOptions}
-                    earliestDate={earliestDate}
-                    initialValue={initialValue}
-                    dateColumn={dateColumn}
-                    initialDateFrom={initialDateFrom}
-                    initialDateTo={initialDateTo}
-                />
+                <DateRangeSelectorInner {...innerProps} />
             </div>
         </ErrorBoundary>
     );

package/src/preact/locationFilter/location-filter.tsx

@@ -20,18 +20,13 @@ export interface LocationFilterProps extends LocationFilterInnerProps {
     width: string;
 }
 
-export const LocationFilter: FunctionComponent<LocationFilterProps> = ({
-    width,
-    initialValue,
-    fields,
-    placeholderText,
-}) => {
+export const LocationFilter: FunctionComponent<LocationFilterProps> = ({ width, ...innerProps }) => {
     const size = { width, height: '3rem' };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <LocationFilterInner initialValue={initialValue} fields={fields} placeholderText={placeholderText} />
+                <LocationFilterInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -38,13 +38,10 @@ export interface MutationComparisonInnerProps {
 }
 
 export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
-    lapisFilters,
-    sequenceType,
-    views,
     width,
     height,
     headline = 'Mutation comparison',
-    pageSize,
+    ...innerProps
 }) => {
     const size = { height, width };
 
@@ -52,12 +49,7 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
         <ErrorBoundary size={size} headline={headline}>
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
-                    <MutationComparisonInner
-                        lapisFilters={lapisFilters}
-                        sequenceType={sequenceType}
-                        views={views}
-                        pageSize={pageSize}
-                    />
+                    <MutationComparisonInner {...innerProps} />
                 </Headline>
             </ResizeContainer>
         </ErrorBoundary>

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

@@ -0,0 +1,117 @@
+import { useContext } from 'preact/hooks';
+
+import { isSingleSegmented } from '../../lapisApi/ReferenceGenome';
+import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import Info, { InfoHeadline1, InfoHeadline2, InfoParagraph } from '../components/info';
+
+export const MutationFilterInfo = () => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+
+    const firstGene = referenceGenome.genes[0].name;
+    return (
+        <Info height={'80vh'}>
+            <InfoHeadline1> Mutation Filter</InfoHeadline1>
+            <InfoParagraph>This component allows you to filter for mutations at specific positions.</InfoParagraph>
+
+            <InfoHeadline2> Nucleotide Mutations and Insertions</InfoHeadline2>
+            {isSingleSegmented(referenceGenome) ? (
+                <SingleSegmentedNucleotideMutationsInfo />
+            ) : (
+                <MultiSegmentedNucleotideMutationsInfo />
+            )}
+
+            <InfoHeadline2>Amino Acid Mutations and Insertions</InfoHeadline2>
+            <InfoParagraph>
+                An amino acid mutation has the format <b>&lt;gene&gt;:&lt;position&gt;&lt;base&gt;</b> or
+                <b>&lt;gene&gt;:&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. A <b>&lt;base&gt;</b> can be one of
+                the 20 amino acid codes. It can also be <b>-</b> for deletion and <b>X</b> for unknown. Example:{' '}
+                <b>E:57Q</b>.
+            </InfoParagraph>
+            <InfoParagraph>
+                Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the
+                start of the mutation. Example: <b>ins_{firstGene}:31:N</b> would filter for sequences with an insertion
+                of N between positions 31 and 32 in the gene {firstGene}.
+            </InfoParagraph>
+            <InfoParagraph>
+                This organism has the following genes: {referenceGenome.genes.map((gene) => gene.name).join(', ')}.
+            </InfoParagraph>
+
+            <InfoHeadline2>Insertion Wildcards</InfoHeadline2>
+            <InfoParagraph>
+                This component supports insertion queries that contain wildcards <b>?</b>. For example{' '}
+                <b>ins_{firstGene}:214:?EP?</b> will match all cases where segment <b>{firstGene}</b> has an insertion
+                of <b>EP</b> between the positions <b>214</b> and <b>215</b> but also an insertion of other amino acids
+                which include the <b>EP</b>, e.g. the insertion <b>EPE</b> will be matched.
+            </InfoParagraph>
+            <InfoParagraph>
+                You can also use wildcards to match any insertion at a given position. For example{' '}
+                <b>ins_{firstGene}:214:?</b> match any (but at least one) insertion between the positions 214 and 215.
+            </InfoParagraph>
+
+            <InfoHeadline2>Multiple Mutations</InfoHeadline2>
+            <InfoParagraph>
+                Multiple mutation filters can be provided by adding one mutation after the other.
+            </InfoParagraph>
+
+            <InfoHeadline2>Any Mutation</InfoHeadline2>
+            <InfoParagraph>
+                To filter for any mutation at a given position you can omit the <b>&lt;base&gt;</b>. Example:{' '}
+                <b>{firstGene}:20</b>.
+            </InfoParagraph>
+
+            <InfoHeadline2>No Mutation</InfoHeadline2>
+            <InfoParagraph>
+                You can write a <b>.</b> for the <b>&lt;base&gt;</b> to filter for sequences for which it is confirmed
+                that no mutation occurred, i.e. has the same base as the reference genome at the specified position.
+            </InfoParagraph>
+        </Info>
+    );
+};
+
+const SingleSegmentedNucleotideMutationsInfo = () => {
+    return (
+        <>
+            <InfoParagraph>
+                This organism is single-segmented. Thus, nucleotide mutations have the format{' '}
+                <b>&lt;position&gt;&lt;base&gt;</b> or <b>&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. The{' '}
+                <b>&lt;base_ref&gt;</b> is the reference base at the position. It is optional. A <b>&lt;base&gt;</b> can
+                be one of the four nucleotides <b>A</b>, <b>T</b>, <b>C</b>, and <b>G</b>. It can also be <b>-</b> for
+                deletion and <b>N</b> for unknown. For example if the reference sequence is <b>A</b> at position{' '}
+                <b>23</b> both: <b>23T</b> and <b>A23T</b> will yield the same results.
+            </InfoParagraph>
+            <InfoParagraph>
+                Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the
+                start of the mutation. Example: <b>ins_1046:A</b> would filter for sequences with an insertion of A
+                between the positions 1046 and 1047 in the nucleotide sequence.
+            </InfoParagraph>
+        </>
+    );
+};
+
+const MultiSegmentedNucleotideMutationsInfo = () => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+
+    const firstSegment = referenceGenome.nucleotideSequences[0].name;
+
+    return (
+        <>
+            <InfoParagraph>
+                This organism is multi-segmented. Thus, nucleotide mutations have the format{' '}
+                <b>&lt;segment&gt;:&lt;position&gt;&lt;base&gt;</b> or{' '}
+                <b>&lt;segment&gt;:&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. <b>&lt;base_ref&gt;</b> is the
+                reference base at the position. It is optional. A <b>&lt;base&gt;</b> can be one of the four nucleotides{' '}
+                <b>A</b>, <b>T</b>, <b>C</b>, and <b>G</b>. It can also be <b>-</b> for deletion and <b>N</b> for
+                unknown. For example if the reference sequence is <b>A</b> at position <b>23</b> both:{' '}
+                <b>{firstSegment}:23T</b> and <b>{firstSegment}:A23T</b> will yield the same results.
+            </InfoParagraph>
+            <InfoParagraph>
+                Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the
+                start of the mutation. Example: <b>ins_{firstSegment}:10462:A</b>.
+            </InfoParagraph>
+            <InfoParagraph>
+                This organism has the following segments:{' '}
+                {referenceGenome.nucleotideSequences.map((gene) => gene.name).join(', ')}.
+            </InfoParagraph>{' '}
+        </>
+    );
+};

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

@@ -1,12 +1,12 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useRef, useState } from 'preact/hooks';
 
+import { MutationFilterInfo } from './mutation-filter-info';
 import { parseAndValidateMutation } from './parseAndValidateMutation';
 import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
 import { type Deletion, type Insertion, type Mutation, type Substitution } from '../../utils/mutations';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
-import Info from '../components/info';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { DeleteIcon } from '../shared/icons/DeleteIcon';
 
@@ -103,7 +103,7 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
     return (
         <form className='w-full border boder-gray-300 rounded-md relative' onSubmit={handleSubmit} ref={formRef}>
             <div className='absolute -top-3 -right-3'>
-                <Info height={'100px'}>Info for mutation filter</Info>
+                <MutationFilterInfo />
             </div>
             <div className='w-full flex p-2 flex-wrap items-center'>
                 <SelectedMutationDisplay

package/src/preact/mutationFilter/sequenceTypeFromSegment.spec.ts

@@ -45,7 +45,7 @@ describe('getSequenceType', () => {
         ],
     };
 
-    it('should return nucleotide when the segment is undefined for singe segmented genome', () => {
+    it('should return nucleotide when the segment is undefined for single segmented genome', () => {
         expect(sequenceTypeFromSegment('nuc1', singleSegmentedReferenceGenome)).toBe('nucleotide');
         expect(sequenceTypeFromSegment(undefined, singleSegmentedReferenceGenome)).toBe('nucleotide');
     });

package/src/preact/mutationFilter/sequenceTypeFromSegment.ts

@@ -1,4 +1,4 @@
-import type { ReferenceGenome } from '../../lapisApi/ReferenceGenome';
+import { isSingleSegmented, type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
 import type { SequenceType } from '../../types';
 
 export const sequenceTypeFromSegment = (
@@ -6,7 +6,7 @@ export const sequenceTypeFromSegment = (
     referenceGenome: ReferenceGenome,
 ): SequenceType | undefined => {
     if (possibleSegment === undefined) {
-        return referenceGenome.nucleotideSequences.length === 1 ? 'nucleotide' : undefined;
+        return isSingleSegmented(referenceGenome) ? 'nucleotide' : undefined;
     }
 
     if (referenceGenome.nucleotideSequences.some((sequence) => sequence.name === possibleSegment)) {

package/src/preact/mutations/mutations.tsx

@@ -45,13 +45,10 @@ export interface MutationsProps extends MutationsInnerProps {
 }
 
 export const Mutations: FunctionComponent<MutationsProps> = ({
-    lapisFilter,
-    sequenceType,
-    views,
     width,
     height,
     headline = 'Mutations',
-    pageSize,
+    ...innerProps
 }) => {
     const size = { height, width };
 
@@ -59,12 +56,7 @@ export const Mutations: FunctionComponent<MutationsProps> = ({
         <ErrorBoundary size={size} headline={headline}>
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
-                    <MutationsInner
-                        lapisFilter={lapisFilter}
-                        sequenceType={sequenceType}
-                        views={views}
-                        pageSize={pageSize}
-                    />
+                    <MutationsInner {...innerProps} />
                 </Headline>
             </ResizeContainer>
         </ErrorBoundary>