feat(18117): Add info popups for MCDA layer parameters

src/components/BivariateLegend/CornerTooltipWrapper.tsx

@@ -1,6 +1,6 @@
 import { cloneElement, isValidElement } from 'react';
 import clsx from 'clsx';
-import { TooltipWrapper } from '~components/TooltipTrigger';
+import { PopupTooltipWrapper } from '~components/PopupTooltipTrigger';
 import { formatSentimentDirection } from '~utils/bivariate';
 import { LOW, HIGH, isBottomSide, isLeftSide, CORNER_POINTS_INDEXES } from './const';
 import s from './CornerTooltipWrapper.module.css';
@@ -31,15 +31,15 @@ const CornerTooltipWrapper = ({ children, hints }: CornerTooltipWrapperProps) =>
   };
 
   return isValidElement(children) ? (
-    <TooltipWrapper renderTooltip={renderTooltip}>
+    <PopupTooltipWrapper renderTooltip={renderTooltip}>
       {({ showTooltip, hideTooltip }) =>
         cloneElement(children, {
           // @ts-expect-error - react version update should fix that
           onCellPointerOver: showTooltip,
           onCellPointerLeave: hideTooltip,
         })
       }
-    </TooltipWrapper>
+    </PopupTooltipWrapper>
   ) : null;
 };
 

src/components/LabelWithTooltip/LabelWithTooltip.tsx

@@ -1,4 +1,4 @@
-import { TooltipTrigger } from '~components/TooltipTrigger';
+import { PopupTooltipTrigger } from '~components/PopupTooltipTrigger';
 import { Label } from '~components/Label/Label';
 
 interface LabelWithTooltipProps {
@@ -14,6 +14,6 @@ export const LabelWithTooltip = ({
 }: LabelWithTooltipProps) => (
   <Label className={className}>
     {text}
-    <TooltipTrigger tipText={description} showedOnHover={true} />
+    <PopupTooltipTrigger tipText={description} showedOnHover={true} />
   </Label>
 );

src/components/LayerInfo/LayerInfo.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { TooltipTrigger } from '~components/TooltipTrigger';
+import { PopupTooltipTrigger } from '~components/PopupTooltipTrigger';
 
 export type LayerInfo = {
   name?: string;
@@ -36,7 +36,7 @@ export const LayerInfo = React.memo(
 
     if (infoString) {
       return (
-        <TooltipTrigger
+        <PopupTooltipTrigger
           tipText={infoString}
           tooltipId={tooltipId}
           className={className}

src/components/TooltipTrigger/TooltipTrigger.tsx → src/components/PopupTooltipTrigger/PopupTooltipTrigger.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { useAction } from '@reatom/react-v2';
 import { InfoOutline16 } from '@konturio/default-icons';
 import { currentTooltipAtom } from '~core/shared_state/currentTooltip';
-import s from './TooltipTrigger.module.css';
+import s from './PopupTooltipTrigger.module.css';
 
 interface TooltipProps {
   tipText: string;
@@ -12,7 +12,7 @@ interface TooltipProps {
   icon?: JSX.Element;
 }
 
-export const TooltipTrigger = ({
+export const PopupTooltipTrigger = ({
   icon = <InfoOutline16 />,
   tipText,
   className,

src/components/TooltipTrigger/TooltipWrapper.tsx → src/components/PopupTooltipTrigger/PopupTooltipWrapper.tsx

@@ -26,7 +26,7 @@ interface TooltipWrapperProps {
   popupClasses?: { popupContent?: string };
 }
 
-const TooltipWrapper = memo(
+const PopupTooltipWrapper = memo(
   ({
     children,
     tooltipText,
@@ -72,6 +72,6 @@ const TooltipWrapper = memo(
   },
 );
 
-TooltipWrapper.displayName = 'TooltipWrapper';
+PopupTooltipWrapper.displayName = 'PopupTooltipWrapper';
 
-export { TooltipWrapper };
+export { PopupTooltipWrapper };

src/components/PopupTooltipTrigger/index.ts

@@ -0,0 +1,2 @@
+export { PopupTooltipTrigger } from './PopupTooltipTrigger';
+export { PopupTooltipWrapper } from './PopupTooltipWrapper';

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

@@ -128,6 +128,14 @@
         "range_from_cannot_be_bigger": "The ‘from’ value cannot be bigger than the ‘to’ value",
         "range_cannot_be_empty": "Range cannot be empty",
         "range_must_be_a_number": "Range must be a valid number"
+      },
+      "tips": {
+        "range": "Define the minimum and maximum values considered for analysis. For example, if analysing temperature data, set the range from the lowest to the highest temperatures recorded in the dataset.",
+        "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 additional calculations to the layer to linearize distribution. Calculates before normalization:\n * **No**: No additional transformation is applied.\n* **Natural logarithm**: Apply the natural logarithm function to the values.\n* **Square root**: Apply the square root function to the values.\n* **Cube root**: Apply the cube root function to the values.\n\nBy default, transformation with the least skew is selected.",
+        "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.",
+        "outliers": "* **As values on limits**: Keep 0 and 1 for min and max, but allow outlier scores beyond this range.\n* **Exclude**: Exclude areas where values are out of range."
       }
     },
     "bad": "Bad",

src/features/bivariate_manager/components/BivariateMatrixControl/components/AxisCaptions/AxisCaptions.tsx

@@ -1,7 +1,7 @@
 import { InfoOutline16 } from '@konturio/default-icons';
 import { useLayoutEffect, useRef } from 'react';
 import { i18n } from '~core/localization';
-import { TooltipWrapper } from '~components/TooltipTrigger';
+import { PopupTooltipWrapper } from '~components/PopupTooltipTrigger';
 import s from './AxisCaptions.module.css';
 
 const AXIS_CAPTIONS_TOOTIP_TEXT = (
@@ -30,7 +30,7 @@ export const AxisCaptions = ({ baseDimension = 0 }: { baseDimension: number }) =
   return (
     <div className={s.axisCaptionRoot} ref={rootRef}>
       <div className={s.axisCaptionAnchor} style={{ left: -baseDimension }}>
-        <TooltipWrapper
+        <PopupTooltipWrapper
           hoverBehavior={false}
           tooltipId="axis_caption"
           tooltipText={AXIS_CAPTIONS_TOOTIP_TEXT}
@@ -51,7 +51,7 @@ export const AxisCaptions = ({ baseDimension = 0 }: { baseDimension: number }) =
               <LongArrow position="right" />
             </div>
           )}
-        </TooltipWrapper>
+        </PopupTooltipWrapper>
       </div>
     </div>
   );

src/features/bivariate_manager/components/BivariateMatrixControl/components/DenominatorIcon/DenominatorIcon.tsx

@@ -1,5 +1,5 @@
 import { i18n } from '~core/localization';
-import { TooltipWrapper } from '~components/TooltipTrigger';
+import { PopupTooltipWrapper } from '~components/PopupTooltipTrigger';
 import styles from './DenominatorIcon.module.css';
 
 interface DenominatorIconProps {
@@ -140,7 +140,7 @@ const DenominatorIcon = ({ iconId }: DenominatorIconProps) => {
   const tooltipText = tooltipTextMapper[iconId] || i18n.t('bivariate.matrix.icon.roads');
 
   return (
-    <TooltipWrapper tooltipText={tooltipText}>
+    <PopupTooltipWrapper tooltipText={tooltipText}>
       {({ showTooltip, hideTooltip }) => (
         <span
           className={styles.denominatorIcon}
@@ -150,7 +150,7 @@ const DenominatorIcon = ({ iconId }: DenominatorIconProps) => {
           {icon}
         </span>
       )}
-    </TooltipWrapper>
+    </PopupTooltipWrapper>
   );
 };
 

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

@@ -1,28 +1,27 @@
-import { TooltipTrigger } from '~components/TooltipTrigger';
+import { PopupTooltipTrigger } from '~components/PopupTooltipTrigger';
 import { LAYERS_PANEL_FEATURE_ID } from '~features/layers_panel/constants';
 import s from './MCDALayerParameterRow.module.css';
 
 export type MCDALayerParameterRowProps = {
   name: string;
-  tipText: string;
+  infoText: string;
   children?: JSX.Element | JSX.Element[];
 };
 
 export function MCDALayerParameterRow({
   name,
-  tipText,
+  infoText,
   children,
 }: MCDALayerParameterRowProps) {
   return (
     <div className={s.inputLine}>
       <span className={s.inputLinelabel}>
         {name}
-        {/* TODO: hidden temporarily until we add content for these popups */}
-        {/* <TooltipTrigger
+        <PopupTooltipTrigger
           className={s.infoButton}
-          tipText={tipText}
+          tipText={infoText}
           tooltipId={LAYERS_PANEL_FEATURE_ID}
-        /> */}
+        />
       </span>
       <div className={s.inputContainer}>{children}</div>
     </div>

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

@@ -269,7 +269,10 @@ export function MCDALayerParameters({ layer, onLayerEdited }: MCDALayerLegendPro
           // Edit mode
           <div className={s.layerEditContainer}>
             {/* RANGE */}
-            <MCDALayerParameterRow name={i18n.t('mcda.layer_editor.range')} tipText="">
+            <MCDALayerParameterRow
+              name={i18n.t('mcda.layer_editor.range')}
+              infoText={i18n.t('mcda.layer_editor.tips.range')}
+            >
               <div className={s.rangeInputContainer}>
                 <Input
                   className={s.rangeInputRoot}
@@ -312,7 +315,10 @@ export function MCDALayerParameters({ layer, onLayerEdited }: MCDALayerLegendPro
               </div>
             </MCDALayerParameterRow>
             {/* OUTLIERS */}
-            <MCDALayerParameterRow name={i18n.t('mcda.layer_editor.outliers')} tipText="">
+            <MCDALayerParameterRow
+              name={i18n.t('mcda.layer_editor.outliers')}
+              infoText={i18n.t('mcda.layer_editor.tips.outliers')}
+            >
               <Select
                 className={s.selectInput}
                 classes={{
@@ -328,7 +334,7 @@ export function MCDALayerParameters({ layer, onLayerEdited }: MCDALayerLegendPro
             {/* SENTIMENT */}
             <MCDALayerParameterRow
               name={i18n.t('mcda.layer_editor.sentiment')}
-              tipText=""
+              infoText={i18n.t('mcda.layer_editor.tips.sentiment')}
             >
               <Select
                 className={s.selectInput}
@@ -343,7 +349,10 @@ export function MCDALayerParameters({ layer, onLayerEdited }: MCDALayerLegendPro
               />
             </MCDALayerParameterRow>
             {/* WEIGHT */}
-            <MCDALayerParameterRow name={i18n.t('mcda.layer_editor.weight')} tipText="">
+            <MCDALayerParameterRow
+              name={i18n.t('mcda.layer_editor.weight')}
+              infoText={i18n.t('mcda.layer_editor.tips.weight')}
+            >
               <Input
                 classes={{
                   inputBox: s.textInputBox,
@@ -367,7 +376,7 @@ export function MCDALayerParameters({ layer, onLayerEdited }: MCDALayerLegendPro
             {/* TRANSFORM */}
             <MCDALayerParameterRow
               name={i18n.t('mcda.layer_editor.transform')}
-              tipText=""
+              infoText={i18n.t('mcda.layer_editor.tips.transform')}
             >
               <Select
                 className={s.selectInput}
@@ -384,7 +393,7 @@ export function MCDALayerParameters({ layer, onLayerEdited }: MCDALayerLegendPro
             {/* NORMALIZE */}
             <MCDALayerParameterRow
               name={i18n.t('mcda.layer_editor.normalize')}
-              tipText=""
+              infoText={i18n.t('mcda.layer_editor.tips.normalize')}
             >
               <Select
                 className={s.selectInput}