From 97366e9ed4a25ca96911783f86aa709f27badcd2 Mon Sep 17 00:00:00 2001 From: ivan-aksamentov Date: Sun, 30 Jun 2024 19:32:04 +0200 Subject: [PATCH 1/5] feat(web): add help tips for gene and ref node dropdowns Follow up for https://github.com/nextstrain/nextclade/pull/1492 --- .../src/components/Common/InfoButton.tsx | 9 +++--- .../src/components/Help/SelectGeneHelp.tsx | 30 +++++++++++++++++++ .../src/components/Help/SelectRefNodeHelp.tsx | 24 +++++++++++++++ .../SequenceView/SequenceViewColumnHeader.tsx | 16 ++++++++-- 4 files changed, 73 insertions(+), 6 deletions(-) create mode 100644 packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx create mode 100644 packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx diff --git a/packages/nextclade-web/src/components/Common/InfoButton.tsx b/packages/nextclade-web/src/components/Common/InfoButton.tsx index 6d079fa97..7c6537174 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' @@ -14,11 +14,11 @@ import { autoPlacement, } 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 = 18, children, ...restProps }: PropsWithChildren) { const { t } = useTranslationSafe() const theme = useTheme() @@ -41,6 +41,7 @@ export function InfoButton({ size = 18, children }: PropsWithChildren @@ -73,7 +74,7 @@ const Card = styled.div` ` 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/SelectGeneHelp.tsx b/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx new file mode 100644 index 000000000..88f79e5da --- /dev/null +++ b/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx @@ -0,0 +1,30 @@ +import React from 'react' +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 genetic feature.')}

+ +

{t('This allows to...')}

+ +

+ {t( + 'You can select one of the datasets manually or to use automatic dataset suggestion function. Automatic suggestion will attempt to guess the most appropriate dataset from your sequence data.', + )} +

+ +

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

+ + ) +} 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..d4d1efe20 --- /dev/null +++ b/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import { useTranslationSafe } from 'src/helpers/useTranslationSafe' +import { InfoButton } from 'src/components/Common/InfoButton' +import { LinkExternal } from 'src/components/Link/LinkExternal' + +export function SelectRefNodeHelp() { + const { t } = useTranslationSafe() + + return ( + +

{t('Select reference node target for relative mutations.')}

+ +

{t('This allows ...')}

+ +

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

+ + ) +} diff --git a/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx b/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx index 3b8eb4990..88ac34b15 100644 --- a/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx +++ b/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx @@ -1,4 +1,6 @@ import React from 'react' +import { SelectGeneHelp } from 'src/components/Help/SelectGeneHelp' +import { SelectRefNodeHelp } from 'src/components/Help/SelectRefNodeHelp' import HelpTipsColumnSeqView from 'src/components/Results/HelpTips/HelpTipsColumnSeqView.mdx' import { RefNodeSelector } from 'src/components/Results/RefNodeSelector' import { ButtonHelpStyled } from 'src/components/Results/ResultsTableStyle' @@ -19,11 +21,21 @@ export function SequenceViewColumnHeader() { - {t('Genetic feature')} + + {t('Genetic feature')} + + + + - {t('Relative to')} + + {t('Relative to')} + + + + From eabc8424328c12dce226d930a8e7f21c8274ec81 Mon Sep 17 00:00:00 2001 From: ivan-aksamentov Date: Mon, 1 Jul 2024 22:57:48 +0200 Subject: [PATCH 2/5] feat(web): add help tips text, improve styling --- .../src/components/Common/InfoButton.tsx | 11 ++-- .../src/components/Help/SelectDatasetHelp.tsx | 7 +-- .../src/components/Help/SelectGeneHelp.tsx | 59 +++++++++++++++++-- .../src/components/Help/SelectRefNodeHelp.tsx | 35 ++++++++++- .../HelpTips/HelpTipsColumnSeqView.mdx | 35 ----------- .../SequenceView/SequenceViewColumnHeader.tsx | 7 --- 6 files changed, 96 insertions(+), 58 deletions(-) delete mode 100644 packages/nextclade-web/src/components/Results/HelpTips/HelpTipsColumnSeqView.mdx diff --git a/packages/nextclade-web/src/components/Common/InfoButton.tsx b/packages/nextclade-web/src/components/Common/InfoButton.tsx index 7c6537174..fec03c4a3 100644 --- a/packages/nextclade-web/src/components/Common/InfoButton.tsx +++ b/packages/nextclade-web/src/components/Common/InfoButton.tsx @@ -12,13 +12,14 @@ import { useRole, FloatingPortal, autoPlacement, + shift, } from '@floating-ui/react' export interface InfoButtonProps extends Omit { size?: number } -export function InfoButton({ size = 18, children, ...restProps }: 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, ...restProps }: PropsWithChild const { refs, context, floatingStyles } = useFloating({ open: isOpen, onOpenChange: setIsOpen, - middleware: [autoPlacement()], + middleware: [shift({ padding: 5 }), autoPlacement()], }) const dismiss = useDismiss(context) const focus = useFocus(context) @@ -60,9 +61,6 @@ export function InfoButton({ size = 18, children, ...restProps }: PropsWithChild const Floating = styled.div` z-index: 1005; - width: 500px; - max-width: 80vw; - max-height: 80vh; ` const Card = styled.div` @@ -71,6 +69,9 @@ const Card = styled.div` border-radius: 5px; height: 100%; background-color: ${(props) => props.theme.bodyBg}; + max-height: 80vh; + max-width: 80vw; + width: 500px; ` const Button = styled.button<{ $size?: number }>` 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 index 88f79e5da..533ac42f5 100644 --- a/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx +++ b/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx @@ -1,4 +1,6 @@ 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' @@ -8,22 +10,71 @@ export function SelectGeneHelp() { return ( -

{t('Select genetic feature.')}

+
{t('Select a genetic feature.')}
-

{t('This allows to...')}

+

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

+ +

{t( - 'You can select one of the datasets manually or to use automatic dataset suggestion function. Automatic suggestion will attempt to guess the most appropriate dataset from your sequence data.', + '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.')} +
+ {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 mode')}
+ +

+ {t( + 'When a CDS is selected, each row displays a schema of the corresponding translated peptide sequence by highlighting the differences compared to the reference sequence along the genome.', + )} +
+ {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')} - {t('.')}

) diff --git a/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx b/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx index d4d1efe20..d72699cb4 100644 --- a/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx +++ b/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx @@ -2,22 +2,51 @@ 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 reference node target for relative mutations.')}

+
{t('Select target for mutation calling.')}
-

{t('This allows ...')}

+
    +
  • {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 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', + )} +
    • +
  • + {t( + 'Entries of format "\'\' founder" show mutations relative to the founder node of a particular clade-like attribute (if any 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')} - {t('.')}

) 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/SequenceView/SequenceViewColumnHeader.tsx b/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx index 88ac34b15..00cf15e31 100644 --- a/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx +++ b/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx @@ -1,7 +1,6 @@ import React from 'react' import { SelectGeneHelp } from 'src/components/Help/SelectGeneHelp' import { SelectRefNodeHelp } from 'src/components/Help/SelectRefNodeHelp' -import HelpTipsColumnSeqView from 'src/components/Results/HelpTips/HelpTipsColumnSeqView.mdx' import { RefNodeSelector } from 'src/components/Results/RefNodeSelector' import { ButtonHelpStyled } from 'src/components/Results/ResultsTableStyle' import { useTranslationSafe } from 'src/helpers/useTranslationSafe' @@ -40,12 +39,6 @@ export function SequenceViewColumnHeader() { - - - - - - ) } From 3a6f8c37efb420490a2c8959ad0fcc14c556db42 Mon Sep 17 00:00:00 2001 From: ivan-aksamentov Date: Tue, 2 Jul 2024 01:48:59 +0200 Subject: [PATCH 3/5] feat(web): fix styling of nuc and aa color legend --- .../HelpTipsColumnSeqViewGeneLegend.tsx | 4 +-- .../HelpTipsColumnSeqViewNucLegend.tsx | 26 +++++++++++++------ 2 files changed, 20 insertions(+), 10 deletions(-) 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} + + ))} + + ))} + ) } From 4605d1f080e8607e8ae94b36235e0b872ba71d26 Mon Sep 17 00:00:00 2001 From: Richard Neher Date: Tue, 2 Jul 2024 09:42:37 +0200 Subject: [PATCH 4/5] docs: edit pop-up help text --- .../nextclade-web/src/components/Help/SelectGeneHelp.tsx | 8 ++++---- .../src/components/Help/SelectRefNodeHelp.tsx | 9 +++++---- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx b/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx index 533ac42f5..89a3bcc6f 100644 --- a/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx +++ b/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx @@ -14,7 +14,7 @@ export function SelectGeneHelp() {

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

@@ -39,7 +39,7 @@ export function SelectGeneHelp() {

- {t('Mouse hover on a mutation marker to show details of that mutation.')} + {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.")}
@@ -48,11 +48,11 @@ export function SelectGeneHelp() {

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

{t( - 'When a CDS is selected, each row displays a schema of the corresponding translated peptide sequence by highlighting the differences compared to the reference sequence along the genome.', + '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( diff --git a/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx b/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx index d72699cb4..8a2a63a0f 100644 --- a/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx +++ b/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx @@ -10,22 +10,23 @@ export function SelectRefNodeHelp() { 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('"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 to which the query sample has been attached to during phylogenetic placement.', + '"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', + '"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 defined in the dataset). Dataset authors may choose to exclude certain attributes.', + '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.', )}
  • From 8bc97a6b2043111a51f671c8b1214fccf5b5d22b Mon Sep 17 00:00:00 2001 From: ivan-aksamentov Date: Tue, 2 Jul 2024 20:18:35 +0200 Subject: [PATCH 5/5] refactor: format --- .../nextclade-web/src/components/Help/SelectRefNodeHelp.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx b/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx index 8a2a63a0f..a38c74edd 100644 --- a/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx +++ b/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx @@ -10,7 +10,11 @@ export function SelectRefNodeHelp() { 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( + '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).')}