diff --git a/Eplant/views/GeneInfoView/component.tsx b/Eplant/views/GeneInfoView/component.tsx index af613f19..714dbd9d 100644 --- a/Eplant/views/GeneInfoView/component.tsx +++ b/Eplant/views/GeneInfoView/component.tsx @@ -14,7 +14,9 @@ import { import { View, ViewProps } from '../../View' import { useViewData } from '../../View/viewData' import { GeneModel } from './GeneModel' -import { Box, Button, ButtonProps, LinearProgress } from '@mui/material' +import { Alert, Box, Button, ButtonProps, LinearProgress, Snackbar } from '@mui/material' +import ContentCopyIcon from '@mui/icons-material/ContentCopy'; +import { IconButton } from '@mui/material' const SecondaryText = styled(Typography)(({ theme }) => ({ color: theme.palette.text.secondary, @@ -122,7 +124,11 @@ const GeneSequence = ({ str += char prevStyle = currentStyle } - return {spans} + return ( + <> + {spans} + + ) } const ViewButton = styled(function ViewButton({ @@ -178,6 +184,13 @@ export default function GeneInfoViewer({ throw new TypeError('Genetic element must be provided for Gene Info View') } + const [snackBarOpen, setSnackBarOpen] = React.useState(false) + const copyToClipboard = (text: string) => { + setSnackBarOpen(true) + navigator.clipboard.writeText(text) + } + + return ( @@ -235,6 +248,22 @@ export default function GeneInfoViewer({ geneticElement={geneticElement} activeData={activeData} > + copyToClipboard(activeData.geneSequence)} color='primary' sx={{ ml: 1 }}> + + + setSnackBarOpen(false)} + autoHideDuration={2000} + > + Copied to clipboard! + @@ -250,11 +279,14 @@ export default function GeneInfoViewer({ {activeData.proteinSequence} + copyToClipboard(activeData.proteinSequence)} color='primary' sx={{ ml: 1 }}> + + ) : undefined} - + ) } function ViewSwitcher({ geneticElement }: { geneticElement: GeneticElement }) {