Feature/legend filter

app/components/graphbuilder-settings.js

@@ -46,7 +46,7 @@ export default Ember.Component.extend({
     rcaAll() {
       this.set('rcaFilter', 'all');
       this.set('isOpen', false);
-    },
+    }
   }
 });
 

app/components/vistk-dotplot.js

@@ -80,7 +80,7 @@ export default Ember.Component.extend({
         }],
         selection: [currentSelection]
       });
- }),
+  }),
   draw: function() {
     this.set('width', this.$().parent().width());
     this.set('height', this.$().parent().height());
@@ -97,4 +97,3 @@ export default Ember.Component.extend({
     });
   }
 });
-

app/components/vistk-network.js

@@ -22,6 +22,7 @@ export default Ember.Component.extend({
         d.name_short_en = datum.name_short_en + ` (${datum.code})`;
         d.name_short_es = datum.name_short_es + ` (${datum.code})`;
         d.color = datum.color;
+        d.group = datum.group;
         d[this.get('varDependent')] = datum[this.get('varDependent')];
         d[this.get('varRCA')] = datum[this.get('varRCA')];
       }
@@ -46,8 +47,9 @@ export default Ember.Component.extend({
   edges: computed('dataType', function() {
     return this.get('graph').edges;
   }),
-  network: computed('data.[]', 'varDependent', 'dataType', 'vis', 'i18n.locale', function() {
-    return vistk.viz().params({
+  config: computed('data.[]', 'varDependent', 'dataType', 'vis', 'i18n.locale', function() {
+     let keyFilter = this.get('keyFilter') || [];
+     return {
       type: 'productspace',
       height: this.get('height'),
       width: this.get('width'),
@@ -61,17 +63,24 @@ export default Ember.Component.extend({
       var_y: 'y',
       radius: 5,
       var_color: 'color',
+      var_group: 'group',
       color: (d) => { return d; },
       y_invert: true,
       var_id: 'id',
       items: [{
         attr: 'name',
         marks: [{
           type: 'circle',
-          fill: (d) => {
+          fill: (d, i, vars) => {
             //if there is no search, color products export > 0 and rca > 1
             // industries if RCA > 1 ( varDependent for industries is also rca )
-            if(d[this.get('varRCA')] >= 1){
+            if(keyFilter.length > 0) {
+              if(d[vars.var_group] === keyFilter[0] && d[this.get('varRCA')] >= 1) {
+                return d.color;
+              } else {
+                return 'white';
+              }
+            } else if(d[this.get('varRCA')] >= 1) {
               return d.color;
             }
           },
@@ -129,7 +138,10 @@ export default Ember.Component.extend({
           translate: [0, -10]
         }]
       }]
-    });
+    }
+  }),
+  network: computed('data.[]', 'varDependent', 'dataType', 'vis', 'i18n.locale', function() {
+    return vistk.viz().params(this.get('config'));
   }),
   didInsertElement: function() {
     Ember.run.scheduleOnce('afterRender', this , function() {
@@ -142,6 +154,38 @@ export default Ember.Component.extend({
     this.removeObserver('i18n.locale', this, this.update);
     this.removeObserver('data.[]', this, this.update);
   },
+  refresh: observer('keyFilter', function() {
+    if(!this.element){ return ; } //do not redraw if not there
+    let keyFilter = this.get('keyFilter') || [];
+
+    Ember.run.later(this , function() {
+      if(this.get('network')) {
+        d3.select(this.get('id')).call(this.get('network'));
+        this.get('network').params({filter: keyFilter});
+        this.get('network').params({
+          y_invert: true,
+          items: [{
+            marks: [{
+              type: 'circle',
+              fill: (d, i, vars) => {
+                if(keyFilter.length > 0) {
+                  if(d[vars.var_group] === keyFilter[0] && d[this.get('varRCA')] >= 1) {
+                    return d.color;
+                  } else {
+                    return 'white';
+                  }
+                } else if(d[this.get('varRCA')] >= 1) {
+                  return d.color;
+                }
+              }
+            }]
+          }]
+        });
+        this.get('network').params().refresh = true;
+        d3.select(this.get('id')).call(this.get('network'));
+      }
+    });
+  }),
   update: observer('data.[]', 'varDependent', 'i18n.locale', function() {
     if(!this.element){ return false; } //do not redraw if not there
     d3.select(this.get('id')).select('svg').remove();

app/components/vistk-scatterplot.js

@@ -14,12 +14,12 @@ export default Ember.Component.extend({
   id: computed('elementId', function() {
     return `#${this.get('elementId')}`;
   }),
-  scatter: computed('data.@each', 'dataType','eciValue','i18n.locale', function() {
+  config: computed('data.@each', 'dataType','eciValue','i18n.locale', function() {
     let eci = this.get('eciValue');
     let lang = this.get('i18n.locale') === 'en-col' ? 'en_EN': 'es_ES';
+    let keyFilter = this.get('keyFilter') || [];
     let format = function(value) { return numeral(value).format('0.00'); };
-    return vistk.viz()
-    .params({
+    return {
       type: 'scatterplot',
       margin: {top: 10, right: 20, bottom: 30, left: 30},
       height: this.get('height'),
@@ -30,6 +30,7 @@ export default Ember.Component.extend({
       var_x: 'distance',
       var_y: 'complexity',
       var_r: this.get('varSize'),
+      var_group: 'group',
       radius_min: 2,
       radius_max: 10,
       x_domain: this.get('x_domain'),
@@ -159,8 +160,12 @@ export default Ember.Component.extend({
           }
         }]
       }],
+      filter: keyFilter,
       lang: lang
-    });
+    }
+  }),
+  scatter: computed('data.@each', 'dataType','eciValue','i18n.locale', function() {
+    return vistk.viz().params(this.get('config'));
   }),
   varSize: computed('dataType', function() {
     if(this.get('dataType') === 'products') { return 'cog'; }
@@ -194,6 +199,18 @@ export default Ember.Component.extend({
     this.removeObserver('i18n.locale', this, this.update);
     this.removeObserver('data.[]', this, this.update);
   },
+  refresh: observer('keyFilter', function() {
+    if(!this.element){ return ; } //do not redraw if not there
+    let keyFilter = this.get('keyFilter') || [];
+
+    Ember.run.later(this , function() {
+      if(this.get('scatter')) {
+        this.get('scatter').params({filter: keyFilter});
+        this.get('scatter').params().refresh = true;
+        d3.select(this.get('id')).call(this.get('scatter'));
+      }
+    });
+  }),
   update: observer('data.@each', 'varRca', 'i18n.locale', 'dataType', function() {
     if(!this.element){ return ; } //do not redraw if not there
     d3.select(this.get('id')).select('svg').remove();

app/components/visualization-legend-key.js

@@ -1,14 +1,25 @@
 import Ember from 'ember';
-const { computed, get } = Ember;
+const {computed, get} = Ember;
 
 export default Ember.Component.extend({
   color: computed.alias('key.color'),
+  code: computed.alias('key.code'),
   name: computed('key', 'i18n.locale', function(){
     let locale = get(this, 'i18n.display');
     return get(this, `key.name_${locale}`);
   }),
   myStyle: computed('color', function() {
     var color = this.get('color');
     return new Ember.Handlebars.SafeString("color: " + color);
-  })
+  }),
+  classNameBindings: ['isActive'],
+  active: false,
+  isActive: computed('active', function() {
+    return this.get('code') === this.get('active');
+  }),
+  actions: {
+    changeKey() {
+      this.sendAction('action', this.get('code'));
+    }
+  }
 });

app/components/visualization-legend.js

@@ -1,4 +1,19 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+  activeKey: null,
+  actions: {
+    changeKey(key) {
+      let code = [];
+
+      if(this.get('activeKey') === key) {
+        this.set('activeKey', null);
+      } else {
+        this.set('activeKey', key);
+        code = [key];
+      }
+
+      this.set('keyFilter', code);
+    }
+  }
 });

app/routes/location/visualization.js

@@ -119,6 +119,7 @@ export default Ember.Route.extend({
     controller.set('drawerChangeGraphIsOpen', false); // Turn off other drawers
     controller.set('drawerQuestionsIsOpen', false); // Turn off other drawers
     controller.set('searchText', controller.get('search'));
+    controller.set('keyFilter', []);
     window.scrollTo(0, 0);
   },
   resetController(controller, isExiting) {

app/styles/components/_modules/_buildermod.scss

@@ -154,10 +154,15 @@
   margin-left: 6rem;
 }
 
+.buildermod__legend__item .is-active {
+  font-weight: 800;
+}
+
 .buildermod__legend__item {
   display: inline-block;
   width: 100%;
   white-space: nowrap;
+  cursor: pointer;
 
   .fa {
     position: relative;

app/styles/components/_visualizations/_network.scss

@@ -12,7 +12,7 @@
 
 .node--is--highlighted {
   stroke: $colorBlack;
-  stroke-width: 1px;
+  stroke-width: 1.5px;
 }
 
 .connect__line {

app/templates/components/visualization-legend-key.hbs

@@ -1 +1 @@
-<i class="fa fa-circle" style={{myStyle}}></i> {{name}}
+<span {{action 'changeKey'}}><i class="fa fa-circle" style={{myStyle}}></i> {{name}}</span>

app/templates/components/visualization-legend.hbs

@@ -1,8 +1,8 @@
 <div class="buildermod__legend">
 	{{#each key in legend}}
 		<div class="buildermod__legend__item">
-	  		{{visualization-legend-key key=key }}
+	  		{{visualization-legend-key key=key active=activeKey action='changeKey'}}
 	  	</div>
 	{{else}}
 	{{/each}}
-</div>
+</div>

app/templates/visualization.hbs

@@ -41,11 +41,12 @@
         entityId=entityId
         variable=variable
         search=search
+        keyFilter=keyFilter
         graph=graph
       }}
 
       {{#if needsLegend }}
-        {{component 'visualization-legend' legend=legend }}
+        {{component 'visualization-legend' legend=legend keyFilter=keyFilter }}
       {{/if}}
 
       <div class="buildermod__settings__wrap">
@@ -56,6 +57,7 @@
           canYearToggle=canYearToggle
           isScatter=isScatter
           rcaFilter=rcaFilter
+          keyFilter=keyFilter
         }}
       </div>
     </div>