@genspectrum/dashboard-components 0.1.5 → 0.2.0

package/dist/genspectrum-components.d.ts

@@ -119,31 +119,18 @@ export declare class DateRangeSelectorComponent extends PreactLitAdapter {
      * If the value is invalid, the component will default to `'last6Months'`.
      */
     initialValue: 'custom' | 'allTimes' | 'last2Weeks' | 'lastMonth' | 'last2Months' | 'last3Months' | 'last6Months' | string | undefined;
+    /**
+     * The width of the component.
+     *
+     * If not set, the component will take the full width of its container.
+     *
+     * The width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.
+     * If the unit is %, the size will be relative to the container of the component.
+     */
+    width: string | undefined;
     render(): JSX_2.Element;
 }
 
-declare class Deletion implements Mutation {
-    readonly segment: string | undefined;
-    readonly valueAtReference: string | undefined;
-    readonly position: number;
-    readonly code: string;
-    constructor(segment: string | undefined, valueAtReference: string | undefined, position: number);
-    equals(other: Mutation): boolean;
-    toString(): string;
-    static parse(mutationStr: string): Deletion | null;
-}
-
-declare class Insertion implements Mutation {
-    readonly segment: string | undefined;
-    readonly position: number;
-    readonly insertedSymbols: string;
-    readonly code: string;
-    constructor(segment: string | undefined, position: number, insertedSymbols: string);
-    equals(other: Mutation): boolean;
-    toString(): string;
-    static parse(mutationStr: string): Insertion | null;
-}
-
 declare type LapisFilter = Record<string, string | number | null | boolean>;
 
 /**
@@ -186,17 +173,18 @@ export declare class LocationFilterComponent extends PreactLitAdapter {
      * (e.g., `fields = ['continent', 'country', 'city']`).
      */
     fields: string[];
+    /**
+     * The width of the component.
+     *
+     * If not set, the component will take the full width of its container.
+     *
+     * The width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.
+     * If the unit is %, the size will be relative to the container of the component.
+     */
+    width: string | undefined;
     render(): JSX_2.Element;
 }
 
-declare interface Mutation {
-    readonly segment: string | undefined;
-    readonly position: number;
-    readonly code: string;
-    equals(other: Mutation): boolean;
-    toString(): string;
-}
-
 /**
  * This component allows to compare mutations between different variants.
  * A variant is defined by its LAPIS filter.
@@ -314,7 +302,24 @@ export declare class MutationFilterComponent extends PreactLitAdapter {
      * - an array of strings of valid mutations.
      * - an object with the keys `nucleotideMutations`, `aminoAcidMutations`, `nucleotideInsertions` and `aminoAcidInsertions` and corresponding string arrays.
      */
-    initialValue: SelectedMutationFilterStrings | string[] | undefined;
+    initialValue: {
+        nucleotideMutations: string[];
+        aminoAcidMutations: string[];
+        nucleotideInsertions: string[];
+        aminoAcidInsertions: string[];
+    } | string[] | undefined;
+    /**
+     * The size of the component.
+     *
+     * If not set, the component will take the full width of its container with height 700px.
+     *
+     * The width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.
+     * If the unit is %, the size will be relative to the container of the component.
+     */
+    size: {
+        width?: string;
+        height?: string;
+    } | undefined;
     render(): JSX_2.Element;
 }
 
@@ -588,29 +593,6 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     render(): JSX_2.Element;
 }
 
-declare type SelectedFilters = {
-    nucleotideMutations: (Substitution | Deletion)[];
-    aminoAcidMutations: (Substitution | Deletion)[];
-    nucleotideInsertions: Insertion[];
-    aminoAcidInsertions: Insertion[];
-};
-
-declare type SelectedMutationFilterStrings = {
-    [Key in keyof SelectedFilters]: string[];
-};
-
-declare class Substitution implements Mutation {
-    readonly segment: string | undefined;
-    readonly valueAtReference: string | undefined;
-    readonly substitutionValue: string | undefined;
-    readonly position: number;
-    readonly code: string;
-    constructor(segment: string | undefined, valueAtReference: string | undefined, substitutionValue: string | undefined, position: number);
-    equals(other: Mutation): boolean;
-    toString(): string;
-    static parse(mutationStr: string): Substitution | null;
-}
-
 /**
  *
  * ## Context
@@ -640,6 +622,15 @@ export declare class TextInputComponent extends PreactLitAdapter {
      * The placeholder text to display in the input field.
      */
     placeholderText: string | undefined;
+    /**
+     * The width of the component.
+     *
+     * If not set, the component will take the full width of its container.
+     *
+     * The width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.
+     * If the unit is %, the size will be relative to the container of the component.
+     */
+    width: string | undefined;
     render(): JSX_2.Element;
 }
 
@@ -678,14 +669,14 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -725,7 +716,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': TextInputComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
         'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;

package/dist/style.css

@@ -1008,6 +1008,35 @@ html {
     max-width: 1536px;
   }
 }
+.alert {
+  display: grid;
+  width: 100%;
+  grid-auto-flow: row;
+  align-content: flex-start;
+  align-items: center;
+  justify-items: center;
+  gap: 1rem;
+  text-align: center;
+  border-radius: var(--rounded-box, 1rem);
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
+  padding: 1rem;
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  --alert-bg: var(--fallback-b2,oklch(var(--b2)/1));
+  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
+  background-color: var(--alert-bg);
+}
+@media (min-width: 640px) {
+
+  .alert {
+    grid-auto-flow: column;
+    grid-template-columns: auto minmax(auto,1fr);
+    justify-items: start;
+    text-align: start;
+  }
+}
 .avatar.placeholder > div {
   display: flex;
   align-items: center;
@@ -1516,29 +1545,6 @@ html {
 .select[multiple] {
   height: auto;
 }
-.stack {
-  display: inline-grid;
-  place-items: center;
-  align-items: flex-end;
-}
-.stack > * {
-  grid-column-start: 1;
-  grid-row-start: 1;
-  transform: translateY(10%) scale(0.9);
-  z-index: 1;
-  width: 100%;
-  opacity: 0.6;
-}
-.stack > *:nth-child(2) {
-  transform: translateY(5%) scale(0.95);
-  z-index: 2;
-  opacity: 0.8;
-}
-.stack > *:nth-child(1) {
-  transform: translateY(0) scale(1);
-  z-index: 3;
-  opacity: 1;
-}
 .steps {
   display: inline-grid;
   grid-auto-flow: column;
@@ -1638,6 +1644,13 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.alert-error {
+  border-color: var(--fallback-er,oklch(var(--er)/0.2));
+  --tw-text-opacity: 1;
+  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+  --alert-bg: var(--fallback-er,oklch(var(--er)/1));
+  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
+}
 .btm-nav > *.disabled,
     .btm-nav > *[disabled] {
   pointer-events: none;
@@ -2186,6 +2199,30 @@ input.tab:checked + .tab-content,
   background-position: calc(0% + 12px) calc(1px + 50%),
     calc(0% + 16px) calc(1px + 50%);
 }
+.skeleton {
+  border-radius: var(--rounded-box, 1rem);
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+  will-change: background-position;
+  animation: skeleton 1.8s ease-in-out infinite;
+  background-image: linear-gradient(
+    105deg,
+    transparent 0%,
+    transparent 40%,
+    var(--fallback-b1,oklch(var(--b1)/1)) 50%,
+    transparent 60%,
+    transparent 100%
+  );
+  background-size: 200% auto;
+  background-repeat: no-repeat;
+  background-position-x: -50%;
+}
+@media (prefers-reduced-motion) {
+
+  .skeleton {
+    animation-duration: 15s;
+  }
+}
 @keyframes skeleton {
 
   from {
@@ -2811,6 +2848,10 @@ input.tab:checked + .tab-content,
 .min-w-0 {
   min-width: 0px;
 }
+.min-w-max {
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
 .max-w-screen-lg {
   max-width: 1024px;
 }
@@ -2853,6 +2894,9 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
+.overflow-scroll {
+  overflow: scroll;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2871,6 +2915,9 @@ input.tab:checked + .tab-content,
 .rounded-lg {
   border-radius: 0.5rem;
 }
+.rounded-md {
+  border-radius: 0.375rem;
+}
 .rounded-none {
   border-radius: 0px;
 }
@@ -2996,6 +3043,10 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
 .underline {
   text-decoration-line: underline;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.1.5",
+    "version": "0.2.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -35,7 +35,7 @@
         "lint:lit-analyzer": "lit-analyzer",
         "generate-manifest": "npx custom-elements-manifest analyze --litelement --globs src/web-components/**",
         "generate-manifest:watch": "npm run generate-manifest -- --watch",
-        "format": "prettier \"**/*.{cjs,html,js,json,md,ts,tsx}\" --write",
+        "format": "prettier \"**/*.{ts,tsx,json,md,mdx,mjs,cjs}\" --write",
         "check-format": "prettier --check \"**/*.{ts,tsx,json,md,mdx,mjs,cjs}\"",
         "check-types": "tsc --noEmit",
         "check-dependencies": "depcheck",

package/src/preact/aggregatedData/aggregate.tsx

@@ -6,6 +6,7 @@ import { type AggregateData, queryAggregateData } from '../../query/queryAggrega
 import { type LapisFilter } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
+import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import Headline from '../components/headline';
 import Info from '../components/info';
@@ -17,21 +18,38 @@ import { useQuery } from '../useQuery';
 
 export type View = 'table';
 
-export interface AggregateProps {
+export type AggregateProps = {
+    size?: Size;
+    headline?: string;
+} & AggregateInnerProps;
+
+export interface AggregateInnerProps {
     filter: LapisFilter;
     fields: string[];
     views: View[];
-    size?: Size;
-    headline?: string;
 }
 
 export const Aggregate: FunctionComponent<AggregateProps> = ({
-    fields,
     views,
-    filter,
     size,
-    headline = 'Aggregate',
+    headline = 'Mutations',
+    filter,
+    fields,
 }) => {
+    const defaultSize = { height: '600px', width: '100%' };
+
+    return (
+        <ErrorBoundary size={size} defaultSize={defaultSize} headline={headline}>
+            <ResizeContainer size={size} defaultSize={defaultSize}>
+                <Headline heading={headline}>
+                    <AggregateInner fields={fields} filter={filter} views={views} />
+                </Headline>
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const AggregateInner: FunctionComponent<AggregateInnerProps> = ({ fields, views, filter }) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
@@ -39,36 +57,18 @@ export const Aggregate: FunctionComponent<AggregateProps> = ({
     }, [filter, fields, lapis]);
 
     if (isLoading) {
-        return (
-            <Headline heading={headline}>
-                <LoadingDisplay />
-            </Headline>
-        );
+        return <LoadingDisplay />;
     }
 
     if (error !== null) {
-        return (
-            <Headline heading={headline}>
-                <ErrorDisplay error={error} />
-            </Headline>
-        );
+        return <ErrorDisplay error={error} />;
     }
 
     if (data === null) {
-        return (
-            <Headline heading={headline}>
-                <NoDataDisplay />
-            </Headline>
-        );
+        return <NoDataDisplay />;
     }
 
-    return (
-        <ResizeContainer size={size} defaultSize={{ height: '700px', width: '100%' }}>
-            <Headline heading={headline}>
-                <AggregatedDataTabs data={data} views={views} fields={fields} />
-            </Headline>
-        </ResizeContainer>
-    );
+    return <AggregatedDataTabs data={data} views={views} fields={fields} />;
 };
 
 type AggregatedDataTabsProps = {

package/src/preact/components/error-boundary.stories.tsx

@@ -0,0 +1,62 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
+
+import { ErrorBoundary } from './error-boundary';
+
+const meta: Meta = {
+    title: 'Component/Error boundary',
+    component: ErrorBoundary,
+    parameters: { fetchMock: {} },
+    argTypes: {
+        size: { control: 'object' },
+        defaultSize: { control: 'object' },
+        headline: { control: 'text' },
+    },
+};
+
+export default meta;
+
+export const ErrorBoundaryWithoutErrorStory: StoryObj = {
+    render: (args) => (
+        <ErrorBoundary size={args.size} defaultSize={args.defaultSize} headline={args.headline}>
+            <div>Some content</div>
+        </ErrorBoundary>
+    ),
+    args: {
+        size: { height: '600px', width: '100%' },
+        defaultSize: { height: '600px', width: '100%' },
+        headline: 'Some headline',
+    },
+
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const content = canvas.getByText('Some content', { exact: false });
+        await waitFor(() => expect(content).toBeInTheDocument());
+        await waitFor(() => expect(canvas.queryByText('Some headline')).not.toBeInTheDocument());
+    },
+};
+
+export const ErrorBoundaryWithErrorStory: StoryObj = {
+    render: (args) => (
+        <ErrorBoundary size={args.size} defaultSize={args.defaultSize} headline={args.headline}>
+            <ContentThatThrowsError />
+        </ErrorBoundary>
+    ),
+    args: {
+        size: { height: '600px', width: '100%' },
+        defaultSize: { height: '600px', width: '100%' },
+        headline: 'Some headline',
+    },
+
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const content = canvas.queryByText('Some content.', { exact: false });
+        await waitFor(() => expect(content).not.toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByText('Some headline')).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByText('Error')).toBeInTheDocument());
+    },
+};
+
+const ContentThatThrowsError = () => {
+    throw new Error('Some error');
+};

package/src/preact/components/error-boundary.tsx

@@ -0,0 +1,31 @@
+import type { FunctionComponent } from 'preact';
+import { useErrorBoundary } from 'preact/hooks';
+
+import { ErrorDisplay } from './error-display';
+import { ResizeContainer, type Size } from './resize-container';
+import Headline from '../components/headline';
+
+export const ErrorBoundary: FunctionComponent<{ size?: Size; defaultSize: Size; headline?: string }> = ({
+    size,
+    defaultSize,
+    headline,
+    children,
+}) => {
+    const [internalError] = useErrorBoundary();
+
+    if (internalError) {
+        console.error(internalError);
+    }
+
+    if (internalError) {
+        return (
+            <ResizeContainer defaultSize={defaultSize} size={size}>
+                <Headline heading={headline}>
+                    <ErrorDisplay error={internalError} />
+                </Headline>
+            </ResizeContainer>
+        );
+    }
+
+    return <>{children}</>;
+};

package/src/preact/components/error-display.stories.tsx

@@ -1,7 +1,8 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor, within } from '@storybook/test';
 
-import { ErrorDisplay } from './error-display';
+import { ErrorDisplay, UserFacingError } from './error-display';
+import { ResizeContainer } from './resize-container';
 
 const meta: Meta = {
     title: 'Component/Error',
@@ -12,11 +13,31 @@ const meta: Meta = {
 export default meta;
 
 export const ErrorStory: StoryObj = {
-    render: () => <ErrorDisplay error={new Error('some message')} />,
+    render: () => (
+        <ResizeContainer defaultSize={{ height: '600px', width: '100%' }}>
+            <ErrorDisplay error={new Error('some message')} />
+        </ResizeContainer>
+    ),
 
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        const error = canvas.getByText('Error: ', { exact: false });
+        const error = canvas.getByText('Oops! Something went wrong.', { exact: false });
         await waitFor(() => expect(error).toBeInTheDocument());
+        await waitFor(() => expect(canvas.queryByText('some message')).not.toBeInTheDocument());
+    },
+};
+
+export const UserFacingErrorStory: StoryObj = {
+    render: () => (
+        <ResizeContainer defaultSize={{ height: '600px', width: '100%' }}>
+            <ErrorDisplay error={new UserFacingError('some message')} />
+        </ResizeContainer>
+    ),
+
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const error = canvas.getByText('Oops! Something went wrong.', { exact: false });
+        await waitFor(() => expect(error).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByText('some message')).toBeInTheDocument());
     },
 };

package/src/preact/components/error-display.tsx

@@ -1,5 +1,18 @@
 import { type FunctionComponent } from 'preact';
 
+export class UserFacingError extends Error {
+    constructor(message: string) {
+        super(message);
+        this.name = 'UserFacingError';
+    }
+}
+
 export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) => {
-    return <div>Error: {error.message}</div>;
+    return (
+        <div className='h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col'>
+            <div className='text-red-700 font-bold'>Error</div>
+            <div>Oops! Something went wrong.</div>
+            {error instanceof UserFacingError && <div className='text-sm text-gray-600'>{error.message}</div>}
+        </div>
+    );
 };

package/src/preact/components/loading-display.stories.tsx

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, waitFor, within } from '@storybook/test';
 
 import { LoadingDisplay } from './loading-display';
+import { ResizeContainer } from './resize-container';
 
 const meta: Meta = {
     title: 'Component/Loading',
@@ -12,9 +12,9 @@ const meta: Meta = {
 export default meta;
 
 export const LoadingStory: StoryObj = {
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const loading = canvas.getByText('Loading...');
-        await waitFor(() => expect(loading).toBeInTheDocument());
-    },
+    render: () => (
+        <ResizeContainer defaultSize={{ height: '600px', width: '100%' }}>
+            <LoadingDisplay />
+        </ResizeContainer>
+    ),
 };

package/src/preact/components/loading-display.tsx

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
 
 export const LoadingDisplay: FunctionComponent = () => {
-    return <div>Loading...</div>;
+    return <div aria-label={'Loading'} className='h-full w-full skeleton' />;
 };

package/src/preact/components/no-data-display.tsx

@@ -1,5 +1,9 @@
 import { type FunctionComponent } from 'preact';
 
 export const NoDataDisplay: FunctionComponent = () => {
-    return <div>No data available.</div>;
+    return (
+        <div className='h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center'>
+            <div>No data available.</div>
+        </div>
+    );
 };

package/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -40,11 +40,27 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
                 'CustomDateRange',
             ],
         },
+        customSelectOptions: {
+            control: {
+                type: 'object',
+            },
+        },
+        earliestDate: {
+            control: {
+                type: 'text',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
     },
     args: {
         customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
         earliestDate: '1970-01-01',
         initialValue: PRESET_VALUE_LAST_3_MONTHS,
+        width: '100%',
     },
     decorators: [withActions],
 };
@@ -58,6 +74,7 @@ export const Primary: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
                 customSelectOptions={args.customSelectOptions}
                 earliestDate={args.earliestDate}
                 initialValue={args.initialValue}
+                width={args.width}
             />
         </LapisUrlContext.Provider>
     ),