Merge pull request #52 from smacker/code_uast_buttons

Add code and UAST buttons in results table

Author: smacker

frontend/package.json

@@ -33,7 +33,8 @@
     "prettier": "^1.12.1",
     "react-app-rewire-less": "^2.1.1",
     "react-app-rewired": "^1.5.2",
-    "whatwg-url": "^6.4.1"
+    "whatwg-url": "^6.4.1",
+    "react-test-renderer": "^16.4.0"
   },
   "proxy": {
     "/query": {

frontend/src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Helmet } from 'react-helmet';
-import { Grid, Row, Col } from 'react-bootstrap';
+import { Grid, Row, Col, Modal } from 'react-bootstrap';
 import SplitPane from 'react-split-pane';
 import Sidebar from './components/Sidebar';
 import QueryBox from './components/QueryBox';
@@ -20,14 +20,23 @@ class App extends Component {
 ) as t
 GROUP BY committer_email, month, repo_id`,
       results: new Map(),
-      schema: undefined
+      schema: undefined,
+
+      // modal
+      showModal: false,
+      modalTitle: null,
+      modalContent: null
     };
 
     this.handleTextChange = this.handleTextChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleRemoveResult = this.handleRemoveResult.bind(this);
     this.handleTableClick = this.handleTableClick.bind(this);
     this.handleExampleClick = this.handleExampleClick.bind(this);
+    this.handleModalClose = this.handleModalClose.bind(this);
+
+    this.showCode = this.showCode.bind(this);
+    this.showUAST = this.showUAST.bind(this);
 
     this.uniqueKey = 0;
   }
@@ -97,6 +106,26 @@ GROUP BY committer_email, month, repo_id`,
       });
   }
 
+  handleModalClose() {
+    this.setState({ showModal: false, modalTitle: null, modalContent: null });
+  }
+
+  showCode(code) {
+    this.setState({
+      showModal: true,
+      modalTitle: 'Source code',
+      modalContent: <pre>{code}</pre>
+    });
+  }
+
+  showUAST(uast) {
+    this.setState({
+      showModal: true,
+      modalTitle: 'UAST',
+      modalContent: <pre>{JSON.stringify(uast, null, 2)}</pre>
+    });
+  }
+
   componentDidMount() {
     this.loadSchema();
   }
@@ -119,6 +148,8 @@ GROUP BY committer_email, month, repo_id`,
             results={results}
             handleRemoveResult={this.handleRemoveResult}
             handleEditQuery={this.handleTextChange}
+            showCode={this.showCode}
+            showUAST={this.showUAST}
           />
         </Col>
       );
@@ -159,6 +190,16 @@ GROUP BY committer_email, month, repo_id`,
             </Col>
           </Row>
         </Grid>
+        <Modal
+          show={this.state.showModal}
+          onHide={this.handleModalClose}
+          bsSize="large"
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>{this.state.modalTitle}</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>{this.state.modalContent}</Modal.Body>
+        </Modal>
       </div>
     );
   }

frontend/src/components/ResultsTable.js

@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
+import { Button } from 'react-bootstrap';
 import 'react-table/react-table.css';
 import './ResultsTable.less';
 
 class ResultsTable extends Component {
   render() {
+    const { showCode, showUAST } = this.props;
     const columns = this.props.response.meta.headers.map(col => ({
       Header: col,
       id: col,
@@ -14,8 +16,15 @@ class ResultsTable extends Component {
         switch (typeof v) {
           case 'boolean':
             return v.toString();
+          case 'string':
+            // assume any multiline string is code
+            if (v.indexOf('\n') > -1) {
+              return <Button onClick={() => showCode(v)}>Code</Button>;
+            }
+            return v;
           case 'object':
-            return JSON.stringify(v, null, 2);
+            // UAST column
+            return <Button onClick={() => showUAST(v)}>UAST</Button>;
           default:
             return v;
         }
@@ -35,7 +44,9 @@ class ResultsTable extends Component {
 
 ResultsTable.propTypes = {
   // Must be a success response
-  response: PropTypes.object.isRequired
+  response: PropTypes.object.isRequired,
+  showCode: PropTypes.func.isRequired,
+  showUAST: PropTypes.func.isRequired
 };
 
 export default ResultsTable;

frontend/src/components/ResultsTable.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import ResultsTable from './ResultsTable';
+
+describe('ResultsTable', () => {
+  const noop = () => null;
+
+  it('text with new lines should be shown as code', () => {
+    const response = {
+      meta: {
+        headers: ['notCode', 'code'],
+        types: ['TEXT', 'TEXT']
+      },
+      data: [{ notCode: 'not a code', code: 'this\nis\ncode' }]
+    };
+    const tree = renderer
+      .create(
+        <ResultsTable response={response} showCode={noop} showUAST={noop} />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

frontend/src/components/TabbedResults.js

@@ -43,6 +43,8 @@ class TabbedResults extends Component {
   }
 
   render() {
+    const { showCode, showUAST } = this.props;
+
     return (
       <Tabs
         id="tabbed-results"
@@ -85,7 +87,13 @@ class TabbedResults extends Component {
               </Row>
             );
           } else {
-            content = <ResultsTable response={query.response} />;
+            content = (
+              <ResultsTable
+                response={query.response}
+                showCode={showCode}
+                showUAST={showUAST}
+              />
+            );
           }
 
           return (
@@ -121,7 +129,9 @@ TabbedResults.propTypes = {
   // response: object   Required if loading and errorMsg are not present
   results: PropTypes.instanceOf(Map).isRequired,
   handleRemoveResult: PropTypes.func.isRequired,
-  handleEditQuery: PropTypes.func.isRequired
+  handleEditQuery: PropTypes.func.isRequired,
+  showCode: PropTypes.func.isRequired,
+  showUAST: PropTypes.func.isRequired
 };
 
 export default TabbedResults;