On bar chart selection replace search component with HTML (#12964)

* Sync selected namespace between bar chart and search component

- When user selects the namespace from chart, update the selected
  value in search select component
- Clear out the namespace selection when new date is queried

* On bar chart selection, replace search select with custom html

ui/app/components/clients/history.js

@@ -8,6 +8,8 @@ export default class HistoryComponent extends Component {
 
   @tracked selectedNamespace = null;
 
+  @tracked barChartSelection = false;
+
   // Determine if we have client count data based on the current tab,
   // since model is slightly different for current month vs history api
   get hasClientData() {
@@ -106,11 +108,17 @@ export default class HistoryComponent extends Component {
     // In case of search select component, value returned is an array
     if (Array.isArray(value)) {
       this.selectedNamespace = this.getNamespace(value[0]);
+      this.barChartSelection = false;
     } else if (typeof value === 'object') {
       // While D3 bar selection returns an object
       this.selectedNamespace = this.getNamespace(value.label);
-    } else {
-      this.selectedNamespace = null;
+      this.barChartSelection = true;
     }
   }
+
+  @action
+  resetData() {
+    this.barChartSelection = false;
+    this.selectedNamespace = null;
+  }
 }

ui/app/templates/components/clients/history.hbs

@@ -132,7 +132,7 @@
           </div>
         </div>
         {{#if this.showGraphs}}
-          <div class="columns has-bottom-margin-m">
+          <div class="columns has-bottom-margin-m" {{did-update this.resetData}} {{did-insert this.resetData}}>
             <div class="column is-two-thirds" data-test-client-count-graph>
               <BarChart
                 @title="Top 10 Namespaces"
@@ -151,7 +151,22 @@
             <div class="column">
               <div class="card">
                   <div class="card-content">
-                    <SearchSelect
+                    {{#if (and this.barChartSelection this.selectedNamespace)}}
+                      <label class="title is-5 has-bottom-margin-m">Single namespace</label>
+                      <ul class="has-bottom-margin-l search-select-list">
+                        <li class="search-select-list-item">
+                          <div>
+                            {{or this.selectedNamespace.namespace_path 'root'}}
+                          </div>
+                          <div class="control">
+                            <button type="button" class="button is-ghost" {{action "resetData"}}>
+                            <Icon @glyph="trash" class="has-text-grey" />
+                          </button>
+                          </div>
+                        </li>
+                      </ul>
+                    {{else}}
+                      <SearchSelect
                         @id="namespaces"
                         @labelClass="title is-5"
                         @disallowNewItems={{true}}
@@ -161,24 +176,25 @@
                         @searchField="namespace_path"
                         @selectLimit={{1}}
                         />
-                        {{#if this.selectedNamespace}}
-                          <div class="columns">
-                              <div class="column">
-                                  <StatText @label="Active clients" @value={{this.selectedNamespace.counts.clients}} @size="l" /> 
-                              </div>
+                    {{/if}}
+                    {{#if this.selectedNamespace}}
+                      <div class="columns">
+                          <div class="column">
+                              <StatText @label="Active clients" @value={{this.selectedNamespace.counts.clients}} @size="l" /> 
                           </div>
-                          <div class="columns">
-                              <div class="column">
-                                  <StatText @label="Unique entities" @value={{this.selectedNamespace.counts.distinct_entities}} @size="m" />
-                              </div>
-                              <div class="column">
-                                  <StatText @label="Non-entity tokens" @value={{this.selectedNamespace.counts.non_entity_tokens}} @size="m" />
-                              </div>
+                      </div>
+                      <div class="columns">
+                          <div class="column">
+                              <StatText @label="Unique entities" @value={{this.selectedNamespace.counts.distinct_entities}} @size="m" />
                           </div>
-                        {{else}}
-                          <EmptyState @title="No namespace selected" 
-                              @message="Click on a namespace in the Top 10 chart or type its name in the box to view it's individual client counts." />
-                        {{/if}}
+                          <div class="column">
+                              <StatText @label="Non-entity tokens" @value={{this.selectedNamespace.counts.non_entity_tokens}} @size="m" />
+                          </div>
+                      </div>
+                    {{else}}
+                      <EmptyState @title="No namespace selected" 
+                          @message="Click on a namespace in the Top 10 chart or type its name in the box to view it's individual client counts." />
+                    {{/if}}
                   </div>
               </div>
             </div>

ui/lib/core/addon/components/search-select.js

@@ -71,7 +71,6 @@ export default Component.extend({
       return option.id;
     });
     this.set('allOptions', allOptions); // used by filter-wildcard helper
-
     let formattedOptions = this.selectedOptions.map(option => {
       let matchingOption = options.findBy('id', option);
       options.removeObject(matchingOption);