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 114 115 116 | 62x 43x 43x 43x 43x 39x 39x 39x 117x 129x 258x 86x 38x 134x 39x 43x 43x 43x 39x 2x 1x 39x | import { createColumnHelper } from "@tanstack/react-table";
import { useMemo, useState } from "react";
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 }) => {
if (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 = useMemo(() => {
return compoundGroupsEntries.map(([groupName, compounds]) =>
createColumns(compounds?.columns || [], true),
);
}, [compoundGroupsEntries]);
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>
);
}
|