@genspectrum/dashboard-components 0.16.0 → 0.16.2

package/custom-elements.json

@@ -1983,7 +1983,7 @@
           "type": {
             "text": "Meta<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ title: 'Visualization/Mutations over time', component: 'gs-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['grid'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, lapisDateField: { control: 'text' }, }, args: { lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, sequenceType: 'nucleotide', views: ['grid'], width: '100%', granularity: 'month', lapisDateField: 'date', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Mutations over time', component: 'gs-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['grid'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, granularity: { options: ['day', 'week', 'month', 'year'], 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' }, sequenceType: 'nucleotide', views: ['grid'], width: '100%', granularity: 'month', lapisDateField: 'date', initialMeanProportionInterval: { min: 0.05, max: 0.9 }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1993,6 +1993,14 @@
           },
           "default": "{ ...Template, }"
         },
+        {
+          "kind": "variable",
+          "name": "ByMonthWithFilterOnDisplayedMutations",
+          "type": {
+            "text": "StoryObj<Required<MutationsOverTimeProps>>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A19722G', 'G21641T', 'T21653-'], }, }"
+        },
         {
           "kind": "variable",
           "name": "ByWeek",
@@ -2043,6 +2051,14 @@
             "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "ByMonthWithFilterOnDisplayedMutations",
+          "declaration": {
+            "name": "ByMonthWithFilterOnDisplayedMutations",
+            "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "ByWeek",
@@ -2083,7 +2099,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component displays mutations (substitutions and deletions) over time for a dataset selected by a LAPIS filter.\nThe shown date range is determined by the date field in the LAPIS filter.\nIf the date field is not set, the date range is determined by all available dates in the dataset.\n\n## Views\n\n### Grid View\n\nThe grid view shows the proportion for each mutation over date ranges.\n\nThe grid limits the number of rows and columns for browser performance reasons as\ntoo much data might make the browser unresponsive.\n\nThe number of columns is limited to 200.\nIf this number are exceeded, an error message will be shown.\nIt is your responsibility to make sure that this does not happen.\nDepending on the selected date range in the `lapisFilter`, you can adapt the granularity accordingly\n(e.g. use months instead of days).\n\nThe number of rows is limited to 100.\nIf there are more, the component will only show 100 mutations and notify the user.",
+          "description": "## Context\n\nThis component displays mutations (substitutions and deletions) over time for a dataset selected by a LAPIS filter.\nThe shown date range is determined by the date field in the LAPIS filter.\nIf the date field is not set, the date range is determined by all available dates in the dataset.\n\n## Views\n\n### Grid View\n\nThe grid view shows the proportion for each mutation over date ranges.\n\nThe grid limits the number of rows and columns for browser performance reasons as\ntoo much data might make the browser unresponsive.\n\nThe number of columns is limited to 200.\nIf this number are exceeded, an error message will be shown.\nIt is your responsibility to make sure that this does not happen.\nDepending on the selected date range in the `lapisFilter`, you can adapt the granularity accordingly\n(e.g. use months instead of days).\n\nThe number of rows is limited to 100.\nIf there are more, the component will only show 100 mutations and notify the user.\n\nUsers can filter the displayed rows by mean proportion via a slider in the toolbar.\nThe mean proportion of each row is calculated by LAPIS over the whole data range that the component displays.\nThe initial mean proportion can be set via `initialMeanProportionInterval`.",
           "name": "MutationsOverTimeComponent",
           "members": [
             {
@@ -2155,6 +2171,26 @@
               "default": "'date'",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used for the columns of the grid.\nMust be a field of type `date` in LAPIS.",
               "attribute": "lapisDateField"
+            },
+            {
+              "kind": "field",
+              "name": "displayMutations",
+              "type": {
+                "text": "string[] | undefined"
+              },
+              "default": "undefined",
+              "description": "If provided, only the given mutations will be displayed.\nThe mutations must be provided in the exact format as they would be displayed by the component.",
+              "attribute": "displayMutations"
+            },
+            {
+              "kind": "field",
+              "name": "initialMeanProportionInterval",
+              "type": {
+                "text": "{ min: number; max: number }"
+              },
+              "default": "{ min: 0.05, max: 0.9 }",
+              "description": "The initial proportion interval for the grid view.\nThe values must be between 0 and 1, inclusive.",
+              "attribute": "initialMeanProportionInterval"
             }
           ],
           "attributes": [
@@ -2220,6 +2256,24 @@
               "default": "'date'",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used for the columns of the grid.\nMust be a field of type `date` in LAPIS.",
               "fieldName": "lapisDateField"
+            },
+            {
+              "name": "displayMutations",
+              "type": {
+                "text": "string[] | undefined"
+              },
+              "default": "undefined",
+              "description": "If provided, only the given mutations will be displayed.\nThe mutations must be provided in the exact format as they would be displayed by the component.",
+              "fieldName": "displayMutations"
+            },
+            {
+              "name": "initialMeanProportionInterval",
+              "type": {
+                "text": "{ min: number; max: number }"
+              },
+              "default": "{ min: 0.05, max: 0.9 }",
+              "description": "The initial proportion interval for the grid view.\nThe values must be between 0 and 1, inclusive.",
+              "fieldName": "initialMeanProportionInterval"
             }
           ],
           "superclass": {

package/dist/components.d.ts

@@ -594,6 +594,10 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
  *
  * 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`.
  */
 export declare class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
@@ -637,6 +641,19 @@ export declare class MutationsOverTimeComponent extends PreactLitAdapterWithGrid
      * Must be a field of type `date` in LAPIS.
      */
     lapisDateField: string;
+    /**
+     * 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.
+     */
+    displayMutations: string[] | undefined;
+    /**
+     * The initial proportion interval for the grid view.
+     * The values must be between 0 and 1, inclusive.
+     */
+    initialMeanProportionInterval: {
+        min: number;
+        max: number;
+    };
     render(): JSX_2.Element;
 }
 
@@ -1406,7 +1423,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1414,7 +1431,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1422,7 +1439,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1430,7 +1447,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1486,11 +1503,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1498,7 +1514,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1506,10 +1522,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1517,7 +1534,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/components.js

@@ -2,7 +2,7 @@ import { createContext, provide, consume } from "@lit/context";
 import { Task } from "@lit/task";
 import { LitElement, html, unsafeCSS } from "lit";
 import z$2 from "zod";
-import { options, createContext as createContext$1, Fragment, render, Component, createRef, createElement, toChildArray, cloneElement, hydrate } from "preact";
+import { createContext as createContext$1, options, Fragment, render, Component, createRef, createElement, toChildArray, cloneElement, hydrate } from "preact";
 import { Grid } from "gridjs";
 import { Chart, registerables, Scale, BarController } from "chart.js";
 import { VennDiagramController, ArcSlice, extractSets } from "chartjs-chart-venn";
@@ -539,6 +539,15 @@ const substitutionsOrDeletionsEndpoint = (lapisUrl, sequenceType) => {
   return sequenceType === "amino acid" ? `${lapisUrl}/sample/aminoAcidMutations` : `${lapisUrl}/sample/nucleotideMutations`;
 };
 const referenceGenomeEndpoint = (lapisUrl) => `${lapisUrl}/sample/referenceGenome`;
+const UNINITIALIZED_SEQUENCE = "__uninitialized__";
+const INITIAL_REFERENCE_GENOMES = {
+  nucleotideSequences: [{ name: UNINITIALIZED_SEQUENCE, sequence: "" }],
+  genes: []
+};
+const ReferenceGenomeContext = createContext$1(INITIAL_REFERENCE_GENOMES);
+function isNotInitialized(referenceGenome) {
+  return referenceGenome.genes.length === 0 && referenceGenome.nucleotideSequences.length === 1 && referenceGenome.nucleotideSequences[0].name === UNINITIALIZED_SEQUENCE;
+}
 var __defProp$g = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
 var __decorateClass$g = (decorators, target, key, kind) => {
@@ -554,10 +563,7 @@ let AppComponent = class extends LitElement {
   constructor() {
     super(...arguments);
     this.lapis = "";
-    this.referenceGenome = {
-      nucleotideSequences: [],
-      genes: []
-    };
+    this.referenceGenome = INITIAL_REFERENCE_GENOMES;
     this.updateReferenceGenome = new Task(this, {
       task: async () => {
         const lapisUrl = lapisUrlSchema.parse(this.lapis);
@@ -1375,7 +1381,7 @@ function componentParametersToCode(componentName, params, lapisUrl) {
     return typeof value === "object" ? JSON.stringify(value) : value;
   };
   const attributes = indentLines(
-    Object.entries(params).map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`).join("\n"),
+    Object.entries(params).filter(([_2, value]) => value !== void 0).map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`).join("\n"),
     4
   );
   return `<gs-app lapis="${lapisUrl}">
@@ -2019,14 +2025,6 @@ const ProportionSelectorDropdown = ({
     }
   ) }) });
 };
-const UNINITIALIZED_SEQUENCE = "__uninitialized__";
-const ReferenceGenomeContext = createContext$1({
-  nucleotideSequences: [{ name: UNINITIALIZED_SEQUENCE, sequence: "" }],
-  genes: []
-});
-function isNotInitialized(referenceGenome) {
-  return referenceGenome.genes.length === 0 && referenceGenome.nucleotideSequences.length === 1 && referenceGenome.nucleotideSequences[0].name === UNINITIALIZED_SEQUENCE;
-}
 const SegmentSelector = ({
   displayedSegments,
   setDisplayedSegments
@@ -5581,10 +5579,7 @@ const _PreactLitAdapter = class _PreactLitAdapter extends ReactiveElement {
   constructor() {
     super(...arguments);
     this.lapis = "";
-    this.referenceGenome = {
-      nucleotideSequences: [],
-      genes: []
-    };
+    this.referenceGenome = INITIAL_REFERENCE_GENOMES;
   }
   update(changedProperties) {
     const vdom = /* @__PURE__ */ u$1(LapisUrlContextProvider, { value: this.lapis, children: /* @__PURE__ */ u$1(ReferenceGenomeContext.Provider, { value: this.referenceGenome, children: this.render() }) });
@@ -9510,8 +9505,17 @@ class BaseMutationOverTimeDataMap extends Map2dBase {
     super(serializeSubstitutionOrDeletion, serializeTemporal, initialContent);
   }
 }
-function getFilteredMutationOverTimeData(data, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval) {
+const displayMutationsSchema = z$2.array(z$2.string()).min(1);
+function getFilteredMutationOverTimeData({
+  data,
+  overallMutationData,
+  displayedSegments,
+  displayedMutationTypes,
+  proportionInterval,
+  displayMutations
+}) {
   const filteredData = new Map2dView(data);
+  const displayMutationsSet = displayMutations === void 0 ? null : new Set(displayMutations.map((it) => it.toUpperCase()));
   const mutationsToFilterOut = overallMutationData.filter((entry) => {
     if (entry.proportion < proportionInterval.min || entry.proportion > proportionInterval.max) {
       return true;
@@ -9519,6 +9523,9 @@ function getFilteredMutationOverTimeData(data, overallMutationData, displayedSeg
     if (displayedSegments.some((segment) => segment.segment === entry.mutation.segment && !segment.checked)) {
       return true;
     }
+    if (displayMutationsSet !== null && !displayMutationsSet.has(entry.mutation.code)) {
+      return true;
+    }
     return displayedMutationTypes.some(
       (mutationType) => mutationType.type === entry.mutation.type && !mutationType.checked
     );
@@ -9641,8 +9648,7 @@ const MutationsOverTimeGrid = ({
       allMutations.length,
       " mutations. You can narrow the filter to reduce the number of mutations."
     ] }),
-    allMutations.length === 0 && /* @__PURE__ */ u$1("div", { className: "flex justify-center", children: "No data available for your filters." }),
-    /* @__PURE__ */ u$1(
+    allMutations.length === 0 ? /* @__PURE__ */ u$1("div", { className: "flex justify-center", children: "No data available for your filters." }) : /* @__PURE__ */ u$1(
       "div",
       {
         ref: gridRef,
@@ -9816,6 +9822,11 @@ const mutationOverTimeSchema = z$2.object({
   views: z$2.array(mutationsOverTimeViewSchema),
   granularity: temporalGranularitySchema,
   lapisDateField: z$2.string().min(1),
+  displayMutations: displayMutationsSchema.optional(),
+  initialMeanProportionInterval: z$2.object({
+    min: z$2.number().min(0).max(1),
+    max: z$2.number().min(0).max(1)
+  }),
   width: z$2.string(),
   height: z$2.string().optional()
 });
@@ -9866,22 +9877,31 @@ const MutationsOverTimeTabs$1 = ({
   originalComponentProps,
   overallMutationData
 }) => {
-  const [proportionInterval, setProportionInterval] = h({ min: 0.05, max: 0.9 });
+  const [proportionInterval, setProportionInterval] = h(originalComponentProps.initialMeanProportionInterval);
   const [colorScale, setColorScale] = h({ min: 0, max: 1, color: "indigo" });
   const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
   const [displayedMutationTypes, setDisplayedMutationTypes] = h([
     { label: "Substitutions", checked: true, type: "substitution" },
     { label: "Deletions", checked: true, type: "deletion" }
   ]);
+  const displayMutations = originalComponentProps.displayMutations;
   const filteredData = T$1(() => {
-    return getFilteredMutationOverTimeData(
-      mutationOverTimeData,
+    return getFilteredMutationOverTimeData({
+      data: mutationOverTimeData,
       overallMutationData,
       displayedSegments,
       displayedMutationTypes,
-      proportionInterval
-    );
-  }, [mutationOverTimeData, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval]);
+      proportionInterval,
+      displayMutations
+    });
+  }, [
+    mutationOverTimeData,
+    overallMutationData,
+    displayedSegments,
+    displayedMutationTypes,
+    proportionInterval,
+    displayMutations
+  ]);
   const getTab = (view) => {
     if (filteredData === void 0) {
       return {
@@ -10011,6 +10031,8 @@ let MutationsOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.height = void 0;
     this.granularity = "week";
     this.lapisDateField = "date";
+    this.displayMutations = void 0;
+    this.initialMeanProportionInterval = { min: 0.05, max: 0.9 };
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -10022,7 +10044,9 @@ let MutationsOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         width: this.width,
         height: this.height,
         granularity: this.granularity,
-        lapisDateField: this.lapisDateField
+        lapisDateField: this.lapisDateField,
+        displayMutations: this.displayMutations,
+        initialMeanProportionInterval: this.initialMeanProportionInterval
       }
     );
   }
@@ -10048,6 +10072,12 @@ __decorateClass$8([
 __decorateClass$8([
   n$1({ type: String })
 ], MutationsOverTimeComponent.prototype, "lapisDateField", 2);
+__decorateClass$8([
+  n$1({ type: Array })
+], MutationsOverTimeComponent.prototype, "displayMutations", 2);
+__decorateClass$8([
+  n$1({ type: Object })
+], MutationsOverTimeComponent.prototype, "initialMeanProportionInterval", 2);
 MutationsOverTimeComponent = __decorateClass$8([
   t$3("gs-mutations-over-time")
 ], MutationsOverTimeComponent);
@@ -11410,7 +11440,7 @@ const WastewaterMutationsOverTimeInner = (componentProps) => {
       componentProps.lapisFilter,
       componentProps.sequenceType
     ),
-    []
+    [componentProps.lapisFilter, componentProps.sequenceType]
   );
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -14837,8 +14867,10 @@ function DownshiftCombobox({
 }) {
   var _a;
   const initialSelectedItem = value ?? null;
-  const [items, setItems] = h(
-    allItems.filter((item) => filterItemsByInputValue(item, itemToString2(initialSelectedItem)))
+  const [itemsFilter, setItemsFilter] = h(itemToString2(initialSelectedItem));
+  const items = T$1(
+    () => allItems.filter((item) => filterItemsByInputValue(item, itemsFilter)),
+    [allItems, filterItemsByInputValue, itemsFilter]
   );
   const divRef = A$1(null);
   const shadowRoot = ((_a = divRef.current) == null ? void 0 : _a.shadowRoot) ?? void 0;
@@ -14862,7 +14894,7 @@ function DownshiftCombobox({
     closeMenu
   } = useCombobox({
     onInputValueChange({ inputValue: inputValue2 }) {
-      setItems(allItems.filter((item) => filterItemsByInputValue(item, inputValue2)));
+      setItemsFilter(inputValue2);
     },
     onSelectedItemChange({ selectedItem: selectedItem2 }) {
       var _a2;