@genspectrum/dashboard-components 0.16.2 → 0.16.3

package/dist/style.css

@@ -1073,6 +1073,12 @@ html {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
   }
+
+  .table-zebra tr.hover:hover,
+  .table-zebra tr.hover:nth-child(even):hover {
+    --tw-bg-opacity: 1;
+    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+  }
 }
 .btn {
   display: inline-flex;
@@ -3187,6 +3193,9 @@ input.tab:checked + .tab-content,
 .mt-4 {
   margin-top: 1rem;
 }
+.block {
+  display: block;
+}
 .inline {
   display: inline;
 }
@@ -3492,6 +3501,9 @@ input.tab:checked + .tab-content,
 .font-medium {
   font-weight: 500;
 }
+.font-normal {
+  font-weight: 400;
+}
 .font-semibold {
   font-weight: 600;
 }
@@ -3522,6 +3534,10 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(115 115 115 / var(--tw-text-opacity, 1));
 }
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
 .text-red-700 {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity, 1));

package/dist/util.d.ts

@@ -880,7 +880,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -888,7 +888,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -896,7 +896,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -904,7 +904,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -926,6 +926,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-mutations-over-time': MutationsOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-aggregate': AggregateComponent;
@@ -944,7 +960,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -952,7 +968,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -960,7 +976,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -968,7 +987,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -976,7 +995,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -984,7 +1003,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -992,10 +1011,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1003,7 +1019,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1086,22 +1102,6 @@ declare global {
 }
 
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare module 'chart.js' {
     interface CartesianScaleTypeRegistry {
         logit: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.16.2",
+    "version": "0.16.3",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -51,7 +51,7 @@
     "scripts": {
         "build": "vite --config vite.release.config.ts build && npm run generate-manifest && vite --config vite.release-standalone.config.ts build",
         "build-and-pack": "npm run build && npm pack | xargs -I {} cp {} genspectrum-dashboard-components.tgz",
-        "test": "vitest",
+        "test": "vitest --typecheck",
         "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
         "lint:eslint": "eslint 'src/**/*.{ts,tsx}'",
         "lint:lit-analyzer": "lit-analyzer",
@@ -115,6 +115,7 @@
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
         "@tailwindcss/container-queries": "^0.1.1",
+        "@testing-library/preact": "^3.2.4",
         "@types/geojson": "^7946.0.15",
         "@types/leaflet": "^1.9.15",
         "@types/node": "^22.0.0",
@@ -130,6 +131,7 @@
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
         "eslint-plugin-storybook": "^0.11.0",
+        "happy-dom": "^17.1.1",
         "http-server": "^14.1.1",
         "lit-analyzer": "^2.0.3",
         "msw": "^2.2.14",

package/src/preact/MutationAnnotationsContext.spec.tsx

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/preact';
+import { type FunctionalComponent } from 'preact';
+import { describe, expect, it } from 'vitest';
+
+import { MutationAnnotationsContextProvider, useMutationAnnotationsProvider } from './MutationAnnotationsContext';
+import { type MutationAnnotations } from '../web-components/mutation-annotations-context';
+
+describe('useMutationAnnotation', () => {
+    const mockAnnotations: MutationAnnotations = [
+        {
+            name: 'Annotation 1',
+            description: 'Description 1',
+            symbol: 'A1',
+            nucleotideMutations: ['A123', 'A456'],
+            aminoAcidMutations: ['B123'],
+        },
+        {
+            name: 'Annotation 2',
+            description: 'Description 2',
+            symbol: 'A2',
+            nucleotideMutations: ['A456', 'A789'],
+            aminoAcidMutations: ['B456', 'B789'],
+        },
+    ];
+
+    const wrapper: FunctionalComponent = ({ children }) => (
+        <MutationAnnotationsContextProvider value={mockAnnotations}>{children}</MutationAnnotationsContextProvider>
+    );
+
+    function renderAnnotationsHook() {
+        const { result } = renderHook(() => useMutationAnnotationsProvider(), { wrapper });
+        return result.current;
+    }
+
+    it('should return the correct annotation for a given nucleotide mutation', () => {
+        const result = renderAnnotationsHook()('A123', 'nucleotide');
+
+        expect(result).toEqual([mockAnnotations[0]]);
+    });
+
+    it('should return the correct annotations if multiple contain a mutation', () => {
+        const result = renderAnnotationsHook()('A456', 'nucleotide');
+
+        expect(result).toEqual([mockAnnotations[0], mockAnnotations[1]]);
+    });
+
+    it('should return undefined for a non-existent mutation code', () => {
+        const result = renderAnnotationsHook()('NON_EXISTENT', 'nucleotide');
+
+        expect(result).toBeUndefined();
+    });
+
+    it('should return the correct mutation annotation for amino acid mutations', () => {
+        const result = renderAnnotationsHook()('B456', 'amino acid');
+
+        expect(result).toEqual([mockAnnotations[1]]);
+    });
+});

package/src/preact/MutationAnnotationsContext.tsx

@@ -0,0 +1,72 @@
+import { type ComponentProps, createContext, type FunctionalComponent } from 'preact';
+import { useContext, useMemo } from 'preact/hooks';
+
+import { type SequenceType } from '../types';
+import {
+    type MutationAnnotation,
+    type MutationAnnotations,
+    mutationAnnotationsSchema,
+} from '../web-components/mutation-annotations-context';
+import { ErrorDisplay } from './components/error-display';
+import { ResizeContainer } from './components/resize-container';
+
+const MutationAnnotationsContext = createContext<Record<SequenceType, Map<string, MutationAnnotations>>>({
+    nucleotide: new Map(),
+    'amino acid': new Map(),
+});
+
+export const MutationAnnotationsContextProvider: FunctionalComponent<
+    Omit<ComponentProps<typeof MutationAnnotationsContext.Provider>, 'value'> & { value: MutationAnnotations }
+> = ({ value, children }) => {
+    const parseResult = useMemo(() => {
+        const parseResult = mutationAnnotationsSchema.safeParse(value);
+
+        if (!parseResult.success) {
+            return parseResult;
+        }
+
+        const nucleotideMap = new Map<string, MutationAnnotations>();
+        const aminoAcidMap = new Map<string, MutationAnnotations>();
+
+        value.forEach((annotation) => {
+            new Set(annotation.nucleotideMutations).forEach((code) => {
+                addAnnotationToMap(nucleotideMap, code, annotation);
+            });
+            new Set(annotation.aminoAcidMutations).forEach((code) => {
+                addAnnotationToMap(aminoAcidMap, code, annotation);
+            });
+        });
+
+        return {
+            success: true as const,
+            value: {
+                nucleotide: nucleotideMap,
+                'amino acid': aminoAcidMap,
+            },
+        };
+    }, [value]);
+
+    if (!parseResult.success) {
+        return (
+            <ResizeContainer size={{ width: '100%' }}>
+                <ErrorDisplay error={parseResult.error} layout='vertical' />
+            </ResizeContainer>
+        );
+    }
+
+    return (
+        <MutationAnnotationsContext.Provider value={parseResult.value}>{children}</MutationAnnotationsContext.Provider>
+    );
+};
+
+function addAnnotationToMap(map: Map<string, MutationAnnotations>, code: string, annotation: MutationAnnotation) {
+    const oldAnnotations = map.get(code.toUpperCase()) ?? [];
+    map.set(code.toUpperCase(), [...oldAnnotations, annotation]);
+}
+
+export function useMutationAnnotationsProvider() {
+    const mutationAnnotations = useContext(MutationAnnotationsContext);
+
+    return (mutationCode: string, sequenceType: SequenceType) =>
+        mutationAnnotations[sequenceType].get(mutationCode.toUpperCase());
+}

package/src/preact/components/annotated-mutation.stories.tsx

@@ -0,0 +1,163 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+
+import { AnnotatedMutation, type AnnotatedMutationProps } from './annotated-mutation';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
+import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
+
+const meta: Meta<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+    title: 'Component/Annotated Mutation',
+    component: AnnotatedMutation,
+    parameters: { fetchMock: {} },
+    argTypes: {
+        annotations: { control: { type: 'object' } },
+        mutation: { control: { type: 'object' } },
+        sequenceType: {
+            options: ['nucleotide', 'amino acid'],
+            control: { type: 'radio' },
+        },
+    },
+};
+
+export default meta;
+
+export const MutationWithoutAnnotationEntry: StoryObj<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+    render: (args) => {
+        const { annotations, ...annotatedMutationsArgs } = args;
+
+        return (
+            <MutationAnnotationsContextProvider value={annotations}>
+                <AnnotatedMutation {...annotatedMutationsArgs} />
+            </MutationAnnotationsContextProvider>
+        );
+    },
+    args: {
+        mutation: {
+            type: 'substitution',
+            code: 'A23403G',
+            position: 23403,
+            valueAtReference: 'A',
+            substitutionValue: 'G',
+        },
+        sequenceType: 'nucleotide',
+        annotations: [
+            {
+                name: 'Test annotation',
+                description: 'This is a test annotation',
+                symbol: '*',
+                nucleotideMutations: ['123T'],
+                aminoAcidMutations: [],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).not.toBeInTheDocument();
+        await expect(getAnnotationName(canvas)).not.toBeInTheDocument();
+    },
+};
+
+export const MutationWithAnnotationEntry: StoryObj<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        ...MutationWithoutAnnotationEntry.args,
+        annotations: [
+            {
+                name: 'Test annotation',
+                description: 'This is a test annotation',
+                symbol: '*',
+                nucleotideMutations: ['A23403G'],
+                aminoAcidMutations: [],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).toBeVisible();
+
+        await userEvent.click(canvas.getByText('A23403G'));
+        await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
+    },
+};
+
+export const MutationWithMultipleAnnotationEntries: StoryObj<
+    AnnotatedMutationProps & { annotations: MutationAnnotations }
+> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        ...MutationWithoutAnnotationEntry.args,
+        annotations: [
+            {
+                name: 'Test annotation',
+                description: 'This is a test annotation',
+                symbol: '*',
+                nucleotideMutations: ['A23403G'],
+                aminoAcidMutations: [],
+            },
+            {
+                name: 'Another test annotation',
+                description: 'This is a test annotation',
+                symbol: '+',
+                nucleotideMutations: ['A23403G'],
+                aminoAcidMutations: [],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).toBeVisible();
+        await expect(canvas.queryByText('+')).toBeVisible();
+
+        await userEvent.click(canvas.getByText('A23403G'));
+        await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
+        await expect(canvas.queryByText('Another test annotation')).toBeVisible();
+    },
+};
+
+export const AminoAcidMutationWithAnnotationEntry: StoryObj<
+    AnnotatedMutationProps & { annotations: MutationAnnotations }
+> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        mutation: {
+            type: 'substitution',
+            code: 'S:A501G',
+            position: 501,
+            valueAtReference: 'A',
+            substitutionValue: 'G',
+        },
+        sequenceType: 'amino acid',
+        annotations: [
+            {
+                name: 'Test annotation',
+                description: 'This is a test annotation',
+                symbol: '*',
+                nucleotideMutations: [],
+                aminoAcidMutations: ['S:A501G'],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('S:A501G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).toBeVisible();
+
+        await userEvent.click(canvas.getByText('S:A501G'));
+        await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
+    },
+};
+
+function getAnnotationIndicator(canvas: ReturnType<typeof within>) {
+    return canvas.queryByText('*');
+}
+
+function getAnnotationName(canvas: ReturnType<typeof within>) {
+    return canvas.queryByText('Test annotation');
+}

package/src/preact/components/annotated-mutation.tsx

@@ -0,0 +1,80 @@
+import { useRef } from 'gridjs';
+import { Fragment, type FunctionComponent, type RefObject } from 'preact';
+
+import type { SequenceType } from '../../types';
+import type { Deletion, Substitution } from '../../utils/mutations';
+import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+import { InfoHeadline1, InfoHeadline2, InfoParagraph } from './info';
+import { ButtonWithModalDialog, useModalRef } from './modal';
+
+export type AnnotatedMutationProps = {
+    mutation: Substitution | Deletion;
+    sequenceType: SequenceType;
+};
+
+export const AnnotatedMutation: FunctionComponent<AnnotatedMutationProps> = (props) => {
+    const annotationsProvider = useMutationAnnotationsProvider();
+    const modalRef = useModalRef();
+
+    return <AnnotatedMutationWithoutContext {...props} annotationsProvider={annotationsProvider} modalRef={modalRef} />;
+};
+
+type GridJsAnnotatedMutationProps = AnnotatedMutationProps & {
+    annotationsProvider: ReturnType<typeof useMutationAnnotationsProvider>;
+};
+
+/**
+ * GridJS internally also uses Preact, but it uses its own Preact instance:
+ * - Our Preact contexts are not available in GridJS. We need to inject context content as long as we're in our Preact instance.
+ * - We must use the GridJS re-exports of the Preact hooks. I'm not sure why.
+ */
+export const GridJsAnnotatedMutation: FunctionComponent<GridJsAnnotatedMutationProps> = (props) => {
+    const modalRef = useRef<HTMLDialogElement>(null);
+
+    return <AnnotatedMutationWithoutContext {...props} modalRef={modalRef} />;
+};
+
+type AnnotatedMutationWithoutContextProps = GridJsAnnotatedMutationProps & {
+    modalRef: RefObject<HTMLDialogElement>;
+};
+
+const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithoutContextProps> = ({
+    mutation,
+    sequenceType,
+    annotationsProvider,
+    modalRef,
+}) => {
+    const mutationAnnotations = annotationsProvider(mutation.code, sequenceType);
+
+    if (mutationAnnotations === undefined || mutationAnnotations.length === 0) {
+        return mutation.code;
+    }
+
+    const modalContent = (
+        <div className='block'>
+            <InfoHeadline1>Annotations for {mutation.code}</InfoHeadline1>
+            {mutationAnnotations.map((annotation) => (
+                <Fragment key={annotation.name}>
+                    <InfoHeadline2>{annotation.name}</InfoHeadline2>
+                    <InfoParagraph>{annotation.description}</InfoParagraph>
+                </Fragment>
+            ))}
+        </div>
+    );
+
+    return (
+        <ButtonWithModalDialog modalContent={modalContent} modalRef={modalRef}>
+            {mutation.code}
+            <sup>
+                {mutationAnnotations
+                    .map((annotation) => annotation.symbol)
+                    .map((symbol, index) => (
+                        <Fragment key={symbol}>
+                            <span className='text-red-600'>{symbol}</span>
+                            {index !== mutationAnnotations.length - 1 && ','}
+                        </Fragment>
+                    ))}
+            </sup>
+        </ButtonWithModalDialog>
+    );
+};

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

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'preact/hooks';
 import { type ZodError } from 'zod';
 
 import { InfoHeadline1, InfoParagraph } from './info';
-import { Modal, useModalRef } from './modal';
+import { Modal } from './modal';
 import { LapisError, UnknownLapisError } from '../../lapisApi/lapisApi';
 
 export const GS_ERROR_EVENT_TYPE = 'gs-error';
@@ -48,7 +48,6 @@ export const ErrorDisplay: FunctionComponent<ErrorDisplayProps> = ({ error, rese
     console.error(error);
 
     const containerRef = useRef<HTMLInputElement>(null);
-    const modalRef = useModalRef();
 
     useEffect(() => {
         containerRef.current?.dispatchEvent(new ErrorEvent(error));
@@ -68,15 +67,16 @@ export const ErrorDisplay: FunctionComponent<ErrorDisplayProps> = ({ error, rese
                     {details !== undefined && (
                         <>
                             {' '}
-                            <button
-                                className='underline hover:text-gray-400'
-                                onClick={() => modalRef.current?.showModal()}
+                            <Modal
+                                buttonClassName='underline hover:text-gray-400'
+                                modalContent={
+                                    <>
+                                        <InfoHeadline1>{details.headline}</InfoHeadline1>
+                                        <InfoParagraph>{details.message}</InfoParagraph>
+                                    </>
+                                }
                             >
                                 Show details.
-                            </button>
-                            <Modal modalRef={modalRef}>
-                                <InfoHeadline1>{details.headline}</InfoHeadline1>
-                                <InfoParagraph>{details.message}</InfoParagraph>
                             </Modal>
                         </>
                     )}

package/src/preact/components/info.tsx

@@ -1,34 +1,27 @@
 import { type FunctionComponent } from 'preact';
 
-import { Modal, useModalRef } from './modal';
+import { Modal } from './modal';
 
 const Info: FunctionComponent = ({ children }) => {
-    const modalRef = useModalRef();
-
-    const toggleHelp = () => {
-        modalRef.current?.showModal();
-    };
-
     return (
         <div className='relative'>
-            <button type='button' className='btn btn-xs' onClick={toggleHelp}>
+            <Modal buttonClassName='btn btn-xs' modalContent={children}>
                 ?
-            </button>
-            <Modal modalRef={modalRef}>{children}</Modal>
+            </Modal>
         </div>
     );
 };
 
 export const InfoHeadline1: FunctionComponent = ({ children }) => {
-    return <h1 className='text-lg font-bold'>{children}</h1>;
+    return <h1 className='text-justify text-lg font-bold'>{children}</h1>;
 };
 
 export const InfoHeadline2: FunctionComponent = ({ children }) => {
-    return <h2 className='text-base font-bold mt-4'>{children}</h2>;
+    return <h2 className='text-justify text-base font-bold mt-4'>{children}</h2>;
 };
 
 export const InfoParagraph: FunctionComponent = ({ children }) => {
-    return <p className='text-justify my-1'>{children}</p>;
+    return <p className='text-justify text-base font-normal my-1'>{children}</p>;
 };
 
 export const InfoLink: FunctionComponent<{ href: string }> = ({ children, href }) => {