adding judge filters and responsiveness

api/mismatches.ts

@@ -11,6 +11,7 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
     const judge2Classification = url.searchParams.get('judge2Classification');
     const j2_compliance = url.searchParams.get('toCategory');
     const theme = url.searchParams.get('theme') || null;
+    const model = url.searchParams.get('model') || null;
 
     if (!judge1 || !j1_compliance || !judge2 || !j2_compliance || !judge1Classification || !judge2Classification) {
         return jsonResponse(res, 400, { error: 'judge1, j1_compliance, judge2, and j2_compliance are required.' });
@@ -95,14 +96,15 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
                 -- Filter for the second judge's specific assessment
                 AND a2.judge = ? AND a2.${judge2Classification} = ?
                 
-                -- Optional theme filter
-                AND (? IS NULL OR q.theme = ?);
+                -- Optional theme filter and model filter
+                AND (? IS NULL OR q.theme = ?) AND (? IS NULL OR r.model = ?);
         `;
 
         const params = [
             judge1, j1_compliance,
             judge2, j2_compliance,
-            theme, theme
+            theme, theme,
+            model, model
         ];
 
         const rows = await db.query<any>(sql, ...params);

api/models.ts

@@ -0,0 +1,15 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+import db from '../src/lib/db.js';
+import type { Model } from '../src/types.js';
+import { jsonResponse } from './utils.js';
+
+export default async function handler(_req: IncomingMessage, res: ServerResponse) {
+  try {
+    const sql = 'SELECT DISTINCT model FROM responses ORDER BY model ASC';
+    const models = await db.query<Model>(sql);
+    jsonResponse(res, 200, models);
+  } catch (error) {
+    console.error('Failed to fetch models:', error);
+    jsonResponse(res, 500, { error: 'Failed to fetch models' });
+  }
+}

api/reclassification.ts

@@ -9,6 +9,7 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
   const judge2 = url.searchParams.get('judge2');
   const judge2Classification = url.searchParams.get('judge2Classification');
   const theme = url.searchParams.get('theme') || null;
+  const model = url.searchParams.get('model') || null;
 
   if (!judge1 || !judge1Classification || !judge2 || !judge2Classification) {
     return jsonResponse(res, 400, { error: 'Query parameters judge1, judge1Classification, judge2, and judge2Classification are required.' });
@@ -29,13 +30,13 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
         JOIN responses r ON a1.r_uuid = r.uuid
         JOIN questions q ON r.q_uuid = q.uuid
         WHERE
-          a1.judge = ? AND a2.judge = ? AND (? IS NULL OR q.theme = ?)
+          a1.judge = ? AND a2.judge = ? AND (? IS NULL OR q.theme = ?) AND (? IS NULL OR r.model = ?)
         GROUP BY 
           judge1_compliance, -- Using the alias from SELECT is standard and clean
           judge2_compliance;
     `;
 
-    const params = [judge1, judge2, theme, theme];
+    const params = [judge1, judge2, theme, theme, model, model];
 
     const rows = await db.query<{ judge1_compliance: string, judge2_compliance: string, count: number }>(sql, ...params);
     

src/App.tsx

@@ -3,21 +3,23 @@ import { useState, useEffect} from 'react';
 import SankeyDiagram from './components/Sankey.js';
 import Heatmap from './components/Heatmap.js';
 import AssessmentItems from './components/itemList.js';
-import { getThemes, getJudges, getReclassificationData, getAssessmentItems } from './utils/apiUtils.js';
+import { getThemes, getJudges, getReclassificationData, getAssessmentItems, getModels } from './utils/apiUtils.js';
 import { modelSort } from './utils/chartUtils.js';
-import type { Theme, Judges, SelectedJudge, TransitionMatrix, AssessmentItem } from './types';
+import type { Theme, Judges, Model, SelectedJudge, TransitionMatrix, AssessmentItem } from './types';
 import FilterBar from './components/Filterbar';
 
 function App() {
 
   const [themes, setThemes] = useState<Theme[]>([]);
   const [judges, setJudges] = useState<Judges[]>([]);
+  const [models, setModels] = useState<Model[]>([]);
   const [matrix, setMatrix] = useState<TransitionMatrix | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [loadingItems, setLoadingItems] = useState(false);
 
   const [selectedTheme, setSelectedTheme] = useState<string>('');
+  const [selectedModel, setSelectedModel] = useState<string>('');
   const [selectedJudge1, setSelectedJudge1] = useState<SelectedJudge | null >(null);
   const [selectedJudge2, setSelectedJudge2] = useState<SelectedJudge | null >(null);
   const [selectedCategory, setSelectedCategory] = useState<string[] | null>(null);
@@ -31,12 +33,14 @@ function App() {
   useEffect(() => {
     const loadFilters = async () => {
       try {
-        const [themesData, judgesData] = await Promise.all([
+        const [themesData, judgesData, modelsData] = await Promise.all([
           getThemes(),
-          getJudges()
+          getJudges(),
+          getModels()
         ]);
         setThemes(themesData);
         setJudges(judgesData.sort(modelSort));
+        setModels(modelsData);
 
         // Set default selections
         if (judgesData.length >= 2) {
@@ -72,7 +76,8 @@ function App() {
           selectedJudge1.classification,
           selectedJudge2.name,
           selectedJudge2.classification,
-          selectedTheme
+          selectedTheme,
+          selectedModel
         );
         setMatrix(result);
         setSelectedItems([]); 
@@ -85,7 +90,7 @@ function App() {
     };
 
     fetchData();
-  }, [selectedTheme, selectedJudge1, selectedJudge2]);
+  }, [selectedTheme, selectedJudge1, selectedJudge2, selectedModel]);
 
   const handleJudge1NameChange = (newName: string) => {
     const newJudge = judges.find(j => j.name === newName);
@@ -132,7 +137,8 @@ function App() {
           selectedJudge2.name, 
           selectedJudge2.classification,
           toCategory, 
-          selectedTheme
+          selectedTheme,
+          selectedModel
         )
         setSelectedItems(items);
         setSelectedCategory([fromCategory, toCategory]);
@@ -164,8 +170,11 @@ function App() {
           <FilterBar
             themes={themes}
             judges={judges}
+            models={models}
             selectedTheme={selectedTheme}
             onThemeChange={setSelectedTheme}
+            selectedModel={selectedModel}
+            onModelChange={setSelectedModel}
             selectedJudge1={selectedJudge1}
             selectedJudge2={selectedJudge2}
             onJudge1NameChange={handleJudge1NameChange}

src/components/Filterbar.tsx

@@ -1,12 +1,15 @@
-import type { FilterBarProps, Judges } from '../types.js';
+import type { FilterBarProps, Judges, Model } from '../types.js';
 
 const findJudgeByName = (judges: Judges[], name: string) => judges.find(j => j.name === name);
 
 const FilterBar: React.FC<FilterBarProps> = ({
   themes,
   judges,
+  models,
   selectedTheme,
   onThemeChange,
+  selectedModel,
+  onModelChange,
   selectedJudge1,
   selectedJudge2,
   onJudge1NameChange,
@@ -36,6 +39,22 @@ const FilterBar: React.FC<FilterBarProps> = ({
             ))}
           </select>
         </div>
+        <div className="filter-block">
+          <label className="filter-label" htmlFor='model-select'>Model</label>
+          <select 
+            className="filter-select"
+            id='model-select'
+            value={selectedModel}
+            onChange={(e) => onModelChange(e.target.value)}
+          >
+            <option value="">All Models</option>
+            {models.map((model) => (
+              <option key={model.model} value={model.model}>
+                {model.model}
+              </option>
+            ))}
+          </select>
+        </div>
       </div>
       
       <div className="filter-group">

src/components/itemList.tsx

@@ -116,11 +116,11 @@ const PaginationControls: React.FC<PaginationProps> = (
   }) => {
   return (
     <div className="pagination-controls">
-      <button className="assessment-btn" onClick={() => setCurrentPage(1)} disabled={currentPage === 1}>
-        &laquo; First
+      <button className="assessment-btn pagination-btn" onClick={() => setCurrentPage(1)} disabled={currentPage === 1}>
+        &laquo; <span>First</span>
       </button>
-      <button className="assessment-btn" onClick={() => setCurrentPage(prev => prev - 1)} disabled={currentPage === 1}>
-        ‹ Prev
+      <button className="assessment-btn pagination-btn" onClick={() => setCurrentPage(prev => prev - 1)} disabled={currentPage === 1}>
+        ‹ <span>Prev</span>
       </button>
       <div className="page-jump">
         <p>Page</p>
@@ -133,11 +133,11 @@ const PaginationControls: React.FC<PaginationProps> = (
         />
         <p>of {totalPages}</p>
       </div>
-      <button className="assessment-btn" onClick={() => setCurrentPage(prev =>  prev + 1 )} disabled={currentPage === totalPages}>
-        Next ›
+      <button className="assessment-btn pagination-btn" onClick={() => setCurrentPage(prev =>  prev + 1 )} disabled={currentPage === totalPages}>
+        <span>Next</span> ›
       </button>
-      <button className="assessment-btn" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages}>
-        Last &raquo;
+      <button className="assessment-btn pagination-btn" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages}>
+        <span>Last</span> &raquo;
       </button>
     </div>
   );

src/index.css

@@ -968,6 +968,27 @@ h4 {
   }
 }
 
+@media (max-width: 480px) {
+  .item-question-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .metadata strong {
+    display: none;
+  }
+
+  .pagination-btn span {
+    display: none;
+  }
+
+  .sankey-container, .heatmap-container {
+    padding: 1rem;
+    min-width: 330px;
+  }
+}
+
 /* Animation for loading states */
 @keyframes pulse {
   0%, 100% {

src/lib/ingest.ts

@@ -11,6 +11,8 @@ export const DATA_SOURCES = {
   questions: 'https://huggingface.co/datasets/PITTI/speechmap-questions/resolve/main/consolidated_questions.parquet',
   responses: 'https://huggingface.co/datasets/PITTI/speechmap-responses-v2/resolve/main/consolidated_responses.parquet',
   assessments: 'https://huggingface.co/datasets/PITTI/speechmap-assessments-v2/resolve/main/consolidated_assessments.parquet',
+  // manual : './data/manual_assessments.parquet',// Local file for manual assessments
+  // reviewed : './data/reviewed_assessments.parquet' // Local file for reviewed assessments
 };
 
 
@@ -79,6 +81,37 @@ async function rebuildDatabase() {
         SELECT uuid, q_uuid, r_uuid, judge, judge_type, judge_analysis, compliance, pitti_compliance, origin FROM read_parquet('${DATA_SOURCES.assessments}');
     `);
 
+    // console.log('Updating manual assessments from local parquet file...');
+    // const manualDataPath = path.resolve(ROOT_DIR, DATA_SOURCES.manual);
+    // if (fs.existsSync(manualDataPath)) {
+    //   await query(db, `
+    //     INSERT INTO assessments (uuid, q_uuid, r_uuid, judge, judge_type, judge_analysis, compliance, pitti_compliance, origin)
+    //     SELECT uuid, q_uuid, r_uuid, judge, judge_type, judge_analysis, compliance, pitti_compliance, origin FROM read_parquet('${manualDataPath}')
+    //     ON CONFLICT (uuid) DO UPDATE SET
+    //         q_uuid = excluded.q_uuid,
+    //         r_uuid = excluded.r_uuid,
+    //         judge = excluded.judge,
+    //         judge_type = excluded.judge_type,
+    //         judge_analysis = excluded.judge_analysis,
+    //         compliance = excluded.compliance,
+    //         pitti_compliance = excluded.pitti_compliance,
+    //         origin = excluded.origin;
+    // `);
+    // } else {
+    //   console.warn(`Manual assessments file not found at ${manualDataPath}, skipping...`);
+    // }
+
+    // console.log('Updating reviewed assessments from local parquet file...');
+    // const reviewedDataPath = path.resolve(ROOT_DIR, DATA_SOURCES.reviewed);
+    // if (fs.existsSync(reviewedDataPath)) {
+    //   await query(db, `
+    //     INSERT INTO assessments (uuid, q_uuid, r_uuid, judge, judge_type, judge_analysis, compliance, pitti_compliance, origin)
+    //     SELECT CAST(uuid AS VARCHAR) || 'n' AS uuid, q_uuid, r_uuid, judge, judge_type, judge_analysis, compliance, pitti_compliance, origin FROM read_parquet('${reviewedDataPath}')
+    //   `);
+    // } else {
+    //   console.warn(`Reviewed assessments file not found at ${reviewedDataPath}, skipping...`);
+    // }
+
     console.log('✅ Data ingestion complete!');
   } catch (error) {
     console.error('An error occurred during the rebuild:', error);

src/types.ts

@@ -36,6 +36,10 @@ export interface Theme {
   name: string; // Human-readable name for the theme
 }
 
+export interface Model {
+  model:string;
+}
+
 export interface Judges {
   name: string;
   judge_type: string; // human or LLM
@@ -76,8 +80,11 @@ export interface AssessmentItem {
 export interface FilterBarProps {
   themes: Theme[];
   judges: Judges[];
+  models: Model[];
   selectedTheme: string;
   onThemeChange: (value: string) => void;
+  selectedModel: string;
+  onModelChange: (value: string) => void;
   selectedJudge1: SelectedJudge | null;
   selectedJudge2: SelectedJudge | null;
   onJudge1NameChange : (value: string) => void;

src/utils/apiUtils.ts

@@ -1,4 +1,4 @@
-import type { Theme, Judges, TransitionMatrix, AssessmentItem, ApiError } from '../types.js';
+import type { Theme, Judges, Model, TransitionMatrix, AssessmentItem, ApiError } from '../types.js';
 
 
 
@@ -27,13 +27,18 @@ export const getJudges = async (): Promise<Judges[]> => {
   return fetchAPI<Judges[]>('/api/judges')
 };
 
+export const getModels = async (): Promise<Model[]> => {
+  return fetchAPI<Model[]>('/api/models')
+}
+
 
 export const getReclassificationData = (
   judge1: string,
   judge1Classification: string,
   judge2: string,
   judge2Classification: string,
-  theme?: string
+  theme?: string,
+  model?: string
 ): Promise<TransitionMatrix> => {
   // Build the query string from the parameters
   const params = new URLSearchParams({
@@ -47,6 +52,9 @@ export const getReclassificationData = (
   if (theme) {
     params.append('theme', theme);
   }
+  if (model) {
+    params.append('model', model);
+  }
 
   return fetchAPI<TransitionMatrix>(`/api/reclassification?${params.toString()}`);
 };
@@ -59,7 +67,8 @@ export const getAssessmentItems = (
   judge2: string,
   judge2Classification: string,
   toCategory: string,
-  theme?: string
+  theme?: string,
+  model?: string
 ): Promise<any[]> => {
 
   const params = new URLSearchParams({
@@ -74,6 +83,9 @@ export const getAssessmentItems = (
   if (theme) {
     params.append('theme', theme);
   }
+  if (model) {
+    params.append('model', model);
+  }
 
   return fetchAPI<AssessmentItem[]>(`/api/mismatches?${params.toString()}`);
 }