@genspectrum/dashboard-components 0.13.6 → 0.13.7

package/dist/components.js

@@ -550,7 +550,7 @@ var __decorateClass$g = (decorators, target, key, kind) => {
   return result;
 };
 const lapisUrlSchema = z$2.string().url();
-let App = class extends LitElement {
+let AppComponent = class extends LitElement {
   constructor() {
     super(...arguments);
     this.lapis = "";
@@ -585,13 +585,13 @@ let App = class extends LitElement {
 __decorateClass$g([
   provide({ context: lapisContext }),
   n$1()
-], App.prototype, "lapis", 2);
+], AppComponent.prototype, "lapis", 2);
 __decorateClass$g([
   provide({ context: referenceGenomeContext })
-], App.prototype, "referenceGenome", 2);
-App = __decorateClass$g([
+], AppComponent.prototype, "referenceGenome", 2);
+AppComponent = __decorateClass$g([
   t$3("gs-app")
-], App);
+], AppComponent);
 function GsAppError(error) {
   return html` <div class="m-2 w-full alert alert-error">Error: ${error}</div>`;
 }
@@ -2041,13 +2041,13 @@ function useDisplayedSegments(sequenceType) {
   return h(displayedSegments);
 }
 const Tabs = ({ tabs, toolbar }) => {
-  var _a, _b;
+  var _a;
   const [activeTab, setActiveTab] = h((_a = tabs[0]) == null ? void 0 : _a.title);
   const tabElements = /* @__PURE__ */ u$1("div", { className: "flex flex-row flex-wrap", children: tabs.map((tab) => {
     return /* @__PURE__ */ u$1(
       "button",
       {
-        className: `px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 ${activeTab === tab.title ? "border-b-2 border-gray-400" : "text-gray-600 hover:bg-gray-100 hover:text-gray-700"}`,
+        className: `px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 ${activeTab === tab.title ? "border-b-2 border-gray-500" : "border-b border-gray-300 text-gray-600 hover:bg-gray-100 hover:text-gray-700"}`,
         onClick: () => {
           setActiveTab(tab.title);
         },
@@ -2062,13 +2062,7 @@ const Tabs = ({ tabs, toolbar }) => {
       tabElements,
       toolbar && /* @__PURE__ */ u$1("div", { className: "py-2 flex flex-wrap gap-y-1", children: toolbarElement })
     ] }),
-    /* @__PURE__ */ u$1(
-      "div",
-      {
-        className: `p-2 flex-grow overflow-scroll border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === ((_b = tabs[0]) == null ? void 0 : _b.title) ? "" : "rounded-tl-md"}`,
-        children: tabs.map((tab) => /* @__PURE__ */ u$1("div", { className: "h-full", hidden: activeTab !== tab.title, children: tab.content }, tab.title))
-      }
-    )
+    /* @__PURE__ */ u$1("div", { className: `p-2 flex-grow overflow-scroll border-2 border-gray-100 rounded-b-md rounded-tr-md`, children: tabs.map((tab) => /* @__PURE__ */ u$1("div", { className: "h-full", hidden: activeTab !== tab.title, children: tab.content }, tab.title)) })
   ] });
 };
 function useQuery(fetchDataCallback, dependencies) {
@@ -5196,6 +5190,9 @@ input.tab:checked + .tab-content,
 .gap-y-1 {
   row-gap: 0.25rem;
 }
+.overflow-visible {
+  overflow: visible;
+}
 .overflow-scroll {
   overflow: scroll;
 }
@@ -5205,6 +5202,9 @@ input.tab:checked + .tab-content,
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-nowrap {
+  text-wrap: nowrap;
+}
 .break-words {
   overflow-wrap: break-word;
 }
@@ -5224,9 +5224,6 @@ input.tab:checked + .tab-content,
   border-bottom-right-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
 }
-.rounded-tl-md {
-  border-top-left-radius: 0.375rem;
-}
 .rounded-tr-md {
   border-top-right-radius: 0.375rem;
 }
@@ -5236,6 +5233,9 @@ input.tab:checked + .tab-content,
 .border-2 {
   border-width: 2px;
 }
+.border-b {
+  border-bottom-width: 1px;
+}
 .border-b-2 {
   border-bottom-width: 2px;
 }
@@ -5251,9 +5251,9 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
-.border-gray-400 {
+.border-gray-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
+  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
 }
 .border-slate-500 {
   --tw-border-opacity: 1;
@@ -5354,6 +5354,9 @@ input.tab:checked + .tab-content,
 .font-medium {
   font-weight: 500;
 }
+.font-semibold {
+  font-weight: 600;
+}
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -5500,6 +5503,12 @@ input.tab:checked + .tab-content,
     visibility: visible;
   }
 }
+@container (min-width: 6rem) {
+
+  .\\@\\[6rem\\]\\:visible {
+    visibility: visible;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\\:max-w-5xl {
@@ -9519,48 +9528,69 @@ const MutationsOverTimeGrid = ({
           gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
           gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`
         },
-        children: shownMutations.map((mutation, rowIndex) => {
-          return /* @__PURE__ */ u$1(Fragment, { children: [
-            /* @__PURE__ */ u$1(
-              "div",
-              {
-                style: { gridRowStart: rowIndex + 1, gridColumnStart: 1 },
-                children: /* @__PURE__ */ u$1(MutationCell, { mutation })
-              },
-              `mutation-${mutation.toString()}`
-            ),
-            dates.map((date, columnIndex) => {
-              const value = data.get(mutation, date) ?? null;
-              const tooltipPosition = getTooltipPosition(
-                rowIndex,
-                shownMutations.length,
-                columnIndex,
-                dates.length
-              );
-              return /* @__PURE__ */ u$1(
+        className: "text-center",
+        children: [
+          dates.map((date, columnIndex) => /* @__PURE__ */ u$1(
+            "div",
+            {
+              className: "@container font-semibold",
+              style: { gridRowStart: 1, gridColumnStart: columnIndex + 2 },
+              children: /* @__PURE__ */ u$1("p", { ...styleGridHeader(columnIndex, dates), children: date.dateString })
+            },
+            date.dateString
+          )),
+          shownMutations.map((mutation, rowIndex) => {
+            return /* @__PURE__ */ u$1(Fragment, { children: [
+              /* @__PURE__ */ u$1(
                 "div",
                 {
-                  style: { gridRowStart: rowIndex + 1, gridColumnStart: columnIndex + 2 },
-                  children: /* @__PURE__ */ u$1(
-                    ProportionCell,
-                    {
-                      value,
-                      date,
-                      mutation,
-                      tooltipPosition,
-                      colorScale
-                    }
-                  )
+                  style: { gridRowStart: rowIndex + 2, gridColumnStart: 1 },
+                  children: /* @__PURE__ */ u$1(MutationCell, { mutation })
                 },
-                `${mutation.toString()}-${date.toString()}`
-              );
-            })
-          ] }, `fragment-${mutation.toString()}`);
-        })
+                `mutation-${mutation.toString()}`
+              ),
+              dates.map((date, columnIndex) => {
+                const value = data.get(mutation, date) ?? null;
+                const tooltipPosition = getTooltipPosition(
+                  rowIndex,
+                  shownMutations.length,
+                  columnIndex,
+                  dates.length
+                );
+                return /* @__PURE__ */ u$1(
+                  "div",
+                  {
+                    style: { gridRowStart: rowIndex + 2, gridColumnStart: columnIndex + 2 },
+                    children: /* @__PURE__ */ u$1(
+                      ProportionCell,
+                      {
+                        value,
+                        date,
+                        mutation,
+                        tooltipPosition,
+                        colorScale
+                      }
+                    )
+                  },
+                  `${mutation.toString()}-${date.toString()}`
+                );
+              })
+            ] }, `fragment-${mutation.toString()}`);
+          })
+        ]
       }
     )
   ] });
 };
+function styleGridHeader(columnIndex, dates) {
+  if (columnIndex === 0) {
+    return { className: "overflow-visible text-nowrap" };
+  }
+  if (columnIndex === dates.length - 1) {
+    return { className: "overflow-visible text-nowrap", style: { direction: "rtl" } };
+  }
+  return { className: "invisible @[6rem]:visible" };
+}
 function getTooltipPosition(rowIndex, rows, columnIndex, columns) {
   const tooltipX = rowIndex < rows / 2 || rowIndex < 6 ? "bottom" : "top";
   const tooltipY = columnIndex < columns / 2 ? "start" : "end";
@@ -9597,7 +9627,7 @@ const ProportionCell = ({ value, mutation, date, tooltipPosition, colorScale })
         backgroundColor: getColorWithingScale(value == null ? void 0 : value.proportion, colorScale),
         color: getTextColorForScale(value == null ? void 0 : value.proportion, colorScale)
       },
-      className: `w-full h-full text-center hover:font-bold text-xs group @container`,
+      className: `w-full h-full hover:font-bold text-xs group @container`,
       children: /* @__PURE__ */ u$1("span", { className: "invisible @[2rem]:visible", children: value === null ? "" : formatProportion(value.proportion, 0) })
     }
   ) }) });
@@ -9609,7 +9639,7 @@ const timeIntervalDisplay = (date) => {
   return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
 };
 const MutationCell = ({ mutation }) => {
-  return /* @__PURE__ */ u$1("div", { className: "text-center", children: mutation.code });
+  return /* @__PURE__ */ u$1("div", { children: mutation.code });
 };
 const ColorScaleSelectorDropdown = ({
   colorScale,
@@ -11225,7 +11255,7 @@ const wastewaterMutationOverTimeSchema = z$2.object({
   sequenceType: sequenceTypeSchema,
   width: z$2.string(),
   height: z$2.string(),
-  maxNumberOfGridRows: z$2.number().optional()
+  maxNumberOfGridRows: z$2.number()
 });
 const WastewaterMutationsOverTime = (componentProps) => {
   const { width, height } = componentProps;
@@ -15073,48 +15103,218 @@ const ReferenceGenomesAwaiter = ({ children }) => {
 function isNotInitialized(referenceGenome) {
   return referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0;
 }
-const MutationFilterInfo = () => {
+const ExampleMutation = ({ sequenceType, mutationType }) => {
   const referenceGenome = x$1(ReferenceGenomeContext);
-  const firstGene = referenceGenome.genes[0].name;
+  return /* @__PURE__ */ u$1("b", { children: getExampleMutation(referenceGenome, sequenceType, mutationType) });
+};
+function getExampleMutation(referenceGenome, sequenceType, mutationType) {
+  switch (sequenceType) {
+    case "amino acid": {
+      if (referenceGenome.genes.length === 0) {
+        return "";
+      }
+      const firstGene = referenceGenome.genes[0].name;
+      switch (mutationType) {
+        case "substitution":
+          return `${firstGene}:57Q`;
+        case "insertion":
+          return `ins_${firstGene}:31:N`;
+      }
+    }
+    // Issue of linter https://github.com/typescript-eslint/typescript-eslint/issues/3455
+    // eslint-disable-next-line no-fallthrough
+    case "nucleotide": {
+      switch (referenceGenome.nucleotideSequences.length) {
+        case 0: {
+          return "";
+        }
+        case 1: {
+          switch (mutationType) {
+            case "substitution":
+              return "23T";
+            case "insertion":
+              return "ins_1046:A";
+          }
+        }
+        // Issue of linter https://github.com/typescript-eslint/typescript-eslint/issues/3455
+        // eslint-disable-next-line no-fallthrough
+        default: {
+          const firstSegment = referenceGenome.nucleotideSequences[0].name;
+          switch (mutationType) {
+            case "substitution":
+              return `${firstSegment}:23T`;
+            case "insertion":
+              return `ins_${firstSegment}:10462:A`;
+          }
+        }
+      }
+    }
+  }
+}
+const MutationFilterInfo = () => {
   return /* @__PURE__ */ u$1(Info, { 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(QuickStart, {}),
+    /* @__PURE__ */ u$1(NucleotideMutationsInfo, {}),
+    /* @__PURE__ */ u$1(AminoAcidMutationsInfo, {}),
+    /* @__PURE__ */ u$1(InsertionWildcards, {}),
+    /* @__PURE__ */ u$1(MultipleMutations, {}),
+    /* @__PURE__ */ u$1(AnyMutation, {}),
+    /* @__PURE__ */ u$1(NoMutation, {})
+  ] });
+};
+const QuickStart = () => {
+  const referenceGenome = x$1(ReferenceGenomeContext);
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(InfoHeadline2, { children: "Quickstart" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: /* @__PURE__ */ u$1("ul", { className: "list-disc list-inside", children: [
-      /* @__PURE__ */ u$1("li", { children: [
+      referenceGenome.nucleotideSequences.length > 0 && /* @__PURE__ */ u$1("li", { children: [
         "Filter for nucleotide mutations:",
         " ",
         /* @__PURE__ */ u$1(ExampleMutation, { mutationType: "substitution", sequenceType: "nucleotide" })
       ] }),
-      /* @__PURE__ */ u$1("li", { children: [
+      referenceGenome.genes.length > 0 && /* @__PURE__ */ u$1("li", { children: [
         "Filter for amino acid mutations:",
         " ",
-        /* @__PURE__ */ u$1(ExampleMutation, { mutationType: "insertion", sequenceType: "nucleotide" })
+        /* @__PURE__ */ u$1(ExampleMutation, { mutationType: "substitution", sequenceType: "amino acid" })
       ] }),
-      /* @__PURE__ */ u$1("li", { children: [
+      referenceGenome.nucleotideSequences.length > 0 && /* @__PURE__ */ u$1("li", { children: [
         "Filter for nucleotide insertions:",
         " ",
-        /* @__PURE__ */ u$1(ExampleMutation, { mutationType: "substitution", sequenceType: "amino acid" })
+        /* @__PURE__ */ u$1(ExampleMutation, { mutationType: "insertion", sequenceType: "nucleotide" })
       ] }),
-      /* @__PURE__ */ u$1("li", { children: [
+      referenceGenome.genes.length > 0 && /* @__PURE__ */ u$1("li", { children: [
         "Filter for amino acid insertions:",
         " ",
         /* @__PURE__ */ u$1(ExampleMutation, { mutationType: "insertion", sequenceType: "amino acid" })
       ] })
     ] }) }),
-    !isSingleSegmented(referenceGenome) && /* @__PURE__ */ u$1(InfoParagraph, { children: [
+    referenceGenome.nucleotideSequences.length > 1 ? /* @__PURE__ */ u$1(InfoParagraph, { children: [
       "This organism has the following segments:",
       " ",
       referenceGenome.nucleotideSequences.map((gene) => gene.name).join(", "),
       "."
-    ] }),
-    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+    ] }) : /* @__PURE__ */ u$1(InfoParagraph, { children: "This organism doesn't support nucleotide sequences." }),
+    referenceGenome.genes.length !== 0 ? /* @__PURE__ */ u$1(InfoParagraph, { children: [
       "This organism has the following genes: ",
       referenceGenome.genes.map((gene) => gene.name).join(", "),
       "."
-    ] }),
+    ] }) : /* @__PURE__ */ u$1(InfoParagraph, { children: "This organism doesn't support amino acid sequences." })
+  ] });
+};
+const NucleotideMutationsInfo = () => {
+  const referenceGenome = x$1(ReferenceGenomeContext);
+  if (referenceGenome.nucleotideSequences.length === 0) {
+    return null;
+  }
+  if (isSingleSegmented(referenceGenome)) {
+    return /* @__PURE__ */ u$1(Fragment, { children: [
+      /* @__PURE__ */ u$1(InfoHeadline2, { children: "Nucleotide Mutations and Insertions" }),
+      /* @__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 firstSegment = referenceGenome.nucleotideSequences[0].name;
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(InfoHeadline2, { children: "Nucleotide Mutations and Insertions" }),
-    isSingleSegmented(referenceGenome) ? /* @__PURE__ */ u$1(SingleSegmentedNucleotideMutationsInfo, {}) : /* @__PURE__ */ u$1(MultiSegmentedNucleotideMutationsInfo, {}),
+    /* @__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(ExampleMutation, { mutationType: "insertion", sequenceType: "nucleotide" }),
+      "."
+    ] })
+  ] });
+};
+const AminoAcidMutationsInfo = () => {
+  const referenceGenome = x$1(ReferenceGenomeContext);
+  if (referenceGenome.genes.length === 0) {
+    return null;
+  }
+  const firstGene = referenceGenome.genes[0].name;
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(InfoHeadline2, { children: "Amino Acid Mutations and Insertions" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
       "An amino acid mutation has the format ",
@@ -15144,30 +15344,46 @@ const MutationFilterInfo = () => {
       " would filter for sequences with an insertion of N between positions 31 and 32 in the gene ",
       firstGene,
       "."
-    ] }),
+    ] })
+  ] });
+};
+const InsertionWildcards = () => {
+  const referenceGenome = x$1(ReferenceGenomeContext);
+  if (referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(InfoHeadline2, { children: "Insertion Wildcards" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
-      "This component supports insertion queries that contain wildcards ",
+      "This component supports nucleotide and amino acid insertion queries that contain wildcards ",
       /* @__PURE__ */ u$1("b", { children: "?" }),
       ". For example",
       " ",
       /* @__PURE__ */ u$1("b", { children: [
         "ins_",
-        firstGene,
-        ":214:?EP?"
+        exampleSegmentString(referenceGenome),
+        "214:?",
+        exampleWildcardInsertion(referenceGenome),
+        "?"
       ] }),
-      " will match all cases where segment ",
-      /* @__PURE__ */ u$1("b", { children: firstGene }),
-      " has an insertion of ",
-      /* @__PURE__ */ u$1("b", { children: "EP" }),
+      " ",
+      "will match all cases where segment ",
+      /* @__PURE__ */ u$1("b", { children: exampleSegment(referenceGenome) }),
+      " has an insertion of",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: exampleWildcardInsertion(referenceGenome) }),
       " 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" }),
+      ", e.g. the insertion",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: [
+        exampleWildcardInsertion(referenceGenome),
+        "T"
+      ] }),
       " will be matched."
     ] }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
@@ -15175,13 +15391,47 @@ const MutationFilterInfo = () => {
       " ",
       /* @__PURE__ */ u$1("b", { children: [
         "ins_",
-        firstGene,
-        ":214:?"
+        exampleSegmentString(referenceGenome),
+        "214:?"
       ] }),
       " match any (but at least one) insertion between the positions 214 and 215."
-    ] }),
+    ] })
+  ] });
+};
+const exampleSegmentString = (referenceGenome) => {
+  const segment = exampleSegment(referenceGenome);
+  if (segment === "") {
+    return "";
+  }
+  return `${segment}:`;
+};
+const exampleSegment = (referenceGenome) => {
+  if (referenceGenome.genes.length > 0) {
+    return `${referenceGenome.genes[0].name}`;
+  }
+  if (referenceGenome.nucleotideSequences.length > 1) {
+    return `${referenceGenome.nucleotideSequences[0].name}`;
+  }
+  return "";
+};
+const exampleWildcardInsertion = (referenceGenome) => {
+  if (referenceGenome.genes.length > 0) {
+    return "EP";
+  }
+  if (referenceGenome.nucleotideSequences.length > 0) {
+    return "CG";
+  }
+  return "";
+};
+const MultipleMutations = () => {
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__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(InfoParagraph, { children: "Multiple mutation filters can be provided by adding one mutation after the other." })
+  ] });
+};
+const AnyMutation = () => {
+  const referenceGenome = x$1(ReferenceGenomeContext);
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__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 ",
@@ -15189,11 +15439,15 @@ const MutationFilterInfo = () => {
       ". Example:",
       " ",
       /* @__PURE__ */ u$1("b", { children: [
-        firstGene,
-        ":20"
+        exampleSegmentString(referenceGenome),
+        "20"
       ] }),
       "."
-    ] }),
+    ] })
+  ] });
+};
+const NoMutation = () => {
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(InfoHeadline2, { children: "No Mutation" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
       "You can write a ",
@@ -15204,146 +15458,6 @@ const MutationFilterInfo = () => {
     ] })
   ] });
 };
-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$1(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(ExampleMutation, { mutationType: "insertion", sequenceType: "nucleotide" }),
-      "."
-    ] })
-  ] });
-};
-const ExampleMutation = ({ sequenceType, mutationType }) => {
-  const referenceGenome = x$1(ReferenceGenomeContext);
-  const firstSegment = referenceGenome.nucleotideSequences[0].name;
-  const firstGene = referenceGenome.genes[0].name;
-  if (sequenceType === "amino acid") {
-    switch (mutationType) {
-      case "substitution":
-        return /* @__PURE__ */ u$1("b", { children: [
-          firstGene,
-          ":57Q"
-        ] });
-      case "insertion":
-        return /* @__PURE__ */ u$1("b", { children: [
-          "ins_",
-          firstGene,
-          ":31:N"
-        ] });
-    }
-  }
-  if (isSingleSegmented(referenceGenome)) {
-    switch (mutationType) {
-      case "substitution":
-        return /* @__PURE__ */ u$1("b", { children: "23T" });
-      case "insertion":
-        return /* @__PURE__ */ u$1("b", { children: "ins_1046:A" });
-    }
-  }
-  switch (mutationType) {
-    case "substitution":
-      return /* @__PURE__ */ u$1("b", { children: [
-        firstSegment,
-        ":23T"
-      ] });
-    case "insertion":
-      return /* @__PURE__ */ u$1("b", { children: [
-        "ins_",
-        firstSegment,
-        ":10462:A"
-      ] });
-  }
-};
 const sequenceTypeFromSegment = (possibleSegment, referenceGenome) => {
   if (possibleSegment === void 0) {
     return isSingleSegmented(referenceGenome) ? "nucleotide" : void 0;
@@ -15587,9 +15701,12 @@ const MutationFilterSelector = ({ referenceGenome, setSelectedFilters, selectedF
   ] });
 };
 function getPlaceholder(referenceGenome) {
-  const segmentPrefix = referenceGenome.nucleotideSequences.length > 1 ? `${referenceGenome.nucleotideSequences[0].name}:` : "";
-  const firstGene = referenceGenome.genes[0].name;
-  return `Enter a mutation (e.g. ${segmentPrefix}A123T, ins_${segmentPrefix}123:AT, ${firstGene}:M123E, ins_${firstGene}:123:ME)`;
+  const nucleotideSubstitution = getExampleMutation(referenceGenome, "nucleotide", "substitution");
+  const nucleotideInsertion = getExampleMutation(referenceGenome, "nucleotide", "insertion");
+  const aminoAcidSubstitution = getExampleMutation(referenceGenome, "amino acid", "substitution");
+  const aminoAcidInsertion = getExampleMutation(referenceGenome, "amino acid", "insertion");
+  const exampleMutations = [nucleotideSubstitution, nucleotideInsertion, aminoAcidSubstitution, aminoAcidInsertion].filter((example) => example !== "").join(", ");
+  return `Enter a mutation (e.g. ${exampleMutations})`;
 }
 const backgroundColor = {
   aminoAcidMutations: singleGraphColorRGBByName("teal", 0.4),
@@ -15811,7 +15928,7 @@ LineageFilterComponent = __decorateClass([
 ], LineageFilterComponent);
 export {
   AggregateComponent,
-  App,
+  AppComponent,
   DateRangeSelectorComponent,
   LineageFilterComponent,
   LocationFilterComponent,