@genspectrum/dashboard-components 0.13.6 → 0.14.1

package/dist/components.js

@@ -6,7 +6,7 @@ import { options, createContext as createContext$1, Fragment, render, Component,
 import { Grid } from "gridjs";
 import { Chart, registerables, Scale, BarController } from "chart.js";
 import { VennDiagramController, ArcSlice, extractSets } from "chartjs-chart-venn";
-import { v as views, n as namedLapisFilterSchema, s as sequenceTypeSchema, l as lapisFilterSchema, t as temporalGranularitySchema, b as dateRangeOptionSchema, c as toYYYYMMDD, D as DateRangeOptionChangedEvent, e as lapisLocationFilterSchema, L as LocationChangedEvent, T as TextInputChangedEvent, m as mutationsFilterSchema, a as LineageFilterChangedEvent } from "./LineageFilterChangedEvent-GedKNGFI.js";
+import { v as views, n as namedLapisFilterSchema, s as sequenceTypeSchema, l as lapisFilterSchema, t as temporalGranularitySchema, b as dateRangeOptionSchema, c as dateRangeValueSchema, e as toYYYYMMDD, D as DateRangeOptionChangedEvent, f as lapisLocationFilterSchema, L as LocationChangedEvent, T as TextInputChangedEvent, m as mutationsFilterSchema, a as LineageFilterChangedEvent } from "./LineageFilterChangedEvent-C9dXOxt6.js";
 import { autoUpdate, computePosition, offset, shift, flip } from "@floating-ui/dom";
 import { ReactiveElement } from "@lit/reactive-element";
 import { BarWithErrorBarsController, BarWithErrorBar } from "chartjs-chart-error-bars";
@@ -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 = "";
@@ -561,7 +561,9 @@ let App = class extends LitElement {
     this.updateReferenceGenome = new Task(this, {
       task: async () => {
         const lapisUrl = lapisUrlSchema.parse(this.lapis);
-        this.referenceGenome = await fetchReferenceGenome(lapisUrl);
+        this.referenceGenome = await fetchReferenceGenome(
+          lapisUrl.endsWith("/") ? lapisUrl.slice(0, -1) : lapisUrl
+        );
       },
       args: () => [this.lapis]
     });
@@ -585,13 +587,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>`;
 }
@@ -1255,6 +1257,14 @@ function filterBySegmentAndMutationType(data, displayedSegments, displayedMutati
   return data.filter(byDisplayedSegments).filter(byDisplayedMutationTypes);
 }
 const LapisUrlContext = createContext$1("");
+const LapisUrlContextProvider = LapisUrlContext.Provider;
+const useLapisUrl = () => {
+  const lapisUrl = x$1(LapisUrlContext);
+  if (lapisUrl.endsWith("/")) {
+    return lapisUrl.slice(0, -1);
+  }
+  return lapisUrl;
+};
 const CsvDownloadButton = ({
   label = "Download",
   filename = "data.csv",
@@ -2041,13 +2051,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 +2072,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) {
@@ -2114,7 +2118,7 @@ const MutationComparison = (componentProps) => {
 };
 const MutationComparisonInner = (componentProps) => {
   const { lapisFilters, sequenceType } = componentProps;
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationData(lapisFilters, sequenceType, lapis);
   }, [lapisFilters, sequenceType, lapis]);
@@ -2228,7 +2232,7 @@ const Toolbar$7 = ({
   ] });
 };
 const MutationComparisonInfo = ({ originalComponentProps }) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Info for mutation comparison" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
@@ -5196,6 +5200,9 @@ input.tab:checked + .tab-content,
 .gap-y-1 {
   row-gap: 0.25rem;
 }
+.overflow-visible {
+  overflow: visible;
+}
 .overflow-scroll {
   overflow: scroll;
 }
@@ -5205,6 +5212,9 @@ input.tab:checked + .tab-content,
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-nowrap {
+  text-wrap: nowrap;
+}
 .break-words {
   overflow-wrap: break-word;
 }
@@ -5224,9 +5234,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 +5243,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 +5261,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 +5364,9 @@ input.tab:checked + .tab-content,
 .font-medium {
   font-weight: 500;
 }
+.font-semibold {
+  font-weight: 600;
+}
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -5500,6 +5513,12 @@ input.tab:checked + .tab-content,
     visibility: visible;
   }
 }
+@container (min-width: 6rem) {
+
+  .\\@\\[6rem\\]\\:visible {
+    visibility: visible;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\\:max-w-5xl {
@@ -5537,7 +5556,7 @@ const _PreactLitAdapter = class _PreactLitAdapter extends ReactiveElement {
     };
   }
   update(changedProperties) {
-    const vdom = /* @__PURE__ */ u$1(LapisUrlContext.Provider, { value: this.lapis, children: /* @__PURE__ */ u$1(ReferenceGenomeContext.Provider, { value: this.referenceGenome, children: this.render() }) });
+    const vdom = /* @__PURE__ */ u$1(LapisUrlContextProvider, { value: this.lapis, children: /* @__PURE__ */ u$1(ReferenceGenomeContext.Provider, { value: this.referenceGenome, children: this.render() }) });
     super.update(changedProperties);
     render(vdom, this.renderRoot);
   }
@@ -5963,7 +5982,7 @@ const Mutations = (componentProps) => {
   return /* @__PURE__ */ u$1(ErrorBoundary, { size, componentProps, schema: mutationsPropsSchema, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationsInner, { ...componentProps }) }) });
 };
 const MutationsInner = (componentProps) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const { lapisFilter, baselineLapisFilter, sequenceType } = componentProps;
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationsData(lapisFilter, baselineLapisFilter, sequenceType, lapis);
@@ -6105,7 +6124,7 @@ const Toolbar$6 = ({
   ] });
 };
 const MutationsInfo = ({ originalComponentProps }) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Mutations" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
@@ -7846,7 +7865,7 @@ const PrevalenceOverTime = (componentProps) => {
 };
 const PrevalenceOverTimeInner = (componentProps) => {
   const { numeratorFilters, denominatorFilter, granularity, smoothingWindow, lapisDateField } = componentProps;
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const { data, error, isLoading } = useQuery(
     () => queryPrevalenceOverTime(
       numeratorFilters,
@@ -7980,7 +7999,7 @@ const Toolbar$5 = ({
 };
 const PrevalenceOverTimeInfo = (componentProps) => {
   const { granularity, smoothingWindow, views: views2 } = componentProps;
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Prevalence over time" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
@@ -8335,7 +8354,7 @@ const RelativeGrowthAdvantage = (componentProps) => {
   return /* @__PURE__ */ u$1(ErrorBoundary, { size, schema: relativeGrowthAdvantagePropsSchema, componentProps, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(RelativeGrowthAdvantageInner, { ...componentProps }) }) });
 };
 const RelativeGrowthAdvantageInner = (componentProps) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const { numeratorFilter, denominatorFilter, generationTime, lapisDateField } = componentProps;
   const [yAxisScaleType, setYAxisScaleType] = h("linear");
   const { data, error, isLoading } = useQuery(
@@ -8418,7 +8437,7 @@ const RelativeGrowthAdvantageToolbar = ({
 const RelativeGrowthAdvantageInfo = ({
   originalComponentProps
 }) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const generationTime = originalComponentProps.generationTime;
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Relative growth advantage" }),
@@ -8713,7 +8732,7 @@ const Aggregate = (componentProps) => {
 };
 const AggregateInner = (componentProps) => {
   const { fields, lapisFilter, initialSortField, initialSortDirection } = componentProps;
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const { data, error, isLoading } = useQuery(async () => {
     return queryAggregateData(lapisFilter, fields, lapis);
   }, [lapisFilter, fields, lapis, initialSortField, initialSortDirection]);
@@ -8770,7 +8789,7 @@ const Toolbar$4 = ({ data, originalComponentProps }) => {
   ] });
 };
 const AggregateInfo = ({ originalComponentProps }) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Aggregated data" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
@@ -9029,7 +9048,7 @@ const NumberSequencesOverTime = (componentProps) => {
 };
 const NumberSequencesOverTimeInner = (componentProps) => {
   const { lapisFilters, lapisDateField, granularity, smoothingWindow } = componentProps;
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const { data, error, isLoading } = useQuery(
     () => queryNumberOfSequencesOverTime(lapis, lapisFilters, lapisDateField, granularity, smoothingWindow),
     [lapis, lapisFilters, lapisDateField, granularity, smoothingWindow]
@@ -9117,7 +9136,7 @@ const Toolbar$3 = ({ activeTab, data, yAxisScaleType, setYAxisScaleType, origina
 const NumberSequencesOverTimeInfo = ({
   originalComponentProps
 }) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Number of sequences over time" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
@@ -9519,48 +9538,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 +9637,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 +9649,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,
@@ -9672,7 +9712,7 @@ const MutationsOverTime = (componentProps) => {
   return /* @__PURE__ */ u$1(ErrorBoundary, { size, schema: mutationOverTimeSchema, componentProps, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationsOverTimeInner, { ...componentProps }) }) });
 };
 const MutationsOverTimeInner = (componentProps) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const { lapisFilter, sequenceType, granularity, lapisDateField } = componentProps;
   const messageToWorker = T$1(() => {
     return {
@@ -9807,7 +9847,7 @@ const Toolbar$2 = ({
   ] });
 };
 const MutationsOverTimeInfo = ({ originalComponentProps }) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Mutations over time" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
@@ -10866,7 +10906,7 @@ const SequencesByLocation = (componentProps) => {
 };
 const SequencesByLocationMapInner = (props) => {
   const { lapisFilter, lapisLocationField, mapSource } = props;
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const {
     data,
     error,
@@ -10948,7 +10988,7 @@ const Toolbar$1 = ({ originalComponentProps, tableData }) => {
   ] });
 };
 const SequencesByLocationMapInfo = ({ originalComponentProps }) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Prevalence by location" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: "TODO: Add description https://github.com/GenSpectrum/dashboard-components/issues/598" }),
@@ -11059,7 +11099,7 @@ const Statistics = (componentProps) => {
 };
 const StatisticsInner = (componentProps) => {
   const { numeratorFilter, denominatorFilter } = componentProps;
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const { data, error, isLoading } = useQuery(async () => {
     return queryGeneralStatistics(numeratorFilter, denominatorFilter, lapis);
   }, [numeratorFilter, denominatorFilter, lapis]);
@@ -11225,7 +11265,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;
@@ -11233,7 +11273,7 @@ const WastewaterMutationsOverTime = (componentProps) => {
   return /* @__PURE__ */ u$1(ErrorBoundary, { size, schema: wastewaterMutationOverTimeSchema, componentProps, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(WastewaterMutationsOverTimeInner, { ...componentProps }) }) });
 };
 const WastewaterMutationsOverTimeInner = (componentProps) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const {
     data: mutationOverTimeDataPerLocation,
     error,
@@ -11295,7 +11335,7 @@ const Toolbar = ({ colorScale, setColorScale, originalComponentProps }) => {
 const WastewaterMutationsOverTimeInfo = ({
   originalComponentProps
 }) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Info for mutations over time" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: /* @__PURE__ */ u$1("slot", { name: "infoText" }) }),
@@ -11379,42 +11419,48 @@ const getDatesForSelectorValue = (initialSelectedDateRange, dateRangeOptions, ea
   }
   return defaultDates;
 };
-function computeInitialValues(initialValue, initialDateFrom, initialDateTo, earliestDate, dateRangeOptions) {
+function computeInitialValues(value, earliestDate, dateRangeOptions) {
   var _a;
-  if (isUndefinedOrEmpty(initialDateFrom) && isUndefinedOrEmpty(initialDateTo)) {
+  if (value === void 0) {
+    const { dateFrom: dateFrom2, dateTo: dateTo2 } = getDatesForSelectorValue(void 0, dateRangeOptions, earliestDate);
+    return {
+      initialSelectedDateRange: void 0,
+      initialSelectedDateFrom: dateFrom2,
+      initialSelectedDateTo: dateTo2
+    };
+  }
+  if (typeof value === "string") {
     const selectableOptions = getSelectableOptions(dateRangeOptions);
-    const initialSelectedDateRange = (_a = selectableOptions.find((option) => option.value === initialValue)) == null ? void 0 : _a.value;
-    if (initialValue !== void 0 && initialSelectedDateRange === void 0) {
+    const initialSelectedDateRange = (_a = selectableOptions.find((option) => option.value === value)) == null ? void 0 : _a.value;
+    if (initialSelectedDateRange === void 0) {
       if (selectableOptions.length === 0) {
-        throw new UserFacingError(
-          "Invalid initialValue",
-          "There are no selectable options, but initialValue is set."
-        );
+        throw new UserFacingError("Invalid value", "There are no selectable options, but value is set.");
       }
       throw new UserFacingError(
-        "Invalid initialValue",
-        `Invalid initialValue "${initialValue}", It must be one of ${selectableOptions.map((option) => `'${option.value}'`).join(", ")}`
+        "Invalid value",
+        `Invalid value "${value}", It must be one of ${selectableOptions.map((option) => `'${option.value}'`).join(", ")}`
       );
     }
-    const { dateFrom, dateTo } = getDatesForSelectorValue(initialSelectedDateRange, dateRangeOptions, earliestDate);
+    const { dateFrom: dateFrom2, dateTo: dateTo2 } = getDatesForSelectorValue(initialSelectedDateRange, dateRangeOptions, earliestDate);
     return {
       initialSelectedDateRange,
-      initialSelectedDateFrom: dateFrom,
-      initialSelectedDateTo: dateTo
+      initialSelectedDateFrom: dateFrom2,
+      initialSelectedDateTo: dateTo2
     };
   }
-  const initialSelectedDateFrom = isUndefinedOrEmpty(initialDateFrom) ? new Date(earliestDate) : new Date(initialDateFrom);
-  let initialSelectedDateTo = isUndefinedOrEmpty(initialDateTo) ? /* @__PURE__ */ new Date() : new Date(initialDateTo);
+  const { dateFrom, dateTo } = value;
+  const initialSelectedDateFrom = isUndefinedOrEmpty(dateFrom) ? new Date(earliestDate) : new Date(dateFrom);
+  let initialSelectedDateTo = isUndefinedOrEmpty(dateTo) ? /* @__PURE__ */ new Date() : new Date(dateTo);
   if (isNaN(initialSelectedDateFrom.getTime())) {
     throw new UserFacingError(
-      "Invalid initialDateFrom",
-      `Invalid initialDateFrom "${initialDateFrom}", It must be of the format YYYY-MM-DD`
+      "Invalid value.dateFrom",
+      `Invalid value.dateFrom "${dateFrom}", It must be of the format YYYY-MM-DD`
     );
   }
   if (isNaN(initialSelectedDateTo.getTime())) {
     throw new UserFacingError(
-      "Invalid initialDateTo",
-      `Invalid initialDateTo "${initialDateTo}", It must be of the format YYYY-MM-DD`
+      "Invalid value.dateTo",
+      `Invalid value.dateTo "${dateTo}", It must be of the format YYYY-MM-DD`
     );
   }
   if (initialSelectedDateFrom > initialSelectedDateTo) {
@@ -11433,9 +11479,7 @@ const customOption = "Custom";
 const dateRangeSelectorInnerPropsSchema = z$2.object({
   dateRangeOptions: z$2.array(dateRangeOptionSchema),
   earliestDate: z$2.string().date(),
-  initialValue: z$2.string().optional(),
-  initialDateFrom: z$2.string().date().optional(),
-  initialDateTo: z$2.string().date().optional(),
+  value: dateRangeValueSchema.optional(),
   lapisDateField: z$2.string().min(1)
 });
 const dateRangeSelectorPropsSchema = dateRangeSelectorInnerPropsSchema.extend({
@@ -11449,17 +11493,12 @@ const DateRangeSelector = (props) => {
 const DateRangeSelectorInner = ({
   dateRangeOptions,
   earliestDate = "1900-01-01",
-  initialValue,
-  lapisDateField,
-  initialDateFrom,
-  initialDateTo
+  value,
+  lapisDateField
 }) => {
-  const initialValues = computeInitialValues(
-    initialValue,
-    initialDateFrom,
-    initialDateTo,
-    earliestDate,
-    dateRangeOptions
+  const initialValues = T$1(
+    () => computeInitialValues(value, earliestDate, dateRangeOptions),
+    [value, earliestDate, dateRangeOptions]
   );
   const fromDatePickerRef = A$1(null);
   const toDatePickerRef = A$1(null);
@@ -11474,6 +11513,11 @@ const DateRangeSelectorInner = ({
     dateTo: initialValues.initialSelectedDateTo
   });
   y(() => {
+    setSelectedDateRange(initialValues.initialSelectedDateRange);
+    setSelectedDates({
+      dateFrom: initialValues.initialSelectedDateFrom,
+      dateTo: initialValues.initialSelectedDateTo
+    });
     const commonConfig = {
       allowInput: true,
       dateFormat: "Y-m-d"
@@ -11482,7 +11526,7 @@ const DateRangeSelectorInner = ({
       setDateFromPicker(
         flatpickr(fromDatePickerRef.current, {
           ...commonConfig,
-          defaultDate: selectedDates.dateFrom
+          defaultDate: initialValues.initialSelectedDateFrom
         })
       );
     }
@@ -11490,18 +11534,24 @@ const DateRangeSelectorInner = ({
       setDateToPicker(
         flatpickr(toDatePickerRef.current, {
           ...commonConfig,
-          defaultDate: selectedDates.dateTo
+          defaultDate: initialValues.initialSelectedDateTo
         })
       );
     }
     return () => {
-      dateFromPicker == null ? void 0 : dateFromPicker.destroy();
-      dateToPicker == null ? void 0 : dateToPicker.destroy();
+      setDateFromPicker((prev) => {
+        prev == null ? void 0 : prev.destroy();
+        return null;
+      });
+      setDateToPicker((prev) => {
+        prev == null ? void 0 : prev.destroy();
+        return null;
+      });
     };
-  }, [fromDatePickerRef, toDatePickerRef]);
-  const onSelectChange = (value) => {
-    setSelectedDateRange(value);
-    const dateRange = getDatesForSelectorValue(value, dateRangeOptions, earliestDate);
+  }, [fromDatePickerRef, toDatePickerRef, initialValues]);
+  const onSelectChange = (value2) => {
+    setSelectedDateRange(value2);
+    const dateRange = getDatesForSelectorValue(value2, dateRangeOptions, earliestDate);
     dateToPicker == null ? void 0 : dateToPicker.set("minDate", dateRange.dateFrom);
     dateFromPicker == null ? void 0 : dateFromPicker.set("maxDate", dateRange.dateTo);
     dateFromPicker == null ? void 0 : dateFromPicker.setDate(dateRange.dateFrom);
@@ -11511,7 +11561,7 @@ const DateRangeSelectorInner = ({
       dateTo: dateRange.dateTo
     });
     fireFilterChangedEvent();
-    fireOptionChangedEvent(value);
+    fireOptionChangedEvent(value2);
   };
   const onChangeDateFrom = () => {
     if (selectedDates.dateFrom.toDateString() === (dateFromPicker == null ? void 0 : dateFromPicker.selectedDates[0].toDateString())) {
@@ -11576,8 +11626,8 @@ const DateRangeSelectorInner = ({
         onChange: (event) => {
           event.preventDefault();
           const select = event.target;
-          const value = select.value;
-          onSelectChange(value);
+          const value2 = select.value;
+          onSelectChange(value2);
         }
       }
     ),
@@ -11622,9 +11672,7 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
     super(...arguments);
     this.dateRangeOptions = [];
     this.earliestDate = "1900-01-01";
-    this.initialValue = void 0;
-    this.initialDateFrom = void 0;
-    this.initialDateTo = void 0;
+    this.value = void 0;
     this.width = "100%";
     this.lapisDateField = "";
   }
@@ -11634,9 +11682,7 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
       {
         dateRangeOptions: this.dateRangeOptions,
         earliestDate: this.earliestDate,
-        initialValue: this.initialValue,
-        initialDateFrom: this.initialDateFrom,
-        initialDateTo: this.initialDateTo,
+        value: this.value,
         lapisDateField: this.lapisDateField,
         width: this.width
       }
@@ -11650,14 +11696,8 @@ __decorateClass$4([
   n$1({ type: String })
 ], DateRangeSelectorComponent.prototype, "earliestDate", 2);
 __decorateClass$4([
-  n$1()
-], DateRangeSelectorComponent.prototype, "initialValue", 2);
-__decorateClass$4([
-  n$1()
-], DateRangeSelectorComponent.prototype, "initialDateFrom", 2);
-__decorateClass$4([
-  n$1()
-], DateRangeSelectorComponent.prototype, "initialDateTo", 2);
+  n$1({ type: Object })
+], DateRangeSelectorComponent.prototype, "value", 2);
 __decorateClass$4([
   n$1({ type: String })
 ], DateRangeSelectorComponent.prototype, "width", 2);
@@ -14793,7 +14833,7 @@ const LocationFilter = (props) => {
   return /* @__PURE__ */ u$1(ErrorBoundary, { size, layout: "horizontal", componentProps: props, schema: locationFilterPropsSchema, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(LocationFilterInner, { ...innerProps }) }) });
 };
 const LocationFilterInner = ({ value, fields, placeholderText, lapisFilter }) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const { data, error, isLoading } = useQuery(
     () => fetchAutocompletionList({ fields, lapis, lapisFilter }),
     [fields, lapis, lapisFilter]
@@ -14961,7 +15001,7 @@ const TextInputInner = ({
   placeholderText,
   lapisFilter
 }) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const { data, error, isLoading } = useQuery(
     () => fetchStringAutocompleteList({ lapis, field: lapisField, lapisFilter }),
     [lapisField, lapis, lapisFilter]
@@ -15073,48 +15113,219 @@ 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: [
+    referenceGenome.nucleotideSequences.length === 0 && /* @__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 +15355,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 +15402,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 +15450,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 +15469,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 +15712,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),
@@ -15721,7 +15849,7 @@ const LineageFilterInner = ({
   value,
   lapisFilter
 }) => {
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const { data, error, isLoading } = useQuery(
     () => fetchLineageAutocompleteList({ lapis, field: lapisField, lapisFilter }),
     [lapisField, lapis, lapisFilter]
@@ -15811,7 +15939,7 @@ LineageFilterComponent = __decorateClass([
 ], LineageFilterComponent);
 export {
   AggregateComponent,
-  App,
+  AppComponent,
   DateRangeSelectorComponent,
   LineageFilterComponent,
   LocationFilterComponent,