Skip to content

Commit

Permalink
Help dialog for sequence panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmdcolin
cmdcolin committed Oct 18, 2022
1 parent c234d2e commit aaf529d
Show file tree
Hide file tree
Showing 5 changed files with 192 additions and 0 deletions.
11 changes: 11 additions & 0 deletions packages/core/BaseFeatureWidget/SequenceFeatureDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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
Expand Down Expand Up @@ -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<SeqState | ErrorState>()
const [error, setError] = useState<unknown>()
const [copied, setCopied] = useState(false)
Expand Down Expand Up @@ -184,6 +187,11 @@ export default function SequenceFeatureDetails({ model, feature }: BaseProps) {
<Button variant="contained" onClick={() => setShown(!shown)}>
{shown ? 'Hide feature sequence' : 'Show feature sequence'}
</Button>
<FormControl className={classes.formControl}>
<IconButton onClick={() => setHelpShown(true)}>
<HelpIcon />
</IconButton>
</FormControl>
<br />
{shown ? (
<div className={classes.container2}>
Expand Down Expand Up @@ -241,6 +249,7 @@ export default function SequenceFeatureDetails({ model, feature }: BaseProps) {
<SettingsIcon />
</IconButton>
</FormControl>

<br />
<>
{error ? (
Expand Down Expand Up @@ -289,6 +298,8 @@ export default function SequenceFeatureDetails({ model, feature }: BaseProps) {
intronBp={intronBp}
/>
) : null}

{helpShown ? <HelpDlg handleClose={() => setHelpShown(false)} /> : null}
</div>
)
}
109 changes: 109 additions & 0 deletions packages/core/BaseFeatureWidget/SequenceHelpDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Dialog maxWidth="xl" open onClose={() => handleClose()}>
<DialogTitle>
Feature sequence panel
{handleClose ? (
<IconButton
className={classes.closeButton}
onClick={() => handleClose()}
>
<CloseIcon />
</IconButton>
) : null}
</DialogTitle>
<Divider />

<DialogContent className={classes.dialogContent}>
<Typography paragraph>
The "Feature sequence" panel shows the underlying genomic sequence for
a given feature, fetched from the reference genome.
</Typography>
<Typography>
For gene features, this panel does special calculations to e.g. stitch
together the coding sequence, the options are:
</Typography>
<ul>
<li>CDS - shows the stitched together CDS sequences</li>
<li>
Protein - the translated coding sequence, with the "standard"
genetic code
</li>
<li>cDNA - shows the UTRs and stitched together CDS sequences</li>
<li>
Gene w/ introns - the sequence underlying the entire gene including
including introns, with UTR and CDS highlighted
</li>
<li>
Gene w/ Nbp introns - same "Gene w/ introns", but limiting to a
subset of the intron sequence displayed
</li>
<li>
Gene +/- Nbp up+down stream - same as "Gene w/ introns" but with up
and downstream sequence displayed
</li>
<li>
Gene +/- Nbp up+down stream, Nbp introns - same as "Gene w/
introns", but with limited intron sequence displayed and up and
downstream sequence
</li>
</ul>
<Typography paragraph>
For other feature types, the options are:
</Typography>
<ul>
<li>
Feature sequence - the reference genome sequence underlying the
feature
</li>
<li>
Feature sequence +/- Nbp up+down stream - the reference genome
sequence underlying the feature, with the up and downstream sequence
</li>
</ul>
<Typography>
Note: you can use the "gear icon" <SettingsIcon /> to edit the number
of bp displayed up/downstream and in the intron region
</Typography>
</DialogContent>

<DialogActions>
<Button onClick={() => handleClose()} autoFocus variant="contained">
Close
</Button>
</DialogActions>
</Dialog>
)
}
24 changes: 24 additions & 0 deletions packages/core/BaseFeatureWidget/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,30 @@ exports[`open up a widget 1`] = `
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<div
class="MuiFormControl-root tss-1x17dzq-formControl css-1nrlq1o-MuiFormControl-root"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="HelpIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<br />
</div>
</div>
Expand Down
24 changes: 24 additions & 0 deletions plugins/alignments/src/AlignmentsFeatureDetail/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,30 @@ exports[`open up a widget 1`] = `
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<div
class="MuiFormControl-root tss-1x17dzq-formControl css-1nrlq1o-MuiFormControl-root"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="HelpIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<br />
</div>
</div>
Expand Down
24 changes: 24 additions & 0 deletions plugins/variants/src/VariantFeatureWidget/__snapshots__/VariantFeatureWidget.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,30 @@ exports[`VariantTrack widget renders with just the required model elements 1`] =
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<div
class="MuiFormControl-root tss-1x17dzq-formControl css-1nrlq1o-MuiFormControl-root"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="HelpIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<br />
</div>
</div>
Expand Down

0 comments on commit aaf529d

Please sign in to comment.