make project cards look nicer, small bug fixes

dataqa-ui/src/app.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import AppRouter from './routers/AppRouter';
 import 'normalize.css/normalize.css';
 // import './styles/styles.scss';
-import theme from './styles/theme';
+// import theme from './styles/theme';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/core/styles';
 
@@ -20,11 +20,10 @@ import ProjectParamsPage from './components/set-project-params/ProjectParamsPage
 
 
 ReactDOM.render(
-    <ThemeProvider theme={theme}>
-      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-      <CssBaseline />
-      <AppRouter />
-    </ThemeProvider>,
+      <React.Fragment>
+        <CssBaseline />
+        <AppRouter />
+      </React.Fragment>,
     document.getElementById('app'),
   );
 

dataqa-ui/src/components/SideBar.js

@@ -7,70 +7,99 @@ import Divider from '@material-ui/core/Divider';
 import { withStyles } from '@material-ui/core/styles';
 import ListItemText from '@material-ui/core/ListItemText';
 
-const drawerWidth = 120;
+const drawerWidth = 150;
 
 const styles = theme => ({
-    drawer: {flexBasis: drawerWidth,
-             flexShrink: 0},
-    drawerPaper: {width: drawerWidth}
+    drawer: {
+        width: drawerWidth,
+        flexShrink: 0
+      },
+    drawerPaper: {width: drawerWidth},
   });
 
-const CurrentProjectSideBar = ({projectName, projectNameSlug}) => {
+const CurrentProjectSideBar = ({projectName, projectNameSlug, noRules=false}) => {
     return (
         <React.Fragment>
             <ListItem
+                button
+                color="primary"
                 component={Link}
                 to={`/projects/${projectNameSlug}`}
             >
                 <ListItemText>
-                    Current project: {projectName}
+                    Summary table
                 </ListItemText>
             </ListItem>
             <ListItem
+                button
                 component={Link}
                 to="/search">
                 <ListItemText>
                     Search
                 </ListItemText>
             </ListItem>
-            <ListItem
-                component={Link}
-                to="/rules">
-                <ListItemText>
-                    Add rules
-                </ListItemText>
-            </ListItem>
+            {!noRules &&
+                <ListItem
+                    button
+                    component={Link}
+                    to="/rules">
+                    <ListItemText>
+                        Add rules
+                    </ListItemText>
+                </ListItem>
+            }
             <Divider/>
         </React.Fragment>
     )
 }
 
-const SideBar = ({projectName, projectNameSlug, classes}) => {
-
+const SideBarContent = (props) => {
     return (
-        <nav className={classes.drawer}>
-        <Drawer
-            variant="permanent"
-            classes={{paper: classes.drawerPaper}}
-        >
         <List>
-            {projectName && 
+            {props.projectName && 
                 <CurrentProjectSideBar 
-                    projectName={projectName} 
-                    projectNameSlug={projectNameSlug}
+                    projectName={props.projectName} 
+                    projectNameSlug={props.projectNameSlug}
+                    noRules={props.noRules}
                 />
             }
             <ListItem
+                button
                 component={Link}
                 to="/projects">
                 <ListItemText>
                     Projects
                 </ListItemText>
             </ListItem>
-            </List>
-        </Drawer>
-    </nav>
+        </List>
     )
 }
 
-export default withStyles(styles)(SideBar);
+class SideBar extends React.Component{
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render(){
+        const { classes } = this.props;
+
+        return (
+            <nav className={classes.drawer}>
+                <Drawer
+                    variant="permanent"
+                    classes={{paper: classes.drawerPaper}}
+                >
+                    <SideBarContent
+                        projectName={this.props.projectName}
+                        projectNameSlug={this.props.projectNameSlug}
+                        noRules={this.props.noRules}
+                    />
+                </Drawer>
+            </nav>
+        )
+    }
+}
+
+export default withStyles(styles)(SideBar);
+export { drawerWidth };

dataqa-ui/src/components/constants.js

@@ -1,7 +1,11 @@
 const PROJECT_TYPES = { classification: "classification", 
                         ner: "ner",
                         entity_disambiguation: "entity_disambiguation"};
-
+
+const PROJECT_TYPES_ABBREV = { classification: "classification", 
+                                ner: "NER",
+                                entity_disambiguation: "entity linking"};
+
 const WIKI_DOCS_FILE_FORMAT = "https://dataqa.ai/docs/v1.1.1/file_formats/NER";
 const DOCS_TEXT_FILE_FORMAT = "https://dataqa.ai/docs/v1.1.1/file_formats/classification";
 const DOCS_CLASSNAME_FILE_FORMAT = "https://dataqa.ai/docs/v1.1.1/file_formats/classification";
@@ -19,6 +23,7 @@ const DEFAULT_MENTIONS_COLUMNS = ["text", "mentions"];
 const DEFAULT_KB_COLUMNS = ["name", "description"];
 
 export { PROJECT_TYPES,
+         PROJECT_TYPES_ABBREV,
          DOCS_MENTIONS_FILE_FORMAT,
          DOCS_KB_FILE_FORMAT,
          DOCS_TEXT_FILE_FORMAT,

dataqa-ui/src/components/label-page/common/LabelNavigationSimple.js

@@ -22,6 +22,7 @@ const SingleLabel = (props) => {
             <Button 
                 onClick={props.addLabel}
                 variant="outlined"
+                color='primary'
             >
                 {props.className}
             </Button>
@@ -30,6 +31,8 @@ const SingleLabel = (props) => {
         return (
             <Button 
                 onClick={props.addLabel}
+                variant="contained"
+                color='primary'
             >
                 {props.className}
             </Button>

dataqa-ui/src/components/label-page/entity-disambiguation/EDLabelPage.js

@@ -9,7 +9,7 @@ import { PROJECT_TYPES } from '../../constants';
 import Text from './Text';
 import Navigation from './Navigation';
 import queryString from 'query-string';
-
+import { trimString } from '../../../utils';
 
 const PAGESIZE = 10;
 const TRUNCATED_BUTTON_TEXT = 100;
@@ -231,15 +231,23 @@ class EDLabelPage extends React.Component{
                 const totalEntitiesUpdated = totalEntities || prevState.totalEntities;
 
                 console.log("inside projectNameWasSet", prevState, validatedLabelsUpdated);
-                const currentEntity = currentEntitiesUpdated.length && currentEntitiesUpdated[0];
-                const currentDocs = currentEntity && currentEntity.docs;
-                const totalEntityDocs = currentEntity && currentEntity.total_docs;
-                console.log(currentEntity, totalEntityDocs);
-
-                const suggestions = currentEntity && currentEntity.kb_suggestions.map(this.formatSuggestion);
-                console.log("Inside projectNameWasSet 2 ", suggestions, currentEntity);
-                const validatedLabel = validatedLabelsUpdated.length && validatedLabelsUpdated[0];
-                const currentSuggestions = this.getSuggestions(suggestions, validatedLabel);
+                let currentDocs, currentSuggestions, totalEntityDocs;
+                if(currentEntitiesUpdated.length){
+                    const currentEntity = currentEntitiesUpdated[0];
+                    currentDocs = currentEntity.docs;
+                    totalEntityDocs = currentEntity.total_docs;
+                    console.log(currentEntity, totalEntityDocs);
+
+                    const suggestions = currentEntity.kb_suggestions.map(this.formatSuggestion);
+                    console.log("Inside projectNameWasSet 2 ", suggestions, currentEntity);
+                    const validatedLabel = validatedLabelsUpdated.length && validatedLabelsUpdated[0];
+                    currentSuggestions = this.getSuggestions(suggestions, validatedLabel);
+                }else{
+                    currentDocs = [];
+                    currentSuggestions = [];
+                    totalEntityDocs = 0;
+                }
+
 
                 return ({   
                             currentEntities: currentEntitiesUpdated,
@@ -477,14 +485,7 @@ class EDLabelPage extends React.Component{
     }
 
     formatSuggestion = ( {name, id, colour} ) => {
-        let displayedName = name.trim();
-        if(name.length > TRUNCATED_BUTTON_TEXT){
-            const spaceIndex = displayedName.indexOf(' ');
-            if((spaceIndex > 3) & (spaceIndex < TRUNCATED_BUTTON_TEXT)){
-                displayedName = displayedName.substring(0, spaceIndex) + '...';
-            }
-            displayedName = displayedName.substring(0, TRUNCATED_BUTTON_TEXT).trim() + '...';
-        }
+        const displayedName = trimString(name, TRUNCATED_BUTTON_TEXT);
         return ( {name: displayedName, "label": id, "colour": colour}
         )
     }

dataqa-ui/src/components/label-page/supervised/classification/LabelNavigation.js

@@ -54,7 +54,7 @@ const EntityButton = (props) => {
         return (
             <Button 
                 onClick={props.selectEntity}
-                style={{backgroundColor: colors[props.colour][500]}}
+                style={{backgroundColor: colors[props.colour][500], color: 'white'}}
             >
                 {props.entityName}
             </Button>

dataqa-ui/src/components/label-page/supervised/ner/LabelNavigation.js

@@ -55,7 +55,7 @@ const EntityButton = (props) => {
         return (
             <Button 
                 onClick={props.selectEntity}
-                style={{backgroundColor: colors[props.colour][500]}}
+                style={{backgroundColor: colors[props.colour][500], color: 'white'}}
             >
                 {props.entityName}
             </Button>

dataqa-ui/src/components/project-summary/ProjectTitle.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+
+
+const ProjectTitle = (props) => {
+    return (
+        <Typography variant="h3" className={props.className}>
+            {`Project: ${props.projectName}`}
+        </Typography>    
+    )
+}
+
+export default ProjectTitle;
+

dataqa-ui/src/components/project-summary/entity-disambiguation/EntityDisambiguationProjectMain.js

@@ -18,6 +18,7 @@ import FileDownloadButton from '../common/FileDownloadButton';
 import { Redirect } from 'react-router-dom';
 import DeleteProjectButton from '../common/DeleteProjectButton';
 import { withRouter } from "react-router-dom";
+import ProjectTitle from '../ProjectTitle';
 
 
 const styles = theme => ({
@@ -26,7 +27,8 @@ const styles = theme => ({
                     width: "100%"},
     table: {fontSize: "1.2em"},
     button: {marginTop: "20px",
-            marginLeft: "10px"}
+            marginLeft: "10px"},
+    project_title: {"marginBottom": 20}
   });
 
 
@@ -145,9 +147,12 @@ class EntityDisambiguationProjectMain extends React.Component{
 
         return(
             <div className={classes.container}>
-                <SideBar/>
+                <SideBar noRules={true}/>
                 <div className={classes.main_content}>
-                    <Typography variant="h1">{this.props.projectName}</Typography>
+                    <ProjectTitle 
+                        projectName={this.props.projectName}
+                        className={classes.project_title}
+                    />
                     <KbTable 
                         classes={classes}
                         setGoToMatchedEntities={this.setGoToMatchedEntities}

dataqa-ui/src/components/project-summary/supervised/ProjectDataDrawers.js

@@ -29,7 +29,7 @@ class ProjectDataDrawers extends React.Component{
                             <Tab label="Estimated performance" />
                         </Tabs>
                     </AppBar>
-                    <div className={this.props.classes.offset} />
+                    <div className={this.props.classes.offset} style={{minHeight: '30px'}} />
                     {this.state.tab == 0 && 
                         <RuleTable 
                             rules={this.props.rules}

dataqa-ui/src/components/project-summary/supervised/SupervisedProjectMain.js

@@ -1,16 +1,16 @@
 import React from 'react';
-;
 import { Redirect } from 'react-router-dom';
 import $ from 'jquery';
+import { drawerWidth } from '../../SideBar';
 import SideBar from '../../SideBar';
 import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
 import ProjectDataDrawers from './ProjectDataDrawers';
 import FileDownloadButton from '../common/FileDownloadButton';
 import ExportRulesButton from './ExportRulesButton';
 import uuid from 'react-uuid';
 import { renameKeysToCamelCase } from '../../utils';
 import DeleteProjectButton from '../common/DeleteProjectButton';
+import ProjectTitle from '../ProjectTitle';
 
 
 const RULE_UPDATE_PARAMS = {
@@ -22,9 +22,9 @@ const RULE_UPDATE_PARAMS = {
 const styles = theme => ({
     container: {display: 'flex'},
     main_content: {margin: '20px',
-                    width: "100%"},
+                    width: `calc(100% - ${drawerWidth}px)`},  
     project_content: {marginTop: '20px'},
-    offset: theme.mixins.toolbar,
+    offset: {...theme.mixins.toolbar},
     button: {marginTop: "20px",
             marginLeft: "10px"},
     table: {fontSize: "1.2em"},
@@ -198,7 +198,7 @@ class SupervisedProjectMain extends React.Component{
                     projectName={this.props.projectName}
                 />
                 <div className={classes.main_content}>
-                    <Typography variant="h1">{this.props.projectName}</Typography>
+                    <ProjectTitle projectName={this.props.projectName}/>
                     <ProjectDataDrawers
                         classes={classes}
                         loading={this.state.loading}