     max_year: 1940
     start_year: 1920
     end_year: 1940
-    group_name: ""
-    group_description: ""
+    group_name: ''
+    group_description: ''
 
   componentDidMount: ->
     # make a request to /groups/{{ group_id }},
     # fetch metadata that describes the group name and description, and pass those values into
     # the application state
-    API.type("groups").get(@props.params.group_id).then (group_json) =>
+    API.type('groups').get(@props.params.group_id).then (group_json) =>
       @setState
         group_name: group_json.name,
         group_description: group_json.description
 
     # make a request to /group_stats?group_id={{ group_id }}
     # using the incoming data to set completion stats
-    API.type("group_stats").get(group_id: @props.params.group_id).then (stats_json) =>
+    API.type('group_stats').get(group_id: @props.params.group_id).then (stats_json) =>
       @setState
         group_stats: stats_json[0]
 

    if @state.selected_institution != @state.placeholder_institution
      selection_criteria.push(
        {
          "label": "selected_institution",
          "value": @state.selected_institution,
          "key_in_first_page_json": "location"
        }
      )

    if @state.selected_playwright != @state.placeholder_playwright
      selection_criteria.push(
        {
          "label": "selected_playwright",
          "value": @state.selected_playwright,
          "key_in_first_page_json": "written_by"
        }
      )



  render: ->
    if ! @state.group?
      <div className='group-page'>
        <h2>Loading...</h2>
      </div>
    else
      <div className='collection-page-content'>
        <div className='collection-title-container'>
          <div className='collection-title'>{@state.group_name}</div>
        </div>

        <div className='collection-container'>
          <div className='collection-thumbnails'>{ @state.first_page_array }</div>
          <div className='collection-browse-controls-container'>
            <div className='collection-browse-controls-content'>
              <div className='collection-description'>{@state.group_description}</div>

              <div className='collection-performance-dates-container'>
                <div className='collection-performance-dates-label'>Performance Dates</div>

                <div className='min-max-dates-container'>
                  <div className='min-date min-max-date'>{@state.min_year}</div>
                  <div className='max-date min-max-date'>{@state.max_year}</div>
                </div>

                <div className='collection-range-slider'>
                  <ReactSlider
                    onAfterChange={@updateYearSliderState}
                    ref='ReactYearSlider'
                    min={@state.min_year}
                    max={@state.max_year}
                    value={[@state.start_year, @state.end_year]} withBars />
                </div>

                <div className='custom-select collection-institution'>
                  <SelectDropdown options_array={@state.all_institutions}
                                  placeholder={@state.placeholder_institution}
                                  value={@state.selected_institution}
                                  onSelect={@updateSelectedInstitution} />
                </div>

                <div className='custom-select collection-playwright'>
                  <SelectDropdown options_array={@state.all_playwrights}
                                  placeholder={@state.placeholder_playwright}
                                  value={@state.selected_playwright}
