Skip to content

Commit 67d3733

Browse files
mkaliberdamkaliberda
authored
[Cherry-Pick-Main][UI][SDL-5856][SDL-5857] Remove tooltips, fixed left navigation alignment, move pipeline builder info to .md files (#54)
1 parent 31a8f54 commit 67d3733

File tree

14 files changed

+178
-144
lines changed

14 files changed

+178
-144
lines changed

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ License along with SensiML Piccolo AI. If not, see <https://www.gnu.org/licenses
1818
*/
1919

2020
import React from "react";
21-
import { Box, Grid, IconButton, Typography } from "@mui/material";
21+
import { Box, Grid, IconButton, Typography, Tooltip } from "@mui/material";
22+
import { useTranslation } from "react-i18next";
2223
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
2324
import makeStyles from "@mui/styles/makeStyles";
2425

@@ -61,6 +62,7 @@ const ControlPanel = ({
6162
actionsBtns,
6263
truncateLength = 0,
6364
}) => {
65+
const { t } = useTranslation("components");
6466
const classes = useStyles();
6567

6668
return (
@@ -80,9 +82,11 @@ const ControlPanel = ({
8082
<Typography variant={"h2"} classes={{ root: classes.titleRoot }}>
8183
{title && filterTruncateMiddle(title, truncateLength)}
8284
{onShowInformation ? (
83-
<IconButton onClick={onShowInformation}>
84-
<InfoOutlinedIcon color="primary" />
85-
</IconButton>
85+
<Tooltip title={t("control-panel.tooltip-info-button")} placement="top">
86+
<IconButton onClick={onShowInformation}>
87+
<InfoOutlinedIcon color="primary" />
88+
</IconButton>
89+
</Tooltip>
8690
) : null}
8791
</Typography>
8892
<Box alignItems="center" ml={2}>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ const MENU_ITEMS_INFO = {
6060
getPath: (params = {}) => generatePath(ROUTES.MAIN.HOME.path, { ...params }),
6161
},
6262
CHANGE_PROJECT: {
63-
title: i18n.t("layout:nav-drawer.menu-item-change-project"),
64-
tooltip: i18n.t("layout:menu-external.get-started-tooltip"),
63+
title: i18n.t("layout:nav-drawer.menu-item-close-project"),
64+
tooltip: i18n.t("layout:nav-drawer-tooltips.menu-item-close-project"),
6565
id: "navChangeProject",
6666
orderIndex: 1,
6767
iconfn: (iconProps) => <ExitToAppIcon {...iconProps} />,
@@ -83,7 +83,7 @@ const MENU_ITEMS_INFO = {
8383
iconfn: (iconProps) => <StorageIcon {...iconProps} />,
8484
getPath: (params = {}) => generatePath(ROUTES.MAIN.DATA_MANAGER.path, { ...params }),
8585
},
86-
PRERARE_DATA: {
86+
PREPARE_DATA: {
8787
title: i18n.t("layout:nav-drawer.menu-item-queries"),
8888
tooltip: i18n.t("layout:nav-drawer-tooltips.queries"),
8989
id: "navPrepareData",
@@ -174,7 +174,7 @@ const MENU_ITEMS = [
174174
{ ...MENU_ITEMS_INFO.CHANGE_PROJECT },
175175
{ ...MENU_ITEMS_INFO.SUMMARY },
176176
{ ...MENU_ITEMS_INFO.DATAMANAGER },
177-
{ ...MENU_ITEMS_INFO.PRERARE_DATA },
177+
{ ...MENU_ITEMS_INFO.PREPARE_DATA },
178178
{ ...MENU_ITEMS_INFO.BUILD_MODEL },
179179
{ ...MENU_ITEMS_INFO.MODELS },
180180
];

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

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -105,15 +105,17 @@ const NavDrawer = ({
105105
[pipelineRunningStatus, activePipelinePath],
106106
);
107107

108-
const SubItemTitle = ({ id }) => {
108+
const SubItemTitle = ({ id, isMenuOpen }) => {
109109
return (
110110
<>
111111
{selectedPipelineName && MENU_ITEMS_INFO.BUILD_MODEL.id === id ? (
112112
<ListItem>
113-
<ListItemText
114-
primary={filterTruncate(selectedPipelineName, 17)}
115-
className={classes.navTitle}
116-
/>
113+
{isMenuOpen ? (
114+
<ListItemText
115+
primary={filterTruncate(selectedPipelineName, 17)}
116+
className={classes.navTitle}
117+
/>
118+
) : null}
117119
<Tooltip title={"Close Pipeline"}>
118120
<IconButton onClick={(_e) => handleChangePipeline()} variant="contained" size="small">
119121
<CloseIcon fontSize="small" />
@@ -167,26 +169,25 @@ const NavDrawer = ({
167169
})}
168170
disabled={selectedProject === null}
169171
>
170-
<Tooltip
171-
title={menuItem.tooltip || menuItem.title}
172-
placement="right"
173-
aria-label="menuItem.title"
174-
>
175-
<ListItem key={menuItem.id} id={menuItem.id}>
172+
<ListItem key={menuItem.id} id={menuItem.id}>
173+
<Tooltip title={menuItem.tooltip || menuItem.title} aria-label={menuItem.title}>
176174
<ListItemIcon className={classes.iconButton}>
177175
{menuItem.iconfn(getMenuProps(menuItem.orderIndex))}
178176
</ListItemIcon>
179-
<ListItemText primary={menuItem.title} />
180-
</ListItem>
181-
</Tooltip>
177+
</Tooltip>
178+
<ListItemText sx={{ pl: isOpen ? 0 : 2 }} primary={menuItem.title} />
179+
</ListItem>
182180
</NavLink>
183181

184182
{menuItem?.subItems ? (
185183
<>
186184
<Collapse in={isSubmenuItemsOpened(menuItem.id)} timeout={0}>
187185
<Divider variant="middle" />
188-
<SubItemTitle id={menuItem.id} />
189-
<List key={`subitem_list_${menuItem.id}`} sx={{ pl: 2, pt: 0, pb: 0 }}>
186+
<SubItemTitle id={menuItem.id} isMenuOpen={isOpen} />
187+
<List
188+
key={`subitem_list_${menuItem.id}`}
189+
sx={{ pl: isOpen ? 2 : 0, pt: 0, pb: 0 }}
190+
>
190191
{menuItem.subItems.map((subItem) => (
191192
<Box key={`subitem_nav_link_${subItem.id}`}>
192193
{showIfRunning(menuItem.id, subItem.getPath()) ? (
@@ -200,22 +201,24 @@ const NavDrawer = ({
200201
...(selectedPipeline && { pipelineUUID: selectedPipeline }),
201202
})}
202203
>
203-
<Tooltip
204-
title={subItem.tooltip || subItem.title}
205-
placement="right"
206-
aria-label={subItem.title}
207-
>
208-
<ListItem sx={{ pt: 0.5, pb: 0.5 }} id={subItem.id}>
204+
<ListItem sx={{ pt: 0.5, pb: 0.5 }} id={subItem.id}>
205+
<Tooltip
206+
title={subItem.tooltip || subItem.title}
207+
aria-label={subItem.title}
208+
>
209209
<ListItemIcon className={classes.iconButton}>
210210
{getIsPathHasStatus(subItem.getPath()) ? (
211211
<StatusRunningIcon status={pipelineRunningStatus} />
212212
) : (
213213
subItem.iconfn(getMenuProps(subItem.orderIndex))
214214
)}
215215
</ListItemIcon>
216-
<ListItemText primary={subItem.title} />
217-
</ListItem>
218-
</Tooltip>
216+
</Tooltip>
217+
<ListItemText
218+
sx={{ pl: isOpen ? 0 : 2 }}
219+
primary={subItem.title}
220+
/>
221+
</ListItem>
219222
</NavLink>
220223
) : null}
221224
</Box>
@@ -245,12 +248,7 @@ const NavDrawer = ({
245248
{menuItem.iconfn({ color: "inherit", fontSize: "small" })}
246249
</Tooltip>
247250
</ListItemIcon>
248-
<ListItemText
249-
primary={menuItem.title}
250-
classes={{
251-
primary: classes.disabledMenuText,
252-
}}
253-
/>
251+
<ListItemText sx={{ pl: isOpen ? 0 : 2 }} primary={menuItem.title} />
254252
</ListItem>
255253
</NavLink>
256254
))}

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

Lines changed: 1 addition & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,7 @@ Affero General Public License for more details.
1717
You should have received a copy of the GNU Affero General Public
1818
License along with SensiML Piccolo AI. If not, see <https://www.gnu.org/licenses/>.
1919
*/
20-
import React, { useEffect, useState } from "react";
21-
import {
22-
Button,
23-
Box,
24-
CircularProgress,
25-
Typography,
26-
Link,
27-
Tooltip,
28-
FormControlLabel,
29-
Checkbox,
30-
Stack,
31-
} from "@mui/material";
32-
33-
import makeStyles from "@mui/styles/makeStyles";
34-
import DialogInformation from "components/DialogInformation";
35-
36-
const useStyles = (navBarIsOpen) =>
37-
makeStyles((theme) => ({
38-
infoTitle: {
39-
marginBottom: theme.spacing(4),
40-
marginTop: theme.spacing(2),
41-
fontSize: theme.spacing(4),
42-
fontWeight: 500,
43-
textAlign: "center",
44-
},
45-
}))();
20+
import React, { useEffect } from "react";
4621

4722
const TheBuilderScreen = ({
4823
children,
@@ -60,9 +35,6 @@ const TheBuilderScreen = ({
6035
setSelectedPipelineName,
6136
...props
6237
}) => {
63-
const classes = useStyles();
64-
const [dialogInformationData, setDialogInformationData] = useState({});
65-
6638
const stopOptimizationChecker = () => {
6739
clearOptimizationLogs();
6840
clearPipelineResults();
@@ -86,14 +58,6 @@ const TheBuilderScreen = ({
8658
];
8759
}, []);
8860

89-
const handleShowInformation = (title, text) => {
90-
setDialogInformationData({ title, text });
91-
};
92-
93-
const handleCloseNewStepDialogInformation = () => {
94-
setDialogInformationData({});
95-
};
96-
9761
return (
9862
<>
9963
{children({
@@ -103,20 +67,8 @@ const TheBuilderScreen = ({
10367
clearPipelineStatus,
10468
clearQueryCacheStatus,
10569
pipelineData,
106-
onShowInformation: handleShowInformation,
10770
...props,
10871
})}
109-
<DialogInformation
110-
isOpen={Boolean(dialogInformationData.title)}
111-
onClose={handleCloseNewStepDialogInformation}
112-
>
113-
<Typography variant="h2" className={classes.infoTitle}>
114-
{dialogInformationData.title}
115-
</Typography>
116-
<Typography paragraph>
117-
<p style={{ whiteSpace: "pre-wrap" }}>{dialogInformationData.text}</p>
118-
</Typography>
119-
</DialogInformation>
12072
</>
12173
);
12274
};

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,14 @@ import {
3535
import { UITablePanel } from "components/UIPanels";
3636

3737
import { getUniqueId } from "utils";
38-
import { useInterval, useMainContext } from "hooks";
39-
38+
import { useInterval, useMainContext, useReadFileText } from "hooks";
4039
import { ROUTES } from "routers";
4140
import { RUNNING_STATUSES } from "consts";
4241
import { EXECUTION_TYPES, PIPELINE_STEP_TYPES } from "store/autoML/const";
4342

43+
import infoAutoMLFile from "i18n/locales/en/info-pipeline-automl.md";
44+
import infoCustomFile from "i18n/locales/en/info-pipeline-custom.md";
45+
4446
import PipelineBuilderClassification from "../components/PipelineBuilderClassification";
4547
import TableAutoSenseMetrics from "../components/TableAutoSenseMetrics";
4648
import TableIterationMetrics from "../components/TableIterationMetrics";
@@ -112,15 +114,17 @@ const TheClassificationScreen = ({
112114

113115
exportPipeline,
114116
getPipelineStepFeatureStats,
115-
onShowInformation,
116117
}) => {
117118
const routersHistory = useHistory();
118119
const scrollTop = useRef();
119120
const classes = useStyles(navBarIsOpen);
120121

121122
const { t } = useTranslation("models");
122123
const { projectUUID, pipelineUUID } = useParams();
123-
const { showMessageSnackbar } = useMainContext();
124+
const { showMessageSnackbar, showInformationWindow } = useMainContext();
125+
126+
const screenInfoAutoMLMd = useReadFileText(infoAutoMLFile);
127+
const screenInfoCustom = useReadFileText(infoCustomFile);
124128

125129
const [selectedSteps, setSelectedSteps] = useState([]);
126130
const [pipelineSettings, setPipelineSettings] = useState([]);
@@ -401,13 +405,11 @@ const TheClassificationScreen = ({
401405
: t("model-builder.pipeline-panel-header-custom")
402406
}
403407
onShowInformation={() => {
404-
onShowInformation(
408+
showInformationWindow(
405409
isAutoML
406410
? t("model-builder.pipeline-panel-header-automl")
407411
: t("model-builder.pipeline-panel-header-custom"),
408-
isAutoML
409-
? t("model-builder.pipeline-panel-automl-description")
410-
: t("model-builder.pipeline-panel-custom-description"),
412+
isAutoML ? screenInfoAutoMLMd : screenInfoCustom,
411413
);
412414
}}
413415
pipelineData={pipelineData}

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,17 @@ import {
3434
} from "components/LogsView";
3535

3636
import { getUniqueId } from "utils";
37-
import { useInterval, useMainContext } from "hooks";
37+
import { useInterval, useMainContext, useReadFileText } from "hooks";
3838
import { ROUTES } from "routers";
3939
import { RUNNING_STATUSES } from "consts";
4040
import { PIPELINE_STEP_TYPES } from "store/autoML/const";
4141

4242
import FeatureVectorChart from "components/FeatureVectorChart";
43-
4443
import FeatureSummary from "components/FeatureSummary";
45-
import PipelineBuilderFeatureExtraction from "../components/PipelineBuilderFeatureExtraction";
4644

45+
import infoFile from "i18n/locales/en/info-pipeline-fe.md";
46+
47+
import PipelineBuilderFeatureExtraction from "../components/PipelineBuilderFeatureExtraction";
4748
import QueryCacheAlertMessage from "../components/QueryCacheAlertMessage";
4849
import BuilderPipelinePanel from "../components/BuilderPipelinePanel";
4950
import PipelineBuilderAlertMessage from "../components/PipelineBuilderAlertMessage";
@@ -108,15 +109,15 @@ const TheFeatureExtractorScreen = ({
108109

109110
exportPipeline,
110111
getPipelineStepFeatureStats,
111-
onShowInformation,
112112
}) => {
113113
const routersHistory = useHistory();
114114
const scrollTop = useRef();
115115
const classes = useStyles(navBarIsOpen);
116116

117117
const { t } = useTranslation("models");
118118
const { projectUUID, pipelineUUID } = useParams();
119-
const { showMessageSnackbar } = useMainContext();
119+
const { showMessageSnackbar, showInformationWindow } = useMainContext();
120+
const screenInfo = useReadFileText(infoFile);
120121

121122
const [selectedSteps, setSelectedSteps] = useState([]);
122123
// eslint-disable-next-line no-unused-vars
@@ -374,10 +375,7 @@ const TheFeatureExtractorScreen = ({
374375
handleChangePipeline={handleChangePipeline}
375376
getIsReadyToOptimize={getIsReadyToOptimize}
376377
onShowInformation={() => {
377-
onShowInformation(
378-
t("model-builder.pipeline-panel-header-fe"),
379-
t("model-builder.pipeline-panel-fe-description"),
380-
);
378+
showInformationWindow(t("model-builder.pipeline-panel-header-fe"), screenInfo);
381379
}}
382380
isOptimizationRunning={isOptimizationRunning}
383381
handleLaunchOptimize={handleLaunchOptimize}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const TheQueryCreateScreen = ({
4848
// actions
4949
addOrUpdateQuery,
5050
setHasUnsavedChanges,
51+
onShowInformation,
5152
}) => {
5253
const { projectUUID } = useParams();
5354
const routersHistory = useHistory();
@@ -202,6 +203,7 @@ const TheQueryCreateScreen = ({
202203
icon={<ExitToAppIcon />}
203204
/>
204205
}
206+
onShowInformation={onShowInformation}
205207
/>
206208
</Box>
207209
<Grid container spacing={2} justifyContent="flex-start">

‎src/ui/src/containers/DataExplorer/TheQueryScreen/index.jsx

Lines changed: 0 additions & 24 deletions
This file was deleted.

0 commit comments

Comments
 (0)