Merge pull request #283 from carlosms/uast2-modes

UAST mode selector

Author: carlosms

docs/rest-api.md

@@ -212,7 +212,7 @@ curl -X POST \
 
 ## POST /parse
 
-Receives a file content and returns UAST.
+Receives a file content and returns UAST parsed by the bblfsh server.
 
 ```bash
 curl -X POST \
@@ -221,6 +221,7 @@ curl -X POST \
   -d '{
   "language": "javascript",
   "content": "console.log(test)"
+  "mode": "annotated"
 }'
 ```
 
@@ -243,8 +244,11 @@ curl -X POST \
 }
 ```
 
-The endpoint also receives additional parameters:
+The endpoint accepts these parameters:
 
+- `language`: Language name.
+- `content`: The file contents to parse.
+- `mode`: Transformation mode. Can be one of `native`, `annotated`, `semantic`. The default is `semantic`.
 - `serverUrl` - allows to override bblfsh server URL.
 - `filename` - can be used instead of language. Then the bblfsh server would try to guess the language.
 - `filter` - [xpath query](https://doc.bblf.sh/user/uast-querying.html) to filter the results.

frontend/package.json

@@ -28,6 +28,8 @@
     "format": "eslint --fix 'src/**/*.js'"
   },
   "devDependencies": {
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.7.0",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-jest": "^21.15.1",

frontend/src/api.js

@@ -135,12 +135,16 @@ function detectLang(content, filename) {
   }).then(res => res.data);
 }
 
-function parseCode(language, content, filter, customServerUrl) {
+const defaultUastMode = 'semantic';
+const uastModes = ['semantic', 'annotated', 'native'];
+
+function parseCode(language, content, mode, filter, customServerUrl) {
   return apiCall('/parse', {
     method: 'POST',
     body: {
       language,
       content,
+      mode,
       filter,
       serverUrl: customServerUrl
     }
@@ -178,5 +182,7 @@ export default {
   parseCode,
   getLanguages,
   filterUAST,
-  version
+  version,
+  uastModes,
+  defaultUastMode
 };

frontend/src/components/CodeViewer.js

@@ -54,7 +54,9 @@ function EditorUASTSpitPane({
   handleLangChange,
   handleShowLocationsChange,
   handleFilterChange,
-  handleSearch
+  handleSearch,
+  mode,
+  handleModeChange
 }) {
   return (
     <SplitPane split="vertical" defaultSize={500} minSize={1} maxSize={-15}>
@@ -72,6 +74,8 @@ function EditorUASTSpitPane({
         handleShowLocationsChange={handleShowLocationsChange}
         handleFilterChange={handleFilterChange}
         handleSearch={handleSearch}
+        mode={mode}
+        handleModeChange={handleModeChange}
       />
     </SplitPane>
   );
@@ -87,7 +91,9 @@ EditorUASTSpitPane.propTypes = {
   handleLangChange: PropTypes.func.isRequired,
   handleShowLocationsChange: PropTypes.func.isRequired,
   handleFilterChange: PropTypes.func.isRequired,
-  handleSearch: PropTypes.func.isRequired
+  handleSearch: PropTypes.func.isRequired,
+  mode: PropTypes.string.isRequired,
+  handleModeChange: PropTypes.func.isRequired
 };
 
 const EditorWithUAST = withUASTEditor(EditorUASTSpitPane);
@@ -104,7 +110,8 @@ class CodeViewer extends Component {
       uast: null,
       error: null,
       showLocations: false,
-      filter: ''
+      filter: '',
+      mode: api.defaultUastMode
     };
 
     this.handleLangChange = this.handleLangChange.bind(this);
@@ -113,6 +120,7 @@ class CodeViewer extends Component {
     this.removeError = this.removeError.bind(this);
     this.handleShowLocationsChange = this.handleShowLocationsChange.bind(this);
     this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.handleModeChange = this.handleModeChange.bind(this);
   }
 
   componentDidMount() {
@@ -154,7 +162,12 @@ class CodeViewer extends Component {
     this.setState({ error: null, uast: null, uastLoading: true });
 
     api
-      .parseCode(this.state.language, this.props.code, this.state.filter)
+      .parseCode(
+        this.state.language,
+        this.props.code,
+        this.state.mode,
+        this.state.filter
+      )
       .then(res => {
         this.setState({ uast: res });
       })
@@ -176,6 +189,13 @@ class CodeViewer extends Component {
     this.setState({ filter: e.target.value });
   }
 
+  handleModeChange(mode) {
+    this.setState({ mode });
+    if (this.state.showUast) {
+      this.parseCode();
+    }
+  }
+
   render() {
     const { showModal, onHide, code, languages } = this.props;
     const {
@@ -186,7 +206,8 @@ class CodeViewer extends Component {
       uast,
       error,
       showLocations,
-      filter
+      filter,
+      mode
     } = this.state;
 
     if (loading) {
@@ -230,6 +251,8 @@ class CodeViewer extends Component {
                 handleShowLocationsChange={this.handleShowLocationsChange}
                 handleFilterChange={this.handleFilterChange}
                 handleSearch={this.parseCode}
+                mode={mode}
+                handleModeChange={this.handleModeChange}
               />
               {error ? (
                 <div className="error">

frontend/src/components/ParseModeSwitcher.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import api from '../api';
+
+function ParseModeSwitcher({ mode, handleModeChange }) {
+  return (
+    <div style={{ padding: '20px' }}>
+      {api.uastModes.map(m => (
+        <label
+          key={m}
+          style={{
+            marginRight: '20px',
+            textTransform: 'capitalize'
+          }}
+        >
+          <input
+            type="radio"
+            value={m}
+            checked={mode === m}
+            onChange={e => handleModeChange(e.target.value)}
+          />{' '}
+          {m}
+        </label>
+      ))}
+    </div>
+  );
+}
+
+ParseModeSwitcher.propTypes = {
+  mode: PropTypes.string.isRequired,
+  handleModeChange: PropTypes.func.isRequired
+};
+
+export default ParseModeSwitcher;

frontend/src/components/ParseModeSwitcher.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import renderer from 'react-test-renderer';
+import ParseModeSwitcher from './ParseModeSwitcher';
+
+test('it renders correctly', () => {
+  const tree = renderer
+    .create(
+      <ParseModeSwitcher mode={'semantic'} handleModeChange={() => null} />
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+test('it calls handleModeChange when the input is clicked', () => {
+  const spy = jest.fn();
+  const wrapper = shallow(
+    <ParseModeSwitcher mode={'semantic'} handleModeChange={spy} />
+  );
+  wrapper
+    .find('[value="annotated"]')
+    .simulate('change', { target: { value: 'annotated' } });
+  expect(spy.mock.calls.length).toBe(1);
+});

frontend/src/components/UASTViewerPane.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import UASTViewer from 'uast-viewer';
 import { Button } from 'react-bootstrap';
 import './UASTViewerPane.less';
+import ParseModeSwitcher from './ParseModeSwitcher';
 
 const ROOT_ID = 1;
 
@@ -34,7 +35,9 @@ function UASTViewerPane({
   filter,
   handleShowLocationsChange,
   handleFilterChange,
-  handleSearch
+  handleSearch,
+  mode,
+  handleModeChange
 }) {
   let content = null;
 
@@ -57,6 +60,15 @@ function UASTViewerPane({
     }
   }
 
+  let modeSwitcher = null;
+  if (mode) {
+    modeSwitcher = (
+      <div className="uast-mode-wrapper">
+        <ParseModeSwitcher mode={mode} handleModeChange={handleModeChange} />
+      </div>
+    );
+  }
+
   return (
     <div className="uast-viewer-pane">
       <div className="show-locations-wrapper">
@@ -86,7 +98,6 @@ function UASTViewerPane({
             SEARCH
           </Button>
           <Button
-            className="edit-query"
             bsStyle="gbpl-primary-tint-2-link"
             href="https://doc.bblf.sh/using-babelfish/uast-querying.html"
             target="_blank"
@@ -95,6 +106,7 @@ function UASTViewerPane({
           </Button>
         </form>
       </div>
+      {modeSwitcher}
       {content}
     </div>
   );
@@ -107,7 +119,11 @@ UASTViewerPane.propTypes = {
   filter: PropTypes.string,
   handleShowLocationsChange: PropTypes.func.isRequired,
   handleFilterChange: PropTypes.func.isRequired,
-  handleSearch: PropTypes.func.isRequired
+  handleSearch: PropTypes.func.isRequired,
+  // If mode is empty the mode selector will be hidden
+  mode: PropTypes.string,
+  // Mandatory if mode is set
+  handleModeChange: PropTypes.func
 };
 
 export default UASTViewerPane;

frontend/src/components/__snapshots__/ParseModeSwitcher.test.js.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders correctly 1`] = `
+<div
+  style={
+    Object {
+      "padding": "20px",
+    }
+  }
+>
+  <label
+    style={
+      Object {
+        "marginRight": "20px",
+        "textTransform": "capitalize",
+      }
+    }
+  >
+    <input
+      checked={true}
+      onChange={[Function]}
+      type="radio"
+      value="semantic"
+    />
+     
+    semantic
+  </label>
+  <label
+    style={
+      Object {
+        "marginRight": "20px",
+        "textTransform": "capitalize",
+      }
+    }
+  >
+    <input
+      checked={false}
+      onChange={[Function]}
+      type="radio"
+      value="annotated"
+    />
+     
+    annotated
+  </label>
+  <label
+    style={
+      Object {
+        "marginRight": "20px",
+        "textTransform": "capitalize",
+      }
+    }
+  >
+    <input
+      checked={false}
+      onChange={[Function]}
+      type="radio"
+      value="native"
+    />
+     
+    native
+  </label>
+</div>
+`;

frontend/src/setupTests.js

@@ -1,8 +1,12 @@
 import path from 'path';
 import os from 'os';
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import initButtonStyles from './utils/bootstrap';
 
+configure({ adapter: new Adapter() });
+
 const { LocalStorage } = require('node-localstorage');
 // URL API for node
 const { URL } = require('whatwg-url');