diff --git a/components/analysis/cards/sorting-card/SortingCard.tsx b/components/analysis/cards/sorting-card/SortingCard.tsx index 4709503..db8a394 100644 --- a/components/analysis/cards/sorting-card/SortingCard.tsx +++ b/components/analysis/cards/sorting-card/SortingCard.tsx @@ -12,6 +12,12 @@ 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}> @@ -19,9 +25,25 @@ const SortingCard = ({ formData, setFormData }: Props) => { <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> diff --git a/components/analysis/cards/sorting-card/SortingInput.tsx b/components/analysis/cards/sorting-card/SortingInput.tsx index cf1c016..ef639c4 100644 --- a/components/analysis/cards/sorting-card/SortingInput.tsx +++ b/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> ); }; diff --git a/components/sequence/SequenceContainer.tsx b/components/sequence/SequenceContainer.tsx index 3c0f31f..a2e7f6b 100644 --- a/components/sequence/SequenceContainer.tsx +++ b/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( diff --git a/server/manager/adapter/BrowseAdapter.ts b/server/manager/adapter/BrowseAdapter.ts index 8de228d..25d356e 100644 --- a/server/manager/adapter/BrowseAdapter.ts +++ b/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, diff --git a/server/manager/adapter/client.ts b/server/manager/adapter/client.ts index 29ca800..47f7a2d 100644 --- a/server/manager/adapter/client.ts +++ b/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(