@genspectrum/dashboard-components 0.1.5 → 0.2.0

package/src/web-components/{display/aggregate-component.stories.ts → visualization/gs-aggregate.stories.ts}

@@ -6,12 +6,12 @@ import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/aggregatedData/__mockData__/aggregated.json';
 import type { AggregateProps } from '../../preact/aggregatedData/aggregate';
 
-import './aggregate-component';
+import './gs-aggregate';
 import '../app';
 
 const meta: Meta<AggregateProps> = {
     title: 'Visualization/Aggregate',
-    component: 'gs-aggregate-component',
+    component: 'gs-aggregate',
     argTypes: {
         fields: [{ control: 'object' }],
         views: {
@@ -41,10 +41,9 @@ const meta: Meta<AggregateProps> = {
             ],
         },
         componentDocs: {
-            tag: 'gs-aggregate-component',
             opensShadowDom: true,
             expectsChildren: false,
-            codeExample: `<gs-aggregate-component fields='["division", "host"]' filter='{"country": "USA"}' views='["table"]'></gs-aggregate-component>`,
+            codeExample: `<gs-aggregate fields='["division", "host"]' filter='{"country": "USA"}' views='["table"]'></gs-aggregate>`,
         },
     }),
     tags: ['autodocs'],
@@ -55,13 +54,13 @@ export default meta;
 export const Table: StoryObj<AggregateProps> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
-            <gs-aggregate-component
+            <gs-aggregate
                 .fields=${args.fields}
                 .filter=${args.filter}
                 .views=${args.views}
                 .size=${args.size}
                 .headline=${args.headline}
-            ></gs-aggregate-component>
+            ></gs-aggregate>
         </gs-app>
     `,
     args: {

package/src/web-components/{display/aggregate-component.tsx → visualization/gs-aggregate.tsx}

@@ -11,7 +11,7 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  *
  * It expects a list of fields to aggregate by and a filter to apply to the data.
  */
-@customElement('gs-aggregate-component')
+@customElement('gs-aggregate')
 export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * The fields to aggregate by.

package/src/web-components/{display/mutation-comparison-component.stories.ts → visualization/gs-mutation-comparison.stories.ts}

@@ -2,7 +2,7 @@ import { expect, fireEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
-import './mutation-comparison-component';
+import './gs-mutation-comparison';
 import '../app';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
@@ -12,15 +12,15 @@ import { type MutationComparisonProps } from '../../preact/mutationComparison/mu
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
-<gs-mutation-comparison-component
+<gs-mutation-comparison
     variants='[{ "displayName": "variant1", "lapisFilter": { "country": "Switzerland" }}, { "displayName": "variant2", "lapisFilter": { "country": "Germany" }}]'
     sequenceType="nucleotide"
     views='["table", "venn"]'
-></gs-mutation-comparison-component>`;
+></gs-mutation-comparison>`;
 
 const meta: Meta<MutationComparisonProps> = {
     title: 'Visualization/Mutation comparison',
-    component: 'gs-mutation-comparison-component',
+    component: 'gs-mutation-comparison',
     argTypes: {
         variants: { control: 'object' },
         sequenceType: {
@@ -36,7 +36,6 @@ const meta: Meta<MutationComparisonProps> = {
     },
     parameters: withComponentDocs({
         componentDocs: {
-            tag: 'gs-mutation-comparison-component',
             opensShadowDom: true,
             expectsChildren: false,
             codeExample,
@@ -50,13 +49,13 @@ export default meta;
 const Template: StoryObj<MutationComparisonProps> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
-            <gs-mutation-comparison-component
+            <gs-mutation-comparison
                 .variants=${args.variants}
                 .sequenceType=${args.sequenceType}
                 .views=${args.views}
                 .size=${args.size}
                 .headline=${args.headline}
-            ></gs-mutation-comparison-component>
+            ></gs-mutation-comparison>
         </gs-app>
     `,
 };
@@ -127,7 +126,7 @@ export const Default: StoryObj<MutationComparisonProps> = {
         },
     },
     play: async ({ canvasElement, step }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison-component');
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison');
 
         await step('Min and max proportions should be 50% and 100%', async () => {
             const minInput = () => canvas.getAllByLabelText('%')[0];
@@ -142,7 +141,7 @@ export const Default: StoryObj<MutationComparisonProps> = {
 export const VennDiagram: StoryObj<MutationComparisonProps> = {
     ...Default,
     play: async ({ canvasElement, step }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison-component');
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison');
 
         await step('Switch to Venn diagram view', async () => {
             await waitFor(() => expect(canvas.getByRole('button', { name: 'Venn' })).toBeInTheDocument());

package/src/web-components/{display/mutation-comparison-component.tsx → visualization/gs-mutation-comparison.tsx}

@@ -32,7 +32,7 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  * Thus, changing the proportion interval may change a mutations from being "common" between variant
  * to being "for one variant only".
  */
-@customElement('gs-mutation-comparison-component')
+@customElement('gs-mutation-comparison')
 export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * An array of variants to compare.

package/src/web-components/{display/mutations-component.stories.ts → visualization/gs-mutations.stories.ts}

@@ -2,7 +2,7 @@ import { expect, fireEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
-import './mutations-component';
+import './gs-mutations';
 import '../app';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL, NUCLEOTIDE_INSERTIONS_ENDPOINT, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
@@ -20,7 +20,7 @@ const codeExample = String.raw`
 
 const meta: Meta<MutationsProps> = {
     title: 'Visualization/Mutations',
-    component: 'gs-mutations-component',
+    component: 'gs-mutations',
     argTypes: {
         variant: { control: 'object' },
         sequenceType: {
@@ -43,7 +43,6 @@ const meta: Meta<MutationsProps> = {
     },
     parameters: withComponentDocs({
         componentDocs: {
-            tag: 'gs-mutations-component',
             opensShadowDom: true,
             expectsChildren: false,
             codeExample,
@@ -57,13 +56,13 @@ export default meta;
 const Template: StoryObj<MutationsProps> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
-            <gs-mutations-component
+            <gs-mutations
                 .variant=${args.variant}
                 .sequenceType=${args.sequenceType}
                 .views=${args.views}
                 .size=${args.size}
                 .headline=${args.headline}
-            ></gs-mutations-component>
+            ></gs-mutations>
         </gs-app>
     `,
 };
@@ -108,7 +107,7 @@ export const Default: StoryObj<MutationsProps> = {
 export const OnTableTab: StoryObj<MutationsProps> = {
     ...Default,
     play: async ({ canvasElement }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations-component');
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations');
 
         await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument());
 
@@ -119,7 +118,7 @@ export const OnTableTab: StoryObj<MutationsProps> = {
 export const OnInsertionsTab: StoryObj<MutationsProps> = {
     ...Default,
     play: async ({ canvasElement }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations-component');
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations');
 
         await waitFor(() => expect(canvas.getByRole('button', { name: 'Insertions' })).toBeInTheDocument());
 

package/src/web-components/{display/mutations-component.tsx → visualization/gs-mutations.tsx}

@@ -30,14 +30,14 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  * The insertions view shows the count of all insertions for the given variant.
  *
  */
-@customElement('gs-mutations-component')
+@customElement('gs-mutations')
 export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
      * The `variant` will be sent as is to LAPIS to filter the mutation data.
      * It must be a valid LAPIS filter object.
      */
     @property({ type: Object })
-    variant: Record<string, string | number | null | boolean> = { displayName: '' };
+    variant: Record<string, string | number | null | boolean> = {};
 
     /**
      * The type of the sequence for which the mutations should be shown.

package/src/web-components/{display/prevalence-over-time-component.stories.ts → visualization/gs-prevalence-over-time.stories.ts}

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import '../app';
-import './prevalence-over-time-component';
+import './gs-prevalence-over-time';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import denominator from '../../preact/prevalenceOverTime/__mockData__/denominator.json';
@@ -48,7 +48,6 @@ const meta: Meta<PrevalenceOverTimeProps> = {
     },
     parameters: withComponentDocs({
         componentDocs: {
-            tag: 'gs-prevalence-over-time',
             opensShadowDom: true,
             expectsChildren: false,
             codeExample,

package/src/web-components/{display/prevalence-over-time-component.tsx → visualization/gs-prevalence-over-time.tsx}

@@ -43,6 +43,8 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  */
 @customElement('gs-prevalence-over-time')
 export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
+    // prettier-ignore
+    // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
      * Either a single variant or an array of variants to compare.
      * This must be a valid LAPIS filter object with an additional `displayName` property
@@ -51,7 +53,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
      */
     @property({ type: Object })
     numerator:
-        | (Record<string, string | number | null | boolean> & { displayName: string })
+        (Record<string, string | number | null | boolean> & { displayName: string })
         | (Record<string, string | number | null | boolean> & {
               displayName: string;
           })[] = { displayName: '' };

package/src/web-components/{display/relative-growth-advantage-component.stories.ts → visualization/gs-relative-growth-advantage.stories.ts}

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
-import './relative-growth-advantage-component';
+import './gs-relative-growth-advantage';
 import '../app';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
@@ -33,7 +33,6 @@ const meta: Meta<RelativeGrowthAdvantageProps> = {
     },
     parameters: withComponentDocs({
         componentDocs: {
-            tag: 'gs-relative-growth-advantage',
             opensShadowDom: true,
             expectsChildren: false,
             codeExample,

package/src/web-components/visualization/index.ts

@@ -0,0 +1,5 @@
+export { MutationComparisonComponent } from './gs-mutation-comparison';
+export { MutationsComponent } from './gs-mutations';
+export { PrevalenceOverTimeComponent } from './gs-prevalence-over-time';
+export { RelativeGrowthAdvantageComponent } from './gs-relative-growth-advantage';
+export { AggregateComponent } from './gs-aggregate';

package/src/web-components/display/index.ts

@@ -1,5 +0,0 @@
-export { MutationComparisonComponent } from './mutation-comparison-component';
-export { MutationsComponent } from './mutations-component';
-export { PrevalenceOverTimeComponent } from './prevalence-over-time-component';
-export { RelativeGrowthAdvantageComponent } from './relative-growth-advantage-component';
-export { AggregateComponent } from './aggregate-component';