@genspectrum/dashboard-components 0.6.10 → 0.6.12

package/src/preact/mutations/mutations-grid.tsx

@@ -1,5 +1,6 @@
 import { type Row } from 'gridjs';
 import { type FunctionComponent } from 'preact';
+import { useMemo } from 'preact/hooks';
 
 import { getMutationsGridData } from './getMutationsGridData';
 import { type SequenceType, type SubstitutionOrDeletionEntry } from '../../types';
@@ -84,7 +85,10 @@ export const MutationsGrid: FunctionComponent<MutationsGridProps> = ({
         return {};
     };
 
-    const tableData = getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row));
+    const tableData = useMemo(
+        () => getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row)),
+        [data, proportionInterval, sequenceType],
+    );
 
     return <Table data={tableData} columns={getHeaders()} pageSize={pageSize} />;
 };

package/src/preact/mutations/mutations.tsx

@@ -14,18 +14,18 @@ import {
     type SubstitutionOrDeletionEntry,
 } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info from '../components/info';
+import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
 import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
 import { ResizeContainer } from '../components/resize-container';
+import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/segment-selector';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
@@ -208,8 +208,38 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     filename='insertions.csv'
                 />
             )}
-            <Info>Info for mutations</Info>
+            <MutationsInfo />
             <Fullscreen />
         </>
     );
 };
+
+const MutationsInfo = () => (
+    <Info>
+        <InfoHeadline1>Mutations</InfoHeadline1>
+        <InfoParagraph>
+            This shows mutations of a variant. There are three types of mutations:{' '}
+            <InfoLink href='https://www.genome.gov/genetics-glossary/Substitution'>substitutions</InfoLink>,{' '}
+            <InfoLink href='https://www.genome.gov/genetics-glossary/Deletion'>deletions</InfoLink> and{' '}
+            <InfoLink href='https://www.genome.gov/genetics-glossary/Insertion'>insertions</InfoLink>.
+        </InfoParagraph>
+        <InfoHeadline2>Proportion calculation</InfoHeadline2>
+        <InfoParagraph>
+            The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the
+            total number of sequences with a non-ambiguous symbol at the position.
+        </InfoParagraph>
+        <InfoParagraph>
+            <b>Example:</b> Assume we look at nucleotide mutations at position 5 where the reference has a T and assume
+            there are 10 sequences in total:
+            <ul className='list-disc list-inside ml-2'>
+                <li>3 sequences have a C,</li>
+                <li>2 sequences have a T,</li>
+                <li>1 sequence has a G,</li>
+                <li>3 sequences have an N,</li>
+                <li>1 sequence has a Y (which means T or C),</li>
+            </ul>
+            then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from the
+            calculation.
+        </InfoParagraph>
+    </Info>
+);

package/src/preact/mutations/queryMutations.ts

@@ -6,8 +6,8 @@ import {
     type MutationEntry,
     type SubstitutionOrDeletionEntry,
 } from '../../types';
-import { type DisplayedSegment } from '../components/SegmentSelector';
 import { type DisplayedMutationType } from '../components/mutation-type-selector';
+import { type DisplayedSegment } from '../components/segment-selector';
 
 export async function queryMutationsData(
     lapisFilter: LapisFilter,

package/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 
 import { filterDisplayedSegments, filterMutationTypes, filterProportion } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
-import { Map2d } from '../../utils/Map2d';
+import { Map2dBase } from '../../utils/map2d';
 import { Deletion, Substitution } from '../../utils/mutations';
 import { type Temporal } from '../../utils/temporal';
 import { yearMonthDay } from '../../utils/temporalTestHelpers';
@@ -10,7 +10,7 @@ import { yearMonthDay } from '../../utils/temporalTestHelpers';
 describe('getFilteredMutationOverTimeData', () => {
     describe('filterDisplayedSegments', () => {
         it('should filter by displayed segments', () => {
-            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+            const data = new Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
 
             data.set(new Substitution('someSegment', 'A', 'T', 123), yearMonthDay('2021-01-01'), {
                 count: 1,
@@ -36,7 +36,7 @@ describe('getFilteredMutationOverTimeData', () => {
 
     describe('filterMutationTypes', () => {
         it('should filter by mutation types', () => {
-            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+            const data = new Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
 
             data.set(new Substitution('someSegment', 'A', 'T', 123), yearMonthDay('2021-01-01'), {
                 count: 1,
@@ -120,7 +120,7 @@ describe('getFilteredMutationOverTimeData', () => {
         });
 
         function getMutationOverTimeData() {
-            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+            const data = new Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
             data.set(someSubstitution, yearMonthDay('2021-01-01'), { count: 1, proportion: 0.1 });
             data.set(someSubstitution, yearMonthDay('2021-02-02'), { count: 99, proportion: 0.99 });
             return data;

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -1,8 +1,9 @@
 import { type Dataset } from '../../operator/Dataset';
 import { type MutationOverTimeDataGroupedByMutation } from '../../query/queryMutationsOverTime';
 import { type DeletionEntry, type SubstitutionEntry } from '../../types';
-import type { DisplayedSegment } from '../components/SegmentSelector';
+import { Map2dView } from '../../utils/map2d';
 import type { DisplayedMutationType } from '../components/mutation-type-selector';
+import type { DisplayedSegment } from '../components/segment-selector';
 
 export function getFilteredMutationOverTimeData(
     data: MutationOverTimeDataGroupedByMutation,
@@ -11,7 +12,7 @@ export function getFilteredMutationOverTimeData(
     displayedMutationTypes: DisplayedMutationType[],
     proportionInterval: { min: number; max: number },
 ) {
-    const filteredData = data.copy();
+    const filteredData = new Map2dView(data);
     filterDisplayedSegments(displayedSegments, filteredData);
     filterMutationTypes(displayedMutationTypes, filteredData);
     filterProportion(filteredData, overallMutationData, proportionInterval);

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -18,7 +18,6 @@ import {
 } from '../../types';
 import { compareTemporal } from '../../utils/temporal';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
 import { type ColorScale } from '../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-dropdown';
 import { CsvDownloadButton } from '../components/csv-download-button';
@@ -32,6 +31,7 @@ import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
 import { ResizeContainer } from '../components/resize-container';
+import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/segment-selector';
 import Tabs from '../components/tabs';
 import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
 import { useQuery } from '../useQuery';

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -1,3 +1,4 @@
+import { type FunctionComponent } from 'preact';
 import { useContext, useState } from 'preact/hooks';
 
 import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
@@ -61,8 +62,9 @@ const NumberSequencesOverTimeInner = ({
 }: NumberSequencesOverTimeInnerProps) => {
     const lapis = useContext(LapisUrlContext);
 
-    const { data, error, isLoading } = useQuery(() =>
-        queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField, granularity, smoothingWindow),
+    const { data, error, isLoading } = useQuery(
+        () => queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField, granularity, smoothingWindow),
+        [lapis, lapisFilter, lapisDateField, granularity, smoothingWindow],
     );
 
     if (isLoading) {
@@ -77,17 +79,32 @@ const NumberSequencesOverTimeInner = ({
         return <NoDataDisplay />;
     }
 
-    return <NumberSequencesOverTimeTabs views={views} data={data} granularity={granularity} pageSize={pageSize} />;
+    return (
+        <NumberSequencesOverTimeTabs
+            views={views}
+            data={data}
+            granularity={granularity}
+            smoothingWindow={smoothingWindow}
+            pageSize={pageSize}
+        />
+    );
 };
 
 interface NumberSequencesOverTimeTabsProps {
     views: NumberSequencesOverTimeView[];
     data: NumberOfSequencesDatasets;
     granularity: TemporalGranularity;
+    smoothingWindow: number;
     pageSize: boolean | number;
 }
 
-const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: NumberSequencesOverTimeTabsProps) => {
+const NumberSequencesOverTimeTabs = ({
+    views,
+    data,
+    granularity,
+    smoothingWindow,
+    pageSize,
+}: NumberSequencesOverTimeTabsProps) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const getTab = (view: NumberSequencesOverTimeView) => {
@@ -120,6 +137,7 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: Num
                     activeTab={activeTab}
                     data={data}
                     granularity={granularity}
+                    smoothingWindow={smoothingWindow}
                     yAxisScaleType={yAxisScaleType}
                     setYAxisScaleType={setYAxisScaleType}
                 />
@@ -134,9 +152,17 @@ interface ToolbarProps {
     granularity: TemporalGranularity;
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
+    smoothingWindow: number;
 }
 
-const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleType }: ToolbarProps) => {
+const Toolbar = ({
+    activeTab,
+    data,
+    granularity,
+    yAxisScaleType,
+    setYAxisScaleType,
+    smoothingWindow,
+}: ToolbarProps) => {
     return (
         <>
             {activeTab !== 'Table' && (
@@ -151,17 +177,26 @@ const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleTy
                 getData={() => getNumberOfSequencesOverTimeTableData(data, granularity)}
                 filename='number_of_sequences_over_time.csv'
             />
-            <NumberSequencesOverTimeInfo />
+            <NumberSequencesOverTimeInfo granularity={granularity} smoothingWindow={smoothingWindow} />
             <Fullscreen />
         </>
     );
 };
 
-const NumberSequencesOverTimeInfo = () => (
+type NumberSequencesOverTimeInfoProps = {
+    granularity: TemporalGranularity;
+    smoothingWindow: number;
+};
+
+const NumberSequencesOverTimeInfo: FunctionComponent<NumberSequencesOverTimeInfoProps> = ({
+    granularity,
+    smoothingWindow,
+}) => (
     <Info>
         <InfoHeadline1>Number of sequences over time</InfoHeadline1>
         <InfoParagraph>
-            <a href='https://github.com/GenSpectrum/dashboard-components/issues/315'>TODO</a>
+            This presents the number of available sequences of a variant per <b>{granularity}</b>
+            {smoothingWindow > 0 && `, smoothed using a ${smoothingWindow}-${granularity} sliding window`}.
         </InfoParagraph>
     </Info>
 );

package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -51,7 +51,8 @@ const Template = {
                 height={args.height}
                 lapisDateField={args.lapisDateField}
                 pageSize={args.pageSize}
-                yAxisMaxConfig={args.yAxisMaxConfig}
+                yAxisMaxLinear={args.yAxisMaxLinear}
+                yAxisMaxLogarithmic={args.yAxisMaxLogarithmic}
             />
         </LapisUrlContext.Provider>
     ),

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -14,25 +14,22 @@ import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
 import { type ConfidenceIntervalMethod } from '../shared/charts/confideceInterval';
-import type { YAxisMaxConfig } from '../shared/charts/getYAxisMax';
+import { type AxisMax } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
 export type View = 'bar' | 'line' | 'bubble' | 'table';
 
-export interface PrevalenceOverTimeProps extends PrevalenceOverTimeInnerProps {
+export interface PrevalenceOverTimeProps {
     width: string;
     height: string;
-}
-
-export interface PrevalenceOverTimeInnerProps {
     numeratorFilter: NamedLapisFilter | NamedLapisFilter[];
     denominatorFilter: LapisFilter;
     granularity: TemporalGranularity;
@@ -41,32 +38,25 @@ export interface PrevalenceOverTimeInnerProps {
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
     lapisDateField: string;
     pageSize: boolean | number;
-    yAxisMaxConfig: YAxisMaxConfig;
+    yAxisMaxLinear?: AxisMax;
+    yAxisMaxLogarithmic?: AxisMax;
 }
 
-export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({ width, height, ...innerProps }) => {
+export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <PrevalenceOverTimeInner {...innerProps} />
+                <PrevalenceOverTimeInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerProps> = ({
-    numeratorFilter,
-    denominatorFilter,
-    granularity,
-    smoothingWindow,
-    views,
-    confidenceIntervalMethods,
-    lapisDateField,
-    pageSize,
-    yAxisMaxConfig,
-}) => {
+export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeProps> = (componentProps) => {
+    const { numeratorFilter, denominatorFilter, granularity, smoothingWindow, lapisDateField } = componentProps;
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(
@@ -94,39 +84,21 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
         return <NoDataDisplay />;
     }
 
-    return (
-        <PrevalenceOverTimeTabs
-            views={views}
-            data={data}
-            granularity={granularity}
-            confidenceIntervalMethods={confidenceIntervalMethods}
-            pageSize={pageSize}
-            yAxisMaxConfig={yAxisMaxConfig}
-        />
-    );
+    return <PrevalenceOverTimeTabs data={data} {...componentProps} />;
 };
 
-type PrevalenceOverTimeTabsProps = {
-    views: View[];
+type PrevalenceOverTimeTabsProps = PrevalenceOverTimeProps & {
     data: PrevalenceOverTimeData;
-    granularity: TemporalGranularity;
-    confidenceIntervalMethods: ConfidenceIntervalMethod[];
-    pageSize: boolean | number;
-    yAxisMaxConfig: YAxisMaxConfig;
 };
 
-const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = ({
-    views,
-    data,
-    granularity,
-    confidenceIntervalMethods,
-    pageSize,
-    yAxisMaxConfig,
-}) => {
+const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = ({ data, ...componentProps }) => {
+    const { views, granularity, confidenceIntervalMethods, pageSize, yAxisMaxLinear, yAxisMaxLogarithmic } =
+        componentProps;
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
     const [confidenceIntervalMethod, setConfidenceIntervalMethod] = useState<ConfidenceIntervalMethod>(
         confidenceIntervalMethods.length > 0 ? confidenceIntervalMethods[0] : 'none',
     );
+    const yAxisMaxConfig = { linear: yAxisMaxLinear, logarithmic: yAxisMaxLogarithmic };
 
     const getTab = (view: View) => {
         switch (view) {
@@ -181,20 +153,18 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
             yAxisScaleType={yAxisScaleType}
             setYAxisScaleType={setYAxisScaleType}
             data={data}
-            granularity={granularity}
-            confidenceIntervalMethods={confidenceIntervalMethods}
             confidenceIntervalMethod={confidenceIntervalMethod}
             setConfidenceIntervalMethod={setConfidenceIntervalMethod}
+            {...componentProps}
         />
     );
 
     return <Tabs tabs={tabs} toolbar={toolbar} />;
 };
 
-type ToolbarProps = {
+type ToolbarProps = PrevalenceOverTimeProps & {
     activeTab: string;
     data: PrevalenceOverTimeData;
-    granularity: TemporalGranularity;
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
@@ -206,12 +176,12 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     activeTab,
     yAxisScaleType,
     setYAxisScaleType,
-    confidenceIntervalMethods,
     confidenceIntervalMethod,
     setConfidenceIntervalMethod,
     data,
-    granularity,
+    ...componentProps
 }) => {
+    const { confidenceIntervalMethods, granularity } = componentProps;
     return (
         <>
             {activeTab !== 'Table' && (
@@ -230,17 +200,38 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 filename='prevalence_over_time.csv'
             />
 
-            <PrevalenceOverTimeInfo />
+            <PrevalenceOverTimeInfo {...componentProps} />
             <Fullscreen />
         </>
     );
 };
 
-const PrevalenceOverTimeInfo: FunctionComponent = () => {
+const PrevalenceOverTimeInfo: FunctionComponent<PrevalenceOverTimeProps> = (componentProps) => {
+    const { granularity, smoothingWindow, views } = componentProps;
+    const lapis = useContext(LapisUrlContext);
     return (
         <Info>
             <InfoHeadline1>Prevalence over time</InfoHeadline1>
-            <InfoParagraph>Prevalence over time info.</InfoParagraph>
+            <InfoParagraph>
+                This presents the proportion of one or more variants per <b>{granularity}</b>
+                {smoothingWindow > 0 && `, smoothed using a ${smoothingWindow}-${granularity} sliding window`}. The
+                proportion is calculated as the number of sequences of the variant(s) divided by the number of sequences
+                that match the <code>denominatorFilter</code> (see below).
+            </InfoParagraph>
+            <InfoParagraph>
+                Sequences that have no assigned date will not be shown in the line and bubble chart. They will show up
+                in the bar and table view with date "unknown".
+            </InfoParagraph>
+            {views.includes('bubble') && (
+                <>
+                    <InfoHeadline2>Bubble chart</InfoHeadline2>
+                    <InfoParagraph>
+                        The size of the bubble scales with the total number of available sequences from the{' '}
+                        {granularity}.
+                    </InfoParagraph>
+                </>
+            )}
+            <InfoComponentCode componentName='prevalence-over-time' params={componentProps} lapisUrl={lapis} />
         </Info>
     );
 };

package/src/preact/useQuery.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'preact/hooks';
 
-export function useQuery<Data>(fetchDataCallback: () => Promise<Data>, dependencies: unknown[] = []) {
+export function useQuery<Data>(fetchDataCallback: () => Promise<Data>, dependencies: unknown[]) {
     const [data, setData] = useState<Data | null>(null);
     const [error, setError] = useState<Error | null>(null);
     const [isLoading, setIsLoading] = useState(true);

package/src/query/queryMutationsOverTime.ts

@@ -12,7 +12,7 @@ import {
     type SubstitutionOrDeletionEntry,
     type TemporalGranularity,
 } from '../types';
-import { Map2d } from '../utils/Map2d';
+import { Map2dBase, type Map2d } from '../utils/map2d';
 import { type Deletion, type Substitution } from '../utils/mutations';
 import {
     dateRangeCompare,
@@ -154,7 +154,7 @@ function fetchAndPrepareSubstitutionsOrDeletions(filter: LapisFilter, sequenceTy
 }
 
 export function groupByMutation(data: MutationOverTimeData[]) {
-    const dataArray = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>(
+    const dataArray = new Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>(
         (mutation) => mutation.code,
         (date) => date.toString(),
     );
@@ -174,7 +174,7 @@ export function groupByMutation(data: MutationOverTimeData[]) {
 }
 
 function addZeroValuesForDatesWithNoMutationData(
-    dataArray: Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>,
+    dataArray: Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>,
     data: MutationOverTimeData[],
 ) {
     if (dataArray.getFirstAxisKeys().length !== 0) {