@genspectrum/dashboard-components 0.5.6 → 0.6.0

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

@@ -13,7 +13,6 @@ import { ConfidenceIntervalSelector } from '../components/confidence-interval-se
 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';
@@ -30,7 +29,6 @@ export type View = 'bar' | 'line' | 'bubble' | 'table';
 export interface PrevalenceOverTimeProps extends PrevalenceOverTimeInnerProps {
     width: string;
     height: string;
-    headline?: string;
 }
 
 export interface PrevalenceOverTimeInnerProps {
@@ -45,20 +43,13 @@ export interface PrevalenceOverTimeInnerProps {
     yAxisMaxConfig: YAxisMaxConfig;
 }
 
-export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
-    width,
-    height,
-    headline = 'Prevalence over time',
-    ...innerProps
-}) => {
+export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({ width, height, ...innerProps }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <PrevalenceOverTimeInner {...innerProps} />
-                </Headline>
+                <PrevalenceOverTimeInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
@@ -235,7 +226,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/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -20,7 +20,6 @@ export default {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         yAxisMaxConfig: { control: 'object' },
     },
 };
@@ -35,7 +34,6 @@ export const Primary = {
                 views={args.views}
                 width={args.width}
                 height={args.height}
-                headline={args.headline}
                 lapisDateField={args.lapisDateField}
                 yAxisMaxConfig={args.yAxisMaxConfig}
             />
@@ -48,7 +46,6 @@ export const Primary = {
         views: ['line'],
         width: '100%',
         height: '700px',
-        headline: 'Relative growth advantage',
         lapisDateField: 'date',
         yAxisMaxConfig: {
             linear: 1,

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -10,7 +10,6 @@ import { type LapisFilter } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Headline from '../components/headline';
 import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -26,7 +25,6 @@ export type View = 'line';
 export interface RelativeGrowthAdvantageProps extends RelativeGrowthAdvantagePropsInner {
     width: string;
     height: string;
-    headline?: string;
 }
 
 export interface RelativeGrowthAdvantagePropsInner {
@@ -41,17 +39,14 @@ export interface RelativeGrowthAdvantagePropsInner {
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
     width,
     height,
-    headline = 'Relative growth advantage',
     ...innerProps
 }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <RelativeGrowthAdvantageInner {...innerProps} />
-                </Headline>
+                <RelativeGrowthAdvantageInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

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

@@ -14,7 +14,6 @@ const codeExample = `
     fields='["division", "host"]'
     filter='{"country": "USA"}'
     views='["table"]'
-    headline="Aggregate"
     width='100%'
     height='700px'
     initialSortField="count"
@@ -33,7 +32,6 @@ const meta: Meta<Required<AggregateProps>> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
         initialSortField: { control: 'text' },
         initialSortDirection: {
@@ -80,7 +78,6 @@ export const Table: StoryObj<Required<AggregateProps>> = {
                 .views=${args.views}
                 .width=${args.width}
                 .height=${args.height}
-                .headline=${args.headline}
                 .initialSortField=${args.initialSortField}
                 .initialSortDirection=${args.initialSortDirection}
                 .pageSize=${args.pageSize}
@@ -95,7 +92,6 @@ export const Table: StoryObj<Required<AggregateProps>> = {
         },
         width: '100%',
         height: '700px',
-        headline: 'Aggregate',
         initialSortField: 'count',
         initialSortDirection: 'descending',
         pageSize: 10,

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

@@ -61,12 +61,6 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: String })
     height: string = '700px';
 
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    @property({ type: String })
-    headline: string = 'Aggregate';
-
     /**
      * The field by which the table is initially sorted.
      * Must be one of the fields specified in the fields property, 'count', or 'proportion'.
@@ -95,7 +89,6 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
                 filter={this.filter}
                 width={this.width}
                 height={this.height}
-                headline={this.headline}
                 initialSortField={this.initialSortField}
                 initialSortDirection={this.initialSortDirection}
                 pageSize={this.pageSize}

package/src/web-components/visualization/gs-mutation-comparison.stories.ts

@@ -16,7 +16,6 @@ const codeExample = String.raw`
     lapisFilters='[{ "displayName": "Data in Switzerland", "lapisFilter": { "country": "Switzerland" }}, { "displayName": "Data in Germany", "lapisFilter": { "country": "Germany" }}]'
     sequenceType="nucleotide"
     views='["table", "venn"]'
-    headline="Mutation comparison"
     width='100%'
     height='700px'
     pageSize="10"
@@ -37,7 +36,6 @@ const meta: Meta<Required<MutationComparisonProps>> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
     },
     parameters: withComponentDocs({
@@ -61,7 +59,6 @@ const Template: StoryObj<Required<MutationComparisonProps>> = {
                 .views=${args.views}
                 .width=${args.width}
                 .height=${args.height}
-                .headline=${args.headline}
                 .pageSize=${args.pageSize}
             ></gs-mutation-comparison>
         </gs-app>
@@ -93,7 +90,6 @@ export const Default: StoryObj<Required<MutationComparisonProps>> = {
         views: ['table', 'venn'],
         width: '100%',
         height: '700px',
-        headline: 'Mutation comparison',
         pageSize: 10,
     },
     parameters: {

package/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -75,12 +75,6 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: String })
     height: string = '700px';
 
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    @property({ type: String })
-    headline: string = 'Mutation comparison';
-
     /**
      * 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).
@@ -96,7 +90,6 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
                 views={this.views}
                 width={this.width}
                 height={this.height}
-                headline={this.headline}
                 pageSize={this.pageSize}
             />
         );

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

@@ -16,7 +16,6 @@ const codeExample = String.raw`
     lapisFilter='{ "country": "Switzerland", "pangoLineage": "B.1.1.7", "dateTo": "2022-01-01" }'
     sequenceType="nucleotide"
     views='["grid", "table", "insertions"]'
-    headline="Mutations"
     width='100%'
     height='700px'
     pageSize="10"
@@ -37,7 +36,6 @@ const meta: Meta<Required<MutationsProps>> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
     },
     args: {
@@ -46,7 +44,6 @@ const meta: Meta<Required<MutationsProps>> = {
         views: ['grid', 'table', 'insertions'],
         width: '100%',
         height: '700px',
-        headline: 'Mutations',
         pageSize: 10,
     },
     parameters: withComponentDocs({
@@ -70,7 +67,6 @@ const Template: StoryObj<Required<MutationsProps>> = {
                 .views=${args.views}
                 .width=${args.width}
                 .height=${args.height}
-                .headline=${args.headline}
                 .pageSize=${args.pageSize}
             ></gs-mutations>
         </gs-app>

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

@@ -70,12 +70,6 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: String })
     height: string = '700px';
 
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    @property({ type: String })
-    headline: string = 'Mutations';
-
     /**
      * 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).
@@ -91,7 +85,6 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
                 views={this.views}
                 width={this.width}
                 height={this.height}
-                headline={this.headline}
                 pageSize={this.pageSize}
             />
         );

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

@@ -18,7 +18,6 @@ const codeExample = String.raw`
     lapisFilter='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
     lapisDateField="date"
     views='["bar", "line", "table"]'
-    headline="Number of sequences over time"
     width="100%"
     height="700px"
     granularity="month"
@@ -61,7 +60,6 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
                 .views=${args.views}
                 .width=${args.width}
                 .height=${args.height}
-                .headline=${args.headline}
                 .granularity=${args.granularity}
                 .smoothingWindow=${args.smoothingWindow}
                 .pageSize=${args.pageSize}
@@ -76,7 +74,6 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
         lapisDateField: 'date',
         width: '100%',
         height: '700px',
-        headline: 'Number of sequences over time',
         smoothingWindow: 0,
         granularity: 'month',
         pageSize: 10,

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

@@ -8,20 +8,30 @@ import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
 /**
- * TODO(#330) write docs
+ * ## Context
+ *
+ * This component displays the number of sequences over time of one or more datasets,
+ * selected by LAPIS filters.
+ *
+ * In the chart views, the user can select the y-axis scale (linear, logistic).
+ * The x-axis shows all available time intervals available in the datasets in the selected `granularity`.
+ * Thus, the `lapisFilter` implicitly also defines the range that is shown on the x-axis.
+ * If you want to restrict the x-axis to a smaller date range,
+ * then you need to set appropriate filter values in the `lapisFilter`.
  */
 @customElement('gs-number-sequences-over-time')
 export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     // prettier-ignore
     // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
-     *   Required.
-     * Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.
+     * Required.
+     *
+     * Either a LAPIS filter or an array of LAPIS filters to fetch the number of sequences 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.
+     * The `displayName` will be used to label the component views.
      * It should be human-readable.
      *
      */ @property({type: Object})
@@ -51,12 +61,6 @@ export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJs
     @property({ type: Array })
     views: ('bar' | 'line' | 'table')[] = ['bar', 'line', 'table'];
 
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    @property({ type: String })
-    headline: string = 'Number of sequences of time';
-
     /**
      * The width of the component.
      *
@@ -104,7 +108,6 @@ export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJs
                 lapisFilter={this.lapisFilter}
                 lapisDateField={this.lapisDateField}
                 views={this.views}
-                headline={this.headline}
                 width={this.width}
                 height={this.height}
                 granularity={this.granularity}

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

@@ -23,7 +23,6 @@ const codeExample = String.raw`
     smoothingWindow="0"
     views='["bar", "line", "bubble", "table"]'
     confidenceIntervalMethods='["wilson"]'
-    headline="Prevalence over time"
     width="100%"
     height="700px"
     lapisDateField="date"
@@ -53,7 +52,6 @@ const meta: Meta<Required<PrevalenceOverTimeComponentProps>> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
         yAxisMaxLinear: { control: 'object' },
         yAxisMaxLogarithmic: { control: 'object' },
@@ -82,7 +80,6 @@ const Template: StoryObj<Required<PrevalenceOverTimeComponentProps>> = {
                 .confidenceIntervalMethods=${args.confidenceIntervalMethods}
                 .width=${args.width}
                 .height=${args.height}
-                .headline=${args.headline}
                 .lapisDateField=${args.lapisDateField}
                 .pageSize=${args.pageSize}
                 .yAxisMaxLinear=${args.yAxisMaxLinear}
@@ -106,7 +103,6 @@ export const TwoDatasets: StoryObj<Required<PrevalenceOverTimeComponentProps>> =
         confidenceIntervalMethods: ['wilson'],
         width: '100%',
         height: '700px',
-        headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxLinear: 1,
@@ -181,7 +177,6 @@ export const OneDataset: StoryObj<Required<PrevalenceOverTimeComponentProps>> =
         confidenceIntervalMethods: ['wilson'],
         width: '100%',
         height: '700px',
-        headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxLinear: 1,

package/src/web-components/visualization/gs-prevalence-over-time.tsx

@@ -109,12 +109,6 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: Array })
     confidenceIntervalMethods: ('wilson' | 'none')[] = ['wilson'];
 
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    @property({ type: String })
-    headline: string = 'Prevalence over time';
-
     /**
      * The width of the component.
      *
@@ -179,7 +173,6 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
                 confidenceIntervalMethods={this.confidenceIntervalMethods}
                 width={this.width}
                 height={this.height}
-                headline={this.headline}
                 lapisDateField={this.lapisDateField}
                 pageSize={this.pageSize}
                 yAxisMaxConfig={{

package/src/web-components/visualization/gs-relative-growth-advantage.stories.ts

@@ -18,7 +18,6 @@ const codeExample = String.raw`
     views='["line"]'
     width='100%'
     height='700px'
-    headline="Relative growth advantage"
     lapisDateField="date"
     yAxisMaxLinear="1"
     yAxisMaxLogarithmic="limitTo1"    
@@ -37,7 +36,6 @@ const meta: Meta<RelativeGrowthAdvantageComponentProps> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         yAxisMaxLinear: { control: 'object' },
         yAxisMaxLogarithmic: { control: 'object' },
     },
@@ -63,7 +61,6 @@ const Template: StoryObj<Required<RelativeGrowthAdvantageComponentProps>> = {
                 .views=${args.views}
                 .width=${args.width}
                 .height=${args.height}
-                .headline=${args.headline}
                 .lapisDateField=${args.lapisDateField}
                 .yAxisMaxLinear=${args.yAxisMaxLinear}
                 .yAxisMaxLogarithmic=${args.yAxisMaxLogarithmic}
@@ -86,7 +83,6 @@ export const Default: StoryObj<Required<RelativeGrowthAdvantageComponentProps>>
         views: ['line'],
         width: '100%',
         height: '700px',
-        headline: 'Relative growth advantage',
         lapisDateField: 'date',
         yAxisMaxLinear: 1,
         yAxisMaxLogarithmic: 'limitTo1',

package/src/web-components/visualization/gs-relative-growth-advantage.tsx

@@ -69,12 +69,6 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     @property({ type: Array })
     views: 'line'[] = ['line'];
 
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    @property({ type: String })
-    headline: string = 'Relative growth advantage';
-
     /**
      * The width of the component.
      *
@@ -130,7 +124,6 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
                 views={this.views}
                 width={this.width}
                 height={this.height}
-                headline={this.headline}
                 lapisDateField={this.lapisDateField}
                 yAxisMaxConfig={{
                     linear: this.yAxisMaxLinear,

package/src/preact/components/headline.stories.tsx

@@ -1,47 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, within } from '@storybook/test';
-
-import Headline, { type HeadlineProps } from './headline';
-
-const meta: Meta<HeadlineProps> = {
-    title: 'Component/Headline',
-    component: Headline,
-    parameters: { fetchMock: {} },
-    argTypes: {
-        heading: { control: 'text' },
-    },
-};
-
-export default meta;
-
-export const HeadlineStory: StoryObj<HeadlineProps> = {
-    render: (args) => (
-        <Headline {...args}>
-            <div class='flex justify-center px-4 py-16 bg-base-200'>Some Content</div>
-        </Headline>
-    ),
-    args: {
-        heading: 'My Headline',
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-
-        await expect(canvas.getByText('My Headline')).toBeInTheDocument();
-        await expect(canvas.getByText('Some Content')).toBeInTheDocument();
-    },
-};
-
-export const NoHeadlineStory: StoryObj<HeadlineProps> = {
-    render: (args) => (
-        <Headline {...args}>
-            <div class='flex justify-center px-4 py-16 bg-base-200'>Some Content</div>
-        </Headline>
-    ),
-    args: {},
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-
-        await expect(canvas.queryByText('My Headline')).not.toBeInTheDocument();
-        await expect(canvas.getByText('Some Content')).toBeInTheDocument();
-    },
-};

package/src/preact/components/headline.tsx

@@ -1,36 +0,0 @@
-import { type FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-
-export interface HeadlineProps {
-    heading?: string;
-}
-
-const Headline: FunctionComponent<HeadlineProps> = ({ heading, children }) => {
-    if (!heading) {
-        return <>{children}</>;
-    }
-
-    return <ResizingHeadline heading={heading}>{children}</ResizingHeadline>;
-};
-
-const ResizingHeadline: FunctionComponent<HeadlineProps> = ({ heading, children }) => {
-    const ref = useRef<HTMLHeadingElement>(null);
-
-    const [h1Height, setH1Height] = useState('2rem');
-
-    useEffect(() => {
-        if (ref.current) {
-            const h1Height = ref.current.getBoundingClientRect().height;
-            setH1Height(`${h1Height}px`);
-        }
-    }, []);
-
-    return (
-        <div className='h-full w-full'>
-            <h1 ref={ref}>{heading}</h1>
-            <div style={{ height: `calc(100% - ${h1Height})` }}>{children}</div>
-        </div>
-    );
-};
-
-export default Headline;

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