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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 103x 13x 13x 13x 13x 13x 14x 25x 13x 4x 4x 12x 21x 42x 14x 15x 13x 4x 13x 5x 13x 31x 13x 2x 14x 13x 1x 14x 4x 3x 19x 13x 2x 17x 21x 5x 23x 29x 1x 26x 21x | import { createColumnHelper } from "@tanstack/react-table";
import { useLocalStorage } from "usehooks-ts";
import { Button } from "@/ahuora-design-system/ui/button";
import { DataTable } from "@/ahuora-design-system/ui/data-table";
import { ScrollArea, ScrollBar } from "@/ahuora-design-system/ui/scroll-area";
import { ToolTipCover } from "@/ahuora-design-system/ui/tooltip";
import { useUnitopsSimulationobjectsCompoundsSummaryRetrieveQuery } from "@/api/apiStore.gen";
import { useCurrentGroupId } from "@/hooks/flowsheetObjects";
const columnHelper = createColumnHelper();
export default function CompoundSummary() {
const group = useCurrentGroupId();
const [compoundMode, setCompoundMode] = useLocalStorage(
"compoundMode",
"Molar",
);
const [measureType, setMeasureType] = useLocalStorage(
"measureType",
"Fraction",
);
const { data: compoundsByGroups } =
useUnitopsSimulationobjectsCompoundsSummaryRetrieveQuery({
groups: JSON.stringify([group]),
compoundMode: compoundMode,
measureType: measureType,
});
function createColumns(columns, rounded = false) {
Iif (!columns || columns.length == 0) return [];
const columnDefs = [];
// first row is enough to get the column definitions
columns.forEach((key) => {
columnDefs.push(
columnHelper.accessor(key, {
header: ({ column }) => key,
cell: ({ cell }) => {
Iif (key == "name")
return `${cell.row.index + 1}. ${cell.getValue()}`;
if (rounded && typeof cell.getValue() === "number") {
return cell.getValue().toFixed(3);
}
return cell.getValue() || "-";
},
}),
);
});
return columnDefs;
}
const compoundGroupsEntries = Object.entries(compoundsByGroups || {});
const columns = compoundGroupsEntries.map(([groupName, compounds]) =>
createColumns(compounds?.columns || [], true),
);
function handleToggleCompoundMode() {
setCompoundMode((prev) => (prev === "Molar" ? "Mass" : "Molar"));
}
function handleToggleMeasureType() {
setMeasureType((prev) => (prev === "Fraction" ? "Flow" : "Fraction"));
}
return (
<ScrollArea className="flex-1 h-full w-full">
<div className="flex flex-col gap-4 p-4">
<div>
<ToolTipCover content="Compound basis. Toggle to change." asChild>
<div className="w-fit overflow-hidden flex border rounded">
<Button
variant="outline"
size="sm"
onClick={handleToggleCompoundMode}
className="border-none rounded-none"
aria-label="compound-mode-toggle"
>
{compoundMode}
</Button>
{/* For some reason i can't put <Separator orientation='vertical'/> here */}
<div className="border-l flex-1"></div>
<Button
variant="outline"
size="sm"
onClick={handleToggleMeasureType}
className="border-none rounded-none"
aria-label="measure-type-toggle"
>
{measureType}
</Button>
</div>
</ToolTipCover>
</div>
{compoundGroupsEntries?.map(([groupName, compounds], index) => (
<div key={groupName} className="flex flex-col gap-4">
<h2 className="strong">{groupName}</h2>
<DataTable
title="Compounds"
columns={columns[index]}
data={compounds?.data || []}
columnSelection
/>
</div>
))}
</div>
<ScrollBar orientation="vertical" />
<ScrollBar orientation="horizontal" />
</ScrollArea>
);
}
|