[Cherry-Pick-Main][UI][SDL-5856][SDL-5857] Remove tooltips, fixed left navigation alignment, move pipeline builder info to .md files (#54)

Author: mkaliberda

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

@@ -18,7 +18,8 @@ License along with SensiML Piccolo AI. If not, see <https://www.gnu.org/licenses
 */
 
 import React from "react";
-import { Box, Grid, IconButton, Typography } from "@mui/material";
+import { Box, Grid, IconButton, Typography, Tooltip } from "@mui/material";
+import { useTranslation } from "react-i18next";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import makeStyles from "@mui/styles/makeStyles";
 
@@ -61,6 +62,7 @@ const ControlPanel = ({
   actionsBtns,
   truncateLength = 0,
 }) => {
+  const { t } = useTranslation("components");
   const classes = useStyles();
 
   return (
@@ -80,9 +82,11 @@ const ControlPanel = ({
           <Typography variant={"h2"} classes={{ root: classes.titleRoot }}>
             {title && filterTruncateMiddle(title, truncateLength)}
             {onShowInformation ? (
-              <IconButton onClick={onShowInformation}>
-                <InfoOutlinedIcon color="primary" />
-              </IconButton>
+              <Tooltip title={t("control-panel.tooltip-info-button")} placement="top">
+                <IconButton onClick={onShowInformation}>
+                  <InfoOutlinedIcon color="primary" />
+                </IconButton>
+              </Tooltip>
             ) : null}
           </Typography>
           <Box alignItems="center" ml={2}>

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

@@ -60,8 +60,8 @@ const MENU_ITEMS_INFO = {
     getPath: (params = {}) => generatePath(ROUTES.MAIN.HOME.path, { ...params }),
   },
   CHANGE_PROJECT: {
-    title: i18n.t("layout:nav-drawer.menu-item-change-project"),
-    tooltip: i18n.t("layout:menu-external.get-started-tooltip"),
+    title: i18n.t("layout:nav-drawer.menu-item-close-project"),
+    tooltip: i18n.t("layout:nav-drawer-tooltips.menu-item-close-project"),
     id: "navChangeProject",
     orderIndex: 1,
     iconfn: (iconProps) => <ExitToAppIcon {...iconProps} />,
@@ -83,7 +83,7 @@ const MENU_ITEMS_INFO = {
     iconfn: (iconProps) => <StorageIcon {...iconProps} />,
     getPath: (params = {}) => generatePath(ROUTES.MAIN.DATA_MANAGER.path, { ...params }),
   },
-  PRERARE_DATA: {
+  PREPARE_DATA: {
     title: i18n.t("layout:nav-drawer.menu-item-queries"),
     tooltip: i18n.t("layout:nav-drawer-tooltips.queries"),
     id: "navPrepareData",
@@ -174,7 +174,7 @@ const MENU_ITEMS = [
   { ...MENU_ITEMS_INFO.CHANGE_PROJECT },
   { ...MENU_ITEMS_INFO.SUMMARY },
   { ...MENU_ITEMS_INFO.DATAMANAGER },
-  { ...MENU_ITEMS_INFO.PRERARE_DATA },
+  { ...MENU_ITEMS_INFO.PREPARE_DATA },
   { ...MENU_ITEMS_INFO.BUILD_MODEL },
   { ...MENU_ITEMS_INFO.MODELS },
 ];

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

@@ -105,15 +105,17 @@ const NavDrawer = ({
     [pipelineRunningStatus, activePipelinePath],
   );
 
-  const SubItemTitle = ({ id }) => {
+  const SubItemTitle = ({ id, isMenuOpen }) => {
     return (
       <>
         {selectedPipelineName && MENU_ITEMS_INFO.BUILD_MODEL.id === id ? (
           <ListItem>
-            <ListItemText
-              primary={filterTruncate(selectedPipelineName, 17)}
-              className={classes.navTitle}
-            />
+            {isMenuOpen ? (
+              <ListItemText
+                primary={filterTruncate(selectedPipelineName, 17)}
+                className={classes.navTitle}
+              />
+            ) : null}
             <Tooltip title={"Close Pipeline"}>
               <IconButton onClick={(_e) => handleChangePipeline()} variant="contained" size="small">
                 <CloseIcon fontSize="small" />
@@ -167,26 +169,25 @@ const NavDrawer = ({
                   })}
                   disabled={selectedProject === null}
                 >
-                  <Tooltip
-                    title={menuItem.tooltip || menuItem.title}
-                    placement="right"
-                    aria-label="menuItem.title"
-                  >
-                    <ListItem key={menuItem.id} id={menuItem.id}>
+                  <ListItem key={menuItem.id} id={menuItem.id}>
+                    <Tooltip title={menuItem.tooltip || menuItem.title} aria-label={menuItem.title}>
                       <ListItemIcon className={classes.iconButton}>
                         {menuItem.iconfn(getMenuProps(menuItem.orderIndex))}
                       </ListItemIcon>
-                      <ListItemText primary={menuItem.title} />
-                    </ListItem>
-                  </Tooltip>
+                    </Tooltip>
+                    <ListItemText sx={{ pl: isOpen ? 0 : 2 }} primary={menuItem.title} />
+                  </ListItem>
                 </NavLink>
 
                 {menuItem?.subItems ? (
                   <>
                     <Collapse in={isSubmenuItemsOpened(menuItem.id)} timeout={0}>
                       <Divider variant="middle" />
-                      <SubItemTitle id={menuItem.id} />
-                      <List key={`subitem_list_${menuItem.id}`} sx={{ pl: 2, pt: 0, pb: 0 }}>
+                      <SubItemTitle id={menuItem.id} isMenuOpen={isOpen} />
+                      <List
+                        key={`subitem_list_${menuItem.id}`}
+                        sx={{ pl: isOpen ? 2 : 0, pt: 0, pb: 0 }}
+                      >
                         {menuItem.subItems.map((subItem) => (
                           <Box key={`subitem_nav_link_${subItem.id}`}>
                             {showIfRunning(menuItem.id, subItem.getPath()) ? (
@@ -200,22 +201,24 @@ const NavDrawer = ({
                                   ...(selectedPipeline && { pipelineUUID: selectedPipeline }),
                                 })}
                               >
-                                <Tooltip
-                                  title={subItem.tooltip || subItem.title}
-                                  placement="right"
-                                  aria-label={subItem.title}
-                                >
-                                  <ListItem sx={{ pt: 0.5, pb: 0.5 }} id={subItem.id}>
+                                <ListItem sx={{ pt: 0.5, pb: 0.5 }} id={subItem.id}>
+                                  <Tooltip
+                                    title={subItem.tooltip || subItem.title}
+                                    aria-label={subItem.title}
+                                  >
                                     <ListItemIcon className={classes.iconButton}>
                                       {getIsPathHasStatus(subItem.getPath()) ? (
                                         <StatusRunningIcon status={pipelineRunningStatus} />
                                       ) : (
                                         subItem.iconfn(getMenuProps(subItem.orderIndex))
                                       )}
                                     </ListItemIcon>
-                                    <ListItemText primary={subItem.title} />
-                                  </ListItem>
-                                </Tooltip>
+                                  </Tooltip>
+                                  <ListItemText
+                                    sx={{ pl: isOpen ? 0 : 2 }}
+                                    primary={subItem.title}
+                                  />
+                                </ListItem>
                               </NavLink>
                             ) : null}
                           </Box>
@@ -245,12 +248,7 @@ const NavDrawer = ({
                       {menuItem.iconfn({ color: "inherit", fontSize: "small" })}
                     </Tooltip>
                   </ListItemIcon>
-                  <ListItemText
-                    primary={menuItem.title}
-                    classes={{
-                      primary: classes.disabledMenuText,
-                    }}
-                  />
+                  <ListItemText sx={{ pl: isOpen ? 0 : 2 }} primary={menuItem.title} />
                 </ListItem>
               </NavLink>
             ))}

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

@@ -17,32 +17,7 @@ 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 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",
-    },
-  }))();
+import React, { useEffect } from "react";
 
 const TheBuilderScreen = ({
   children,
@@ -60,9 +35,6 @@ const TheBuilderScreen = ({
   setSelectedPipelineName,
   ...props
 }) => {
-  const classes = useStyles();
-  const [dialogInformationData, setDialogInformationData] = useState({});
-
   const stopOptimizationChecker = () => {
     clearOptimizationLogs();
     clearPipelineResults();
@@ -86,14 +58,6 @@ const TheBuilderScreen = ({
     ];
   }, []);
 
-  const handleShowInformation = (title, text) => {
-    setDialogInformationData({ title, text });
-  };
-
-  const handleCloseNewStepDialogInformation = () => {
-    setDialogInformationData({});
-  };
-
   return (
     <>
       {children({
@@ -103,20 +67,8 @@ const TheBuilderScreen = ({
         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>
     </>
   );
 };

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

@@ -35,12 +35,14 @@ import {
 import { UITablePanel } from "components/UIPanels";
 
 import { getUniqueId } from "utils";
-import { useInterval, useMainContext } from "hooks";
-
+import { useInterval, useMainContext, useReadFileText } from "hooks";
 import { ROUTES } from "routers";
 import { RUNNING_STATUSES } from "consts";
 import { EXECUTION_TYPES, PIPELINE_STEP_TYPES } from "store/autoML/const";
 
+import infoAutoMLFile from "i18n/locales/en/info-pipeline-automl.md";
+import infoCustomFile from "i18n/locales/en/info-pipeline-custom.md";
+
 import PipelineBuilderClassification from "../components/PipelineBuilderClassification";
 import TableAutoSenseMetrics from "../components/TableAutoSenseMetrics";
 import TableIterationMetrics from "../components/TableIterationMetrics";
@@ -112,15 +114,17 @@ const TheClassificationScreen = ({
 
   exportPipeline,
   getPipelineStepFeatureStats,
-  onShowInformation,
 }) => {
   const routersHistory = useHistory();
   const scrollTop = useRef();
   const classes = useStyles(navBarIsOpen);
 
   const { t } = useTranslation("models");
   const { projectUUID, pipelineUUID } = useParams();
-  const { showMessageSnackbar } = useMainContext();
+  const { showMessageSnackbar, showInformationWindow } = useMainContext();
+
+  const screenInfoAutoMLMd = useReadFileText(infoAutoMLFile);
+  const screenInfoCustom = useReadFileText(infoCustomFile);
 
   const [selectedSteps, setSelectedSteps] = useState([]);
   const [pipelineSettings, setPipelineSettings] = useState([]);
@@ -401,13 +405,11 @@ const TheClassificationScreen = ({
                 : t("model-builder.pipeline-panel-header-custom")
             }
             onShowInformation={() => {
-              onShowInformation(
+              showInformationWindow(
                 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"),
+                isAutoML ? screenInfoAutoMLMd : screenInfoCustom,
               );
             }}
             pipelineData={pipelineData}

src/ui/src/containers/BuildModel/TheFeatureExtractorScreen/TheFeatureExtractorScreen.jsx

@@ -34,16 +34,17 @@ import {
 } from "components/LogsView";
 
 import { getUniqueId } from "utils";
-import { useInterval, useMainContext } from "hooks";
+import { useInterval, useMainContext, useReadFileText } from "hooks";
 import { ROUTES } from "routers";
 import { RUNNING_STATUSES } from "consts";
 import { PIPELINE_STEP_TYPES } from "store/autoML/const";
 
 import FeatureVectorChart from "components/FeatureVectorChart";
-
 import FeatureSummary from "components/FeatureSummary";
-import PipelineBuilderFeatureExtraction from "../components/PipelineBuilderFeatureExtraction";
 
+import infoFile from "i18n/locales/en/info-pipeline-fe.md";
+
+import PipelineBuilderFeatureExtraction from "../components/PipelineBuilderFeatureExtraction";
 import QueryCacheAlertMessage from "../components/QueryCacheAlertMessage";
 import BuilderPipelinePanel from "../components/BuilderPipelinePanel";
 import PipelineBuilderAlertMessage from "../components/PipelineBuilderAlertMessage";
@@ -108,15 +109,15 @@ const TheFeatureExtractorScreen = ({
 
   exportPipeline,
   getPipelineStepFeatureStats,
-  onShowInformation,
 }) => {
   const routersHistory = useHistory();
   const scrollTop = useRef();
   const classes = useStyles(navBarIsOpen);
 
   const { t } = useTranslation("models");
   const { projectUUID, pipelineUUID } = useParams();
-  const { showMessageSnackbar } = useMainContext();
+  const { showMessageSnackbar, showInformationWindow } = useMainContext();
+  const screenInfo = useReadFileText(infoFile);
 
   const [selectedSteps, setSelectedSteps] = useState([]);
   // eslint-disable-next-line no-unused-vars
@@ -374,10 +375,7 @@ const TheFeatureExtractorScreen = ({
             handleChangePipeline={handleChangePipeline}
             getIsReadyToOptimize={getIsReadyToOptimize}
             onShowInformation={() => {
-              onShowInformation(
-                t("model-builder.pipeline-panel-header-fe"),
-                t("model-builder.pipeline-panel-fe-description"),
-              );
+              showInformationWindow(t("model-builder.pipeline-panel-header-fe"), screenInfo);
             }}
             isOptimizationRunning={isOptimizationRunning}
             handleLaunchOptimize={handleLaunchOptimize}

src/ui/src/containers/DataExplorer/TheQueryCreateScreen/TheQueryCreateScreen.jsx

@@ -48,6 +48,7 @@ const TheQueryCreateScreen = ({
   // actions
   addOrUpdateQuery,
   setHasUnsavedChanges,
+  onShowInformation,
 }) => {
   const { projectUUID } = useParams();
   const routersHistory = useHistory();
@@ -202,6 +203,7 @@ const TheQueryCreateScreen = ({
               icon={<ExitToAppIcon />}
             />
           }
+          onShowInformation={onShowInformation}
         />
       </Box>
       <Grid container spacing={2} justifyContent="flex-start">