@genspectrum/dashboard-components 0.3.0 → 0.3.2

package/custom-elements.json

@@ -483,7 +483,7 @@
           "type": {
             "text": "StoryObj<LocationFilterProps>"
           },
-          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const submitButton = () => canvas.getByRole('button', { name: 'Submit' }); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await userEvent.click(submitButton()); await expect(listenerMock).not.toHaveBeenCalled(); await userEvent.type(inputField(), '{backspace>18/}'); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await userEvent.click(submitButton()); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', }, }), ); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await userEvent.click(submitButton()); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }, }), ); }); }, }"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await expect(listenerMock).not.toHaveBeenCalled(); await userEvent.type(inputField(), '{backspace>18/}'); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', }, }), ); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }, }), ); }); }, }"
         }
       ],
       "exports": [
@@ -574,7 +574,7 @@
               "type": {
                 "text": "CustomEvent<Record<string, string>>"
               },
-              "description": "Fired when the field is submitted with a valid location value. The `details` of this event contain an object with all `fields` as keys and the corresponding values as values, if they are not `undefined`. Example: ``` { continent: \"Asia\", country: \"China\", city: \"Beijing\" } ```",
+              "description": "Fired when a value from the datalist is selected or when a valid value is typed into the field. The `details` of this event contain an object with all `fields` as keys and the corresponding values as values, if they are not `undefined`. Example: ``` { continent: \"Asia\", country: \"China\", city: \"Beijing\" } ```",
               "name": "gs-location-changed"
             }
           ],
@@ -1740,7 +1740,7 @@
           "type": {
             "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { numerator: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], denominator: { country: 'USA', dateFrom: '2023-01-01' }, granularity: 'month', smoothingWindow: 0, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorEG, }, }, { matcher: { name: 'numeratorJN1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorJN1, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: denominator, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { numerator: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], denominator: { country: 'USA', dateFrom: '2023-01-01' }, granularity: 'month', smoothingWindow: 0, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', lapisDateField: 'date', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorEG, }, }, { matcher: { name: 'numeratorJN1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorJN1, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: denominator, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -1748,7 +1748,7 @@
           "type": {
             "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { numerator: { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' }, }, denominator: { country: 'USA', dateFrom: '2023-10-01' }, granularity: 'day', smoothingWindow: 7, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorOneVariant', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: numeratorOneVariant, }, }, { matcher: { name: 'denominatorOneVariant', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: denominatorOneVariant, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { numerator: { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' }, }, denominator: { country: 'USA', dateFrom: '2023-10-01' }, granularity: 'day', smoothingWindow: 7, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', lapisDateField: 'date', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorOneVariant', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: numeratorOneVariant, }, }, { matcher: { name: 'denominatorOneVariant', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: denominatorOneVariant, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -1924,6 +1924,16 @@
               "default": "'700px'",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
+            },
+            {
+              "kind": "field",
+              "name": "lapisDateField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
+              "attribute": "lapisDateField"
             }
           ],
           "attributes": [
@@ -2007,6 +2017,15 @@
               "default": "'700px'",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
+            },
+            {
+              "name": "lapisDateField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
+              "fieldName": "lapisDateField"
             }
           ],
           "superclass": {
@@ -2054,7 +2073,7 @@
           "type": {
             "text": "StoryObj<Required<RelativeGrowthAdvantageProps>>"
           },
-          "default": "{ ...Template, args: { numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, generationTime: 7, views: ['line'], width: '100%', height: '700px', headline: 'Relative growth advantage', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numerator', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: numerator, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: denominator, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, generationTime: 7, views: ['line'], width: '100%', height: '700px', headline: 'Relative growth advantage', lapisDateField: 'date', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numerator', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: numerator, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: denominator, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -2154,6 +2173,16 @@
               "default": "'700px'",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
+            },
+            {
+              "kind": "field",
+              "name": "lapisDateField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
+              "attribute": "lapisDateField"
             }
           ],
           "attributes": [
@@ -2219,6 +2248,15 @@
               "default": "'700px'",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
+            },
+            {
+              "name": "lapisDateField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
+              "fieldName": "lapisDateField"
             }
           ],
           "superclass": {

package/dist/dashboard-components.js

@@ -2617,19 +2617,6 @@ html {
     }
   }
 
-  .btn-outline.btn-primary:hover {
-    --tw-text-opacity: 1;
-    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-  }
-
-  @supports (color: color-mix(in oklab, black, black)) {
-
-    .btn-outline.btn-primary:hover {
-      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    }
-  }
-
   .btn-disabled:hover,
     .btn[disabled]:hover,
     .btn:disabled:hover {
@@ -3099,34 +3086,12 @@ input.tab:checked + .tab-content,
     background-color: var(--btn-color, var(--fallback-b2));
     border-color: var(--btn-color, var(--fallback-b2));
   }
-
-  .btn-primary {
-    --btn-color: var(--fallback-p);
-  }
-}
-@supports (color: color-mix(in oklab, black, black)) {
-
-  .btn-outline.btn-primary.btn-active {
-    background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-  }
 }
 .btn:focus-visible {
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
 }
-.btn-primary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-  outline-color: var(--fallback-p,oklch(var(--p)/1));
-}
-@supports (color: oklch(0% 0 0)) {
-
-  .btn-primary {
-    --btn-color: var(--p);
-  }
-}
 .btn.glass {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -3151,14 +3116,6 @@ input.tab:checked + .tab-content,
   border-color: transparent;
   background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
 }
-.btn-outline.btn-primary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
-}
-.btn-outline.btn-primary.btn-active {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-}
 .btn.btn-disabled,
   .btn[disabled],
   .btn:disabled {
@@ -4309,9 +4266,6 @@ input.tab:checked + .tab-content,
 .me-1 {
   margin-inline-end: 0.25rem;
 }
-.ml-1 {
-  margin-left: 0.25rem;
-}
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -6513,6 +6467,17 @@ class MapOperator {
     };
   }
 }
+class RenameFieldOperator extends MapOperator {
+  constructor(child, oldFieldName, newFieldName) {
+    super(
+      child,
+      (value) => ({
+        ...value,
+        [newFieldName]: value[oldFieldName]
+      })
+    );
+  }
+}
 class SlidingOperator {
   constructor(child, windowSize, aggregate) {
     this.child = child;
@@ -6532,12 +6497,12 @@ class SlidingOperator {
     return { content };
   }
 }
-function queryPrevalenceOverTime(numeratorFilter, denominatorFilter, granularity, smoothingWindow, lapis, signal) {
+function queryPrevalenceOverTime(numeratorFilter, denominatorFilter, granularity, smoothingWindow, lapis, lapisDateField, signal) {
   const numeratorFilters = makeArray(numeratorFilter);
-  const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow);
+  const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow, lapisDateField);
   const subQueries = numeratorFilters.map(async (namedLapisFilter) => {
     const { displayName, lapisFilter } = namedLapisFilter;
-    const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow);
+    const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow, lapisDateField);
     const divide = new DivisionOperator(
       numeratorData,
       denominatorData,
@@ -6561,9 +6526,10 @@ function makeArray(arrayOrSingleItem) {
   }
   return [arrayOrSingleItem];
 }
-function fetchAndPrepare(filter, granularity, smoothingWindow) {
-  const fetchData = new FetchAggregatedOperator(filter, ["date"]);
-  const mapData = new MapOperator(fetchData, (d2) => mapDateToGranularityRange(d2, granularity));
+function fetchAndPrepare(filter, granularity, smoothingWindow, lapisDateField) {
+  const fetchData = new FetchAggregatedOperator(filter, [lapisDateField]);
+  const dataWithFixedDateKey = new RenameFieldOperator(fetchData, lapisDateField, "date");
+  const mapData = new MapOperator(dataWithFixedDateKey, (d2) => mapDateToGranularityRange(d2, granularity));
   const groupByData = new GroupByAndSumOperator(mapData, "dateRange", "count");
   const fillData = new FillMissingOperator(
     groupByData,
@@ -6683,7 +6649,8 @@ const PrevalenceOverTime = ({
   confidenceIntervalMethods,
   width,
   height,
-  headline = "Prevalence over time"
+  headline = "Prevalence over time",
+  lapisDateField
 }) => {
   const size = { height, width };
   return /* @__PURE__ */ u$1(ErrorBoundary, { size, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
@@ -6694,7 +6661,8 @@ const PrevalenceOverTime = ({
       granularity,
       smoothingWindow,
       views,
-      confidenceIntervalMethods
+      confidenceIntervalMethods,
+      lapisDateField
     }
   ) }) }) });
 };
@@ -6704,11 +6672,12 @@ const PrevalenceOverTimeInner = ({
   granularity,
   smoothingWindow,
   views,
-  confidenceIntervalMethods
+  confidenceIntervalMethods,
+  lapisDateField
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
-    () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis),
+    () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis, lapisDateField),
     [lapis, numerator, denominator, granularity, smoothingWindow]
   );
   if (isLoading) {
@@ -6854,6 +6823,7 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.headline = "Prevalence over time";
     this.width = "100%";
     this.height = "700px";
+    this.lapisDateField = "date";
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -6867,7 +6837,8 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         confidenceIntervalMethods: this.confidenceIntervalMethods,
         width: this.width,
         height: this.height,
-        headline: this.headline
+        headline: this.headline,
+        lapisDateField: this.lapisDateField
       }
     );
   }
@@ -6899,6 +6870,9 @@ __decorateClass$6([
 __decorateClass$6([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "height", 2);
+__decorateClass$6([
+  n2({ type: String })
+], PrevalenceOverTimeComponent.prototype, "lapisDateField", 2);
 PrevalenceOverTimeComponent = __decorateClass$6([
   t$2("gs-prevalence-over-time")
 ], PrevalenceOverTimeComponent);
@@ -7009,11 +6983,13 @@ const tooltip = () => {
     }
   };
 };
-async function queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, signal) {
-  const fetchNumerator = new FetchAggregatedOperator(numerator, ["date"]);
-  const fetchDenominator = new FetchAggregatedOperator(denominator, ["date"]);
-  const mapNumerator = new MapOperator(fetchNumerator, toYearMonthDay);
-  const mapDenominator = new MapOperator(fetchDenominator, toYearMonthDay);
+async function queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, lapisDateField, signal) {
+  const fetchNumerator = new FetchAggregatedOperator(numerator, [lapisDateField]);
+  const fetchDenominator = new FetchAggregatedOperator(denominator, [lapisDateField]);
+  const mapToFixedDateKeyNumerator = new RenameFieldOperator(fetchNumerator, lapisDateField, "date");
+  const mapToFixedDateKeyDenominator = new RenameFieldOperator(fetchDenominator, lapisDateField, "date");
+  const mapNumerator = new MapOperator(mapToFixedDateKeyNumerator, toYearMonthDay);
+  const mapDenominator = new MapOperator(mapToFixedDateKeyDenominator, toYearMonthDay);
   const [numeratorData, denominatorData] = await Promise.all([
     mapNumerator.evaluate(lapis, signal),
     mapDenominator.evaluate(lapis, signal)
@@ -7094,7 +7070,8 @@ const RelativeGrowthAdvantage = ({
   numerator,
   denominator,
   generationTime,
-  headline = "Relative growth advantage"
+  headline = "Relative growth advantage",
+  lapisDateField
 }) => {
   const size = { height, width };
   return /* @__PURE__ */ u$1(ErrorBoundary, { size, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
@@ -7103,7 +7080,8 @@ const RelativeGrowthAdvantage = ({
       views,
       numerator,
       denominator,
-      generationTime
+      generationTime,
+      lapisDateField
     }
   ) }) }) });
 };
@@ -7111,12 +7089,13 @@ const RelativeGrowthAdvantageInner = ({
   numerator,
   denominator,
   generationTime,
-  views
+  views,
+  lapisDateField
 }) => {
   const lapis = P(LapisUrlContext);
   const [yAxisScaleType, setYAxisScaleType] = p("linear");
   const { data, error, isLoading } = useQuery(
-    () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis),
+    () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, lapisDateField),
     [lapis, numerator, denominator, generationTime, views]
   );
   if (isLoading) {
@@ -7228,6 +7207,7 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
     this.headline = "Relative growth advantage";
     this.width = "100%";
     this.height = "700px";
+    this.lapisDateField = "date";
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7239,7 +7219,8 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
         views: this.views,
         width: this.width,
         height: this.height,
-        headline: this.headline
+        headline: this.headline,
+        lapisDateField: this.lapisDateField
       }
     );
   }
@@ -7265,6 +7246,9 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "height", 2);
+__decorateClass$5([
+  n2({ type: String })
+], RelativeGrowthAdvantageComponent.prototype, "lapisDateField", 2);
 RelativeGrowthAdvantageComponent = __decorateClass$5([
   t$2("gs-relative-growth-advantage")
 ], RelativeGrowthAdvantageComponent);
@@ -7723,7 +7707,7 @@ const LocationFilterInner = ({ initialValue, fields }) => {
   const lapis = P(LapisUrlContext);
   const [value, setValue] = p(initialValue ?? "");
   const [unknownLocation, setUnknownLocation] = p(false);
-  const formRef = F(null);
+  const divRef = F(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -7732,35 +7716,27 @@ const LocationFilterInner = ({ initialValue, fields }) => {
     return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   const onInput = (event) => {
-    if (event.target instanceof HTMLInputElement) {
-      const inputValue = event.target.value;
-      setValue(inputValue);
-      if (unknownLocation) {
-        const eventDetail = parseLocation(inputValue, fields);
-        if (hasMatchingEntry(data, eventDetail)) {
-          setUnknownLocation(false);
-        }
-      }
-    }
-  };
-  const submit = (event) => {
     var _a;
-    event.preventDefault();
-    const eventDetail = parseLocation(value, fields);
+    const inputValue = event.currentTarget.value;
+    setValue(inputValue);
+    if (inputValue.trim() === value.trim()) {
+      return;
+    }
+    const eventDetail = parseLocation(inputValue, fields);
     if (hasMatchingEntry(data, eventDetail)) {
-      setUnknownLocation(false);
-      (_a = formRef.current) == null ? void 0 : _a.dispatchEvent(
+      (_a = divRef.current) == null ? void 0 : _a.dispatchEvent(
         new CustomEvent("gs-location-changed", {
           detail: eventDetail,
           bubbles: true,
           composed: true
         })
       );
+      setUnknownLocation(false);
     } else {
       setUnknownLocation(true);
     }
   };
-  return /* @__PURE__ */ u$1("form", { class: "flex w-full", onSubmit: submit, ref: formRef, children: [
+  return /* @__PURE__ */ u$1("div", { class: "flex w-full", ref: divRef, children: [
     /* @__PURE__ */ u$1(
       "input",
       {
@@ -7774,8 +7750,7 @@ const LocationFilterInner = ({ initialValue, fields }) => {
     /* @__PURE__ */ u$1("datalist", { id: "countries", children: data == null ? void 0 : data.map((v2) => {
       const value2 = fields.map((field) => v2[field]).filter((value3) => value3 !== null).join(" / ");
       return /* @__PURE__ */ u$1("option", { value: value2 }, value2);
-    }) }),
-    /* @__PURE__ */ u$1("button", { class: "btn btn-primary ml-1", type: "submit", children: "Submit" })
+    }) })
   ] });
 };
 const parseLocation = (location, fields) => {