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 | 76x 15x 15x 15x 15x 15x 16x 27x 15x 5x 5x 15x 27x 54x 18x 15x 21x 5x 15x 6x 15x 36x 15x 2x 16x 15x 1x 16x 4x 3x 21x 15x 2x 19x 23x 6x 27x 33x 1x 30x 24x | 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>
);
}
|