feat(MCDA): 19437 New reverse sentiments button for MCDA layer. Small UI tweaks

src/core/localization/translations/en/common.json

@@ -113,7 +113,8 @@
       "save_changes": "Save changes",
       "range": "Value range",
       "outliers": "Outliers",
-      "sentiment": "Sentiment",
+      "reverse_to_good_bad": "Reverse to Good \u2192 Bad",
+      "reverse_to_bad_good": "Reverse to Bad \u2192 Good",
       "weight": "Weight",
       "transform": "Transform",
       "transformation": "Transformation",
@@ -149,7 +150,6 @@
       },
       "tips": {
         "range": "The values that will be considered the worst and the best in your analysis.",
-        "sentiment": "Determine the direction of sentiment for the layer's impact on the analysis:\n* **Bad → Good**: Higher values indicate a positive sentiment.\n* **Good → Bad**: Higher values indicate a negative sentiment.",
         "weight": "By default, all layers contribute equally to the analysis through a weighted average. Adjusting the increased weight of a layer (2, 3, etc.) allows you to assign additional importance to it in the analysis.",
         "transform": "Apply calculations to the values. Achieving a more linear distribution will provide more useful information for analysis.\n\n **Note**: Calculations are done before normalization.",
         "normalize": "Adjusts values to a standardized scale. This helps compare them easily and make decisions.\n* **Standard score scaling**: This option adjusts values to a standardized scale, ensuring they are all comparable.\n* **No (for specialists only)**: Leaves values unmodified.",

src/features/mcda/components/MCDALayerEditor/MCDALayerParameters/MCDALayerParameters.module.css

@@ -16,9 +16,11 @@
 
 .layerEditContainer {
   width: 100%;
-  margin-top: 12px;
-  padding: var(--half-unit) var(--unit) var(--unit);
+  margin-top: var(--unit);
+  padding: calc(3 * var(--half-unit)) var(--double-unit) var(--unit);
   font-size: 12px;
+  border: 1px var(--faint-strong) solid;
+  border-radius: 10px;
 }
 
 .layer:hover {
@@ -110,3 +112,7 @@
   display: flex;
   flex-direction: row;
 }
+
+.reverseButton {
+  margin: var(--half-unit) 0;
+}

src/features/mcda/components/MCDALayerEditor/MCDALayerParameters/MCDALayerParameters.tsx

@@ -217,7 +217,28 @@ export function MCDALayerParameters({ layer, onLayerEdited }: MCDALayerLegendPro
     setEditMode(false);
   }, []);
 
+  const onReverseSentiment = useCallback(() => {
+    const newSentiment = (
+      sentiment === sentimentsOptions[0].value
+        ? sentimentsOptions[1].value
+        : sentimentsOptions[0].value
+    ) as string;
+
+    const updatedLayer: MCDALayer = {
+      ...layer,
+      sentiment: SENTIMENT_VALUES[newSentiment],
+    };
+    if (editMode) {
+      onCancel();
+    }
+    onLayerEdited(updatedLayer);
+  }, [editMode, layer, onCancel, onLayerEdited, sentiment]);
+
   const editLayer = useCallback(async () => {
+    if (editMode) {
+      onCancel();
+      return;
+    }
     setEditMode(true);
     setIsLoading(true);
     try {
@@ -233,43 +254,53 @@ export function MCDALayerParameters({ layer, onLayerEdited }: MCDALayerLegendPro
     } finally {
       setIsLoading(false);
     }
-  }, [layer.indicators]);
+  }, [editMode, layer.indicators, onCancel]);
 
   return (
     <div>
       <div key={layer.id} className={s.layer}>
         <div className={s.layerHeader}>
           <div>{layer.name}</div>
           <div className={s.layerButtons}>
-            {!editMode && (
-              <LayerActionIcon
-                onClick={editLayer}
-                hint={i18n.t('layer_actions.tooltips.edit')}
-                className={s.editButton}
-              >
-                <Prefs16 />
-              </LayerActionIcon>
-            )}
+            <LayerActionIcon
+              onClick={editLayer}
+              hint={i18n.t('layer_actions.tooltips.edit')}
+              className={s.editButton}
+            >
+              <Prefs16 />
+            </LayerActionIcon>
             <LayerInfo
               className={s.infoButton}
               layersInfo={mcdaLayerHint}
               tooltipId={LAYERS_PANEL_FEATURE_ID}
             />
           </div>
         </div>
+        <div>
+          <Sentiments
+            left={sentiments.left}
+            right={sentiments.right}
+            units={layer.unit}
+          />
+          <div>
+            <Button
+              className={s.reverseButton}
+              variant="invert-outline"
+              size="tiny"
+              onClick={onReverseSentiment}
+            >
+              {sentiment === sentimentsOptions[0].value
+                ? i18n.t('mcda.layer_editor.reverse_to_good_bad')
+                : i18n.t('mcda.layer_editor.reverse_to_bad_good')}
+            </Button>
+          </div>
+        </div>
         {!editMode ? (
           // Static mode
-          <div>
-            <Sentiments
-              left={sentiments.left}
-              right={sentiments.right}
-              units={layer.unit}
-            />
-            <div className={s.nonDefaultValues}>
-              {nonDefaultValues.map((v, index) => (
-                <div key={`nonDefault${index}`}>{`${v.paramName}: ${v.value}`}</div>
-              ))}
-            </div>
+          <div className={s.nonDefaultValues}>
+            {nonDefaultValues.map((v, index) => (
+              <div key={`nonDefault${index}`}>{`${v.paramName}: ${v.value}`}</div>
+            ))}
           </div>
         ) : (
           // Edit mode
@@ -309,23 +340,6 @@ export function MCDALayerParameters({ layer, onLayerEdited }: MCDALayerLegendPro
                 items={outliersOptions}
               />
             </MCDALayerParameterRow>
-            {/* SENTIMENT */}
-            <MCDALayerParameterRow
-              name={i18n.t('mcda.layer_editor.sentiment')}
-              infoText={i18n.t('mcda.layer_editor.tips.sentiment')}
-            >
-              <Select
-                className={s.selectInput}
-                classes={{
-                  menu: s.selectInputBox,
-                }}
-                value={sentiment}
-                onChange={(e) => {
-                  setSentiment(e.selectedItem?.value as string);
-                }}
-                items={sentimentsOptions}
-              />
-            </MCDALayerParameterRow>
             {/* WEIGHT */}
             <MCDALayerParameterRow
               name={i18n.t('mcda.layer_editor.weight')}

src/features/mcda/components/MCDALayerEditor/style.module.css

@@ -1,4 +1,7 @@
 .editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--unit);
   margin-bottom: var(--unit);
   margin-right: calc(-1 * var(--half-unit));
 }