Merge pull request #12 from Bioprotocols/gui-adjust

Gui adjust

README.md

@@ -2,6 +2,9 @@
 
 The PAML Editor (PAMLED) is a web application that supports the authoring and sharing of PAML protocols.  PAMLED consists of two components: `frontend` and `backend`.  The frontend is a React-based server for handling the graphical interface.   The backend is a Django REST server that handles persistent storage (protocols, user accounts, and primitives), and access to the pyPAML library.
 
+# **User Guide**
+
+See the user guide at: [User Guide](frontend/web/src/USERGUIDE.md)
 
 # **Running the PAML Editor in Development**
 

frontend/web/package.json

@@ -11,10 +11,13 @@
     "bootstrap": "^5.1.3",
     "eslint-plugin-react": "^7.28.0",
     "history": "^5.1.0",
+    "marked": "^4.0.12",
     "react-bootstrap": "^2.0.2",
     "react-icons": "^4.3.1",
+    "react-markdown": "^8.0.0",
     "react-router-dom": "^6.0.2",
     "react-scripts": "^3.4.4",
+    "remark-gfm": "^3.0.1",
     "rete": "^1.3.0",
     "rete-area-plugin": "^0.2.1",
     "rete-connection-plugin": "^0.9.0",

frontend/web/src/USERGUIDE.md

@@ -0,0 +1,39 @@
+# PAML User Guide
+
+- Getting Started
+    - From the homepage, login with existing credentials (registering if needed).
+    - Start editing a protocol.  (See below)
+- Loading Protocols
+    - If you have a graph file (json) that you previously downloaded, or were given (see `examples`), then click the triangle dropdown button next to the `+` button, and select `Load Rete Graph`.
+    - Your saved protocols will also be listed across the top of the screen and can be selected by clicking on the name.
+- Saving Protocols
+    - Click the triangle dropdown next to the protocol name and select `Save`.  This will save the protocol to the PAMLED database and it will be available when you login in at a later time.
+- Downloading Protocols
+    - Click the triangle dropdown next to the protocol name and select `Download Protocol` to save the PAML RDF.  Similarly, click `Download Rete Graph` to save the visual script graph representing the protocol. This file can also be used later to upload the protocol into PAMLED for other users or yourself.
+- Create a new Protocol
+    - Click the "+" button at the top of the screen in the list of protocols.
+- Edit a Protocol
+    - Add Activities
+        - Drag and drop from the palette on the left side.
+        - Or, right click on the workspace to bring up a context menu with the list of primitives and protocols.
+    - Clone Activities
+        - Right click on activity and select `Clone`.
+    - Deleting Activities
+        - Right click on activity and select `Delete`.
+    - Linking ports
+        - Click on a port and drag the connector to another port.
+    - Unlinking ports
+        - Click on port and drag connector off the port, then release the click.
+    - Adding Paramters
+        - Add a Parameter node in the same manner as an Activity.
+        - Configure the name (text), type (dropdown), and value (text).
+    - Protocol Inputs and Outputs
+        - Add an Input or Output node in the same manner as an Activity.
+        - Link the node's port to another Activity port.
+        - Saving the protocol will update the node for the protocol so that the protocol can be used as a sub-protocol in another protocol.
+    - Creating Primitives
+        - Create a protocol and only use Input and Output nodes to define its interface.  This protocol can be used as a new primitive.
+
+# Getting Help
+- Create an issue on the Github project: https://github.com/Bioprotocols/pamled
+- Contact [email protected]

frontend/web/src/editor/UserGuideModal.jsx

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import { Modal, Button, Alert, Spinner, Row, Col } from 'react-bootstrap';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import marked from "marked";
+//import ug from "USERGUIDE.md"
+
+export default class UserGuideModal extends Component {
+
+  state = {};
+
+  componentDidMount() {
+    const readmePath = require("../USERGUIDE.md");
+
+    fetch(readmePath)
+      .then(response => {
+        return response.text()
+      })
+      .then(text => {
+        this.setState({
+          markdown: text
+        })
+      })
+  }
+
+
+  render() {
+
+    const { markdown } = this.state;
+    return (
+
+      <Modal
+        show={this.props.show}
+        size="lg"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+      >
+        <Modal.Header>
+          {/* <Modal.Title id="contained-modal-title-vcenter">
+            PAMLED User Guide
+          </Modal.Title> */}
+        </Modal.Header>
+        <Modal.Body>
+          <ReactMarkdown children={markdown}  />
+
+        </Modal.Body>
+        <Modal.Footer>
+          <Button className="user-guide" variant="primary" onClick={() => this.props.handleDone()}>
+        Done
+      </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+

frontend/web/src/editor/components/ProtocolInspector.jsx

@@ -85,11 +85,11 @@ export class ProtocolInspectorGroup extends React.Component {
             </Nav>
           </Row>
           <Row className='editor-workspace-inspector-row'>
-            <Col  xs={8} sm={8} className="editor-workspace-column">
+            <Col  xs={12} sm={12} className="editor-workspace-column">
             {/* <h1>HI</h1> */}
               {this.props.workspaceComponent()}
             </Col>
-            <Col xs={3} sm={3} className='editor-inspector-column'>
+            {/* <Col xs={3} sm={3} className='editor-inspector-column'>
               <Row>
             <Tab.Content>
               {Object.entries(this.props.protocols).map(
@@ -105,7 +105,7 @@ export class ProtocolInspectorGroup extends React.Component {
               </Tab.Pane>
             </Tab.Content>
             </Row>
-            </Col>
+            </Col> */}
           </Row>
 
         {/* </Col> */}

frontend/web/src/editor/editor.css

@@ -31,7 +31,7 @@
 }
 
 .editor-workspace-inspector-row {
-    height: 85%;
+    height: 100%;
 }
 
 .editor-workspace-column {
@@ -55,6 +55,10 @@
     background-image: radial-gradient(circle, #000000 2px, rgba(0, 0, 0, 0) 1px);
 }
 
+.context-menu {
+    width: unset !important;
+}
+
 /* Hide bootstrap outline around focused buttons */
 .btn:focus:not(:focus-visible) {
   outline: 0;

frontend/web/src/editor/editor.jsx

@@ -20,7 +20,7 @@ import { ProtocolInspectorGroup } from "./components/ProtocolInspector";
 import RenameProtocolModal from "./RenameProtocolModal";
 import DownloadProtocolModal from "./DownloadProtocolModal";
 import RebuildPrimitivesModal from "./RebuildPrimitivesModal";
-
+import UserGuideModal from "./UserGuideModal";
 
 function downloadStringAsFile(data, filename) {
   let url = window.URL.createObjectURL(new Blob([data]))
@@ -52,7 +52,8 @@ export default class Editor extends Component {
       portTypes: {},
       isRebuildingPrimitives: true,
       download: null,
-      renameProtocol: null
+      renameProtocol: null,
+      userGuideVisible: null
     }
 
     this.dataTypes = new Set();
@@ -68,6 +69,8 @@ export default class Editor extends Component {
     this.handleProtocolDownload = this.handleProtocolDownload.bind(this);
     this.displayAnyProtocol = this.displayAnyProtocol.bind(this);
     this.rebuildPrimitives = this.rebuildPrimitives.bind(this);
+    this.onUserGuide = this.onUserGuide.bind(this);
+    this.onUserGuideDone = this.onUserGuideDone.bind(this);
   }
 
   componentDidMount() {
@@ -653,6 +656,13 @@ export default class Editor extends Component {
     this.setState({ download: null })
   }
 
+  onUserGuideDone(){
+    this.setState({ userGuideVisible: null })
+  }
+  onUserGuide(){
+    this.setState({ userGuideVisible: true })
+  }
+
   render() {
 
     let workspaceComponent = () => (
@@ -664,10 +674,6 @@ export default class Editor extends Component {
         <Menu
           ref={this.menuRef}
           editor={this}
-        // handleSave={this.saveProtocol.bind(this)}
-        // protocolName={this.state.currentProtocol}
-        // getProtocols={this.getProtocols.bind(this)}
-        // setProtocol={this.setProtocol.bind(this)}
         />
         <Row className="editor" >
           <Col xs={2} sm={2} className="editor-pallete-column">
@@ -698,6 +704,10 @@ export default class Editor extends Component {
             handleCancel={() => this.onCancelDownload()}
             handleDone={() => this.onDoneDownload()}
         />
+        <UserGuideModal
+            show={this.state.userGuideVisible !== null}
+            handleDone={() => this.onUserGuideDone()}
+        />
         <RebuildPrimitivesModal
             show={this.state.isRebuildingPrimitives}
         />

frontend/web/src/editor/menu.jsx

@@ -10,9 +10,6 @@ export default class Menu extends Component {
   constructor(props){
     super(props);
     this.editor = props.editor;
-    // this.handleSave = props.handleSave;
-    // this.getProtocols = props.getProtocols;
-    // this.setProtocol = props.setProtocol;
   }
 
   render() {
@@ -43,6 +40,11 @@ export default class Menu extends Component {
                   <NavDropdown.Item href="#" onClick={this.editor.props.onLogout}>Logout</NavDropdown.Item>
                 </NavDropdown>
               </Nav>
+              <Nav>
+                <NavDropdown menuVariant="dark" align={{ sm: 'end' }} title="Help" id="basic-nav-dropdown">
+                  <NavDropdown.Item href="#" onClick={this.editor.onUserGuide}>User Guide</NavDropdown.Item>
+                </NavDropdown>
+              </Nav>
             </Navbar.Collapse>
           </Container>
         </Navbar >