@genspectrum/dashboard-components 1.4.0 → 1.6.0

package/src/web-components/input/gs-text-filter.tsx

@@ -59,6 +59,13 @@ export class TextFilterComponent extends PreactLitAdapter {
     @property()
     placeholderText: string | undefined = undefined;
 
+    /**
+     * Whether to hide counts behind options in the drop down selection.
+     * Defaults to false.
+     */
+    @property({ type: Boolean })
+    hideCounts: boolean | undefined = false;
+
     /**
      * The width of the component.
      *
@@ -73,6 +80,7 @@ export class TextFilterComponent extends PreactLitAdapter {
                 lapisField={this.lapisField}
                 lapisFilter={this.lapisFilter}
                 placeholderText={this.placeholderText}
+                hideCounts={this.hideCounts}
                 value={this.value}
                 width={this.width}
             />

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

@@ -42,6 +42,7 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
         lapisDateField: { control: 'text' },
         displayMutations: { control: 'object' },
         initialMeanProportionInterval: { control: 'object' },
+        hideGaps: { control: 'boolean' },
         useNewEndpoint: { control: 'boolean' },
         pageSizes: { control: 'object' },
     },
@@ -53,6 +54,7 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
         granularity: 'month',
         lapisDateField: 'date',
         initialMeanProportionInterval: { min: 0.05, max: 0.9 },
+        hideGaps: false,
         useNewEndpoint: false,
         pageSizes: [10, 20, 30, 40, 50],
     },
@@ -100,6 +102,7 @@ const Template: StoryObj<Required<MutationsOverTimeProps>> = {
                 .lapisDateField=${args.lapisDateField}
                 .displayMutations=${args.displayMutations}
                 .initialMeanProportionInterval=${args.initialMeanProportionInterval}
+                .hideGaps=${args.hideGaps}
                 .pageSizes=${args.pageSizes}
                 .useNewEndpoint=${args.useNewEndpoint}
             ></gs-mutations-over-time>
@@ -112,7 +115,7 @@ export const ByMonth: StoryObj<Required<MutationsOverTimeProps>> = {
     ...Template,
 };
 
-// This test uses mock data: defaultMockData.ts (through mutationOverTimeWorker.mock.ts)
+// This test uses mock data: withDisplayMutations.ts (through mutationOverTimeWorker.mock.ts)
 export const ByMonthWithFilterOnDisplayedMutations: StoryObj<Required<MutationsOverTimeProps>> = {
     ...Template,
     args: {
@@ -121,6 +124,16 @@ export const ByMonthWithFilterOnDisplayedMutations: StoryObj<Required<MutationsO
     },
 };
 
+// This test uses mock data: withGaps.ts (through mutationOverTimeWorker.mock.ts)
+export const ByMonthWithFilterOnDisplayedMutationsAndGaps: StoryObj<Required<MutationsOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        displayMutations: ['A19722G', 'G21641T', 'T21652-'],
+        hideGaps: true,
+    },
+};
+
 // This test uses mock data: byWeek.ts (through mutationOverTimeWorker.mock.ts)
 export const ByWeek: StoryObj<Required<MutationsOverTimeProps>> = {
     ...Template,

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

@@ -113,6 +113,13 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
     @property({ type: Object })
     initialMeanProportionInterval: { min: number; max: number } = { min: 0.05, max: 0.9 };
 
+    /**
+     * If true, date ranges with no data will be hidden initially; if false, not.
+     * Can be switched with a button in the toolbar.
+     */
+    @property({ type: Boolean })
+    hideGaps: boolean = false;
+
     /**
      * Whether to use the mutationsOverTime endpoint from LAPIS.
      * If true, use the endpoint, if false, compute component data as before.
@@ -146,6 +153,7 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
                     lapisDateField={this.lapisDateField}
                     displayMutations={this.displayMutations}
                     initialMeanProportionInterval={this.initialMeanProportionInterval}
+                    hideGaps={this.hideGaps}
                     useNewEndpoint={this.useNewEndpoint}
                     pageSizes={this.pageSizes}
                 />