Use UASTv2 in the frontend

Signed-off-by: Carlos Martín <carlos.martin.sanchez@gmail.com>

Author: carlosms

frontend/package.json

@@ -17,7 +17,7 @@
     "react-split-pane": "^0.1.77",
     "react-switch": "^3.0.4",
     "react-table": "^6.8.2",
-    "uast-viewer": "^0.0.8"
+    "uast-viewer": "^0.2.0"
   },
   "scripts": {
     "start": "react-app-rewired start",

frontend/src/api.js

@@ -145,7 +145,7 @@ function parseCode(language, content, filter, customServerUrl) {
       serverUrl: customServerUrl
     }
   }).then(res => {
-    if (res.data.status !== 0) {
+    if (res.status !== 200) {
       throw normalizeErrors(res.data.errors);
     }
     return res.data.uast;

frontend/src/components/UASTViewer.js

@@ -1,20 +1,22 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { transformer } from 'uast-viewer';
+import { expandRootIds, uastV2 } from 'uast-viewer';
 import UASTViewerPane from './UASTViewerPane';
 import api from '../api';
 import CloseIcon from '../icons/close-query-tab.svg';
 
+// Same values as the ones applied by withUASTEditor in CodeViewer.js
+// https://github.com/bblfsh/uast-viewer/blob/v0.2.0/src/withUASTEditor.js#L208
+const ROOT_IDS = [1];
+const LEVELS_EXPAND = 2;
+
 class UASTViewer extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       loading: false,
-      uast: transformer({
-        InternalType: 'Search results',
-        Children: props.uast
-      }),
+      uast: this.transform(props.uast),
       showLocations: false,
       filter: '',
       error: null
@@ -40,12 +42,24 @@ class UASTViewer extends Component {
     api
       .filterUAST(this.props.protobufs, this.state.filter)
       .then(uast => {
-        this.setState({ uast: transformer(uast) });
+        this.setState({ uast: this.transform(uast) });
       })
       .catch(err => this.setState({ uast: null, error: err }))
       .then(() => this.setState({ loading: false }));
   }
 
+  // Applies the uast-viewer object shape transformer, and expands the first
+  // 2 levels
+  transform(uast) {
+    const flatUAST = uastV2.transformer(uast);
+    return expandRootIds(
+      flatUAST,
+      ROOT_IDS,
+      LEVELS_EXPAND,
+      uastV2.getChildrenIds
+    );
+  }
+
   removeError() {
     this.setState({ error: null });
   }

frontend/src/components/UASTViewerPane.js

@@ -5,7 +5,6 @@ import { Button } from 'react-bootstrap';
 import './UASTViewerPane.less';
 
 const ROOT_ID = 1;
-const SEARCH_RESULTS_TYPE = 'Search results';
 
 function getSearchResults(uast) {
   if (!uast) {
@@ -17,8 +16,8 @@ function getSearchResults(uast) {
     return null;
   }
 
-  if (rootNode.InternalType === SEARCH_RESULTS_TYPE) {
-    return rootNode.Children;
+  if (Array.isArray(rootNode.n)) {
+    return rootNode.n.map(c => c.id);
   }
 
   return null;

frontend/yarn.lock

@@ -8059,10 +8059,10 @@ ua-parser-js@^0.7.18:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
   integrity sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==
 
-uast-viewer@^0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/uast-viewer/-/uast-viewer-0.0.8.tgz#e0e4c5bcad6bf3d62dcc48800a4350d800a01987"
-  integrity sha1-4OTFvK1r89YtzEiACkNQ2ACgGYc=
+uast-viewer@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/uast-viewer/-/uast-viewer-0.2.0.tgz#081cc7f2f67bf5db03dc53cd8a451f491c49e699"
+  integrity sha512-BTYLYY6xSu0ITjC4lO2Kb14Nw4oYKh7i3mChf4HygNJRTJ93FHaYTmyqS38cA3+1FsGnEyKSz+BwATGONLJPDQ==
 
 uglify-js@3.4.x, uglify-js@^3.0.13:
   version "3.4.3"