Skip to content

Commit 57ae530

Browse files
mkaliberdamkaliberda
authored
[Cherry-Pick-Main][UI][SDL-5853] Improve user onboarding by adding documentation to screens (#52)
1 parent 801ad71 commit 57ae530

27 files changed

+779
-240
lines changed

‎src/ui/package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
"lodash-es": "^4.17.15",
2929
"lodash.isequal": "^4.5.0",
3030
"material-css": "^0.7.0",
31-
"sass": "1.80.3",
3231
"plotly.js": "^2.11.1",
3332
"plotly.js-cartesian-dist-min": "^2.11.1",
3433
"prop-types": "^15.7.2",
@@ -42,7 +41,7 @@
4241
"react-i18next": "^11.8.9",
4342
"react-images-uploading": "^3.1.2",
4443
"react-loader-spinner": "^4.0.0",
45-
"react-markdown": "^5.0.3",
44+
"react-markdown": "8.0.7",
4645
"react-plotly.js": "^2.4.0",
4746
"react-redux": "^7.1.3",
4847
"react-router": "^5.2.0",
@@ -56,6 +55,7 @@
5655
"redux-promise-middleware": "^6.1.2",
5756
"redux-thunk": "^2.3.0",
5857
"regenerator-runtime": "^0.13.3",
58+
"sass": "1.80.3",
5959
"start-server-and-test": "^1.11.0",
6060
"uuid": "^8.3.2",
6161
"wavefile": "^11.0.0"
@@ -136,7 +136,6 @@
136136
"cyheadless": "./node_modules/.bin/cypress run --headless --browser chrome",
137137
"test-e2e": "start-server-and-test start http://localhost:3000 cyheadless"
138138
},
139-
140139
"devDependencies": {
141140
"@babel/core": "^7.7.4",
142141
"@babel/plugin-transform-runtime": "^7.7.4",

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

+11-3
Original file line numberDiff line numberDiff line change
@@ -69,27 +69,31 @@ const MENU_ITEMS_INFO = {
6969
},
7070
SUMMARY: {
7171
title: i18n.t("layout:nav-drawer.menu-item-project-summary"),
72+
tooltip: i18n.t("layout:nav-drawer-tooltips.project-summary"),
7273
id: "navSummary",
7374
orderIndex: 2,
7475
iconfn: (iconProps) => <SummaryIcon {...iconProps} />,
7576
getPath: (params = {}) => generatePath(ROUTES.MAIN.PROJECT_SUMMARY.path, { ...params }),
7677
},
7778
DATAMANAGER: {
7879
title: i18n.t("layout:nav-drawer.menu-item-data-manager"),
80+
tooltip: i18n.t("layout:nav-drawer-tooltips.data-manager"),
7981
id: "navDataManager",
8082
orderIndex: 3,
8183
iconfn: (iconProps) => <StorageIcon {...iconProps} />,
8284
getPath: (params = {}) => generatePath(ROUTES.MAIN.DATA_MANAGER.path, { ...params }),
8385
},
8486
PRERARE_DATA: {
8587
title: i18n.t("layout:nav-drawer.menu-item-queries"),
88+
tooltip: i18n.t("layout:nav-drawer-tooltips.queries"),
8689
id: "navPrepareData",
8790
orderIndex: 4,
8891
iconfn: (iconProps) => <PollOutlinedIcon {...iconProps} />,
8992
getPath: (params = {}) => generatePath(ROUTES.MAIN.DATA_EXPLORER.path, { ...params }),
9093
},
9194
BUILD_MODEL: {
9295
title: i18n.t("layout:nav-drawer.menu-item-build-model"),
96+
tooltip: i18n.t("layout:nav-drawer-tooltips.pipelines"),
9397
id: "navBuildModel",
9498
orderIndex: 5,
9599
iconfn: (iconProps) => <BuildIcon {...iconProps} />,
@@ -98,7 +102,7 @@ const MENU_ITEMS_INFO = {
98102
subItems: [
99103
{
100104
title: i18n.t("layout:nav-drawer.menu-item-feature-extractor"),
101-
tooltip: i18n.t("layout:nav-drawer.menu-item-pipeline-fe-tooltip"),
105+
tooltip: i18n.t("layout:nav-drawer-tooltips.pipeline-fe"),
102106
id: "navFeatureExtractor",
103107
orderIndex: 1,
104108
iconfn: (iconProps) => <FilterAltOutlinedIcon {...iconProps} />,
@@ -107,7 +111,7 @@ const MENU_ITEMS_INFO = {
107111
},
108112
{
109113
title: i18n.t("layout:nav-drawer.menu-item-pipeline-custom"),
110-
tooltip: i18n.t("layout:nav-drawer.menu-item-pipeline-custom-tooltip"),
114+
tooltip: i18n.t("layout:nav-drawer-tooltips.pipeline-custom"),
111115
id: "navPipelineCustom",
112116
orderIndex: 3,
113117
iconfn: (iconProps) => <ModelTrainingOutlinedIcon {...iconProps} fontSize="medium" />,
@@ -118,7 +122,7 @@ const MENU_ITEMS_INFO = {
118122
},
119123
{
120124
title: i18n.t("layout:nav-drawer.menu-item-pipeline-automl"),
121-
tooltip: i18n.t("layout:nav-drawer.menu-item-pipeline-automl-tooltip"),
125+
tooltip: i18n.t("layout:nav-drawer-tooltips.pipeline-automl"),
122126
id: "navPipelineAutoML",
123127
orderIndex: 2,
124128
iconfn: (iconProps) => <AutoModeOutlinedIcon {...iconProps} />,
@@ -131,27 +135,31 @@ const MENU_ITEMS_INFO = {
131135
},
132136
MODELS: {
133137
title: i18n.t("layout:nav-drawer.menu-item-models"),
138+
tooltip: i18n.t("layout:nav-drawer-tooltips.models"),
134139
id: "navOpenModel",
135140
orderIndex: 6,
136141
iconfn: (iconProps) => <DataObjectOutlinedIcon {...iconProps} />,
137142
getPath: (params = {}) => generatePath(ROUTES.MAIN.MODEL_SELECT.path, { ...params }),
138143
subItems: [
139144
{
140145
title: i18n.t("layout:nav-drawer.menu-item-explore-model"),
146+
tooltip: i18n.t("layout:nav-drawer-tooltips.explore-model"),
141147
id: "navExploreModel",
142148
orderIndex: 7,
143149
iconfn: (iconProps) => <ExploreIcon {...iconProps} />,
144150
getPath: (params = {}) => generatePath(ROUTES.MAIN.MODEL_EXPLORE.path, { ...params }),
145151
},
146152
{
147153
title: i18n.t("layout:nav-drawer.menu-item-test-model"),
154+
tooltip: i18n.t("layout:nav-drawer-tooltips.test-model"),
148155
id: "navTestModel",
149156
orderIndex: 8,
150157
iconfn: (iconProps) => <PlaylistAddCheckIcon {...iconProps} />,
151158
getPath: (params = {}) => generatePath(ROUTES.MAIN.MODEL_TEST.path, { ...params }),
152159
},
153160
{
154161
title: i18n.t("layout:nav-drawer.menu-item-download-model"),
162+
tooltip: i18n.t("layout:nav-drawer-tooltips.download-model"),
155163
id: "navDownloadModel",
156164
orderIndex: 9,
157165
iconfn: (iconProps) => <CloudDownloadIcon {...iconProps} />,

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

+9-5
Original file line numberDiff line numberDiff line change
@@ -167,14 +167,18 @@ const NavDrawer = ({
167167
})}
168168
disabled={selectedProject === null}
169169
>
170-
<ListItem key={menuItem.id} id={menuItem.id}>
171-
<Tooltip title={menuItem.title} aria-label="add">
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}>
172176
<ListItemIcon className={classes.iconButton}>
173177
{menuItem.iconfn(getMenuProps(menuItem.orderIndex))}
174178
</ListItemIcon>
175-
</Tooltip>
176-
<ListItemText primary={menuItem.title} />
177-
</ListItem>
179+
<ListItemText primary={menuItem.title} />
180+
</ListItem>
181+
</Tooltip>
178182
</NavLink>
179183

180184
{menuItem?.subItems ? (

‎src/ui/src/components/ModelControlPanel/ModelControlPanel.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const ModelControlPanel = ({
3838
onChangePlatform,
3939
downloading,
4040
handleDownloadRequest,
41+
onShowInformation,
4142
}) => {
4243
const { t } = useTranslation("models");
4344
const routersHistory = useHistory();
@@ -108,6 +109,7 @@ const ModelControlPanel = ({
108109
/>
109110
</>
110111
}
112+
onShowInformation={onShowInformation}
111113
/>
112114
);
113115
};

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { useHistory, generatePath, useParams } from "react-router-dom";
2727
import { useTranslation } from "react-i18next";
2828
import { Box, Typography } from "@mui/material";
2929
import { ROUTES } from "routers";
30-
import { useWindowResize } from "hooks";
30+
import { useWindowResize, useMainContext, useReadFileText } from "hooks";
3131
import { RESPONSIVE } from "consts";
3232
import { UIButtonConvertibleToShort } from "components/UIButtons";
3333

@@ -40,6 +40,8 @@ import PipelineTemplateCreateForm from "components/PipelineTemplateCreateForm";
4040

4141
import { DEFAULT_CLASSIFIER, PIPELINE_STEP_TYPES } from "store/autoML/const";
4242

43+
import infoFile from "i18n/locales/en/info-pipelines.md";
44+
4345
import useStyles from "../BuildModeStyle";
4446
import SelectCard from "../components/SelectCard";
4547

@@ -73,6 +75,9 @@ const TheSelectScreen = ({
7375

7476
const [isShortBtnText, setIsShortBtnText] = useState(false);
7577

78+
const { showInformationWindow } = useMainContext();
79+
const screenInfoMd = useReadFileText(infoFile);
80+
7681
useWindowResize((data) => {
7782
setIsShortBtnText(data.innerWidth < RESPONSIVE.WIDTH_FOR_SHORT_TEXT);
7883
});
@@ -243,6 +248,7 @@ const TheSelectScreen = ({
243248
/>
244249
</>
245250
}
251+
onShowInformation={() => showInformationWindow("Pipelines", screenInfoMd)}
246252
/>
247253
</Box>
248254
<Box mb={2}>

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

+14-3
Original file line numberDiff line numberDiff line change
@@ -27,34 +27,45 @@ import { ROUTES } from "routers";
2727
import TheQueryScreen from "./TheQueryScreen";
2828

2929
import { DataExplorerContext } from "./context";
30+
import { useMainContext, useReadFileText } from "hooks";
3031
import { AppLoader } from "components/UILoaders";
32+
import infoFile from "i18n/locales/en/info-queries.md";
3133

3234
const TheQueryDetailScreen = lazy(() => import("./TheQueryDetailScreen"));
3335
const TheQueryCreateScreen = lazy(() => import("./TheQueryCreateScreen"));
3436

3537
const TheDataExplorer = () => {
3638
const { projectUUID } = useParams();
3739

40+
const { showInformationWindow } = useMainContext();
41+
const screenInfoMd = useReadFileText(infoFile);
42+
3843
return (
3944
<ErrorBoundary>
4045
<Box>
4146
<Switch>
4247
<Route path={ROUTES.MAIN.DATA_EXPLORER.child.QUERY_SCREEN.path}>
4348
<DataExplorerContext.Provider>
44-
<TheQueryScreen />
49+
<TheQueryScreen
50+
onShowInformation={() => showInformationWindow("Querying Data", screenInfoMd)}
51+
/>
4552
</DataExplorerContext.Provider>
4653
</Route>
4754
<Route path={ROUTES.MAIN.DATA_EXPLORER.child.QUERY_DETAILS_SCREEN.path}>
4855
<DataExplorerContext.Provider>
4956
<Suspense fallback={<AppLoader isOpen />}>
50-
<TheQueryDetailScreen />
57+
<TheQueryDetailScreen
58+
onShowInformation={() => showInformationWindow("Querying Data", screenInfoMd)}
59+
/>
5160
</Suspense>
5261
</DataExplorerContext.Provider>
5362
</Route>
5463
<Route path={ROUTES.MAIN.DATA_EXPLORER.child.QUERY_CREATE_SCREEN.path}>
5564
<DataExplorerContext.Provider>
5665
<Suspense fallback={<AppLoader isOpen />}>
57-
<TheQueryCreateScreen />
66+
<TheQueryCreateScreen
67+
onShowInformation={() => showInformationWindow("Querying Data", screenInfoMd)}
68+
/>
5869
</Suspense>
5970
</DataExplorerContext.Provider>
6071
</Route>

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

+2
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ const TheQueryDetailScreen = ({
6767
loadQueries,
6868
setHasUnsavedChanges,
6969
resetFeatureStats,
70+
onShowInformation,
7071
}) => {
7172
const { projectUUID } = useParams();
7273
const { queryUUID } = useParams();
@@ -290,6 +291,7 @@ const TheQueryDetailScreen = ({
290291
? RESPONSIVE.TRUNCATE_NAME_OVER_SHORT_TEXT
291292
: RESPONSIVE.TRUNCATE_NAME_OVER
292293
}
294+
onShowInformation={onShowInformation}
293295
leftColumns={4}
294296
rightColumns={8}
295297
actionsBtns={

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

+5-4
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { useWindowResize } from "hooks";
2828
import { RESPONSIVE } from "consts";
2929
import { UIButtonConvertibleToShort } from "components/UIButtons";
3030

31-
const TheQueryScreen = () => {
31+
const TheQueryScreen = ({ onShowInformation }) => {
3232
// eslint-disable-next-line no-unused-vars
3333
const { projectUUID } = useParams();
3434
const routersHistory = useHistory();
@@ -39,7 +39,7 @@ const TheQueryScreen = () => {
3939
setIsShortBtnText(data.innerWidth < RESPONSIVE.WIDTH_FOR_SHORT_TEXT);
4040
});
4141

42-
const handledleUpdateAction = () => {
42+
const handleUpdateAction = () => {
4343
routersHistory.push({
4444
pathname: generatePath(ROUTES.MAIN.DATA_EXPLORER.child.QUERY_SCREEN.path, {
4545
projectUUID,
@@ -59,7 +59,8 @@ const TheQueryScreen = () => {
5959
<>
6060
<Box mb={2}>
6161
<ControlPanel
62-
title={"Data Explorer"}
62+
title={"Querying Data"}
63+
onShowInformation={onShowInformation}
6364
actionsBtns={
6465
<>
6566
<UIButtonConvertibleToShort
@@ -76,7 +77,7 @@ const TheQueryScreen = () => {
7677
/>
7778
</Box>
7879
<Box>
79-
<QueriesTable onUpdateProjectAction={handledleUpdateAction} />
80+
<QueriesTable onUpdateProjectAction={handleUpdateAction} />
8081
</Box>
8182
</>
8283
);

‎src/ui/src/containers/DataManager/TheCaptureDetailsScreen/TheCaptureDetailsScreen.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ const TheCaptureDetailsScreen = ({
8585
setHasUnsavedChanges,
8686
setSelectedLabel,
8787
updateCapturesStatisticsSegments,
88+
onShowInformation,
8889
}) => {
8990
const classes = useStyles();
9091
const routersHistory = useHistory();
@@ -548,6 +549,7 @@ const TheCaptureDetailsScreen = ({
548549
/>
549550
</>
550551
}
552+
onShowInformation={onShowInformation}
551553
/>
552554
</Box>
553555
<Box mb={1}>

‎src/ui/src/containers/DataManager/TheCapturesScreen/TheCapturesScreen.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ const TheCapturesScreen = ({
7272
loadSources,
7373
deleteCapture,
7474
createDefaultMetadata,
75+
onShowInformation,
7576
}) => {
7677
const classes = useStyles();
7778
const { projectUUID } = useParams();
@@ -193,6 +194,7 @@ const TheCapturesScreen = ({
193194
/>
194195
</>
195196
}
197+
onShowInformation={onShowInformation}
196198
/>
197199
</Box>
198200
<DialogInformation isOpen={isOpenImport} onClose={handleCloseImportForm}>

‎src/ui/src/containers/DataManager/TheDataManager.jsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,13 @@ import DialogTableSelect from "components/UIDialogTableSelect";
3636

3737
import { ROUTES } from "routers";
3838

39-
import { useRouterSearchParams } from "hooks";
39+
import { useRouterSearchParams, useMainContext, useReadFileText } from "hooks";
40+
4041
import TheCapturesScreen from "./TheCapturesScreen";
4142

4243
import { DataManagerContext } from "./context";
4344
import { AppLoader } from "components/UILoaders";
45+
import infoFile from "i18n/locales/en/info-data-manager.md";
4446

4547
// Lazy loading optional screen
4648
const TheCaptureDetailsScreen = lazy(() => import("./TheCaptureDetailsScreen"));
@@ -59,6 +61,9 @@ const TheDataManager = ({
5961
const { projectUUID } = useParams();
6062
const { t } = useTranslation("data-manager");
6163

64+
const { showInformationWindow } = useMainContext();
65+
const screenInfoMd = useReadFileText(infoFile);
66+
6267
const sessionsToSelect = useMemo(() => {
6368
return sessions.map((session) => ({
6469
...session,
@@ -120,7 +125,10 @@ const TheDataManager = ({
120125
<DataManagerContext.Provider
121126
value={{ onOpenSelectSessionDialog: handleOpenSelectSessionDialog }}
122127
>
123-
<TheCapturesScreen selectedSession={selectedSession} />
128+
<TheCapturesScreen
129+
onShowInformation={() => showInformationWindow("Data Manager", screenInfoMd)}
130+
selectedSession={selectedSession}
131+
/>
124132
</DataManagerContext.Provider>
125133
</Route>
126134
<Route path={ROUTES.MAIN.DATA_MANAGER.child.CAPTURE_DETAILS_SCREEN.path}>
@@ -129,6 +137,7 @@ const TheDataManager = ({
129137
>
130138
<Suspense fallback={AppLoader}>
131139
<TheCaptureDetailsScreen
140+
onShowInformation={() => showInformationWindow("Data Manager", screenInfoMd)}
132141
selectedSession={selectedSession}
133142
isDisabledByAutoSession={isDisabledByAutoSession}
134143
isReadOnlyMode={isReadOnlyMode}

0 commit comments

Comments
 (0)