@genspectrum/dashboard-components 0.16.0 → 0.16.2

package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx

@@ -57,7 +57,7 @@ export const WastewaterMutationsOverTimeInner: FunctionComponent<WastewaterMutat
                 componentProps.lapisFilter,
                 componentProps.sequenceType,
             ),
-        [],
+        [componentProps.lapisFilter, componentProps.sequenceType],
     );
 
     if (isLoading) {

package/src/web-components/PreactLitAdapter.tsx

@@ -8,7 +8,7 @@ import { lapisContext } from './lapis-context';
 import { referenceGenomeContext } from './reference-genome-context';
 import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 import { LapisUrlContextProvider } from '../preact/LapisUrlContext';
-import { ReferenceGenomeContext } from '../preact/ReferenceGenomeContext';
+import { INITIAL_REFERENCE_GENOMES, ReferenceGenomeContext } from '../preact/ReferenceGenomeContext';
 import minMaxPercentSliderCss from '../preact/components/min-max-percent-slider.css?inline';
 import tailwindStyle from '../styles/tailwind.css?inline';
 
@@ -40,10 +40,7 @@ export abstract class PreactLitAdapter extends ReactiveElement {
      * This value will automatically be injected by the parent `gs-app` component.
      */
     @consume({ context: referenceGenomeContext, subscribe: true })
-    referenceGenome: ReferenceGenome = {
-        nucleotideSequences: [],
-        genes: [],
-    };
+    referenceGenome: ReferenceGenome = INITIAL_REFERENCE_GENOMES;
 
     override update(changedProperties: PropertyValues) {
         const vdom = (

package/src/web-components/gs-app.ts

@@ -9,6 +9,7 @@ import { lapisContext } from './lapis-context';
 import { referenceGenomeContext } from './reference-genome-context';
 import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 import { fetchReferenceGenome } from '../lapisApi/lapisApi';
+import { INITIAL_REFERENCE_GENOMES } from '../preact/ReferenceGenomeContext';
 
 const lapisUrlSchema = z.string().url();
 
@@ -43,10 +44,7 @@ export class AppComponent extends LitElement {
      * @internal
      */
     @provide({ context: referenceGenomeContext })
-    referenceGenome: ReferenceGenome = {
-        nucleotideSequences: [],
-        genes: [],
-    };
+    referenceGenome: ReferenceGenome = INITIAL_REFERENCE_GENOMES;
 
     /**
      * @internal

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

@@ -16,6 +16,7 @@ const codeExample = String.raw`
     height='700px'
     granularity="month"
     lapisDateField="date"
+    displayMutations='["A23403G","C241T"]'
 ></gs-mutations-over-time>`;
 
 const meta: Meta<Required<MutationsOverTimeProps>> = {
@@ -38,6 +39,8 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
             control: { type: 'radio' },
         },
         lapisDateField: { control: 'text' },
+        displayMutations: { control: 'object' },
+        initialMeanProportionInterval: { control: 'object' },
     },
     args: {
         lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
@@ -46,6 +49,7 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
         width: '100%',
         granularity: 'month',
         lapisDateField: 'date',
+        initialMeanProportionInterval: { min: 0.05, max: 0.9 },
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -71,6 +75,8 @@ const Template: StoryObj<Required<MutationsOverTimeProps>> = {
                 .height=${args.height}
                 .granularity=${args.granularity}
                 .lapisDateField=${args.lapisDateField}
+                .displayMutations=${args.displayMutations}
+                .initialMeanProportionInterval=${args.initialMeanProportionInterval}
             ></gs-mutations-over-time>
         </gs-app>
     `,
@@ -81,6 +87,15 @@ export const ByMonth: StoryObj<Required<MutationsOverTimeProps>> = {
     ...Template,
 };
 
+// This test uses mock data: defaultMockData.ts (through mutationOverTimeWorker.mock.ts)
+export const ByMonthWithFilterOnDisplayedMutations: StoryObj<Required<MutationsOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        displayMutations: ['A19722G', 'G21641T', 'T21653-'],
+    },
+};
+
 // 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

@@ -29,6 +29,10 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  *
  * The number of rows is limited to 100.
  * If there are more, the component will only show 100 mutations and notify the user.
+ *
+ * Users can filter the displayed rows by mean proportion via a slider in the toolbar.
+ * The mean proportion of each row is calculated by LAPIS over the whole data range that the component displays.
+ * The initial mean proportion can be set via `initialMeanProportionInterval`.
  */
 @customElement('gs-mutations-over-time')
 export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
@@ -87,6 +91,20 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
     @property({ type: String })
     lapisDateField: string = 'date';
 
+    /**
+     * If provided, only the given mutations will be displayed.
+     * The mutations must be provided in the exact format as they would be displayed by the component.
+     */
+    @property({ type: Array })
+    displayMutations: string[] | undefined = undefined;
+
+    /**
+     * The initial proportion interval for the grid view.
+     * The values must be between 0 and 1, inclusive.
+     */
+    @property({ type: Object })
+    initialMeanProportionInterval: { min: number; max: number } = { min: 0.05, max: 0.9 };
+
     override render() {
         return (
             <MutationsOverTime
@@ -97,6 +115,8 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
                 height={this.height}
                 granularity={this.granularity}
                 lapisDateField={this.lapisDateField}
+                displayMutations={this.displayMutations}
+                initialMeanProportionInterval={this.initialMeanProportionInterval}
             />
         );
     }
@@ -135,4 +155,13 @@ type GranularityMatches = Expect<
 type LapisDateFieldMatches = Expect<
     Equals<typeof MutationsOverTimeComponent.prototype.lapisDateField, MutationsOverTimeProps['lapisDateField']>
 >;
+type DisplayMutationsMatches = Expect<
+    Equals<typeof MutationsOverTimeComponent.prototype.displayMutations, MutationsOverTimeProps['displayMutations']>
+>;
+type InitialMeanProportionIntervalMatches = Expect<
+    Equals<
+        typeof MutationsOverTimeComponent.prototype.initialMeanProportionInterval,
+        MutationsOverTimeProps['initialMeanProportionInterval']
+    >
+>;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */