feat: Add syntax Api to demo (#34)

Added new Syntax API Feature to the NLU Demo.

views/Output/Output.jsx

@@ -9,6 +9,7 @@ import Keywords from './Keywords.jsx';
 import Entities from './Entities.jsx';
 import Categories from './Categories.jsx';
 import Concept from './Concept.jsx';
+import Syntax from './Syntax.jsx';
 import SemanticRoles from './SemanticRoles.jsx';
 import { MAX_CONTENT_WIDTH } from '../utils/variables';
 
@@ -79,6 +80,12 @@ function Output(props) {
                 language={languages.getLanguageName(props.language)}
               />
             </Pane>
+            <Pane label="Syntax">
+              <Syntax
+                data={props.data.results.syntax.tokens}
+                language={languages.getLanguageName(props.language)}
+              />
+            </Pane>
             <Pane label="Semantic Roles">
               <SemanticRoles
                 data={props.data.results.semantic_roles}

views/Output/Syntax.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Waypoint from 'react-waypoint';
+import OutputTemplate from './OutputTemplate.jsx';
+import { breakpoint, breakpointsObj as bp } from '../utils/breakpoints';
+import { colors } from '../utils/colors';
+import { weight } from '../utils/typography';
+import Table from '../Table.jsx';
+
+const tableTheme = {
+  row_two: {
+    maxWidth: '300px',
+    [breakpoint(bp.SMALL)]: {
+      maxWidth: '450px',
+      borderBottom: `1px solid ${colors.WARM_GRAY}`,
+      paddingBottom: '1rem',
+      marginBottom: '1rem',
+    },
+  },
+  row_header_two: {
+    [breakpoint(bp.SMALL)]: {
+      borderBottom: 'none',
+    },
+  },
+  cell_header_two: {
+    fontWeight: weight.MEDIUM,
+    color: colors.COOL_GRAY,
+    ':first-child': {
+      fontWeight: weight.MEDIUM,
+      color: colors.COOL_GRAY,
+    },
+    ':nth-of-type(2)': {
+      fontWeight: weight.MEDIUM,
+      color: colors.COOL_GRAY,
+    },
+  },
+  cell_two: {
+    ':first-child': {
+      color: colors.PRIMARY_LIGHT,
+      fontWeight: weight.MEDIUM,
+    },
+    ':nth-of-type(2)': {
+      fontWeight: weight.MEDIUM,
+      color: colors.DARK_GRAY,
+    },
+    ':before': {
+      width: '5rem',
+      fontWeight: weight.MEDIUM,
+      color: colors.COOL_GRAY,
+    },
+  },
+  inner_two: {
+    width: 'calc(100% - 5rem)',
+  },
+};
+
+export default React.createClass({
+  displayName: 'Syntax',
+
+  propTypes: {
+    data: PropTypes.arrayOf(PropTypes.shape({
+      text: PropTypes.string,
+      part_of_speech: PropTypes.string,
+      lemma: PropTypes.string,
+    })),
+    language: PropTypes.string,
+  },
+
+  getInitialState() {
+    return {
+      showJson: false,
+      visibleItems: 10,
+    };
+  },
+
+  toggleJson() {
+    this.setState({ showJson: !this.state.showJson });
+  },
+
+  onWaypoint() {
+    if (this.state.visibleItems < this.props.data.length) {
+      setTimeout(() => {
+        this.setState({
+          visibleItems: this.state.visibleItems + 10,
+        });
+      }, 150);
+    }
+  },
+
+  render() {
+    return (
+      <div>
+        <OutputTemplate
+          description={<p className="base--p_small">Identify <a href="https://www.ibm.com/watson/developercloud/natural-language-understanding/api/v1/#syntax" target="_blank" rel="noopener noreferrer">tokens</a>, part of speech, sentence boundaries and lemmas in the text</p>}
+          data={{ syntax: this.props.data }}
+          showJson={this.state.showJson}
+          onExitJson={this.toggleJson}
+          onShowJson={this.toggleJson}
+        >
+		{console.log(this.props.data)}
+          {this.props.data && this.props.data.length > 0 ? (
+            <div>
+              <Table
+                columns={['Token', 'Part of Speech', 'Lemma']}
+                theme={tableTheme}
+                data={this.props.data.reduce((acc, item) => {
+                  acc.push({ Token: item.text,
+                    'Part of Speech': item.part_of_speech,
+                    Lemma: item.lemma });
+                  return acc;
+                }, []).filter((val, i) => i <= this.state.visibleItems)}
+              />
+              <Waypoint onEnter={this.onWaypoint} />
+            </div>
+          ) : (
+            <p>{`No Syntax results returned for ${this.props.language} input.`}</p>
+          )}
+        </OutputTemplate>
+      </div>
+    );
+  },
+});

views/utils/request.js

@@ -9,6 +9,13 @@ const FEATURES = {
     emotion: {},
     sentiment: {},
     semantic_roles: {},
+    syntax: {
+      tokens: {
+        lemma: true,
+        part_of_speech: true,
+      },
+      sentences: true,
+    },
   },
 };