@genspectrum/dashboard-components 0.18.1 → 0.18.3

package/src/web-components/MutationAnnotations.mdx

@@ -19,7 +19,9 @@ The mutation annotations can be (optionally) supplied to `gs-app` as a JSON obje
             description: 'This describes what is special about these mutations.',
             symbol: '+',
             nucleotideMutations: ['C44T', 'C774T', 'G24872T', 'T23011-'],
+            nucleotidePositions: ['123', '234'],
             aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+            aminoAcidPositions: ['S:123', 'ORF1a:234']
         },
     ]"
 >
@@ -31,3 +33,9 @@ The mutation annotations are then distributed to child components.
 Whenever we display a mutation (e.g. in the `gs-mutations` table view)
 we will append the `symbol` of all matching annotations: <span>C44T<sup class='text-red-600'>+</sup></span>.
 Users can click on the mutation to open a modal that shows the `name` and `description` of the annotation.
+
+The annotation can be applied to specific mutations:
+
+- `nucleotideMutations: [C44T]` matches only the nucleotide mutation `C44T`,
+- `aminoAcidPositions: [S:123]` matches all amino acid mutations that occur on the gene `S` at position `123`
+- If the pathogen has only one segment, one can omit the segment, writing `123` for any mutation at position `123`.

package/src/web-components/gs-app.stories.ts

@@ -51,7 +51,9 @@ const Template: StoryObj<StoryProps> = {
                 description: 'This describes what is special about these mutations.',
                 symbol: '*',
                 nucleotideMutations: ['C44T', 'C774T', 'G24872T', 'T23011-'],
+                nucleotidePositions: ['123', '456'],
                 aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+                aminoAcidPositions: ['S:123'],
             },
         ],
     },

package/src/web-components/gs-app.ts

@@ -53,8 +53,10 @@ export class AppComponent extends LitElement {
         name: string;
         description: string;
         symbol: string;
-        nucleotideMutations: string[];
-        aminoAcidMutations: string[];
+        nucleotideMutations?: string[];
+        nucleotidePositions?: string[];
+        aminoAcidMutations?: string[];
+        aminoAcidPositions?: string[];
     }[] = [];
 
     /**

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

@@ -98,7 +98,7 @@ export const TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression: StoryOb
                 <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
                     earliestDate="${args.earliestDate}"
-                    value="${args.value}"
+                    value="${args.value ?? 'null'}"
                     width="${args.width}"
                     lapisDateField="${args.lapisDateField}"
                     placeholder="${args.placeholder}"

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

@@ -38,12 +38,14 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  *  Use this event, when you want to use the filter directly as a LAPIS filter.
  *
  *
- * @fires {CustomEvent<{ string | {dateFrom: string, dateTo: string}}>} gs-date-range-option-changed
+ * @fires {CustomEvent<string | {dateFrom: string, dateTo: string} | null>} gs-date-range-option-changed
  * Fired when:
  * - The select field is changed,
  * - A date is selected in either of the date pickers,
- * - A date was typed into either of the date input fields, and the input field loses focus ("on blur").
- * Contains the selected dateRangeOption or when users select custom values it contains the selected dates.
+ * - A date was typed into either of the date input fields, and the input field loses focus ("on blur"),
+ * - The user deletes the current value by clicking the 'x' button.
+ * Contains the selected dateRangeOption or when users select custom values it contains the selected dates
+ * or `null` when the input was deleted.
  *
  * Use this event, when you want to control this component in your JS application.
  * You can supply the `detail` of this event to the `value` attribute of this component.
@@ -80,7 +82,7 @@ export class DateRangeFilterComponent extends PreactLitAdapter {
     @property({
         converter: (value) => {
             if (value === null) {
-                return undefined;
+                return null;
             }
             try {
                 const result = JSON.parse(value) as unknown;
@@ -93,7 +95,7 @@ export class DateRangeFilterComponent extends PreactLitAdapter {
             }
         },
     })
-    value: string | { dateFrom?: string; dateTo?: string } | undefined = undefined;
+    value: string | { dateFrom?: string; dateTo?: string } | null = null;
 
     /**
      * The width of the component.

package/src/web-components/mutation-annotations-context.ts

@@ -1,12 +1,16 @@
 import { createContext } from '@lit/context';
 import z from 'zod';
 
+const annotations = z.array(z.string());
+
 const mutationAnnotationSchema = z.object({
     name: z.string(),
     description: z.string(),
     symbol: z.string(),
-    nucleotideMutations: z.array(z.string()),
-    aminoAcidMutations: z.array(z.string()),
+    nucleotideMutations: annotations.optional(),
+    nucleotidePositions: annotations.optional(),
+    aminoAcidMutations: annotations.optional(),
+    aminoAcidPositions: annotations.optional(),
 });
 export type MutationAnnotation = z.infer<typeof mutationAnnotationSchema>;