@genspectrum/dashboard-components 0.5.4 → 0.5.6

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.4",
+    "version": "0.5.6",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

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/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>