Merge branch 'details'

Bioprotocols · Oct 27, 2022 · 0c2ae5f · 0c2ae5f
2 parents fd36667 + 2dc3665
commit 0c2ae5f
Show file tree

Hide file tree

Showing 3 changed files with 272 additions and 8 deletions.
diff --git a/frontend/web/package-lock.json b/frontend/web/package-lock.json
diff --git a/frontend/web/package.json b/frontend/web/package.json
@@ -13,6 +13,7 @@
     "dompurify": "^2.3.9",
     "eslint-plugin-react": "^7.28.0",
     "fs": "^0.0.1-security",
+    "graphviz-react": "^1.2.5",
     "history": "^5.1.0",
     "marked-react": "^1.1.2",
     "rdf-ext": "^2.0.1",
@@ -63,4 +64,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/frontend/web/src/editor/components/ProtocolDetails.jsx b/frontend/web/src/editor/components/ProtocolDetails.jsx
@@ -1,14 +1,21 @@
 import React from 'react';
-import { Tabs, Tab } from 'react-bootstrap';
+import { Tabs, Tab, Modal, Button} from 'react-bootstrap';
 import Markdown from 'marked-react';
 import DOMPurify from 'dompurify';
 // import { JSONEditor } from 'vanilla-jsoneditor';
 // import { useEffect, useRef } from "react";
 import ReactJson from 'react-json-view'
 
-
+import { Graphviz } from 'graphviz-react';
 
 export class ProtocolDetailsGroup extends React.Component {
+    state = { show: false };
+    handleClick = () => {
+        this.setState({ show: true })
+    }
+    handleClose = () => {
+        this.setState({ show: false })
+    }
 
     render() {
         let specializations = this.props.editor.state.specializations;
@@ -29,10 +36,46 @@ export class ProtocolDetailsGroup extends React.Component {
                     if (protocol) {
                         let spec = protocol.specializations.find((s) => (s && s.specialization_id === specialization.id));
                         if (spec && spec.data) {
-                            let rendered = (specialization.name === "DefaultBehaviorSpecialization") ?
-                                (<ReactJson key={specialization.specialization_id} src={JSON.parse(spec.data)} //
-                                    displayDataTypes="False" name="Steps" indentWidth="2" />) :
-                                (<ProtocolInspector key={specialization.specialization_id} specialization={spec.data} />);
+                            let rendered = null;
+                            if (specialization.name === "DefaultBehaviorSpecialization") {
+
+                                let protocol_data = JSON.parse(spec.data);
+                                let steps = protocol_data.slice(0, -1);
+                                let gviz = protocol_data.slice(-1)[0];
+                                rendered = (
+                                    <div>
+                                        <Modal size="lg" show={this.state.show} onHide={this.handleClose} >
+                <Modal.Header closeButton>
+                    Protocol Execution (Graphviz)
+                </Modal.Header>
+                                            <Modal.Body >
+                                                <div style={{ flex: "auto", overflowX: "scroll", overflowY: "scroll"}}>
+                                                <Graphviz dot={gviz} options={
+                                                    {
+                                                        // fit: true,
+                                                        height: 750,
+                                                        width: 1500,
+                                                        zoom: true
+                                                    }} />
+                                                    </div>
+                </Modal.Body>
+                <Modal.Footer>
+                </Modal.Footer>
+            </Modal>
+                                    <Button onClick={this.handleClick}>View Execution Graph</Button>
+                                    <ReactJson
+                                        key={specialization.specialization_id}
+                                        src={steps}
+                                            displayDataTypes="False" name="Steps" indentWidth="2" />
+                                    </div>
+                                );
+                            } else {
+                                rendered = (
+                                    <ProtocolInspector
+                                        key={specialization.specialization_id}
+                                        specialization={spec.data} />
+                                );
+                            }
                             return rendered;
                         }
                     }