@genspectrum/dashboard-components 0.7.0 → 0.7.2

package/dist/genspectrum-components.d.ts

@@ -1039,10 +1039,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1050,7 +1047,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1058,10 +1055,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1069,7 +1063,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1077,10 +1071,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1088,7 +1079,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1096,11 +1087,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
-        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1108,7 +1095,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1116,10 +1103,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
@@ -1127,7 +1111,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1135,7 +1119,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1143,7 +1127,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1151,7 +1135,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1159,7 +1143,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1167,7 +1151,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1175,7 +1162,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1183,7 +1170,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1191,7 +1181,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1199,7 +1189,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1207,7 +1200,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1215,7 +1208,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 
@@ -1223,7 +1220,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1231,7 +1228,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1239,7 +1239,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.7.0",
+    "version": "0.7.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -111,7 +111,7 @@
         "eslint-config-preact": "^1.3.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
-        "eslint-plugin-storybook": "^0.10.1",
+        "eslint-plugin-storybook": "^0.11.0",
         "http-server": "^14.1.1",
         "lit-analyzer": "^2.0.3",
         "msw": "^2.2.14",

package/src/operator/SlidingOperator.ts

@@ -14,6 +14,9 @@ export class SlidingOperator<Data, AggregationResult> implements Operator<Aggreg
     async evaluate(lapis: string, signal?: AbortSignal) {
         const childEvaluated = await this.child.evaluate(lapis, signal);
         const content = new Array<AggregationResult>();
+        if (childEvaluated.content.length === 0) {
+            return { content };
+        }
         const numberOfWindows = Math.max(childEvaluated.content.length - this.windowSize, 0) + 1;
         for (let i = 0; i < numberOfWindows; i++) {
             content.push(this.aggregate(childEvaluated.content.slice(i, i + this.windowSize)));

package/src/preact/aggregatedData/aggregate.tsx

@@ -9,7 +9,7 @@ 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, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
@@ -22,37 +22,29 @@ export type InitialSort = { field: string; direction: 'ascending' | 'descending'
 export type AggregateProps = {
     width: string;
     height: string;
-} & AggregateInnerProps;
-
-export interface AggregateInnerProps {
     filter: LapisFilter;
     fields: string[];
     views: View[];
     initialSortField: string;
     initialSortDirection: 'ascending' | 'descending';
     pageSize: boolean | number;
-}
+};
 
-export const Aggregate: FunctionComponent<AggregateProps> = ({ width, height, ...innerProps }) => {
+export const Aggregate: FunctionComponent<AggregateProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <AggregateInner {...innerProps} />
+                <AggregateInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const AggregateInner: FunctionComponent<AggregateInnerProps> = ({
-    fields,
-    views,
-    filter,
-    initialSortField,
-    initialSortDirection,
-    pageSize,
-}) => {
+export const AggregateInner: FunctionComponent<AggregateProps> = (componentProps) => {
+    const { fields, filter, initialSortField, initialSortDirection } = componentProps;
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
@@ -71,50 +63,66 @@ export const AggregateInner: FunctionComponent<AggregateInnerProps> = ({
         return <NoDataDisplay />;
     }
 
-    return <AggregatedDataTabs data={data} views={views} fields={fields} pageSize={pageSize} />;
+    return <AggregatedDataTabs data={data} originalComponentProps={componentProps} />;
 };
 
 type AggregatedDataTabsProps = {
     data: AggregateData;
-    fields: string[];
-    views: View[];
-    pageSize: boolean | number;
+    originalComponentProps: AggregateProps;
 };
 
-const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, views, fields, pageSize }) => {
+const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, originalComponentProps }) => {
     const getTab = (view: View) => {
         switch (view) {
             case 'table':
                 return {
                     title: 'Table',
-                    content: <AggregateTable data={data} fields={fields} pageSize={pageSize} />,
+                    content: (
+                        <AggregateTable
+                            data={data}
+                            fields={originalComponentProps.fields}
+                            pageSize={originalComponentProps.pageSize}
+                        />
+                    ),
                 };
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
 
-    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} fields={fields} />} />;
+    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} originalComponentProps={originalComponentProps} />} />;
 };
 
 type ToolbarProps = {
     data: AggregateData;
-    fields: string[];
+    originalComponentProps: AggregateProps;
 };
 
-const Toolbar: FunctionComponent<ToolbarProps> = ({ data, fields }) => {
+const Toolbar: FunctionComponent<ToolbarProps> = ({ data, originalComponentProps }) => {
     return (
         <div class='flex flex-row'>
             <CsvDownloadButton className='mx-1 btn btn-xs' getData={() => data} filename='aggregate.csv' />
-            <Info>
-                <InfoHeadline1>Aggregated data</InfoHeadline1>
-                <InfoParagraph>
-                    This table shows the number and proportion of sequences stratified by the following fields:{' '}
-                    {fields.join(', ')}. The proportion is calculated with respect to the total count within the
-                    filtered dataset.
-                </InfoParagraph>
-            </Info>
+            <AggregateInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </div>
     );
 };
+
+type AggregateInfoProps = {
+    originalComponentProps: AggregateProps;
+};
+
+const AggregateInfo: FunctionComponent<AggregateInfoProps> = ({ originalComponentProps }) => {
+    const lapis = useContext(LapisUrlContext);
+    return (
+        <Info>
+            <InfoHeadline1>Aggregated data</InfoHeadline1>
+            <InfoParagraph>
+                This table shows the number and proportion of sequences stratified by the following fields:{' '}
+                {originalComponentProps.fields.join(', ')}. The proportion is calculated with respect to the total count
+                within the filtered dataset.
+            </InfoParagraph>
+            <InfoComponentCode componentName='aggregate' params={originalComponentProps} lapisUrl={lapis} />
+        </Info>
+    );
+};

package/src/preact/components/error-display.tsx

@@ -25,6 +25,7 @@ export class UserFacingError extends Error {
 }
 
 export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) => {
+    // eslint-disable-next-line no-console -- Currently we use the following statement for our error handling
     console.error(error);
 
     const containerRef = useRef<HTMLInputElement>(null);

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

@@ -11,7 +11,7 @@ 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, { InfoComponentCode, InfoHeadline1, 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';
@@ -24,36 +24,30 @@ import { useQuery } from '../useQuery';
 
 export type View = 'table' | 'venn';
 
-export interface MutationComparisonProps extends MutationComparisonInnerProps {
+export interface MutationComparisonProps {
     width: string;
     height: string;
-}
-
-export interface MutationComparisonInnerProps {
     lapisFilters: NamedLapisFilter[];
     sequenceType: SequenceType;
     views: View[];
     pageSize: boolean | number;
 }
 
-export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({ width, height, ...innerProps }) => {
+export const MutationComparison: FunctionComponent<MutationComparisonProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <MutationComparisonInner {...innerProps} />
+                <MutationComparisonInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerProps> = ({
-    lapisFilters,
-    sequenceType,
-    views,
-    pageSize,
-}) => {
+export const MutationComparisonInner: FunctionComponent<MutationComparisonProps> = (componentProps) => {
+    const { lapisFilters, sequenceType } = componentProps;
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
@@ -72,35 +66,21 @@ export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerP
         return <NoDataDisplay />;
     }
 
-    return (
-        <MutationComparisonTabs
-            data={data.mutationData}
-            sequenceType={sequenceType}
-            views={views}
-            pageSize={pageSize}
-        />
-    );
+    return <MutationComparisonTabs data={data.mutationData} originalComponentProps={componentProps} />;
 };
 
 type MutationComparisonTabsProps = {
     data: MutationData[];
-    views: View[];
-    sequenceType: SequenceType;
-    pageSize: boolean | number;
+    originalComponentProps: MutationComparisonProps;
 };
 
-const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({
-    data,
-    views,
-    sequenceType,
-    pageSize,
-}) => {
+const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({ data, originalComponentProps }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.5, max: 1 });
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
         { label: 'Substitutions', checked: true, type: 'substitution' },
         { label: 'Deletions', checked: true, type: 'deletion' },
     ]);
-    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
 
     const filteredData = useMemo(
         () => filterMutationData(data, displayedSegments, displayedMutationTypes),
@@ -116,7 +96,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                         <MutationComparisonTable
                             data={{ content: filteredData }}
                             proportionInterval={proportionInterval}
-                            pageSize={pageSize}
+                            pageSize={originalComponentProps.pageSize}
                         />
                     ),
                 };
@@ -133,7 +113,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
 
     return (
         <Tabs
@@ -147,6 +127,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                     filteredData={filteredData}
                     proportionInterval={proportionInterval}
                     setProportionInterval={setProportionInterval}
+                    originalComponentProps={originalComponentProps}
                 />
             }
         />
@@ -161,6 +142,7 @@ type ToolbarProps = {
     filteredData: MutationData[];
     proportionInterval: ProportionInterval;
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
+    originalComponentProps: MutationComparisonProps;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -171,6 +153,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     filteredData,
     proportionInterval,
     setProportionInterval,
+    originalComponentProps,
 }) => {
     return (
         <>
@@ -189,8 +172,23 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getMutationComparisonTableData({ content: filteredData }, proportionInterval)}
                 filename='mutation_comparison.csv'
             />
-            <Info>Info for mutation comparison</Info>
+            <MutationComparisonInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
+
+type MutationComparisonInfoProps = {
+    originalComponentProps: MutationComparisonProps;
+};
+
+const MutationComparisonInfo: FunctionComponent<MutationComparisonInfoProps> = ({ originalComponentProps }) => {
+    const lapis = useContext(LapisUrlContext);
+    return (
+        <Info>
+            <InfoHeadline1>Info for mutation comparison</InfoHeadline1>
+            <InfoParagraph>TODO: https://github.com/GenSpectrum/dashboard-components/issues/465</InfoParagraph>
+            <InfoComponentCode componentName='mutation-comparison' params={originalComponentProps} lapisUrl={lapis} />
+        </Info>
+    );
+};