@genspectrum/dashboard-components 0.5.0 → 0.5.2

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 {
@@ -1846,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;
@@ -2596,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;
@@ -2854,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%;
 }
@@ -2867,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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.5.0",
+    "version": "0.5.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

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/prevalenceOverTime/prevalence-over-time-bar-chart.tsx

@@ -2,7 +2,11 @@ import { Chart, type ChartConfiguration, registerables, type TooltipItem } from
 import { BarWithErrorBar, BarWithErrorBarsController } from 'chartjs-chart-error-bars';
 
 import { maxInData } from './prevalence-over-time';
-import { type PrevalenceOverTimeData, type PrevalenceOverTimeVariantData } from '../../query/queryPrevalenceOverTime';
+import {
+    type PrevalenceOverTimeData,
+    type PrevalenceOverTimeVariantData,
+    type PrevalenceOverTimeVariantDataPoint,
+} from '../../query/queryPrevalenceOverTime';
 import type { Temporal } from '../../utils/temporal';
 import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
@@ -84,32 +88,37 @@ const getDataset = (
     index: number,
     confidenceIntervalMethod: ConfidenceIntervalMethod,
 ) => {
-    const generalConfig = {
+    return {
         borderWidth: 1,
         pointRadius: 0,
         label: prevalenceOverTimeVariant.displayName,
         backgroundColor: singleGraphColorRGBAById(index, 0.3),
         borderColor: singleGraphColorRGBAById(index),
+        data: prevalenceOverTimeVariant.content.map(mapDataPoint(confidenceIntervalMethod)),
+    };
+};
+
+const mapDataPoint = (confidenceIntervalMethod: ConfidenceIntervalMethod) => {
+    return (dataPoint: PrevalenceOverTimeVariantDataPoint) => {
+        const confidenceInterval = getConfidenceInterval(dataPoint, confidenceIntervalMethod);
+        return {
+            y: dataPoint.prevalence,
+            yMin: confidenceInterval.lowerLimit,
+            yMax: confidenceInterval.upperLimit,
+            x: dataPoint.dateRange?.toString() ?? 'Unknown',
+        };
     };
+};
 
+const getConfidenceInterval = (
+    dataPoint: PrevalenceOverTimeVariantDataPoint,
+    confidenceIntervalMethod: ConfidenceIntervalMethod,
+) => {
     switch (confidenceIntervalMethod) {
         case 'wilson':
-            return {
-                ...generalConfig,
-                data: prevalenceOverTimeVariant.content.map((dataPoint) => ({
-                    y: dataPoint.prevalence,
-                    yMin: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
-                    yMax: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit,
-                    x: dataPoint.dateRange?.toString() ?? 'Unknown',
-                })),
-            };
+            return wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total);
         default:
-            return {
-                ...generalConfig,
-                data: prevalenceOverTimeVariant.content.map((dataPoint) => {
-                    return { y: dataPoint.prevalence, x: dataPoint.dateRange };
-                }),
-            };
+            return { lowerLimit: undefined, upperLimit: undefined };
     }
 };
 

package/src/query/queryAggregateData.ts

@@ -8,7 +8,7 @@ export type AggregateData = (Record<string, string | null | number | boolean> &
     proportion: number;
 })[];
 
-const compareAscending = (a: string | null | number, b: string | null | number) => {
+export const compareAscending = (a: string | null | number, b: string | null | number) => {
     if (typeof a === 'number' && typeof b === 'number') {
         return a - b;
     }

package/src/query/queryPrevalenceOverTime.ts

@@ -19,7 +19,14 @@ export type PrevalenceOverTimeData = PrevalenceOverTimeVariantData[];
 
 export type PrevalenceOverTimeVariantData = {
     displayName: string;
-    content: { count: number; prevalence: number; total: number; dateRange: Temporal | null }[];
+    content: PrevalenceOverTimeVariantDataPoint[];
+};
+
+export type PrevalenceOverTimeVariantDataPoint = {
+    count: number;
+    prevalence: number;
+    total: number;
+    dateRange: Temporal | null;
 };
 
 export function queryPrevalenceOverTime(