@genspectrum/dashboard-components 0.11.5 → 0.11.6

package/custom-elements.json

@@ -1369,7 +1369,7 @@
           "type": {
             "text": "Meta<Required<AggregateProps>>"
           },
-          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, initialSortField: { control: 'text' }, initialSortDirection: { options: ['ascending', 'descending'], control: { type: 'radio' }, }, }, parameters: withComponentDocs({ fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'host'], country: 'USA', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table', 'bar'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, initialSortField: { control: 'text' }, initialSortDirection: { options: ['ascending', 'descending'], control: { type: 'radio' }, }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1377,7 +1377,23 @@
           "type": {
             "text": "StoryObj<Required<AggregateProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .lapisFilter=${args.lapisFilter} .views=${args.views} .width=${args.width} .height=${args.height} .initialSortField=${args.initialSortField} .initialSortDirection=${args.initialSortDirection} .pageSize=${args.pageSize} ></gs-aggregate> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], lapisFilter: { country: 'USA', }, width: '100%', height: '700px', initialSortField: 'count', initialSortDirection: 'descending', pageSize: 10, }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .lapisFilter=${args.lapisFilter} .views=${args.views} .width=${args.width} .height=${args.height} .initialSortField=${args.initialSortField} .initialSortDirection=${args.initialSortDirection} .pageSize=${args.pageSize} .maxNumberOfBars=${args.maxNumberOfBars} ></gs-aggregate> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'host'], country: 'USA', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, }, args: { fields: ['division', 'host'], views: ['table', 'bar'], lapisFilter: { country: 'USA', }, width: '100%', height: '700px', initialSortField: 'count', initialSortDirection: 'descending', pageSize: 10, maxNumberOfBars: 10, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "BarChartWithOneField",
+          "type": {
+            "text": "StoryObj<Required<AggregateProps>>"
+          },
+          "default": "{ ...Table, args: { ...Table.args, fields: ['division'], views: ['bar', 'table'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division'], country: 'USA', }, }, response: { status: 200, body: aggregatedDataWith1Field, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "BarChartWithTwoFields",
+          "type": {
+            "text": "StoryObj<Required<AggregateProps>>"
+          },
+          "default": "{ ...Table, args: { ...Table.args, fields: ['division', 'nextstrainClade'], lapisFilter: { country: 'Germany', dateTo: '2022-02-01', }, views: ['bar', 'table'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'nextstrainClade'], country: 'Germany', dateTo: '2022-02-01', }, }, response: { status: 200, body: aggregatedDataWith2Fields, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -1396,6 +1412,22 @@
             "name": "Table",
             "module": "src/web-components/visualization/gs-aggregate.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "BarChartWithOneField",
+          "declaration": {
+            "name": "BarChartWithOneField",
+            "module": "src/web-components/visualization/gs-aggregate.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BarChartWithTwoFields",
+          "declaration": {
+            "name": "BarChartWithTwoFields",
+            "module": "src/web-components/visualization/gs-aggregate.stories.ts"
+          }
         }
       ]
     },
@@ -1405,7 +1437,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component displays aggregated data in a table, 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.\n\n## Views\n\n### Table View\n\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).",
+          "description": "## Context\n\nThis component displays aggregated data in a table, 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.\n\n## Views\n\n### Table View\n\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).\n\n### Bar Chart View\n\nIn the bar chart view, the data is presented in vertical bars.\nThe bar chart is supported when `fields` contains one or two entries.\nThe first field will be used as the y-axis.\nIf a second field is provided, it's values will be stacked along the x-axis for each key on the y-axis.\n\nThe chart shows the bars with the highest aggregated `count`.\nThe number of bars can be adjusted with the `maxNumberOfBars` property.",
           "name": "AggregateComponent",
           "members": [
             {
@@ -1487,6 +1519,16 @@
               "default": "false",
               "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
               "attribute": "pageSize"
+            },
+            {
+              "kind": "field",
+              "name": "maxNumberOfBars",
+              "type": {
+                "text": "number"
+              },
+              "default": "20",
+              "description": "The maximum number of bars to display in the bar chart view.",
+              "attribute": "maxNumberOfBars"
             }
           ],
           "attributes": [
@@ -1561,6 +1603,15 @@
               "default": "false",
               "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
               "fieldName": "pageSize"
+            },
+            {
+              "name": "maxNumberOfBars",
+              "type": {
+                "text": "number"
+              },
+              "default": "20",
+              "description": "The maximum number of bars to display in the bar chart view.",
+              "fieldName": "maxNumberOfBars"
             }
           ],
           "superclass": {

package/dist/components.d.ts

@@ -22,6 +22,16 @@ import { TemplateResult } from 'lit-html';
  * along with the aggregated value and its proportion.
  * The proportion represents the ratio of the aggregated value to the total count of the data
  * (considering the applied filter).
+ *
+ * ### Bar Chart View
+ *
+ * In the bar chart view, the data is presented in vertical bars.
+ * The bar chart is supported when `fields` contains one or two entries.
+ * The first field will be used as the y-axis.
+ * If a second field is provided, it's values will be stacked along the x-axis for each key on the y-axis.
+ *
+ * The chart shows the bars with the highest aggregated `count`.
+ * The number of bars can be adjusted with the `maxNumberOfBars` property.
  */
 export declare class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
     /**
@@ -72,12 +82,16 @@ export declare class AggregateComponent extends PreactLitAdapterWithGridJsStyles
      * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
      */
     pageSize: boolean | number;
+    /**
+     * The maximum number of bars to display in the bar chart view.
+     */
+    maxNumberOfBars: number;
     render(): JSX_2.Element;
 }
 
 declare type AggregateView = default_2.infer<typeof aggregateViewSchema>;
 
-declare const aggregateViewSchema: default_2.ZodLiteral<"table">;
+declare const aggregateViewSchema: default_2.ZodUnion<[default_2.ZodLiteral<"table">, default_2.ZodLiteral<"bar">]>;
 
 /**
  * ## Context
@@ -1301,7 +1315,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1309,7 +1323,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1317,7 +1331,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1325,7 +1339,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/components.js

@@ -4,7 +4,7 @@ import { LitElement, html, unsafeCSS } from "lit";
 import z$1 from "zod";
 import { options, createContext as createContext$1, Fragment, render } from "preact";
 import { Grid } from "gridjs";
-import { Chart, registerables, Scale } from "chart.js";
+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, a as dateRangeOptionSchema, b as toYYYYMMDD, D as DateRangeOptionChangedEvent, m as mutationsFilterSchema } from "./dateRangeOption-Bh2p78z0.js";
 import { autoUpdate, computePosition, offset, shift, flip } from "@floating-ui/dom";
@@ -4742,6 +4742,9 @@ input.tab:checked + .tab-content,
 .static {
   position: static;
 }
+.fixed {
+  position: fixed;
+}
 .absolute {
   position: absolute;
 }
@@ -5935,7 +5938,7 @@ const ColorsRGB = {
 const singleGraphColorRGBAById = (id, alpha = 1) => {
   const keys = Object.keys(ColorsRGB);
   const key = keys[id % keys.length];
-  return `rgba(${ColorsRGB[key].join(",")},${alpha})`;
+  return singleGraphColorRGBByName(key, alpha);
 };
 const singleGraphColorRGBByName = (name, alpha = 1) => {
   return `rgba(${ColorsRGB[name].join(",")},${alpha})`;
@@ -8244,15 +8247,9 @@ const compareAscending = (a2, b3) => {
   const strB = b3 != null ? String(b3) : "";
   return strA.localeCompare(strB);
 };
-async function queryAggregateData(lapisFilter, fields, lapis, initialSort = { field: "count", direction: "descending" }, signal) {
-  const validSortFields = ["count", "proportion", ...fields];
-  if (!validSortFields.includes(initialSort.field)) {
-    throw new Error(`InitialSort field not in fields. Valid fields are: ${validSortFields.join(", ")}`);
-  }
+async function queryAggregateData(lapisFilter, fields, lapis, signal) {
   const fetchData = new FetchAggregatedOperator(lapisFilter, fields);
-  const sortData = new SortOperator(fetchData, (a2, b3) => {
-    return initialSort.direction === "ascending" ? compareAscending(a2[initialSort.field], b3[initialSort.field]) : compareAscending(b3[initialSort.field], a2[initialSort.field]);
-  });
+  const sortData = new SortOperator(fetchData, (a2, b3) => compareAscending(b3.count, a2.count));
   const data = (await sortData.evaluate(lapis, signal)).content;
   const total = data.reduce((acc, row) => acc + row.count, 0);
   return data.map(
@@ -8262,7 +8259,13 @@ async function queryAggregateData(lapisFilter, fields, lapis, initialSort = { fi
     })
   );
 }
-const AggregateTable = ({ data, fields, pageSize }) => {
+const AggregateTable = ({
+  data,
+  fields,
+  pageSize,
+  initialSortField,
+  initialSortDirection
+}) => {
   const headers = [
     ...fields.map((field) => {
       return {
@@ -8282,9 +8285,137 @@ const AggregateTable = ({ data, fields, pageSize }) => {
       formatter: (cell) => formatProportion(cell)
     }
   ];
-  return /* @__PURE__ */ u$1(Table, { data, columns: headers, pageSize });
+  const sortedData = T(() => {
+    const validSortFields = ["count", "proportion", ...fields];
+    if (!validSortFields.includes(initialSortField)) {
+      throw new Error(`InitialSort field not in fields. Valid fields are: ${validSortFields.join(", ")}`);
+    }
+    return data.sort(
+      (a2, b3) => initialSortDirection === "ascending" ? compareAscending(a2[initialSortField], b3[initialSortField]) : compareAscending(b3[initialSortField], a2[initialSortField])
+    );
+  }, [data, initialSortField, initialSortDirection, fields]);
+  return /* @__PURE__ */ u$1(Table, { data: sortedData, columns: headers, pageSize });
+};
+Chart.register(...registerables, BarController);
+const AggregateBarChart = ({ data, fields, maxNumberOfBars }) => {
+  if (data.length === 0) {
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
+  }
+  if (fields.length === 0) {
+    throw new UserFacingError(
+      "No fields given",
+      'Cannot display a bar chart when the "fields" attribute of this component is empty, i.e. there are no fields given that the data should be stratified by. This must be fixed by the administrator of this page.'
+    );
+  }
+  if (fields.length > 2) {
+    throw new UserFacingError(
+      "Too many fields given",
+      `Cannot display a bar chart when the "fields" attribute of this component contains more than two values. Got the fields: ${fields.join(", ")}. This must be fixed by the administrator of this page.`
+    );
+  }
+  return /* @__PURE__ */ u$1(AggregateBarChartInner, { data, fields, maxNumberOfBars });
+};
+const AggregateBarChartInner = ({ data, fields, maxNumberOfBars }) => {
+  const config = T(() => {
+    const { datasets: datasets2, countsOfEachBar } = getDatasets$2(fields, maxNumberOfBars, data);
+    return {
+      type: "bar",
+      data: {
+        datasets: datasets2
+      },
+      options: {
+        maintainAspectRatio: false,
+        animation: false,
+        indexAxis: "y",
+        scales: {
+          x: {
+            stacked: true
+          },
+          y: {
+            stacked: true
+          }
+        },
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: {
+            mode: "y",
+            callbacks: {
+              afterTitle: countsOfEachBar === void 0 ? void 0 : (tooltipItems) => {
+                return `Total: ${countsOfEachBar.get(tooltipItems[0].label)}`;
+              },
+              label: (context) => {
+                const { x: x2, proportion } = context.dataset.data[context.dataIndex];
+                return fields.length === 1 ? `${x2} (${formatProportion(proportion)})` : `${context.dataset.label}: ${x2} (${formatProportion(proportion)})`;
+              }
+            }
+          }
+        }
+      }
+    };
+  }, [data, fields, maxNumberOfBars]);
+  return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
-const aggregateViewSchema = z$1.literal(views.table);
+function getDatasets$2(fields, maxNumberOfBars, data) {
+  var _a;
+  const sortedData = data.sort((a2, b3) => b3.count - a2.count);
+  if (fields.length === 1) {
+    return {
+      datasets: [
+        {
+          borderWidth: 1,
+          backgroundColor: singleGraphColorRGBAById(0, 0.3),
+          borderColor: singleGraphColorRGBAById(0),
+          data: sortedData.slice(0, maxNumberOfBars).map((row) => ({
+            y: row[fields[0]],
+            x: row.count,
+            proportion: row.proportion
+          }))
+        }
+      ]
+    };
+  }
+  const map = /* @__PURE__ */ new Map();
+  const countsOfEachBar = /* @__PURE__ */ new Map();
+  for (const row of sortedData) {
+    const yValue = row[fields[0]];
+    const secondaryValue = row[fields[1]];
+    if (yValue === null || secondaryValue === null) {
+      continue;
+    }
+    const yAxisKey = String(yValue);
+    const secondaryKey = String(secondaryValue);
+    if (!map.has(secondaryKey)) {
+      map.set(secondaryKey, []);
+    }
+    (_a = map.get(secondaryKey)) == null ? void 0 : _a.push({
+      y: yAxisKey,
+      x: row.count,
+      proportion: row.proportion
+    });
+    countsOfEachBar.set(yAxisKey, (countsOfEachBar.get(yAxisKey) ?? 0) + row.count);
+  }
+  const datasets2 = Array.from(map.entries()).map(sortAndTruncateYAxisKeys(countsOfEachBar, maxNumberOfBars)).map(([key, value], index) => ({
+    borderWidth: 1,
+    backgroundColor: singleGraphColorRGBAById(index, 0.3),
+    borderColor: singleGraphColorRGBAById(index),
+    label: key,
+    data: value
+  }));
+  return { datasets: datasets2, countsOfEachBar };
+}
+function sortAndTruncateYAxisKeys(countsOfEachBar, maxNumberOfBars) {
+  const yAxisKeysToConsider = new Set(
+    Array.from(countsOfEachBar.entries()).sort((a2, b3) => b3[1] - a2[1]).slice(0, maxNumberOfBars).map(([key]) => key)
+  );
+  return ([key, value]) => {
+    const sortedValues = value.sort((a2, b3) => (countsOfEachBar.get(b3.y) ?? 0) - (countsOfEachBar.get(a2.y) ?? 0));
+    const valuesWithLargestBars = sortedValues.slice(0, maxNumberOfBars).filter((v2) => yAxisKeysToConsider.has(v2.y));
+    return [key, valuesWithLargestBars];
+  };
+}
+const aggregateViewSchema = z$1.union([z$1.literal(views.table), z$1.literal(views.bar)]);
 const aggregatePropsSchema = z$1.object({
   lapisFilter: lapisFilterSchema,
   fields: z$1.array(z$1.string().min(1)),
@@ -8293,7 +8424,8 @@ const aggregatePropsSchema = z$1.object({
   initialSortDirection: z$1.union([z$1.literal("ascending"), z$1.literal("descending")]),
   pageSize: z$1.union([z$1.boolean(), z$1.number()]),
   width: z$1.string(),
-  height: z$1.string()
+  height: z$1.string(),
+  maxNumberOfBars: z$1.number()
 });
 const Aggregate = (componentProps) => {
   const { width, height } = componentProps;
@@ -8304,10 +8436,7 @@ const AggregateInner = (componentProps) => {
   const { fields, lapisFilter, initialSortField, initialSortDirection } = componentProps;
   const lapis = x(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
-    return queryAggregateData(lapisFilter, fields, lapis, {
-      field: initialSortField,
-      direction: initialSortDirection
-    });
+    return queryAggregateData(lapisFilter, fields, lapis);
   }, [lapisFilter, fields, lapis, initialSortField, initialSortDirection]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -8323,7 +8452,7 @@ const AggregateInner = (componentProps) => {
 const AggregatedDataTabs = ({ data, originalComponentProps }) => {
   const getTab = (view) => {
     switch (view) {
-      case "table":
+      case views.table:
         return {
           title: "Table",
           content: /* @__PURE__ */ u$1(
@@ -8331,7 +8460,21 @@ const AggregatedDataTabs = ({ data, originalComponentProps }) => {
             {
               data,
               fields: originalComponentProps.fields,
-              pageSize: originalComponentProps.pageSize
+              pageSize: originalComponentProps.pageSize,
+              initialSortField: originalComponentProps.initialSortField,
+              initialSortDirection: originalComponentProps.initialSortDirection
+            }
+          )
+        };
+      case views.bar:
+        return {
+          title: "Bar",
+          content: /* @__PURE__ */ u$1(
+            AggregateBarChart,
+            {
+              data,
+              fields: originalComponentProps.fields,
+              maxNumberOfBars: originalComponentProps.maxNumberOfBars
             }
           )
         };
@@ -8381,6 +8524,7 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.initialSortField = "count";
     this.initialSortDirection = "descending";
     this.pageSize = false;
+    this.maxNumberOfBars = 20;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -8393,7 +8537,8 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
         height: this.height,
         initialSortField: this.initialSortField,
         initialSortDirection: this.initialSortDirection,
-        pageSize: this.pageSize
+        pageSize: this.pageSize,
+        maxNumberOfBars: this.maxNumberOfBars
       }
     );
   }
@@ -8422,6 +8567,9 @@ __decorateClass$9([
 __decorateClass$9([
   n2({ type: Object })
 ], AggregateComponent.prototype, "pageSize", 2);
+__decorateClass$9([
+  n2({ type: Object })
+], AggregateComponent.prototype, "maxNumberOfBars", 2);
 AggregateComponent = __decorateClass$9([
   t$2("gs-aggregate")
 ], AggregateComponent);
@@ -9103,7 +9251,7 @@ const MutationsOverTimeGrid = ({ data, colorScale }) => {
   ] });
 };
 function getTooltipPosition(rowIndex, rows, columnIndex, columns) {
-  const tooltipX = rowIndex < rows / 2 ? "bottom" : "top";
+  const tooltipX = rowIndex < rows / 2 || rowIndex < 6 ? "bottom" : "top";
   const tooltipY = columnIndex < columns / 2 ? "start" : "end";
   return `${tooltipX}-${tooltipY}`;
 }
@@ -10580,8 +10728,8 @@ SequencesByLocationComponent = __decorateClass$6([
   t$2("gs-sequences-by-location")
 ], SequencesByLocationComponent);
 async function queryGeneralStatistics(numeratorFilter, denominatorFilter, lapis, signal) {
-  const numeratorCount = await queryAggregateData(numeratorFilter, [], lapis, void 0, signal);
-  const denominatorCount = await queryAggregateData(denominatorFilter, [], lapis, void 0, signal);
+  const numeratorCount = await queryAggregateData(numeratorFilter, [], lapis, signal);
+  const denominatorCount = await queryAggregateData(denominatorFilter, [], lapis, signal);
   if (numeratorCount.length === 0 || denominatorCount.length === 0) {
     throw new Error("No data found for the given filters");
   }