From 82735404b62fbd1f04215dc3616d6965e6ebb565 Mon Sep 17 00:00:00 2001
From: Apiraam <103979336+apiraam96@users.noreply.github.com>
Date: Thu, 18 Jan 2024 17:10:26 -0500
Subject: [PATCH] finished copy button for DNA and protein sequences (#57)

---
 Eplant/views/GeneInfoView/component.tsx | 38 +++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

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 <CodeBody variant="caption">{spans}</CodeBody>
+  return (
+    <>
+      <CodeBody variant="caption">{spans}</CodeBody>
+    </>
+  )
 }
 
 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 (
     <Stack direction="row" gap={'20px'}>
       <ViewSwitcher geneticElement={geneticElement} />
@@ -235,6 +248,22 @@ export default function GeneInfoViewer({
                 geneticElement={geneticElement}
                 activeData={activeData}
               ></GeneSequence>
+              <IconButton onClick={() => copyToClipboard(activeData.geneSequence)} color='primary' sx={{ ml: 1 }}>
+                <ContentCopyIcon />
+              </IconButton>
+              <Snackbar
+                anchorOrigin={
+                  {
+                    vertical: 'top',
+                    horizontal: 'center'
+                  }
+                }
+                open={snackBarOpen}
+                onClose={() => setSnackBarOpen(false)}
+                autoHideDuration={2000}
+              >
+                <Alert severity='success'>Copied to clipboard!</Alert>
+              </Snackbar>
             </div>
           </div>
         </div>
@@ -250,11 +279,14 @@ export default function GeneInfoViewer({
               <CodeBody variant="caption" style={{ wordBreak: 'break-word' }}>
                 {activeData.proteinSequence}
               </CodeBody>
+              <IconButton onClick={() => copyToClipboard(activeData.proteinSequence)} color='primary' sx={{ ml: 1 }}>
+                <ContentCopyIcon />
+              </IconButton>
             </div>
           </div>
         ) : undefined}
       </Stack>
-    </Stack>
+    </Stack >
   )
 }
 function ViewSwitcher({ geneticElement }: { geneticElement: GeneticElement }) {