Merge pull request #28 from jan-havlik/pk-statistics

feat: implement statistics
jan-havlik · Dec 5, 2023 · ed39192 · ed39192
2 parents 783e092 + a132ada
commit ed39192
Show file tree

Hide file tree

Showing 12 changed files with 442 additions and 15 deletions.
diff --git a/components/browse/BrowseTableActions.tsx b/components/browse/BrowseTableActions.tsx
@@ -18,25 +18,24 @@ export function BrowseTableActions({ chromosome, length }: Props) {
   const router = useRouter();
 
   const actions: Action[] = useMemo(
-    () => [{ tooltip: "Tooltip 2", icon: <InfoIcon />, placement: "bottom" }],
+    () => [{ icon: <InfoIcon />, placement: "bottom" }],
     []
   );
 
   return (
     <Box sx={{ display: "flex" }}>
-      {actions.map(({ tooltip, icon, placement }) => (
-        <Tooltip key={tooltip} arrow placement={placement} title={tooltip}>
-          <IconButton
-            onClick={() =>
-              router.push({
-                pathname: "/sequence",
-                query: { chromosome, length },
-              })
-            }
-          >
-            {icon}
-          </IconButton>
-        </Tooltip>
+      {actions.map(({ icon, placement }, index) => (
+        <IconButton
+          key={index}
+          onClick={() =>
+            router.push({
+              pathname: "/sequence",
+              query: { chromosome, length },
+            })
+          }
+        >
+          {icon}
+        </IconButton>
       ))}
     </Box>
   );

diff --git a/components/layout/TopBar.tsx b/components/layout/TopBar.tsx
@@ -10,6 +10,7 @@ import React, { useMemo } from "react";
 const SUB_ROUTE = [
   { route: "/", title: "All chromosomes" },
   { route: "/analysis", title: "Analysis" },
+  { route: "/statistics", title: "Statistics" },
   { route: "/contact", title: "Contact" },
 ];
 

diff --git a/components/layout/menu/items.tsx b/components/layout/menu/items.tsx
@@ -1,9 +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";
 
 export const MENU_ITEMS = [
   { label: "Browser", icon: <TableChartIcon />, path: "/" },
   { label: "Analysis", icon: <EditIcon />, path: "/analysis" },
+  { label: "Statistics", icon: <BarChartIcon />, path: "/statistics" },
   { label: "Contact", icon: <ContactsIcon />, path: "/contact" },
 ];
diff --git a/components/statistics/StatisticsContainer.tsx b/components/statistics/StatisticsContainer.tsx
@@ -0,0 +1,125 @@
+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";
+import Typography from "@mui/material/Typography";
+import { useRouter } from "next/router";
+import React from "react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  Rectangle,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+type Props = {
+  data?: StatisticsQueryData;
+  isLoading: boolean;
+  isError: boolean;
+};
+
+export function StatisticsContainer({ data = [] }: Props) {
+  const router = useRouter();
+
+  return (
+    <Stack spacing={2}>
+      {data.map((item: StatisticsQueryData["item"]) => (
+        <Paper key={item.name} sx={{ height: 330, padding: 2 }}>
+          <Stack direction="row" justifyContent="space-between">
+            <Stack justifyContent="space-between">
+              <Stack>
+                <Typography fontSize={18} variant="h6">
+                  Chromosome {item.name} statistics
+                </Typography>
+                <br />
+                <Typography fontSize={16} variant="caption">
+                  Ref_seq: {item.ref_seq}
+                </Typography>
+                <Typography fontSize={16} variant="caption">
+                  Length: {item.length}
+                </Typography>
+                <Typography fontSize={16} variant="caption">
+                  GC Skew: {item.gc.skew.toFixed(10)}
+                </Typography>
+                <Typography fontSize={16} variant="caption">
+                  GC Content: {item.gc.content.toFixed(10)}
+                </Typography>
+              </Stack>
+
+              <Button
+                variant="text"
+                onClick={() =>
+                  router.push({
+                    pathname: "/sequence",
+                    query: { chromosome: item.name, length: item.length },
+                  })
+                }
+              >
+                Show analysis
+              </Button>
+            </Stack>
+
+            <BarChart
+              width={500}
+              height={300}
+              data={Object.entries(item.g4_frequency).map(([name, value]) => ({
+                name,
+                ["PQS frequency"]: value,
+              }))}
+              margin={{
+                top: 5,
+                right: 30,
+                left: 20,
+                bottom: 5,
+              }}
+            >
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="name" />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              <Bar
+                dataKey="PQS frequency"
+                fill="#82ca9d"
+                activeBar={<Rectangle fill="gold" stroke="purple" />}
+              />
+            </BarChart>
+
+            <BarChart
+              width={500}
+              height={300}
+              data={Object.entries(item.g4_threshold_count).map(
+                ([name, value]) => ({
+                  name,
+                  ["PQS threshold count"]: value,
+                })
+              )}
+              margin={{
+                top: 5,
+                right: 30,
+                left: 20,
+                bottom: 5,
+              }}
+            >
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="name" />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              <Bar
+                dataKey="PQS threshold count"
+                fill="#8884d8"
+                activeBar={<Rectangle fill="gold" stroke="purple" />}
+              />
+            </BarChart>
+          </Stack>
+        </Paper>
+      ))}
+    </Stack>
+  );
+}
diff --git a/components/types.ts b/components/types.ts
@@ -5,3 +5,8 @@ export type BrowseListQueryData = inferProcedureOutput<
   // @ts-ignore FIXME
   AppRouter["browse"]["list"]
 >["chromosomes"];
+
+export type StatisticsQueryData = inferProcedureOutput<
+  // @ts-ignore FIXME
+  AppRouter["statistics"]["list"]
+>["data"];
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.1",
+    "recharts": "^2.10.3",
     "seqviz": "^3.9.1",
     "styled-components": "^5.3.11",
     "zod": "^3.22.2"

diff --git a/pages/statistics/index.tsx b/pages/statistics/index.tsx
@@ -0,0 +1,13 @@
+import { StatisticsContainer } from "@components/statistics/StatisticsContainer";
+import { trpc } from "@utils/trpc";
+import type { NextPage } from "next";
+
+const Index: NextPage = () => {
+  const { data, isLoading, isError } = trpc.browse.getStatistics.useQuery();
+
+  return (
+    <StatisticsContainer data={data} isLoading={isLoading} isError={isError} />
+  );
+};
+
+export default Index;