@genspectrum/dashboard-components 0.6.3 → 0.6.4

package/src/utils/temporal.ts

@@ -72,6 +72,10 @@ export class YearMonthDay {
         return this.text;
     }
 
+    englishName(): string {
+        return this.dayjs.format('dddd, MMMM D, YYYY');
+    }
+
     get firstDay(): YearMonthDay {
         return this;
     }
@@ -123,6 +127,10 @@ export class YearWeek {
         return this.text;
     }
 
+    englishName(): string {
+        return `Week ${this.isoWeekNumber}, ${this.isoYearNumber}`;
+    }
+
     get firstDay(): YearMonthDay {
         // "The first week of the year, hence, always contains 4 January." https://en.wikipedia.org/wiki/ISO_week_date
         const firstDay = dayjs()
@@ -135,12 +143,14 @@ export class YearWeek {
     }
 
     get lastDay(): YearMonthDay {
-        const lastDay = dayjs()
+        const firstDay = dayjs()
             .year(this.isoYearNumber)
-            .month(12)
-            .date(31)
-            .isoWeek(this.isoWeekNumber)
-            .endOf('isoWeek');
+            .startOf('year')
+            .add((this.isoWeekNumber - 1) * 7, 'day')
+            .startOf('week')
+            .add(1, 'day');
+        const lastDay = firstDay.add(6, 'day');
+
         return this.cache.getYearMonthDay(lastDay.format('YYYY-MM-DD'));
     }
 
@@ -179,6 +189,10 @@ export class YearMonth {
         return this.text;
     }
 
+    englishName(): string {
+        return `${monthName(this.monthNumber)} ${this.yearNumber}`;
+    }
+
     get firstDay(): YearMonthDay {
         return this.cache.getYearMonthDay(dayjs(`${this.yearNumber}-${this.monthNumber}-01`).format('YYYY-MM-DD'));
     }
@@ -223,6 +237,10 @@ export class Year {
         return this.text;
     }
 
+    englishName(): string {
+        return this.year.toString();
+    }
+
     get firstMonth(): YearMonth {
         return this.cache.getYearMonth(`${this.year}-01`);
     }
@@ -255,6 +273,12 @@ export class Year {
     }
 }
 
+function monthName(month: number): string {
+    return dayjs()
+        .month(month - 1)
+        .format('MMMM');
+}
+
 export type Temporal = YearMonthDay | YearWeek | YearMonth | Year;
 
 export function generateAllDaysInRange(start: YearMonthDay, end: YearMonthDay): YearMonthDay[] {

package/src/web-components/visualization/gs-mutations-over-time.tsx

@@ -17,6 +17,11 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  *
  * The grid view shows the proportion for each mutation over date ranges.
  *
+ * The grid will show at max 100 rows and 200 columns for browser performance reasons.
+ * More data might make the browser unresponsive.
+ * If the numbers are exceeded, an error message will be shown.
+ * In both cases, the `lapisFilter` should be narrowed down to reduce the number of mutations or date ranges.
+ * The number of date ranges can also be reduced by selecting a larger granularity (months instead of weeks).
  */
 @customElement('gs-mutations-over-time')
 export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {