chore: inputs from users

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

@@ -8,8 +8,11 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
+import DownloadIcon from '@mui/icons-material/Download';
 import MaterialReactTable, { MRT_ColumnDef } from "material-react-table";
+import { useRouter } from "next/router";
 import React, { useMemo } from "react";
+import { Button } from "@mui/material";
 
 type Props = {
   items: Object;
@@ -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,25 @@ 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 +105,33 @@ 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,13 +17,14 @@ 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) => (
+        <Tooltip key={index} title={`Analyze ${chromosome}`} placement={placement || "top"}>
         <IconButton
           key={index}
           onClick={() =>
@@ -35,6 +36,7 @@ export function BrowseTableActions({ chromosome, length }: Props) {
         >
           {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,7 +14,8 @@ import {
   ThemeProvider,
 } from "@mui/material/styles";
 import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
+import Image from "next/image";
+import Logo from './logo.png';
 
 import { MENU_ITEMS } from "./items";
 import MenuItem from "./MenuItem";
@@ -79,12 +80,7 @@ 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 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';
+import AccountTreeIcon from '@mui/icons-material/AccountTree';
 
 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,14 @@ 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 +113,14 @@ 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",

pages/contact.tsx

@@ -1,8 +1,52 @@
 import Typography from "@mui/material/Typography";
+import { Divider } from "@mui/material";
 import type { NextPage } from "next";
 
+
 const Contact: NextPage = () => {
-  return <Typography>Contact</Typography>;
-};
+  return (
+    <div>
+      <Typography variant="h6">
+        Primary Contact
+      </Typography>
+      <Typography>
+        For general inquiries about <em>DNArchive</em>, please contact:
+      </Typography>
+      <Typography>
+        <strong>Name:</strong> prof. Václav Brázda
+      </Typography>
+      <Typography>
+        <strong>Email:</strong> vaclav@ibp.cz
+      </Typography>
+
+      <Divider />
+
+      <Typography variant="h6">
+        Technical Support Information
+      </Typography>
+      <Typography>
+        For technical support, bug reports, or feature requests related to <em>DNArchive</em>, please reach out to our support team:
+      </Typography>
+      <Typography>
+        <strong>Support Email:</strong> jan.havlik@protonmail.com
+      </Typography>
+      <Typography>
+        <strong>GitHub Issues:</strong> <a href="https://github.com/jan-havlik/dnarchive-server/issues">github.com/jan-havlik/dnarchive-server/issues</a>
+      </Typography>
+
+      <Divider />
+
+      <Typography variant="h6">
+        Collaboration and Feedback
+      </Typography>
+      <Typography>
+        We are always looking for opportunities to collaborate and improve <em>DNArchive</em>. If you have suggestions, feedback, or are interested in collaborating with us, please contact:
+      </Typography>
+      <Typography>
+        <strong>Collaboration Inquiries:</strong> vaclav@ibp.cz
+      </Typography>
+    </div>
+  );
+}
 
 export default Contact;