All files / src/pages/flowsheet-page/dynamics ResultSheet.tsx

100% Statements 21/21
100% Branches 7/7
100% Functions 6/6
100% Lines 20/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82                      33x     700x 700x   700x   700x 700x 700x   700x   700x     1x 1x     14x 14x   14x   29x   560x   1x           14x     700x                                             6x                
import { createColumns } from "@/ahuora-design-system/ui/data-table";
import { ScenarioRead, useCoreSolvestateFullTableListQuery } from "@/api/apiStore.gen";
import { useSearchParam } from "@/hooks/searchParams";
import { createColumnHelper } from "@tanstack/react-table";
import { useMemo, useState } from "react";
import SpecificRow from "./SpecificRow";
import { PaginatedTable } from "@/ahuora-design-system/ui/paginated-table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/ahuora-design-system/ui/tabs";
import ScenarioGraphView from "./ScenarioGraphView";
import { useLocalStorage } from "usehooks-ts";
 
const columnHelper = createColumnHelper();
 
export default function ResultSheet({ scenario }: { scenario: ScenarioRead }) {
    const [solve_index, setSolveIndex] = useSearchParam("solve_index");
    const [tab, setTab] = useLocalStorage<string>("result-sheet-tab", "graph");
 
    const isLookingAtFullTable = !solve_index;
 
    const [page, setPage] = useState(1)
    const { data: fullTableData } = useCoreSolvestateFullTableListQuery({ scenario: scenario.id, page: page });
    const maxRow = fullTableData?.count - 1 || 0;
 
    const isDynamic = scenario.enable_dynamics;
 
    const fullInputTableColumns = useMemo(() => {
 
        function handleView(row) {
            const firstKey = Object.keys(row)[0];
            setSolveIndex(row[firstKey]);
        }
 
        const fullInputTable = fullTableData?.results || [];
        const columns = createColumns(fullInputTable)
 
        columns.push(
            columnHelper.accessor("Results", {
                header: () => "Full results",
                cell: ({ row }) => (
                    <p
                        className="cursor-pointer underline"
                        onClick={() => handleView(row.original)}
                    >View
                    </p>
                ),
            })
        )
        return columns;
    }, [fullTableData]);
 
    if (isLookingAtFullTable) return (
        <Tabs defaultValue="graph" className="flex flex-1 flex-col" value={tab} onValueChange={setTab}>
            <TabsList className="w-fit m-auto rounded my-4">
                <TabsTrigger value="graph">Graph view</TabsTrigger>
                <TabsTrigger value="table">Table view</TabsTrigger>
            </TabsList>
            <TabsContent value="table" className="overflow-auto">
                <PaginatedTable
                    columns={fullInputTableColumns}
                    data={fullTableData}
                    page={page}
                    setPage={setPage}
                    className="pt-0"
                    title={isDynamic ? "Dynamic results" : "Multi-steady-state results"}
                    ariaLabel="mss-results-table"
                />
            </TabsContent>
            <TabsContent value="graph" className="overflow-auto">
                <ScenarioGraphView scenario={scenario} />
            </TabsContent>
        </Tabs>
    )
 
    return (
        <SpecificRow
            maxRow={maxRow}
            scenario={scenario}
            solve_index={solve_index}
            setSolveIndex={setSolveIndex}
        />
    )
}