anchor.diff:              marginLeft: if lefty then 65
   
   
  -          if has_histogram_focus
  -            DIV 
  -              style: 
  -                width: BODY_WIDTH + 80
  -                border: "3px solid #{if !has_histogram_focus then 'transparent' else if @root.selected_point then '#ccc' else focus_blue }"
  -                height: '100%'
  -                position: 'absolute'
  -                borderRadius: 16
  -                marginLeft: if lefty then 200 else -BODY_WIDTH/2 - 40
  -                left: if lefty then 0 else '50%'
  -                top: 18
  -
  -              Bubblemouth {target: 'histogram'}
  +          # Border + bubblemouth that is shown when there is a histogram selection
  +          GroupSelectionRegion()
   
             #community cons
             CommunityPoints { key: 'cons' }
  
positive.code: 
          for opinion in opinions
            user = opinion.user
            fetch(opinion) # subscribe ...
  
            if highlighted_users
              if _.contains(highlighted_users, opinion.user)   
  
negative.code: }
  """
  
  ####
  # GroupSelectionRegion
  #
  # Draws a border around the selected opinion(s)
  # Shows a bubble mouth for selected opinions or 
  # a user name + avatar display if we've selected
  # an individual opinion.
  GroupSelectionRegion = ReactiveComponent
    displayName: 'GroupSelectionRegion'
  
    render : -> 
      hist = fetch 'histogram'
  
      has_histogram_focus = hist.selected_opinions || hist.selected_opinion
      if has_histogram_focus
        DIV 
          style: 
            width: BODY_WIDTH + 80
            border: "3px solid #{if @root.selected_point then '#ccc' else focus_blue }"
            height: '100%'
            position: 'absolute'
            borderRadius: 16
            marginLeft: if lefty then 200 else -BODY_WIDTH/2 - 40
            left: if lefty then 0 else '50%'
            top: 18
  
          # draw a bubble mouth
          if hist.selected_opinions
            size = 20
            left = ((hist.selected_opinion_value + 1)/2) * BODY_WIDTH + 20
            border_width = 3
  
            css_triangle = 
              width: 0
              height: 0
              borderRight: "#{size}px solid transparent"
              borderLeft: "#{size}px solid transparent"
              borderBottom: "#{size * 1.5}px solid #{if @root.selected_point then '#ccc' else focus_blue}"
              position: 'relative'
              top: -32
  
            DIV style: {left: left, position: 'absolute'},
              DIV 
                style: css.crossbrowserify(css_triangle)
                DIV
                  style:
                    width: 0
                    position: 'relative'
                    left: -(size - 1)
                    top: border_width + 3
                    borderLeft: "#{size - 1}px solid transparent"
                    borderRight: "#{size - 1}px solid transparent"
                    borderBottom: "#{size * 1.5 - 1}px solid white"
  
          # draw a name + avatar display for the selected opinion
          else 
            place_avatar_opinion_value = if hist.selected_opinion_value > 0 then .8 else -.8
            left = ((place_avatar_opinion_value + 1)/2) * BODY_WIDTH + 20
  
            avatar_size = 80
            user = fetch(fetch(hist.selected_opinion).user)
            name = user.name or 'Anonymous'
            title = "#{name}'#{if name[name.length - 1] != 's' then 's' else ''} Opinion"
  
            name_width = widthWhenRendered(title, {fontSize: '30px', fontWeight: '600'})
  
            if hist.selected_opinion_value > 0
              name_style = 
                left: -28 - avatar_size * .5 - name_width 
                borderTopLeftRadius: 16
                paddingRight: avatar_size * .75
                paddingLeft: 18
  
            else
              name_style = 
                left: avatar_size/4
                borderTopRightRadius: 16
                paddingLeft: avatar_size * .75
                paddingRight: 18
                  
            DIV style: {left: left, position: 'absolute'},
  
              DIV null,
                Avatar 
                  key: user
                  user: user
                  hide_tooltip: true
                  style: 
                    position: 'absolute'
                    width: avatar_size
                    height: avatar_size
                    top: -avatar_size * .75
                    left: -avatar_size/4
                    zIndex: 99 
                    border: "3px solid #{focus_blue}"
  
                DIV 
                  style: _.extend name_style,
                    position: 'absolute'
                    backgroundColor: focus_blue
                    paddingTop: 8
                    paddingBottom: 8
                    color: 'white'
                    top: -58
                    width: name_width + 10 + 18 + avatar_size * .75 + 10
  
  
                  SPAN 
                    style: 
                      fontSize: 30
                    title
  
      else 
        SPAN null
  
  ##
  # Avatar
  