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 | 44x 44x 44x 44x 105x 14x 14x 44x 588x 588x 44x 588x 588x 14x | 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;
}) {
Iif (!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>
);
}
|