[Cherry-Pick-Main][UI] UI V2024.3.0 prerelease bug-fix (#49)

Author: mkaliberda

src/ui/src/components/CaptureImportForm/CaptureImportForm.jsx

@@ -103,9 +103,11 @@ const PipelineImportForm = ({
     let captureConfigurationFormData = getCaptureConfigurationFormData();
     if (_.isEmpty(metadataFormData) && _.isEmpty(captureConfigurationFormData?.options)) {
       await createDefaultMetadata(projectUUID);
+
+      metadataFormData = getCaptureMetadataFormData();
+      captureConfigurationFormData = getCaptureConfigurationFormData();
     }
-    metadataFormData = getCaptureMetadataFormData();
-    captureConfigurationFormData = getCaptureConfigurationFormData();
+
     setCaptureMetadataFormData(metadataFormData);
     setCaptureConfigurationFromData(captureConfigurationFormData);
     setActiveStep(STEP_FORM);

src/ui/src/components/ControlPanel/ControlPanel.jsx

@@ -18,10 +18,12 @@ License along with SensiML Piccolo AI. If not, see <https://www.gnu.org/licenses
 */
 
 import React from "react";
-import { Box, Grid, Typography } from "@mui/material";
+import { Box, Grid, IconButton, Typography } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import makeStyles from "@mui/styles/makeStyles";
 
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+
 import { filterTruncateMiddle } from "filters";
 import { UIControlPanel } from "components/UIPanels";
 import { IconButtonRounded } from "components/UIButtons";
@@ -51,7 +53,14 @@ const useStyles = () =>
     },
   }))();
 
-const ControlPanel = ({ title, subtitle, onClickBack, actionsBtns, turncateLenght = 0 }) => {
+const ControlPanel = ({
+  title,
+  subtitle,
+  onClickBack,
+  onShowInformation,
+  actionsBtns,
+  turncateLenght = 0,
+}) => {
   const classes = useStyles();
 
   return (
@@ -70,6 +79,11 @@ const ControlPanel = ({ title, subtitle, onClickBack, actionsBtns, turncateLengh
           ) : null}
           <Typography variant={"h2"} classes={{ root: classes.titleRoot }}>
             {title && filterTruncateMiddle(title, turncateLenght)}
+            {onShowInformation ? (
+              <IconButton onClick={onShowInformation}>
+                <InfoOutlinedIcon color="primary" />
+              </IconButton>
+            ) : null}
           </Typography>
           <Box alignItems="center" ml={2}>
             {subtitle}

src/ui/src/components/ControlPanel/ControlPanelStyles.js

@@ -21,6 +21,10 @@ import makeStyles from "@mui/styles/makeStyles";
 
 const useStyles = () =>
   makeStyles((theme) => ({
+    headerInfoIconButton: {
+      marginLeft: theme.spacing(1),
+      marginTop: theme.spacing(1),
+    },
     grid: {},
     controlPanelWrapper: {
       display: "flex",

src/ui/src/components/Layout/LayoutConstants.js

@@ -98,24 +98,16 @@ const MENU_ITEMS_INFO = {
     subItems: [
       {
         title: i18n.t("layout:nav-drawer.menu-item-feature-extractor"),
+        tooltip: i18n.t("layout:nav-drawer.menu-item-pipeline-fe-tooltip"),
         id: "navFeatureExtractor",
         orderIndex: 1,
         iconfn: (iconProps) => <FilterAltOutlinedIcon {...iconProps} />,
         getPath: (params = {}) =>
           generatePath(ROUTES.MAIN.MODEL_BUILD.child.FEATURE_EXTRACTOR.path, { ...params }),
       },
-      {
-        title: i18n.t("layout:nav-drawer.menu-item-pipeline-automl"),
-        id: "navPipelineAutoML",
-        orderIndex: 2,
-        iconfn: (iconProps) => <AutoModeOutlinedIcon {...iconProps} />,
-        getPath: (params = {}) =>
-          generatePath(ROUTES.MAIN.MODEL_BUILD.child.AUTOML.path, {
-            ...params,
-          }),
-      },
       {
         title: i18n.t("layout:nav-drawer.menu-item-pipeline-custom"),
+        tooltip: i18n.t("layout:nav-drawer.menu-item-pipeline-custom-tooltip"),
         id: "navPipelineCustom",
         orderIndex: 3,
         iconfn: (iconProps) => <ModelTrainingOutlinedIcon {...iconProps} fontSize="medium" />,
@@ -124,6 +116,17 @@ const MENU_ITEMS_INFO = {
             ...params,
           }),
       },
+      {
+        title: i18n.t("layout:nav-drawer.menu-item-pipeline-automl"),
+        tooltip: i18n.t("layout:nav-drawer.menu-item-pipeline-automl-tooltip"),
+        id: "navPipelineAutoML",
+        orderIndex: 2,
+        iconfn: (iconProps) => <AutoModeOutlinedIcon {...iconProps} />,
+        getPath: (params = {}) =>
+          generatePath(ROUTES.MAIN.MODEL_BUILD.child.AUTOML.path, {
+            ...params,
+          }),
+      },
     ],
   },
   MODELS: {

src/ui/src/components/Layout/NavDrawer.jsx

@@ -196,18 +196,22 @@ const NavDrawer = ({
                                   ...(selectedPipeline && { pipelineUUID: selectedPipeline }),
                                 })}
                               >
-                                <ListItem sx={{ pt: 0.5, pb: 0.5 }} id={subItem.id}>
-                                  <Tooltip title={subItem.title} aria-label="add">
+                                <Tooltip
+                                  title={subItem.tooltip || subItem.title}
+                                  placement="right"
+                                  aria-label={subItem.title}
+                                >
+                                  <ListItem sx={{ pt: 0.5, pb: 0.5 }} id={subItem.id}>
                                     <ListItemIcon className={classes.iconButton}>
                                       {getIsPathHasStatus(subItem.getPath()) ? (
                                         <StatusRunningIcon status={pipelineRunningStatus} />
                                       ) : (
                                         subItem.iconfn(getMenuProps(subItem.orderIndex))
                                       )}
                                     </ListItemIcon>
-                                  </Tooltip>
-                                  <ListItemText primary={subItem.title} />
-                                </ListItem>
+                                    <ListItemText primary={subItem.title} />
+                                  </ListItem>
+                                </Tooltip>
                               </NavLink>
                             ) : null}
                           </Box>

src/ui/src/components/PipelineBuilderV1/DrawerInformationMessage.jsx

@@ -19,11 +19,10 @@ License along with SensiML Piccolo AI. If not, see <https://www.gnu.org/licenses
 
 /* eslint-disable no-unused-vars */
 import React from "react";
-import filters from "filters";
 import { useTranslation } from "react-i18next";
 
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import { Alert, AlertTitle, Drawer, Box, Button, Typography } from "@mui/material";
+import { Drawer, Box, Button, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import useStyles from "./BuildModeStyle";
 

src/ui/src/components/PipelineBuilderV1/PipelineBuilder.jsx

@@ -145,7 +145,6 @@ const PipelineBuilder = ({
   labelColors,
   classMap,
   selectLabelValuesColors,
-  selectLabelValuesByName,
   onCloseAlertBuilder,
   onCreateNewStep,
   onDeleteStep,
@@ -802,11 +801,11 @@ const PipelineBuilder = ({
     [selectedSteps, activeEditStep, pipelineStatus, isOptimizationRunning],
   );
 
-  const CardInformationIcon = () => (
+  const CardInformationIcon = ({ step }) => (
     <Tooltip title={t("flow-builder.card-step-help-info")} placement="top">
       <Link
         className={`${classes.cardInfoIcon}`}
-        onClick={(_e) => handleStepInfo(pipelineSettings)}
+        onClick={(_e) => handleStepInfo(step)}
         data-test="info-link"
       >
         <InfoOutlinedIcon style={{ color: theme.colorEditIcons }} fontSize="xsmall" />
@@ -900,7 +899,7 @@ const PipelineBuilder = ({
                             <>
                               <Box display={"flex"} alignItems={"center"}>
                                 <span>{step.name}</span>
-                                <CardInformationIcon />
+                                <CardInformationIcon step={step} />
                               </Box>
                               {[
                                 PIPELINE_STEP_TYPES.CLASSIFIER,
@@ -925,7 +924,7 @@ const PipelineBuilder = ({
                                     FunctionSubType: step.name,
                                   })}
                                 </span>
-                                <CardInformationIcon />
+                                <CardInformationIcon step={step} />
                               </Box>
                             </>
                           )}
@@ -1124,13 +1123,13 @@ const PipelineBuilder = ({
           isOpen={isOpenDialogDistribution}
           labelColors={labelColors}
           data={cacheDistributionData?.data || {}}
-          featureSummary={featureStatsData.feature_summary}
-          featureStatistics={featureStatsData.feature_statistics}
-          featureVectorData={featureStatsData.feature_data}
-          features={_.keys(featureStatsData.feature_data)}
-          labelColumn={featureStatsData.label_column}
+          featureVectorData={featureStatsData?.featureVectorData || {}}
+          featureStatistics={featureStatsData?.featureStatistics || {}}
+          featureSummary={featureStatsData?.featureSummary || {}}
+          features={featureStatsData?.featureNames || {}}
+          labelColumn={featureStatsData?.labelColumn || ""}
+          labelValues={featureStatsData?.labelValues || []}
           selectLabelValuesColors={selectLabelValuesColors}
-          labelValues={selectLabelValuesByName(featureStatsData.label_column || "Label")}
           classMap={classMap}
           classes={classes}
           isLoadFeatures={cacheDistributionData?.step?.isLoadFeatures}

src/ui/src/components/PipelineImportForm/PipelineImportForm.jsx

@@ -53,9 +53,11 @@ const PipelineImportForm = ({
   };
 
   const handleCreate = (pipelineName, queryName, isUseSessionPreprocessor, replacedColumns) => {
+    const disableAutoML = pipelineJson.hyper_params?.params?.disable_automl || false;
     onSubmit({
       pipelineName,
       pipelineJson,
+      isAutoMLOptimization: !disableAutoML,
       queryName,
       replacedColumns,
       isUseSessionPreprocessor,

src/ui/src/components/PipelineTemplateCreateForm/PipelineTemplateCreateForm.jsx

@@ -67,8 +67,10 @@ const PipelineTemplateCreateForm = ({
   };
 
   const handleCreate = (pipelineName, queryName, isUseSessionPreprocessor, replacedColumns) => {
+    const disableAutoML = pipelineJson.hyper_params?.params?.disable_automl || false;
     onSubmit({
       pipelineName,
+      isAutoMLOptimization: !disableAutoML,
       pipelineJson,
       queryName,
       replacedColumns,

src/ui/src/containers/BuildModel/TheBuilderScreen/TheBuilderScreen.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 /*
 Copyright 2017-2024 SensiML Corporation
 
@@ -16,8 +17,32 @@ Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public
 License along with SensiML Piccolo AI. If not, see <https://www.gnu.org/licenses/>.
 */
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Box,
+  CircularProgress,
+  Typography,
+  Link,
+  Tooltip,
+  FormControlLabel,
+  Checkbox,
+  Stack,
+} from "@mui/material";
 
-import { useEffect } from "react";
+import makeStyles from "@mui/styles/makeStyles";
+import DialogInformation from "components/DialogInformation";
+
+const useStyles = (navBarIsOpen) =>
+  makeStyles((theme) => ({
+    infoTitle: {
+      marginBottom: theme.spacing(4),
+      marginTop: theme.spacing(2),
+      fontSize: theme.spacing(4),
+      fontWeight: 500,
+      textAlign: "center",
+    },
+  }))();
 
 const TheBuilderScreen = ({
   children,
@@ -35,6 +60,9 @@ const TheBuilderScreen = ({
   setSelectedPipelineName,
   ...props
 }) => {
+  const classes = useStyles();
+  const [dialogInformationData, setDialogInformationData] = useState({});
+
   const stopOptimizationChecker = () => {
     clearOptimizationLogs();
     clearPipelineResults();
@@ -58,15 +86,39 @@ const TheBuilderScreen = ({
     ];
   }, []);
 
-  return children({
-    clearAlertBuilder,
-    clearOptimizationLogs,
-    clearPipelineResults,
-    clearPipelineStatus,
-    clearQueryCacheStatus,
-    pipelineData,
-    ...props,
-  });
+  const handleShowInformation = (title, text) => {
+    setDialogInformationData({ title, text });
+  };
+
+  const handleCloseNewStepDialogInformation = () => {
+    setDialogInformationData({});
+  };
+
+  return (
+    <>
+      {children({
+        clearAlertBuilder,
+        clearOptimizationLogs,
+        clearPipelineResults,
+        clearPipelineStatus,
+        clearQueryCacheStatus,
+        pipelineData,
+        onShowInformation: handleShowInformation,
+        ...props,
+      })}
+      <DialogInformation
+        isOpen={Boolean(dialogInformationData.title)}
+        onClose={handleCloseNewStepDialogInformation}
+      >
+        <Typography variant="h2" className={classes.infoTitle}>
+          {dialogInformationData.title}
+        </Typography>
+        <Typography paragraph>
+          <p style={{ whiteSpace: "pre-wrap" }}>{dialogInformationData.text}</p>
+        </Typography>
+      </DialogInformation>
+    </>
+  );
 };
 
 export default TheBuilderScreen;

src/ui/src/containers/BuildModel/TheClassificationScreen/TheClassificationScreen.jsx

@@ -111,6 +111,7 @@ const TheClassificationScreen = ({
 
   exportPipeline,
   getPipelineStepFeatureStats,
+  onShowInformation,
 }) => {
   const routersHistory = useHistory();
   const scrollTop = useRef();
@@ -393,6 +394,21 @@ const TheClassificationScreen = ({
         <div className={classes.topPanelTopOverlap} />
         <Box className={classes.topPanelWrapper}>
           <BuilderPipelinePanel
+            title={
+              isAutoML
+                ? t("model-builder.pipeline-panel-header-automl")
+                : t("model-builder.pipeline-panel-header-custom")
+            }
+            onShowInformation={() => {
+              onShowInformation(
+                isAutoML
+                  ? t("model-builder.pipeline-panel-header-automl")
+                  : t("model-builder.pipeline-panel-header-custom"),
+                isAutoML
+                  ? t("model-builder.pipeline-panel-automl-description")
+                  : t("model-builder.pipeline-panel-custom-description"),
+              );
+            }}
             pipelineData={pipelineData}
             handleChangePipeline={handleChangePipeline}
             getIsReadyToOptimize={getIsReadyToOptimize}