@genspectrum/dashboard-components 0.18.4 → 0.18.6

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -19,6 +19,7 @@ import {
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { toTemporalClass } from '../../utils/temporalClass';
 import { useLapisUrl } from '../LapisUrlContext';
+import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
 import { type ColorScale } from '../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-dropdown';
 import { CsvDownloadButton } from '../components/csv-download-button';
@@ -27,6 +28,7 @@ import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
+import { MutationsOverTimeTextFilter } from '../components/mutations-over-time-text-filter';
 import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
@@ -34,6 +36,7 @@ import { ResizeContainer } from '../components/resize-container';
 import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/segment-selector';
 import Tabs from '../components/tabs';
 import { pageSizesSchema } from '../shared/tanstackTable/pagination';
+import { PageSizeContextProvider } from '../shared/tanstackTable/pagination-context';
 import { useWebWorker } from '../webWorkers/useWebWorker';
 
 const mutationsOverTimeViewSchema = z.literal(views.grid);
@@ -123,6 +126,9 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     originalComponentProps,
     overallMutationData,
 }) => {
+    const [mutationFilterValue, setMutationFilterValue] = useState('');
+    const annotationProvider = useMutationAnnotationsProvider();
+
     const [proportionInterval, setProportionInterval] = useState(originalComponentProps.initialMeanProportionInterval);
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
 
@@ -132,8 +138,6 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         { label: 'Deletions', checked: true, type: 'deletion' },
     ]);
 
-    const displayMutations = originalComponentProps.displayMutations;
-
     const filteredData = useMemo(() => {
         return getFilteredMutationOverTimeData({
             data: mutationOverTimeData,
@@ -141,7 +145,10 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             displayedSegments,
             displayedMutationTypes,
             proportionInterval,
-            displayMutations,
+            displayMutations: originalComponentProps.displayMutations,
+            mutationFilterValue,
+            sequenceType: originalComponentProps.sequenceType,
+            annotationProvider,
         });
     }, [
         mutationOverTimeData,
@@ -149,7 +156,10 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         displayedSegments,
         displayedMutationTypes,
         proportionInterval,
-        displayMutations,
+        originalComponentProps.displayMutations,
+        originalComponentProps.sequenceType,
+        mutationFilterValue,
+        annotationProvider,
     ]);
 
     const getTab = (view: MutationsOverTimeView) => {
@@ -190,10 +200,16 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             colorScale={colorScale}
             setColorScale={setColorScale}
             originalComponentProps={originalComponentProps}
+            setFilterValue={setMutationFilterValue}
+            mutationFilterValue={mutationFilterValue}
         />
     );
 
-    return <Tabs tabs={tabs} toolbar={toolbar} />;
+    return (
+        <PageSizeContextProvider pageSizes={originalComponentProps.pageSizes}>
+            <Tabs tabs={tabs} toolbar={toolbar} />
+        </PageSizeContextProvider>
+    );
 };
 
 type ToolbarProps = {
@@ -208,6 +224,8 @@ type ToolbarProps = {
     colorScale: ColorScale;
     setColorScale: Dispatch<StateUpdater<ColorScale>>;
     originalComponentProps: MutationsOverTimeProps;
+    mutationFilterValue: string;
+    setFilterValue: (filterValue: string) => void;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -222,13 +240,20 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     colorScale,
     setColorScale,
     originalComponentProps,
+    setFilterValue,
+    mutationFilterValue,
 }) => {
     return (
         <>
+            <MutationsOverTimeTextFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
             {activeTab === 'Grid' && (
                 <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
             )}
-            <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
+            <SegmentSelector
+                displayedSegments={displayedSegments}
+                setDisplayedSegments={setDisplayedSegments}
+                sequenceType={originalComponentProps.sequenceType}
+            />
             <MutationTypeSelector
                 setDisplayedMutationTypes={setDisplayedMutationTypes}
                 displayedMutationTypes={displayedMutationTypes}