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 | 33x 7x 7x 7x 10x 10x 10x 10x 10x 50x 50x 50x 40x 40x 10x 7x 7x 10x 7x 4x 10x | import { DataTable } from '@/ahuora-design-system/ui/data-table'
import { useUnitopsSimulationobjectsUnitopsSummaryRetrieveQuery } from '@/api/apiStore.gen'
import { useCurrentGroupId } from '@/hooks/flowsheetObjects'
import { createColumnHelper } from '@tanstack/react-table';
import { useMemo, useState } from 'react'
import UnitSelectionHeader from './UnitSelectionHeader';
import { useLocalStorage } from 'usehooks-ts';
import { ScrollArea, ScrollBar } from '@/ahuora-design-system/ui/scroll-area';
const columnHelper = createColumnHelper();
export default function UnitopsSummary() {
const group = useCurrentGroupId()
const [unitMap, setUnitMap] = useLocalStorage('unitMapUnitops', {})
const { data: simObjGroups } = useUnitopsSimulationobjectsUnitopsSummaryRetrieveQuery({
groups: JSON.stringify([group]),
unitMap: JSON.stringify(unitMap)
})
function createColumns(row, rounded = false, title = "") {
Iif (!row) return [];
const columns = [];
const units = row.units
const data = row.data
// first row is enough to get the column definitions
Object.keys(data[0]).forEach((key) => {
columns.push(columnHelper.accessor(key, {
header: ({ column }) => (
<UnitSelectionHeader name={key} tableName={title} units={units[key]} unitMap={unitMap} setUnitMap={setUnitMap} />
),
cell: ({ cell }) => {
if (key == "name") return `${cell.row.index + 1}. ${cell.getValue()}`;
Iif (rounded && typeof cell.getValue() === 'number') {
return cell.getValue().toFixed(3)
}
return cell.getValue() || "-";
},
}))
});
return columns;
}
const tableGroups = Object.entries(simObjGroups || {})
const columns = useMemo(() => tableGroups.map(([groupName, simObjs]) => {
return Object.values(simObjs).map(row => createColumns(row || [], true))
}), [tableGroups])
return (
<ScrollArea className='flex-1 h-full w-full'>
<div className='flex flex-col gap-4 p-4'>
{tableGroups.map(([groupName, simObjs], groupIndex) => (
<div key={groupName} className='flex flex-col gap-4'>
<h2 className='strong'>{groupName}</h2>
{Object.entries(simObjs).map(([objectType, values], index) => (
<div key={objectType}>
<DataTable title={objectType} columns={columns[groupIndex][index]} data={values.data} columnSelection />
</div>
))}
</div>
))}
</div>
<ScrollBar orientation="vertical" />
<ScrollBar orientation="horizontal" />
</ScrollArea>
)
} |