Merge pull request #12 from iris-liu0312/master

Informative Notifications
cu-clear · Feb 2, 2022 · 37aa8d5 · 37aa8d5
2 parents 107befa + b3f737a
commit 37aa8d5
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ First run:
 
 * `cd path/to/project/schema-interface`
 * `sh first_run.sh`
-* If rendering fails: `sh run_local.sh`
+* If rendering fails: `sh run_local.sh` 
 
 Subsequent runs:
 

diff --git a/app.py b/app.py
@@ -13,7 +13,7 @@
 edges = []
 schemaJson = {}
 
-# SDF version 1.3
+# SDF version 1.4
 schema_key_dict = {
     'root': ['@id', 'name', 'comment', 'description', 'aka', 'qnode', 'qlabel', 'minDuration', 'maxDuration', 'goal', 'ta1explanation', 'importance', 'children_gate'],
     'participant': ['@id', 'roleName', 'entity'],
@@ -77,7 +77,7 @@ def extend_node(node, obj):
                 node['classes'] = 'optional'
             else:
                 node['data'][key] = obj[key]
-    if 'privateData' in obj.keys():
+    if 'privateData' in obj.keys() and len(obj['privateData']) > 0:
         for key in obj['privateData'].keys():
             if key in schema_key_dict['privateData']:
                 node['data'][key] = obj['privateData'][key]
@@ -394,7 +394,6 @@ def get_subtree_or_update_node():
         node_id = request.args.get('ID')
         subtree = get_connected_nodes(node_id)
         return json.dumps(subtree)
-    # it won't work and i don't know why
     else:
         """Posts updates to selected node and reloads schema."""
         values = json.loads(request.data.decode("utf-8"))

diff --git a/static/src/template/UploadModal.jsx b/static/src/template/UploadModal.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Progress, Input, Label, Form,FormGroup } from 'reactstrap';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup } from 'reactstrap';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
@@ -14,7 +14,6 @@ class UploadModal extends Component {
     this.state = {
       modal: false,
       selectedFile: null,
-      loaded: 0,
       valid: false
     }
     this.toggle = this.toggle.bind(this);
@@ -29,7 +28,6 @@ class UploadModal extends Component {
     this.setState({
       modal: !this.state.modal,
       selectedFile: null,
-      loaded: 0,
       valid: false
     })
   }
@@ -110,7 +108,6 @@ class UploadModal extends Component {
       // if return true allow to setState
       this.setState({
         selectedFile: files,
-        loaded: 0,
         valid: true
       });
     } else {
@@ -130,21 +127,17 @@ class UploadModal extends Component {
     for (var x = 0; x < this.state.selectedFile.length; x++) {
       data.append('file', this.state.selectedFile[x]);
     }
-    axios.post("/upload", data, {
-      onUploadProgress: ProgressEvent => {
-        this.setState({
-          loaded: (ProgressEvent.loaded / ProgressEvent.total * 100),
-        })
-      }
-    })
+    axios.post("/upload", data)
       .then(res => { // then print response status
         this.props.parentCallback(res.data)
-        toast.success('upload success');
+        toast.success('Upload success');
         setTimeout(this.toggle, 1000);
       })
       .catch(err => { // then print response status
         this.setState({ valid: false });
-        toast.error('upload fail, check console');
+        let error = err.response.data;
+        let error_title = error.slice(error.indexOf("<title>")+7, error.lastIndexOf("</title>"));
+        toast.error(error_title.slice(0, error_title.indexOf("//")));
       });
   }
 
@@ -153,7 +146,6 @@ class UploadModal extends Component {
     Opens up a sub window when Upload Schema button is pressed,
     where you can upload a file or cancel.
     Checks the validity of the file.
-    Upon pressing upload, shows an upload progress bar.
     */
 
     const openModal = () => {
@@ -169,7 +161,7 @@ class UploadModal extends Component {
           </Button>
         </div>
         <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
-          <ToastContainer />
+          <ToastContainer theme="colored" />
           <ModalHeader toggle={this.toggle}>Upload Schema</ModalHeader>
 
           <ModalBody>
@@ -178,11 +170,6 @@ class UploadModal extends Component {
                 <Label>Upload Your File</Label>
                 <Input type="file" className="form-control" style={{height: 'auto'}} onChange={this.onChangeHandler} />
               </FormGroup>
-
-              <FormGroup>
-                <Progress max="100" color={this.state.valid ? "success":"danger"}
-                  value={this.state.loaded} transition="width 1s ease-in-out" >{Math.round(this.state.loaded, 2)}%</Progress>
-              </FormGroup>
             </Form>
           </ModalBody>
 

diff --git a/static/src/template/Viewer.jsx b/static/src/template/Viewer.jsx
@@ -8,7 +8,6 @@ import 'react-toastify/dist/ReactToastify.css';
 import axios from 'axios';
 import UploadModal from './UploadModal';
 import Canvas from './Canvas';
-import SideBar from './SideBar';
 import SideEditor from './SideEditor';
 import JsonEdit from './JsonEdit';
 
@@ -38,6 +37,7 @@ class Viewer extends Component {
     }
 
     callbackFunction(response) {
+        /* Updates back-end data */
         this.setState({ 
             schemaResponse: Object.assign({}, response.parsedSchema),
             schemaName: response.name,
@@ -47,6 +47,7 @@ class Viewer extends Component {
     }
 
     download(event){
+        /* Handles downloading the schema JSON */
         event.preventDefault();
         const output = JSON.stringify(this.state.schemaJson, null, 4)
         const blob = new Blob([output], {type: 'application/json'});
@@ -60,18 +61,23 @@ class Viewer extends Component {
     }
 
     jsonEditorCallback(json){
+        /* Handles changes from the JSON editor */
         axios.post("/reload", json)
             .then(res => {
-                toast.success('reload success')
+                toast.success('Reload success')
                 this.callbackFunction(res.data);
             })
             .catch(err => {
-                toast.error('reload fail:', err);
+                let error = err.response.data;
+                let error_title = error.slice(error.indexOf("<title>")+7, error.lastIndexOf("</title>"));
+                let error_notif = error_title.slice(0, error_title.indexOf("//"));
+                toast.error(error_notif);
                 return false;
             });
     }
 
     sidebarCallback(data) {
+        /* Opens / closes the sidebar */
         if (isEmpty(data)) {
             this.setState({
                 isOpen: false,
@@ -86,12 +92,16 @@ class Viewer extends Component {
     }
 
     sideEditorCallback(data) {
+        /* Handles changes through the sidebar */
         axios.post("/node", data)
             .then(res => {
                 this.jsonEditorCallback(res.data);
             })
             .catch(err => {
-                toast.error('edit fail, check console', err);
+                let error = err.response.data;
+                let error_title = error.slice(error.indexOf("<title>")+7, error.lastIndexOf("</title>"));
+                let error_notif = error_title.slice(0, error_title.indexOf("//"));
+                toast.error(error_notif);
                 return false;
             });
     }
@@ -137,7 +147,7 @@ class Viewer extends Component {
         return (
             <div id="viewer">
                 <div className='container'>
-                    <ToastContainer />
+                    <ToastContainer theme="colored"/>
                     <UploadModal buttonLabel="Upload Schema" parentCallback={this.callbackFunction} />
                     <DownloadIcon className="button" type="button" color={this.state.isUpload ? "action" : "disabled"} onClick={this.download}/>
                     <a style={{display: "none"}}