@genspectrum/dashboard-components 0.6.7 → 0.6.9

package/dist/genspectrum-components.d.ts

@@ -983,14 +983,14 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 

package/package.json

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

package/src/preact/mutationsOverTime/mutations-over-time-grid.tsx

@@ -9,6 +9,7 @@ import { type Deletion, type Substitution } from '../../utils/mutations';
 import { compareTemporal, type Temporal, YearMonthDay } from '../../utils/temporal';
 import { type ColorScale, getColorWithingScale, getTextColorForScale } from '../components/color-scale-selector';
 import Tooltip, { type TooltipPosition } from '../components/tooltip';
+import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
 import { formatProportion } from '../shared/table/formatProportion';
 
 export interface MutationsOverTimeGridProps {
@@ -20,7 +21,7 @@ const MAX_NUMBER_OF_GRID_ROWS = 100;
 const MUTATION_CELL_WIDTH_REM = 8;
 
 const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({ data, colorScale }) => {
-    const allMutations = data.getFirstAxisKeys();
+    const allMutations = data.getFirstAxisKeys().sort(sortSubstitutionsAndDeletions);
     const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
 
     const dates = data.getSecondAxisKeys().sort((a, b) => compareTemporal(a, b));

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -24,6 +24,7 @@ import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
 import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
+import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
 import { useQuery } from '../useQuery';
 
 export type View = 'grid';
@@ -194,16 +195,19 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
 function getDownloadData(filteredData: MutationOverTimeDataGroupedByMutation) {
     const dates = filteredData.getSecondAxisKeys().sort((a, b) => compareTemporal(a, b));
 
-    return filteredData.getFirstAxisKeys().map((mutation) => {
-        return dates.reduce(
-            (accumulated, date) => {
-                const proportion = filteredData.get(mutation, date)?.proportion ?? 0;
-                return {
-                    ...accumulated,
-                    [date.toString()]: proportion,
-                };
-            },
-            { mutation: mutation.toString() },
-        );
-    });
+    return filteredData
+        .getFirstAxisKeys()
+        .sort(sortSubstitutionsAndDeletions)
+        .map((mutation) => {
+            return dates.reduce(
+                (accumulated, date) => {
+                    const proportion = filteredData.get(mutation, date)?.proportion ?? 0;
+                    return {
+                        ...accumulated,
+                        [date.toString()]: proportion,
+                    };
+                },
+                { mutation: mutation.toString() },
+            );
+        });
 }

package/src/preact/shared/sort/sortSubstitutionsAndDeletions.spec.ts

@@ -32,7 +32,7 @@ describe('sortSubstitutionsAndDeletions with no segments', () => {
 describe('sortSubstitutionsAndDeletions with segments', () => {
     test('should sort for segment first', () => {
         const a = new Substitution('AA1', 'A', 'B', 123);
-        const b = new Substitution('BB1', 'A', 'B', 234);
+        const b = new Substitution('BB1', 'A', 'B', 123);
 
         expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
         expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);

package/src/preact/shared/sort/sortSubstitutionsAndDeletions.ts

@@ -2,7 +2,7 @@ import { Deletion, type Substitution } from '../../../utils/mutations';
 
 export const sortSubstitutionsAndDeletions = (a: Substitution | Deletion, b: Substitution | Deletion) => {
     if (a.segment !== b.segment) {
-        compareSegments(a.segment, b.segment);
+        return compareSegments(a.segment, b.segment);
     }
 
     if (a.position !== b.position) {