Export python functionality

tensormap-client/package.json

@@ -47,5 +47,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/file-saver": "^2.0.1"
   }
 }

tensormap-client/src/pages/dashboard/scenes/a/components/assets/BodyWidget.styles.js

@@ -1,6 +1,6 @@
 import { Theme } from "@material-ui/core/styles";
 import { red, grey, green, blue } from "@material-ui/core/colors";
-import { flexbox } from "@material-ui/system";
+//import { flexbox } from "@material-ui/system";
 const styles = theme => ({
   root: {
     display: "flex",
@@ -10,7 +10,7 @@ const styles = theme => ({
   },
   select: {
     display: "flex",
-    alignItems: "center",
+    alignItems: "center"
   },
   red: {
     color: theme.palette.getContrastText(red[500]),
@@ -35,7 +35,14 @@ const styles = theme => ({
   button: {
     margin: theme.spacing(1)
   },
-
+  exportButton: {
+    height: "40px",
+    margin: theme.spacing(2)
+  },
+  divStyle: {
+    display: "flex",
+    justifyContent: "space-between"
+  }
 });
 
 export default styles;

tensormap-client/src/pages/dashboard/scenes/a/components/assets/BodyWidget.tsx

@@ -23,8 +23,8 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import Avatar from '@material-ui/core/Avatar';
 import {withStyles} from '@material-ui/core';
-import styles       from './BodyWidget.styles'
-
+import styles       from './BodyWidget.styles';
+//import FileSaver from 'file-saver';
 import { baseURL } from '../../../../../../config';
 
 import socketIOClient from "socket.io-client";
@@ -568,7 +568,7 @@ class BodyWidget extends React.Component<BodyWidgetProps, BodyWidgetState> {
             <Grid container spacing={8}>
               <Grid item xs>
                 <Paper square>
-                  <SimpleTabs code={this.state.code} runtimeData = {this.state.runtime_data}/>
+                  <SimpleTabs code={this.state.code} runtimeData = {this.state.runtime_data}  divStyle={classes.divStyle} exportStyle={classes.exportButton}/>
                 </Paper>
               </Grid>
             </Grid>

tensormap-client/src/pages/dashboard/scenes/a/components/assets/Log.tsx

@@ -1,17 +1,21 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import AppBar from '@material-ui/core/AppBar';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import Typography from '@material-ui/core/Typography';
-
+import React from "react";
+import PropTypes from "prop-types";
+import AppBar from "@material-ui/core/AppBar";
+import Tabs from "@material-ui/core/Tabs";
+import Tab from "@material-ui/core/Tab";
+import Typography from "@material-ui/core/Typography";
+import { Button } from "@material-ui/core";
+import Filesaver from "file-saver";
+import GetAppIcon from "@material-ui/icons/GetApp";
 interface TabContainerProps {
   children?: React.ReactNode;
 }
 
 interface SimpleTabsProps {
-  code:string;
-  runtimeData:string;
+  exportStyle?: string | undefined;
+  divStyle?: string | undefined;
+  code: string;
+  runtimeData: string;
 }
 
 function TabContainer(props: TabContainerProps) {
@@ -23,7 +27,7 @@ function TabContainer(props: TabContainerProps) {
 }
 
 TabContainer.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired
 };
 
 export default function SimpleTabs(props: SimpleTabsProps) {
@@ -33,28 +37,42 @@ export default function SimpleTabs(props: SimpleTabsProps) {
     setValue(newValue);
   }
 
-  let newText = props.code.split('\n').map((item, i) => {
+  let newText = props.code.split("\n").map((item, i) => {
     return <p key={i}>{item}</p>;
   });
+  function exportPython() {
+    var blob = new Blob([props.code], { type: "text/x-python;charset=utf-8" });
+    Filesaver.saveAs(blob, "hello-world.py");
+  }
 
   return (
     <div className="log_main">
       <div>
         <AppBar position="static" color="default">
-          <Tabs value={value} onChange={handleChange} >
+          <Tabs value={value} onChange={handleChange}>
             <Tab label="Logs" />
             <Tab label="Code" />
           </Tabs>
         </AppBar>
         {value === 0 && <TabContainer>{props.runtimeData}</TabContainer>}
-        {value === 1 && <TabContainer>{newText}
-        </TabContainer>}
+        {value === 1 && (
+          <div className={props.divStyle}>
+            <TabContainer>{newText}</TabContainer>
+            <Button
+              variant="contained"
+              className={props.exportStyle}
+              onClick={exportPython}
+            >
+              <GetAppIcon fontSize="small" /> Export to Python
+            </Button>
+          </div>
+        )}
       </div>
     </div>
   );
 }
 
 SimpleTabs.propTypes = {
   code: PropTypes.string.isRequired,
-  runtimeData: PropTypes.string.isRequired,
+  runtimeData: PropTypes.string.isRequired
 };