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 27x 27x 27x 52x 52x 52x 52x 52x 429x 495x 1050x 135x 915x 14x 901x 52x 27x 27x 27x 15x 52x 27x 15x 52x | 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 { useUnitopsSimulationobjectsStreamsSummaryRetrieveQuery } from "@/api/apiStore.gen";
import { useCurrentGroupId } from "@/hooks/flowsheetObjects";
import UnitSelectionHeader from "./UnitSelectionHeader";
const columnHelper = createColumnHelper();
export default function StreamsSummary() {
const group = useCurrentGroupId();
const [unitMap, setUnitMap] = useLocalStorage("unitMapStreams", {});
const { data: simObjGroups } =
useUnitopsSimulationobjectsStreamsSummaryRetrieveQuery({
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()}`;
if (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.entries(simObjs).map(([objectType, values]) =>
createColumns(values || [], true, objectType),
);
}),
[tableGroups],
);
return (
<ScrollArea className="flex-1 h-full w-full">
<div className="flex flex-col gap-4 p-4 w-full h-full">
{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>
);
}
|