chore: inputs from users

.eslintrc.json

@@ -10,4 +10,4 @@
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error"
   }
-}
+}

README.md

@@ -1,4 +1,5 @@
 # dnarchive
+
 Human Genome Database
 
 ## Getting Started
@@ -9,4 +10,4 @@ First, run the development server:
 npm run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

components/analysis/AnalysisContainer.tsx

@@ -26,6 +26,7 @@ const AnalysisContainer = () => {
       ),
     ],
     analysis: "g4",
+    name: "",
   });
 
   return (
@@ -57,13 +58,14 @@ const AnalysisContainer = () => {
         >
           <ChromosomeSelector formData={formData} setFormData={setFormData} />
           <Button
-            variant="outlined"
+            variant="contained"
+            color="success"
             fullWidth
             onClick={() =>
               router.push({ pathname: "/analysis/data/", query: formData })
             }
           >
-            Save filter
+            START ANALYSIS
           </Button>
         </Stack>
       </Grid>

components/analysis/AnalysisDataContainer.tsx

@@ -1,4 +1,6 @@
 import { BrowseListQueryData } from "@components/types";
+import DownloadIcon from "@mui/icons-material/Download";
+import { Button } from "@mui/material";
 import Paper from "@mui/material/Paper";
 import Stack from "@mui/material/Stack";
 import Table from "@mui/material/Table";
@@ -9,6 +11,7 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
 import MaterialReactTable, { MRT_ColumnDef } from "material-react-table";
+import { useRouter } from "next/router";
 import React, { useMemo } from "react";
 
 type Props = {
@@ -24,6 +27,8 @@ type Props = {
 };
 
 const AnalysisContainer = ({ items, settings, isLoading, isError }: Props) => {
+  const router = useRouter();
+  const { query } = router;
   const g4Columns = useMemo<MRT_ColumnDef<BrowseListQueryData[0]>[]>(
     () => [
       {
@@ -66,6 +71,29 @@ const AnalysisContainer = ({ items, settings, isLoading, isError }: Props) => {
     []
   );
 
+  // Function to convert array of objects to CSV string
+  const convertToCSV = (array: any) => {
+    const header = Object.keys(array[0]).join(",") + "\n";
+    const body = array
+      .map((obj: { [s: string]: unknown } | ArrayLike<unknown>) =>
+        Object.values(obj).join(",")
+      )
+      .join("\n");
+    return header + body;
+  };
+
+  const handleDownloadClick = () => {
+    const csvString = convertToCSV(items ?? []);
+    const blob = new Blob([csvString], { type: "text/csv;charset=utf-8;" });
+    const link = document.createElement("a");
+    const url = URL.createObjectURL(blob);
+    link.setAttribute("href", url);
+    link.setAttribute("download", "dnarchive_table_data.csv");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
   return (
     <Stack direction="column" spacing={2}>
       <Typography variant="h6">G4Hunter</Typography>
@@ -81,18 +109,36 @@ const AnalysisContainer = ({ items, settings, isLoading, isError }: Props) => {
           <TableBody>
             <TableRow>
               <TableCell component="th" scope="row">
-                Window size: {settings.window_size}
+                Window size: {settings.window_size} | Threshold:{" "}
+                {settings.threshold} | Gene: {query?.name}
               </TableCell>
               <TableCell>
                 Frequency: {settings.freq_per_1k?.toFixed(2)} / 1000 bp
               </TableCell>
             </TableRow>
             <TableRow>
               <TableCell component="th" scope="row">
-                Threshold: {settings.threshold}
+                Analysis area: {query.start} - {query.end}
               </TableCell>
               <TableCell>Total: {settings.total}</TableCell>
             </TableRow>
+            <TableRow>
+              <TableCell component="th" scope="row">
+                Chromosomes:{" "}
+                {Array.isArray(query?.chromosome)
+                  ? query?.chromosome.join(", ")
+                  : query?.chromosome}
+              </TableCell>
+              <TableCell>
+                <Button
+                  startIcon={<DownloadIcon />}
+                  onClick={handleDownloadClick}
+                  style={{ textTransform: "none" }}
+                >
+                  Download results
+                </Button>
+              </TableCell>
+            </TableRow>
           </TableBody>
         </Table>
       </TableContainer>

components/analysis/cards/GeneCard.tsx

@@ -21,19 +21,21 @@ const GeneCard = ({ formData, setFormData }: Props) => {
 
   const handleSetGeneWindow = (
     _: any,
-    value: { chromosome: any; start: any; end: any }
+    value: { chromosome: any; start: any; end: any; name: string }
   ) => {
     if (!value) {
       return;
     }
+    console.log(data);
 
-    const { chromosome, start, end } = value;
+    const { chromosome, start, end, name } = value;
 
     setFormData({
       ...formData,
       chromosome: [chromosome],
       start,
       end,
+      name,
     });
   };
 

components/analysis/types.ts

@@ -7,4 +7,5 @@ export type FormData = {
   end: number;
   chromosome: string[];
   analysis: string;
+  name: string;
 };

components/browse/BrowseContainer.tsx

@@ -53,7 +53,7 @@ export function BrowseContainer({ data = [], isLoading, isError }: Props) {
       columns={columns}
       data={data ?? []}
       rowNumberMode="original"
-      enableTopToolbar
+      enableTopToolbar={false}
       enableColumnActions={false}
       enablePagination={false}
       muiTableBodyRowProps={{ hover: true }}

components/browse/BrowseTableActions.tsx

@@ -1,4 +1,4 @@
-import InfoIcon from "@mui/icons-material/Info";
+import TroubleshootIcon from "@mui/icons-material/Troubleshoot";
 import { Box, IconButton, Tooltip } from "@mui/material";
 import { useRouter } from "next/router";
 import React, { useMemo } from "react";
@@ -17,24 +17,30 @@ export function BrowseTableActions({ chromosome, length }: Props) {
   const router = useRouter();
 
   const actions: Action[] = useMemo(
-    () => [{ icon: <InfoIcon />, placement: "bottom" }],
+    () => [{ icon: <TroubleshootIcon />, placement: "bottom" }],
     []
   );
 
   return (
     <Box sx={{ display: "flex" }}>
       {actions.map(({ icon, placement }, index) => (
-        <IconButton
+        <Tooltip
           key={index}
-          onClick={() =>
-            router.push({
-              pathname: "/sequence",
-              query: { chromosome, length },
-            })
-          }
+          title={`Analyze ${chromosome}`}
+          placement={placement || "top"}
         >
-          {icon}
-        </IconButton>
+          <IconButton
+            key={index}
+            onClick={() =>
+              router.push({
+                pathname: "/sequence",
+                query: { chromosome, length },
+              })
+            }
+          >
+            {icon}
+          </IconButton>
+        </Tooltip>
       ))}
     </Box>
   );

components/layout/Layout.tsx

@@ -11,7 +11,7 @@ type Props = {
 };
 
 function Layout({ children }: Props) {
-  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(true);
 
   return (
     <Box sx={{ display: "flex" }}>

components/layout/menu/Menu.tsx

@@ -14,9 +14,10 @@ import {
   ThemeProvider,
 } from "@mui/material/styles";
 import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
+import Image from "next/image";
 
 import { MENU_ITEMS } from "./items";
+import Logo from "./logo.png";
 import MenuItem from "./MenuItem";
 
 const darkTheme = createTheme({
@@ -79,12 +80,13 @@ export default function Menu({ open, onDrawerOpen }: Props) {
           >
             <MenuIcon />
           </IconButton>
-          <Typography
-            variant="button"
-            sx={{ ...(!open && { display: "none" }) }}
-          >
-            Logo
-          </Typography>
+          <Image
+            src={Logo}
+            alt="Logo"
+            width={80}
+            height={(80 * 358) / 647}
+            style={{ marginLeft: "15px", ...(!open && { display: "none" }) }}
+          />
         </Toolbar>
         <List>
           {MENU_ITEMS.map(({ label, icon, path }) => (

components/layout/menu/items.tsx

@@ -1,11 +1,11 @@
+import AccountTreeIcon from "@mui/icons-material/AccountTree";
 import BarChartIcon from "@mui/icons-material/BarChart";
 import ContactsIcon from "@mui/icons-material/Contacts";
-import EditIcon from "@mui/icons-material/Edit";
-import TableChartIcon from "@mui/icons-material/TableChart";
+import TroubleshootIcon from "@mui/icons-material/Troubleshoot";
 
 export const MENU_ITEMS = [
-  { label: "Browser", icon: <TableChartIcon />, path: "/" },
-  { label: "Analysis", icon: <EditIcon />, path: "/analysis" },
+  { label: "Browser", icon: <AccountTreeIcon />, path: "/" },
+  { label: "Analysis", icon: <TroubleshootIcon />, path: "/analysis" },
   { label: "Statistics", icon: <BarChartIcon />, path: "/statistics" },
   { label: "Contact", icon: <ContactsIcon />, path: "/contact" },
 ];

components/statistics/StatisticsContainer.tsx

@@ -1,5 +1,4 @@
 import type { StatisticsQueryData } from "@components/types";
-import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Paper from "@mui/material/Paper";
 import Stack from "@mui/material/Stack";
@@ -10,6 +9,7 @@ import {
   Bar,
   BarChart,
   CartesianGrid,
+  Label,
   Legend,
   Rectangle,
   Tooltip,
@@ -60,7 +60,7 @@ export function StatisticsContainer({ data = [] }: Props) {
                   })
                 }
               >
-                Show analysis
+                Analyze
               </Button>
             </Stack>
 
@@ -79,8 +79,20 @@ export function StatisticsContainer({ data = [] }: Props) {
               }}
             >
               <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="name" />
-              <YAxis />
+              <XAxis dataKey="name">
+                <Label
+                  value={"G4 Threshold"}
+                  position="insideBottomRight"
+                  offset={-10}
+                />
+              </XAxis>
+              <YAxis
+                label={{
+                  value: "PQS frequency",
+                  angle: -90,
+                  position: "insideLeft",
+                }}
+              />
               <Tooltip />
               <Legend />
               <Bar
@@ -107,8 +119,21 @@ export function StatisticsContainer({ data = [] }: Props) {
               }}
             >
               <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="name" />
-              <YAxis />
+              <XAxis dataKey="name">
+                <Label
+                  value={"G4 Threshold"}
+                  position="insideBottomRight"
+                  offset={-10}
+                />
+              </XAxis>
+              <YAxis
+                label={{
+                  value: "PQS threshold",
+                  angle: -90,
+                  position: "insideLeft",
+                  offset: -12,
+                }}
+              />
               <Tooltip />
               <Legend />
               <Bar

package.json

@@ -30,7 +30,7 @@
     "@zodios/core": "^10.9.6",
     "lodash": "^4.17.21",
     "material-react-table": "^1.14.0",
-    "next": "13.0.5",
+    "next": "^13.5.6",
     "next-axiom": "^0.15.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",