show uast using uast-viewer

Signed-off-by: Maxim Sukharev <[email protected]>

Author: smacker

frontend/package.json

@@ -13,7 +13,8 @@
     "react-helmet": "^5.2.0",
     "react-scripts": "1.1.4",
     "react-split-pane": "^0.1.77",
-    "react-table": "^6.8.2"
+    "react-table": "^6.8.2",
+    "uast-viewer": "^0.0.2"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -33,8 +34,8 @@
     "prettier": "^1.12.1",
     "react-app-rewire-less": "^2.1.1",
     "react-app-rewired": "^1.5.2",
-    "whatwg-url": "^6.4.1",
-    "react-test-renderer": "^16.4.0"
+    "react-test-renderer": "^16.4.0",
+    "whatwg-url": "^6.4.1"
   },
   "proxy": {
     "/query": {

frontend/src/App.js

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import { Helmet } from 'react-helmet';
 import { Grid, Row, Col, Modal } from 'react-bootstrap';
 import SplitPane from 'react-split-pane';
+import UASTViewer, { transformer } from 'uast-viewer';
+import 'uast-viewer/dist/default-theme.css';
 import Sidebar from './components/Sidebar';
 import QueryBox from './components/QueryBox';
 import TabbedResults from './components/TabbedResults';
@@ -125,7 +127,14 @@ FROM ( SELECT MONTH(committer_when) as month,
     this.setState({
       showModal: true,
       modalTitle: 'UAST',
-      modalContent: <pre>{JSON.stringify(uast, null, 2)}</pre>
+      modalContent:
+        // currently github returns only 1 item, UAST of the file
+        // but just in case if there is more or less we show it without viewer
+        uast.length === 1 ? (
+          <UASTViewer uast={transformer(uast[0])} />
+        ) : (
+          <pre>{uast}</pre>
+        )
     });
   }
 

frontend/yarn.lock

@@ -7021,6 +7021,10 @@ ua-parser-js@^0.7.9:
   version "0.7.18"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
 
+uast-viewer@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/uast-viewer/-/uast-viewer-0.0.2.tgz#25dbd2649f51cff9380869d57c8edd813bb1e0b2"
+
 [email protected], uglify-js@^3.0.13:
   version "3.3.23"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.23.tgz#48ea43e638364d18be292a6fdc2b5b7c35f239ab"