@genspectrum/dashboard-components 0.7.0 → 0.7.1

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

@@ -23,7 +23,7 @@ import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -36,7 +36,9 @@ import { useWebWorker } from '../webWorkers/useWebWorker';
 
 export type View = 'grid';
 
-export interface MutationsOverTimeInnerProps {
+export interface MutationsOverTimeProps {
+    width: string;
+    height: string;
     lapisFilter: LapisFilter;
     sequenceType: SequenceType;
     views: View[];
@@ -44,31 +46,22 @@ export interface MutationsOverTimeInnerProps {
     lapisDateField: string;
 }
 
-export interface MutationsOverTimeProps extends MutationsOverTimeInnerProps {
-    width: string;
-    height: string;
-}
-
-export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = ({ width, height, ...innerProps }) => {
+export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <MutationsOverTimeInner {...innerProps} />
+                <MutationsOverTimeInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerProps> = ({
-    lapisFilter,
-    sequenceType,
-    views,
-    granularity,
-    lapisDateField,
-}) => {
+export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> = (componentProps) => {
     const lapis = useContext(LapisUrlContext);
+    const { lapisFilter, sequenceType, granularity, lapisDateField } = componentProps;
 
     const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
         {
@@ -99,29 +92,26 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerPro
         <MutationsOverTimeTabs
             overallMutationData={overallMutationData}
             mutationOverTimeData={mutationOverTimeData}
-            sequenceType={sequenceType}
-            views={views}
+            originalComponentProps={componentProps}
         />
     );
 };
 
 type MutationOverTimeTabsProps = {
     mutationOverTimeData: BaseMutationOverTimeDataMap;
-    sequenceType: SequenceType;
-    views: View[];
+    originalComponentProps: MutationsOverTimeProps;
     overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[];
 };
 
 const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     mutationOverTimeData,
-    sequenceType,
-    views,
+    originalComponentProps,
     overallMutationData,
 }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 0.9 });
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
 
-    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
         { label: 'Substitutions', checked: true, type: 'substitution' },
         { label: 'Deletions', checked: true, type: 'deletion' },
@@ -153,7 +143,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
 
     const toolbar = (activeTab: string) => (
         <Toolbar
@@ -167,6 +157,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             filteredData={filteredData}
             colorScale={colorScale}
             setColorScale={setColorScale}
+            originalComponentProps={originalComponentProps}
         />
     );
 
@@ -184,6 +175,7 @@ type ToolbarProps = {
     filteredData: MutationOverTimeDataMap;
     colorScale: ColorScale;
     setColorScale: Dispatch<StateUpdater<ColorScale>>;
+    originalComponentProps: MutationsOverTimeProps;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -197,6 +189,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     filteredData,
     colorScale,
     setColorScale,
+    originalComponentProps,
 }) => {
     return (
         <>
@@ -219,12 +212,27 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getDownloadData(filteredData)}
                 filename='mutations_over_time.csv'
             />
-            <Info>Info for mutations over time</Info>
+            <MutationsOverTimeInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
 
+type MutationsOverTimeInfoProps = {
+    originalComponentProps: MutationsOverTimeProps;
+};
+
+const MutationsOverTimeInfo: FunctionComponent<MutationsOverTimeInfoProps> = ({ originalComponentProps }) => {
+    const lapis = useContext(LapisUrlContext);
+    return (
+        <Info>
+            <InfoHeadline1>Info for mutations over time</InfoHeadline1>
+            <InfoParagraph>TODO: https://github.com/GenSpectrum/dashboard-components/issues/441</InfoParagraph>
+            <InfoComponentCode componentName='mutations-over-time' params={originalComponentProps} lapisUrl={lapis} />
+        </Info>
+    );
+};
+
 function getDownloadData(filteredData: MutationOverTimeDataMap) {
     const dates = filteredData.getSecondAxisKeys().map((date) => toTemporalClass(date));
 

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -15,7 +15,7 @@ import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
@@ -26,12 +26,9 @@ import { useQuery } from '../useQuery';
 
 type NumberSequencesOverTimeView = 'bar' | 'line' | 'table';
 
-export interface NumberSequencesOverTimeProps extends NumberSequencesOverTimeInnerProps {
+export interface NumberSequencesOverTimeProps {
     width: string;
     height: string;
-}
-
-interface NumberSequencesOverTimeInnerProps {
     lapisFilter: NamedLapisFilter | NamedLapisFilter[];
     lapisDateField: string;
     views: NumberSequencesOverTimeView[];
@@ -40,26 +37,21 @@ interface NumberSequencesOverTimeInnerProps {
     pageSize: boolean | number;
 }
 
-export const NumberSequencesOverTime = ({ width, height, ...innerProps }: NumberSequencesOverTimeProps) => {
+export const NumberSequencesOverTime = (componentProps: NumberSequencesOverTimeProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <NumberSequencesOverTimeInner {...innerProps} />
+                <NumberSequencesOverTimeInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-const NumberSequencesOverTimeInner = ({
-    lapisFilter,
-    granularity,
-    smoothingWindow,
-    lapisDateField,
-    views,
-    pageSize,
-}: NumberSequencesOverTimeInnerProps) => {
+const NumberSequencesOverTimeInner = (componentProps: NumberSequencesOverTimeProps) => {
+    const { lapisFilter, lapisDateField, granularity, smoothingWindow } = componentProps;
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(
@@ -79,32 +71,15 @@ const NumberSequencesOverTimeInner = ({
         return <NoDataDisplay />;
     }
 
-    return (
-        <NumberSequencesOverTimeTabs
-            views={views}
-            data={data}
-            granularity={granularity}
-            smoothingWindow={smoothingWindow}
-            pageSize={pageSize}
-        />
-    );
+    return <NumberSequencesOverTimeTabs data={data} originalComponentProps={componentProps} />;
 };
 
 interface NumberSequencesOverTimeTabsProps {
-    views: NumberSequencesOverTimeView[];
     data: NumberOfSequencesDatasets;
-    granularity: TemporalGranularity;
-    smoothingWindow: number;
-    pageSize: boolean | number;
+    originalComponentProps: NumberSequencesOverTimeProps;
 }
 
-const NumberSequencesOverTimeTabs = ({
-    views,
-    data,
-    granularity,
-    smoothingWindow,
-    pageSize,
-}: NumberSequencesOverTimeTabsProps) => {
+const NumberSequencesOverTimeTabs = ({ data, originalComponentProps }: NumberSequencesOverTimeTabsProps) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const getTab = (view: NumberSequencesOverTimeView) => {
@@ -122,7 +97,13 @@ const NumberSequencesOverTimeTabs = ({
             case 'table':
                 return {
                     title: 'Table',
-                    content: <NumberSequencesOverTimeTable data={data} granularity={granularity} pageSize={pageSize} />,
+                    content: (
+                        <NumberSequencesOverTimeTable
+                            data={data}
+                            granularity={originalComponentProps.granularity}
+                            pageSize={originalComponentProps.pageSize}
+                        />
+                    ),
                 };
             default:
                 throw new Error(`Unknown view: ${view}`);
@@ -131,15 +112,14 @@ const NumberSequencesOverTimeTabs = ({
 
     return (
         <Tabs
-            tabs={views.map((view) => getTab(view))}
+            tabs={originalComponentProps.views.map((view) => getTab(view))}
             toolbar={(activeTab) => (
                 <Toolbar
                     activeTab={activeTab}
                     data={data}
-                    granularity={granularity}
-                    smoothingWindow={smoothingWindow}
                     yAxisScaleType={yAxisScaleType}
                     setYAxisScaleType={setYAxisScaleType}
+                    originalComponentProps={originalComponentProps}
                 />
             )}
         />
@@ -149,20 +129,12 @@ const NumberSequencesOverTimeTabs = ({
 interface ToolbarProps {
     activeTab: string;
     data: NumberOfSequencesDatasets;
-    granularity: TemporalGranularity;
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
-    smoothingWindow: number;
+    originalComponentProps: NumberSequencesOverTimeProps;
 }
 
-const Toolbar = ({
-    activeTab,
-    data,
-    granularity,
-    yAxisScaleType,
-    setYAxisScaleType,
-    smoothingWindow,
-}: ToolbarProps) => {
+const Toolbar = ({ activeTab, data, yAxisScaleType, setYAxisScaleType, originalComponentProps }: ToolbarProps) => {
     return (
         <>
             {activeTab !== 'Table' && (
@@ -174,29 +146,39 @@ const Toolbar = ({
             )}
             <CsvDownloadButton
                 className='mx-1 btn btn-xs'
-                getData={() => getNumberOfSequencesOverTimeTableData(data, granularity)}
+                getData={() => getNumberOfSequencesOverTimeTableData(data, originalComponentProps.granularity)}
                 filename='number_of_sequences_over_time.csv'
             />
-            <NumberSequencesOverTimeInfo granularity={granularity} smoothingWindow={smoothingWindow} />
+            <NumberSequencesOverTimeInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
 
 type NumberSequencesOverTimeInfoProps = {
-    granularity: TemporalGranularity;
-    smoothingWindow: number;
+    originalComponentProps: NumberSequencesOverTimeProps;
 };
 
 const NumberSequencesOverTimeInfo: FunctionComponent<NumberSequencesOverTimeInfoProps> = ({
-    granularity,
-    smoothingWindow,
-}) => (
-    <Info>
-        <InfoHeadline1>Number of sequences over time</InfoHeadline1>
-        <InfoParagraph>
-            This presents the number of available sequences of a variant per <b>{granularity}</b>
-            {smoothingWindow > 0 && `, smoothed using a ${smoothingWindow}-${granularity} sliding window`}.
-        </InfoParagraph>
-    </Info>
-);
+    originalComponentProps,
+}) => {
+    const lapis = useContext(LapisUrlContext);
+
+    return (
+        <Info>
+            <InfoHeadline1>Number of sequences over time</InfoHeadline1>
+            <InfoParagraph>
+                This presents the number of available sequences of a variant per{' '}
+                <b>{originalComponentProps.granularity}</b>
+                {originalComponentProps.smoothingWindow > 0 &&
+                    `, smoothed using a ${originalComponentProps.smoothingWindow}-${originalComponentProps.granularity} sliding window`}
+                .
+            </InfoParagraph>
+            <InfoComponentCode
+                componentName='number-sequences-over-time'
+                params={originalComponentProps}
+                lapisUrl={lapis}
+            />
+        </Info>
+    );
+};

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

@@ -11,7 +11,7 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
@@ -23,12 +23,9 @@ import { useQuery } from '../useQuery';
 
 export type View = 'line';
 
-export interface RelativeGrowthAdvantageProps extends RelativeGrowthAdvantagePropsInner {
+export interface RelativeGrowthAdvantageProps {
     width: string;
     height: string;
-}
-
-export interface RelativeGrowthAdvantagePropsInner {
     numeratorFilter: LapisFilter;
     denominatorFilter: LapisFilter;
     generationTime: number;
@@ -37,36 +34,28 @@ export interface RelativeGrowthAdvantagePropsInner {
     yAxisMaxConfig: YAxisMaxConfig;
 }
 
-export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
-    width,
-    height,
-    ...innerProps
-}) => {
+export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <RelativeGrowthAdvantageInner {...innerProps} />
+                <RelativeGrowthAdvantageInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvantagePropsInner> = ({
-    numeratorFilter,
-    denominatorFilter,
-    generationTime,
-    views,
-    lapisDateField,
-    yAxisMaxConfig,
-}) => {
+export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvantageProps> = (componentProps) => {
     const lapis = useContext(LapisUrlContext);
+    const { numeratorFilter, denominatorFilter, generationTime, lapisDateField } = componentProps;
+
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const { data, error, isLoading } = useQuery(
         () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
-        [lapis, numeratorFilter, denominatorFilter, generationTime, views, lapisDateField],
+        [lapis, numeratorFilter, denominatorFilter, generationTime, lapisDateField],
     );
 
     if (isLoading) {
@@ -86,9 +75,7 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
             data={data}
             yAxisScaleType={yAxisScaleType}
             setYAxisScaleType={setYAxisScaleType}
-            views={views}
-            generationTime={generationTime}
-            yAxisMaxConfig={yAxisMaxConfig}
+            originalComponentProps={componentProps}
         />
     );
 };
@@ -97,18 +84,14 @@ type RelativeGrowthAdvantageTabsProps = {
     data: NonNullable<RelativeGrowthAdvantageData>;
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
-    views: View[];
-    generationTime: number;
-    yAxisMaxConfig: YAxisMaxConfig;
+    originalComponentProps: RelativeGrowthAdvantageProps;
 };
 
 const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabsProps> = ({
     data,
     yAxisScaleType,
     setYAxisScaleType,
-    views,
-    generationTime,
-    yAxisMaxConfig,
+    originalComponentProps,
 }) => {
     const getTab = (view: View) => {
         switch (view) {
@@ -123,17 +106,17 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
                                 params: data.params,
                             }}
                             yAxisScaleType={yAxisScaleType}
-                            yAxisMaxConfig={yAxisMaxConfig}
+                            yAxisMaxConfig={originalComponentProps.yAxisMaxConfig}
                         />
                     ),
                 };
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
     const toolbar = () => (
         <RelativeGrowthAdvantageToolbar
-            generationTime={generationTime}
+            originalComponentProps={originalComponentProps}
             yAxisScaleType={yAxisScaleType}
             setYAxisScaleType={setYAxisScaleType}
         />
@@ -145,24 +128,29 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
 type RelativeGrowthAdvantageToolbarProps = {
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
-    generationTime: number;
+    originalComponentProps: RelativeGrowthAdvantageProps;
 };
 
 const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageToolbarProps> = ({
     yAxisScaleType,
     setYAxisScaleType,
-    generationTime,
+    originalComponentProps,
 }) => {
     return (
         <>
             <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
-            <RelativeGrowthAdvantageInfo generationTime={generationTime} />
+            <RelativeGrowthAdvantageInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
 
-const RelativeGrowthAdvantageInfo: FunctionComponent<{ generationTime: number }> = ({ generationTime }) => {
+const RelativeGrowthAdvantageInfo: FunctionComponent<{ originalComponentProps: RelativeGrowthAdvantageProps }> = ({
+    originalComponentProps,
+}) => {
+    const lapis = useContext(LapisUrlContext);
+    const generationTime = originalComponentProps.generationTime;
+
     return (
         <Info>
             <InfoHeadline1>Relative growth advantage</InfoHeadline1>
@@ -193,6 +181,11 @@ const RelativeGrowthAdvantageInfo: FunctionComponent<{ generationTime: number }>
                     10.1016/j.epidem.2021.100480
                 </InfoLink>
             </InfoParagraph>
+            <InfoComponentCode
+                componentName='relative-growth-advantage'
+                params={originalComponentProps}
+                lapisUrl={lapis}
+            />
         </Info>
     );
 };