Merge pull request #16 from iris-liu0312/master

Download Graph Image, UI improvement
cu-clear · Feb 16, 2022 · 6533d33 · 6533d33
2 parents 7d0f796 + ade8b66
commit 6533d33
Show file tree

Hide file tree

Showing 14 changed files with 1,007 additions and 487 deletions.
diff --git a/app.py b/app.py
@@ -397,8 +397,6 @@ def get_subtree_or_update_node():
         values = json.loads(request.data.decode("utf-8"))
         new_json = update_json(values)
         return json.dumps(new_json)
-
-
 
 @app.route('/reload', methods=['POST'])
 def reload_schema():

diff --git a/static/index.html b/static/index.html
@@ -3,6 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <link rel="icon" href="data:," />
 
         <title>Schema Curation Interface</title>
 

diff --git a/static/package-lock.json b/static/package-lock.json
diff --git a/static/package.json b/static/package.json
@@ -27,8 +27,13 @@
     "webpack-dev-server": "^4.7.3"
   },
   "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "@material-ui/core": "^4.10.1",
     "@material-ui/icons": "^4.11.2",
+    "@mui/icons-material": "^5.4.1",
+    "@mui/material": "^5.4.1",
+    "@mui/styles": "^5.4.1",
     "axios": "^0.25.0",
     "bootstrap": "^5.1.3",
     "cytoscape": "^3.20.0",

diff --git a/static/src/App.js b/static/src/App.js
@@ -10,8 +10,8 @@ import {
 import Home from "./template/Home";
 import Viewer from "./template/Viewer";
 import logo from './public/logo.png'
-import GitHubIcon from '@material-ui/icons/GitHub';
-import HelpIcon from '@material-ui/icons/Help';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import HelpIcon from '@mui/icons-material/Help';
 
 import './App.scss'
 
@@ -21,23 +21,29 @@ export default function App() {
       <div className="App">
         <Row className="Header">
           <Col md="2" id="logo">
-            <img src={'/static'+ logo} alt="Curate" />
+            <Link to="/">
+              <img src={'/static'+ logo} alt="Curate" />
+            </Link>
           </Col>
-          <Col md="4" id="title" className="align-self-center">
-            <div><h1>CURATE</h1></div>
-            <div><h4 >Schema Curation Interface</h4></div>
+          <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="6" className="align-self-center">
+          <Col md="5" className="align-self-center">
             <Row>
-              <Col md="3" className="nav-items">
-                <Link to="/">Home</Link>
-              </Col>
+              <Col md="1" />
               <Col md="3" className="nav-items">
                 <Link to="/viewer">Viewer</Link>
               </Col>
-              <Col md="3" className="nav-items">
+              <Col md="1" className="nav-items">
                 <a target="_blank" href="https://github.com/cu-clear/schema-interface">
-                  <img src={GitHubIcon} alt="GitHub" />
+                  <GitHubIcon />
+                </a>
+              </Col>
+              <Col md="1" className="nav-items">
+                <a target="_blank" href="https://chrysographes.notion.site/Schema-Curation-Manual-c17f79c7450246d3ad7796e43bebea1b">
+                  <HelpIcon />
                 </a>
               </Col>
             </Row>

diff --git a/static/src/App.scss b/static/src/App.scss
@@ -4,9 +4,14 @@
     width: 100vw;
 }
 
+.Index{
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+}
+
 .Header {
     display: inline-flex;
-    background-color: #000;
+    background-color: rgb(45, 46, 49);
     width: 100vw;
     height: 20vh;
     text-align: center;
@@ -30,7 +35,7 @@
     }
 
     a{
-        color: white;
+        color: #ddd;
     }
 }
 

diff --git a/static/src/public/logo.png b/static/src/public/logo.png
diff --git a/static/src/template/Canvas.jsx b/static/src/template/Canvas.jsx
@@ -7,8 +7,9 @@ import contextMenus from 'cytoscape-context-menus'
 
 import axios from 'axios';
 import equal from 'fast-deep-equal';
-import RefreshIcon from '@material-ui/icons/Refresh';
-import OpenIcon from '@material-ui/icons/OpenWith';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import AspectRatioIcon from '@mui/icons-material/AspectRatio';
+import SaveIcon from '@mui/icons-material/Save';
 
 import Background from '../public/canvas_bg.png';
 import CyStyle from '../public/cy-style.json';
@@ -28,7 +29,9 @@ class Canvas extends React.Component {
             hasSubtree: false,
             // static copy of topmost tree
             topTree: null,
-            removed: null
+            removed: null, 
+            downloadUrl: '',
+            fileName: 'graph.png'
         }
 
         // create topTree
@@ -46,6 +49,7 @@ class Canvas extends React.Component {
         this.removeObject = this.removeObject.bind(this);
         this.restore = this.restore.bind(this);
         this.fitCanvas = this.fitCanvas.bind(this);
+        this.download = this.download.bind(this);
     }
 
     showSidebar(data) {
@@ -68,6 +72,7 @@ class Canvas extends React.Component {
                 }
                 this.setState({hasSubtree: true});
                 this.cy.add(res.data);
+                this.cy.center(res.data);
                 this.runLayout();
             })
             .catch(err => {
@@ -118,6 +123,18 @@ class Canvas extends React.Component {
         this.cy.fit();
     }
 
+    download(event){
+        event.preventDefault();
+        const image = this.cy.png({output: 'blob', bg: 'white', scale:'1.5'});
+        const url = URL.createObjectURL(image);
+        this.setState({downloadUrl: url},
+            () => {
+                this.dofileDownload.click();
+                URL.revokeObjectURL(url);
+                this.setState({downloadUrl: ''})
+        })
+    }
+
     componentDidMount() {
         this.cy.ready(() => {
             // left-click 
@@ -130,7 +147,6 @@ class Canvas extends React.Component {
                 } else if (eventTarget.isNode()) {
                     let node = eventTarget.data();
                     this.showSubTree(node);
-                    this.cy.center(node);
                 }
             });
 
@@ -197,7 +213,13 @@ class Canvas extends React.Component {
                 />
                 <div style={{'width': '15px', height: '3vh'}}>
                     <RefreshIcon type='button' color="action" fontSize='large' onClick={this.reloadCanvas}/>
-                    <OpenIcon type='button' color="action" fontSize='large' onClick={this.fitCanvas}/>
+                    <AspectRatioIcon type='button' color="action" fontSize='large' onClick={this.fitCanvas}/>
+                    <SaveIcon className="button" type="button" color="action" onClick={this.download}/>
+                    <a style={{display: "none"}}
+                        download={this.state.fileName}
+                        href={this.state.downloadUrl}
+                        ref={e=>this.dofileDownload = e}
+                    >download it</a>
                 </div>
             </div>
         );

diff --git a/static/src/template/Home.jsx b/static/src/template/Home.jsx
@@ -5,7 +5,7 @@ class Home extends Component {
   render() {
     return (
       <Container fluid="true">
-        <div>Curate is a schema visualization for research purposes.</div>
+        <div className="Index">SCI 2.0 is a web application designed to visualize complex events and curate them for research purposes.</div>
       </Container>
     );
   }