Added outdated values

src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.styles.tsx

@@ -32,6 +32,12 @@ const useStyles = makeStyles()((theme: Theme) => ({
   notEditableValue: {
     color: theme.main.grey,
   },
+  outdated: {
+    color: "red",
+    "&.Mui-checked": {
+      color: theme.main.red,
+    },
+  },
   divider: {
     marginTop: 8,
     marginBottom: 8,

src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.tsx

@@ -33,6 +33,18 @@ enum NodeTypeWithManualFailureRate {
   External = "External",
 }
 
+const getFailureRateIris = (supertypes) => {
+  const value = asArray(supertypes);
+  return value.reduce(
+    (acc, item) => {
+      if (item?.hasFailureRate?.prediction?.iri) acc.predictionIri = item.hasFailureRate.prediction.iri;
+      if (item?.hasFailureRate?.estimate?.iri) acc.operationalIri = item.hasFailureRate.estimate.iri;
+      return acc;
+    },
+    { predictionIri: "", operationalIri: "" },
+  );
+};
+
 const FaultEventMenu = ({ shapeToolData, onEventUpdated, refreshTree, rootIri }: Props) => {
   const { t } = useTranslation();
   const { classes } = useStyles();
@@ -179,14 +191,7 @@ const FaultEventMenu = ({ shapeToolData, onEventUpdated, refreshTree, rootIri }:
     if (shapeToolData?.selectedEstimate) {
       // SELECTED ESTIMATE => PREDICTED OR OPERATIONAL IS SELECTED
       const iriOfSelectedValue = shapeToolData.selectedEstimate.iri;
-      const { predictionIri, operationalIri } = supertypes.reduce(
-        (acc, item) => {
-          if (item?.hasFailureRate?.prediction?.iri) acc.predictionIri = item.hasFailureRate.prediction.iri;
-          if (item?.hasFailureRate?.estimate?.iri) acc.operationalIri = item.hasFailureRate.estimate.iri;
-          return acc;
-        },
-        { predictionIri: "", operationalIri: "" },
-      );
+      const { predictionIri, operationalIri } = getFailureRateIris(supertypes);
 
       if (iriOfSelectedValue === predictionIri) {
         setSelectedRadioButton(RadioButtonType.Predicted);
@@ -221,18 +226,31 @@ const FaultEventMenu = ({ shapeToolData, onEventUpdated, refreshTree, rootIri }:
   const basedFailureRate = shapeToolData?.supertypes?.supertypes?.hasFailureRate?.estimate?.value;
   const requiredFailureRate = shapeToolData?.supertypes?.hasFailureRate?.requirement?.upperBound;
 
-  const FailureRateBox = ({ value, label, rate, selected }) => (
+  const { predictionIri, operationalIri } = getFailureRateIris(shapeToolData?.supertypes?.supertypes);
+
+  const FailureRateBox = ({ value, label, rate, selected, outdated }) => (
     <Box display="flex" flexDirection="row" alignItems="center">
       <FormControlLabel
         value={value}
         control={<Radio style={{ color: theme.main.black }} />}
         label={`${label}:`}
         className={selected ? classes.selected : classes.notSelected}
       />
-      <Typography className={classes.notEditableValue}>{rate}</Typography>
+      <Typography className={outdated ? classes.outdated : classes.notEditableValue}>{rate}</Typography>
     </Box>
   );
 
+  const renderFailureRateBox = (rateType, rateValue, iri, selectedRadioButton, labelKey) => {
+    const rate =
+      shapeToolData.probability !== rateValue && shapeToolData?.selectedEstimate?.iri === iri
+        ? shapeToolData.probability
+        : rateValue;
+    const selected = selectedRadioButton === rateType;
+    const outdated = selected && shapeToolData.probability !== rateValue;
+
+    return <FailureRateBox value={rateType} label={t(labelKey)} rate={rate} selected={selected} outdated={outdated} />;
+  };
+
   return (
     <Box paddingLeft={2} marginRight={2}>
       {shapeToolData && shapeToolData.iri !== rootIri && (
@@ -320,22 +338,23 @@ const FaultEventMenu = ({ shapeToolData, onEventUpdated, refreshTree, rootIri }:
           <Box className={classes.labelRow}>
             <FormControl>
               <RadioGroup value={selectedRadioButton} onChange={handleSnsBasicSelectedFailureRateChange}>
-                {snsPredictedFailureRate && (
-                  <FailureRateBox
-                    value={RadioButtonType.Predicted}
-                    label={t("faultEventMenu.predictedFailureRate")}
-                    rate={snsPredictedFailureRate}
-                    selected={selectedRadioButton === RadioButtonType.Predicted}
-                  />
-                )}
-                {snsOperationalFailureRate && (
-                  <FailureRateBox
-                    value={RadioButtonType.Operational}
-                    label={t("faultEventMenu.operationalFailureRate")}
-                    rate={snsOperationalFailureRate}
-                    selected={selectedRadioButton === RadioButtonType.Operational}
-                  />
-                )}
+                {snsPredictedFailureRate &&
+                  renderFailureRateBox(
+                    RadioButtonType.Predicted,
+                    snsPredictedFailureRate,
+                    predictionIri,
+                    selectedRadioButton,
+                    "faultEventMenu.predictedFailureRate",
+                  )}
+
+                {snsOperationalFailureRate &&
+                  renderFailureRateBox(
+                    RadioButtonType.Operational,
+                    snsOperationalFailureRate,
+                    operationalIri,
+                    selectedRadioButton,
+                    "faultEventMenu.operationalFailureRate",
+                  )}
                 <Box display={"flex"} flexDirection={"row"} alignItems="center">
                   <FormControlLabel
                     value={RadioButtonType.Manual}

src/styles/App.styles.declarations.tsx

@@ -38,6 +38,7 @@ declare module "@mui/material/styles" {
     main?: {
       black: string;
       grey: string;
+      red: string;
       notSynchronized?: {
         color: COLOR;
       };

src/styles/App.styles.tsx

@@ -37,6 +37,7 @@ export const appTheme = createCustomMuiTheme({
   main: {
     black: "#000000",
     grey: "#808080",
+    red: "#FF0000",
   },
   notSynchronized: {
     color: "red",