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 126 127 128 129 130 131 132 133 134 135 136 137 138 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 4x 4x 3x | // File: src/pages/flowsheet-page/flowsheet/RightSideBar/components/PropertySelectionSummary.tsx
import { Button } from "@/ahuora-design-system/ui/button";
import { useFlowsheetObjectsIdMap } from "@/hooks/flowsheetObjects";
import { useSimulationObjectPropertySet } from "@/hooks/properties";
import { SelectedPropertyInfo } from "../ObjectDetailsPanel";
import { DataTable } from "@/ahuora-design-system/ui/data-table";
import { ColumnDef } from "@tanstack/react-table";
import { useMemo } from "react";
interface PropertySelectionSummaryProps {
selectedProperties: SelectedPropertyInfo[];
onSave: () => void;
onCancel: () => void;
}
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,
onSave,
onCancel,
}: PropertySelectionSummaryProps) {
const flowsheetObjectIdMap = useFlowsheetObjectsIdMap();
// Get unique IDs first
const uniqueUnitOpIds = useMemo(
() => [...new Set(selectedProperties.map((prop) => prop.unitOpId))].sort(),
[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 unitOp = flowsheetObjectIdMap.get(propertyInfo.unitOpId);
const unitOpName = unitOp?.componentName || "Unknown Unit Op";
const propertySet = propertySets.get(propertyInfo.unitOpId);
Iif (!propertySet) return;
const propertyDetails = propertySet.ContainedProperties?.find(
(prop) => prop.id === propertyInfo.propertyId,
);
Iif (!propertyDetails) return;
if (!unitPropertyMap[propertyInfo.unitOpId]) {
unitPropertyMap[propertyInfo.unitOpId] = {
unitOpId: propertyInfo.unitOpId,
unitOpName,
propertyNames: propertyDetails.displayName,
};
} else E{
unitPropertyMap[propertyInfo.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=" h-[65vh] md:h-[55vh] sm:h-[30vh] w-[50vw] ">
{/* Content */}
<div className="space-y-4">
{/* DataTable */}
{data.length > 0 ? (
<div className="h-[60vh] md:h-[50vh] sm:h-[25vh]">
<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>
{/* Footer */}
<div className="flex justify-between pt-4 align-bottom">
<Button variant="secondary" onClick={onCancel}>
Back to Property Selection
</Button>
<Button
variant={"default"}
onClick={onSave}
disabled={selectedProperties.length === 0}
>
Save
</Button>
</div>
</div>
);
}
|