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 | 59x 59x 59x 42x 17x 17x 17x 17x 17x 17x 17x 17x 17x 18x 18x 18x 18x 15x 18x 15x | import { Separator } from "@/ahuora-design-system/ui/separator";
import {
useFlowsheetObjectsIdMap,
useSelectedGroup
} from "@/hooks/flowsheetObjects";
import { useSimulationObjectPropertySet } from "@/hooks/properties";
import { Property } from "./PropertyPanel/Properties";
export function GroupPropertyListDisplay() {
const grouping = useSelectedGroup();
const flowsheetObjectIdMap = useFlowsheetObjectsIdMap();
if (!grouping?.propertyInfoRelations?.length) {
return (
<p>
Select module properties. These properties allow you to observe specific
unit operation properties.
</p>
);
}
const groupedProperties = grouping.propertyInfoRelations.reduce(
(acc, [propertyInfoId, unitOpId]) => {
if (!acc[unitOpId]) {
acc[unitOpId] = [];
}
acc[unitOpId].push(propertyInfoId);
return acc;
},
{},
);
return (
<>
{Object.entries(groupedProperties).map(([unitOpId, propertyInfoIds]) => {
const unitOp = flowsheetObjectIdMap.get(Number(unitOpId));
return (
<div
key={unitOpId}
style={{
"--name-percentage": `${(unitOp.componentName.length /
(unitOp.componentName.length >= 16 ? 35 : 22)) *
70
}%`,
}}
className="flex flex-col mb-5 gap-1"
>
<div className="flex items-center gap-2">
<Separator
className="grow w-[--name-percentage]"
orientation="horizontal"
/>
<p className="text-xs text-muted-foreground font-light truncate">
{unitOp?.componentName}
</p>
</div>
<div className="flex flex-col gap-1">
{propertyInfoIds.map((propertyInfoId, index) => {
return (
<GroupPropertyListItem
key={propertyInfoId}
propertyInfoId={propertyInfoId}
unitOpId={Number(unitOpId)}
/>
);
})}
</div>
</div>
);
})}
</>
);
}
function GroupPropertyListItem({
propertyInfoId,
unitOpId,
}: {
propertyInfoId: number;
unitOpId: number;
}) {
const flowsheetObjectIdMap = useFlowsheetObjectsIdMap();
const unitOp = flowsheetObjectIdMap.get(unitOpId);
const propertySet = useSimulationObjectPropertySet(unitOpId);
const propertyInfo = propertySet?.ContainedProperties.find(
(prop) => prop.id === propertyInfoId,
);
if (!propertyInfo || !unitOp) return null;
return (
<>
<Property property={propertyInfo} />
</>
);
} |