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 | 33x 14x 14x 14x 14x 11x 11x 11x 33x 42x 84x 56x 17x 39x 11x 14x 14x 14x 2x 1x 14x 11x | import { DataTable } from '@/ahuora-design-system/ui/data-table'
import { useUnitopsSimulationobjectsCompoundsSummaryRetrieveQuery } from '@/api/apiStore.gen'
import { useCurrentGroupId } from '@/hooks/flowsheetObjects'
import { createColumnHelper } from '@tanstack/react-table';
import { useMemo, useState } from 'react'
import { ToolTipCover } from '@/ahuora-design-system/ui/tooltip';
import { Button } from '@/ahuora-design-system/ui/button';
import { useLocalStorage } from 'usehooks-ts';
import { ScrollArea, ScrollBar } from '@/ahuora-design-system/ui/scroll-area';
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>
)
} |