@genspectrum/dashboard-components 0.4.2 → 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

@@ -1836,7 +1836,7 @@ const Toolbar$3 = ({
 const gridJsStyle = '.gridjs-head button, .gridjs-footer button {\n  cursor: pointer;\n  background-color: transparent;\n  background-image: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  outline: none;\n}\n\n.gridjs-temp {\n  position: relative;\n}\n\n.gridjs-head {\n  width: 100%;\n  margin-bottom: 5px;\n  padding: 5px 1px;\n}\n.gridjs-head::after {\n  content: "";\n  display: block;\n  clear: both;\n}\n.gridjs-head:empty {\n  padding: 0;\n  border: none;\n}\n\n.gridjs-container {\n  overflow: hidden;\n  display: inline-block;\n  padding: 2px;\n  color: #000;\n  position: relative;\n  z-index: 0;\n}\n\n.gridjs-footer {\n  display: block;\n  position: relative;\n  width: 100%;\n  z-index: 5;\n  padding: 12px 24px;\n  border-top: 1px solid #e5e7eb;\n  background-color: #fff;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);\n  border-radius: 0 0 8px 8px;\n  border-bottom-width: 1px;\n  border-color: #e5e7eb;\n}\n.gridjs-footer:empty {\n  padding: 0;\n  border: none;\n}\n\ninput.gridjs-input {\n  outline: none;\n  background-color: #fff;\n  border: 1px solid #d2d6dc;\n  border-radius: 5px;\n  padding: 10px 13px;\n  font-size: 14px;\n  line-height: 1.45;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\ninput.gridjs-input:focus {\n  box-shadow: 0 0 0 3px rgba(149, 189, 243, 0.5);\n  border-color: #9bc2f7;\n}\n\n.gridjs-pagination {\n  color: #3d4044;\n}\n.gridjs-pagination::after {\n  content: "";\n  display: block;\n  clear: both;\n}\n.gridjs-pagination .gridjs-summary {\n  float: left;\n  margin-top: 5px;\n}\n.gridjs-pagination .gridjs-pages {\n  float: right;\n}\n.gridjs-pagination .gridjs-pages button {\n  padding: 5px 14px;\n  border: 1px solid #d2d6dc;\n  background-color: #fff;\n  border-right: none;\n  outline: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.gridjs-pagination .gridjs-pages button:focus {\n  box-shadow: 0 0 0 2px rgba(149, 189, 243, 0.5);\n  position: relative;\n  margin-right: -1px;\n  border-right: 1px solid #d2d6dc;\n}\n.gridjs-pagination .gridjs-pages button:hover {\n  background-color: #f7f7f7;\n  color: rgb(60, 66, 87);\n  outline: none;\n}\n.gridjs-pagination .gridjs-pages button:disabled,\n.gridjs-pagination .gridjs-pages button[disabled],\n.gridjs-pagination .gridjs-pages button:hover:disabled {\n  cursor: default;\n  background-color: #fff;\n  color: #6b7280;\n}\n.gridjs-pagination .gridjs-pages button.gridjs-spread {\n  cursor: default;\n  box-shadow: none;\n  background-color: #fff;\n}\n.gridjs-pagination .gridjs-pages button.gridjs-currentPage {\n  background-color: #f7f7f7;\n  font-weight: bold;\n}\n.gridjs-pagination .gridjs-pages button:last-child {\n  border-bottom-right-radius: 6px;\n  border-top-right-radius: 6px;\n  border-right: 1px solid #d2d6dc;\n}\n.gridjs-pagination .gridjs-pages button:first-child {\n  border-bottom-left-radius: 6px;\n  border-top-left-radius: 6px;\n}\n.gridjs-pagination .gridjs-pages button:last-child:focus {\n  margin-right: 0;\n}\n\nbutton.gridjs-sort {\n  float: right;\n  height: 24px;\n  width: 13px;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  background-position-x: center;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  border: none;\n  outline: none;\n  background-size: contain;\n}\nbutton.gridjs-sort-neutral {\n  opacity: 0.3;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0MDEuOTk4cHgiIGhlaWdodD0iNDAxLjk5OHB4IiB2aWV3Qm94PSIwIDAgNDAxLjk5OCA0MDEuOTk4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDEuOTk4IDQwMS45OTg7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik03My4wOTIsMTY0LjQ1MmgyNTUuODEzYzQuOTQ5LDAsOS4yMzMtMS44MDcsMTIuODQ4LTUuNDI0YzMuNjEzLTMuNjE2LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0NwoJCQljMC00Ljk0OS0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2LDUuNDI0QzIxMC4yMzIsMS44MTIsMjA1Ljk1MSwwLDIwMC45OTksMHMtOS4yMzMsMS44MTItMTIuODUsNS40MjRMNjAuMjQyLDEzMy4zMzEKCQkJYy0zLjYxNywzLjYxNy01LjQyNCw3LjkwMS01LjQyNCwxMi44NWMwLDQuOTQ4LDEuODA3LDkuMjMxLDUuNDI0LDEyLjg0N0M2My44NjMsMTYyLjY0NSw2OC4xNDQsMTY0LjQ1Miw3My4wOTIsMTY0LjQ1MnoiLz4KCQk8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3CgkJCWMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2CgkJCWMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: center;\n}\nbutton.gridjs-sort-asc {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MXB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjE7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDE5Ny4yODdMMTU5LjAyOCw2OS4zODFjLTMuNjEzLTMuNjE3LTcuODk1LTUuNDI0LTEyLjg0Ny01LjQyNHMtOS4yMzMsMS44MDctMTIuODUsNS40MjRMNS40MjQsMTk3LjI4NwoJCUMxLjgwNywyMDAuOTA0LDAsMjA1LjE4NiwwLDIxMC4xMzRzMS44MDcsOS4yMzMsNS40MjQsMTIuODQ3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI1LDEyLjg1LDUuNDI1aDI1NS44MTMKCQljNC45NDksMCw5LjIzMy0xLjgwOCwxMi44NDgtNS40MjVjMy42MTMtMy42MTMsNS40MjctNy44OTgsNS40MjctMTIuODQ3UzI5MC41NDgsMjAwLjkwNCwyODYuOTM1LDE5Ny4yODd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: 35%;\n  background-size: 10px;\n}\nbutton.gridjs-sort-desc {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MnB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjI7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDY5LjM3N2MtMy42MTQtMy42MTctNy44OTgtNS40MjQtMTIuODQ4LTUuNDI0SDE4LjI3NGMtNC45NTIsMC05LjIzMywxLjgwNy0xMi44NSw1LjQyNAoJCUMxLjgwNyw3Mi45OTgsMCw3Ny4yNzksMCw4Mi4yMjhjMCw0Ljk0OCwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDdsMTI3LjkwNywxMjcuOTA3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4CgkJczkuMjMzLTEuODExLDEyLjg0Ny01LjQyOEwyODYuOTM1LDk1LjA3NGMzLjYxMy0zLjYxNyw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDdDMjkyLjM2Miw3Ny4yNzksMjkwLjU0OCw3Mi45OTgsMjg2LjkzNSw2OS4zNzd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: 65%;\n  background-size: 10px;\n}\nbutton.gridjs-sort:focus {\n  outline: none;\n}\n\ntable.gridjs-table {\n  width: 100%;\n  max-width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n  display: table;\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  table-layout: fixed;\n}\n\n.gridjs-tbody {\n  background-color: #fff;\n}\n\ntd.gridjs-td {\n  border: 1px solid #e5e7eb;\n  padding: 12px 24px;\n  background-color: #fff;\n  box-sizing: content-box;\n}\ntd.gridjs-td:first-child {\n  border-left: none;\n}\ntd.gridjs-td:last-child {\n  border-right: none;\n}\ntd.gridjs-message {\n  text-align: center;\n}\n\nth.gridjs-th {\n  position: relative;\n  color: #6b7280;\n  background-color: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-top: none;\n  padding: 14px 24px;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  outline: none;\n  vertical-align: middle;\n}\nth.gridjs-th .gridjs-th-content {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n  float: left;\n}\nth.gridjs-th-sort {\n  cursor: pointer;\n}\nth.gridjs-th-sort .gridjs-th-content {\n  width: calc(100% - 15px);\n}\nth.gridjs-th-sort:hover {\n  background-color: #e5e7eb;\n}\nth.gridjs-th-sort:focus {\n  background-color: #e5e7eb;\n}\nth.gridjs-th-fixed {\n  position: sticky;\n  box-shadow: 0 1px 0 0 #e5e7eb;\n}\n@supports (-moz-appearance: none) {\n  th.gridjs-th-fixed {\n    box-shadow: 0 0 0 1px #e5e7eb;\n  }\n}\nth.gridjs-th:first-child {\n  border-left: none;\n}\nth.gridjs-th:last-child {\n  border-right: none;\n}\n\n.gridjs-tr {\n  border: none;\n}\n.gridjs-tr-selected td {\n  background-color: #ebf5ff;\n}\n.gridjs-tr:last-child td {\n  border-bottom: 0;\n}\n\n.gridjs *,\n.gridjs :after,\n.gridjs :before {\n  box-sizing: border-box;\n}\n\n.gridjs-wrapper {\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);\n  border-radius: 8px 8px 0 0;\n  display: block;\n  border-top-width: 1px;\n  border-color: #e5e7eb;\n}\n.gridjs-wrapper:nth-last-of-type(2) {\n  border-radius: 8px;\n  border-bottom-width: 1px;\n}\n\n.gridjs-search {\n  float: left;\n}\n.gridjs-search-input {\n  width: 250px;\n}\n\n.gridjs-loading-bar {\n  z-index: 10;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: #fff;\n  opacity: 0.5;\n}\n.gridjs-loading-bar::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(204, 204, 204, 0) 0, rgba(204, 204, 204, 0.2) 20%, rgba(204, 204, 204, 0.5) 60%, rgba(204, 204, 204, 0));\n  animation: shimmer 2s infinite;\n  content: "";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.gridjs-td .gridjs-checkbox {\n  display: block;\n  margin: auto;\n  cursor: pointer;\n}\n\n.gridjs-resizable {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  width: 5px;\n}\n.gridjs-resizable:hover {\n  cursor: ew-resize;\n  background-color: #9bc2f7;\n}\n/*# sourceMappingURL=mermaid.css?inline.map */';
 const minMaxPercentSliderCss = 'input[type=range]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    pointer-events: all;\n    width: 24px;\n    height: 24px;\n    background-color: #fff;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px #C6C6C6;\n    cursor: pointer;\n}\n\ninput[type=range]::-moz-range-thumb {\n    -webkit-appearance: none;\n    pointer-events: all;\n    width: 24px;\n    height: 24px;\n    background-color: #fff;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px #C6C6C6;\n    cursor: pointer;\n}\n\ninput[type=range]::-webkit-slider-thumb:hover {\n    background: #f7f7f7;\n}\n\ninput[type=range]::-webkit-slider-thumb:active {\n    box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;\n    -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;\n}\n\ninput[type="range"] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n         appearance: none;\n    height: 2px;\n    width: 100%;\n    position: absolute;\n    background-color: #C6C6C6;\n    pointer-events: none;\n}';
 const tailwindStyle = `/*
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -2295,6 +2295,10 @@ html {
   -webkit-tap-highlight-color: transparent;
 }
 
+* {
+  scrollbar-color: currentColor transparent;
+}
+
 :root {
   color-scheme: light;
   --in: 72.06% 0.191 231.6;
@@ -7281,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) => ({
@@ -7298,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, {});
@@ -7358,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(
@@ -7368,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
       }
     );
   }
@@ -7391,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);
@@ -7516,7 +7562,7 @@ const DateRangeSelector = ({
   initialDateTo
 }) => {
   const size2 = { width, height: "3rem" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1("div", { style: { width }, children: /* @__PURE__ */ u$1(
     DateRangeSelectorInner,
     {
       customSelectOptions,