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 117 118 119 120 121 122 123 124 125 | 5x 6x 5x 5x 5x 6x 5x 5x 5x 5x 13x 6x 1x 5x 5x 5x 13x 13x 13x 13x 13x 13x 13x 13x 29x 13x 6x 7x 5x 5x 6x 6x 5x | // File: src/pages/flowsheet-page/flowsheet/RightSideBar/components/PropertySelectionSummary.tsx
import { ColumnDef } from "@tanstack/react-table";
import { useMemo } from "react";
import { DataTable } from "@/ahuora-design-system/ui/data-table";
import { useFlowsheetObjectsIdMap } from "@/hooks/flowsheetObjects";
import { useSimulationObjectPropertySet } from "@/hooks/properties";
import { SelectedPropertyInfo } from "../ObjectDetailsPanel";
interface PropertySelectionSummaryProps {
selectedProperties: SelectedPropertyInfo[];
}
interface UnitProperty {
unitOpId: number;
unitOpName: string;
propertyNames: string;
}
function usePropertySets(unitOpIds: number[]) {
const propertySets = unitOpIds.map((id) => {
return useSimulationObjectPropertySet(id);
});
return useMemo(() => {
const map = new Map<
number,
ReturnType<typeof useSimulationObjectPropertySet>
>();
unitOpIds.forEach((id, index) => {
map.set(id, propertySets[index]);
});
return map;
}, [unitOpIds, propertySets]);
}
export function PropertySelectionSummary({
selectedProperties,
}: PropertySelectionSummaryProps) {
const flowsheetObjectIdMap = useFlowsheetObjectsIdMap();
// Get unique IDs first
const uniqueUnitOpIds = useMemo(
() =>
[
...new Set(
selectedProperties.map((prop) => prop.unitOpId ?? prop.unitOp),
),
]
.filter((id): id is number => id != null)
.sort((a, b) => a - b),
[selectedProperties],
);
// Use the custom hook instead of direct mapping
const propertySets = usePropertySets(uniqueUnitOpIds);
// Prepare data for the DataTable
const unitPropertyMap: Record<number, UnitProperty> = {};
selectedProperties.forEach((propertyInfo) => {
const unitOpId = propertyInfo.unitOpId ?? propertyInfo.unitOp;
const propertyId = propertyInfo.propertyId ?? propertyInfo.property;
Iif (unitOpId == null || propertyId == null) return;
const unitOp = flowsheetObjectIdMap.get(unitOpId);
const unitOpName = unitOp?.componentName || "Unknown Unit Op";
const propertySet = propertySets.get(unitOpId);
Iif (!propertySet) return;
const propertyDetails = propertySet.ContainedProperties?.find(
(prop) => prop.id === propertyId,
);
Iif (!propertyDetails) return;
if (!unitPropertyMap[unitOpId]) {
unitPropertyMap[unitOpId] = {
unitOpId,
unitOpName,
propertyNames: propertyDetails.displayName,
};
} else {
unitPropertyMap[unitOpId].propertyNames +=
`, ${propertyDetails.displayName}`;
}
});
const data = Object.values(unitPropertyMap);
// Define columns for the DataTable
const columns: ColumnDef<UnitProperty>[] = [
{
accessorKey: "unitOpName",
header: "Unit Name",
cell: (info) => info.getValue(),
},
{
accessorKey: "propertyNames",
header: "Properties",
cell: (info) => info.getValue(),
},
];
return (
<div className="lg:h-[55vh] md:h-[55vh] sm:h-[30vh] w-[50vw]">
{data.length > 0 ? (
<div className="h-full pb-2">
<DataTable
columns={columns}
data={data}
rowSelection={{}}
handleRowClick={() => {}}
withBorder={true}
/>
</div>
) : (
<div className="flex-1 flex items-center justify-center">
<p className="text-gray-400 italic">No properties selected</p>
</div>
)}
</div>
);
}
|