@genspectrum/dashboard-components 0.3.1 → 0.3.2

package/custom-elements.json

@@ -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

@@ -6467,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;
@@ -6486,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,
@@ -6515,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,
@@ -6637,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(
@@ -6648,7 +6661,8 @@ const PrevalenceOverTime = ({
       granularity,
       smoothingWindow,
       views,
-      confidenceIntervalMethods
+      confidenceIntervalMethods,
+      lapisDateField
     }
   ) }) }) });
 };
@@ -6658,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) {
@@ -6808,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(
@@ -6821,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
       }
     );
   }
@@ -6853,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);
@@ -6963,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)
@@ -7048,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(
@@ -7057,7 +7080,8 @@ const RelativeGrowthAdvantage = ({
       views,
       numerator,
       denominator,
-      generationTime
+      generationTime,
+      lapisDateField
     }
   ) }) }) });
 };
@@ -7065,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) {
@@ -7182,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(
@@ -7193,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
       }
     );
   }
@@ -7219,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);