@genspectrum/dashboard-components 0.20.0 → 0.21.0

package/src/preact/statistic/statistics.stories.tsx

@@ -80,6 +80,73 @@ export const Default: StoryObj<StatisticsProps> = {
     },
 };
 
+export const ValuesAre0: StoryObj<StatisticsProps> = {
+    ...Default,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'denominatorData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: [],
+                            country: 'USA',
+                            division: 'Alabama',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: {
+                            data: [
+                                {
+                                    count: 0,
+                                },
+                            ],
+                            info: {
+                                dataVersion: '1712315293',
+                                requestId: '4603a85e-ae5e-495d-aee5-778a3af862c1',
+                            },
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'numeratorData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: [],
+                            country: 'USA',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: {
+                            data: [
+                                {
+                                    count: 0,
+                                },
+                            ],
+                            info: {
+                                dataVersion: '1712315293',
+                                requestId: '4603a85e-ae5e-495d-aee5-778a3af862c1',
+                            },
+                        },
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(async () => {
+            await expect(canvas.getByText('0')).toBeInTheDocument();
+            await expect(canvas.getByText('-%')).toBeInTheDocument();
+        });
+    },
+};
+
 export const FiresFinishedLoadingEvent: StoryObj<StatisticsProps> = {
     ...Default,
     play: playThatExpectsFinishedLoadingEvent(),

package/src/preact/statistic/statistics.tsx

@@ -74,7 +74,9 @@ const MetricDataTabs: FunctionComponent<MetricDataTabsProps> = ({ data }) => {
 
             <div className='stat'>
                 <div className='stat-title'>Overall proportion</div>
-                <div className='stat-value text-2xl sm:text-4xl'>{formatProportion(proportion)}</div>
+                <div className='stat-value text-2xl sm:text-4xl'>
+                    {Number.isFinite(proportion) ? formatProportion(proportion) : '-%'}
+                </div>
                 <div className='stat-desc text-wrap'>The proportion among all sequenced samples</div>
             </div>
         </div>

package/src/web-components/input/gs-date-range-filter.stories.ts

@@ -8,7 +8,6 @@ import { LAPIS_URL } from '../../constants';
 import { type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
 import './gs-date-range-filter';
 import '../gs-app';
-import { toYYYYMMDD } from '../../preact/dateRangeFilter/dateConversion';
 import { dateRangeOptionPresets } from '../../preact/dateRangeFilter/dateRangeOption';
 import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
@@ -16,7 +15,6 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 const codeExample = String.raw`
 <gs-date-range-filter
     dateRangeOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
-    earliestDate="1970-01-01"
     value="Year 2021"
     width="100%"
     lapisDateField="myDateColumn"
@@ -47,9 +45,6 @@ const meta: Meta<Required<DateRangeFilterProps>> = {
         dateRangeOptions: {
             control: { type: 'object' },
         },
-        earliestDate: {
-            control: { type: 'text' },
-        },
         width: {
             control: { type: 'text' },
         },
@@ -61,11 +56,9 @@ const meta: Meta<Required<DateRangeFilterProps>> = {
         dateRangeOptions: [
             dateRangeOptionPresets().lastMonth,
             dateRangeOptionPresets().last3Months,
-            dateRangeOptionPresets().allTimes,
             { label: '2021', dateFrom: '2021-01-01', dateTo: '2021-12-31' },
             customDateRange,
         ],
-        earliestDate: '1970-01-01',
         value: dateRangeOptionPresets().lastMonth.label,
         lapisDateField: 'aDateColumn',
         width: '100%',
@@ -82,7 +75,6 @@ export const Default: StoryObj<Required<DateRangeFilterProps>> = {
             <div class="max-w-(--breakpoint-lg)">
                 <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
-                    .earliestDate=${args.earliestDate}
                     .value=${args.value}
                     .width=${args.width}
                     .lapisDateField=${args.lapisDateField}
@@ -98,7 +90,6 @@ export const TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression: StoryOb
             <div class="max-w-(--breakpoint-lg)">
                 <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
-                    earliestDate="${args.earliestDate}"
                     value="${args.value ?? 'null'}"
                     width="${args.width}"
                     lapisDateField="${args.lapisDateField}"
@@ -155,7 +146,7 @@ export const FiresEvents: StoryObj<Required<DateRangeFilterProps>> = {
                 await expect(placeholderOption).toHaveTextContent('Last month');
             });
             await waitFor(async () => {
-                await expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date()));
+                await expect(dateToPicker(canvas)).toHaveValue('');
             });
         });
 

package/src/web-components/input/gs-date-range-filter.tsx

@@ -64,24 +64,18 @@ export class DateRangeFilterComponent extends PreactLitAdapter {
      * The `label` will be shown to the user, and it will be available as `value`.
      * The dates must be in the format `YYYY-MM-DD`.
      *
-     * If dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.
+     * If dateFrom or dateTo is not set, the component will leave the corresponding input field empty.
      *
      * We provide some options in `dateRangeOptionPresets` for convenience.
      */
     @property({ type: Array })
     dateRangeOptions: { label: string; dateFrom?: string; dateTo?: string }[] = [];
 
-    /**
-     * The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.
-     */
-    @property({ type: String })
-    earliestDate: string = '1900-01-01';
-
     /**
      * The value to use for this date range selector.
      * - If it is a string, then it must be a valid label from the `dateRangeOptions`.
      * - If it is an object, then it accepts dates in the format `YYYY-MM-DD` for the keys `dateFrom` and `dateTo`.
-     *   Keys that are not set will default to the `earliestDate` or the current date respectively.
+     *   Keys that are not set will leave the corresponding input field empty.
      *
      * The `detail` of the `gs-date-range-option-changed` event can be used for this attribute,
      * if you want to control this component in your JS application.
@@ -128,7 +122,6 @@ export class DateRangeFilterComponent extends PreactLitAdapter {
         return (
             <DateRangeFilter
                 dateRangeOptions={this.dateRangeOptions}
-                earliestDate={this.earliestDate}
                 value={this.value}
                 lapisDateField={this.lapisDateField}
                 width={this.width}
@@ -162,9 +155,6 @@ declare global {
 type CustomSelectOptionsMatches = Expect<
     Equals<typeof DateRangeFilterComponent.prototype.dateRangeOptions, DateRangeFilterProps['dateRangeOptions']>
 >;
-type EarliestDateMatches = Expect<
-    Equals<typeof DateRangeFilterComponent.prototype.earliestDate, DateRangeFilterProps['earliestDate']>
->;
 type ValueMatches = Expect<Equals<typeof DateRangeFilterComponent.prototype.value, DateRangeFilterProps['value']>>;
 type WidthMatches = Expect<Equals<typeof DateRangeFilterComponent.prototype.width, DateRangeFilterProps['width']>>;
 type DateColumnMatches = Expect<