feat: implement sorting + fix sequence listing

components/analysis/cards/sorting-card/SortingCard.tsx

@@ -12,16 +12,38 @@ type Props = {
 };
 
 const SortingCard = ({ formData, setFormData }: Props) => {
+  const handleOrderBy = (orderBy: string, dir: "asc" | "desc") => {
+    setFormData({ ...formData, orderBy: [orderBy], dir });
+  };
+
+  console.log({ formData });
+
   return (
     <BaseCard minHeight={100}>
       <Stack spacing={2}>
         <Typography variant="h6">Sort by</Typography>
         <Divider />
         <Stack direction="row" alignItems="start">
           <Stack direction="column" spacing={2}>
-            <SortingInput title="G4Hunter score" subtitle="(individual)" />
-            <SortingInput title="G4Hunter score" subtitle="(grouped)" />
-            <SortingInput title="Quadruplex lenght" />
+            <SortingInput
+              checked={formData.orderBy[0] === "position"}
+              title="G4Hunter position"
+              orderBy="position"
+              onOrderByChange={handleOrderBy}
+            />
+            <SortingInput
+              checked={formData.orderBy[0] === "score"}
+              title="G4Hunter score"
+              subtitle="(grouped)"
+              orderBy="score"
+              onOrderByChange={handleOrderBy}
+            />
+            <SortingInput
+              checked={formData.orderBy[0] === "spacer_length"}
+              title="Quadruplex lenght"
+              orderBy="spacer_length"
+              onOrderByChange={handleOrderBy}
+            />
           </Stack>
         </Stack>
       </Stack>

components/analysis/cards/sorting-card/SortingInput.tsx

@@ -7,20 +7,43 @@ import Typography from "@mui/material/Typography";
 import { useState } from "react";
 
 type Props = {
+  checked: boolean;
   title: string;
   subtitle?: string;
+  orderBy: string;
+  onOrderByChange(orderBy: string, dir: "asc" | "desc"): void;
 };
 
-const SortingInput = ({ title, subtitle }: Props) => {
+const SortingInput = ({
+  checked,
+  title,
+  subtitle,
+  orderBy,
+  onOrderByChange,
+}: Props) => {
   const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
 
   const handleSetSortDir = () => {
     setSortDir(sortDir === "asc" ? "desc" : "asc");
+    handleSetChecked();
+  };
+
+  const handleSetChecked = () => {
+    onOrderByChange(orderBy, sortDir);
   };
 
   return (
-    <Stack spacing={1} direction="row" alignItems="center">
-      <IconButton disabled aria-label="delete" onClick={handleSetSortDir}>
+    <Stack
+      spacing={1}
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <IconButton
+        aria-label="delete"
+        disabled={!checked}
+        onClick={handleSetSortDir}
+      >
         {sortDir === "asc" ? (
           <KeyboardArrowDownIcon />
         ) : (
@@ -31,7 +54,7 @@ const SortingInput = ({ title, subtitle }: Props) => {
         <Typography variant="button">{title}</Typography>
         <Typography variant="caption">{subtitle}</Typography>
       </Stack>
-      <Checkbox disabled />
+      <Checkbox checked={checked} onClick={handleSetChecked} />
     </Stack>
   );
 };

components/sequence/SequenceContainer.tsx

@@ -19,7 +19,7 @@ function mapToAnnotations(start, g4Hunter, palindromeAnalysis) {
   const g4Annotations = g4Hunter.map(({ position, length }) => ({
     start: position - start,
     end: position + length - start,
-    name: "quadruplex",
+    name: "PQS",
   }));
 
   const palindromeAnnotations = palindromeAnalysis.map(

server/manager/adapter/BrowseAdapter.ts

@@ -15,7 +15,8 @@ export class BrowseAdapter {
   }
 
   static async listAnalysis(input: ListAnalysisInput) {
-    const { analysis, chromosome, start, end, window, threshold } = input;
+    const { analysis, chromosome, start, end, window, threshold, sortBy, dir } =
+      input;
 
     const { result, settings } = await api.getAnalysis({
       queries: {
@@ -25,6 +26,7 @@ export class BrowseAdapter {
         end,
         window,
         threshold,
+        sort_by: `${sortBy},${dir}`,
       },
     });
 
@@ -48,7 +50,7 @@ export class BrowseAdapter {
     const { analysis, sequence = "" } = items;
 
     const mappedAnalysis = {
-      g4Hunter: analysis[0].result.map(({ sub_score, abs_score, ...rest }) => ({
+      g4Hunter: analysis.map(({ sub_score, abs_score, ...rest }) => ({
         ...rest,
         absScore: abs_score,
         subScore: sub_score,

server/manager/adapter/client.ts

@@ -17,18 +17,14 @@ export const api = new Zodios(
       response: z.object({
         analysis: z.array(
           z.object({
-            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(),
-              })
-            ),
+            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()),
@@ -56,6 +52,7 @@ export const api = new Zodios(
         { name: "end", type: "Query", schema: z.number() },
         { name: "threshold", type: "Query", schema: z.number().optional() },
         { name: "window", type: "Query", schema: z.number().optional() },
+        { name: "sort_by", type: "Query", schema: z.string().optional() },
       ],
       response: z.object({
         result: z.array(