@genspectrum/dashboard-components 0.6.14 → 0.6.16

package/src/preact/mutationFilter/mutation-filter.stories.tsx

@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type PreactRenderer, type StoryObj } from '@storybook/preact';
 import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test';
 import { type StepFunction } from '@storybook/types';
 
 import { MutationFilter, type MutationFilterProps } from './mutation-filter';
+import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -14,7 +14,7 @@ const meta: Meta<MutationFilterProps> = {
     component: MutationFilter,
     parameters: {
         actions: {
-            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'],
+            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur', ...previewHandles],
         },
         fetchMock: {},
     },
@@ -26,7 +26,6 @@ const meta: Meta<MutationFilterProps> = {
             },
         },
     },
-    decorators: [withActions],
 };
 
 export default meta;

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -204,6 +204,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 proportionInterval={proportionInterval}
                 setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
                 setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
+                labelPrefix='Mean proportion'
             />
             <CsvDownloadButton
                 className='mx-1 btn btn-xs'

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -69,7 +69,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeProps>
                 lapis,
                 lapisDateField,
             ),
-        [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow],
+        [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow, lapisDateField],
     );
 
     if (isLoading) {

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -66,7 +66,7 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
 
     const { data, error, isLoading } = useQuery(
         () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
-        [lapis, numeratorFilter, denominatorFilter, generationTime, views],
+        [lapis, numeratorFilter, denominatorFilter, generationTime, views, lapisDateField],
     );
 
     if (isLoading) {

package/src/preact/shared/floating-ui/hooks.ts

@@ -9,7 +9,7 @@ export function useFloatingUi(
     middleware?: Array<Middleware | null | undefined | false>,
     placement?: Placement,
 ) {
-    const cleanupRef = useRef<Function | null>(null);
+    const cleanupRef = useRef<() => void | null>(null);
 
     useEffect(() => {
         if (!referenceRef.current || !floatingRef.current) {

package/src/preact/textInput/text-input.stories.tsx

@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor, within } from '@storybook/test';
 
 import data from './__mockData__/aggregated_hosts.json';
 import { TextInput, type TextInputProps } from './text-input';
+import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 
@@ -12,7 +12,7 @@ const meta: Meta<TextInputProps> = {
     component: TextInput,
     parameters: {
         actions: {
-            handles: ['gs-text-input-changed'],
+            handles: ['gs-text-input-changed', ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -32,7 +32,6 @@ const meta: Meta<TextInputProps> = {
             ],
         },
     },
-    decorators: [withActions],
     argTypes: {
         lapisField: {
             control: {

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

@@ -1,5 +1,4 @@
 import { consume } from '@lit/context';
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, waitFor, within } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html, LitElement } from 'lit';
@@ -30,7 +29,6 @@ const meta: Meta = {
             codeExample,
         },
     }),
-    decorators: [withActions],
     tags: ['autodocs'],
 };
 

package/src/web-components/errorHandling.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title='Components/Error Handling' />
+
+# Error Handling
+
+All components dispatch a `gs-error` event of type `ErrorEvent` when an error occurs.
+The event contains an `error` property that holds the `Error` object.

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

@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
 import './gs-date-range-selector';
@@ -36,7 +36,7 @@ const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
     component: 'gs-date-range-selector',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-date-range-changed'],
+            handles: ['gs-date-range-changed', ...previewHandles],
         },
         fetchMock: {},
         componentDocs: {
@@ -87,7 +87,6 @@ const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
         initialDateFrom: '',
         initialDateTo: '',
     },
-    decorators: [withActions],
     tags: ['autodocs'],
 };
 

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

@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../app';
 import './gs-lineage-filter';
@@ -24,7 +24,7 @@ const meta: Meta<Required<LineageFilterProps>> = {
     component: 'gs-lineage-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-lineage-filter-changed'],
+            handles: ['gs-lineage-filter-changed', ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -49,7 +49,6 @@ const meta: Meta<Required<LineageFilterProps>> = {
             codeExample,
         },
     }),
-    decorators: [withActions],
     tags: ['autodocs'],
 };
 

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

@@ -1,10 +1,10 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../app';
 import './gs-location-filter';
@@ -25,7 +25,7 @@ const meta: Meta = {
     component: 'gs-location-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-location-changed'],
+            handles: ['gs-location-changed', ...previewHandles],
         },
         componentDocs: {
             opensShadowDom: true,
@@ -55,7 +55,6 @@ const meta: Meta = {
             },
         },
     },
-    decorators: [withActions],
     tags: ['autodocs'],
 };
 

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

@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL, REFERENCE_GENOME_ENDPOINT } from '../../constants';
 import '../app';
 import { type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
@@ -21,7 +21,7 @@ const meta: Meta<MutationFilterProps> = {
     component: 'gs-mutation-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'],
+            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur', ...previewHandles],
         },
         fetchMock: {},
         componentDocs: {
@@ -38,7 +38,6 @@ const meta: Meta<MutationFilterProps> = {
         },
         width: { control: 'text' },
     },
-    decorators: [withActions],
     tags: ['autodocs'],
 };
 

package/src/web-components/input/gs-text-input.stories.ts

@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../app';
 import './gs-text-input';
@@ -24,7 +24,7 @@ const meta: Meta<Required<TextInputProps>> = {
     component: 'gs-text-input',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-text-input-changed'],
+            handles: ['gs-text-input-changed', ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -71,7 +71,6 @@ const meta: Meta<Required<TextInputProps>> = {
             },
         },
     },
-    decorators: [withActions],
     tags: ['autodocs'],
 };