@genspectrum/dashboard-components 0.13.5 → 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>`;
 }
@@ -1628,6 +1628,25 @@ const LoadingDisplay = () => {
     }
   );
 };
+const SubstitutionsLink = () => /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Substitution", children: "substitutions" });
+const InsertionsLink = () => /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Insertion", children: "insertions" });
+const DeletionsLink = () => /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Deletion", children: "deletions" });
+const ProportionExplanation = () => /* @__PURE__ */ u$1(Fragment, { children: [
+  /* @__PURE__ */ u$1(InfoHeadline2, { children: "Proportion calculation" }),
+  /* @__PURE__ */ u$1(InfoParagraph, { children: "The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the total number of sequences with a non-ambiguous symbol at the position." }),
+  /* @__PURE__ */ u$1(InfoParagraph, { children: [
+    /* @__PURE__ */ u$1("b", { children: "Example:" }),
+    " Assume we look at nucleotide mutations at position 5 where the reference has a T and assume there are 10 sequences in total:",
+    /* @__PURE__ */ u$1("ul", { className: "list-disc list-inside ml-2", children: [
+      /* @__PURE__ */ u$1("li", { children: "3 sequences have a C," }),
+      /* @__PURE__ */ u$1("li", { children: "2 sequences have a T," }),
+      /* @__PURE__ */ u$1("li", { children: "1 sequence has a G," }),
+      /* @__PURE__ */ u$1("li", { children: "3 sequences have an N," }),
+      /* @__PURE__ */ u$1("li", { children: "1 sequence has a Y (which means T or C)," })
+    ] }),
+    "then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from the calculation."
+  ] })
+] });
 function useFloatingUi(referenceRef, floatingRef, middleware, placement) {
   const cleanupRef = A$1(null);
   y(() => {
@@ -2022,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);
         },
@@ -2043,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) {
@@ -2212,7 +2225,22 @@ const MutationComparisonInfo = ({ originalComponentProps }) => {
   const lapis = x$1(LapisUrlContext);
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Info for mutation comparison" }),
-    /* @__PURE__ */ u$1(InfoParagraph, { children: "TODO: https://github.com/GenSpectrum/dashboard-components/issues/465" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This displays ",
+      /* @__PURE__ */ u$1(SubstitutionsLink, {}),
+      " and ",
+      /* @__PURE__ */ u$1(DeletionsLink, {}),
+      " of several variants. It shows mutations where the proportion for any given variant falls within the range you can select in the component's toolbar."
+    ] }),
+    /* @__PURE__ */ u$1(ProportionExplanation, {}),
+    originalComponentProps.views.includes(views.table) && /* @__PURE__ */ u$1(Fragment, { children: [
+      /* @__PURE__ */ u$1(InfoHeadline2, { children: "Table View" }),
+      /* @__PURE__ */ u$1(InfoParagraph, { children: "The table view displays the proportion of mutations that appear in any of the variants." })
+    ] }),
+    originalComponentProps.views.includes(views.venn) && /* @__PURE__ */ u$1(Fragment, { children: [
+      /* @__PURE__ */ u$1(InfoHeadline2, { children: "Venn Diagram View" }),
+      /* @__PURE__ */ u$1(InfoParagraph, { children: "The Venn diagram view illustrates which mutations overlap between the variants and which are exclusive to specific variants. Mutations overlap if their proportion falls within the selected range for two variants. If the proportion of a mutation is within the selected range for one variant but not for the other, the mutation is considered exclusive to that variant." })
+    ] }),
     /* @__PURE__ */ u$1(InfoComponentCode, { componentName: "mutation-comparison", params: originalComponentProps, lapisUrl: lapis })
   ] });
 };
@@ -5162,6 +5190,9 @@ input.tab:checked + .tab-content,
 .gap-y-1 {
   row-gap: 0.25rem;
 }
+.overflow-visible {
+  overflow: visible;
+}
 .overflow-scroll {
   overflow: scroll;
 }
@@ -5171,6 +5202,9 @@ input.tab:checked + .tab-content,
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-nowrap {
+  text-wrap: nowrap;
+}
 .break-words {
   overflow-wrap: break-word;
 }
@@ -5190,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;
 }
@@ -5202,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;
 }
@@ -5217,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;
@@ -5320,6 +5354,9 @@ input.tab:checked + .tab-content,
 .font-medium {
   font-weight: 500;
 }
+.font-semibold {
+  font-weight: 600;
+}
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -5466,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 {
@@ -6075,31 +6118,16 @@ const MutationsInfo = ({ originalComponentProps }) => {
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Mutations" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
-      "This shows mutations of a variant. There are three types of mutations:",
-      " ",
-      /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Substitution", children: "substitutions" }),
+      "This shows mutations of a variant. There are three types of mutations: ",
+      /* @__PURE__ */ u$1(SubstitutionsLink, {}),
       ",",
       " ",
-      /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Deletion", children: "deletions" }),
-      " and",
-      " ",
-      /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Insertion", children: "insertions" }),
+      /* @__PURE__ */ u$1(DeletionsLink, {}),
+      " and ",
+      /* @__PURE__ */ u$1(InsertionsLink, {}),
       "."
     ] }),
-    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Proportion calculation" }),
-    /* @__PURE__ */ u$1(InfoParagraph, { children: "The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the total number of sequences with a non-ambiguous symbol at the position." }),
-    /* @__PURE__ */ u$1(InfoParagraph, { children: [
-      /* @__PURE__ */ u$1("b", { children: "Example:" }),
-      " Assume we look at nucleotide mutations at position 5 where the reference has a T and assume there are 10 sequences in total:",
-      /* @__PURE__ */ u$1("ul", { className: "list-disc list-inside ml-2", children: [
-        /* @__PURE__ */ u$1("li", { children: "3 sequences have a C," }),
-        /* @__PURE__ */ u$1("li", { children: "2 sequences have a T," }),
-        /* @__PURE__ */ u$1("li", { children: "1 sequence has a G," }),
-        /* @__PURE__ */ u$1("li", { children: "3 sequences have an N," }),
-        /* @__PURE__ */ u$1("li", { children: "1 sequence has a Y (which means T or C)," })
-      ] }),
-      "then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from the calculation."
-    ] }),
+    /* @__PURE__ */ u$1(ProportionExplanation, {}),
     /* @__PURE__ */ u$1(InfoComponentCode, { componentName: "mutations", params: originalComponentProps, lapisUrl: lapis })
   ] });
 };
@@ -9500,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";
@@ -9578,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) })
     }
   ) }) });
@@ -9590,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,
@@ -11140,12 +11189,20 @@ async function queryWastewaterMutationsOverTime(lapis, lapisFilter, signal) {
     "aminoAcidMutationFrequency"
   ]);
   const data = (await fetchData.evaluate(lapis, signal)).content;
-  return data.map((row) => ({
-    location: row.location,
-    date: toTemporalClass(parseDateStringToTemporal(row.date, "day")),
-    nucleotideMutationFrequency: row.nucleotideMutationFrequency !== null ? transformMutations(JSON.parse(row.nucleotideMutationFrequency)) : [],
-    aminoAcidMutationFrequency: row.aminoAcidMutationFrequency !== null ? transformMutations(JSON.parse(row.aminoAcidMutationFrequency)) : []
-  }));
+  return data.map((row) => {
+    try {
+      return {
+        location: row.location,
+        date: toTemporalClass(parseDateStringToTemporal(row.date, "day")),
+        nucleotideMutationFrequency: row.nucleotideMutationFrequency !== null ? transformMutations(JSON.parse(row.nucleotideMutationFrequency)) : [],
+        aminoAcidMutationFrequency: row.aminoAcidMutationFrequency !== null ? transformMutations(JSON.parse(row.aminoAcidMutationFrequency)) : []
+      };
+    } catch (e2) {
+      throw new Error(
+        `Failed to parse row of wastewater data: ${JSON.stringify(row)}: ${(e2 == null ? void 0 : e2.message) ?? "Unknown error"}`
+      );
+    }
+  });
 }
 const mutationFrequencySchema = z$2.record(z$2.number().nullable());
 function transformMutations(input) {
@@ -11153,10 +11210,16 @@ function transformMutations(input) {
   if (!mutationFrequency.success) {
     throw new Error(`Failed to parse mutation frequency: ${mutationFrequency.error.message}`);
   }
-  return Object.entries(mutationFrequency.data).map(([key, value]) => ({
-    mutation: SubstitutionClass.parse(key),
-    proportion: value
-  }));
+  return Object.entries(mutationFrequency.data).map(([key, value]) => {
+    const mutation = SubstitutionClass.parse(key);
+    if (mutation === null) {
+      throw new Error(`Failed to parse mutation: "${key}"`);
+    }
+    return {
+      mutation,
+      proportion: value
+    };
+  });
 }
 async function computeWastewaterMutationsOverTimeDataPerLocation(lapis, lapisFilter, sequenceType, signal) {
   const data = await queryWastewaterMutationsOverTime(lapis, lapisFilter, signal);
@@ -11192,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;
@@ -11640,26 +11703,46 @@ async function fetchAutocompletionList({
   signal,
   lapisFilter
 }) {
-  const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1).fill(0).map((_2, i2) => i2 + 1).map((i2) => fields.slice(i2).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
+  const helpersThatOverwriteAValueToItsAncestor = fields.map(
+    (_2, i2) => fields.slice(i2 + 1).reduce((acc, field) => ({ ...acc, [field]: null }), {})
+  );
   const fetchAggregatedOperator = new FetchAggregatedOperator(
     lapisFilter ?? {},
     fields
   );
   const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
-  const locationValues = data.map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {})).reduce((setOfAllHierarchies, entry) => {
-    setOfAllHierarchies.add(JSON.stringify(entry));
-    toAncestorInHierarchyOverwriteValues.forEach((overwriteValues) => {
-      setOfAllHierarchies.add(JSON.stringify({ ...entry, ...overwriteValues }));
-    });
-    return setOfAllHierarchies;
-  }, /* @__PURE__ */ new Set());
-  return [...locationValues].map((json) => JSON.parse(json)).sort(compareLocationEntries(fields)).map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] ?? void 0 }), {}));
+  const locationValues = data.map((entry) => ({
+    value: fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {}),
+    count: entry.count
+  })).reduce((mapOfAllHierarchiesAndCounts, entry) => {
+    return addValueAndAllAncestorsToMap(
+      entry,
+      helpersThatOverwriteAValueToItsAncestor,
+      mapOfAllHierarchiesAndCounts
+    );
+  }, /* @__PURE__ */ new Map());
+  return [...locationValues].map(([json, count]) => ({
+    value: JSON.parse(json),
+    count
+  })).sort(compareLocationEntries(fields)).map(({ value, count }) => ({
+    value: fields.reduce((acc, field) => ({ ...acc, [field]: value[field] ?? void 0 }), {}),
+    count
+  }));
+}
+function addValueAndAllAncestorsToMap({ value, count }, helpersThatOverwriteAValueToItsAncestor, mapOfAllHierarchiesAndCounts) {
+  const keysOfAllHierarchyLevels = new Set(
+    helpersThatOverwriteAValueToItsAncestor.map((overwriteValues) => ({ ...value, ...overwriteValues })).map((value2) => JSON.stringify(value2))
+  );
+  for (const key of keysOfAllHierarchyLevels) {
+    mapOfAllHierarchiesAndCounts.set(key, (mapOfAllHierarchiesAndCounts.get(key) ?? 0) + count);
+  }
+  return mapOfAllHierarchiesAndCounts;
 }
 function compareLocationEntries(fields) {
   return (a2, b3) => {
     for (const field of fields) {
-      const valueA = a2[field];
-      const valueB = b3[field];
+      const valueA = a2.value[field];
+      const valueB = b3.value[field];
       if (valueA === valueB) {
         continue;
       }
@@ -14715,12 +14798,12 @@ function DownshiftCombobox({
         children: items.length > 0 ? items.map((item, index) => /* @__PURE__ */ u$1(
           "li",
           {
-            className: `${highlightedIndex === index ? "bg-blue-300" : ""} ${selectedItem !== null && itemToString2(selectedItem) === itemToString2(item) ? "font-bold" : ""} py-2 px-3 shadow-sm flex flex-col`,
+            className: `${highlightedIndex === index ? "bg-blue-300" : ""} ${selectedItem !== null && itemToString2(selectedItem) === itemToString2(item) ? "font-bold" : ""} py-2 px-3 shadow-sm`,
             ...getItemProps({ item, index }),
             children: formatItemInList(item)
           },
           itemToString2(item)
-        )) : /* @__PURE__ */ u$1("li", { className: "py-2 px-3 shadow-sm flex flex-col", children: "No elements to select." })
+        )) : /* @__PURE__ */ u$1("li", { className: "py-2 px-3 shadow-sm", children: "No elements to select." })
       }
     )
   ] });
@@ -14763,8 +14846,8 @@ const LocationSelector = ({
     return locationData.map((location) => toSelectItem(location, fields)).filter((item) => item !== void 0);
   }, [fields, locationData]);
   const selectedItem = T$1(() => {
-    return value !== void 0 ? toSelectItem(value, fields) : void 0;
-  }, [fields, value]);
+    return value !== void 0 ? allItems.find((item) => item.description == concatenateLocation(value, fields)) : void 0;
+  }, [fields, value, allItems]);
   return /* @__PURE__ */ u$1(
     DownshiftCombobox,
     {
@@ -14774,12 +14857,17 @@ const LocationSelector = ({
       createEvent: (item) => new LocationChangedEvent((item == null ? void 0 : item.lapisFilter) ?? emptyLocationFilter(fields)),
       itemToString: (item) => (item == null ? void 0 : item.label) ?? "",
       placeholderText,
-      formatItemInList: (item) => {
-        return /* @__PURE__ */ u$1(Fragment, { children: [
+      formatItemInList: (item) => /* @__PURE__ */ u$1(Fragment, { children: [
+        /* @__PURE__ */ u$1("p", { children: [
           /* @__PURE__ */ u$1("span", { children: item.label }),
-          /* @__PURE__ */ u$1("span", { className: "text-sm text-gray-500", children: item.description })
-        ] });
-      }
+          /* @__PURE__ */ u$1("span", { className: "ml-2 text-gray-500", children: [
+            "(",
+            item.count,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ u$1("span", { className: "text-sm text-gray-500", children: item.description })
+      ] })
     }
   );
 };
@@ -14790,7 +14878,8 @@ function filterByInputValue$2(item, inputValue) {
   }
   return ((_a = item == null ? void 0 : item.label) == null ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase())) || (item == null ? void 0 : item.description.toLowerCase().includes(inputValue.toLowerCase()));
 }
-function toSelectItem(locationFilter, fields) {
+function toSelectItem(locationEntry, fields) {
+  const locationFilter = locationEntry.value;
   const concatenatedLocation = concatenateLocation(locationFilter, fields);
   const lastNonUndefinedField = [...fields].reverse().find((field) => locationFilter[field] !== void 0 && locationFilter[field] !== null);
   if (lastNonUndefinedField === void 0) {
@@ -14799,7 +14888,8 @@ function toSelectItem(locationFilter, fields) {
   return {
     lapisFilter: locationFilter,
     label: locationFilter[lastNonUndefinedField],
-    description: concatenatedLocation
+    description: concatenatedLocation,
+    count: locationEntry.count
   };
 }
 function concatenateLocation(locationFilter, fields) {
@@ -15013,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 ",
@@ -15084,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: [
@@ -15115,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 ",
@@ -15129,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 ",
@@ -15144,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;
@@ -15527,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),
@@ -15751,7 +15928,7 @@ LineageFilterComponent = __decorateClass([
 ], LineageFilterComponent);
 export {
   AggregateComponent,
-  App,
+  AppComponent,
   DateRangeSelectorComponent,
   LineageFilterComponent,
   LocationFilterComponent,