Add info icon and simplified descriptions for terms in Layers Inventory

mplemented an info icon feature in the Layers Inventory to enhance user experience and accessibility.

frontend/src/features/Train/features/Image/components/ImageParametersStep.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useGetColumnsFromDatasetQuery } from "@/features/Train/redux/trainspaceApi";
 import { useAppDispatch, useAppSelector } from "@/common/redux/hooks";
+import { styled } from "@mui/material/styles";
+import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
+import InfoIcon from "@mui/icons-material/Info";
+
 import {
   Autocomplete,
   Card,
@@ -53,6 +57,34 @@ import {
 import ClientOnlyPortal from "@/common/components/ClientOnlyPortal";
 import { updateImageTrainspaceData } from "../redux/imageActions";
 
+
+
+const HtmlTooltip = styled(
+  ({
+    className,
+    title,
+    children,
+    ...props
+  }: {
+    className?: string;
+    children: React.ReactElement;
+    title: React.ReactNode;
+  }) => (
+    <Tooltip title={title} {...props} classes={{ popper: className }}>
+      {children}
+    </Tooltip>
+  )
+)(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: "rgba(255, 255, 255, 0.95)",
+    color: "rgba(0, 0, 0, 0.87)",
+    maxWidth: 220,
+    fontSize: theme.typography.pxToRem(12),
+    border: "none",
+  },
+}));
+
+
 const ImageParametersStep = ({
     renderStepperButtons,
     setIsModified,
@@ -463,13 +495,24 @@ const ImageParametersStep = ({
             alignItems={"center"}
             spacing={3}
           >
+            <HtmlTooltip
+              title={
+                <React.Fragment>
+                  <Typography color="inherit">
+                    {STEP_SETTINGS.PARAMETERS.layers[data.value].label}
+                  </Typography>
+                  {STEP_SETTINGS.PARAMETERS.layers[data.value].description}
+                </React.Fragment>
+              }
+            >
+              <InfoIcon>Info</InfoIcon>
+            </HtmlTooltip>
+
+
             <Typography variant="h3" fontSize={18}>
               {STEP_SETTINGS.PARAMETERS.layers[data.value].label}
             </Typography>
-            <Stack direction={"row"} 
-              alignItems={"center"} 
-              spacing={3} 
-            >
+            <Stack direction={"row"} alignItems={"center"} spacing={3}>
               <Stack
                 direction={"row"}
                 alignItems={"center"}

frontend/src/features/Train/features/Image/constants/imageConstants.ts

@@ -82,6 +82,7 @@ export const STEP_SETTINGS = {
             type: "number",
           },
         ],
+        description: "The `CONV2d` function applies a filter to input data in a sliding window manner. By performing element-wise multiplication and sum of the overlapping portions, it captures local spatial patterns and features, enabling applications such as image recognition, object detection, and semantic segmentation in computer vision tasks.",
       },
       MAXPOOL2D: {
         label: "MaxPool2d",
@@ -102,6 +103,7 @@ export const STEP_SETTINGS = {
             type: "number",
           },
         ],
+        description: "MaxPool2d function reduces the size of input data by dividing it into non-overlapping rectangular regions and selecting the maximum value from each region. This downsampling operation preserves important features while decreasing spatial dimensions, making it beneficial for tasks like image classification and extracting spatial characteristics."
       },
       FLATTEN: {
         label: "Flatten",
@@ -122,6 +124,7 @@ export const STEP_SETTINGS = {
             type: "number",
           },
         ],
+        description: "The flatten operation takes a two-dimensional image representation and transforms it into a one-dimensional vector. This process unravels the image structure by concatenating the rows or columns of pixels, creating a linear sequence of values. By doing so, it allows the network to process the image as a simple list of numbers, facilitating tasks such as image classification or object detection in neural networks."
       },
       LINEAR: {
         label: "Linear",
@@ -142,11 +145,13 @@ export const STEP_SETTINGS = {
             type: "number",
           },
         ],
+        description: "A linear layer in an image dataset takes the flattened image representation and applies a learned linear transformation to map the input values to a new set of values, allowing the network to learn complex relationships for tasks like image classification or object recognition."
       },
       SIGMOID: {
         label: "Sigmoid",
         objectName: "nn.Sigmoid",
         parameters: [],
+        description: "The sigmoid function takes the input values, typically the output of a linear layer, and applies a mathematical function that compresses them into a range between 0 and 1. This transformation is useful for interpreting the output as probabilities, where values closer to 1 indicate higher confidence in the presence of a particular feature or class in the image."
       },
     },
     transformValues: ["GAUSSIAN_BLUR", "GRAYSCALE", "NORMALIZE", "RANDOM_HORIZONTAL_FLIP", "RANDOM_VERTICAL_FLIP", "RESIZE", "TO_TENSOR"],

frontend/src/features/Train/features/Tabular/components/TabularParametersStep.tsx

@@ -20,7 +20,13 @@ import {
   Switch,
   TextField,
   Typography,
+  TooltipProps,
+  TooltipClasses,
+  Button,
 } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
+import InfoIcon from "@mui/icons-material/Info";
 import {
   Control,
   Controller,
@@ -53,6 +59,31 @@ import {
 import ClientOnlyPortal from "@/common/components/ClientOnlyPortal";
 import { updateTabularTrainspaceData } from "../redux/tabularActions";
 
+const HtmlTooltip = styled(
+  ({
+    className,
+    title,
+    children,
+    ...props
+  }: {
+    className?: string;
+    children: React.ReactElement;
+    title: React.ReactNode;
+  }) => (
+    <Tooltip title={title} {...props} classes={{ popper: className }}>
+      {children}
+    </Tooltip>
+  )
+)(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: "rgba(255, 255, 255, 0.95)",
+    color: "rgba(0, 0, 0, 0.87)",
+    maxWidth: 220,
+    fontSize: theme.typography.pxToRem(12),
+    border: "none",
+  },
+}));
+
 const TabularParametersStep = ({
   renderStepperButtons,
   setIsModified,
@@ -77,7 +108,7 @@ const TabularParametersStep = ({
     handleSubmit,
     formState: { errors, isDirty },
     control,
-    watch
+    watch,
   } = useForm<ParameterData>({
     defaultValues: {
       targetCol:
@@ -141,7 +172,7 @@ const TabularParametersStep = ({
                 error={errors.targetCol ? true : false}
               />
             )}
-            options={data.filter(col => !features.includes(col))}
+            options={data.filter((col) => !features.includes(col))}
           />
         )}
       />
@@ -167,8 +198,7 @@ const TabularParametersStep = ({
                 error={errors.features ? true : false}
               />
             )}
-
-            options={data.filter(col => col!== targetCol)}
+            options={data.filter((col) => col !== targetCol)}
           />
         )}
       />
@@ -535,6 +565,19 @@ const LayerComponent = ({
           alignItems={"center"}
           spacing={3}
         >
+          <HtmlTooltip
+            title={
+              <React.Fragment>
+                <Typography color="inherit">
+                  {STEP_SETTINGS.PARAMETERS.layers[data.value].label}
+                </Typography>
+                {STEP_SETTINGS.PARAMETERS.layers[data.value].description}
+              </React.Fragment>
+            }
+          >
+            <InfoIcon>Info</InfoIcon>
+          </HtmlTooltip>
+
           <Typography variant="h3" fontSize={18}>
             {STEP_SETTINGS.PARAMETERS.layers[data.value].label}
           </Typography>

frontend/src/features/Train/features/Tabular/constants/tabularConstants.ts

@@ -1,3 +1,9 @@
+
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import TabularDatasetStep from "../components/TabularDatasetStep";
 import TabularParametersStep from "../components/TabularParametersStep";
 import TabularReviewStep from "../components/TabularReviewStep";
@@ -61,6 +67,7 @@ export const STEP_SETTINGS = {
       { label: "Adam Optimization", value: "Adam" },
     ],
     layerValues: ["LINEAR", "RELU", "TANH", "SOFTMAX", "SIGMOID", "LOGSOFTMAX"],
+
     layers: {
       LINEAR: {
         label: "Linear",
@@ -81,16 +88,19 @@ export const STEP_SETTINGS = {
             type: "number",
           },
         ],
+        description: "A linear layer performs a mathematical operation called linear transformation on a set of input values. It applies a combination of scaling and shifting to the input values, resulting in a new set of transformed values as output."
       },
       RELU: {
         label: "ReLU",
         objectName: "nn.ReLU",
         parameters: [],
+        description: "ReLU, short for Rectified Linear Unit, is an activation function that acts like a filter that selectively allows positive numbers to pass through unchanged, while converting negative numbers to zero."
       },
       TANH: {
         label: "Tanh",
         objectName: "nn.Tanh",
         parameters: [],
+        description: "The tanh function maps input numbers to a range between -1 and 1, emphasizing values close to zero while diminishing the impact of extremely large or small numbers, making it useful for capturing complex patterns in data."
       },
       SOFTMAX: {
         label: "Softmax",
@@ -104,11 +114,13 @@ export const STEP_SETTINGS = {
             type: "number",
           },
         ],
+        description: "The softmax function takes a set of numbers as input and converts them into a probability distribution, assigning higher probabilities to larger numbers and lower probabilities to smaller numbers, making it useful for multi-class classification tasks."
       },
       SIGMOID: {
         label: "Sigmoid",
         objectName: "nn.Sigmoid",
         parameters: [],
+        description: "The sigmoid function takes any input number and squeezes it to a range between 0 and 1, effectively converting it into a probability-like value, often used for binary classification tasks and as an activation function in neural networks."
       },
       LOGSOFTMAX: {
         label: "LogSoftmax",
@@ -122,6 +134,7 @@ export const STEP_SETTINGS = {
             type: "number",
           },
         ],
+        description: "The logsoftmax function converts a set of numbers into a probability distribution using the softmax function, and then applies a logarithm to the resulting probabilities. It is commonly used for multi-class classification tasks as an activation function and to calculate the logarithmic loss during neural network training."
       }
     },
   },