From b73417e758869240f16bc18b5f9a461bf5bd0344 Mon Sep 17 00:00:00 2001
From: Kiryl Koniukh <49252228+Kasmadei@users.noreply.github.com>
Date: Wed, 26 Jun 2024 12:23:30 +0200
Subject: [PATCH] [#379] Added outdated values

---
 .../menu/faultEvent/FaultEventMenu.styles.tsx |  6 ++
 .../menu/faultEvent/FaultEventMenu.tsx        | 71 ++++++++++++-------
 src/styles/App.styles.declarations.tsx        |  1 +
 src/styles/App.styles.tsx                     |  1 +
 4 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.styles.tsx b/src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.styles.tsx
index aaa59eeb..318ca5ab 100644
--- a/src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.styles.tsx
+++ b/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,
diff --git a/src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.tsx b/src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.tsx
index 262ef963..7dfef663 100644
--- a/src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.tsx
+++ b/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,7 +226,9 @@ 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}
@@ -229,10 +236,21 @@ const FaultEventMenu = ({ shapeToolData, onEventUpdated, refreshTree, rootIri }:
         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}
diff --git a/src/styles/App.styles.declarations.tsx b/src/styles/App.styles.declarations.tsx
index 7e390c73..5527e646 100644
--- a/src/styles/App.styles.declarations.tsx
+++ b/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;
       };
diff --git a/src/styles/App.styles.tsx b/src/styles/App.styles.tsx
index 16c35650..00e3dae4 100644
--- a/src/styles/App.styles.tsx
+++ b/src/styles/App.styles.tsx
@@ -37,6 +37,7 @@ export const appTheme = createCustomMuiTheme({
   main: {
     black: "#000000",
     grey: "#808080",
+    red: "#FF0000",
   },
   notSynchronized: {
     color: "red",