Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Do ui 4 #7

Merged
merged 3 commits into from
Oct 23, 2019
Merged

Do ui 4 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a39a9d8
Changes to model page
GFibrizo Oct 14, 2019
29c7428
Merge remote-tracking branch 'origin/master' into DO-UI-4
GFibrizo Oct 14, 2019
cedacc8
Change of training flow applied in the UI. Using nodejs proxy backend…
GFibrizo Oct 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "data-owner-ui",
"version": "1.0.0",
"proxy": "http://localhost:4000",
"dependencies": {
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
Expand Down
2 changes: 1 addition & 1 deletion scripts/copy_build.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
#!/usr/bin/env bash
mkdir ../../data-owner/node-server/static
mkdir -p ../../data-owner/node-server/static
cp -r ../build ../../data-owner/node-server/static
21 changes: 8 additions & 13 deletions src/components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import {BrowserRouter, Redirect, Route, Switch} from 'react-router-dom';
import {BrowserRouter, HashRouter, Redirect, Route, Switch} from 'react-router-dom';
import {createMuiTheme, MuiThemeProvider} from '@material-ui/core/styles';

import themes, {overrides} from '../themes';
Expand Down Expand Up @@ -48,23 +48,18 @@ const PublicRoute = ({component, ...rest}) => {

const App = () => (
<MuiThemeProvider theme={theme}>
<BrowserRouter>
<HashRouter>
<Switch>
<Route exact path="/" render={() => <Redirect to="/app/home"/>}/>
<Route exact path="/app" render={() => <Redirect to="/app/home"/>}/>
<Route exact path="/app/datasets" render={() => <Redirect to="/app/datasets"/>}/>
<Route exact path="/app/upload-dataset" render={() => <Redirect to="/app/upload-dataset"/>}/>
<Route exact path="/app/models" render={() => <Redirect to="/app/models"/>}/>
<Route exact path="/app/model" render={() => <Redirect to="/app/model"/>}/>
<PrivateRoute path="/app" component={Layout}/>
<PrivateRoute path="/app/upload-dataset" component={Layout}/>
<PrivateRoute path="/app/datasets" component={Layout}/>
<PrivateRoute path="/app/models" component={Layout}/>
<PrivateRoute path="/app/model" component={Layout}/>
<Route path="/app" component={Layout}/>
<Route path="/app/upload-dataset" component={Layout}/>
<Route path="/app/datasets" component={Layout}/>
<Route path="/app/models" component={Layout}/>
<Route path="/app/model" component={Layout}/>
<PublicRoute path="/login" component={Login}/>
<Route component={Error}/>
</Switch>
</BrowserRouter>
</HashRouter>
</MuiThemeProvider>
);

Expand Down
6 changes: 3 additions & 3 deletions src/components/Layout/LayoutView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import {CssBaseline, withStyles} from '@material-ui/core';
import {BrowserRouter, Redirect, Route, Switch} from 'react-router-dom';
import {BrowserRouter, HashRouter, Redirect, Route, Switch} from 'react-router-dom';
import classnames from 'classnames';

import Header from '../Header';
Expand All @@ -21,7 +21,7 @@ import Charts from '../../pages/charts';
const Layout = ({classes, isSidebarOpened, toggleSidebar}) => (
<div className={classes.root}>
<CssBaseline/>
<BrowserRouter>
<HashRouter>
<React.Fragment>
<Header/>
<Sidebar/>
Expand All @@ -43,7 +43,7 @@ const Layout = ({classes, isSidebarOpened, toggleSidebar}) => (
</Switch>
</div>
</React.Fragment>
</BrowserRouter>
</HashRouter>
</div>
);

Expand Down
2 changes: 2 additions & 0 deletions src/components/PageTitle/PageTitle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ const PageTitle = ({classes, ...props}) => (
variant="contained"
size="large"
color="secondary"
disabled={props.disabled}
onClick={props.onClick}
component={Link} to={props.buttonTo}
>
{props.button}
Expand Down
2 changes: 1 addition & 1 deletion src/config/ServerConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const serverProtocol = "http";
export const serverDomain = "localhost";
export const serverPort = 5000;
export const serverPort = 4000;

216 changes: 116 additions & 100 deletions src/pages/model/Model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,19 @@ import {Typography} from "../../components/Wrappers";
import Dot from "../../components/Sidebar/components/Dot";
import BigStat from "./components/BigStat/BigStat";
import PageTitle from "../../components/PageTitle";
import {acceptModelTraining} from "./ModelState"

const Model = ({classes, theme, ...props}) => {
console.log("-------------- STATUS -----------");
console.log(props);
console.log(props.model.status);
return (
<React.Fragment>
<PageTitle title={props.model.name} modal="Show Model" modalData={props.model.weights}/>
{((props.model.status !== "WAITING") && (props.model.status !== "READY")) ?
<PageTitle title={props.model.name} disabled={false} modal="Show Model" modalData={props.model.weights}/>
:
<PageTitle title={props.model.name} onClick={props.handleModelTraining} disabled={props.model.status !== "READY"} button="Train model" buttonTo={"/app/model/" + props.model.id} />
}
<Grid container spacing={32}>
<Grid item lg={3} md={4} sm={6} xs={12}>
<ModelWidget
Expand All @@ -35,111 +43,119 @@ const Model = ({classes, theme, ...props}) => {
</ModelWidget>
</Grid>

<Grid item md={4} sm={6} xs={12}>
<BigStat mse={props.metrics.mse} improvement={props.metrics.improvement}
initialMse={props.metrics.initial_mse} iterations={props.metrics.iterations}/>
</Grid>

{ ((props.model.status !== "WAITING") && (props.model.status !== "READY")) ?
<Grid item md={4} sm={6} xs={12}>
<BigStat mse={props.metrics.mse} improvement={props.metrics.improvement}
initialMse={props.metrics.initial_mse} iterations={props.metrics.iterations}/>
</Grid>
:
<Grid item md={4} sm={6} xs={12}>
{props.model.requirements}
</Grid>
}

<Grid item lg={3} md={4} sm={6} xs={12}>
<ModelWidget
title="Spent Money"
upperTitle
bodyClass={classes.fullHeightBody}
className={classes.card}
>
<div className={classes.visitsNumberContainer}>
<Typography size="xl" weight="medium">
$10/$100
</Typography>
</div>
<Grid
container
direction="row"
justify="space-between"
alignItems="center"
{ ((props.model.status !== "WAITING") && (props.model.status !== "READY")) ?
<Grid item lg={3} md={4} sm={6} xs={12}>
<ModelWidget
title="Spent Money"
upperTitle
bodyClass={classes.fullHeightBody}
className={classes.card}
>
</Grid>
</ModelWidget>
</Grid>

<Grid item xs={12}>
<ModelWidget
bodyClass={classes.mainChartBody}
header={
<div className={classes.mainChartHeader}>
<Typography variant="headline" color="textSecondary">
MSE Comparatives
<div className={classes.visitsNumberContainer}>
<Typography size="xl" weight="medium">
$10/$100
</Typography>
<div className={classes.mainChartHeaderLabels}>
<div className={classes.mainChartHeaderLabel}>
<Dot color="warning"/>
<Typography className={classes.mainChartLegentElement}>Initial</Typography>
</div>
<div className={classes.mainChartHeaderLabel}>
<Dot color="primary"/>
<Typography className={classes.mainChartLegentElement}>Partial</Typography>
</div>
<div className={classes.mainChartHeaderLabel}>
<Dot color="success"/>
<Typography className={classes.mainChartLegentElement}>Final</Typography>
</div>
</div>
</div>
}
>
<ResponsiveContainer width="100%" minWidth={500} height={350}>
<ComposedChart
margin={{top: 0, right: -15, left: -15, bottom: 0}}
data={props.chart.data}
<Grid
container
direction="row"
justify="space-between"
alignItems="center"
>
<YAxis
ticks={[0, 1000, 2000, 5000, 10000, 30000]}
tick={{fill: theme.palette.text.hint + '80', fontSize: 14}}
stroke={theme.palette.text.hint + '80'}
tickLine={false}
/>
<XAxis
tickFormatter={i => i + 1}
tick={{fill: theme.palette.text.hint + '80', fontSize: 14}}
stroke={theme.palette.text.hint + '80'}
tickLine={false}
/>
<Line
type="natural"
dataKey="initial"
fill={theme.palette.background.light}
strokeWidth={2}
dot={false}
activeDot={false}
strokeDasharray="5 5"
/>
<Line
type="natural"
dataKey="partial"
stroke={theme.palette.primary.main}
strokeWidth={2}
dot={{
stroke: theme.palette.primary.main,
strokeWidth: 2,
fill: theme.palette.primary.main
}}
activeDot={false}
/>
<Line
type="linear"
dataKey="final"
stroke={theme.palette.success.main}
strokeWidth={2}
strokeDasharray="5 5"
dot={false}
/>
</ComposedChart>
</ResponsiveContainer>
</ModelWidget>
</Grid>
</Grid>
</Grid>
</ModelWidget>
</Grid>
: null }

{ ((props.model.status !== "WAITING") && (props.model.status !== "READY")) ?
<Grid item xs={12}>
<ModelWidget
bodyClass={classes.mainChartBody}
header={
<div className={classes.mainChartHeader}>
<Typography variant="headline" color="textSecondary">
MSE Comparatives
</Typography>
<div className={classes.mainChartHeaderLabels}>
<div className={classes.mainChartHeaderLabel}>
<Dot color="warning"/>
<Typography className={classes.mainChartLegentElement}>Initial</Typography>
</div>
<div className={classes.mainChartHeaderLabel}>
<Dot color="primary"/>
<Typography className={classes.mainChartLegentElement}>Partial</Typography>
</div>
<div className={classes.mainChartHeaderLabel}>
<Dot color="success"/>
<Typography className={classes.mainChartLegentElement}>Final</Typography>
</div>
</div>
</div>
}
>
<ResponsiveContainer width="100%" minWidth={500} height={350}>
<ComposedChart
margin={{top: 0, right: -15, left: -15, bottom: 0}}
data={props.chart.data}
>
<YAxis
ticks={[0, 1000, 2000, 5000, 10000, 30000]}
tick={{fill: theme.palette.text.hint + '80', fontSize: 14}}
stroke={theme.palette.text.hint + '80'}
tickLine={false}
/>
<XAxis
tickFormatter={i => i + 1}
tick={{fill: theme.palette.text.hint + '80', fontSize: 14}}
stroke={theme.palette.text.hint + '80'}
tickLine={false}
/>
<Line
type="natural"
dataKey="initial"
fill={theme.palette.background.light}
strokeWidth={2}
dot={false}
activeDot={false}
strokeDasharray="5 5"
/>
<Line
type="natural"
dataKey="partial"
stroke={theme.palette.primary.main}
strokeWidth={2}
dot={{
stroke: theme.palette.primary.main,
strokeWidth: 2,
fill: theme.palette.primary.main
}}
activeDot={false}
/>
<Line
type="linear"
dataKey="final"
stroke={theme.palette.success.main}
strokeWidth={2}
strokeDasharray="5 5"
dot={false}
/>
</ComposedChart>
</ResponsiveContainer>
</ModelWidget>
</Grid>
: null }
</Grid>
</React.Fragment>
);
};
Expand Down
13 changes: 10 additions & 3 deletions src/pages/model/ModelContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {compose, lifecycle, withState} from "recompose";
import {compose, lifecycle, withHandlers, withState} from "recompose";
import {connect} from "react-redux";
import ModelView from "./Model";
import {fetchingModelData} from "./ModelState";
import {fetchingModelData, acceptModelTraining} from "./ModelState";
import withRouter from "react-router/es/withRouter";


export default compose(
Expand All @@ -12,8 +13,14 @@ export default compose(
metrics: state.model.metrics,
chart: state.model.chart
}),
{fetchingModelData}
{fetchingModelData, acceptModelTraining}
),
withRouter,
withHandlers({
handleModelTraining: props => () => {
props.acceptModelTraining(props);
}
}),
withState("mainChartState", "setMainChartState", "monthly"),
lifecycle({
componentWillMount() {
Expand Down
Loading