Merge pull request #185 from ThinkDeepTech/hm/select-business-ui

Author: haydenmcp

package.json

@@ -33,7 +33,7 @@
     "@babel/plugin-proposal-class-properties": "^7.2.3",
     "@babel/plugin-proposal-decorators": "^7.2.3",
     "@babel/plugin-transform-runtime": "^7.1.0",
-    "@babel/preset-env": "^7.12.10",
+    "@babel/preset-env": "^7.16.0",
     "@babel/runtime": "^7.0.0",
     "@web/dev-server-esbuild": "^0.2.12",
     "babel-eslint": "^10.0.1",
@@ -57,9 +57,6 @@
     "serve": "^10.1.1",
     "wait-on": "^6.0.0"
   },
-  "resolutions": {
-    "graphql": "^15.8.0"
-  },
   "workspaces": [
     "packages/*"
   ],

packages/deep-graphql-binding/package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "@graphql-tools/delegate": "^8.4.3",
     "@graphql-tools/graphql-file-loader": "^7.3.3",
-    "@graphql-tools/load": "^7.4.1",
+    "@graphql-tools/load": "7.4.1",
     "@graphql-tools/schema": "^8.3.1",
     "@graphql-tools/utils": "^8.5.4",
     "graphql": "^15.8.0",

packages/deep-template-analyzer/deep-analyzer-page-summary.js

@@ -1,7 +1,12 @@
-import {ApolloMutationController} from '@apollo-elements/core';
-import {ApolloQuery, css, html} from '@apollo-elements/lit-apollo';
+import {
+  ApolloMutationController,
+  ApolloQueryController,
+} from '@apollo-elements/core';
+import {LitElement, css, html} from '@apollo-elements/lit-apollo';
 import '@google-web-components/google-chart';
 import '@material/mwc-button';
+import '@material/mwc-list/mwc-list-item';
+import '@material/mwc-select';
 import '@material/mwc-textfield';
 import '@thinkdeep/deep-button/deep-button.mjs';
 import '@thinkdeep/deep-card/deep-card.mjs';
@@ -11,9 +16,10 @@ import {translate} from 'lit-element-i18n';
 import CollectEconomicData from './graphql/CollectEconomicData.mutation.graphql';
 import GetSentiment from './graphql/GetSentiment.query.graphql';
 
-export default class DeepAnalyzerPageSummary extends ApolloQuery {
+export default class DeepAnalyzerPageSummary extends LitElement {
   static get properties() {
     return {
+      query: {type: Object},
       mutation: {type: Object},
       selectedSentiments: {type: Array},
     };
@@ -22,12 +28,13 @@ export default class DeepAnalyzerPageSummary extends ApolloQuery {
   constructor() {
     super();
 
-    this.query = GetSentiment;
-
-    this.variables = {
-      economicEntityName: 'Google',
-      economicEntityType: 'BUSINESS',
-    };
+    this.query = new ApolloQueryController(this, GetSentiment, {
+      variables: {
+        economicEntityName: 'Google',
+        economicEntityType: 'BUSINESS',
+      },
+      onData: this._triggerUpdate.bind(this),
+    });
 
     this.mutation = new ApolloMutationController(this, CollectEconomicData);
 
@@ -38,12 +45,14 @@ export default class DeepAnalyzerPageSummary extends ApolloQuery {
     super.connectedCallback();
 
     this.addEventListener('google-chart-select', this._handleChartSelection);
+    this.addEventListener('selected', this._onSelect);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
 
     this.removeEventListener('google-chart-select', this._handleChartSelection);
+    this.removeEventListener('selected', this._onSelect);
   }
 
   static get styles() {
@@ -60,7 +69,7 @@ export default class DeepAnalyzerPageSummary extends ApolloQuery {
       ${translate('translations:startCollectingLabel')}
       <mwc-textfield
         label="Business name"
-        @input="${debounce(this._setCompanyName.bind(this), 350)}"
+        @input="${debounce(this._onInput.bind(this), 350)}"
       ></mwc-textfield>
       <mwc-button
         raised
@@ -69,18 +78,24 @@ export default class DeepAnalyzerPageSummary extends ApolloQuery {
         icon="input"
       ></mwc-button>
 
-      <div>
-        <google-chart
-          type="line"
-          options="{&quot;title&quot;: &quot;Sentiment as a function of time&quot; }"
-          cols="[{&quot;label&quot;: &quot;Timestamp&quot;, &quot;type&quot;: &quot;number&quot;}, {&quot;label&quot;: &quot;Sentiment&quot;, &quot;type&quot;: &quot;number&quot;}]"
-          rows="[${
-            this.data?.sentiments?.map((sentiment) =>
-              JSON.stringify([sentiment.timestamp, sentiment.score])
-            )
-          }]"
-        ></google-chart>
-      </div>
+      <mwc-select label="Select a business">
+        <mwc-list-item value="Google">Google</mwc-list-item>
+        <mwc-list-item value="Amazon">Amazon</mwc-list-item>
+        <mwc-list-item value="PetCo">PetCo</mwc-list-item>
+        <mwc-list-item value="Tesla">Tesla</mwc-list-item>
+        <mwc-list-item value="Ford">Ford</mwc-list-item>
+      </mwc-select>
+
+      <google-chart
+        type="line"
+        options="{&quot;title&quot;: &quot;Sentiment as a function of time&quot; }"
+        cols="[{&quot;label&quot;: &quot;Timestamp&quot;, &quot;type&quot;: &quot;number&quot;}, {&quot;label&quot;: &quot;Sentiment&quot;, &quot;type&quot;: &quot;number&quot;}]"
+        rows="[${
+          this.query?.data?.sentiments?.map((sentiment) =>
+            JSON.stringify([sentiment.timestamp, sentiment.score])
+          )
+        }]"
+      ></google-chart>
 
       ${
         this.selectedSentiments.map((sentiment) =>
@@ -111,7 +126,7 @@ export default class DeepAnalyzerPageSummary extends ApolloQuery {
 
       const selectedPoint = googleChart.rows[selectedRow];
 
-      this.data?.sentiments?.forEach((sentiment) => {
+      this.query?.data?.sentiments?.forEach((sentiment) => {
         if (this._hasMatchingData(sentiment, selectedPoint)) {
           this.selectedSentiments.push(sentiment);
         }
@@ -132,13 +147,39 @@ export default class DeepAnalyzerPageSummary extends ApolloQuery {
     );
   }
 
-  _setCompanyName({explicitOriginalTarget}) {
+  /**
+   * Handle input.
+   * @param {HTMLElement} explicitOriginalTarget - The input element containing the business for which data will be collected.
+   */
+  _onInput({explicitOriginalTarget}) {
     const companyName = explicitOriginalTarget.value;
     this.mutation.variables = {
       economicEntityName: companyName,
       economicEntityType: 'BUSINESS',
     };
   }
+
+  /**
+   * Find the selected business and add it to the query variables.
+   */
+  _onSelect() {
+    const businessName = this.shadowRoot.querySelector('[aria-selected="true"]')
+      .value;
+    this.query.variables = {
+      economicEntityName: businessName,
+      economicEntityType: 'BUSINESS',
+    };
+  }
+
+  /**
+   * Trigger an update to the DOM.
+   *
+   * NOTE: This is used because the google-chart wasn't dynamically updating as a result of data fetch.
+   * This happened to solve the issue.
+   */
+  _triggerUpdate() {
+    this.requestUpdate();
+  }
 }
 
 customElements.define('deep-analyzer-page-summary', DeepAnalyzerPageSummary);

packages/deep-template-analyzer/deep-template-analyzer.js

@@ -144,8 +144,6 @@ export class DeepTemplateAnalyzer extends i18nMixin(LitElement) {
       ${this.styles}
 
       <mwc-top-app-bar-fixed>
-        <mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button>
-
         <div slot="title">${this.companyName}</div>
 
         <mwc-icon-button

packages/deep-template-analyzer/package.json

@@ -70,6 +70,8 @@
     "@google-web-components/google-chart": "^5.0.0",
     "@material/mwc-button": "^0.25.3",
     "@material/mwc-icon-button": "^0.25.3",
+    "@material/mwc-list": "^0.25.3",
+    "@material/mwc-select": "^0.25.3",
     "@material/mwc-textfield": "^0.25.3",
     "@material/mwc-top-app-bar-fixed": "^0.25.3",
     "@thinkdeep/deep-button": "^0.0.8",

packages/tools/web-dev-server.config.mjs

@@ -1,3 +1,4 @@
+// TODO: Update to @rollup/plugin-graphql
 import rollupGraphQL from '@apollo-elements/rollup-plugin-graphql';
 import rollupReplace from '@rollup/plugin-replace';
 import { fromRollup } from '@web/dev-server-rollup';