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 | 45x 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 { Input } from "../../../../../ahuora-design-system/ui/input";
import {
Compound,
CompoundPropertyKeyEnum,
CompoundPropertyRead,
useCoreCompoundPropertiesPartialUpdateMutation,
useCoreCustomCompoundsPartialUpdateMutation,
} from "../../../../../api/apiStore.gen";
import { useCustomCompound } from "./useCustomCompound";
export function CompoundViewer({ compoundId }: { compoundId: number }) {
const [compound, optimisticUpdate] = useCustomCompound(compoundId);
// Mutations: for the compound, or the compound properties
const [updateCompound] = useCoreCustomCompoundsPartialUpdateMutation(); // Use this to update e.g compound name.
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>
);
}
|