@genspectrum/dashboard-components 0.19.2 → 0.19.3

package/dist/util.d.ts

@@ -149,6 +149,16 @@ declare const dateRangeValueSchema: default_2.ZodNullable<default_2.ZodUnion<[de
     dateTo?: string | undefined;
 }>]>>;
 
+export declare const gsEventNames: {
+    readonly error: "gs-error";
+    readonly dateRangeFilterChanged: "gs-date-range-filter-changed";
+    readonly dateRangeOptionChanged: "gs-date-range-option-changed";
+    readonly mutationFilterChanged: "gs-mutation-filter-changed";
+    readonly lineageFilterChanged: "gs-lineage-filter-changed";
+    readonly locationChanged: "gs-location-changed";
+    readonly textFilterChanged: "gs-text-filter-changed";
+};
+
 export declare type LapisFilter = default_2.infer<typeof lapisFilterSchema>;
 
 declare const lapisFilterSchema: default_2.ZodIntersection<default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodArray<default_2.ZodString, "many">, default_2.ZodNumber, default_2.ZodNull, default_2.ZodBoolean, default_2.ZodUndefined]>>, default_2.ZodObject<{
@@ -879,7 +889,7 @@ export { }
 
 declare global {
     interface HTMLElementEventMap {
-        'gs-error': ErrorEvent;
+        [gsEventNames.error]: ErrorEvent;
     }
 }
 
@@ -900,6 +910,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-mutation-comparison-component': MutationComparisonComponent;
@@ -934,7 +960,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -942,7 +968,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -950,7 +976,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -958,7 +984,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>;
         }
     }
 }
@@ -966,7 +992,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -974,7 +1000,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -982,7 +1008,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -990,7 +1016,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1014,7 +1040,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1022,7 +1048,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1030,7 +1056,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1038,7 +1064,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1046,7 +1072,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1054,7 +1080,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1062,10 +1088,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1073,7 +1100,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1081,11 +1108,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1093,7 +1119,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1104,7 +1130,7 @@ declare global {
         'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1123,7 +1149,7 @@ declare global {
         'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1142,7 +1168,7 @@ declare global {
         'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
     }
 }
 

package/dist/util.js

@@ -1,10 +1,11 @@
-import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-ixHQkq8y.js";
+import { D, a, L, T, d, g, v } from "./LineageFilterChangedEvent-b0iuroUL.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,
   L as LocationChangedEvent,
   T as TextFilterChangedEvent,
   d as dateRangeOptionPresets,
+  g as gsEventNames,
   v as views
 };
 //# sourceMappingURL=util.js.map

package/package.json

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

package/src/componentsEntrypoint.ts

@@ -1,9 +1,11 @@
+import { type gsEventNames } from './utils/gsEventNames';
+
 export * from './web-components';
 
 export { type ErrorEvent, UserFacingError } from './preact/components/error-display';
 
 declare global {
     interface HTMLElementEventMap {
-        'gs-error': ErrorEvent;
+        [gsEventNames.error]: ErrorEvent;
     }
 }

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

@@ -3,6 +3,7 @@ import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 
 import { ErrorDisplay, UserFacingError } from './error-display';
 import { ResizeContainer } from './resize-container';
+import { gsEventNames } from '../../utils/gsEventNames';
 
 const meta: Meta = {
     title: 'Component/Error',
@@ -58,7 +59,7 @@ export const FiresEvent: StoryObj = {
 
     play: async ({ canvasElement }) => {
         const listenerMock = fn();
-        canvasElement.addEventListener('gs-error', listenerMock);
+        canvasElement.addEventListener(gsEventNames.error, listenerMock);
 
         await waitFor(async () => {
             await expect(listenerMock.mock.calls.at(-1)![0].error.name).toStrictEqual('UserFacingError');

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

@@ -5,12 +5,11 @@ import { type ZodError } from 'zod';
 import { InfoHeadline1, InfoParagraph } from './info';
 import { Modal } from './modal';
 import { LapisError, UnknownLapisError } from '../../lapisApi/lapisApi';
-
-export const GS_ERROR_EVENT_TYPE = 'gs-error';
+import { gsEventNames } from '../../utils/gsEventNames';
 
 export class ErrorEvent extends Event {
     constructor(public readonly error: Error) {
-        super(GS_ERROR_EVENT_TYPE, {
+        super(gsEventNames.error, {
             bubbles: true,
             composed: true,
         });

package/src/preact/components/resize-container.tsx

@@ -1,18 +1,15 @@
-import { type FunctionComponent } from 'preact';
+import { type ComponentChildren } from 'preact';
+import { forwardRef } from 'preact/compat';
 
 export type Size = {
     width: string;
     height?: string;
 };
 
-export interface ResizeContainerProps {
-    size: Size;
-}
-
-export const ResizeContainer: FunctionComponent<ResizeContainerProps> = ({ children, size }) => {
-    return (
-        <div style={size} className='bg-white'>
+export const ResizeContainer = forwardRef<HTMLDivElement, { size: Size; children: ComponentChildren }>(
+    ({ size, children }, ref) => (
+        <div ref={ref} style={{ width: size.width, height: size.height, position: 'relative' }}>
             {children}
         </div>
-    );
-};
+    ),
+);

package/src/preact/components/tooltip.tsx

@@ -1,4 +1,5 @@
 import { type FunctionComponent } from 'preact';
+import { type CSSProperties } from 'preact/compat';
 import { type JSXInternal } from 'preact/src/jsx';
 
 export type TooltipPosition =
@@ -14,6 +15,7 @@ export type TooltipPosition =
 export type TooltipProps = {
     content: string | JSXInternal.Element;
     position?: TooltipPosition;
+    tooltipStyle?: CSSProperties;
 };
 
 function getPositionCss(position?: TooltipPosition) {
@@ -39,12 +41,13 @@ function getPositionCss(position?: TooltipPosition) {
     }
 }
 
-const Tooltip: FunctionComponent<TooltipProps> = ({ children, content, position = 'bottom' }) => {
+const Tooltip: FunctionComponent<TooltipProps> = ({ children, content, position = 'bottom', tooltipStyle }) => {
     return (
-        <div className='relative w-full h-full'>
-            <div className='peer w-full h-full'>{children}</div>
+        <div className={`relative group`}>
+            <div>{children}</div>
             <div
-                className={`absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible peer-hover:visible ${getPositionCss(position)}`}
+                className={`absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible group-hover:visible ${getPositionCss(position)}`}
+                style={{ ...tooltipStyle }}
             >
                 {content}
             </div>

package/src/preact/dateRangeFilter/date-range-filter.stories.tsx

@@ -7,6 +7,7 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { DateRangeFilter, type DateRangeFilterProps } from './date-range-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { dateRangeOptionPresets, type DateRangeValue } from './dateRangeOption';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
@@ -27,7 +28,7 @@ const meta: Meta<DateRangeFilterProps> = {
     component: DateRangeFilter,
     parameters: {
         actions: {
-            handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles],
+            handles: [gsEventNames.dateRangeFilterChanged, gsEventNames.dateRangeOptionChanged, ...previewHandles],
         },
         fetchMock: {},
     },
@@ -198,7 +199,7 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> =
             const ref = useRef<HTMLDivElement>(null);
 
             useEffect(() => {
-                ref.current?.addEventListener('gs-date-range-option-changed', (event) => {
+                ref.current?.addEventListener(gsEventNames.dateRangeOptionChanged, (event) => {
                     setValue(event.detail);
                 });
             }, []);
@@ -333,8 +334,8 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const filterChangedListenerMock = fn();
     const optionChangedListenerMock = fn();
     await step('Setup event listener mock', () => {
-        canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
-        canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock);
+        canvasElement.addEventListener(gsEventNames.dateRangeFilterChanged, filterChangedListenerMock);
+        canvasElement.addEventListener(gsEventNames.dateRangeOptionChanged, optionChangedListenerMock);
     });
 
     return { canvas, filterChangedListenerMock, optionChangedListenerMock };

package/src/preact/dateRangeFilter/date-range-filter.tsx

@@ -10,6 +10,7 @@ import {
     dateRangeOptionSchema,
     dateRangeValueSchema,
 } from './dateRangeOption';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { ClearableSelect } from '../components/clearable-select';
 import { ErrorBoundary } from '../components/error-boundary';
 
@@ -170,7 +171,7 @@ export const DateRangeFilterInner = ({
         };
 
         divRef.current?.dispatchEvent(
-            new CustomEvent('gs-date-range-filter-changed', {
+            new CustomEvent(gsEventNames.dateRangeFilterChanged, {
                 detail,
                 bubbles: true,
                 composed: true,

package/src/preact/dateRangeFilter/dateRangeOption.ts

@@ -1,6 +1,7 @@
 import z from 'zod';
 
 import { toYYYYMMDD } from './dateConversion';
+import { gsEventNames } from '../../utils/gsEventNames';
 
 /**
  * A date range option that can be used in the `gs-date-range-filter` component.
@@ -36,7 +37,7 @@ export type DateRangeValue = z.infer<typeof dateRangeValueSchema>;
 
 export class DateRangeOptionChangedEvent extends CustomEvent<DateRangeValue> {
     constructor(detail: DateRangeValue) {
-        super('gs-date-range-option-changed', {
+        super(gsEventNames.dateRangeOptionChanged, {
             detail,
             bubbles: true,
             composed: true,

package/src/preact/genomeViewer/CDSPlot.tsx

@@ -0,0 +1,219 @@
+import { Fragment, type FunctionComponent } from 'preact';
+import { useMemo, useState } from 'preact/hooks';
+
+import { type CDSFeature } from './loadGff3';
+import { MinMaxRangeSlider } from '../components/min-max-range-slider';
+import Tooltip from '../components/tooltip';
+import { singleGraphColorRGBByName } from '../shared/charts/colors';
+
+const MAX_TICK_NUMBER = 20;
+const MIN_TICK_NUMBER = 2;
+
+function getMaxTickNumber(fullWidth: number): number {
+    const baseValue = 1000;
+
+    const normalizedRatio = fullWidth / baseValue;
+
+    const ticks = Math.round(MAX_TICK_NUMBER * normalizedRatio);
+    return Math.max(MIN_TICK_NUMBER, Math.min(MAX_TICK_NUMBER, ticks));
+}
+
+function getTicks(zoomStart: number, zoomEnd: number, fullWidth: number) {
+    const maxTickNumber = getMaxTickNumber(fullWidth);
+    const length = zoomEnd - zoomStart;
+    const minTickSize = length / maxTickNumber;
+    let maxTickSize = 10 ** Math.round(Math.log(minTickSize) / Math.log(10));
+    const numTicks = Math.round(length / maxTickSize);
+    if (numTicks > maxTickNumber) {
+        if (numTicks > 2 * maxTickNumber) {
+            maxTickSize = maxTickSize * 5;
+        } else {
+            maxTickSize = maxTickSize * 2;
+        }
+    }
+    const ticks = [];
+
+    const offset = Math.ceil(zoomStart / maxTickSize);
+    ticks.push({ start: zoomStart, end: zoomStart + maxTickSize - (zoomStart % maxTickSize) });
+    for (let i = 0; i <= numTicks; i++) {
+        const start = i * maxTickSize + offset * maxTickSize;
+        if (start >= zoomEnd) {
+            break;
+        }
+        const end = (i + 1) * maxTickSize + offset * maxTickSize;
+        if (end > zoomEnd) {
+            ticks.push({ start, end: zoomEnd });
+            break;
+        }
+        ticks.push({ start, end });
+    }
+    return ticks;
+}
+
+interface XAxisProps {
+    zoomStart: number;
+    zoomEnd: number;
+    fullWidth: number;
+}
+
+const XAxis: FunctionComponent<XAxisProps> = (componentProps) => {
+    const { zoomStart, zoomEnd, fullWidth } = componentProps;
+
+    const ticks = useMemo(() => getTicks(zoomStart, zoomEnd, fullWidth), [zoomStart, zoomEnd, fullWidth]);
+    const visibleRegionLength = zoomEnd - zoomStart;
+    const averageWidth = visibleRegionLength / ticks.length;
+    return (
+        <div className={'h-6 relative'}>
+            {ticks.map((tick, idx) => {
+                const width = tick.end - tick.start;
+                const widthPercent = (width / visibleRegionLength) * 100;
+                const leftPercent = ((tick.start - zoomStart) / visibleRegionLength) * 100;
+                return (
+                    <div
+                        key={idx}
+                        class='absolute text-xs text-black px-1 hover:opacity-80 border-l border-r border-gray-400 border-t'
+                        style={{
+                            left: `calc(${leftPercent}% - 1px)`,
+                            width: `calc(${widthPercent}% - 1px)`,
+                        }}
+                    >
+                        {width >= averageWidth ? tick.start : ''}
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+function getTooltipPosition(cds_start: number, cds_end: number, genomeLength: number) {
+    const tooltipY = cds_start + (cds_end - cds_start) / 2 < genomeLength / 2 ? 'start' : 'end';
+    return `bottom-${tooltipY}` as const;
+}
+
+interface TooltipContentProps {
+    cds: CDSFeature;
+}
+
+const TooltipContent: FunctionComponent<TooltipContentProps> = (componentProps) => {
+    const { cds } = componentProps;
+    const cdsLength = cds.positions.reduce((acc, pos) => acc + pos.end - pos.start, 0);
+    const cdsCoordinates = cds.positions.map((pos) => `${pos.start}-${pos.end}`).join(', ');
+    return (
+        <>
+            <p>
+                <span className='font-bold'>{cds.label}</span>
+            </p>
+            <table>
+                <tbody>
+                    <tr>
+                        <th className='font-medium px-2 text-right'>CDS Length</th>
+                        <td>{cdsLength}</td>
+                    </tr>
+                    <tr>
+                        <th className='font-medium px-2 text-right'>CDS Coordinates</th>
+                        <td>{cdsCoordinates}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </>
+    );
+};
+
+interface CDSBarsProps {
+    gffData: CDSFeature[][];
+    zoomStart: number;
+    zoomEnd: number;
+}
+
+const CDSBars: FunctionComponent<CDSBarsProps> = (componentProps) => {
+    const { gffData, zoomStart, zoomEnd } = componentProps;
+    const visibleRegionLength = zoomEnd - zoomStart;
+    return (
+        <>
+            {gffData.map((data, listId) => (
+                <div className={'w-full h-6 relative'} key={listId}>
+                    {data.map((cds, idx) => (
+                        <Fragment key={idx}>
+                            {cds.positions.map((position, posIdx) => {
+                                const start = Math.max(position.start, zoomStart);
+                                const end = Math.min(position.end, zoomEnd);
+
+                                if (start >= end) {
+                                    return null;
+                                }
+
+                                const widthPercent = ((end - start) / visibleRegionLength) * 100;
+                                const leftPercent = ((start - zoomStart) / visibleRegionLength) * 100;
+                                const tooltipPosition = getTooltipPosition(start, end, visibleRegionLength);
+                                return (
+                                    <Tooltip
+                                        content={<TooltipContent cds={cds} />}
+                                        position={tooltipPosition}
+                                        key={`${idx}-${posIdx}`}
+                                        tooltipStyle={{ left: `${leftPercent}%` }}
+                                    >
+                                        <div
+                                            className='absolute text-xs text-white rounded px-1 py-0.5 cursor-pointer hover:opacity-80 shadow-md'
+                                            style={{
+                                                left: `${leftPercent}%`,
+                                                width: `${widthPercent}%`,
+                                                backgroundColor: singleGraphColorRGBByName(cds.color),
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                            }}
+                                        >
+                                            {cds.label}
+                                        </div>
+                                    </Tooltip>
+                                );
+                            })}
+                        </Fragment>
+                    ))}
+                </div>
+            ))}
+        </>
+    );
+};
+
+interface CDSProps {
+    gffData: CDSFeature[][];
+    genomeLength: number;
+    width: number;
+}
+
+const CDSPlot: FunctionComponent<CDSProps> = (componentProps) => {
+    const { gffData, genomeLength, width } = componentProps;
+
+    const [zoomStart, setZoomStart] = useState(0);
+    const [zoomEnd, setZoomEnd] = useState(genomeLength);
+
+    const updateZoomStart = (newStart: number) => {
+        setZoomStart(newStart);
+    };
+
+    const updateZoomEnd = (newEnd: number) => {
+        setZoomEnd(newEnd);
+    };
+
+    return (
+        <div class='p-4'>
+            <CDSBars gffData={gffData} zoomStart={zoomStart} zoomEnd={zoomEnd} />
+            <XAxis zoomStart={zoomStart} zoomEnd={zoomEnd} fullWidth={width} />
+            <div class='relative w-full h-5'>
+                <MinMaxRangeSlider
+                    min={zoomStart}
+                    max={zoomEnd}
+                    setMin={updateZoomStart}
+                    setMax={updateZoomEnd}
+                    rangeMin={0}
+                    rangeMax={genomeLength}
+                    step={1}
+                />
+            </div>
+            <XAxis zoomStart={0} zoomEnd={genomeLength} fullWidth={width} />
+        </div>
+    );
+};
+
+export default CDSPlot;