XspecT 0.4.1__py3-none-any.whl → 0.5.0__py3-none-any.whl

xspect/xspect-web/src/components/models.tsx

@@ -0,0 +1,53 @@
+import { Model, ModelTableEntry } from "@/types/models";
+import { ColumnDef } from "@tanstack/react-table"
+import { useEffect, useState } from "react";
+import { DataTable } from "@/components/data-table"
+import { getModels } from "../api";
+import { Separator } from "./ui/separator";
+import { ArrowRight } from "lucide-react";
+import { Link } from "react-router-dom";
+
+export default function Models() {
+    const [tableData, setTableData] = useState<ModelTableEntry[] | null>(null);
+
+    useEffect(() => {
+        getModels()
+            .then((data: Model[]) => {
+                const tableEntries: ModelTableEntry[] = [];
+                Object.entries(data).forEach(([modelType, modelList]) => {
+                    (modelList as string[]).forEach((modelName: string) => {
+                        tableEntries.push({ model_type: modelType, name: modelName });
+                    });
+                });
+                setTableData(tableEntries);
+            })
+            .catch((err) => console.error('Fetch error:', err));
+    }, []);
+
+    const columns: ColumnDef<ModelTableEntry>[] = [
+        { header: "Model Name", accessorKey: "name" },
+        { header: "Model Type", accessorKey: "model_type"},
+        {
+            id: "details",
+            cell: ({ row }) => (
+                <Link to={`/models/${row.getValue("name")}-${row.getValue("model_type")}`.toLowerCase()} className="">
+                    <ArrowRight />
+                </Link>
+            ),
+        },
+    ];
+
+    return (
+        <main className="flex-1 flex flex-col items-center justify-center p-4">
+            <div className="w-1/2">
+                <h1 className="text-xl font-bold">Available models</h1>
+                <p>The following models are available for classification and filtering.</p>
+                <Separator className="my-4" />
+                <DataTable
+                    columns={columns}
+                    data={tableData || []}
+                />
+            </div>
+        </main>
+    )
+}

xspect/xspect-web/src/components/result-chart.tsx

@@ -0,0 +1,44 @@
+"use client"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart"
+
+const chartConfig = {
+  score: {
+    label: "Score",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
+
+export interface ResultChartProps {
+  data: {
+    taxon: string
+    score: number
+  }[]
+}
+
+export function ResultChart({ data }: ResultChartProps) {
+  return (
+    <ChartContainer
+      config={chartConfig}
+      className="mx-auto aspect-square max-h-[1000px]"
+    >
+      <RadarChart data={data}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+        <PolarAngleAxis dataKey="taxon" />
+        <PolarGrid gridType="circle"/>
+        <Radar
+          dataKey="score"
+          fill="var(--primary)"
+          fillOpacity={0.6}
+          animationDuration={500}
+          max={1}
+        />
+      </RadarChart>
+    </ChartContainer>
+  )
+}

xspect/xspect-web/src/components/result.tsx

@@ -0,0 +1,155 @@
+import { Link, useParams } from "react-router-dom"
+import { getClassificationResult, getModelMetadata } from "../api";
+import { ModelMetadata, ClassificationResult } from "../types";
+import { useState, useEffect, use } from "react";
+import { LoadingSpinner } from "./spinner";
+import { ResultChart, ResultChartProps } from "./result-chart";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "./ui/button";
+import { DropdownMenuCheckboxes } from "./dropdown-checkboxes";
+import { DropdownMenuSlider } from "./dropdown-slider";
+
+type CheckboxItem = {
+    id: string;
+    label: string;
+    checked: boolean;
+};
+
+const useCheckboxItems = () => {
+    const [items, setItems] = useState<CheckboxItem[]>([]);
+
+    const handleCheckedChange = (id: string, checked: boolean) => {
+        setItems(items.map(item =>
+            item.id === id ? { ...item, checked } : item
+        ));
+    };
+
+    const checkboxItems = items.map(item => ({
+        ...item,
+        onCheckedChange: (checked: boolean) => handleCheckedChange(item.id, checked)
+    }));
+
+    return { checkboxItems, setItems };
+};
+
+
+export default function Result() {
+    const { checkboxItems: contig_checkbox_items, setItems: setCheckboxItems } = useCheckboxItems();
+    const { classification_uuid } = useParams();
+    const [classificationResult, setClassificationResult] = useState<ClassificationResult | null>(null);
+    const [chartData, setChartData] = useState<ResultChartProps[] | null>(null);
+    const [modelMetadata, setModelMetadata] = useState<ModelMetadata | null>(null);
+    const [numResults, setNumResults] = useState(15);
+
+    const checkedItemsState = JSON.stringify(
+        contig_checkbox_items.map(item => ({ id: item.id, checked: item.checked }))
+    );
+
+    useEffect(() => {
+        const fetchResult = () => {
+            if (classification_uuid) {
+                getClassificationResult(classification_uuid).then((data) => {
+                    setClassificationResult(data);
+                    getModelMetadata(data.model_slug).then((modelMetadata) => {
+                        setModelMetadata(modelMetadata);
+                    }).catch((error) => {
+                        console.error('Error fetching model metadata:', error);
+                        setTimeout(fetchResult, 500);
+                    });
+                }).catch((error) => {
+                    console.error('Error fetching classification result:', error);
+                    setTimeout(fetchResult, 500);
+                });
+            }
+        };
+        fetchResult();
+    }, [classification_uuid, setClassificationResult, setModelMetadata]);
+
+    useEffect(() => {
+        if (classificationResult) {
+            const contigNames = Object.keys(classificationResult.scores);
+            if (contigNames.length <= 20) {
+                const initialCheckboxItems = contigNames
+                    .filter(name => name !== "total")
+                    .map((name) => ({
+                        id: name,
+                        label: name,
+                        checked: true,
+                    }));
+                setCheckboxItems(initialCheckboxItems);
+            }
+        }
+    }, [classificationResult, setCheckboxItems]);
+
+    useEffect(() => {
+        if (classificationResult && modelMetadata) {
+            const selectedContigs = contig_checkbox_items
+                .filter(item => item.checked)
+                .map(item => item.id);
+            console.log('selectedContigs', selectedContigs);
+            const filtered_hits = Object.entries(classificationResult.hits).filter(([key]) => selectedContigs.includes(key));
+            const total_hits = {}
+            filtered_hits.forEach(([, value]) => {
+                Object.entries(value).forEach(([label, hits]) => {
+                    if (!total_hits[label]) {
+                        total_hits[label] = 0;
+                    }
+                    total_hits[label] += hits;
+                });
+            });
+            const total_kmers = Object.entries(classificationResult.num_kmers)
+                .filter(([key]) => selectedContigs.includes(key))
+                .reduce((sum, [_, value]) => sum + value, 0);
+            const scores = Object.entries(total_hits).map(([label, hits]) => {
+                return {
+                    taxon: modelMetadata.display_names[label].replace(modelMetadata.model_display_name, modelMetadata.model_display_name.charAt(0) + '.') || label,
+                    score: hits / total_kmers,
+                };
+            });
+            scores.sort((a, b) => b.score - a.score);
+            const topScores = scores.slice(0, numResults);
+            setChartData(topScores);
+        }
+    }, [classificationResult, modelMetadata, checkedItemsState, numResults]);
+
+
+    return (
+        <main className="flex-1 flex flex-col items-center justify-center p-4">
+            <div className="w-1/2">
+                {!chartData && (
+                    <div className="flex items-center justify-center">
+                        <LoadingSpinner className="size-10" />
+                        <span className="m-2 text-xl">Classifying...</span>
+                    </div>
+                )}
+                {chartData && (<>
+                    <h1 className="text-xl font-bold">Classification Results</h1>
+                    <p>{classificationResult?.input_source} was classified using the <Link className="font-medium underline underline-offset-4" to={`/models/${modelMetadata?.model_slug}`}>{modelMetadata?.model_display_name} {modelMetadata?.model_type.toLowerCase()}</Link> model. {classificationResult?.sparse_sampling_step === 1 ? 'No sparse sampling was used.' : 'Sparse sampling was used with step ' + classificationResult?.sparse_sampling_step}</p>
+                    <p className="mt-4"><b>Prediction:</b> {modelMetadata?.display_names[classificationResult?.prediction] || 'No prediction available.'}</p>
+                    <Button className="w-full mt-4" onClick={() => {
+                        const blob = new Blob([JSON.stringify(classificationResult, null, 2)], { type: 'application/json' });
+                        const href = URL.createObjectURL(blob);
+
+                        const link = document.createElement("a");
+                        link.href = href;
+                        link.download = "result-" + classification_uuid + ".json";
+                        document.body.appendChild(link);
+                        link.click();
+
+                        document.body.removeChild(link);
+                        URL.revokeObjectURL(href);
+                    }}>
+                        Download Full Result
+                    </Button>
+                    <Separator className="my-4 h-px" />
+                    <div className="flex justify-end space-x-2">
+                        <DropdownMenuSlider triggerButtonText="#Results" value={numResults} onValueChange={setNumResults} max={modelMetadata?.display_names.length} step={1} disabled={false} />
+                        <DropdownMenuCheckboxes triggerButtonText="Contigs" labelText="Select Contigs" items={contig_checkbox_items} disabled={contig_checkbox_items.length === 0} />
+                    </div>
+                    <ResultChart data={chartData} />
+                </>)}
+
+            </div>
+        </main>
+    )
+}

xspect/xspect-web/src/components/spinner.tsx

@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils"
+
+export interface ISVGProps extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+    className?: string;
+  }
+  
+  export const LoadingSpinner = ({
+    size = 24,
+    className,
+    ...props
+  }: ISVGProps) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        {...props}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn("animate-spin", className)}
+      >
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
+    );
+  };

xspect/xspect-web/src/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

xspect/xspect-web/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

xspect/xspect-web/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}