@genspectrum/dashboard-components 0.13.5 → 0.13.7

package/custom-elements.json

@@ -62,7 +62,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/app.stories.ts",
+      "path": "src/web-components/errorHandling.mdx",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/gs-app.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -140,7 +146,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/app.stories.ts"
+            "module": "src/web-components/gs-app.stories.ts"
           }
         },
         {
@@ -148,7 +154,7 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/web-components/app.stories.ts"
+            "module": "src/web-components/gs-app.stories.ts"
           }
         },
         {
@@ -156,7 +162,7 @@
           "name": "WithNoLapisUrl",
           "declaration": {
             "name": "WithNoLapisUrl",
-            "module": "src/web-components/app.stories.ts"
+            "module": "src/web-components/gs-app.stories.ts"
           }
         },
         {
@@ -164,7 +170,7 @@
           "name": "DelayFetchingReferenceGenome",
           "declaration": {
             "name": "DelayFetchingReferenceGenome",
-            "module": "src/web-components/app.stories.ts"
+            "module": "src/web-components/gs-app.stories.ts"
           }
         },
         {
@@ -172,7 +178,7 @@
           "name": "FailsToFetchReferenceGenome",
           "declaration": {
             "name": "FailsToFetchReferenceGenome",
-            "module": "src/web-components/app.stories.ts"
+            "module": "src/web-components/gs-app.stories.ts"
           }
         },
         {
@@ -180,19 +186,19 @@
           "name": "gs-app-display",
           "declaration": {
             "name": "AppDisplay",
-            "module": "src/web-components/app.stories.ts"
+            "module": "src/web-components/gs-app.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/app.ts",
+      "path": "src/web-components/gs-app.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "## Context\n\nThis component provides the main application context.\nAll other `gs-*` components must be (possibly nested) children of this component.\nIt makes use of the [Lit Context](https://lit.dev/docs/data/context/) to\n- provide the URL to the LAPIS instance to all its children\n- fetch the reference genomes from LAPIS and provide it to all its children\n\nThis will show an error message if the reference genome cannot be fetched\n(e.g., due to an invalid LAPIS URL).\n\n## Shadow DOM\n\nThis component does __not__ use a shadow DOM. Children of this component will be rendered directly in the light DOM.",
-          "name": "App",
+          "name": "AppComponent",
           "members": [
             {
               "kind": "field",
@@ -227,28 +233,22 @@
       "exports": [
         {
           "kind": "js",
-          "name": "App",
+          "name": "AppComponent",
           "declaration": {
-            "name": "App",
-            "module": "src/web-components/app.ts"
+            "name": "AppComponent",
+            "module": "src/web-components/gs-app.ts"
           }
         },
         {
           "kind": "custom-element-definition",
           "name": "gs-app",
           "declaration": {
-            "name": "App",
-            "module": "src/web-components/app.ts"
+            "name": "AppComponent",
+            "module": "src/web-components/gs-app.ts"
           }
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/web-components/errorHandling.mdx",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/index.ts",
@@ -256,10 +256,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "App",
+          "name": "AppComponent",
           "declaration": {
-            "name": "App",
-            "module": "./app.js"
+            "name": "AppComponent",
+            "module": "./gs-app"
           }
         },
         {
@@ -805,7 +805,7 @@
           "type": {
             "text": "StoryObj<LocationFilterProps>"
           },
-          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>18/}'); await userEvent.click(canvas.getByLabelText('toggle menu')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: undefined, country: undefined, division: undefined, location: undefined, }); }); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await userEvent.click(canvas.getByRole('option', { name: 'Asia Asia' })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: 'Asia', country: undefined, division: undefined, location: undefined, }); }); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await userEvent.click(canvas.getByText('Asia / Bangladesh / Rajshahi / Chapainawabgonj')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }); }); }); }, }"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>18/}'); await userEvent.click(canvas.getByLabelText('toggle menu')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: undefined, country: undefined, division: undefined, location: undefined, }); }); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await userEvent.click(canvas.getByRole('option', { name: /^Asia.*Asia$/ })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: 'Asia', country: undefined, division: undefined, location: undefined, }); }); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await userEvent.click(canvas.getByText('Asia / Bangladesh / Rajshahi / Chapainawabgonj')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }); }); }); }, }"
         }
       ],
       "exports": [
@@ -1028,7 +1028,7 @@
           "type": {
             "text": "StoryObj<MutationFilterProps>"
           },
-          "default": "{ ...Template, args: { ...Template.args, initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); await waitFor(() => { const placeholderText = inputField().getAttribute('placeholder'); expect(placeholderText).toEqual( 'Enter a mutation (e.g. seg1:A123T, ins_seg1:123:AT, gene1:M123E, ins_gene1:123:ME)', ); }); await waitFor(() => { expect(canvas.getByText('seg1:123T')).toBeVisible(); expect(canvas.getByText('gene2:56')).toBeVisible(); return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible(); }); }, }"
+          "default": "{ ...Template, args: { ...Template.args, initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); await waitFor(() => { const placeholderText = inputField().getAttribute('placeholder'); expect(placeholderText).toEqual( 'Enter a mutation (e.g. seg1:23T, ins_seg1:10462:A, gene1:57Q, ins_gene1:31:N)', ); }); await waitFor(() => { expect(canvas.getByText('seg1:123T')).toBeVisible(); expect(canvas.getByText('gene2:56')).toBeVisible(); return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible(); }); }, }"
         }
       ],
       "exports": [
@@ -3963,7 +3963,7 @@
           "type": {
             "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', infoText: 'Some info text', }, 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', maxNumberOfGridRows: 100, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -3971,7 +3971,7 @@
           "type": {
             "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} > <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, }, }, ], }, }, }"
+          "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} .maxNumberOfGridRows=${args.maxNumberOfGridRows} > <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": [
@@ -4055,7 +4055,7 @@
                 "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.",
+              "description": "The maximum number of grid rows to display.",
               "attribute": "maxNumberOfGridRows"
             }
           ],
@@ -4102,7 +4102,7 @@
                 "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.",
+              "description": "The maximum number of grid rows to display.",
               "fieldName": "maxNumberOfGridRows"
             }
           ],

package/dist/components.d.ts

@@ -109,7 +109,7 @@ declare const aggregateViewSchema: default_2.ZodUnion<[default_2.ZodLiteral<"tab
  *
  * This component does __not__ use a shadow DOM. Children of this component will be rendered directly in the light DOM.
  */
-export declare class App extends LitElement {
+export declare class AppComponent extends LitElement {
     /**
      * Required.
      *
@@ -1319,8 +1319,6 @@ export declare class WastewaterMutationsOverTimeComponent extends PreactLitAdapt
     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;
@@ -1338,7 +1336,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-app': App;
+        'gs-app': AppComponent;
     }
 }
 
@@ -1466,7 +1464,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1474,7 +1472,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1482,7 +1480,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1490,7 +1488,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1534,10 +1532,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1545,7 +1543,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1553,10 +1551,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1564,7 +1562,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1572,10 +1570,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1583,7 +1581,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }