@genspectrum/dashboard-components 0.6.0 → 0.6.1

package/custom-elements.json

@@ -479,6 +479,186 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/input/gs-lineage-filter.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta<Required<LineageFilterProps>>"
+          },
+          "default": "{ title: 'Input/Lineage filter', component: 'gs-lineage-filter', parameters: withComponentDocs({ actions: { handles: ['gs-lineage-filter-changed'], }, fetchMock: { mocks: [ { matcher: { name: 'pangoLineage', url: AGGREGATED_ENDPOINT, body: { fields: ['pangoLineage'], }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), decorators: [withActions], tags: ['autodocs'], }"
+        },
+        {
+          "kind": "variable",
+          "name": "Default",
+          "type": {
+            "text": "StoryObj<Required<LineageFilterProps>>"
+          },
+          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-lineage-filter .lapisField=${args.lapisField} .placeholderText=${args.placeholderText} .initialValue=${args.initialValue} .width=${args.width} ></gs-lineage-filter> </div> </gs-app>`; }, args: { lapisField: 'pangoLineage', placeholderText: 'Enter lineage', initialValue: 'B.1.1.7', width: '100%', }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "FiresEvent",
+          "type": {
+            "text": "StoryObj<Required<LineageFilterProps>>"
+          },
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); const inputField = () => canvas.getByPlaceholderText('Enter lineage'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-lineage-filter-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid lineage value', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({ pangoLineage: undefined, }); }); await step('Enter a valid lineage value', async () => { await userEvent.type(inputField(), 'B.1.1.7'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { pangoLineage: 'B.1.1.7', }, }), ); }); await step('Enter a valid lineage value', async () => { await userEvent.type(inputField(), '{backspace>9/}'); await userEvent.type(inputField(), 'B.1.1.7*'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { pangoLineage: 'B.1.1.7*', }, }), ); }); }, args: { ...Default.args, initialValue: '', }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Default",
+          "declaration": {
+            "name": "Default",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FiresEvent",
+          "declaration": {
+            "name": "FiresEvent",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/input/gs-lineage-filter.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "\n## Context\n\nThis component provides a text input field to filter by lineages.\nCurrently, it is designed to work well with Pango Lineages,\nbut it may also be used for other lineage types, if suitable.\n\nIt fetches all available values of the `lapisField` from the LAPIS instance\nand provides an autocomplete list with the available values of the lineage and sublineage queries\n(a `*` appended to the lineage value).",
+          "name": "LineageFilterComponent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "initialValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The initial value to use for this lineage filter.",
+              "attribute": "initialValue"
+            },
+            {
+              "kind": "field",
+              "name": "lapisField",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Required.\n\nThe LAPIS field name to use for this lineage filter.\nThe field must exist on this LAPIS instance.",
+              "attribute": "lapisField"
+            },
+            {
+              "kind": "field",
+              "name": "placeholderText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The placeholder text to display in the input field.",
+              "attribute": "placeholderText"
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<Record<string, string>>"
+              },
+              "description": "Fired when the input field is changed. The `details` of this event contain an object with the `lapisField` as key and the input value as value. Example: ``` { \"pangoLineage\": \"B.1.1.7\" } ```",
+              "name": "gs-lineage-filter-changed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "initialValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The initial value to use for this lineage filter.",
+              "fieldName": "initialValue"
+            },
+            {
+              "name": "lapisField",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Required.\n\nThe LAPIS field name to use for this lineage filter.\nThe field must exist on this LAPIS instance.",
+              "fieldName": "lapisField"
+            },
+            {
+              "name": "placeholderText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The placeholder text to display in the input field.",
+              "fieldName": "placeholderText"
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "width"
+            }
+          ],
+          "superclass": {
+            "name": "PreactLitAdapter",
+            "module": "/src/web-components/PreactLitAdapter"
+          },
+          "tagName": "gs-lineage-filter",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LineageFilterComponent",
+          "declaration": {
+            "name": "LineageFilterComponent",
+            "module": "src/web-components/input/gs-lineage-filter.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "gs-lineage-filter",
+          "declaration": {
+            "name": "LineageFilterComponent",
+            "module": "src/web-components/input/gs-lineage-filter.tsx"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/input/gs-location-filter.stories.ts",
@@ -1856,7 +2036,7 @@
           "type": {
             "text": "StoryObj<NumberSequencesOverTimeProps>"
           },
-          "default": "{ ...Template, args: { ...Template.args, lapisFilter: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-10-01' }, }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', fields: ['date'], }, }, response: { status: 200, body: twoVariantsEG, }, }, { matcher: { name: 'aggregatedJN.1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: twoVariantsJN1, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-10-01' }, }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-10-01', fields: ['date'], }, }, response: { status: 200, body: twoVariantsEG, }, }, { matcher: { name: 'aggregatedJN.1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: twoVariantsJN1, }, }, ], }, }, }"
         },
         {
           "kind": "variable",

package/dist/dashboard-components.js

@@ -8318,11 +8318,7 @@ const TextInput = ({ width, ...innerProps }) => {
   const size2 = { width, height: "3rem" };
   return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(TextInputInner, { ...innerProps }) }) });
 };
-const TextInputInner = ({
-  lapisField,
-  placeholderText,
-  initialValue
-}) => {
+const TextInputInner = ({ lapisField, placeholderText, initialValue }) => {
   const lapis = x(LapisUrlContext);
   const inputRef = A(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);