@genspectrum/dashboard-components 0.6.3 → 0.6.5

package/src/utils/temporal.spec.ts

@@ -60,6 +60,8 @@ describe('YearMonthDay', () => {
         // seems to be a bug in dayjs: https://github.com/iamkun/dayjs/issues/2620
         expect(underTest.week.text).equal('2019-01');
         expect(underTest.text).equal('2020-01-01');
+        expect(underTest.firstDay.text).equal('2020-01-01');
+        expect(underTest.lastDay.text).equal('2020-01-01');
     });
 });
 
@@ -71,6 +73,7 @@ describe('YearWeek', () => {
         expect(underTest.isoWeekNumber).equal(2);
         expect(underTest.firstDay.text).equal('2020-01-06');
         expect(underTest.text).equal('2020-02');
+        expect(underTest.lastDay.text).equal('2020-01-12');
     });
 });
 
@@ -82,6 +85,7 @@ describe('YearMonth', () => {
         expect(underTest.monthNumber).equal(1);
         expect(underTest.text).equal('2020-01');
         expect(underTest.firstDay.text).equal('2020-01-01');
+        expect(underTest.lastDay.text).equal('2020-01-31');
     });
 });
 
@@ -93,5 +97,6 @@ describe('Year', () => {
         expect(underTest.text).equal('2020');
         expect(underTest.firstDay.text).equal('2020-01-01');
         expect(underTest.firstMonth.text).equal('2020-01');
+        expect(underTest.lastDay.text).equal('2020-12-31');
     });
 });

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,17 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  *
  * The grid view shows the proportion for each mutation over date ranges.
  *
+ * The grid limits the number of rows columns for browser performance reasons.
+ * Too much data might make the browser unresponsive.
+ *
+ * The number of columns is limited to 200.
+ * If this number are exceeded, an error message will be shown.
+ * It is your responsibility to make sure that this does not happen.
+ * Depending on the selected date range in the `lapisFilter`, you can adapt the granularity accordingly
+ * (e.g. use months instead of days).
+ *
+ * The number of rows is limited to 100.
+ * If there are more, the component will only show 100 mutations and notify the user.
  */
 @customElement('gs-mutations-over-time')
 export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {