@genspectrum/dashboard-components 0.13.7 → 0.14.2

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";
@@ -561,7 +561,9 @@ let AppComponent = 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]
     });
@@ -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",
@@ -1544,6 +1554,15 @@ const ErrorBoundary = ({
 }) => {
   const [internalError, resetError] = b2();
   const componentPropsParseError = useCheckComponentProps(schema, componentProps);
+  y(
+    () => {
+      if (internalError) {
+        resetError();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- this should run if and only if the props of the component change
+    [componentProps]
+  );
   if (internalError) {
     return /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(ErrorDisplay, { error: internalError, resetError, layout }) });
   }
@@ -1571,14 +1590,14 @@ const Fullscreen = () => {
     "button",
     {
       ref: element,
-      onClick: async () => {
+      onClick: () => {
         if (element.current) {
           if (isFullscreen) {
-            await document.exitFullscreen();
+            void document.exitFullscreen();
           } else {
             const componentRoot = findComponentRoot(element.current);
             if (componentRoot) {
-              await componentRoot.requestFullscreen();
+              void componentRoot.requestFullscreen();
             }
           }
         }
@@ -1656,7 +1675,7 @@ function useFloatingUi(referenceRef, floatingRef, middleware, placement) {
     const { current: reference } = referenceRef;
     const { current: floating } = floatingRef;
     const update = () => {
-      computePosition(reference, floating, {
+      void computePosition(reference, floating, {
         placement,
         middleware
       }).then(({ x: x2, y: y2 }) => {
@@ -2108,7 +2127,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]);
@@ -2222,7 +2241,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: [
@@ -5546,7 +5565,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);
   }
@@ -5972,7 +5991,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);
@@ -6114,7 +6133,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: [
@@ -7855,7 +7874,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,
@@ -7989,7 +8008,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: [
@@ -8344,7 +8363,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(
@@ -8427,7 +8446,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" }),
@@ -8722,7 +8741,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]);
@@ -8779,7 +8798,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: [
@@ -9038,7 +9057,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]
@@ -9126,7 +9145,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: [
@@ -9547,7 +9566,7 @@ const MutationsOverTimeGrid = ({
                   style: { gridRowStart: rowIndex + 2, gridColumnStart: 1 },
                   children: /* @__PURE__ */ u$1(MutationCell, { mutation })
                 },
-                `mutation-${mutation.toString()}`
+                `mutation-${mutation.code}`
               ),
               dates.map((date, columnIndex) => {
                 const value = data.get(mutation, date) ?? null;
@@ -9572,10 +9591,10 @@ const MutationsOverTimeGrid = ({
                       }
                     )
                   },
-                  `${mutation.toString()}-${date.toString()}`
+                  `${mutation.code}-${date.dateString}`
                 );
               })
-            ] }, `fragment-${mutation.toString()}`);
+            ] }, `fragment-${mutation.code}`);
           })
         ]
       }
@@ -9702,7 +9721,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 {
@@ -9715,6 +9734,7 @@ const MutationsOverTimeInner = (componentProps) => {
   }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType]);
   const { data, error, isLoading } = useWebWorker(
     messageToWorker,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     WorkerWrapper
   );
   if (isLoading) {
@@ -9837,7 +9857,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: [
@@ -10896,7 +10916,7 @@ const SequencesByLocation = (componentProps) => {
 };
 const SequencesByLocationMapInner = (props) => {
   const { lapisFilter, lapisLocationField, mapSource } = props;
-  const lapis = x$1(LapisUrlContext);
+  const lapis = useLapisUrl();
   const {
     data,
     error,
@@ -10978,7 +10998,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" }),
@@ -11089,7 +11109,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]);
@@ -11263,7 +11283,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,
@@ -11325,7 +11345,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" }) }),
@@ -11409,42 +11429,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) {
@@ -11463,9 +11489,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({
@@ -11479,17 +11503,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);
@@ -11504,6 +11523,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"
@@ -11512,7 +11536,7 @@ const DateRangeSelectorInner = ({
       setDateFromPicker(
         flatpickr(fromDatePickerRef.current, {
           ...commonConfig,
-          defaultDate: selectedDates.dateFrom
+          defaultDate: initialValues.initialSelectedDateFrom
         })
       );
     }
@@ -11520,18 +11544,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);
@@ -11541,7 +11571,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())) {
@@ -11606,8 +11636,8 @@ const DateRangeSelectorInner = ({
         onChange: (event) => {
           event.preventDefault();
           const select = event.target;
-          const value = select.value;
-          onSelectChange(value);
+          const value2 = select.value;
+          onSelectChange(value2);
         }
       }
     ),
@@ -11652,9 +11682,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 = "";
   }
@@ -11664,9 +11692,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
       }
@@ -11680,14 +11706,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);
@@ -14823,7 +14843,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]
@@ -14991,7 +15011,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]
@@ -15190,12 +15210,13 @@ const QuickStart = () => {
         /* @__PURE__ */ u$1(ExampleMutation, { mutationType: "insertion", sequenceType: "amino acid" })
       ] })
     ] }) }),
-    referenceGenome.nucleotideSequences.length > 1 ? /* @__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: "This organism doesn't support nucleotide sequences." }),
+    ] }),
+    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(", "),
@@ -15838,7 +15859,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]