feat(components): gs-wastewater-mutations-over-time - add infoText sl…

…ot in info box (#686)
GenSpectrum · Jan 24, 2025 · cb8aafa · cb8aafa
1 parent 40b6262
commit cb8aafa
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx b/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx
@@ -140,7 +140,9 @@ const WastewaterMutationsOverTimeInfo: FunctionComponent<WastewaterMutationsOver
     return (
         <Info>
             <InfoHeadline1>Info for mutations over time</InfoHeadline1>
-            <InfoParagraph> </InfoParagraph>
+            <InfoParagraph>
+                <slot name='infoText' />
+            </InfoParagraph>
             <InfoComponentCode
                 componentName='wastewater-mutations-over-time'
                 params={originalComponentProps}

diff --git a/...s/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts b/...s/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts
@@ -14,9 +14,11 @@ const codeExample = String.raw`
     sequenceType='nucleotide'
     width='100%'
     height='700px'
-></gs-wastewater-mutations-over-time>`;
+>
+    <span slot="infoText">Some info text</span>
+</gs-wastewater-mutations-over-time>`;
 
-const meta: Meta<Required<WastewaterMutationsOverTimeProps>> = {
+const meta: Meta<WastewaterMutationsOverTimeProps & { infoText: string }> = {
     title: 'Wastewater visualization/Wastewater mutations over time',
     component: 'gs-wastewater-mutations-over-time',
     argTypes: {
@@ -33,6 +35,7 @@ const meta: Meta<Required<WastewaterMutationsOverTimeProps>> = {
         sequenceType: 'nucleotide',
         width: '100%',
         height: '700px',
+        infoText: 'Some info text',
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -47,15 +50,17 @@ const meta: Meta<Required<WastewaterMutationsOverTimeProps>> = {
 
 export default meta;
 
-export const WastewaterMutationsOverTime: StoryObj<Required<WastewaterMutationsOverTimeProps>> = {
+export const WastewaterMutationsOverTime: StoryObj<WastewaterMutationsOverTimeProps & { infoText: string }> = {
     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>
+            >
+                <span slot="infoText">${args.infoText}</span>
+            </gs-wastewater-mutations-over-time>
         </gs-app>
     `,
     parameters: {

diff --git a/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx b/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx
@@ -23,6 +23,8 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  * 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).
  */
 @customElement('gs-wastewater-mutations-over-time')
 export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {