@genspectrum/dashboard-components 0.13.3 → 0.13.5

package/custom-elements.json

@@ -3961,17 +3961,17 @@
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<Required<WastewaterMutationsOverTimeProps>>"
+            "text": "Meta<WastewaterMutationsOverTimeProps & { infoText: string }>"
           },
-          "default": "{ title: 'Wastewater visualization/Wastewater mutations over time', component: 'gs-wastewater-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, width: { control: 'text' }, height: { control: 'text' }, }, args: { lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false }, sequenceType: 'nucleotide', width: '100%', height: '700px', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Wastewater visualization/Wastewater mutations over time', component: 'gs-wastewater-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, width: { control: 'text' }, height: { control: 'text' }, }, args: { lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false }, sequenceType: 'nucleotide', width: '100%', height: '700px', infoText: 'Some info text', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
           "name": "WastewaterMutationsOverTime",
           "type": {
-            "text": "StoryObj<Required<WastewaterMutationsOverTimeProps>>"
+            "text": "StoryObj<WastewaterMutationsOverTimeProps & { infoText: string }>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${WISE_LAPIS_URL}\"> <gs-wastewater-mutations-over-time .lapisFilter=${args.lapisFilter} .sequenceType=${args.sequenceType} .width=${args.width} .height=${args.height} ></gs-wastewater-mutations-over-time> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'details', url: WISE_DETAILS_ENDPOINT, body: { fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'], versionStatus: 'LATEST_VERSION', isRevocation: false, }, }, response: { status: 200, body: details, }, }, ], }, }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${WISE_LAPIS_URL}\"> <gs-wastewater-mutations-over-time .lapisFilter=${args.lapisFilter} .sequenceType=${args.sequenceType} .width=${args.width} .height=${args.height} > <span slot=\"infoText\">${args.infoText}</span> </gs-wastewater-mutations-over-time> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'details', url: WISE_DETAILS_ENDPOINT, body: { fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'], versionStatus: 'LATEST_VERSION', isRevocation: false, }, }, response: { status: 200, body: details, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -4001,6 +4001,12 @@
           "kind": "class",
           "description": "## Context\n\nThis component displays mutations for Swiss wastewater data generated within the WISE consortium. It is designed\nonly for this purpose and is not designed to be reused outside the WISE project.\n\nIt relies on a LAPIS instance that has the fields `nucleotideMutationFrequency` and `aminoAcidMutationFrequency`.\nThose fields are expected to be JSON strings of the format `{ [mutation]: frequency | null }`\n(e.g. `{ \"A123T\": 0.5, \"C456G\": 0.7, \"T789G\": null }`).\n\nThe component will stratify by `location`.\nEvery location will be rendered in a separate tab.\nThe content of the tab is a \"mutations over time\" grid, similar to the one used in the `gs-mutations-over-time` component.\n\nThis component also assumes that the LAPIS instance has the field `date` which can be used for the time axis.",
           "name": "WastewaterMutationsOverTimeComponent",
+          "slots": [
+            {
+              "description": "Additional information text to be shown in the info modal (the \"?\" button).",
+              "name": "infoText"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -4041,6 +4047,16 @@
               "default": "'700px'",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
+            },
+            {
+              "kind": "field",
+              "name": "maxNumberOfGridRows",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "The maximum number of grid rows to display.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "maxNumberOfGridRows"
             }
           ],
           "attributes": [
@@ -4079,6 +4095,15 @@
               "default": "'700px'",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
+            },
+            {
+              "name": "maxNumberOfGridRows",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "The maximum number of grid rows to display.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "maxNumberOfGridRows"
             }
           ],
           "superclass": {

package/dist/components.d.ts

@@ -1284,6 +1284,8 @@ export declare class UserFacingError extends Error {
  * The content of the tab is a "mutations over time" grid, similar to the one used in the `gs-mutations-over-time` component.
  *
  * This component also assumes that the LAPIS instance has the field `date` which can be used for the time axis.
+ *
+ * @slot infoText - Additional information text to be shown in the info modal (the "?" button).
  */
 export declare class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
@@ -1315,6 +1317,12 @@ export declare class WastewaterMutationsOverTimeComponent extends PreactLitAdapt
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
+    /**
+     * The maximum number of grid rows to display.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     */
+    maxNumberOfGridRows: number;
     render(): JSX_2.Element;
 }
 
@@ -1362,7 +1370,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1370,7 +1378,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1378,7 +1386,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1386,7 +1394,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1526,10 +1534,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1537,7 +1545,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1545,10 +1553,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1556,7 +1564,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1564,10 +1572,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1575,7 +1583,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1583,10 +1591,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1594,7 +1602,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/components.js

@@ -9472,15 +9472,20 @@ const Tooltip = ({ children, content, position = "bottom" }) => {
 };
 const MAX_NUMBER_OF_GRID_ROWS = 100;
 const MUTATION_CELL_WIDTH_REM = 8;
-const MutationsOverTimeGrid = ({ data, colorScale }) => {
+const MutationsOverTimeGrid = ({
+  data,
+  colorScale,
+  maxNumberOfGridRows
+}) => {
+  const currentMaxNumberOfGridRows = maxNumberOfGridRows ?? MAX_NUMBER_OF_GRID_ROWS;
   const allMutations = data.getFirstAxisKeys();
-  const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
+  const shownMutations = allMutations.slice(0, currentMaxNumberOfGridRows);
   const dates = data.getSecondAxisKeys();
   const gridRef = A$1(null);
   return /* @__PURE__ */ u$1(Fragment, { children: [
-    allMutations.length > MAX_NUMBER_OF_GRID_ROWS && /* @__PURE__ */ u$1("div", { className: "pl-2", children: [
+    allMutations.length > currentMaxNumberOfGridRows && /* @__PURE__ */ u$1("div", { className: "pl-2", children: [
       "Showing ",
-      MAX_NUMBER_OF_GRID_ROWS,
+      currentMaxNumberOfGridRows,
       " of ",
       allMutations.length,
       " mutations. You can narrow the filter to reduce the number of mutations."
@@ -11186,7 +11191,8 @@ const wastewaterMutationOverTimeSchema = z$2.object({
   lapisFilter: lapisFilterSchema,
   sequenceType: sequenceTypeSchema,
   width: z$2.string(),
-  height: z$2.string()
+  height: z$2.string(),
+  maxNumberOfGridRows: z$2.number().optional()
 });
 const WastewaterMutationsOverTime = (componentProps) => {
   const { width, height } = componentProps;
@@ -11220,18 +11226,20 @@ const WastewaterMutationsOverTimeInner = (componentProps) => {
     MutationsOverTimeTabs,
     {
       mutationOverTimeDataPerLocation,
-      originalComponentProps: componentProps
+      originalComponentProps: componentProps,
+      maxNumberOfGridRows: componentProps.maxNumberOfGridRows
     }
   );
 };
 const MutationsOverTimeTabs = ({
   mutationOverTimeDataPerLocation,
-  originalComponentProps
+  originalComponentProps,
+  maxNumberOfGridRows
 }) => {
   const [colorScale, setColorScale] = h({ min: 0, max: 1, color: "indigo" });
   const tabs = mutationOverTimeDataPerLocation.map(({ location, data }) => ({
     title: location,
-    content: /* @__PURE__ */ u$1(MutationsOverTimeGrid, { data, colorScale })
+    content: /* @__PURE__ */ u$1(MutationsOverTimeGrid, { data, colorScale, maxNumberOfGridRows })
   }));
   const toolbar = /* @__PURE__ */ u$1(
     Toolbar,
@@ -11257,7 +11265,7 @@ const WastewaterMutationsOverTimeInfo = ({
   const lapis = x$1(LapisUrlContext);
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Info for mutations over time" }),
-    /* @__PURE__ */ u$1(InfoParagraph, { children: " " }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: /* @__PURE__ */ u$1("slot", { name: "infoText" }) }),
     /* @__PURE__ */ u$1(
       InfoComponentCode,
       {
@@ -11285,6 +11293,7 @@ let WastewaterMutationsOverTimeComponent = class extends PreactLitAdapterWithGri
     this.sequenceType = "nucleotide";
     this.width = "100%";
     this.height = "700px";
+    this.maxNumberOfGridRows = 100;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -11293,7 +11302,8 @@ let WastewaterMutationsOverTimeComponent = class extends PreactLitAdapterWithGri
         lapisFilter: this.lapisFilter,
         sequenceType: this.sequenceType,
         width: this.width,
-        height: this.height
+        height: this.height,
+        maxNumberOfGridRows: this.maxNumberOfGridRows
       }
     );
   }
@@ -11310,6 +11320,9 @@ __decorateClass$5([
 __decorateClass$5([
   n$1({ type: String })
 ], WastewaterMutationsOverTimeComponent.prototype, "height", 2);
+__decorateClass$5([
+  n$1({ type: Number })
+], WastewaterMutationsOverTimeComponent.prototype, "maxNumberOfGridRows", 2);
 WastewaterMutationsOverTimeComponent = __decorateClass$5([
   t$3("gs-wastewater-mutations-over-time")
 ], WastewaterMutationsOverTimeComponent);