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 | 45x 45x 45x 45x 105x 14x 77x 45x 210x 77x 16x 47x 16x 45x 45x 45x 45x 45x 109x 16x 45x 45x 45x 45x 45x 109x 16x 45x 45x 45x 45x 93x 16x 45x 45x 45x 45x 93x 109x 77x 210x 210x 224x 210x 210x 210x 630x 840x 630x | import { ReactElement } from "react";
import { AccessControlledInput as Input } from "../../../../../ahuora-design-system/ui/accessControlled";
import {
CompoundPropertyKeyEnum,
CompoundPropertyRead,
useCoreCompoundPropertiesPartialUpdateMutation,
} from "../../../../../api/apiStore.gen";
import { useCustomCompound } from "./useCustomCompound";
export function CompoundViewer({ compoundId }: { compoundId: number }) {
const [compound] = useCustomCompound(compoundId);
const [updateProperty] = useCoreCompoundPropertiesPartialUpdateMutation();
const onValueBlur = (propertyId: number, value: string) => {
// actually send the update to the backend
const property = compound?.properties.find((p) => p.id === propertyId);
if (property) {
updateProperty({
id: propertyId,
patchedCompoundProperty: {
value: +value,
},
});
}
};
const propertyMap = compound?.properties.reduce(
(acc, prop) => {
acc[prop.compound_property_key] = (
<CompoundPropertyViewer
compoundProperty={prop}
onBlur={onValueBlur}
></CompoundPropertyViewer>
);
return acc;
},
{} as Record<CompoundPropertyKeyEnum, ReactElement>,
);
return (
<div>
<h2>{compound?.name}</h2>
<div className="grid grid-cols-2 gap-4">
<div>
<h3>Pressure Coefficients</h3>
{propertyMap?.[CompoundPropertyKeyEnum.PressureSatCompCoeffA]}
{propertyMap?.[CompoundPropertyKeyEnum.PressureSatCompCoeffB]}
{propertyMap?.[CompoundPropertyKeyEnum.PressureSatCompCoeffC]}
{propertyMap?.[CompoundPropertyKeyEnum.PressureSatCompCoeffD]}
</div>
<div>
<h3>Specific Heat Capacity Coefficients</h3>
{propertyMap?.[CompoundPropertyKeyEnum.CpMolIgCompCoeffA]}
{propertyMap?.[CompoundPropertyKeyEnum.CpMolIgCompCoeffB]}
{propertyMap?.[CompoundPropertyKeyEnum.CpMolIgCompCoeffC]}
{propertyMap?.[CompoundPropertyKeyEnum.CpMolIgCompCoeffD]}
</div>
<div>
<h3>Thermodynamic Properties</h3>
{propertyMap?.[CompoundPropertyKeyEnum.Mw]}
{propertyMap?.[CompoundPropertyKeyEnum.PressureCrit]}
{propertyMap?.[CompoundPropertyKeyEnum.TemperatureCrit]}
</div>
<div>
<h3>Reference & Other</h3>
{propertyMap?.[CompoundPropertyKeyEnum.EnthMolFormVapCompRef]}
{propertyMap?.[CompoundPropertyKeyEnum.EntrMolFormVapCompRef]}
{propertyMap?.[CompoundPropertyKeyEnum.Omega]}
</div>
</div>
</div>
);
}
export function CompoundPropertyViewer({
onBlur,
compoundProperty,
}: {
onBlur: (propertyId: number, value: string) => void;
compoundProperty?: CompoundPropertyRead;
}) {
if (!compoundProperty) {
return "No compound property found";
}
return (
<div>
<h4>{compoundProperty.compound_property_key}</h4>
<Input
type="text"
aria-label={`${compoundProperty.compound_property_key}`}
defaultValue={
compoundProperty.value != null ? compoundProperty.value : ""
}
onBlur={(e) => onBlur(compoundProperty.id, e.target.value)}
></Input>
</div>
);
}
|