@genspectrum/dashboard-components 0.4.5 → 0.5.1

package/dist/genspectrum-components.d.ts

@@ -44,13 +44,13 @@ export declare class AggregateComponent extends PreactLitAdapterWithGridJsStyles
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
     /**
@@ -172,7 +172,7 @@ export declare class DateRangeSelectorComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
@@ -230,7 +230,7 @@ export declare class LocationFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
@@ -243,8 +243,8 @@ export declare class LocationFilterComponent extends PreactLitAdapter {
 /**
  * ## Context
  *
- * This component allows to compare mutations between different variants.
- * A variant is defined by its LAPIS filter.
+ * This component allows to compare mutations between two different datasets.
+ * The datasets are selected by LAPIS filters.
  *
  * It only shows substitutions and deletions, it does not show insertions.
  *
@@ -252,32 +252,31 @@ export declare class LocationFilterComponent extends PreactLitAdapter {
  *
  * ### Table View
  *
- * The table view shows mutations
- * and the proportions with which the mutation occurs in the respective variant.
- * It only shows mutations that are present in at least one of the variants
- * and where the proportion is within the selected proportion interval for at least one variant.
+ * The table view shows mutations and the proportions with which the mutation occurs in the respective data subsets.
+ * It only shows mutations that are present in at least one of the data subsets
+ * and where the proportion is within the selected proportion interval for at least one data subset.
  *
  * ### Venn View
  *
- * The Venn view shows the overlap of mutations between the variants in a Venn diagram.
- * A variant is considered to have a certain mutation,
- * if the proportion of the mutation in the variant is within the selected proportion interval.
- * Thus, changing the proportion interval may change a mutations from being "common" between variant
- * to being "for one variant only".
+ * The Venn view shows the overlap of mutations between the datasets in a Venn diagram.
+ * A dataset is considered to have a certain mutation, if the proportion of the mutation in the dataset is within the
+ * selected proportion interval.
+ * Thus, changing the proportion interval may change a mutations from being "common" between the datasets
+ * to being "for one dataset only".
  */
 export declare class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * Required.
      *
-     * An array of variants to compare.
+     * An array of LAPIS filters to select the data to compare.
      *
      * The `lapisFilter` will be sent as is to LAPIS to filter the mutation data.
      * It must be a valid LAPIS filter object.
      *
-     * The `displayName` will be used as the label for the variant in the views.
+     * The `displayName` will be used as the label for the filtered dataset in the views.
      * It should be human-readable.
      */
-    variants: {
+    lapisFilters: {
         lapisFilter: Record<string, string | number | null | boolean>;
         displayName: string;
     }[];
@@ -292,13 +291,13 @@ export declare class MutationComparisonComponent extends PreactLitAdapterWithGri
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
     /**
@@ -382,7 +381,7 @@ export declare class MutationFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     render(): JSX_2.Element;
@@ -391,15 +390,15 @@ export declare class MutationFilterComponent extends PreactLitAdapter {
 /**
  * ## Context
  *
- * This component displays mutations (substitutions, deletions and insertions) for a given variant.
+ * This component displays mutations (substitutions, deletions and insertions) for a dataset selected by a LAPIS filter.
  *
  * ## Views
  *
  * ### Table View
  *
- * The table view shows all substitutions and deletions for the given variant.
+ * The table view shows all substitutions and deletions for the dataset.
  * It shows the type (substitution or deletion), the total count of the mutation
- * and the proportion of the mutation in the variant.
+ * and the proportion of the mutation in the dataset.
  * The proportion is relative to the total number of sequences matching
  * the specified sequence filters with non-ambiguous reads at that position.
  *
@@ -412,17 +411,16 @@ export declare class MutationFilterComponent extends PreactLitAdapter {
  *
  * ### Insertions View
  *
- * The insertions view shows the count of all insertions for the given variant.
+ * The insertions view shows the count of all insertions for the dataset.
  *
  */
 export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * Required.
      *
-     * The `variant` will be sent as is to LAPIS to filter the mutation data.
-     * It must be a valid LAPIS filter object.
+     * LAPIS filter to select the displayed data.
      */
-    variant: Record<string, string | number | null | boolean>;
+    lapisFilter: Record<string, string | number | null | boolean>;
     /**
      * The type of the sequence for which the mutations should be shown.
      */
@@ -434,13 +432,13 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
     /**
@@ -470,9 +468,9 @@ declare abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter
 /**
  * ## Context
  *
- * This component displays the prevalence over time of one or more variants.
- * The prevalence is calculated as the ratio of the number of cases of each variant given as `numerator`
- * to the number of cases of the variant given as `denominator`.
+ * This component displays the prevalence over time of one or more datasets, selected by LAPIS filters.
+ * The prevalence is calculated as the ratio of the number of cases of each dataset to the number of cases of a reference dataset.
+ * The reference dataset is also selected by a LAPIS filter.
  *
  * In the chart views,
  * - the user can select whether to display a confidence interval (not available in the bubble chart).
@@ -486,19 +484,19 @@ declare abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter
  * ### Bar View
  *
  * Displays the prevalence over time as a bar chart.
- * Shows a bar for each variant in the `numerator` on every time step.
+ * Shows a bar for each dataset of the `numeratorFilter` on every time step.
  *
  * ### Line View
  *
  * Displays the prevalence over time as a line chart.
  * Each data point is connected for better visibility.
- * Shows a line for each variant in the `numerator`.
+ * Shows a line for each dataset of the `numeratorFilter`.
  *
  * ### Bubble View
  *
  * Displays the prevalence over time as a bubble chart.
- * The size of the bubbles represents the number of cases of the `denominator` variant.
- * The height of the bubbles represents the prevalence of the `numerator` variants.
+ * The size of the bubbles represents the number of cases of the reference, defined by the `denominatorFilter`.
+ * The height of the bubbles represents the prevalence of the datasets selected by the `numeratorFilters`.
  *
  * ### Table View
  *
@@ -507,13 +505,16 @@ declare abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter
 export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      *   Required.
+     * Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.
+     *
+     * The `lapisFilter` will be sent as is to LAPIS to select the data.
+     * It must be a valid LAPIS filter object.
+     *
+     * The `displayName` will be used as the label the prevalence in the views.
+     * It should be human-readable.
      *
-     * Either a single variant or an array of variants to compare.
-     * This must be a valid LAPIS filter object with an additional `displayName` property
-     * which will be used as the label for the variant in the views,
-     * or an array of such objects.
      */
-    numerator: {
+    numeratorFilter: {
         lapisFilter: Record<string, string | number | null | boolean>;
         displayName: string;
     } | {
@@ -523,9 +524,10 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
     /**
      * Required.
      *
-     * The variant that the variants in `numerator` are compared to.
+     * The LAPIS filter, to select the data of the reference.
+     * It must be a valid LAPIS filter object.
      */
-    denominator: Record<string, string | number | null | boolean>;
+    denominatorFilter: Record<string, string | number | null | boolean>;
     /**
      * The granularity of the time axis.
      */
@@ -557,13 +559,13 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
     /**
@@ -579,6 +581,22 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
      * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
      */
     pageSize: boolean | number;
+    /**
+     * The maximum value for the y-axis on all graphs in linear view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    yAxisMaxLinear: 'maxInData' | 'limitTo1' | number;
+    /**
+     * The maximum value for the y-axis on all graphs in logarithmic view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    yAxisMaxLogarithmic: 'maxInData' | 'limitTo1' | number;
     render(): JSX_2.Element;
 }
 
@@ -631,7 +649,7 @@ declare const referenceGenomeResponse: default_2.ZodObject<{
  * For this component, we assume a discrete time model, where new infections happen exactly every `generationTime` days.
  * This is what we call a "generation".
  *
- * This component estimates the relative growth advantage of a variant by performing a logistic regression.
+ * This component estimates the relative growth advantage of a variant (defined by its LAPIS filter) by performing a logistic regression.
  * Based on the inferred logistic growth rate, we derive the relative growth advantage (per generation).
  *
  * For details on the scientific method, see:
@@ -647,7 +665,7 @@ declare const referenceGenomeResponse: default_2.ZodObject<{
  * ### Line View
  *
  * The line view shows the relative growth advantage over time in a line chart.
- * The dots in the plot show the proportions of the focal variant (`numerator`) to the `denominator` variant
+ * The dots in the plot show the proportions of the focal variant (defined by the `numeratorFilter`) to the baseline variant (defined by the `denominatorFilter`)
  * for every day as observed in the data.
  * The line shows a logistic curve fitted to the data points, including a 95% confidence interval.
  */
@@ -655,15 +673,17 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
      * Required.
      *
-     * The LAPIS filter for the focal variant.
+     * LAPIS filter to select the data of the focal variant.
+     * It must be a valid LAPIS filter object.
      */
-    numerator: Record<string, string | number | null | boolean>;
+    numeratorFilter: Record<string, string | number | null | boolean>;
     /**
      * Required.
      *
-     * The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.
+     * LAPIS filter to select the data of the baseline variant.
+     * It must be a valid LAPIS filter object.
      */
-    denominator: Record<string, string | number | null | boolean>;
+    denominatorFilter: Record<string, string | number | null | boolean>;
     /**
      * The generation time represents the number of days over which the variant's relative growth advantage is measured.
      * For example, if we set a generation time of 7 days, then we estimate the growth advantage per week.
@@ -680,13 +700,13 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     /**
      * The height of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
     /**
@@ -697,6 +717,22 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * Must be a field of type `date` in LAPIS.
      */
     lapisDateField: string;
+    /**
+     * The maximum value for the y-axis on all graphs in linear view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    yAxisMaxLinear: 'maxInData' | 'limitTo1' | number;
+    /**
+     * The maximum value for the y-axis on all graphs in logarithmic view.
+     * If set to a number, the maximum value is set to this number.
+     * If set to `maxInData`, the maximum value is set to the maximum value in the data.
+     * If set to `limitTo1`, the maximum value is set to `min(1, the maximum value in the data)`.
+     * If not set, the maximum value is set to the default value (1).
+     */
+    yAxisMaxLogarithmic: 'maxInData' | 'limitTo1' | number;
     render(): JSX_2.Element;
 }
 
@@ -735,7 +771,7 @@ export declare class TextInputComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
     render(): JSX_2.Element;
@@ -769,14 +805,14 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 

package/dist/style.css

@@ -836,7 +836,11 @@ html {
 }
 
 * {
-  scrollbar-color: currentColor transparent;
+  scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent;
+}
+
+*:hover {
+  scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent;
 }
 
 :root {
@@ -1468,8 +1472,8 @@ html {
           appearance: none;
   height: 3rem;
   min-height: 3rem;
-  padding-left: 1rem;
-  padding-right: 2.5rem;
+  padding-inline-start: 1rem;
+  padding-inline-end: 2.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   line-height: 2;
@@ -1511,7 +1515,9 @@ html {
   display: grid;
   align-items: flex-end;
 }
-.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
+.tabs-lifted:has(.tab-content[class^="rounded-"])
+    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"])
+    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
   border-bottom-color: transparent;
 }
 .tab {
@@ -1844,6 +1850,9 @@ input.tab:checked + .tab-content,
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
+.join > :where(*:not(:first-child)):is(.btn) {
+  margin-inline-start: calc(var(--border-btn) * -1);
+}
 .loading {
   pointer-events: none;
   display: inline-block;
@@ -2349,7 +2358,7 @@ input.tab:checked + .tab-content,
 .tabs-boxed .tab {
   border-radius: var(--rounded-btn, 0.5rem);
 }
-:is([dir="rtl"] .table) {
+.table:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
 .table :where(th, td) {
@@ -2365,7 +2374,7 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
-.table :where(thead tr, tbody tr:not(:last-child),tbody tr:first-child:last-child) {
+.table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
   border-bottom-width: 1px;
   --tw-border-opacity: 1;
   border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
@@ -2594,11 +2603,17 @@ input.tab:checked + .tab-content,
   margin-right: 0px;
   margin-top: -1px;
 }
+.join.join-vertical > :where(*:not(:first-child)):is(.btn) {
+  margin-top: calc(var(--border-btn) * -1);
+}
 .join.join-horizontal > :where(*:not(:first-child)) {
   margin-top: 0px;
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
+.join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
+  margin-inline-start: calc(var(--border-btn) * -1);
+}
 .modal-top :where(.modal-box) {
   width: 100%;
   max-width: none;
@@ -2649,7 +2664,7 @@ input.tab:checked + .tab-content,
   content: "";
   margin-inline-start: -100%;
 }
-:is([dir="rtl"] .steps-horizontal .step):before {
+.steps-horizontal .step:where([dir="rtl"], [dir="rtl"] *):before {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -2668,7 +2683,7 @@ input.tab:checked + .tab-content,
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   margin-inline-start: 50%;
 }
-:is([dir="rtl"] .steps-vertical .step):before {
+.steps-vertical .step:where([dir="rtl"], [dir="rtl"] *):before {
   --tw-translate-x: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -2702,6 +2717,7 @@ input.tab:checked + .tab-content,
 }
 .tooltip:before {
   max-width: 20rem;
+  white-space: normal;
   border-radius: 0.25rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2794,6 +2810,10 @@ input.tab:checked + .tab-content,
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -2805,6 +2825,15 @@ input.tab:checked + .tab-content,
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.ml-2 {
+  margin-left: 0.5rem;
+}
+.ml-2\.5 {
+  margin-left: 0.625rem;
+}
+.ml-3 {
+  margin-left: 0.75rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -2838,12 +2867,12 @@ input.tab:checked + .tab-content,
 .w-32 {
   width: 8rem;
 }
-.w-40 {
-  width: 10rem;
-}
 .w-64 {
   width: 16rem;
 }
+.w-\[7\.5rem\] {
+  width: 7.5rem;
+}
 .w-full {
   width: 100%;
 }
@@ -2851,8 +2880,8 @@ input.tab:checked + .tab-content,
   width: -moz-max-content;
   width: max-content;
 }
-.min-w-40 {
-  min-width: 10rem;
+.min-w-\[7\.5rem\] {
+  min-width: 7.5rem;
 }
 .max-w-screen-lg {
   max-width: 1024px;
@@ -2878,6 +2907,9 @@ input.tab:checked + .tab-content,
 .flex-wrap {
   flex-wrap: wrap;
 }
+.items-end {
+  align-items: flex-end;
+}
 .items-center {
   align-items: center;
 }
@@ -3007,6 +3039,10 @@ input.tab:checked + .tab-content,
 .text-justify {
   text-align: justify;
 }
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -3036,6 +3072,10 @@ input.tab:checked + .tab-content,
 .leading-5 {
   line-height: 1.25rem;
 }
+.text-\[\#606060\] {
+  --tw-text-opacity: 1;
+  color: rgb(96 96 96 / var(--tw-text-opacity));
+}
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.4.5",
+    "version": "0.5.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -82,13 +82,13 @@
         "@storybook/preact": "^8.0.9",
         "@storybook/preact-vite": "^8.0.9",
         "@storybook/test": "^8.0.0",
-        "@storybook/test-runner": "^0.18.0",
+        "@storybook/test-runner": "^0.19.0",
         "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
         "@types/node": "^20.12.7",
-        "@typescript-eslint/eslint-plugin": "^7.7.0",
-        "@typescript-eslint/parser": "^7.7.0",
+        "@typescript-eslint/eslint-plugin": "^7.14.1",
+        "@typescript-eslint/parser": "^7.14.1",
         "autoprefixer": "^10.4.19",
         "daisyui": "^4.10.2",
         "depcheck": "^1.4.7",
@@ -106,7 +106,7 @@
         "storybook": "^8.0.9",
         "storybook-addon-fetch-mock": "^2.0.0",
         "tailwindcss": "^3.4.3",
-        "typescript": "~5.4.5",
+        "typescript": "~5.5.2",
         "vite": "^5.2.10",
         "vite-plugin-dts": "^3.8.3",
         "vitest": "^1.5.0"

package/src/preact/aggregatedData/aggregate-table.tsx

@@ -1,6 +1,6 @@
 import { type FunctionComponent } from 'preact';
 
-import { type AggregateData } from '../../query/queryAggregateData';
+import { type AggregateData, compareAscending } from '../../query/queryAggregateData';
 import { Table } from '../components/table';
 import { formatProportion } from '../shared/table/formatProportion';
 
@@ -15,7 +15,9 @@ export const AggregateTable: FunctionComponent<AggregateTableProps> = ({ data, f
         ...fields.map((field) => {
             return {
                 name: field,
-                sort: true,
+                sort: {
+                    compare: compareAscending,
+                },
             };
         }),
         {

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -182,7 +182,7 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
             <Select
                 items={getSelectableOptions(customSelectOptions)}
                 selected={selectedDateRange}
-                selectStyle='select-bordered rounded-none flex-grow w-40'
+                selectStyle='select-bordered rounded-none flex-grow min-w-[7.5rem]'
                 onChange={(event: Event) => {
                     event.preventDefault();
                     const select = event.target as HTMLSelectElement;
@@ -192,18 +192,16 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
             />
             <div className={'flex flex-wrap flex-grow'}>
                 <input
-                    class='input input-bordered rounded-none flex-grow min-w-40'
+                    class='input input-bordered rounded-none flex-grow w-[7.5rem]'
                     type='text'
-                    size={10}
                     placeholder='Date from'
                     ref={fromDatePickerRef}
                     onChange={onChangeDateFrom}
                     onBlur={onChangeDateFrom}
                 />
                 <input
-                    class='input input-bordered rounded-none flex-grow min-w-40'
+                    class='input input-bordered rounded-none flex-grow w-[7.5rem]'
                     type='text'
-                    size={10}
                     placeholder='Date to'
                     ref={toDatePickerRef}
                     onChange={onChangeDateTo}

package/src/preact/mutationComparison/mutation-comparison-venn.tsx

@@ -111,7 +111,7 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
     );
 
     if (data.content.length > 5) {
-        return <div>Too many variants to display. Maximum are five. </div>;
+        return <div>Too many datasets to display. Maximum are five. </div>;
     }
 
     return (