feat(components): remove headline from all visualization components

BREAKING CHANGE: remove the `headline` attribute from all visualization components. Instead, dashboard developers should simply create a headline themselves, outside the component, using standard HTML/CSS. closes #350
GenSpectrum · Jul 17, 2024 · 77bac6a · 77bac6a
1 parent 48ea46e
commit 77bac6a
Show file tree

Hide file tree

Showing 65 changed files with 98 additions and 263 deletions.
diff --git a/components/src/preact/aggregatedData/aggregate.stories.tsx b/components/src/preact/aggregatedData/aggregate.stories.tsx
@@ -12,7 +12,6 @@ const meta: Meta<AggregateProps> = {
         fields: [{ control: 'object' }],
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         initialSortField: { control: 'text' },
         initialSortDirection: { control: 'radio', options: ['ascending', 'descending'] },
         pageSize: { control: 'object' },
@@ -55,7 +54,6 @@ export const Default: StoryObj<AggregateProps> = {
         },
         width: '100%',
         height: '700px',
-        headline: 'Aggregate',
         initialSortField: 'count',
         initialSortDirection: 'descending',
         pageSize: 10,

diff --git a/components/src/preact/aggregatedData/aggregate.tsx b/components/src/preact/aggregatedData/aggregate.tsx
@@ -8,7 +8,6 @@ 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';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -22,7 +21,6 @@ export type InitialSort = { field: string; direction: 'ascending' | 'descending'
 export type AggregateProps = {
     width: string;
     height: string;
-    headline?: string;
 } & AggregateInnerProps;
 
 export interface AggregateInnerProps {
@@ -34,20 +32,13 @@ export interface AggregateInnerProps {
     pageSize: boolean | number;
 }
 
-export const Aggregate: FunctionComponent<AggregateProps> = ({
-    width,
-    height,
-    headline = 'Mutations',
-    ...innerProps
-}) => {
+export const Aggregate: FunctionComponent<AggregateProps> = ({ width, height, ...innerProps }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <AggregateInner {...innerProps} />
-                </Headline>
+                <AggregateInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

diff --git a/components/src/preact/components/error-boundary.stories.tsx b/components/src/preact/components/error-boundary.stories.tsx
@@ -10,41 +10,37 @@ const meta: Meta = {
     argTypes: {
         size: { control: 'object' },
         defaultSize: { control: 'object' },
-        headline: { control: 'text' },
     },
     args: {
         size: { height: '600px', width: '100%' },
-        headline: 'Some headline',
     },
 };
 
 export default meta;
 
 export const ErrorBoundaryWithoutErrorStory: StoryObj = {
     render: (args) => (
-        <ErrorBoundary size={args.size} headline={args.headline}>
+        <ErrorBoundary size={args.size}>
             <div>Some content</div>
         </ErrorBoundary>
     ),
     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} headline={args.headline}>
+        <ErrorBoundary size={args.size}>
             <ContentThatThrowsError />
         </ErrorBoundary>
     ),
     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());
     },
 };

diff --git a/components/src/preact/components/error-boundary.tsx b/components/src/preact/components/error-boundary.tsx
@@ -3,17 +3,14 @@ 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; headline?: string }> = ({ size, headline, children }) => {
+export const ErrorBoundary: FunctionComponent<{ size: Size }> = ({ size, children }) => {
     const [internalError] = useErrorBoundary();
 
     if (internalError) {
         return (
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <ErrorDisplay error={internalError} />
-                </Headline>
+                <ErrorDisplay error={internalError} />
             </ResizeContainer>
         );
     }

diff --git a/components/src/preact/components/headline.stories.tsx b/components/src/preact/components/headline.stories.tsx
diff --git a/components/src/preact/components/headline.tsx b/components/src/preact/components/headline.tsx
diff --git a/components/src/preact/mutationComparison/mutation-comparison.stories.tsx b/components/src/preact/mutationComparison/mutation-comparison.stories.tsx
@@ -29,7 +29,6 @@ const meta: Meta<MutationComparisonProps> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
     },
     parameters: {
@@ -85,7 +84,6 @@ const Template: StoryObj<MutationComparisonProps> = {
                     views={args.views}
                     width={args.width}
                     height={args.height}
-                    headline={args.headline}
                     pageSize={args.pageSize}
                 />
             </ReferenceGenomeContext.Provider>
@@ -115,7 +113,6 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         views: ['table', 'venn'],
         width: '100%',
         height: '700px',
-        headline: 'Mutation comparison',
         pageSize: 10,
     },
 };

diff --git a/components/src/preact/mutationComparison/mutation-comparison.tsx b/components/src/preact/mutationComparison/mutation-comparison.tsx
@@ -11,7 +11,6 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 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';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
@@ -27,7 +26,6 @@ export type View = 'table' | 'venn';
 export interface MutationComparisonProps extends MutationComparisonInnerProps {
     width: string;
     height: string;
-    headline?: string;
 }
 
 export interface MutationComparisonInnerProps {
@@ -37,20 +35,13 @@ export interface MutationComparisonInnerProps {
     pageSize: boolean | number;
 }
 
-export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
-    width,
-    height,
-    headline = 'Mutation comparison',
-    ...innerProps
-}) => {
+export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({ width, height, ...innerProps }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <MutationComparisonInner {...innerProps} />
-                </Headline>
+                <MutationComparisonInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

diff --git a/components/src/preact/mutations/mutations.stories.tsx b/components/src/preact/mutations/mutations.stories.tsx
@@ -24,7 +24,6 @@ const meta: Meta<MutationsProps> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
     },
 };
@@ -41,7 +40,6 @@ const Template = {
                     views={args.views}
                     width={args.width}
                     height={args.height}
-                    headline={args.headline}
                     pageSize={args.pageSize}
                 />
             </ReferenceGenomeContext.Provider>
@@ -57,7 +55,6 @@ export const Default: StoryObj<MutationsProps> = {
         views: ['grid', 'table', 'insertions'],
         width: '100%',
         height: '700px',
-        headline: 'Mutations',
         pageSize: 10,
     },
     parameters: {

diff --git a/components/src/preact/mutations/mutations.tsx b/components/src/preact/mutations/mutations.tsx
@@ -18,7 +18,6 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 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';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
@@ -41,23 +40,15 @@ export interface MutationsInnerProps {
 export interface MutationsProps extends MutationsInnerProps {
     width: string;
     height: string;
-    headline?: string;
 }
 
-export const Mutations: FunctionComponent<MutationsProps> = ({
-    width,
-    height,
-    headline = 'Mutations',
-    ...innerProps
-}) => {
+export const Mutations: FunctionComponent<MutationsProps> = ({ width, height, ...innerProps }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <MutationsInner {...innerProps} />
-                </Headline>
+                <MutationsInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

diff --git a/components/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx b/components/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx
@@ -35,7 +35,6 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
                 views={args.views}
                 width={args.width}
                 height={args.height}
-                headline={args.headline}
                 granularity={args.granularity}
                 smoothingWindow={args.smoothingWindow}
                 pageSize={args.pageSize}
@@ -50,7 +49,6 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
         lapisDateField: 'date',
         width: '100%',
         height: '700px',
-        headline: 'Number of sequences over time',
         smoothingWindow: 0,
         granularity: 'month',
         pageSize: 10,

diff --git a/components/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx b/components/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx
@@ -13,7 +13,6 @@ 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, { InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -28,7 +27,6 @@ type NumberSequencesOverTimeView = 'bar' | 'line' | 'table';
 export interface NumberSequencesOverTimeProps extends NumberSequencesOverTimeInnerProps {
     width: string;
     height: string;
-    headline: string;
 }
 
 interface NumberSequencesOverTimeInnerProps {
@@ -40,15 +38,13 @@ interface NumberSequencesOverTimeInnerProps {
     pageSize: boolean | number;
 }
 
-export const NumberSequencesOverTime = ({ width, height, headline, ...innerProps }: NumberSequencesOverTimeProps) => {
+export const NumberSequencesOverTime = ({ width, height, ...innerProps }: NumberSequencesOverTimeProps) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <NumberSequencesOverTimeInner {...innerProps} />
-                </Headline>
+                <NumberSequencesOverTimeInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );