Merge pull request #17 from iris-liu0312/master

Bug Fixes, UI overhaul
cu-clear · Feb 18, 2022 · 29f6e3c · 29f6e3c
2 parents 6533d33 + 527f143
commit 29f6e3c
Show file tree

Hide file tree

Showing 13 changed files with 355 additions and 264 deletions.
diff --git a/app.py b/app.py
diff --git a/static/package-lock.json b/static/package-lock.json
diff --git a/static/package.json b/static/package.json
@@ -1,6 +1,6 @@
 {
   "name": "schema-interface",
-  "version": "0.5.1",
+  "version": "0.5.5",
   "description": "Schema Curation Interface",
   "private": true,
   "scripts": {
@@ -29,6 +29,7 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
+    "@fontsource/roboto": "^4.5.3",
     "@material-ui/core": "^4.10.1",
     "@material-ui/icons": "^4.11.2",
     "@mui/icons-material": "^5.4.1",

diff --git a/static/src/App.js b/static/src/App.js
@@ -1,5 +1,4 @@
-import React from "react";
-import { Row, Col } from 'reactstrap';
+import React from 'react';
 import {
   BrowserRouter as Router,
   Routes,
@@ -9,52 +8,93 @@ import {
 
 import Home from "./template/Home";
 import Viewer from "./template/Viewer";
-import logo from './public/logo.png'
+
+import Button from '@mui/material/Button';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+
+import IconButton from '@mui/material/IconButton';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import HelpIcon from '@mui/icons-material/Help';
 
-import './App.scss'
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import './App.scss';
+
+// TODO make link hover not blue
+// TODO make logo not blurry as hell
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      light: '#757ce8',
+      main: '#3f50b5',
+      dark: '#002884',
+      contrastText: '#fff',
+    },
+    secondary: {
+      light: '#ff7961',
+      main: '#f44336',
+      dark: '#ba000d',
+      contrastText: '#000',
+    },
+  },
+});
 
 export default function App() {
-  return (
-    <Router>
-      <div className="App">
-        <Row className="Header">
-          <Col md="2" id="logo">
-            <Link to="/">
-              <img src={'/static'+ logo} alt="Curate" />
-            </Link>
-          </Col>
-          <Col md="1" />
-          <Col md="3" id="title" className="align-self-center">
-              <div><h1>CURATE</h1></div>
-              <div><h4 >Schema Curation Interface</h4></div>
-          </Col>
-          <Col md="5" className="align-self-center">
-            <Row>
-              <Col md="1" />
-              <Col md="3" className="nav-items">
-                <Link to="/viewer">Viewer</Link>
-              </Col>
-              <Col md="1" className="nav-items">
-                <a target="_blank" href="https://github.com/cu-clear/schema-interface">
+  return(
+      <Router>
+        <ThemeProvider theme={theme}>
+          <AppBar position="static">
+            <Toolbar className="menu">
+              <Typography
+                variant="h1"
+                noWrap
+                component="div"
+                sx={{ flexGrow: 1, display: {xs: 'none', sm: 'block'} }}
+              >
+                <Button component={Link} to="/" color="inherit">Schema Curation Interface</Button>
+              </Typography>
+              <Typography
+                variant="body1"
+                noWrap
+                component="div"
+                sx={{ mt:1, mr:4 }}
+              >
+                <Button component={Link} to="/viewer">Viewer</Button>
+              </Typography>
+              <IconButton
+                size="large"
+                edge="start"
+                color="inherit"
+                sx={{ mr:2 }}
+              >
+                <a target="_blank" rel="noopener" href="https://github.com/cu-clear/schema-interface">
                   <GitHubIcon />
                 </a>
-              </Col>
-              <Col md="1" className="nav-items">
-                <a target="_blank" href="https://chrysographes.notion.site/Schema-Curation-Manual-c17f79c7450246d3ad7796e43bebea1b">
+              </IconButton>
+              <IconButton
+                size="large"
+                edge="start"
+                color="inherit"
+                sx={{ mr:2 }}
+              >
+                <a target="_blank" rel="noopener" href="https://chrysographes.notion.site/Schema-Curation-Manual-c17f79c7450246d3ad7796e43bebea1b">
                   <HelpIcon />
                 </a>
-              </Col>
-            </Row>
-          </Col>
-        </Row>
+              </IconButton>
+            </Toolbar>
+          </AppBar>
+        </ThemeProvider>
 
         <Routes>
           <Route exact path="/" element={<Home />}/>
           <Route exact path="/viewer" element={<Viewer />} />
         </Routes>
-      </div>
-    </Router>
-  );
+      </Router>
+  )
 }
diff --git a/static/src/App.scss b/static/src/App.scss
@@ -1,50 +1,18 @@
-.App {
-    font-family: Arial, Helvetica, sans-serif;
-    height: max-content;
-    width: 100vw;
-}
-
-.Index{
-    font-family: Arial, Helvetica, sans-serif;
-    text-align: center;
+a {
+    color: #ddd;
 }
-
-.Header {
-    display: inline-flex;
-    background-color: rgb(45, 46, 49);
-    width: 100vw;
-    height: 20vh;
-    text-align: center;
-    margin-left: 0 !important;
-
-    #logo {
-        height: inherit;
-        color: #ddd;
-
-        img {
-            height: inherit;
-        }
-    }
-
-    #title {
-        color: #ddd;
-    }
-
-    .nav-items{
-        text-align: center;
-    }
-
-    a{
-        color: #ddd;
-    }
+.menu a {
+    text-decoration: none;
+    color: #fff;
+    display: block;
 }
 
-.shrink {
-    height: 10vh;
+.menu a:hover {
+    color: rgb(192, 219, 255);
 }
 
-.row {
-    width: inherit;
+.Index{
+    text-align: center;
 }
 
 #viewer {
@@ -108,11 +76,11 @@
 }
 
 input.form-check-input {
-width: 15px;
-height: 15px;
-padding: 0;
-margin: 0;
-vertical-align: bottom;
-position: relative;
-top: -1px;
+    width: 15px;
+    height: 15px;
+    padding: 0;
+    margin: 0;
+    vertical-align: bottom;
+    position: relative;
+    top: -1px;
 }
diff --git a/static/src/public/cy-style.json b/static/src/public/cy-style.json
@@ -36,9 +36,10 @@
             }
         },
         {
-            "selector": "node[_type = 'participant']",
+            "selector": "node[_type = 'entity']",
             "style": {
-                "background-color": "#bcbcbc"
+                "background-color": "#bcbcbc",
+                "shape": "rectangle"
             }
         },
         {
@@ -100,6 +101,14 @@
                 "width": "2vw"
             }
         },
+        {
+            "selector": "edge[_edge_type = 'relation']",
+            "style": {
+                "target-arrow-color": "#777",
+                "line-color": "#777",
+                "width": "2vw"
+            }
+        },
         {
             "selector": "edge[_edge_type = 'child_outlink']",
             "style": {
@@ -113,12 +122,6 @@
                 "line-color": "#91a59f",
                 "target-arrow-color": "#91a59f"
             }
-        },
-        {
-            "selector": ".optional-before",
-            "style": {
-                "line-style": "dashed"
-            }
         }
     ],
     "layout": {

diff --git a/static/src/public/logoS.png b/static/src/public/logoS.png