       view = 
         key: attribute
         # pass: pass
-        salience: (u) ->
-          if pass(u)
-            1 
-          else 
-            .1
-
-        weight: (u) ->
-          if pass(u)
-            1
-          else 
-            .05
+        salience: (u) -> if pass(u) then 1 else .1
+        weight:   (u) -> if pass(u) then 1 else .1
 
       toggle_opinion_filter view, has_one_enabled
 
-    toggle_comparison = (e) ->
-      enabled = e.target.checked
-
-      if enabled == null # toggle if argument not passed 
-        opinion_views.enable_comparison = !opinion_views.enable_comparison
-      else 
-        opinion_views.enable_comparison = enabled
-      save opinion_views 
+    show_all_not_available = !show_others
+
+    if attributes.length > 0
+      opinion_views_ui.visible_attributes ?= {}
+      opinion_views_ui.selected_vals_for_attribute ?= {}
+
+    for attribute, cnt in attributes
+      opinion_views_ui.selected_vals_for_attribute[attribute.key] ?= {}
+
+    toggle_attribute_visible = (attribute) ->
+      opinion_views_ui.visible_attributes[attribute.key] = !opinion_views_ui.visible_attributes[attribute.key]
+      if !opinion_views_ui.visible_attributes[attribute.key] && opinion_views_ui.group_by == attribute.key
+        toggle_group opinion_views.active_views.group_by
+        opinion_views_ui.group_by = null
+      save opinion_views_ui
+
+
+
+    if opinion_views_ui.group_by
+      all_groups = opinion_views.active_views.group_by.options
+      group_colors = get_color_for_groups all_groups
 
     DIV 
-      style: {}
-
-      DropOverlay 
-        open_area_on: 'activation'
-        render_anchor: (menu_showing) =>
-          if !menu_showing
-            [
-              FilterOpinionsIcon
-                height: 30
-
-              SPAN 
-                style: 
-                  paddingLeft: 8
-                'filter opinions'
-            ]
-          else 
-            SPAN 
-              style: 
-                paddingLeft: 8          
-              'close opinion filters'
-
-        # anchor_style: 
-        #   float: 'right'
-        anchor_open_style: 
-          backgroundColor: focus_color() 
-        anchor_class_name: 'filter-weight-sort-button'
-        drop_area_style:
-          top: 52
-          width: @props.containerWidth + 50
-          left: -25
-        dummy: opinion_view_ui # for helping the child component of DropOverlay rerender properly
-                               # on state change
-        dummy2: opinion_views
-
-        DIV null,
-          DIV 
-            style: 
-              position: 'absolute'
-              left: 60
-              top: -17
-            dangerouslySetInnerHTML: __html: """<svg width="25px" height="13px" viewBox="0 0 25 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Artboard" transform="translate(-1086.000000, -586.000000)" fill="#FFFFFF" stroke="#979797"><polyline id="Path" points="1087 599 1098.5 586 1110 599"></polyline></g></g></svg>"""
-
-          UL 
-            style: 
-              listStyle: 'none'
-
-            for option in [{name: 'Show only your opinions', label: 'Focus on expressing your own opinion.', filter: default_filters.just_you},
-                           {name: 'Show other people’s opinions too', label: 'Learn what others think.', filter: default_filters.everyone} ]
-              
-              do (option) =>
-                show_all_not_available = option.filter == default_filters.everyone && !show_others
-                LI 
-                  style: 
-                    padding: '8px 0'
-
-                  if show_all_not_available
-                    "This forum is currently configured to hide other people's opinions"
-                  
-                  LABEL 
-                    className: 'opinion_view_label'
-
-                    style: 
-                      pointerEvents: if show_all_not_available then 'none'
-                      opacity: if show_all_not_available then .4
-
-                    INPUT 
-                      type: 'radio'
-                      checked: (option.filter.key == 'everyone' && default_filters.just_you.key not of active_filters) || option.filter.key of active_filters
-                      className: 'bigger opinion_view_checker'
-                      onChange: ->
-                        if !(option.filter.key == 'everyone' && default_filters.just_you.key not of active_filters)
-                          toggle_opinion_filter option.filter
-
-
-
-                    SPAN 
-                      className: 'opinion_view_label_block'
-
-                      DIV 
-                        className: 'opinion_view_name'
-                        option.name
-                      DIV 
-                        className: 'opinion_view_explanation'
-                        option.label
-
-                  if option.filter.key == 'everyone'
-
-                    DIV 
-                      style: 
-                        pointerEvents: if opinion_views.active_views[default_filters.just_you.key] then 'none'
-                        opacity: if opinion_views.active_views[default_filters.just_you.key] then .4
-
-                      if attributes.length > 0
-                        if !opinion_view_ui.visible_attributes? 
-                          opinion_view_ui.visible_attributes = {}
-                          # opinion_view_ui.visible_attributes[attributes[0].key] = true 
-                        if !opinion_view_ui.selected_vals_for_attribute?
-                          opinion_view_ui.selected_vals_for_attribute = {}
-
-                        for attribute, cnt in attributes
-                          opinion_view_ui.selected_vals_for_attribute[attribute.key] ?= {}
-
-                          do (attribute) => 
-                            toggle_attribute_visible = ->
-                              opinion_view_ui.visible_attributes[attribute.key] = !opinion_view_ui.visible_attributes[attribute.key]
-                              save opinion_view_ui
-
-                            DIV 
-                              className: 'attribute_group'
-
-                              BUTTON
-                                className: 'attribute_expander' 
-                                  
-                                onClick: toggle_attribute_visible
-                                onKeyDown: (e) => 
-                                  if e.which == 13 || e.which == 32 # ENTER or SPACE
-                                    toggle_attribute_visible()
-                                    e.preventDefault()
-                                SPAN 
-                                  className: 'attribute_caret' 
-                                  dangerouslySetInnerHTML: __html: if opinion_view_ui.visible_attributes[attribute.key] then '&#9660;' else '&#9654;'
-
-                                "Narrow by #{attribute.name}"
-
-
-                              if opinion_view_ui.visible_attributes[attribute.key]
-
-                                DIV 
-                                  style: {}
-
-                                  for val in attribute.options
-                                    do (val) => 
-
-                                      LABEL 
-                                        className: 'attribute_value_selector' 
-                                          
-                                        INPUT 
-                                          type: 'checkbox'
-                                          # className: 'bigger'
-                                          value: val
-                                          checked: !!opinion_view_ui.selected_vals_for_attribute[attribute.key][val]
-                                          onChange: (e) ->
-                                            # create a view on the fly for this attribute
-                                            opinion_view_ui.selected_vals_for_attribute[attribute.key][val] = e.target.checked
-                                            save opinion_view_ui
-                                            update_view_for_attribute(attribute)
-
-                                        SPAN 
-                                          className: 'attribute_value_value'
-                                          "#{val}"
-
-                      if attributes.length > 0 
-                        DIV 
-                          style: 
-                            margin: "18px 0 0 32px"
-
-                          LABEL null, 
-                            DIV 
-                              className: 'opinion_view_name'
-
-                              "Group opinions by: "  
-
-                            SELECT 
-                              style: 
-                                maxWidth: '100%'
-                              onChange: (ev) -> 
-                                opinion_view_ui.group_by = ev.target.value
-                                save opinion_view_ui
-
-                                if opinion_view_ui.group_by
-
-                                  view = 
-                                    key: 'group_by'
-                                    name: "Group by #{opinion_view_ui.group_by}"
-                                    group: (u, opinion, proposal) -> 
-                                      group_val = fetch(u).tags[opinion_view_ui.group_by] or 'Unknown'
-                                      if attribute.input_type == 'checklist'
-                                        group_val.split(',')
-                                      else 
-                                        group_val
-                                  toggle_group view, true
-                                else 
-                                  delete opinion_views.active_views.group_by
-                                  save opinion_views
-
-
-                              value: opinion_view_ui.group_by
-
-                              OPTION 
-                                value: null
-                                ""
-                              for attribute in attributes 
-                                do (attribute) =>
-                                  OPTION 
-                                    value: attribute.key 
-                                    attribute.name or attribute.question
-
-                            DIV 
-                              className: 'opinion_view_explanation'
-                              "Colorize opinions based on the selected attribute."
-          
-          DIV 
-            style: 
-              marginTop: 24
-
-            LABEL 
-              className: 'opinion_view_label'
-              style: 
-                cursor: 'pointer'
-
-              INPUT 
-                type: 'checkbox'
-                className: 'bigger opinion_view_checker'
-                checked: opinion_views.enable_comparison
-                onChange: toggle_comparison 
-
-              SPAN 
-                className: 'opinion_view_label_block'
-
-                DIV 
-                  className: 'opinion_view_name'
-                  # style: 
-                  #   paddingLeft: 12
-                  TRANSLATE 'engage.compare_all', "Compare to everyone"
-
-                DIV 
-                  className: 'opinion_view_explanation'
-                  "Filtered out opinions are shown as translucent rather than hidden."
-
-
-      DIV null, 
+      style:
+        flex: 1
+        paddingRight: 24
+
+      DIV null,
+        SPAN 
+          className: 'opinion_view_name'
+          style: 
+            paddingRight: 8
+          'Add opinion filter:'
+
+
         UL 
           style: 
             listStyle: 'none'
-            paddingTop: 4
-
-          if default_filters.just_you.key of active_filters
-            draw_filter_cancel default_filters.just_you, -> toggle_opinion_filter default_filters.just_you
-
-          for attribute, vals of (opinion_view_ui.selected_vals_for_attribute or {})
-            for val, enabled of vals 
-              do (attribute, val) ->
-                if enabled 
-                  draw_filter_cancel {name: "#{attribute}: #{val}"}, (v) -> 
-                    opinion_view_ui.selected_vals_for_attribute[attribute][val] = false
-                    save opinion_view_ui
-                    update_view_for_attribute attribute
-
-
-draw_filter_cancel = (v, cb) -> 
-  LI 
-    style: 
-      textAlign: 'right'
-
-    SPAN 
-      style: 
-        fontSize: 14
-        fontWeight: 600
-        fontFamily: 'Fira Sans Condensed'
-        paddingRight: 4
-      v.name
-
-    BUTTON 
-      style:
-        border: 'none'
-        backgroundColor: 'transparent'
-        color: '#727272'
-        padding: "0 4px"
-      onClick: -> cb v 
-      onKeyDown: (e) => 
-        if e.which == 13 || e.which == 32 # ENTER or SPACE
-          cb v 
-      'x'
+            display: 'inline'
+
+
+          for attribute, cnt in attributes
+            continue if opinion_views_ui.visible_attributes[attribute.key]
+            do (attribute) ->
+              LI 
+                style: 
+                  display: 'inline-block'
+                BUTTON
+                  className: 'filter opinion_view_button' 
+                  onClick: -> toggle_attribute_visible(attribute)
+                  onKeyDown: (e) => 
+                    if e.which == 13 || e.which == 32 # ENTER or SPACE
+                      toggle_attribute_visible(attribute)
+                      e.preventDefault()
+
+                  "+ #{attribute.name}"
+
+
+        for attribute, cnt in attributes
+          continue if !opinion_views_ui.visible_attributes[attribute.key]
+          do (attribute) => 
+
+            DIV 
+              className: 'attribute_group'
+
+              BUTTON
+                onClick: -> toggle_attribute_visible(attribute)
+                onKeyDown: (e) => 
+                  if e.which == 13 || e.which == 32 # ENTER or SPACE
+                    toggle_attribute_visible(attribute)
+                    e.preventDefault()
+
+                "#{attribute.name}"
+
+                SPAN 
+                  style: 
+                    float: 'right'
+                  'x'
+
+              UL 
+                style: 
+                  border: '1px solid #D9D9D9'
+                  borderTop: 'none'
+                  padding: '2px 4px 4px 4px'
+                  borderRadius: '0 0 8px 8px'
+
+                for val in attribute.options
+                  is_grouped = opinion_views_ui.group_by == attribute.key
+                  checked = !!opinion_views_ui.selected_vals_for_attribute[attribute.key][val]
+
+                  do (val) => 
+                    LI 
+                      style: 
+                        display: 'inline-block'
+                      LABEL 
+                        className: "attribute_value_selector"
+
+                        SPAN
+                          className: if is_grouped then 'toggle_switch' else ''
+
+                          INPUT 
+                            type: 'checkbox'
+                            # className: 'bigger'
+                            value: val
+                            checked: checked
+                            onChange: (e) ->
+                              # create a view on the fly for this attribute
+                              opinion_views_ui.selected_vals_for_attribute[attribute.key][val] = e.target.checked
+                              save opinion_views_ui
+                              update_view_for_attribute(attribute)
+
+                          if is_grouped
+                            SPAN 
+                              className: 'toggle_switch_circle'
+                              style: 
+                                backgroundColor: if checked then group_colors[val]
+
+                        SPAN 
+                          className: 'attribute_value_value'
+                          "#{val}"
+
+      if attributes.length > 0 
+        cur_val = -1
+        for attr, idx in attributes
+          if opinion_views_ui.group_by == attr.key 
+            cur_val = idx
+        DIV 
+          style: 
+            marginTop: 18
+
+          LABEL 
+            style: 
+              display: 'flex'
+              alignItems: 'center'
+
+            SPAN 
+              className: 'opinion_view_name'
+              style: 
+                paddingRight: 8
+
+              "Group opinions by: "  
+
+            SELECT 
+              style: 
+                maxWidth: '100%'
+                marginRight: 12
+              onChange: (ev) -> 
+                if ev.target.value != null
+                  attribute = attributes[ev.target.value]
+                  opinion_views_ui.group_by = attribute?.key
+                else 
+                  opinion_views_ui.group_by = null
+
+                if !opinion_views_ui.visible_attributes[opinion_views_ui.group_by]
+                  !opinion_views_ui.visible_attributes[opinion_views_ui.group_by] = true 
+                  for option in attribute.options 
+                    opinion_views_ui.selected_vals_for_attribute[attribute.key][option] = true
+                save opinion_views_ui
+
+
+
+                if opinion_views_ui.group_by
+                  view = 
+                    key: 'group_by'
+                    name: "Group by #{opinion_views_ui.group_by}"
+                    group: (u, opinion, proposal) -> 
+                      group_val = fetch(u).tags[opinion_views_ui.group_by] or 'Unknown'
+                      if attribute.input_type == 'checklist'
+                        group_val.split(',')
+                      else 
+                        group_val
+                    options: attribute.options
+
+                  toggle_group view, true
+
+                else 
+                  delete opinion_views.active_views.group_by
+                  save opinion_views
+
+
+              value: cur_val
+
+              OPTION 
+                value: null
+                ""
+              for attribute,idx in attributes 
+                do (attribute) =>
+                  OPTION 
+                    value: idx 
+                    attribute.name or attribute.question
+
+            HelpIcon 'Opinions will be colorized based on this attribute so you can see differences between groups.'
 
 
 OpinionWeights = ReactiveComponent

    user_tags = customization 'user_tags'

    opinion_views = fetch 'opinion_views'
    opinion_view_ui = fetch 'opinion_views_ui'

    is_admin = fetch('/current_user').is_admin
    show_others = !customization('hide_opinions') || is_admin

        if customization('verification-by-pic') 
          VerificationProcessExplanation()

        ToggleButtons view_buttons, opinion_views_ui

      if opinion_views_ui.active == 'More views'
        needs_expansion = @props.additional_width && @props.style?.width
        DIV 
          style: 
            width: if needs_expansion then @props.style.width + @props.additional_width else '100%'
            position: 'relative'
            right: if needs_expansion then @props.additional_width # - @props.style.width
            border: '1px solid #B6B6B6'
            borderRadius: 8
            marginTop: 18
            padding: '18px 24px'

          DIV 
            style: 
              position: 'absolute'
              left: (document.querySelector('[data-view-state="More views"]')?.offsetLeft or 60) + 35
              top: -17

            dangerouslySetInnerHTML: __html: """<svg width="25px" height="13px" viewBox="0 0 25 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Artboard" transform="translate(-1086.000000, -586.000000)" fill="#FFFFFF" stroke="#979797"><polyline id="Path" points="1087 599 1098.5 586 1110 599"></polyline></g></g></svg>"""

          DIV 
            style: 
              display: 'flex'

            OpinionFilters()

            OpinionWeights()


OpinionFilters = ReactiveComponent
