@genspectrum/dashboard-components 0.5.7 → 0.6.0

package/dist/genspectrum-components.d.ts

@@ -53,10 +53,6 @@ export declare class AggregateComponent extends PreactLitAdapterWithGridJsStyles
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    headline: string;
     /**
      * The field by which the table is initially sorted.
      * Must be one of the fields specified in the fields property, 'count', or 'proportion'.
@@ -300,10 +296,6 @@ export declare class MutationComparisonComponent extends PreactLitAdapterWithGri
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    headline: string;
     /**
      * The maximum number of rows to display in the table view.
      * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
@@ -441,10 +433,6 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    headline: string;
     /**
      * The maximum number of rows to display in the table view.
      * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
@@ -454,17 +442,27 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
 }
 
 /**
- * TODO(#330) write docs
+ * ## Context
+ *
+ * This component displays the number of sequences over time of one or more datasets,
+ * selected by LAPIS filters.
+ *
+ * In the chart views, the user can select the y-axis scale (linear, logistic).
+ * The x-axis shows all available time intervals available in the datasets in the selected `granularity`.
+ * Thus, the `lapisFilter` implicitly also defines the range that is shown on the x-axis.
+ * If you want to restrict the x-axis to a smaller date range,
+ * then you need to set appropriate filter values in the `lapisFilter`.
  */
 export declare class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
-     *   Required.
-     * Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.
+     * Required.
+     *
+     * Either a LAPIS filter or an array of LAPIS filters to fetch the number of sequences for.
      *
      * The `lapisFilter` will be sent as is to LAPIS to select the data.
      * It must be a valid LAPIS filter object.
      *
-     * The `displayName` will be used as the label the prevalence in the views.
+     * The `displayName` will be used to label the component views.
      * It should be human-readable.
      *
      */ lapisFilter: {
@@ -486,10 +484,6 @@ export declare class NumberSequencesOverTimeComponent extends PreactLitAdapterWi
      * A list of tabs with views that this component should provide.
      */
     views: ('bar' | 'line' | 'table')[];
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    headline: string;
     /**
      * The width of the component.
      *
@@ -623,10 +617,6 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
      * Pass an empty array to disable the confidence interval selector.
      */
     confidenceIntervalMethods: ('wilson' | 'none')[];
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    headline: string;
     /**
      * The width of the component.
      *
@@ -764,10 +754,6 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * A list of tabs with views that this component should provide.
      */
     views: 'line'[];
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    headline: string;
     /**
      * The width of the component.
      *

package/dist/style.css

@@ -2995,10 +2995,6 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
-.bg-base-200 {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
-}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.5.7",
+    "version": "0.6.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/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,

package/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>
     );

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

@@ -10,11 +10,9 @@ const meta: Meta = {
     argTypes: {
         size: { control: 'object' },
         defaultSize: { control: 'object' },
-        headline: { control: 'text' },
     },
     args: {
         size: { height: '600px', width: '100%' },
-        headline: 'Some headline',
     },
 };
 
@@ -22,7 +20,7 @@ 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>
     ),
@@ -30,13 +28,12 @@ export const ErrorBoundaryWithoutErrorStory: StoryObj = {
         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>
     ),
@@ -44,7 +41,6 @@ export const ErrorBoundaryWithErrorStory: StoryObj = {
         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());
     },
 };

package/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>
         );
     }

package/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,
     },
 };

package/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>
     );

package/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: {

package/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>
     );

package/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,

package/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>
     );

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

@@ -31,7 +31,6 @@ export default {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
         yAxisMaxConfig: { control: 'object' },
     },
@@ -49,7 +48,6 @@ const Template = {
                 confidenceIntervalMethods={args.confidenceIntervalMethods}
                 width={args.width}
                 height={args.height}
-                headline={args.headline}
                 lapisDateField={args.lapisDateField}
                 pageSize={args.pageSize}
                 yAxisMaxConfig={args.yAxisMaxConfig}
@@ -72,7 +70,6 @@ export const TwoVariants = {
         confidenceIntervalMethods: ['wilson'],
         width: '100%',
         height: '700px',
-        headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxConfig: {
@@ -149,7 +146,6 @@ export const OneVariant = {
         confidenceIntervalMethods: ['wilson'],
         width: '100%',
         height: '700px',
-        headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxConfig: {

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

@@ -13,7 +13,6 @@ import { ConfidenceIntervalSelector } from '../components/confidence-interval-se
 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';
@@ -30,7 +29,6 @@ export type View = 'bar' | 'line' | 'bubble' | 'table';
 export interface PrevalenceOverTimeProps extends PrevalenceOverTimeInnerProps {
     width: string;
     height: string;
-    headline?: string;
 }
 
 export interface PrevalenceOverTimeInnerProps {
@@ -45,20 +43,13 @@ export interface PrevalenceOverTimeInnerProps {
     yAxisMaxConfig: YAxisMaxConfig;
 }
 
-export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
-    width,
-    height,
-    headline = 'Prevalence over time',
-    ...innerProps
-}) => {
+export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({ width, height, ...innerProps }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <PrevalenceOverTimeInner {...innerProps} />
-                </Headline>
+                <PrevalenceOverTimeInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

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

@@ -20,7 +20,6 @@ export default {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         yAxisMaxConfig: { control: 'object' },
     },
 };
@@ -35,7 +34,6 @@ export const Primary = {
                 views={args.views}
                 width={args.width}
                 height={args.height}
-                headline={args.headline}
                 lapisDateField={args.lapisDateField}
                 yAxisMaxConfig={args.yAxisMaxConfig}
             />
@@ -48,7 +46,6 @@ export const Primary = {
         views: ['line'],
         width: '100%',
         height: '700px',
-        headline: 'Relative growth advantage',
         lapisDateField: 'date',
         yAxisMaxConfig: {
             linear: 1,

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

@@ -10,7 +10,6 @@ import { type LapisFilter } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Headline from '../components/headline';
 import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -26,7 +25,6 @@ export type View = 'line';
 export interface RelativeGrowthAdvantageProps extends RelativeGrowthAdvantagePropsInner {
     width: string;
     height: string;
-    headline?: string;
 }
 
 export interface RelativeGrowthAdvantagePropsInner {
@@ -41,17 +39,14 @@ export interface RelativeGrowthAdvantagePropsInner {
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
     width,
     height,
-    headline = 'Relative growth advantage',
     ...innerProps
 }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <RelativeGrowthAdvantageInner {...innerProps} />
-                </Headline>
+                <RelativeGrowthAdvantageInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

package/src/web-components/visualization/gs-aggregate.stories.ts

@@ -14,7 +14,6 @@ const codeExample = `
     fields='["division", "host"]'
     filter='{"country": "USA"}'
     views='["table"]'
-    headline="Aggregate"
     width='100%'
     height='700px'
     initialSortField="count"
@@ -33,7 +32,6 @@ const meta: Meta<Required<AggregateProps>> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
         initialSortField: { control: 'text' },
         initialSortDirection: {
@@ -80,7 +78,6 @@ export const Table: StoryObj<Required<AggregateProps>> = {
                 .views=${args.views}
                 .width=${args.width}
                 .height=${args.height}
-                .headline=${args.headline}
                 .initialSortField=${args.initialSortField}
                 .initialSortDirection=${args.initialSortDirection}
                 .pageSize=${args.pageSize}
@@ -95,7 +92,6 @@ export const Table: StoryObj<Required<AggregateProps>> = {
         },
         width: '100%',
         height: '700px',
-        headline: 'Aggregate',
         initialSortField: 'count',
         initialSortDirection: 'descending',
         pageSize: 10,

package/src/web-components/visualization/gs-aggregate.tsx

@@ -61,12 +61,6 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: String })
     height: string = '700px';
 
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    @property({ type: String })
-    headline: string = 'Aggregate';
-
     /**
      * The field by which the table is initially sorted.
      * Must be one of the fields specified in the fields property, 'count', or 'proportion'.
@@ -95,7 +89,6 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
                 filter={this.filter}
                 width={this.width}
                 height={this.height}
-                headline={this.headline}
                 initialSortField={this.initialSortField}
                 initialSortDirection={this.initialSortDirection}
                 pageSize={this.pageSize}

package/src/web-components/visualization/gs-mutation-comparison.stories.ts

@@ -16,7 +16,6 @@ const codeExample = String.raw`
     lapisFilters='[{ "displayName": "Data in Switzerland", "lapisFilter": { "country": "Switzerland" }}, { "displayName": "Data in Germany", "lapisFilter": { "country": "Germany" }}]'
     sequenceType="nucleotide"
     views='["table", "venn"]'
-    headline="Mutation comparison"
     width='100%'
     height='700px'
     pageSize="10"
@@ -37,7 +36,6 @@ const meta: Meta<Required<MutationComparisonProps>> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
     },
     parameters: withComponentDocs({
@@ -61,7 +59,6 @@ const Template: StoryObj<Required<MutationComparisonProps>> = {
                 .views=${args.views}
                 .width=${args.width}
                 .height=${args.height}
-                .headline=${args.headline}
                 .pageSize=${args.pageSize}
             ></gs-mutation-comparison>
         </gs-app>
@@ -93,7 +90,6 @@ export const Default: StoryObj<Required<MutationComparisonProps>> = {
         views: ['table', 'venn'],
         width: '100%',
         height: '700px',
-        headline: 'Mutation comparison',
         pageSize: 10,
     },
     parameters: {

package/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -75,12 +75,6 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: String })
     height: string = '700px';
 
-    /**
-     * The headline of the component. Set to an empty string to hide the headline.
-     */
-    @property({ type: String })
-    headline: string = 'Mutation comparison';
-
     /**
      * The maximum number of rows to display in the table view.
      * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
@@ -96,7 +90,6 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
                 views={this.views}
                 width={this.width}
                 height={this.height}
-                headline={this.headline}
                 pageSize={this.pageSize}
             />
         );