Merge pull request #21 from ModelChimp/feature/custom-plots

Matplot Feature

Author: samzer

README.md

@@ -72,7 +72,44 @@ DEFAULT_FROM_EMAIL="noreply@modelchimp.com"
 
 
 ### Production Deployment
-For production deployment, contact Karthik at karthik@modelchimp.com
+
+1. Modelchimp can be deployed referring the docker-compose.local.yml with the container orchestration of your choice. If you are not using any container orchestration and want to start it manually then you can use the following command
+
+```sh
+docker-compose -f docker-compose.local.yml up --build -d
+```
+
+This will start the containers in daemon mode on the machine where Modelchimp resides. Modelchimp can be accessed from port 8000
+
+2. (Optional) To store the data in an external postgres database. Add the following credentials to the .env file
+
+```sh
+DB_HOST=<DB_HOST>
+DB_NAME=<DB_NAME>
+DB_USER=<DB_USER>
+DB_PASSWORD=<DB_PASSWORD>
+DBPORT=
+```
+
+3. (Optional) To store the file assets in an s3 bucket. Add the following credentials to the .env file
+
+```sh
+AWS_STORAGE_FLAG=True
+AWS_ACCESS_KEY_ID=<ID>
+AWS_SECRET_ACCESS_KEY=<KEY>
+AWS_STORAGE_BUCKET_NAME=<bucket_name>
+```
+
+4. (Optional) To invite team members to a project. Add the following email credentials to the .env file
+
+```sh
+EMAIL_HOST=
+EMAIL_HOST_USER=
+EMAIL_HOST_PASSWORD=
+EMAIL_PORT=587
+DEFAULT_FROM_EMAIL="noreply@modelchimp.com"
+```
+
 
 ## Documentation
 - Getting Started - https://docs.modelchimp.com/#installation

client/app/components/Section/index.js

@@ -8,9 +8,16 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-const Section = ({ name, style, className, children, h3 }) => (
+const Section = ({ name, description, style, className, children, h3 }) => (
  <section className={className} style={style}>
- {h3 ? <h3>{name}</h3> : <h2>{name}</h2>}
+ <div class="heading-wrapper">
+ {h3 ? <h3>{name}</h3> : <h2>{name}</h2>}
+
+ <p>
+ {description}
+ </p>
+ </div>
+
  {children}
  </section>
 );
@@ -27,13 +34,17 @@ const StyledSection = styled(Section)`
  margin-top: 30px;
 
  h2 {
- border-bottom: 1px solid grey;
  color: grey;
  }
 
  h3 {
+ color: grey;
+ }
+
+ .heading-wrapper {
  border-bottom: 1px solid grey;
  color: grey;
+ margin-bottom: 20px;
  }
 `;
 

client/app/containers/ExperimentDetail/constants.js

@@ -29,3 +29,4 @@ export const EXPERIMENT_TAB_CHARTS = 'app/ExperimentDetail/EXPERIMENT_TAB_CHARTS
 export const EXPERIMENT_TAB_OBJECTS = 'app/ExperimentDetail/EXPERIMENT_TAB_OBJECTS';
 export const EXPERIMENT_TAB_GRIDSEARCH = 'app/ExperimentDetail/EXPERIMENT_TAB_GRIDSEARCH';
 export const EXPERIMENT_TAB_ASSET = 'app/ExperimentDetail/EXPERIMENT_TAB_ASSET';
+export const EXPERIMENT_TAB_MATPLOTS = 'app/ExperimentDetail/EXPERIMENT_TAB_MATPLOTS';

client/app/containers/ExperimentDetail/index.js

@@ -21,6 +21,7 @@ import ExperimentDetailChartPage from 'containers/ExperimentDetailChartPage/Load
 import ExperimentDetailObjectPage from 'containers/ExperimentDetailObjectPage/Loadable';
 import ExperimentDetailGridSearchPage from 'containers/ExperimentDetailGridSearchPage/Loadable';
 import ExperimentDetailAssetPage from 'containers/ExperimentDetailAssetPage/Loadable';
+import ExperimentDetailMatPlotPage from 'containers/ExperimentDetailMatPlotPage/Loadable';
 
 import {
  EXPERIMENT_TAB_METRICS,
@@ -30,6 +31,7 @@ import {
  EXPERIMENT_TAB_OBJECTS,
  EXPERIMENT_TAB_GRIDSEARCH,
  EXPERIMENT_TAB_ASSET,
+ EXPERIMENT_TAB_MATPLOTS,
 } from './constants';
 
 import { loadExperimentDetailAction,
@@ -121,6 +123,11 @@ export class ExperimentDetail extends React.Component {
  <FontAwesomeIcon icon="chart-line" /> Charts
  </Link>
  </Menu.Item>
+ <Menu.Item key={EXPERIMENT_TAB_MATPLOTS}>
+ <Link to={`${this.props.match.url}/matplot`}>
+ <FontAwesomeIcon icon="chart-bar" /> MatPlot
+ </Link>
+ </Menu.Item>
  <Menu.Item key={EXPERIMENT_TAB_OBJECTS}>
  <Link to={`${this.props.match.url}/object`}>
  <FontAwesomeIcon icon="database" /> Objects
@@ -191,6 +198,10 @@ export class ExperimentDetail extends React.Component {
  path={`${this.props.match.path}/chart`}
  component={ExperimentDetailChartPage}
  />
+ <Route
+ path={`${this.props.match.path}/matplot`}
+ component={ExperimentDetailMatPlotPage}
+ />
  <Route
  path={`${this.props.match.path}/object`}
  component={ExperimentDetailObjectPage}

client/app/containers/ExperimentDetailAssetPage/index.js

@@ -152,7 +152,9 @@ export class ExperimentDetailAssetPage extends React.Component {
 
  render() {
  return (
- <Section name="Assets">
+ <Section name="Assets"
+ description="Store assets such as images, text and model files from an experiment along with any meta information associated with it"
+ >
  <Input placeholder="Search"
  onChange={this.onSearch}
  style={{width:'30vw', margin:'10px'}}/>

client/app/containers/ExperimentDetailChartPage/index.js

@@ -49,11 +49,15 @@ export class ExperimentDetailChartPage extends React.Component {
 
  return (
  <div>
- <Section name="Metric Chart">
+ <Section name="Metric Chart"
+ description="Visualize metrics captured at epoch level"
+ >
  {mData &&
  mData.metric_list.map((e, i) => this.createMetricChart(e, i))}
  </Section>
- <Section name="Duration Chart">
+ <Section name="Duration Chart"
+ description="Visualize durations captured at epoch level"
+ >
  {dData &&
  dData.tag_list.map((e, i) => this.createDurationChart(e, i))}
  </Section>

client/app/containers/ExperimentDetailCodePage/index.js

@@ -57,7 +57,9 @@ export class ExperimentDetailCodePage extends React.Component {
 
 
  return (
- <Section name="Code">
+ <Section name="Code"
+ description="Code of the current experiment"
+ >
  <link rel="stylesheet" href={CodeStyle} />
  {content}
  </Section>

client/app/containers/ExperimentDetailGridSearchPage/index.js

@@ -77,7 +77,9 @@ export class ExperimentDetailGridSearchPage extends React.Component {
  } = this.props;
  const renderHTML =
  gridsearchData && gridsearchData.length > 0 ? (
- <Section name="GridSearch">
+ <Section name="GridSearch"
+ description="Store and Analyze the sklearn's GridSearchCV"
+ >
  <ChartMenu />
  <Plot
  data={parseChartData(
@@ -100,7 +102,9 @@ export class ExperimentDetailGridSearchPage extends React.Component {
  </Wrapper>
  </Section>
  ) : (
- <Section name="GridSearch">No Data</Section>
+ <Section name="GridSearch"
+ description="Store and analyze the sklearn's GridSearchCV"
+ >No Data</Section>
  );
 
  return <div>{renderHTML}</div>;
@@ -139,7 +143,7 @@ function mapDispatchToProps(dispatch) {
  setParamCols: paramCols => dispatch(setParamColsAction(paramCols)),
  setFilter: filter => dispatch(setFilterAction(filter)),
  onExperimentTabSelect: tabKey =>
- dispatch(onExperimentTabSelect(tabKey)), 
+ dispatch(onExperimentTabSelect(tabKey)),
  };
 }
 

client/app/containers/ExperimentDetailMatPlotPage/Loadable.js

@@ -0,0 +1,13 @@
+/**
+ *
+ * Asynchronously loads the component for ExperimentDetailMatPlotPage
+ *
+ */
+
+import loadable from 'loadable-components';
+
+import LoadingIndicator from 'components/LoadingIndicator';
+
+export default loadable(() => import('./index'), {
+ LoadingComponent: LoadingIndicator,
+});

client/app/containers/ExperimentDetailMatPlotPage/actions.js

@@ -0,0 +1,32 @@
+/*
+ *
+ * ExperimentDetailMatPlotPage actions
+ *
+ */
+
+import {
+ LOAD_EXPERIMENT_DETAIL_MATPLOT,
+ LOAD_EXPERIMENT_DETAIL_MATPLOT_SUCCESS,
+ LOAD_EXPERIMENT_DETAIL_MATPLOT_ERROR,
+} from './constants';
+
+export function loadExperimentMatPlotAction(modelId) {
+ return {
+ type: LOAD_EXPERIMENT_DETAIL_MATPLOT,
+ modelId,
+ };
+}
+
+export function loadExperimentMatPlotSuccessAction(matPlotData) {
+ return {
+ type: LOAD_EXPERIMENT_DETAIL_MATPLOT_SUCCESS,
+ matPlotData,
+ };
+}
+
+export function loadExperimentMatPlotErrorAction(error) {
+ return {
+ type: LOAD_EXPERIMENT_DETAIL_MATPLOT_ERROR,
+ error,
+ };
+}