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 | 49x 9x 9x 9x 11x 11x 11x 11x 11x 55x 55x 55x 11x 44x 44x 11x 9x 9x 9x 5x 11x 9x 5x 11x | import { createColumnHelper } from "@tanstack/react-table";
import { useMemo, useState } from "react";
import { useLocalStorage } from "usehooks-ts";
import { DataTable } from "@/ahuora-design-system/ui/data-table";
import { ScrollArea, ScrollBar } from "@/ahuora-design-system/ui/scroll-area";
import { useUnitopsSimulationobjectsUnitopsSummaryRetrieveQuery } from "@/api/apiStore.gen";
import { useCurrentGroupId } from "@/hooks/flowsheetObjects";
import UnitSelectionHeader from "./UnitSelectionHeader";
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>
);
}
|