Skip to content

Commit

Permalink
Tutorial integration (#1208)
Browse files Browse the repository at this point in the history
* Integrating the tutorial api into the eyeballing application

* Integrating the tutorial api into the eyeballing application

* Small revision after Glauber's pull request validation
  • Loading branch information
matheusallein authored and glaubervila committed Jan 27, 2020
1 parent 75eae20 commit d0d0a6c
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 3 deletions.
1 change: 1 addition & 0 deletions frontend/eyeballing/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"prop-types": "^15.7.2",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-player": "^1.14.2",
"react-router-dom": "^5.0.1",
"react-virtuoso": "^0.12.1",
"react-window": "^1.8.2",
Expand Down
2 changes: 2 additions & 0 deletions frontend/eyeballing/src/api/Api.js
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,8 @@ class DriApi {
getDatasetCommentsByType = (dts_dataset, type) => axios.get('/comment/dataset/', {
params: { dts_dataset, dts_type: type },
}).then(res => res.data);

getTutorial = () => axios.get('/tutorial/', { params: { app_name: 'tile_inspection' } }).then(res => res.data);
}
export default DriApi;

Expand Down
36 changes: 33 additions & 3 deletions frontend/eyeballing/src/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@ import HomeIcon from '@material-ui/icons/Home';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import MenuIcon from '@material-ui/icons/Menu';
import HelpIcon from '@material-ui/icons/Help';
import SelectReleases from './SelectReleases';
import logo from '../assets/img/icon-des.png';
import { logout } from '../api/Api';
import TutorialDialog from './TutorialDialog';

const styles = theme => ({
appBar: {
Expand All @@ -35,10 +37,11 @@ const styles = theme => ({

function Header(props) {
const {
classes, title, username, releases, currentRelease,
classes, title, username, releases, currentRelease, tutorial,
} = props;

const [anchorEl, setAnchorEl] = React.useState(null);
const [tutorialOpen, setTutorialOpen] = React.useState(false);

function handleClick(event) {
setAnchorEl(event.currentTarget);
Expand All @@ -53,6 +56,14 @@ function Header(props) {
logout();
}

function handleHomeEyeballing() {
const { protocol } = window.location;
const { host } = window.location;
const location = `${protocol}//${host}/eyeballing`;

window.location.assign(location);
}

function handleHome() {
const { protocol } = window.location;
const { host } = window.location;
Expand All @@ -65,11 +76,15 @@ function Header(props) {
setAnchorEl(null);
}

function handleHelp() {
setTutorialOpen(true);
}

return (
<React.Fragment>
<AppBar position="static">
<Toolbar>
<IconButton color="inherit">
<IconButton color="inherit" onClick={handleHomeEyeballing}>
<img alt="logo DES" src={logo} />
</IconButton>
<Typography className={classes.grow} variant="h6" color="inherit">
Expand All @@ -91,19 +106,29 @@ function Header(props) {
</Typography>
<IconButton
color="inherit"
className={classes.menuButton}
// className={classes.menuButton}
onClick={handleHome}
>
<HomeIcon />
</IconButton>

<IconButton
// className={classes.menuButton}
onClick={handleHelp}
color="inherit"
title="Help"
>
<HelpIcon />
</IconButton>

<IconButton
className={classes.menuButton}
onClick={handleClick}
color="inherit"
>
<MenuIcon />
</IconButton>

<Menu
id="simple-menu"
anchorEl={anchorEl}
Expand All @@ -116,6 +141,11 @@ function Header(props) {
</Menu>
</Toolbar>
</AppBar>
<TutorialDialog
open={tutorialOpen}
setClose={() => setTutorialOpen(false)}
data={tutorial}
/>
</React.Fragment>
);
}
Expand Down
85 changes: 85 additions & 0 deletions frontend/eyeballing/src/components/TutorialDialog.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import DialogTitle from '@material-ui/core/DialogTitle';
import Dialog from '@material-ui/core/Dialog';
import Grid from '@material-ui/core/Grid';
import DialogContent from '@material-ui/core/DialogContent';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Divider from '@material-ui/core/Divider';
import { makeStyles } from '@material-ui/core/styles';
import YouTubePlayer from 'react-player/lib/players/YouTube';

const useStyles = makeStyles(theme => ({
closeButton: {
position: 'absolute',
right: theme.spacing(1),
top: theme.spacing(1),
color: theme.palette.grey[500],
},
closeIcon: {
fontSize: '1rem',
},
playerWrapper: {
position: 'relative',
},
blockWrapper: {
marginBottom: theme.spacing(4),
},
contentWrapper: {
marginTop: theme.spacing(2),
},
}));

function TutorialDialog({
open,
setClose,
data,
}) {
const classes = useStyles();

return (
<Dialog onClose={setClose} open={open} fullWidth maxWidth="md" style={{ zIndex: 9999 }}>
<DialogContent dividers>
<DialogTitle>Tutorial</DialogTitle>
<IconButton aria-label="Close" className={classes.closeButton} onClick={setClose}>
<CloseIcon className={classes.closeIcon} />
</IconButton>
<Divider />
<Grid container spacing={3} className={classes.contentWrapper}>
{data.map(row => (
<Fragment key={row.id}>
<Grid item xs={12}>
<div className={classes.blockWrapper}>
<Typography variant="h6" component="h2">
{row.ttr_title}
</Typography>
<Typography variant="subtitle1" component="p">
{row.ttr_description}
</Typography>
<div className={classes.playerWrapper}>
<YouTubePlayer
url={row.ttr_src}
width="auto"
controls
/>
</div>
</div>
<Divider />
</Grid>
</Fragment>
))}
</Grid>
</DialogContent>
</Dialog>
);
}

TutorialDialog.propTypes = {
open: PropTypes.bool.isRequired,
setClose: PropTypes.func.isRequired,
data: PropTypes.arrayOf(PropTypes.object).isRequired,
};

export default TutorialDialog;
3 changes: 3 additions & 0 deletions frontend/eyeballing/src/home.js
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@ function Home() {
const [totalCount, setTotalCount] = useState(0);
const [commentsWithFeature, setCommentsWithFeature] = useState([]);
const datasetLoading = useRef(false);
const [tutorial, setTutorial] = useState([]);


const api = new DriApi();
Expand All @@ -152,6 +153,7 @@ function Home() {
setReleases(res);
setCurrentRelease(res.length > 0 ? res[0].id : '');
});
api.getTutorial().then(res => setTutorial(res));
}, []);

const loadMoreDatasets = useCallback((e) => {
Expand Down Expand Up @@ -409,6 +411,7 @@ function Home() {
title="Tile Inspection"
username={username}
releases={releases}
tutorial={tutorial}
currentRelease={currentRelease}
onChangeRelease={onChangeRelease}
/>
Expand Down

0 comments on commit d0d0a6c

Please sign in to comment.