@genspectrum/dashboard-components 0.5.3 → 0.5.4

package/custom-elements.json

@@ -726,6 +726,14 @@
             "text": "StoryObj<MutationFilterProps>"
           },
           "default": "{ ...Template, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-mutation-filter-on-blur', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Move outside of input', async () => { await userEvent.type(inputField(), 'A123T'); await userEvent.tab(); await expect(listenerMock).toHaveBeenCalled(); }); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MultiSegmentedReferenceGenomes",
+          "type": {
+            "text": "StoryObj<MutationFilterProps>"
+          },
+          "default": "{ ...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'); await waitFor(() => { expect(canvas.getByText('seg1:123T')).toBeVisible(); expect(canvas.getByText('gene2:56')).toBeVisible(); return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible(); }); }, }"
         }
       ],
       "exports": [
@@ -760,6 +768,14 @@
             "name": "FiresFilterOnBlurEvent",
             "module": "src/web-components/input/gs-mutation-filter.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "MultiSegmentedReferenceGenomes",
+          "declaration": {
+            "name": "MultiSegmentedReferenceGenomes",
+            "module": "src/web-components/input/gs-mutation-filter.stories.ts"
+          }
         }
       ]
     },

package/dist/dashboard-components.js

@@ -347,6 +347,7 @@ const getSegmentNames = (referenceGenome, sequenceType) => {
     }
   }
 };
+const isSingleSegmented = (referenceGenome) => referenceGenome.nucleotideSequences.length === 1;
 const orderByType = z$1.enum(["ascending", "descending"]);
 const orderBy = z$1.object({
   field: z$1.string(),
@@ -8266,9 +8267,221 @@ const ReferenceGenomesAwaiter = ({ children }) => {
 function isNotInitialized(referenceGenome) {
   return referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0;
 }
+const MutationFilterInfo = () => {
+  const referenceGenome = x(ReferenceGenomeContext);
+  const firstGene = referenceGenome.genes[0].name;
+  return /* @__PURE__ */ u$1(Info, { height: "80vh", children: [
+    /* @__PURE__ */ u$1(InfoHeadline1, { children: " Mutation Filter" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: "This component allows you to filter for mutations at specific positions." }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: " Nucleotide Mutations and Insertions" }),
+    isSingleSegmented(referenceGenome) ? /* @__PURE__ */ u$1(SingleSegmentedNucleotideMutationsInfo, {}) : /* @__PURE__ */ u$1(MultiSegmentedNucleotideMutationsInfo, {}),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Amino Acid Mutations and Insertions" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "An amino acid mutation has the format ",
+      /* @__PURE__ */ u$1("b", { children: "<gene>:<position><base>" }),
+      " or",
+      /* @__PURE__ */ u$1("b", { children: "<gene>:<base_ref><position><base>" }),
+      ". A ",
+      /* @__PURE__ */ u$1("b", { children: "<base>" }),
+      " can be one of the 20 amino acid codes. It can also be ",
+      /* @__PURE__ */ u$1("b", { children: "-" }),
+      " for deletion and ",
+      /* @__PURE__ */ u$1("b", { children: "X" }),
+      " for unknown. Example:",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "E:57Q" }),
+      "."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "Insertions can be searched for in the same manner, they just need to have ",
+      /* @__PURE__ */ u$1("b", { children: "ins_" }),
+      " appended to the start of the mutation. Example: ",
+      /* @__PURE__ */ u$1("b", { children: [
+        "ins_",
+        firstGene,
+        ":31:N"
+      ] }),
+      " would filter for sequences with an insertion of N between positions 31 and 32 in the gene ",
+      firstGene,
+      "."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This organism has the following genes: ",
+      referenceGenome.genes.map((gene) => gene.name).join(", "),
+      "."
+    ] }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Insertion Wildcards" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This component supports insertion queries that contain wildcards ",
+      /* @__PURE__ */ u$1("b", { children: "?" }),
+      ". For example",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: [
+        "ins_",
+        firstGene,
+        ":214:?EP?"
+      ] }),
+      " will match all cases where segment ",
+      /* @__PURE__ */ u$1("b", { children: firstGene }),
+      " has an insertion of ",
+      /* @__PURE__ */ u$1("b", { children: "EP" }),
+      " between the positions ",
+      /* @__PURE__ */ u$1("b", { children: "214" }),
+      " and ",
+      /* @__PURE__ */ u$1("b", { children: "215" }),
+      " but also an insertion of other amino acids which include the ",
+      /* @__PURE__ */ u$1("b", { children: "EP" }),
+      ", e.g. the insertion ",
+      /* @__PURE__ */ u$1("b", { children: "EPE" }),
+      " will be matched."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "You can also use wildcards to match any insertion at a given position. For example",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: [
+        "ins_",
+        firstGene,
+        ":214:?"
+      ] }),
+      " match any (but at least one) insertion between the positions 214 and 215."
+    ] }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Multiple Mutations" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: "Multiple mutation filters can be provided by adding one mutation after the other." }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Any Mutation" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "To filter for any mutation at a given position you can omit the ",
+      /* @__PURE__ */ u$1("b", { children: "<base>" }),
+      ". Example:",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: [
+        firstGene,
+        ":20"
+      ] }),
+      "."
+    ] }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "No Mutation" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "You can write a ",
+      /* @__PURE__ */ u$1("b", { children: "." }),
+      " for the ",
+      /* @__PURE__ */ u$1("b", { children: "<base>" }),
+      " to filter for sequences for which it is confirmed that no mutation occurred, i.e. has the same base as the reference genome at the specified position."
+    ] })
+  ] });
+};
+const SingleSegmentedNucleotideMutationsInfo = () => {
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This organism is single-segmented. Thus, nucleotide mutations have the format",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "<position><base>" }),
+      " or ",
+      /* @__PURE__ */ u$1("b", { children: "<base_ref><position><base>" }),
+      ". The",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "<base_ref>" }),
+      " is the reference base at the position. It is optional. A ",
+      /* @__PURE__ */ u$1("b", { children: "<base>" }),
+      " can be one of the four nucleotides ",
+      /* @__PURE__ */ u$1("b", { children: "A" }),
+      ", ",
+      /* @__PURE__ */ u$1("b", { children: "T" }),
+      ", ",
+      /* @__PURE__ */ u$1("b", { children: "C" }),
+      ", and ",
+      /* @__PURE__ */ u$1("b", { children: "G" }),
+      ". It can also be ",
+      /* @__PURE__ */ u$1("b", { children: "-" }),
+      " for deletion and ",
+      /* @__PURE__ */ u$1("b", { children: "N" }),
+      " for unknown. For example if the reference sequence is ",
+      /* @__PURE__ */ u$1("b", { children: "A" }),
+      " at position",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "23" }),
+      " both: ",
+      /* @__PURE__ */ u$1("b", { children: "23T" }),
+      " and ",
+      /* @__PURE__ */ u$1("b", { children: "A23T" }),
+      " will yield the same results."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "Insertions can be searched for in the same manner, they just need to have ",
+      /* @__PURE__ */ u$1("b", { children: "ins_" }),
+      " appended to the start of the mutation. Example: ",
+      /* @__PURE__ */ u$1("b", { children: "ins_1046:A" }),
+      " would filter for sequences with an insertion of A between the positions 1046 and 1047 in the nucleotide sequence."
+    ] })
+  ] });
+};
+const MultiSegmentedNucleotideMutationsInfo = () => {
+  const referenceGenome = x(ReferenceGenomeContext);
+  const firstSegment = referenceGenome.nucleotideSequences[0].name;
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This organism is multi-segmented. Thus, nucleotide mutations have the format",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "<segment>:<position><base>" }),
+      " or",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "<segment>:<base_ref><position><base>" }),
+      ". ",
+      /* @__PURE__ */ u$1("b", { children: "<base_ref>" }),
+      " is the reference base at the position. It is optional. A ",
+      /* @__PURE__ */ u$1("b", { children: "<base>" }),
+      " can be one of the four nucleotides",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "A" }),
+      ", ",
+      /* @__PURE__ */ u$1("b", { children: "T" }),
+      ", ",
+      /* @__PURE__ */ u$1("b", { children: "C" }),
+      ", and ",
+      /* @__PURE__ */ u$1("b", { children: "G" }),
+      ". It can also be ",
+      /* @__PURE__ */ u$1("b", { children: "-" }),
+      " for deletion and ",
+      /* @__PURE__ */ u$1("b", { children: "N" }),
+      " for unknown. For example if the reference sequence is ",
+      /* @__PURE__ */ u$1("b", { children: "A" }),
+      " at position ",
+      /* @__PURE__ */ u$1("b", { children: "23" }),
+      " both:",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: [
+        firstSegment,
+        ":23T"
+      ] }),
+      " and ",
+      /* @__PURE__ */ u$1("b", { children: [
+        firstSegment,
+        ":A23T"
+      ] }),
+      " will yield the same results."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "Insertions can be searched for in the same manner, they just need to have ",
+      /* @__PURE__ */ u$1("b", { children: "ins_" }),
+      " appended to the start of the mutation. Example: ",
+      /* @__PURE__ */ u$1("b", { children: [
+        "ins_",
+        firstSegment,
+        ":10462:A"
+      ] }),
+      "."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This organism has the following segments:",
+      " ",
+      referenceGenome.nucleotideSequences.map((gene) => gene.name).join(", "),
+      "."
+    ] }),
+    " "
+  ] });
+};
 const sequenceTypeFromSegment = (possibleSegment, referenceGenome) => {
   if (possibleSegment === void 0) {
-    return referenceGenome.nucleotideSequences.length === 1 ? "nucleotide" : void 0;
+    return isSingleSegmented(referenceGenome) ? "nucleotide" : void 0;
   }
   if (referenceGenome.nucleotideSequences.some((sequence) => sequence.name === possibleSegment)) {
     return "nucleotide";
@@ -8388,7 +8601,7 @@ const MutationFilterInner = ({ initialValue }) => {
     setIsError(false);
   };
   return /* @__PURE__ */ u$1("form", { className: "w-full border boder-gray-300 rounded-md relative", onSubmit: handleSubmit, ref: formRef, children: [
-    /* @__PURE__ */ u$1("div", { className: "absolute -top-3 -right-3", children: /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for mutation filter" }) }),
+    /* @__PURE__ */ u$1("div", { className: "absolute -top-3 -right-3", children: /* @__PURE__ */ u$1(MutationFilterInfo, {}) }),
     /* @__PURE__ */ u$1("div", { className: "w-full flex p-2 flex-wrap items-center", children: [
       /* @__PURE__ */ u$1(
         SelectedMutationDisplay,