feat: implement genes

components/analysis/AnalysisContainer.tsx

@@ -1,6 +1,7 @@
 import G4HunterFilterCard from "@components/analysis/cards/analysis-filter-cards/G4HunterFilterCard";
 import AttributesCard from "@components/analysis/cards/AttributesCard";
 import ChromosomeSelector from "@components/analysis/cards/ChromosomeSelector";
+import GeneCard from "@components/analysis/cards/GeneCard";
 import SortingCard from "@components/analysis/cards/sorting-card/SortingCard";
 import type { FormData } from "@components/analysis/types";
 import { CHROMOSOMES } from "@config";
@@ -40,7 +41,10 @@ const AnalysisContainer = () => {
             <G4HunterFilterCard formData={formData} setFormData={setFormData} />
             <SortingCard formData={formData} setFormData={setFormData} />
           </Stack>
-          <AttributesCard formData={formData} setFormData={setFormData} />
+          <Stack direction="row" spacing={1}>
+            <AttributesCard formData={formData} setFormData={setFormData} />
+            <GeneCard formData={formData} setFormData={setFormData} />
+          </Stack>
         </Stack>
       </Grid>
 

components/analysis/cards/GeneCard.tsx

@@ -1,42 +1,86 @@
-import AddIcon from "@mui/icons-material/Add";
-import Button from "@mui/material/Button";
-import Chip from "@mui/material/Chip";
+import type { FormData } from "@components/analysis/types";
+import Autocomplete from "@mui/material/Autocomplete";
+import CircularProgress from "@mui/material/CircularProgress";
 import Divider from "@mui/material/Divider";
 import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
+import { trpc } from "@utils/trpc";
+import { useState } from "react";
 
 import BaseCard from "./BaseCard";
 
-const GeneCard = () => {
+type Props = {
+  formData: FormData;
+  setFormData: (formData: FormData) => void;
+};
+
+const GeneCard = ({ formData, setFormData }: Props) => {
+  const { data, isLoading } = trpc.browse.getGenes.useQuery();
+  const [open, setOpen] = useState(false);
+
+  const handleSetGeneWindow = (
+    _: any,
+    value: { chromosome: any; start: any; end: any }
+  ) => {
+    if (!value) {
+      return;
+    }
+
+    const { chromosome, start, end } = value;
+
+    setFormData({
+      ...formData,
+      chromosome: [chromosome],
+      start,
+      end,
+    });
+  };
+
   return (
     <BaseCard minHeight={100}>
       <Stack spacing={2}>
         <Typography variant="h6">Genes</Typography>
 
         <Divider />
 
-        <Button
-          sx={{ width: "120px" }}
-          variant="outlined"
-          size="small"
-          endIcon={<AddIcon />}
-        >
-          Gene
-        </Button>
-        <Stack direction="row" spacing={1}>
-          <Chip
-            label="DCDC 2"
-            variant="outlined"
-            onClick={() => {}}
-            onDelete={() => {}}
-          />
-          <Chip
-            label="Clickable Deletable"
-            variant="outlined"
-            onClick={() => {}}
-            onDelete={() => {}}
-          />
-        </Stack>
+        <Autocomplete
+          id="asynchronous-demo"
+          sx={{ width: 300 }}
+          open={open}
+          onOpen={() => {
+            setOpen(true);
+          }}
+          onClose={() => {
+            setOpen(false);
+          }}
+          isOptionEqualToValue={(chromosome, value) =>
+            chromosome.name === value.name
+          }
+          // @ts-expect-error fixme !!!
+          onChange={handleSetGeneWindow}
+          getOptionLabel={(chromosome) => chromosome.name}
+          options={data ?? []}
+          loading={isLoading}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              size="small"
+              label="Gene"
+              InputProps={{
+                ...params.InputProps,
+                endAdornment: (
+                  <>
+                    {isLoading ? (
+                      <CircularProgress color="inherit" size={20} />
+                    ) : null}
+                    {params.InputProps.endAdornment}
+                  </>
+                ),
+              }}
+            />
+          )}
+        />
       </Stack>
     </BaseCard>
   );

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: "/analysis/data", title: "Analysis data" },
   { route: "/statistics", title: "Statistics" },
   { route: "/contact", title: "Contact" },
 ];

server/api/browse.ts

@@ -15,4 +15,5 @@ export const browseApi = router({
     .input(listSequenceInputSchema)
     .query(({ input }) => BrowseManager.listSequence(input)),
   getStatistics: baseProcedure.query(() => BrowseManager.getStatistics()),
+  getGenes: baseProcedure.query(() => BrowseManager.getGenes()),
 });

server/manager/BrowseManager.ts

@@ -17,4 +17,8 @@ export class BrowseManager {
   static async getStatistics() {
     return BrowseAdapter.getStatistics();
   }
+
+  static async getGenes() {
+    return BrowseAdapter.getGenes();
+  }
 }

server/manager/adapter/BrowseAdapter.ts

@@ -48,7 +48,7 @@ export class BrowseAdapter {
     const { analysis, sequence = "" } = items;
 
     const mappedAnalysis = {
-      g4Hunter: analysis.map(({ sub_score, abs_score, ...rest }) => ({
+      g4Hunter: analysis[0].result.map(({ sub_score, abs_score, ...rest }) => ({
         ...rest,
         absScore: abs_score,
         subScore: sub_score,
@@ -61,4 +61,8 @@ export class BrowseAdapter {
   static async getStatistics() {
     return api.getStatistics();
   }
+
+  static async getGenes() {
+    return api.getGenes();
+  }
 }

server/manager/adapter/client.ts

@@ -17,17 +17,27 @@ export const api = new Zodios(
       response: z.object({
         analysis: z.array(
           z.object({
-            abs_score: z.number(),
-            chromosome: z.string(),
-            length: z.number(),
-            position: z.number(),
-            score: z.number(),
-            sequence: z.string(),
-            sub_score: z.number(),
-            threshold: z.number(),
+            result: z.array(
+              z.object({
+                abs_score: z.number(),
+                chromosome: z.string(),
+                length: z.number(),
+                position: z.number(),
+                score: z.number(),
+                sequence: z.string(),
+                sub_score: z.number(),
+                threshold: z.number(),
+              })
+            ),
           })
         ),
         sequence: z.array(z.string()),
+        settings: z.object({
+          total: z.number(),
+          freq_per_1k: z.number(),
+          window_size: z.number(),
+          threshold: z.number(),
+        }),
       }),
       status: 200,
     },
@@ -134,6 +144,20 @@ export const api = new Zodios(
       ),
       status: 200,
     },
+    {
+      method: "get",
+      path: "/genes",
+      alias: "getGenes",
+      response: z.array(
+        z.object({
+          name: z.string(),
+          start: z.number(),
+          end: z.number(),
+          chromosome: z.string(),
+        })
+      ),
+      status: 200,
+    },
   ],
   { validate: false }
 );