feat(ux): 8 UX improvements — simpler home, advanced filters, phase tabs, 4-line rows

1. Simpler home page: only search box on landing, no filter dropdowns
2. Advanced filters: hidden behind toggle on results page, auto-open if active
3. Per-school phase rendering: each row renders based on its own data
4. Taller 4-line rows with context line (type, age range, denomination, gender)
5. Result-scoped filters: dropdown values reflect current search results
6. Fix blank filter values: exclude empty strings and "Not applicable"
7. Rankings: Primary/Secondary phase tabs with phase-specific metrics
8. Compare: Primary/Secondary tabs with school counts and phase metrics

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

nextjs-app/components/ComparisonView.tsx

@@ -1,6 +1,6 @@
 /**
  * ComparisonView Component
- * Client-side comparison interface with charts and tables
+ * Client-side comparison interface with phase tabs, charts, and tables
  */
 
 'use client';
@@ -12,11 +12,30 @@ import { ComparisonChart } from './ComparisonChart';
 import { SchoolSearchModal } from './SchoolSearchModal';
 import { EmptyState } from './EmptyState';
 import { LoadingSkeleton } from './LoadingSkeleton';
-import type { ComparisonData, MetricDefinition } from '@/lib/types';
+import type { ComparisonData, MetricDefinition, School } from '@/lib/types';
 import { formatPercentage, formatProgress, CHART_COLORS } from '@/lib/utils';
 import { fetchComparison } from '@/lib/api';
 import styles from './ComparisonView.module.css';
 
+const PRIMARY_CATEGORIES = ['expected', 'higher', 'progress', 'average', 'gender', 'equity', 'context', 'absence', 'trends'];
+const SECONDARY_CATEGORIES = ['gcse'];
+
+const PRIMARY_OPTGROUPS: { label: string; category: string }[] = [
+  { label: 'Expected Standard', category: 'expected' },
+  { label: 'Higher Standard', category: 'higher' },
+  { label: 'Progress Scores', category: 'progress' },
+  { label: 'Average Scores', category: 'average' },
+  { label: 'Gender Performance', category: 'gender' },
+  { label: 'Equity (Disadvantaged)', category: 'equity' },
+  { label: 'School Context', category: 'context' },
+  { label: 'Absence', category: 'absence' },
+  { label: '3-Year Trends', category: 'trends' },
+];
+
+const SECONDARY_OPTGROUPS: { label: string; category: string }[] = [
+  { label: 'GCSE Performance', category: 'gcse' },
+];
+
 interface ComparisonViewProps {
   initialData: Record<string, ComparisonData> | null;
   initialUrns: number[];
@@ -39,6 +58,7 @@ export function ComparisonView({
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [comparisonData, setComparisonData] = useState(initialData);
   const [shareConfirm, setShareConfirm] = useState(false);
+  const [comparePhase, setComparePhase] = useState<'primary' | 'secondary'>('primary');
 
   // Seed context from initialData when component mounts and localStorage is empty
   useEffect(() => {
@@ -84,6 +104,37 @@ export function ComparisonView({
     }
   }, [selectedSchools, selectedMetric, pathname, searchParams, router]);
 
+  // Classify schools by phase using comparison data
+  const classifySchool = (school: School): 'primary' | 'secondary' => {
+    const info = comparisonData?.[school.urn]?.school_info;
+    if (info?.attainment_8_score != null) return 'secondary';
+    if (info?.rwm_expected_pct != null) return 'primary';
+    // Fallback: check yearly data
+    const yearlyData = comparisonData?.[school.urn]?.yearly_data;
+    if (yearlyData?.some((d: any) => d.attainment_8_score != null)) return 'secondary';
+    return 'primary';
+  };
+
+  const primarySchools = selectedSchools.filter(s => classifySchool(s) === 'primary');
+  const secondarySchools = selectedSchools.filter(s => classifySchool(s) === 'secondary');
+
+  // Auto-select tab with more schools
+  useEffect(() => {
+    if (comparisonData && selectedSchools.length > 0) {
+      if (secondarySchools.length > primarySchools.length) {
+        setComparePhase('secondary');
+      } else {
+        setComparePhase('primary');
+      }
+    }
+  }, [comparisonData]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handlePhaseChange = (phase: 'primary' | 'secondary') => {
+    setComparePhase(phase);
+    const defaultMetric = phase === 'secondary' ? 'attainment_8_score' : 'rwm_expected_pct';
+    setSelectedMetric(defaultMetric);
+  };
+
   const handleMetricChange = (metric: string) => {
     setSelectedMetric(metric);
   };
@@ -100,6 +151,12 @@ export function ComparisonView({
     } catch { /* fallback: do nothing */ }
   };
 
+  const isPrimary = comparePhase === 'primary';
+  const allowedCategories = isPrimary ? PRIMARY_CATEGORIES : SECONDARY_CATEGORIES;
+  const optgroups = isPrimary ? PRIMARY_OPTGROUPS : SECONDARY_OPTGROUPS;
+  const filteredMetrics = metrics.filter(m => allowedCategories.includes(m.category));
+  const activeSchools = isPrimary ? primarySchools : secondarySchools;
+
   // Get metric definition
   const currentMetricDef = metrics.find((m) => m.key === selectedMetric);
   const metricLabel = currentMetricDef?.label || selectedMetric;
@@ -129,10 +186,20 @@ export function ComparisonView({
     );
   }
 
+  // Build filtered comparison data for active phase
+  const activeComparisonData: Record<string, ComparisonData> = {};
+  if (comparisonData) {
+    activeSchools.forEach(s => {
+      if (comparisonData[s.urn]) {
+        activeComparisonData[s.urn] = comparisonData[s.urn];
+      }
+    });
+  }
+
   // Get years for table
   const years =
-    comparisonData && Object.keys(comparisonData).length > 0
-      ? comparisonData[Object.keys(comparisonData)[0]].yearly_data.map((d) => d.year)
+    Object.keys(activeComparisonData).length > 0
+      ? activeComparisonData[Object.keys(activeComparisonData)[0]].yearly_data.map((d) => d.year)
       : [];
 
   return (
@@ -158,208 +225,206 @@ export function ComparisonView({
         </div>
       </header>
 
-      {/* Metric Selector */}
-      <section className={styles.metricSelector}>
-        <label htmlFor="metric-select" className={styles.metricLabel}>
-          Select Metric:
-        </label>
-        <select
-          id="metric-select"
-          value={selectedMetric}
-          onChange={(e) => handleMetricChange(e.target.value)}
-          className={styles.metricSelect}
+      {/* Phase Tabs */}
+      <div className={styles.phaseTabs}>
+        <button
+          className={`${styles.phaseTab} ${isPrimary ? styles.phaseTabActive : ''}`}
+          onClick={() => handlePhaseChange('primary')}
         >
-          <optgroup label="Expected Standard">
-            {metrics.filter(m => m.category === 'expected').map((metric) => (
-              <option key={metric.key} value={metric.key}>{metric.label}</option>
-            ))}
-          </optgroup>
-          <optgroup label="Higher Standard">
-            {metrics.filter(m => m.category === 'higher').map((metric) => (
-              <option key={metric.key} value={metric.key}>{metric.label}</option>
-            ))}
-          </optgroup>
-          <optgroup label="Progress Scores">
-            {metrics.filter(m => m.category === 'progress').map((metric) => (
-              <option key={metric.key} value={metric.key}>{metric.label}</option>
-            ))}
-          </optgroup>
-          <optgroup label="Average Scores">
-            {metrics.filter(m => m.category === 'average').map((metric) => (
-              <option key={metric.key} value={metric.key}>{metric.label}</option>
-            ))}
-          </optgroup>
-          <optgroup label="Gender Performance">
-            {metrics.filter(m => m.category === 'gender').map((metric) => (
-              <option key={metric.key} value={metric.key}>{metric.label}</option>
-            ))}
-          </optgroup>
-          <optgroup label="Equity (Disadvantaged)">
-            {metrics.filter(m => m.category === 'disadvantaged').map((metric) => (
-              <option key={metric.key} value={metric.key}>{metric.label}</option>
-            ))}
-          </optgroup>
-          <optgroup label="School Context">
-            {metrics.filter(m => m.category === 'context').map((metric) => (
-              <option key={metric.key} value={metric.key}>{metric.label}</option>
-            ))}
-          </optgroup>
-          <optgroup label="3-Year Trends">
-            {metrics.filter(m => m.category === '3yr').map((metric) => (
-              <option key={metric.key} value={metric.key}>{metric.label}</option>
-            ))}
-          </optgroup>
-        </select>
-        {currentMetricDef?.description && (
-          <p className={styles.metricDescription}>{currentMetricDef.description}</p>
-        )}
-      </section>
+          Primary ({primarySchools.length})
+        </button>
+        <button
+          className={`${styles.phaseTab} ${!isPrimary ? styles.phaseTabActive : ''}`}
+          onClick={() => handlePhaseChange('secondary')}
+        >
+          Secondary ({secondarySchools.length})
+        </button>
+      </div>
 
-      {/* Progress score explanation */}
-      {selectedMetric.includes('progress') && (
-        <p className={styles.progressNote}>
-          Progress scores measure pupils' progress from KS1 to KS2. A score of 0 equals the national average; positive scores are above average.
-        </p>
-      )}
-
-      {/* School Cards */}
-      <section className={styles.schoolsSection}>
-        <div className={styles.schoolsGrid}>
-          {selectedSchools.map((school, index) => (
-            <div
-              key={school.urn}
-              className={styles.schoolCard}
-              style={{ borderLeft: `3px solid ${CHART_COLORS[index % CHART_COLORS.length]}` }}
+      {activeSchools.length === 0 ? (
+        <EmptyState
+          title={`No ${comparePhase} schools in your comparison`}
+          message={`Add ${comparePhase} schools from search results to compare them here.`}
+          action={{
+            label: '+ Add Schools',
+            onClick: () => setIsModalOpen(true),
+          }}
+        />
+      ) : (
+        <>
+          {/* Metric Selector */}
+          <section className={styles.metricSelector}>
+            <label htmlFor="metric-select" className={styles.metricLabel}>
+              Select Metric:
+            </label>
+            <select
+              id="metric-select"
+              value={selectedMetric}
+              onChange={(e) => handleMetricChange(e.target.value)}
+              className={styles.metricSelect}
             >
-              <button
-                onClick={() => handleRemoveSchool(school.urn)}
-                className={styles.removeButton}
-                aria-label={`Remove ${school.school_name}`}
-                title="Remove from comparison"
-              >
-                ×
-              </button>
-              <h2 className={styles.schoolName}>
-                <a href={`/school/${school.urn}`}>{school.school_name}</a>
-              </h2>
-              <div className={styles.schoolMeta}>
-                {school.local_authority && (
-                  <span className={styles.metaItem}>{school.local_authority}</span>
-                )}
-                {school.school_type && (
-                  <span className={styles.metaItem}>{school.school_type}</span>
-                )}
-              </div>
+              {optgroups.map(({ label, category }) => {
+                const groupMetrics = filteredMetrics.filter(m => m.category === category);
+                if (groupMetrics.length === 0) return null;
+                return (
+                  <optgroup key={category} label={label}>
+                    {groupMetrics.map((metric) => (
+                      <option key={metric.key} value={metric.key}>{metric.label}</option>
+                    ))}
+                  </optgroup>
+                );
+              })}
+            </select>
+            {currentMetricDef?.description && (
+              <p className={styles.metricDescription}>{currentMetricDef.description}</p>
+            )}
+          </section>
 
-              {/* Latest metric value */}
-              {comparisonData && comparisonData[school.urn] && (
-                <div className={styles.latestValue}>
-                  <div className={styles.latestLabel}>{metricLabel}</div>
-                  <div className={styles.latestNumber} style={{ color: CHART_COLORS[index % CHART_COLORS.length] }}>
-                    <span
-                      style={{
-                        display: 'inline-block',
-                        width: '10px',
-                        height: '10px',
-                        borderRadius: '50%',
-                        background: CHART_COLORS[index % CHART_COLORS.length],
-                        marginRight: '0.4rem',
-                        verticalAlign: 'middle',
-                      }}
-                    />
-                    {(() => {
-                      const yearlyData = comparisonData[school.urn].yearly_data;
-                      if (yearlyData.length === 0) return '-';
+          {/* Progress score explanation */}
+          {selectedMetric.includes('progress') && (
+            <p className={styles.progressNote}>
+              Progress scores measure pupils&apos; progress from KS1 to KS2. A score of 0 equals the national average; positive scores are above average.
+            </p>
+          )}
 
-                      const latestData = yearlyData[yearlyData.length - 1];
-                      const value = latestData[selectedMetric as keyof typeof latestData];
-
-                      if (value === null || value === undefined) return '-';
-
-                      // Format based on metric type
-                      if (selectedMetric.includes('progress')) {
-                        return formatProgress(value as number);
-                      } else if (selectedMetric.includes('pct') || selectedMetric.includes('rate')) {
-                        return formatPercentage(value as number);
-                      } else {
-                        return typeof value === 'number' ? value.toFixed(1) : String(value);
-                      }
-                    })()}
+          {/* School Cards */}
+          <section className={styles.schoolsSection}>
+            <div className={styles.schoolsGrid}>
+              {activeSchools.map((school, index) => (
+                <div
+                  key={school.urn}
+                  className={styles.schoolCard}
+                  style={{ borderLeft: `3px solid ${CHART_COLORS[index % CHART_COLORS.length]}` }}
+                >
+                  <button
+                    onClick={() => handleRemoveSchool(school.urn)}
+                    className={styles.removeButton}
+                    aria-label={`Remove ${school.school_name}`}
+                    title="Remove from comparison"
+                  >
+                    ×
+                  </button>
+                  <h2 className={styles.schoolName}>
+                    <a href={`/school/${school.urn}`}>{school.school_name}</a>
+                  </h2>
+                  <div className={styles.schoolMeta}>
+                    {school.local_authority && (
+                      <span className={styles.metaItem}>{school.local_authority}</span>
+                    )}
+                    {school.school_type && (
+                      <span className={styles.metaItem}>{school.school_type}</span>
+                    )}
                   </div>
+
+                  {/* Latest metric value */}
+                  {activeComparisonData[school.urn] && (
+                    <div className={styles.latestValue}>
+                      <div className={styles.latestLabel}>{metricLabel}</div>
+                      <div className={styles.latestNumber} style={{ color: CHART_COLORS[index % CHART_COLORS.length] }}>
+                        <span
+                          style={{
+                            display: 'inline-block',
+                            width: '10px',
+                            height: '10px',
+                            borderRadius: '50%',
+                            background: CHART_COLORS[index % CHART_COLORS.length],
+                            marginRight: '0.4rem',
+                            verticalAlign: 'middle',
+                          }}
+                        />
+                        {(() => {
+                          const yearlyData = activeComparisonData[school.urn].yearly_data;
+                          if (yearlyData.length === 0) return '-';
+
+                          const latestData = yearlyData[yearlyData.length - 1];
+                          const value = latestData[selectedMetric as keyof typeof latestData];
+
+                          if (value === null || value === undefined) return '-';
+
+                          if (selectedMetric.includes('progress')) {
+                            return formatProgress(value as number);
+                          } else if (selectedMetric.includes('pct') || selectedMetric.includes('rate')) {
+                            return formatPercentage(value as number);
+                          } else {
+                            return typeof value === 'number' ? value.toFixed(1) : String(value);
+                          }
+                        })()}
+                      </div>
+                    </div>
+                  )}
                 </div>
-              )}
+              ))}
             </div>
-          ))}
-        </div>
-      </section>
+          </section>
 
-      {/* Comparison Chart */}
-      {comparisonData && Object.keys(comparisonData).length > 0 ? (
-        <section className={styles.chartSection}>
-          <h2 className={styles.sectionTitle}>Performance Over Time</h2>
-          <div className={styles.chartContainer}>
-            <ComparisonChart
-              comparisonData={comparisonData}
-              metric={selectedMetric}
-              metricLabel={metricLabel}
-            />
-          </div>
-        </section>
-      ) : selectedSchools.length > 0 ? (
-        <section className={styles.chartSection}>
-          <LoadingSkeleton type="list" />
-        </section>
-      ) : null}
+          {/* Comparison Chart */}
+          {Object.keys(activeComparisonData).length > 0 ? (
+            <section className={styles.chartSection}>
+              <h2 className={styles.sectionTitle}>Performance Over Time</h2>
+              <div className={styles.chartContainer}>
+                <ComparisonChart
+                  comparisonData={activeComparisonData}
+                  metric={selectedMetric}
+                  metricLabel={metricLabel}
+                />
+              </div>
+            </section>
+          ) : activeSchools.length > 0 ? (
+            <section className={styles.chartSection}>
+              <LoadingSkeleton type="list" />
+            </section>
+          ) : null}
 
-      {/* Comparison Table */}
-      {comparisonData && Object.keys(comparisonData).length > 0 && years.length > 0 && (
-        <section className={styles.tableSection}>
-          <h2 className={styles.sectionTitle}>Detailed Comparison</h2>
-          <div className={styles.tableWrapper}>
-            <table className={styles.comparisonTable}>
-              <thead>
-                <tr>
-                  <th>Year</th>
-                  {selectedSchools.map((school) => (
-                    <th key={school.urn}>{school.school_name}</th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {years.map((year) => (
-                  <tr key={year}>
-                    <td className={styles.yearCell}>{year}</td>
-                    {selectedSchools.map((school) => {
-                      const schoolData = comparisonData[school.urn];
-                      if (!schoolData) return <td key={school.urn}>-</td>;
+          {/* Comparison Table */}
+          {Object.keys(activeComparisonData).length > 0 && years.length > 0 && (
+            <section className={styles.tableSection}>
+              <h2 className={styles.sectionTitle}>Detailed Comparison</h2>
+              <div className={styles.tableWrapper}>
+                <table className={styles.comparisonTable}>
+                  <thead>
+                    <tr>
+                      <th>Year</th>
+                      {activeSchools.map((school) => (
+                        <th key={school.urn}>{school.school_name}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {years.map((year) => (
+                      <tr key={year}>
+                        <td className={styles.yearCell}>{year}</td>
+                        {activeSchools.map((school) => {
+                          const schoolData = activeComparisonData[school.urn];
+                          if (!schoolData) return <td key={school.urn}>-</td>;
 
-                      const yearData = schoolData.yearly_data.find((d) => d.year === year);
-                      if (!yearData) return <td key={school.urn}>-</td>;
+                          const yearData = schoolData.yearly_data.find((d) => d.year === year);
+                          if (!yearData) return <td key={school.urn}>-</td>;
 
-                      const value = yearData[selectedMetric as keyof typeof yearData];
+                          const value = yearData[selectedMetric as keyof typeof yearData];
 
-                      if (value === null || value === undefined) {
-                        return <td key={school.urn}>-</td>;
-                      }
+                          if (value === null || value === undefined) {
+                            return <td key={school.urn}>-</td>;
+                          }
 
-                      // Format based on metric type
-                      let displayValue: string;
-                      if (selectedMetric.includes('progress')) {
-                        displayValue = formatProgress(value as number);
-                      } else if (selectedMetric.includes('pct') || selectedMetric.includes('rate')) {
-                        displayValue = formatPercentage(value as number);
-                      } else {
-                        displayValue = typeof value === 'number' ? value.toFixed(1) : String(value);
-                      }
+                          let displayValue: string;
+                          if (selectedMetric.includes('progress')) {
+                            displayValue = formatProgress(value as number);
+                          } else if (selectedMetric.includes('pct') || selectedMetric.includes('rate')) {
+                            displayValue = formatPercentage(value as number);
+                          } else {
+                            displayValue = typeof value === 'number' ? value.toFixed(1) : String(value);
+                          }
 
-                      return <td key={school.urn}>{displayValue}</td>;
-                    })}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
+                          return <td key={school.urn}>{displayValue}</td>;
+                        })}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </section>
+          )}
+        </>
       )}
 
       {/* School Search Modal */}