@genspectrum/dashboard-components 0.4.3 → 0.4.4

package/custom-elements.json

@@ -1124,7 +1124,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' }, headline: { control: 'text' }, }, 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'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, headline: { control: 'text' }, 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'], }"
         },
         {
           "kind": "variable",
@@ -1132,7 +1132,7 @@
           "type": {
             "text": "StoryObj<Required<AggregateProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .filter=${args.filter} .views=${args.views} .width=${args.width} .height=${args.height} .headline=${args.headline} ></gs-aggregate> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], filter: { country: 'USA', }, width: '100%', height: '700px', headline: 'Aggregate', }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .filter=${args.filter} .views=${args.views} .width=${args.width} .height=${args.height} .headline=${args.headline} .initialSortField=${args.initialSortField} .initialSortDirection=${args.initialSortDirection} ></gs-aggregate> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], filter: { country: 'USA', }, width: '100%', height: '700px', headline: 'Aggregate', initialSortField: 'count', initialSortDirection: 'descending', }, }"
         }
       ],
       "exports": [
@@ -1222,6 +1222,26 @@
               "default": "'Aggregate'",
               "description": "The headline of the component. Set to an empty string to hide the headline.",
               "attribute": "headline"
+            },
+            {
+              "kind": "field",
+              "name": "initialSortField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'count'",
+              "description": "The field by which the table is initially sorted.\nMust be one of the fields specified in the fields property, 'count', or 'proportion'.",
+              "attribute": "initialSortField"
+            },
+            {
+              "kind": "field",
+              "name": "initialSortDirection",
+              "type": {
+                "text": "'ascending' | 'descending'"
+              },
+              "default": "'descending'",
+              "description": "The initial sort direction of the table.",
+              "attribute": "initialSortDirection"
             }
           ],
           "attributes": [
@@ -1278,6 +1298,24 @@
               "default": "'Aggregate'",
               "description": "The headline of the component. Set to an empty string to hide the headline.",
               "fieldName": "headline"
+            },
+            {
+              "name": "initialSortField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'count'",
+              "description": "The field by which the table is initially sorted.\nMust be one of the fields specified in the fields property, 'count', or 'proportion'.",
+              "fieldName": "initialSortField"
+            },
+            {
+              "name": "initialSortDirection",
+              "type": {
+                "text": "'ascending' | 'descending'"
+              },
+              "default": "'descending'",
+              "description": "The initial sort direction of the table.",
+              "fieldName": "initialSortDirection"
             }
           ],
           "superclass": {

package/dist/dashboard-components.js

@@ -7285,9 +7285,24 @@ const AggregateTable = ({ data, fields }) => {
   ];
   return /* @__PURE__ */ u$1(Table, { data, columns: headers, pagination: true });
 };
-async function queryAggregateData(variant, fields, lapis, signal) {
+const compareAscending = (a2, b3) => {
+  if (typeof a2 === "number" && typeof b3 === "number") {
+    return a2 - b3;
+  }
+  const strA = a2 != null ? String(a2) : "";
+  const strB = b3 != null ? String(b3) : "";
+  return strA.localeCompare(strB);
+};
+async function queryAggregateData(variant, 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(", ")}`);
+  }
   const fetchData = new FetchAggregatedOperator(variant, fields);
-  const data = (await fetchData.evaluate(lapis, signal)).content;
+  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 data = (await sortData.evaluate(lapis, signal)).content;
   const total = data.reduce((acc, row) => acc + row.count, 0);
   return data.map(
     (row) => ({
@@ -7302,15 +7317,32 @@ const Aggregate = ({
   height,
   headline = "Mutations",
   filter,
-  fields
+  fields,
+  initialSortField,
+  initialSortDirection
 }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregateInner, { fields, filter, views }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+    AggregateInner,
+    {
+      fields,
+      filter,
+      views,
+      initialSortField,
+      initialSortDirection
+    }
+  ) }) }) });
 };
-const AggregateInner = ({ fields, views, filter }) => {
+const AggregateInner = ({
+  fields,
+  views,
+  filter,
+  initialSortField,
+  initialSortDirection
+}) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
-    return queryAggregateData(filter, fields, lapis);
+    return queryAggregateData(filter, fields, lapis, { field: initialSortField, direction: initialSortDirection });
   }, [filter, fields, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -7362,6 +7394,8 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.width = "100%";
     this.height = "700px";
     this.headline = "Aggregate";
+    this.initialSortField = "count";
+    this.initialSortDirection = "descending";
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7372,7 +7406,9 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
         filter: this.filter,
         width: this.width,
         height: this.height,
-        headline: this.headline
+        headline: this.headline,
+        initialSortField: this.initialSortField,
+        initialSortDirection: this.initialSortDirection
       }
     );
   }
@@ -7395,6 +7431,12 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: String })
 ], AggregateComponent.prototype, "headline", 2);
+__decorateClass$4([
+  n2({ type: String })
+], AggregateComponent.prototype, "initialSortField", 2);
+__decorateClass$4([
+  n2({ type: String })
+], AggregateComponent.prototype, "initialSortDirection", 2);
 AggregateComponent = __decorateClass$4([
   t$2("gs-aggregate")
 ], AggregateComponent);