       .attr("fill-opacity", (d) -> opacityScale(d.data.risk))
 
       .on("click", (d) =>
+        category = @get('patient.categoryDisplay').findBy('name', d.data.name)
         svg.selectAll(".category").classed("active", false)
-        svg.selectAll(".category#{d.data.name}").classed("active", true)
-        @set('selectedCategory', @get('patient.categoryDisplay').findBy('name', d.data.name))
+        if (@get('selectedCategory') == (category))
+          @set('selectedCategory', null)
+        else
+          svg.selectAll(".category#{d.data.name}").classed("active", true)
+          @set('selectedCategory', category)
       )
 
       .on("dblclick", (d) ->

      .attr("d", arc)
      .attr("fill-opacity", (d) -> opacityScale(d.data.risk))
      .on("click", (d) =>
        svg.selectAll(".category").classed("active", false)
        svg.selectAll(".category#{d.data.name}").classed("active", true)
        @set('selectedCategory', @get('patient.categoryDisplay').findBy('name', d.data.name))
      )
    svg.selectAll(".outer").data(pie(@data))
      .attr("fill-opacity", (d) -> opacityScale(d.data.risk))

  data: []
  svg: null
  patient: null
  padding: 5
  size: 600

  didInsertElement: ->
    svg = d3.select(@element).select("svg")
    data = @get('data')
    width = height = @get('size') - 2 * @get('padding')

    outerRadius = d3.min([width, height])/2
    radius = outerRadius *.95
