Change which category is displayed when the category dropdown is changed

on the analyze page.   Finishes #182277818

app/controllers/analyze_controller.rb

@@ -1,13 +1,11 @@
 class AnalyzeController < SqmApplicationController
   def index
-    @category ||= Category.find_by_category_id(params[:category_id])
-    @category ||= Category.find_by_category_id(1)
+    @category ||= Category.find_by_category_id(params[:category])
+    @categories = Category.all.order(:category_id)
 
-    @subcategory ||= Subcategory.find_by_subcategory_id(params[:subcategory_id])
+    @subcategory ||= @category.subcategories.order(:subcategory_id).first
     @subcategory ||= Subcategory.order(:subcategory_id).includes(%i[measures]).first
 
     @measures = @subcategory.measures.order(:measure_id).includes(%i[scales admin_data_items])
-
-    @academic_year ||= AcademicYear.order('range DESC').first
   end
 end

app/helpers/analyze_helper.rb

@@ -58,4 +58,8 @@ module AnalyzeHelper
   def data_sources
     3
   end
+
+  def analyze_category_link(district:, school:, academic_year:, category:)
+    "/districts/#{district.slug}/schools/#{school.slug}/analyze?year=#{academic_year.range}&category=#{category.category_id}"
+  end
 end

app/helpers/header_helper.rb

@@ -8,7 +8,7 @@ module HeaderHelper
   end
 
   def link_to_analyze(district:, school:, academic_year:)
-    "/districts/#{district.slug}/schools/#{school.slug}/analyze?year=#{academic_year.range}"
+    "/districts/#{district.slug}/schools/#{school.slug}/analyze?year=#{academic_year.range}&category=1"
   end
 
   def district_url_for(district:, academic_year:)

app/javascript/controllers/analyze_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="analyze"
+export default class extends Controller {
+  connect() { }
+  change_category(event) {
+        window.location = event.target.value
+  }
+}

app/javascript/controllers/index.js

@@ -2,4 +2,7 @@
 // Run that command whenever you add a new controller or create them with
 // ./bin/rails generate stimulus controllerName
 
-import { application } from "./application";
+import { application } from "./application"
+
+import AnalyzeController from "./analyze_controller.js"
+application.register("analyze", AnalyzeController)

app/views/analyze/index.html.erb

@@ -2,20 +2,36 @@
   <h1 class="sub-header-2 color-white m-0"> Analysis of <%= @school.name %> </h1>
 <% end %>
 
-<div class="graph-content">
-  <div class="breadcrumbs sub-header-4">
-    <%= @category.category_id %>:<%= @category.name %> > <%= @subcategory.subcategory_id  %>:<%= @subcategory.name %>
-  </div>
-  <hr/>
-  <% @measures.each do  |measure|%>
-  <section class="mt-6" >
-    <p class="construct-id">Measure <%= measure.measure_id %></p>
-    <h2> <%= measure.name %> </h2>
 
-  <div class="mt-6">
-    <%= render partial: "grouped_bar_chart" , locals: { measure: measure} %>
+  <div class="graph-content">
+    <div class="breadcrumbs sub-header-4">
+      <%= @category.category_id %>:<%= @category.name %> > <%= @subcategory.subcategory_id  %>:<%= @subcategory.name %>
+    </div>
+    <hr/>
   </div>
 
-  </section>
-  <% end %>
+<div class="d-flex flex-row pt-5 row">
+  <div class="d-flex flex-column flex-grow-6 bg-color-white col-3 px-5" data-controller="analyze">
+    <h3 class="sub-header-4">Focus Area</h3>
+    <p>Select a category & subcategory to analyze measure-level results</p>
+    <select id="select-category" class="mx-3 form-select" data-id="category-dropdown" data-action="click->analyze#change_category">
+      <% @categories.each do |category|  %>
+        <option value="<%= analyze_category_link(district: @district, school: @school, academic_year: @academic_year, category: category) %>"  <%= @category.id == category.id ? "selected": ""  %> ><%= "#{category.category_id}: #{category.name}" %></option>
+      <% end %>
+    </select>
+  </span>
+
+  </div>
+
+  <div class="bg-color-white flex-grow-1 col-9">
+    <% @measures.each do  |measure|%>
+    <section class="mb-6" >
+      <p class="construct-id">Measure <%= measure.measure_id %></p>
+      <h2> <%= measure.name %> </h2>
+
+      <%= render partial: "grouped_bar_chart" , locals: { measure: measure} %>
+
+    </section>
+    <% end %>
+  </div>
 </div>

spec/system/journey_spec.rb

@@ -8,6 +8,7 @@ describe 'District Admin', js: true do
   let(:school_in_same_district) { School.find_by_slug 'muraco-elementary-school' }
 
   let(:category) { Category.find_by_name('Teachers & Leadership') }
+  let(:different_category) { Category.find_by_name('School Culture') }
   let(:subcategory) { Subcategory.find_by_name('Teachers & The Teaching Environment') }
   let(:measures_for_subcategory) { Measure.where(subcategory:) }
   let(:scales_for_subcategory) { Scale.where(measure: measures_for_subcategory) }
@@ -100,6 +101,12 @@ describe 'District Admin', js: true do
     click_on 'Overview'
     district_admin_sees_overview_content
 
+    click_on 'Analyze'
+    district_admin_sees_analyze_content
+
+    go_to_different_category(different_category)
+    district_admin_sees_category_change
+
     click_on 'Browse'
     district_admin_sees_browse_content
 
@@ -114,9 +121,6 @@ describe 'District Admin', js: true do
 
     go_to_different_year(ay_2019_20)
     district_admin_sees_year_change
-
-    got_to_analyze_page
-    district_admin_sees_analyze_content
   end
 end
 
@@ -156,9 +160,7 @@ def go_to_different_year(year)
   select year.formatted_range, from: 'select-academic-year'
 end
 
-def got_to_analyze_page
-  click_on 'Analyze'
-end
+def got_to_analyze_page; end
 
 def district_admin_sees_schools_change
   expected_path = "/districts/#{school_in_same_district.district.slug}/schools/#{school_in_same_district.slug}/browse/teachers-and-leadership?year=2020-21"
@@ -196,3 +198,11 @@ end
 def district_admin_sees_analyze_content
   expect(page).to have_text('1:Teachers & Leadership > 1A:Teachers & The Teaching Environment')
 end
+
+def go_to_different_category(_category)
+  select different_category.name, from: 'select-category'
+end
+
+def district_admin_sees_category_change
+  expect(page).to have_text '2A:Safety'
+end

spec/views/analyze/index.html.erb_spec.rb

@@ -51,13 +51,14 @@ describe 'analyze/index' do
     assign :district, create(:district)
     assign :school, create(:school)
     assign :category, category
+    assign :categories, [category]
     assign :subcategory, subcategory
     assign :measures, [support_for_teaching, effective_leadership, professional_qualifications]
 
     render
   end
 
-  context 'when all the presenters have a non-nil score' do
+  context 'when all the presenters have a nil score' do
     # let(:grouped_bar_column_presenters) do
     #   measure = create(:measure, name: 'Display Me', measure_id: 'display-me')
     #   scale = create(:scale, measure:)
@@ -89,5 +90,10 @@ describe 'analyze/index' do
       expect(rendered).to have_text '1A-II'
       expect(rendered).to have_text '1A-III'
     end
+
+    it 'displays user interface controls' do
+      expect(subject).to have_text 'Focus Area'
+      expect(subject).to have_css '#select-category'
+    end
   end
 end