diff --git a/packages/nextclade-web/src/components/Common/InfoButton.tsx b/packages/nextclade-web/src/components/Common/InfoButton.tsx index 6d079fa97..fec03c4a3 100644 --- a/packages/nextclade-web/src/components/Common/InfoButton.tsx +++ b/packages/nextclade-web/src/components/Common/InfoButton.tsx @@ -1,5 +1,5 @@ import React, { PropsWithChildren } from 'react' -import { Button as ButtonBase, CardBody } from 'reactstrap' +import { Button as ButtonBase, ButtonProps, CardBody } from 'reactstrap' import styled, { useTheme } from 'styled-components' import { FaInfo as InfoIcon } from 'react-icons/fa6' import { useTranslationSafe } from 'src/helpers/useTranslationSafe' @@ -12,13 +12,14 @@ import { useRole, FloatingPortal, autoPlacement, + shift, } from '@floating-ui/react' -export interface InfoButtonProps { +export interface InfoButtonProps extends Omit { size?: number } -export function InfoButton({ size = 18, children }: PropsWithChildren) { +export function InfoButton({ size = 20, children, ...restProps }: PropsWithChildren) { const { t } = useTranslationSafe() const theme = useTheme() @@ -26,7 +27,7 @@ export function InfoButton({ size = 18, children }: PropsWithChildren @@ -59,9 +61,6 @@ export function InfoButton({ size = 18, children }: PropsWithChildren props.theme.bodyBg}; + max-height: 80vh; + max-width: 80vw; + width: 500px; ` const Button = styled.button<{ $size?: number }>` - display: flex; + display: inline-flex; width: ${(props) => props.$size}px; height: ${(props) => props.$size}px; border-radius: ${(props) => props.$size}px; diff --git a/packages/nextclade-web/src/components/Help/SelectDatasetHelp.tsx b/packages/nextclade-web/src/components/Help/SelectDatasetHelp.tsx index 953417c9f..f93aab62c 100644 --- a/packages/nextclade-web/src/components/Help/SelectDatasetHelp.tsx +++ b/packages/nextclade-web/src/components/Help/SelectDatasetHelp.tsx @@ -32,12 +32,11 @@ export function SelectDatasetHelp() { )}

-

- {t('Learn more about Nextclade datasets in the {{documentation}}')} - +

+ {t('Learn more in Nextclade {{documentation}}')} + {t('documentation')} - {t('.')}

) diff --git a/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx b/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx new file mode 100644 index 000000000..89a3bcc6f --- /dev/null +++ b/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx @@ -0,0 +1,81 @@ +import React from 'react' +import { HelpTipsColumnSeqViewGeneLegend } from 'src/components/Results/HelpTips/HelpTipsColumnSeqViewGeneLegend' +import { HelpTipsColumnSeqViewNucLegend } from 'src/components/Results/HelpTips/HelpTipsColumnSeqViewNucLegend' +import { useTranslationSafe } from 'src/helpers/useTranslationSafe' +import { InfoButton } from 'src/components/Common/InfoButton' +import { LinkExternal } from 'src/components/Link/LinkExternal' + +export function SelectGeneHelp() { + const { t } = useTranslationSafe() + + return ( + +
{t('Select a genetic feature.')}
+ +

+ {t( + 'This allows to switch sequence views between nucleotide sequence and peptides (translated CDSes; only available if the dataset provides a genome annotation).', + )} +

+ +
+ +

+ {t( + 'Each row of the table displays a schema of the corresponding sequence, highlighting the differences relative to the target selected in the "Relative to" dropdown.', + )} +

+ +
+ +
{t('Nucleotide Sequence mode')}
+ +

+ {t( + 'In "Nucleotide Sequence" mode, the whole nucleotide sequence is shown. Line markers represent nucleotide mutations. They are colored by the resulting (query) nucleotide:', + )} +

+ + + +

+ {t('Mouse hover on a mutation marker to show details of that mutation and its neighborhood in the alignment.')} +
+ {t("Unsequenced regions at the 5' and 3' end are indicated as light gray areas on both ends.")} +
+ {t('For a mapping between positions in the sequence and genes, see Genome Annotation view below the table.')} +

+ +
+ +
{t('Peptide/protein mode')}
+ +

+ {t( + 'When a CDS is selected, each row displays a schema of the corresponding translated amino acid sequence by highlighting the differences to the corresponding peptide in the reference/target. Note that the CDS might be split into multiple segments or be located on the reverse strand.', + )} +
+ {t( + 'Line markers on sequence views represent amino acid mutations colored by the resulting (query) amino acid:', + )} +

+ + + +

+ {t('Note: Sometimes mutations are so close to each other that they overlap.')} +
+ {t('Note: Positions are 1-based.')} +

+ +
+ +

+ {t('Learn more in Nextclade {{documentation}}')} + + {t('documentation')} + +

+ + ) +} diff --git a/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx b/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx new file mode 100644 index 000000000..a38c74edd --- /dev/null +++ b/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx @@ -0,0 +1,58 @@ +import React from 'react' +import { useTranslationSafe } from 'src/helpers/useTranslationSafe' +import { InfoButton } from 'src/components/Common/InfoButton' +import { LinkExternal } from 'src/components/Link/LinkExternal' +import { Ul, Li } from 'src/components/Common/List' + +export function SelectRefNodeHelp() { + const { t } = useTranslationSafe() + + return ( + +
{t('Select target for mutation calling.')}
+

+ {t( + 'The sequence view below shows differences between each query sequence and a "comparison target" that can be selected using this dropdown. Possible options are:', + )} +

+ +
    +
  • {t('"Reference" - shows mutations relative to the reference sequence (as defined in the dataset).')}
    • +
  • + {t( + '"Parent" - shows private mutations, i.e. mutations relative to the parent (nearest) node of the reference tree to which the query sample has been attached to during phylogenetic placement.', + )} +
    • +
  • + {t( + '"Clade founder" - shows mutations relative to the founder of the clade that has been assigned to the query sample. Note that queries from different clades will be compared with different targets in this case.', + )} +
    • +
  • + {t( + 'Entries of format "\'\' founder" show mutations relative to the founder node of a particular clade-like attribute (if any are defined in the dataset). Dataset authors may choose to exclude certain attributes.', + )} +
    • +
  • + {t( + 'Any additional entries show mutations relative to the node(s) found according to the custom search criteria (if any defined in the dataset). If the query sample does not match search criteria, then "{{ notApplicable }}" will be displayed.', + { notApplicable: t('Not applicable') }, + )} +
    • +
+ +

+ {t( + 'Switching the target will change mutations displayed in the sequence views as well as in the "Mut" column of the table and its mouseover tooltip.', + )} +

+ +

+ {t('Learn more in Nextclade {{documentation}}')} + + {t('documentation')} + +

+ + ) +} diff --git a/packages/nextclade-web/src/components/Results/HelpTips/HelpTipsColumnSeqView.mdx b/packages/nextclade-web/src/components/Results/HelpTips/HelpTipsColumnSeqView.mdx deleted file mode 100644 index edaa2a8be..000000000 --- a/packages/nextclade-web/src/components/Results/HelpTips/HelpTipsColumnSeqView.mdx +++ /dev/null @@ -1,35 +0,0 @@ -import { HelpTipsColumnSeqViewNucLegend } from './HelpTipsColumnSeqViewNucLegend' -import { HelpTipsColumnSeqViewGeneLegend } from './HelpTipsColumnSeqViewGeneLegend' - -##### Column: sequence view - -In sequence view column, each row displays a schema of the corresponding sequence, highlighting the differences compared to the reference sequence.
- -Either "Nucleotide sequence" view or any of the "Gene" views can be selected using the dropdown box. - ---- - -###### Nucleotide Sequence mode - -In "Nucleotide Sequence" mode, the whole nucleotide sequence is shown. Line markers represent nucleotide mutations. They are colored by the resulting (query) nucleotide: - - - -Mouse hover on a mutation marker to show details of that mutation.
-Unsequenced regions at the 5' and 3' end are indicated as light gray areas on both ends.
-For a mapping between positions in the sequence and genes, see Genome Annotation view below the table.
- ---- - -###### Gene mode - -When a gene is selected, each row displays a schema of the corresponding sequence by highlighting the differences compared to the reference sequence along the genome.
-Line markers on sequence views represent aminoacid mutations colored by the resulting (query) aminoacid: - - - - ---- - -Note: Sometimes mutations are so close to each other that they overlap.
-Note: Positions are 1-based.
diff --git a/packages/nextclade-web/src/components/Results/HelpTips/HelpTipsColumnSeqViewGeneLegend.tsx b/packages/nextclade-web/src/components/Results/HelpTips/HelpTipsColumnSeqViewGeneLegend.tsx index 423e9e1fd..3a4500306 100644 --- a/packages/nextclade-web/src/components/Results/HelpTips/HelpTipsColumnSeqViewGeneLegend.tsx +++ b/packages/nextclade-web/src/components/Results/HelpTips/HelpTipsColumnSeqViewGeneLegend.tsx @@ -1,6 +1,5 @@ import React from 'react' import styled from 'styled-components' - import { AMINOACID_COLORS } from 'src/helpers/getAminoacidColor' import { Col, Row } from 'reactstrap' @@ -13,6 +12,7 @@ export const Legend = styled.div` export const LegendItem = styled.div` display: flex; + margin: 3px; ` export const LegendColorBox = styled.span` @@ -41,7 +41,7 @@ export function splitToColumns(obj: { [key: string]: string }, colSize: number) } export function HelpTipsColumnSeqViewGeneLegend() { - const columns = splitToColumns(AMINOACID_COLORS, 4) + const columns = splitToColumns(AMINOACID_COLORS, 5) return ( diff --git a/packages/nextclade-web/src/components/Results/HelpTips/HelpTipsColumnSeqViewNucLegend.tsx b/packages/nextclade-web/src/components/Results/HelpTips/HelpTipsColumnSeqViewNucLegend.tsx index 80df3ad36..ccb2d12d7 100644 --- a/packages/nextclade-web/src/components/Results/HelpTips/HelpTipsColumnSeqViewNucLegend.tsx +++ b/packages/nextclade-web/src/components/Results/HelpTips/HelpTipsColumnSeqViewNucLegend.tsx @@ -1,18 +1,19 @@ import React from 'react' import styled from 'styled-components' import { Col, Row } from 'reactstrap' - import { NUCLEOTIDE_COLORS } from 'src/helpers/getNucleotideColor' +import { splitToColumns } from './HelpTipsColumnSeqViewGeneLegend' const SIZE = 20 export const Legend = styled(Row)` width: 100%; - margin-bottom: 10px; + //margin-bottom: 10px; ` export const LegendItem = styled(Col)` display: flex; + margin: 3px; ` export const LegendColorBox = styled.span` @@ -25,14 +26,23 @@ export const LegendColorBox = styled.span` ` export function HelpTipsColumnSeqViewNucLegend() { + const columns = splitToColumns(NUCLEOTIDE_COLORS, 5) + return ( - {Object.entries(NUCLEOTIDE_COLORS).map(([nuc, color]) => ( - - - {nuc} - - ))} + + {columns.map((col, i) => ( + // eslint-disable-next-line react/no-array-index-key + + {Object.entries(col).map(([aa, color]) => ( + + + {aa} + + ))} + + ))} + ) } diff --git a/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx b/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx index 3b8eb4990..00cf15e31 100644 --- a/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx +++ b/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx @@ -1,5 +1,6 @@ import React from 'react' -import HelpTipsColumnSeqView from 'src/components/Results/HelpTips/HelpTipsColumnSeqView.mdx' +import { SelectGeneHelp } from 'src/components/Help/SelectGeneHelp' +import { SelectRefNodeHelp } from 'src/components/Help/SelectRefNodeHelp' import { RefNodeSelector } from 'src/components/Results/RefNodeSelector' import { ButtonHelpStyled } from 'src/components/Results/ResultsTableStyle' import { useTranslationSafe } from 'src/helpers/useTranslationSafe' @@ -19,21 +20,25 @@ export function SequenceViewColumnHeader() { - {t('Genetic feature')} + + {t('Genetic feature')} + + + + - {t('Relative to')} + + {t('Relative to')} + + + + - - - - - - ) }