@genspectrum/dashboard-components 0.1.1 → 0.1.3

package/README.md

@@ -7,7 +7,7 @@ data of a specific instance of [LAPIS](https://github.com/GenSpectrum/LAPIS).
 
 Documentation of the components is available in the deployed [Storybook](https://genspectrum.github.io/dashboards/).
 
-We also provide examples of how to use the components in the [examples](../examples) folder.
+We also provide examples of how to use the components in the [examples](https://github.com/GenSpectrum/dashboards/tree/main/examples) folder.
 
 ### npm
 

package/custom-elements.json

@@ -128,6 +128,148 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/display/aggregate-component.mdx",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/display/aggregate-component.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta<AggregateProps>"
+          },
+          "default": "{\n    title: 'Visualization/Aggregate',\n    component: 'gs-aggregate-component',\n    argTypes: {\n        fields: [{ control: 'object' }],\n        views: {\n            options: ['table'],\n            control: { type: 'check' },\n        },\n    },\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: {\n                        name: 'aggregatedData',\n                        url: AGGREGATED_ENDPOINT,\n                        body: {\n                            fields: ['division', 'host'],\n                            country: 'USA',\n                        },\n                    },\n                    response: {\n                        status: 200,\n                        body: aggregatedData,\n                    },\n                },\n            ],\n        },\n    },\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "Table",
+          "type": {
+            "text": "StoryObj<AggregateProps>"
+          },
+          "default": "{\n    render: (args) => html`\n        <div class=\"w-11/12 h-11/12\">\n            <gs-app lapis=\"${LAPIS_URL}\">\n                <gs-aggregate-component\n                    .fields=${args.fields}\n                    .filter=${args.filter}\n                    .views=${args.views}\n                ></gs-aggregate-component>\n            </gs-app>\n        </div>\n    `,\n    args: {\n        fields: ['division', 'host'],\n        views: ['table'],\n        filter: {\n            country: 'USA',\n        },\n    },\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/web-components/display/aggregate-component.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Table",
+          "declaration": {
+            "name": "Table",
+            "module": "src/web-components/display/aggregate-component.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/display/aggregate-component.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "## Tag\n\n`gs-aggregate-component`\n\n## Context\n\nThis component displays aggregated data, which can provide an overview of the underlying data.\n\nIt expects a list of fields to aggregate by and a filter to apply to the data.",
+          "name": "AggregateComponent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "fields",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The fields to aggregate by.",
+              "attribute": "fields"
+            },
+            {
+              "kind": "field",
+              "name": "views",
+              "type": {
+                "text": "View[]"
+              },
+              "default": "['table']",
+              "description": "The views are used to display the aggregated data.\nIn the table view, the data is presented in a table format where each field is a column,\nalong with the aggregated value and its proportion.\nThe proportion represents the ratio of the aggregated value to the total count of the data\n(considering the applied filter).",
+              "attribute": "views"
+            },
+            {
+              "kind": "field",
+              "name": "filter",
+              "type": {
+                "text": "LapisFilter"
+              },
+              "default": "{}",
+              "description": "The filter to apply to the data.",
+              "attribute": "filter"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "fields",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The fields to aggregate by.",
+              "fieldName": "fields"
+            },
+            {
+              "name": "views",
+              "type": {
+                "text": "View[]"
+              },
+              "default": "['table']",
+              "description": "The views are used to display the aggregated data.\nIn the table view, the data is presented in a table format where each field is a column,\nalong with the aggregated value and its proportion.\nThe proportion represents the ratio of the aggregated value to the total count of the data\n(considering the applied filter).",
+              "fieldName": "views"
+            },
+            {
+              "name": "filter",
+              "type": {
+                "text": "LapisFilter"
+              },
+              "default": "{}",
+              "description": "The filter to apply to the data.",
+              "fieldName": "filter"
+            }
+          ],
+          "superclass": {
+            "name": "PreactLitAdapterWithGridJsStyles",
+            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
+          },
+          "tagName": "gs-aggregate-component",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AggregateComponent",
+          "declaration": {
+            "name": "AggregateComponent",
+            "module": "src/web-components/display/aggregate-component.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "gs-aggregate-component",
+          "declaration": {
+            "name": "AggregateComponent",
+            "module": "src/web-components/display/aggregate-component.tsx"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/display/index.ts",
@@ -164,6 +306,14 @@
             "name": "RelativeGrowthAdvantageComponent",
             "module": "./relative-growth-advantage-component"
           }
+        },
+        {
+          "kind": "js",
+          "name": "AggregateComponent",
+          "declaration": {
+            "name": "AggregateComponent",
+            "module": "./aggregate-component"
+          }
         }
       ]
     },
@@ -1093,7 +1243,7 @@
           "type": {
             "text": "StoryObj<LocationFilterProps>"
           },
-          "default": "{\n    ...Template,\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: aggregatedEndpointMatcher,\n                    response: {\n                        status: 500,\n                        body: { error: 'no data' },\n                    },\n                },\n            ],\n        },\n    },\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');\n\n        await waitFor(() =>\n            expect(\n                canvas.getByText('Internal Server Error: {\"error\":\"no data\"} ', { exact: false }),\n            ).toBeInTheDocument(),\n        );\n    },\n}"
+          "default": "{\n    ...Template,\n    parameters: {\n        fetchMock: {\n            mocks: [\n                {\n                    matcher: aggregatedEndpointMatcher,\n                    response: {\n                        status: 400,\n                        body: { error: 'no data' },\n                    },\n                },\n            ],\n        },\n    },\n    play: async ({ canvasElement }) => {\n        const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');\n\n        await waitFor(() =>\n            expect(canvas.getByText('Bad Request: {\"error\":\"no data\"} ', { exact: false })).toBeInTheDocument(),\n        );\n    },\n}"
         },
         {
           "kind": "variable",

package/dist/dashboard-components.js

@@ -448,7 +448,7 @@ async function fetchReferenceGenome(lapisUrl, signal) {
 }
 const handleErrors = async (response) => {
   if (!response.ok) {
-    if (response.status % 500 === 0) {
+    if (response.status >= 400 && response.status < 500) {
       throw new Error(`${response.statusText}: ${JSON.stringify(await response.json())}`);
     }
     throw new Error(`${response.statusText}: ${response.status}`);
@@ -462,15 +462,15 @@ const substitutionsOrDeletionsEndpoint = (lapisUrl, sequenceType) => {
   return sequenceType === "amino acid" ? `${lapisUrl}/sample/aminoAcidMutations` : `${lapisUrl}/sample/nucleotideMutations`;
 };
 const referenceGenomeEndpoint = (lapisUrl) => `${lapisUrl}/sample/referenceGenome`;
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$9(target, key, result);
+    __defProp$a(target, key, result);
   return result;
 };
 let App = class extends LitElement {
@@ -504,14 +504,14 @@ let App = class extends LitElement {
     return this;
   }
 };
-__decorateClass$9([
+__decorateClass$a([
   provide({ context: lapisContext }),
   n2()
 ], App.prototype, "lapis", 2);
-__decorateClass$9([
+__decorateClass$a([
   provide({ context: referenceGenomeContext })
 ], App.prototype, "referenceGenome", 2);
-App = __decorateClass$9([
+App = __decorateClass$a([
   t$2("gs-app")
 ], App);
 var f$1 = 0;
@@ -1486,7 +1486,7 @@ const MutationComparisonTabs = ({ data, views, sequenceType }) => {
     {
       tabs,
       toolbar: /* @__PURE__ */ u$1(
-        Toolbar$2,
+        Toolbar$3,
         {
           displayedSegments,
           setDisplayedSegments,
@@ -1500,7 +1500,7 @@ const MutationComparisonTabs = ({ data, views, sequenceType }) => {
     }
   );
 };
-const Toolbar$2 = ({
+const Toolbar$3 = ({
   displayedSegments,
   setDisplayedSegments,
   displayedMutationTypes,
@@ -4080,15 +4080,15 @@ input.tab:checked + .tab-content,
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }`;
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$8(target, key, result);
+    __defProp$9(target, key, result);
   return result;
 };
 const tailwindElementCss = unsafeCSS(tailwindStyle);
@@ -4111,10 +4111,10 @@ const _PreactLitAdapter = class _PreactLitAdapter extends b {
 };
 _PreactLitAdapter.styles = [tailwindElementCss, minMaxPercentSliderElementCss];
 let PreactLitAdapter = _PreactLitAdapter;
-__decorateClass$8([
+__decorateClass$9([
   consume({ context: lapisContext })
 ], PreactLitAdapter.prototype, "lapis", 2);
-__decorateClass$8([
+__decorateClass$9([
   consume({ context: referenceGenomeContext, subscribe: true })
 ], PreactLitAdapter.prototype, "referenceGenome", 2);
 const gridJsElementCss = unsafeCSS(gridJsStyle);
@@ -4122,15 +4122,15 @@ const _PreactLitAdapterWithGridJsStyles = class _PreactLitAdapterWithGridJsStyle
 };
 _PreactLitAdapterWithGridJsStyles.styles = [...PreactLitAdapter.styles, gridJsElementCss];
 let PreactLitAdapterWithGridJsStyles = _PreactLitAdapterWithGridJsStyles;
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$7(target, key, result);
+    __defProp$8(target, key, result);
   return result;
 };
 let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -4144,16 +4144,16 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     return /* @__PURE__ */ u$1(MutationComparison, { variants: this.variants, sequenceType: this.sequenceType, views: this.views });
   }
 };
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: Array })
 ], MutationComparisonComponent.prototype, "variants", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "sequenceType", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: Array })
 ], MutationComparisonComponent.prototype, "views", 2);
-MutationComparisonComponent = __decorateClass$7([
+MutationComparisonComponent = __decorateClass$8([
   t$2("gs-mutation-comparison-component")
 ], MutationComparisonComponent);
 function getInsertionsTableData(data) {
@@ -4474,7 +4474,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views }) => {
   };
   const tabs = views.map((view) => getTab(view));
   const toolbar = (activeTab) => /* @__PURE__ */ u$1(
-    Toolbar$1,
+    Toolbar$2,
     {
       activeTab,
       displayedSegments,
@@ -4488,7 +4488,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views }) => {
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
-const Toolbar$1 = ({
+const Toolbar$2 = ({
   activeTab,
   displayedSegments,
   setDisplayedSegments,
@@ -4537,15 +4537,15 @@ const Toolbar$1 = ({
     /* @__PURE__ */ u$1(Info, { className: "mx-1", content: "Info for mutations" })
   ] });
 };
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$6(target, key, result);
+    __defProp$7(target, key, result);
   return result;
 };
 let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -4559,16 +4559,16 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
     return /* @__PURE__ */ u$1(Mutations, { variant: this.variant, sequenceType: this.sequenceType, views: this.views });
   }
 };
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: Object })
 ], MutationsComponent.prototype, "variant", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: String })
 ], MutationsComponent.prototype, "sequenceType", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: Array })
 ], MutationsComponent.prototype, "views", 2);
-MutationsComponent = __decorateClass$6([
+MutationsComponent = __decorateClass$7([
   t$2("gs-mutations-component")
 ], MutationsComponent);
 function getPrevalenceOverTimeTableData(data, granularity) {
@@ -6180,7 +6180,7 @@ const PrevalenceOverTimeTabs = ({
   };
   const tabs = views.map((view) => getTab(view));
   const toolbar = (activeTab) => /* @__PURE__ */ u$1(
-    Toolbar,
+    Toolbar$1,
     {
       activeTab,
       yAxisScaleType,
@@ -6194,7 +6194,7 @@ const PrevalenceOverTimeTabs = ({
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
-const Toolbar = ({
+const Toolbar$1 = ({
   activeTab,
   yAxisScaleType,
   setYAxisScaleType,
@@ -6225,15 +6225,15 @@ const Toolbar = ({
     /* @__PURE__ */ u$1(Info, { className: "ml-1", content: "Info for prevalence over time" })
   ] });
 };
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$5(target, key, result);
+    __defProp$6(target, key, result);
   return result;
 };
 let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -6260,25 +6260,25 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     );
   }
 };
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "numerator", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "denominator", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "granularity", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Number })
 ], PrevalenceOverTimeComponent.prototype, "smoothingWindow", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Array })
 ], PrevalenceOverTimeComponent.prototype, "views", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Array })
 ], PrevalenceOverTimeComponent.prototype, "confidenceIntervalMethods", 2);
-PrevalenceOverTimeComponent = __decorateClass$5([
+PrevalenceOverTimeComponent = __decorateClass$6([
   t$2("gs-prevalence-over-time")
 ], PrevalenceOverTimeComponent);
 Chart.register(...registerables, LogitScale);
@@ -6535,15 +6535,15 @@ const RelativeGrowthAdvantageToolbar = ({
     /* @__PURE__ */ u$1(Info, { className: "ml-1", content: "Line chart" })
   ] });
 };
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$4(target, key, result);
+    __defProp$5(target, key, result);
   return result;
 };
 let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
@@ -6566,21 +6566,122 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
     );
   }
 };
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Object })
 ], RelativeGrowthAdvantageComponent.prototype, "numerator", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Object })
 ], RelativeGrowthAdvantageComponent.prototype, "denominator", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Number })
 ], RelativeGrowthAdvantageComponent.prototype, "generationTime", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Array })
 ], RelativeGrowthAdvantageComponent.prototype, "views", 2);
-RelativeGrowthAdvantageComponent = __decorateClass$4([
+RelativeGrowthAdvantageComponent = __decorateClass$5([
   t$2("gs-relative-growth-advantage")
 ], RelativeGrowthAdvantageComponent);
+const AggregateTable = ({ data, fields }) => {
+  const headers = [
+    ...fields.map((field) => {
+      return {
+        name: field,
+        sort: true
+      };
+    }),
+    {
+      name: "count",
+      sort: true
+    },
+    {
+      name: "proportion",
+      sort: true,
+      formatter: (cell) => formatProportion(cell)
+    }
+  ];
+  return /* @__PURE__ */ u$1(Table, { data, columns: headers, pagination: true });
+};
+async function queryAggregateData(variant, fields, lapis, signal) {
+  const fetchData = new FetchAggregatedOperator(variant, fields);
+  const data = (await fetchData.evaluate(lapis, signal)).content;
+  const total = data.reduce((acc, row) => acc + row.count, 0);
+  return data.map(
+    (row) => ({
+      ...row,
+      proportion: row.count / total
+    })
+  );
+}
+const Aggregate = ({ fields, views, filter }) => {
+  const lapis = P(LapisUrlContext);
+  const { data, error, isLoading } = useQuery(async () => {
+    return queryAggregateData(filter, fields, lapis);
+  }, [filter, fields, lapis]);
+  const headline = "Aggregate";
+  if (isLoading) {
+    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
+  }
+  if (error !== null) {
+    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error }) });
+  }
+  if (data === null) {
+    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
+  }
+  return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregatedDataTabs, { data, views, fields }) });
+};
+const AggregatedDataTabs = ({ data, views, fields }) => {
+  const getTab = (view) => {
+    switch (view) {
+      case "table":
+        return {
+          title: "Table",
+          content: /* @__PURE__ */ u$1(AggregateTable, { data, fields })
+        };
+    }
+  };
+  const tabs = views.map((view) => getTab(view));
+  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar, { data }) });
+};
+const Toolbar = ({ data }) => {
+  return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
+    /* @__PURE__ */ u$1(CsvDownloadButton, { className: "mx-1 btn btn-xs", getData: () => data, filename: "aggregate.csv" }),
+    /* @__PURE__ */ u$1(Info, { className: "mx-1", content: "Info for aggregate" })
+  ] });
+};
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$4(target, key, result);
+  return result;
+};
+let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
+  constructor() {
+    super(...arguments);
+    this.fields = [];
+    this.views = ["table"];
+    this.filter = {};
+  }
+  render() {
+    return /* @__PURE__ */ u$1(Aggregate, { fields: this.fields, views: this.views, filter: this.filter });
+  }
+};
+__decorateClass$4([
+  n2({ type: Array })
+], AggregateComponent.prototype, "fields", 2);
+__decorateClass$4([
+  n2({ type: Array })
+], AggregateComponent.prototype, "views", 2);
+__decorateClass$4([
+  n2({ type: Object })
+], AggregateComponent.prototype, "filter", 2);
+AggregateComponent = __decorateClass$4([
+  t$2("gs-aggregate-component")
+], AggregateComponent);
 const toYYYYMMDD = (date) => {
   if (!date) {
     return void 0;
@@ -7309,6 +7410,7 @@ MutationFilterComponent = __decorateClass([
   t$2("gs-mutation-filter")
 ], MutationFilterComponent);
 export {
+  AggregateComponent,
   App,
   DateRangeSelectorComponent,
   LocationFilterComponent,