diff --git a/packages/core/BaseFeatureWidget/SequenceFeatureDetails.tsx b/packages/core/BaseFeatureWidget/SequenceFeatureDetails.tsx index f9fc0f50de..f874903b43 100644 --- a/packages/core/BaseFeatureWidget/SequenceFeatureDetails.tsx +++ b/packages/core/BaseFeatureWidget/SequenceFeatureDetails.tsx @@ -13,6 +13,7 @@ import copy from 'copy-to-clipboard' // locals import SettingsDlg from './SequenceFeatureSettingsDialog' +import HelpDlg from './SequenceHelpDialog' import SequencePanel from './SequencePanel' import { getSession, useLocalStorage } from '../util' import { BaseProps } from './types' @@ -22,6 +23,7 @@ import { ParentFeat, SeqState, ErrorState } from './util' // icons import SettingsIcon from '@mui/icons-material/Settings' +import HelpIcon from '@mui/icons-material/Help' interface CoordFeat extends SimpleFeatureSerialized { refName: string @@ -58,6 +60,7 @@ export default function SequenceFeatureDetails({ model, feature }: BaseProps) { const [settingsDlgOpen, setSettingsDlgOpen] = useState(false) const [shown, setShown] = useState(false) + const [helpShown, setHelpShown] = useState(false) const [sequence, setSequence] = useState() const [error, setError] = useState() const [copied, setCopied] = useState(false) @@ -184,6 +187,11 @@ export default function SequenceFeatureDetails({ model, feature }: BaseProps) { + + setHelpShown(true)}> + + +
{shown ? (
@@ -241,6 +249,7 @@ export default function SequenceFeatureDetails({ model, feature }: BaseProps) { +
<> {error ? ( @@ -289,6 +298,8 @@ export default function SequenceFeatureDetails({ model, feature }: BaseProps) { intronBp={intronBp} /> ) : null} + + {helpShown ? setHelpShown(false)} /> : null}
) } diff --git a/packages/core/BaseFeatureWidget/SequenceHelpDialog.tsx b/packages/core/BaseFeatureWidget/SequenceHelpDialog.tsx new file mode 100644 index 0000000000..c9122ccb41 --- /dev/null +++ b/packages/core/BaseFeatureWidget/SequenceHelpDialog.tsx @@ -0,0 +1,109 @@ +import React from 'react' +import { + Button, + Dialog, + DialogTitle, + DialogContent, + DialogActions, + Divider, + IconButton, + Typography, +} from '@mui/material' +import { makeStyles } from 'tss-react/mui' + +// icons +import CloseIcon from '@mui/icons-material/Close' +import SettingsIcon from '@mui/icons-material/Settings' + +const useStyles = makeStyles()(theme => ({ + closeButton: { + position: 'absolute', + right: theme.spacing(1), + top: theme.spacing(1), + color: theme.palette.grey[500], + }, + dialogContent: {}, +})) + +export default function HelpDialog({ + handleClose, +}: { + handleClose: () => void +}) { + const { classes } = useStyles() + return ( + handleClose()}> + + Feature sequence panel + {handleClose ? ( + handleClose()} + > + + + ) : null} + + + + + + The "Feature sequence" panel shows the underlying genomic sequence for + a given feature, fetched from the reference genome. + + + For gene features, this panel does special calculations to e.g. stitch + together the coding sequence, the options are: + +
    +
  • CDS - shows the stitched together CDS sequences
    • +
  • + Protein - the translated coding sequence, with the "standard" + genetic code +
    • +
  • cDNA - shows the UTRs and stitched together CDS sequences
    • +
  • + Gene w/ introns - the sequence underlying the entire gene including + including introns, with UTR and CDS highlighted +
    • +
  • + Gene w/ Nbp introns - same "Gene w/ introns", but limiting to a + subset of the intron sequence displayed +
    • +
  • + Gene +/- Nbp up+down stream - same as "Gene w/ introns" but with up + and downstream sequence displayed +
    • +
  • + Gene +/- Nbp up+down stream, Nbp introns - same as "Gene w/ + introns", but with limited intron sequence displayed and up and + downstream sequence +
    • +
+ + For other feature types, the options are: + +
    +
  • + Feature sequence - the reference genome sequence underlying the + feature +
    • +
  • + Feature sequence +/- Nbp up+down stream - the reference genome + sequence underlying the feature, with the up and downstream sequence +
    • +
+ + Note: you can use the "gear icon" to edit the number + of bp displayed up/downstream and in the intron region + + + + + + + + ) +} diff --git a/packages/core/BaseFeatureWidget/__snapshots__/index.test.js.snap b/packages/core/BaseFeatureWidget/__snapshots__/index.test.js.snap index fdb56d4d90..e9d88c7ceb 100644 --- a/packages/core/BaseFeatureWidget/__snapshots__/index.test.js.snap +++ b/packages/core/BaseFeatureWidget/__snapshots__/index.test.js.snap @@ -128,6 +128,30 @@ exports[`open up a widget 1`] = ` class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root" /> +
+ +

diff --git a/plugins/alignments/src/AlignmentsFeatureDetail/__snapshots__/index.test.js.snap b/plugins/alignments/src/AlignmentsFeatureDetail/__snapshots__/index.test.js.snap index ba013fc1a7..67ffe79c66 100644 --- a/plugins/alignments/src/AlignmentsFeatureDetail/__snapshots__/index.test.js.snap +++ b/plugins/alignments/src/AlignmentsFeatureDetail/__snapshots__/index.test.js.snap @@ -293,6 +293,30 @@ exports[`open up a widget 1`] = ` class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root" /> +
+ +

diff --git a/plugins/variants/src/VariantFeatureWidget/__snapshots__/VariantFeatureWidget.test.js.snap b/plugins/variants/src/VariantFeatureWidget/__snapshots__/VariantFeatureWidget.test.js.snap index 43982ef6c3..04e4583c87 100644 --- a/plugins/variants/src/VariantFeatureWidget/__snapshots__/VariantFeatureWidget.test.js.snap +++ b/plugins/variants/src/VariantFeatureWidget/__snapshots__/VariantFeatureWidget.test.js.snap @@ -202,6 +202,30 @@ exports[`VariantTrack widget renders with just the required model elements 1`] = class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root" /> +
+ +