@genspectrum/dashboard-components 0.5.5 → 0.5.7

package/dist/genspectrum-components.d.ts

@@ -876,14 +876,14 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 

package/package.json

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

package/src/preact/components/scaling-selector.tsx

@@ -7,18 +7,24 @@ export type ScalingSelectorProps = {
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
     className?: string;
+    enabledTypes?: ScaleType[];
 };
 
+const scaleTypeItem: { label: string; value: ScaleType }[] = [
+    { label: 'Linear', value: 'linear' },
+    { label: 'Logarithmic', value: 'logarithmic' },
+    { label: 'Logit', value: 'logit' },
+];
+
 export const ScalingSelector: FunctionComponent<ScalingSelectorProps> = ({
     yAxisScaleType,
     setYAxisScaleType,
     className,
+    enabledTypes,
 }) => {
     const items = [
         { label: 'y axis scaling type', value: 'none', disabled: true },
-        { label: 'Linear', value: 'linear' },
-        { label: 'Logarithmic', value: 'logarithmic' },
-        { label: 'Logit', value: 'logit' },
+        ...scaleTypeItem.filter((item) => enabledTypes === undefined || enabledTypes.includes(item.value)),
     ];
 
     return (

package/src/preact/mutations/mutations.tsx

@@ -198,7 +198,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     <CsvDownloadButton
                         className='mx-1 btn btn-xs'
                         getData={() => getMutationsTableData(filteredData.tableData, proportionInterval)}
-                        filename='substitutionsAndDeletions.csv'
+                        filename='substitutions_and_deletions.csv'
                     />
                 </>
             )}

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

@@ -5,14 +5,16 @@ import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOve
 import { type NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
 import GsChart from '../components/chart';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
+import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 
 interface NumberSequencesOverBarChartProps {
     data: NumberOfSequencesDatasets;
+    yAxisScaleType: ScaleType;
 }
 
 Chart.register(...registerables);
 
-export const NumberSequencesOverTimeBarChart = ({ data }: NumberSequencesOverBarChartProps) => {
+export const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }: NumberSequencesOverBarChartProps) => {
     const config: ChartConfiguration = useMemo(
         () => ({
             type: 'bar',
@@ -22,6 +24,11 @@ export const NumberSequencesOverTimeBarChart = ({ data }: NumberSequencesOverBar
             options: {
                 maintainAspectRatio: false,
                 animation: false,
+                scales: {
+                    y: {
+                        type: getYAxisScale(yAxisScaleType).type,
+                    },
+                },
                 plugins: {
                     legend: {
                         display: false,
@@ -33,7 +40,7 @@ export const NumberSequencesOverTimeBarChart = ({ data }: NumberSequencesOverBar
                 },
             },
         }),
-        [data],
+        [data, yAxisScaleType],
     );
 
     return <GsChart configuration={config} />;

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

@@ -0,0 +1,66 @@
+import { Chart, type ChartConfiguration, type ChartDataset, registerables } from 'chart.js';
+import { useMemo } from 'preact/hooks';
+
+import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
+import { type NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
+import GsChart from '../components/chart';
+import { singleGraphColorRGBAById } from '../shared/charts/colors';
+import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
+
+interface NumberSequencesOverBarChartProps {
+    data: NumberOfSequencesDatasets;
+    yAxisScaleType: ScaleType;
+}
+
+Chart.register(...registerables);
+
+export const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }: NumberSequencesOverBarChartProps) => {
+    const config: ChartConfiguration = useMemo(
+        () => ({
+            type: 'line',
+            data: {
+                datasets: getDatasets(data),
+            },
+            options: {
+                maintainAspectRatio: false,
+                animation: false,
+                scales: {
+                    y: {
+                        type: getYAxisScale(yAxisScaleType).type,
+                    },
+                },
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                    },
+                },
+            },
+        }),
+        [data, yAxisScaleType],
+    );
+
+    return <GsChart configuration={config} />;
+};
+
+const getDatasets = (data: NumberOfSequencesDatasets) => {
+    const tableData = getNumberOfSequencesOverTimeTableData(data, 'date');
+
+    return data.map(
+        ({ displayName }, index) =>
+            ({
+                borderWidth: 1,
+                pointRadius: 0,
+                label: displayName,
+                backgroundColor: singleGraphColorRGBAById(index, 0.3),
+                borderColor: singleGraphColorRGBAById(index),
+                data: tableData.map((row) => ({
+                    x: row.date,
+                    y: row[displayName],
+                })),
+            }) as ChartDataset<'line', { x: string; y: number }[]>,
+    );
+};

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

@@ -1,6 +1,8 @@
-import { useContext } from 'preact/hooks';
+import { useContext, useState } from 'preact/hooks';
 
+import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
 import { NumberSequencesOverTimeBarChart } from './number-sequences-over-time-bar-chart';
+import { NumberSequencesOverTimeLineChart } from './number-sequences-over-time-line-chart';
 import { NumberSequencesOverTimeTable } from './number-sequences-over-time-table';
 import {
     type NumberOfSequencesDatasets,
@@ -8,13 +10,17 @@ import {
 } from '../../query/queryNumberOfSequencesOverTime';
 import type { NamedLapisFilter, TemporalGranularity } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import Headline from '../components/headline';
+import Info, { InfoHeadline1, 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 { ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
 type NumberSequencesOverTimeView = 'bar' | 'line' | 'table';
@@ -85,12 +91,20 @@ interface NumberSequencesOverTimeTabsProps {
 }
 
 const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: NumberSequencesOverTimeTabsProps) => {
+    const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
+
     const getTab = (view: NumberSequencesOverTimeView) => {
         switch (view) {
             case 'bar':
-                return { title: 'Bar', content: <NumberSequencesOverTimeBarChart data={data} /> };
+                return {
+                    title: 'Bar',
+                    content: <NumberSequencesOverTimeBarChart data={data} yAxisScaleType={yAxisScaleType} />,
+                };
             case 'line':
-                return { title: 'Line', content: <div>not implemented, TODO #317</div> };
+                return {
+                    title: 'Line',
+                    content: <NumberSequencesOverTimeLineChart data={data} yAxisScaleType={yAxisScaleType} />,
+                };
             case 'table':
                 return {
                     title: 'Table',
@@ -101,5 +115,55 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: Num
         }
     };
 
-    return <Tabs tabs={views.map((view) => getTab(view))} />;
+    return (
+        <Tabs
+            tabs={views.map((view) => getTab(view))}
+            toolbar={(activeTab) => (
+                <Toolbar
+                    activeTab={activeTab}
+                    data={data}
+                    granularity={granularity}
+                    yAxisScaleType={yAxisScaleType}
+                    setYAxisScaleType={setYAxisScaleType}
+                />
+            )}
+        />
+    );
+};
+
+interface ToolbarProps {
+    activeTab: string;
+    data: NumberOfSequencesDatasets;
+    granularity: TemporalGranularity;
+    yAxisScaleType: ScaleType;
+    setYAxisScaleType: (scaleType: ScaleType) => void;
+}
+
+const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleType }: ToolbarProps) => {
+    return (
+        <>
+            {activeTab !== 'Table' && (
+                <ScalingSelector
+                    yAxisScaleType={yAxisScaleType}
+                    setYAxisScaleType={setYAxisScaleType}
+                    enabledTypes={['linear', 'logarithmic']}
+                />
+            )}
+            <CsvDownloadButton
+                className='mx-1 btn btn-xs'
+                getData={() => getNumberOfSequencesOverTimeTableData(data, granularity)}
+                filename='number_of_sequences_over_time.csv'
+            />
+            <NumberSequencesOverTimeInfo />
+        </>
+    );
 };
+
+const NumberSequencesOverTimeInfo = () => (
+    <Info height='100px'>
+        <InfoHeadline1>Number of sequences over time</InfoHeadline1>
+        <InfoParagraph>
+            <a href='https://github.com/GenSpectrum/dashboard-components/issues/315'>TODO</a>
+        </InfoParagraph>
+    </Info>
+);

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

@@ -235,7 +235,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
             <CsvDownloadButton
                 className='mx-1 btn btn-xs'
                 getData={() => getPrevalenceOverTimeTableData(data, granularity)}
-                filename='prevalence-over-time.csv'
+                filename='prevalence_over_time.csv'
             />
 
             <PrevalenceOverTimeInfo />

package/src/web-components/visualization/gs-number-sequences-over-time.stories.ts

@@ -116,6 +116,17 @@ export const OneDatasetBarChart: StoryObj<NumberSequencesOverTimeProps> = {
     },
 };
 
+export const OneDatasetLineChart: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time');
+
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Line' })).toBeVisible());
+
+        await fireEvent.click(canvas.getByRole('button', { name: 'Line' }));
+    },
+};
+
 export const OneDatasetTable: StoryObj<NumberSequencesOverTimeProps> = {
     ...Template,
     play: async ({ canvasElement }) => {

package/src/preact/shared/charts/scales.ts

@@ -1,16 +0,0 @@
-export type ScaleType = 'linear' | 'logarithmic' | 'logit';
-
-export function getYAxisScale(scaleType: ScaleType) {
-    switch (scaleType) {
-        case 'linear': {
-            return { beginAtZero: true, type: 'linear' as const };
-        }
-        case 'logarithmic': {
-            return { type: 'logarithmic' as const };
-        }
-        case 'logit':
-            return { type: 'logit' as const };
-        default:
-            return { beginAtZero: true, type: 'linear' as const };
-    }
-}