import { hierarchy,
         pack } from 'd3-hierarchy';
import { scaleSequential,
         interpolateMagma } from 'd3-scale';
import { select } from 'd3-selection';

import VisComponent from 'candela/VisComponent';

import content from './index.jade';

export default class Bubble extends VisComponent {
  constructor (el, options) {
    super(el, options);

    // Respond to "add" and "delete" events from the data window; these are all
    // that will be needed to update the hierarchy data.
    options.dataWindow.on('added', d => this.add(d));
    options.dataWindow.on('deleted', d => this.remove(d));

    // Construct an initial hierarchy.
    this.data = {
      value: 0,
      children: [
        {
          value: 0,
          children: []
        }
      ]
    };

    select(this.el)
      .html(content({
        width: '620.5px',
        height: '400px'
      }));
  }

  render () {
    select(this.el)
      .select('svg')
      .selectAll('*')
      .remove();

    let bubbles = pack()
      .size([620.5, 400])
      .padding(3);

    let root = hierarchy(this.data)
      .sum(d => d.value || 1);

    bubbles(root);

    console.log(root.descendants());

    const color = scaleSequential(interpolateMagma)
      .domain([-4, 4]);

    const node = select(this.el)
      .select('svg')
      .selectAll('g')
      .data(root.descendants())
      .enter()
      .append('g')
      .attr('transform', d => `translate(${d.x}, ${d.y})`);

    node.append('circle')
      .attr('r', d => d.r)
      .attr('fill', d => color(d.depth));
  }

  add (d) {
    console.log('add', d);
    this.data.value++;
    if (d.anomalous) {
      if (this.getCluster(d.cluster) === undefined) {
        this.makeCluster(d.cluster);
      }

      this.incrementCluster(d.cluster);
    }
  }

  remove (d) {
    console.log('remove', d);
    this.data.value--;
    if (d.anomalous) {
      this.decrementCluster(d.cluster);
    }
  }

  getCluster (which) {
    return this.data.children[0].children[which];
  }

  makeCluster (which) {
    this.data.children[0].children[which] = {
      value: 0
    };
  }

  incrementCluster (which) {
    this.data.children[0].children[which].value++;
  }

  decrementCluster (which) {
    this.data.children[0].children[which].value--;
  }
}

@@ -64,24 +64,21 @@
  %7B scale
-Sequenti
+Ordin
 al,%0A    
@@ -82,32 +82,32 @@
         
-interpolateMagma
+schemeCategory20
  %7D from 
@@ -659,32 +659,16 @@
 ata = %7B%0A
-      value: 0,%0A
       ch
@@ -687,16 +687,56 @@
       %7B%0A
+          value: 0%0A        %7D,%0A        %7B%0A
         
@@ -1170,111 +1170,47 @@
 cons
-ole.log(root.descendants());%0A%0A    const color = scaleSequential(interpolateMagma)%0A      .domain(%5B-4, 4%5D
+t color = scaleOrdinal(schemeCategory20
 );%0A%0A
@@ -1476,420 +1476,772 @@
    .
-attr('fill', d =%3E color(d.depth));%0A  %7D%0A%0A  add (d) %7B%0A    console.log('add', d);%0A    this.data.value++;%0A    if (d.anomalous) %7B%0A      if (this.getCluster(d.cluster) === undefined) %7B%0A        this.makeCluster(d.cluster);%0A      %7D%0A%0A      this.incrementCluster(d.cluster);%0A    %7D%0A  %7D%0A%0A  remove (d) %7B%0A    console.log('remove', d);%0A    this.data.value--;%0A    if (d.anomalous) %7B%0A      this.decrementCluster(d.cluster);%0A    %7D
+style('stroke', 'black')%0A      .style('stroke-width', '1px')%0A      .style('fill', (d, i) =%3E %7B%0A        if (d.depth === 0) %7B%0A          return 'lightgray';%0A        %7D else if (d.depth === 1) %7B%0A          return 'gray';%0A        %7D else %7B%0A          return color(i);%0A        %7D%0A      %7D);%0A  %7D%0A%0A  add (d) %7B%0A    if (d.anomalous) %7B%0A      if (this.getCluster(d.cluster) === undefined) %7B%0A        this.makeCluster(d.cluster);%0A      %7D%0A%0A      this.incrementCluster(d.cluster);%0A    %7D else %7B%0A      this.incrementNormal();%0A    %7D%0A  %7D%0A%0A  remove (d) %7B%0A    if (d.anomalous) %7B%0A      this.decrementCluster(d.cluster);%0A    %7D else %7B%0A      this.decrementNormal();%0A    %7D%0A  %7D%0A%0A  incrementNormal () %7B%0A    this.data.children%5B0%5D.value++;%0A  %7D%0A%0A  decrementNormal () %7B%0A    this.data.children%5B0%5D.value--;
 %0A  %7D
@@ -2287,33 +2287,33 @@
 s.data.children%5B
-0
+1
 %5D.children%5Bwhich
@@ -2359,33 +2359,33 @@
 s.data.children%5B
-0
+1
 %5D.children%5Bwhich
@@ -2461,33 +2461,33 @@
 s.data.children%5B
-0
+1
 %5D.children%5Bwhich
@@ -2554,17 +2554,17 @@
 hildren%5B
-0
+1
 %5D.childr

Restructure and recolor anomalous/non-anomalous bubbles