cleaning

README.md

@@ -7,9 +7,6 @@ run the app ;
 `npm dev`
 
 TODO: 
-- clean unused modules and components
-- loading
 - DB indexing
-- click on waterfall
-- move all interfaces and types to types.ts
-- test on new device
+- test on new device
+- write README

package.json

@@ -11,24 +11,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.2.0",
-    "@mui/material": "^7.2.0",
     "duckdb": "^1.3.1",
-    "plotly.js": "^3.0.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-markdown": "8.0.6",
-    "react-plotly.js": "^2.6.0"
+    "react-markdown": "8.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",
     "@types/node": "^24.0.7",
-    "@types/plotly.js": "^3.0.2",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@types/react-plotly.js": "^2.6.3",
     "@vitejs/plugin-react": "^4.5.2",
     "eslint": "^9.29.0",
     "eslint-plugin-react-hooks": "^5.2.0",

src/App.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-// import { Container, Typography, Box } from '@mui/material';
 import Waterfall from './components/Waterfall.js';
 import Heatmap from './components/Heatmap.js';
 import AssessmentItems from './components/itemList.js';
@@ -14,14 +13,14 @@ function App() {
   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 [selectedJudge1, setSelectedJudge1] = useState<string>('');
   const [selectedJudge2, setSelectedJudge2] = useState<string>('');
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<string[] | null>(null);
   const [selectedItems, setSelectedItems] = useState<AssessmentItem[]>([]);
 
-
   // Fetch initial data when the component mounts
   useEffect(() => {
     const loadFilters = async () => {
@@ -73,13 +72,17 @@ function App() {
   // Handle cell click to fetch assessment items
   const handleCellClick = (fromCategory: string, toCategory: string) => {
     if (selectedJudge1 && selectedJudge2 && fromCategory && toCategory) {
+      setLoadingItems(true);
       getAssessmentItems(selectedJudge1, selectedJudge2, fromCategory, toCategory, selectedTheme)
         .then(setSelectedItems)
         .catch(err => {
           setError(err instanceof Error ? err.message : 'An unknown error occurred.');
+        })
+        .finally(() => {
+          setLoadingItems(false);
         });
 
-      setSelectedCategory(`${fromCategory} → ${toCategory}`);
+      setSelectedCategory([fromCategory, toCategory]);
     }
 
     return;
@@ -113,21 +116,18 @@ function App() {
 
           {isLoading && (
             <div className="loading-indicator">
-              <svg className="loading-spinner" viewBox="0 0 50 50">
-                <circle cx="25" cy="25" r="20" fill="none" stroke="#10b981" strokeWidth="5" />
-              </svg>
+              <div className="loading-spinner"></div>
               <p>Loading data...</p>
             </div>
           )}
 
          {!isLoading && matrix && (
-
           <div className="charts-container">
             <Waterfall
               matrix={matrix}
               judge1={selectedJudge1}
               judge2={selectedJudge2}
-              // onCellClick={handleCellClick}
+              onCellClick={handleCellClick}
             />
             
             <Heatmap
@@ -137,16 +137,21 @@ function App() {
               onCellClick={handleCellClick}
             />
           </div>
-
-        //  </div>
         )}
-        {selectedItems.length > 0 && (
+
+        {!loadingItems && selectedItems.length > 0 && (
           <AssessmentItems
             judge1={selectedJudge1}
             judge2={selectedJudge2}
             items={selectedItems}
             selectedCategory={selectedCategory}
           />
+        )}
+        {loadingItems && (
+            <div className="loading-indicator">
+              <div className="loading-spinner"></div>
+              <p>Loading data...</p>
+            </div>
           )}
       </main>
     </div>

src/components/Filterbar.tsx

@@ -1,15 +1,4 @@
-import type { Theme } from '../types.js';
-
-interface FilterBarProps {
-  themes: Theme[];
-  judges: string[];
-  selectedTheme: string;
-  onThemeChange: (value: string) => void;
-  selectedJudge1: string;
-  onJudge1Change: (value: string) => void;
-  selectedJudge2: string;
-  onJudge2Change: (value: string) => void;
-}
+import type { FilterBarProps } from '../types.js';
 
 const FilterBar: React.FC<FilterBarProps> = ({
   themes,

src/components/Heatmap.tsx

@@ -1,12 +1,7 @@
 import { CATEGORIES, COLOR_MAP } from '../utils/chartUtils.js';
-import type { TransitionMatrix } from '../types';
+import type { HeatmapProps } from '../types';
+
 
-interface HeatmapProps {
-  matrix: TransitionMatrix;
-  judge1: string;
-  judge2: string;
-  onCellClick: (fromCategory: string, toCategory: string) => void;
-}
 
 const Heatmap: React.FC<HeatmapProps> = ({ matrix, judge1, judge2, onCellClick }) => {
   const maxValue = Math.max(

src/components/Waterfall.tsx

@@ -1,16 +1,10 @@
 import { COLOR_MAP, generateWaterfallData } from '../utils/chartUtils.js';
-import type { TransitionMatrix } from '../types';
-
-interface WaterfallProps {
-  matrix: TransitionMatrix;
-  judge1: string;
-  judge2: string;
-}
+import type { WaterfallProps } from '../types';
 
 // Shorten judge names for display if they are long
 const shortenName = (name: string) => name.split('/')[1] || name;
 
-const Waterfall: React.FC<WaterfallProps> = ({ matrix, judge1, judge2 }) => {
+const Waterfall: React.FC<WaterfallProps> = ({ matrix, judge1, judge2, onCellClick }) => {
     const totalCount = Object.values(matrix).reduce((sum, fromCat) => {
         return sum + Object.values(fromCat).reduce((innerSum, count) => innerSum + count, 0);
     }, 0);
@@ -30,7 +24,7 @@ const Waterfall: React.FC<WaterfallProps> = ({ matrix, judge1, judge2 }) => {
                     return (
                     <div key={stage_name} className="waterfall-bar-container">
                         {stage.segments.map(segment => {
-                            const { category_label, value } = segment;
+                            const { category_label, value, fromCategory } = segment;
                             const count = value || 0;
                             const height = (count / totalCount) * 100;
                             const color = COLOR_MAP[category_label] || 'rgba(0,0,0,0)'; // Default to transparent if not found
@@ -41,8 +35,10 @@ const Waterfall: React.FC<WaterfallProps> = ({ matrix, judge1, judge2 }) => {
                                     style={{
                                         height: `${height}%`,
                                         backgroundColor: color,
+                                        cursor: fromCategory ? 'pointer' : 'default',
                                     }}
-                                    title={`${category_label} (${count})`} 
+                                    title={`${category_label} (${count})`}
+                                    onClick={() => fromCategory && onCellClick(fromCategory, category_label)}
                                 >
                                 {(count > 0 && category_label != 'BASE' && stage_name.includes('→')) && <span className="bar-value">{count}</span>}
                             </div>

src/components/itemList.tsx

@@ -1,12 +1,5 @@
 import ReactMarkdown from 'react-markdown';
-import type { AssessmentItem } from '../types';
-
-interface AssessmentItemsProps {
-  judge1: string;
-  judge2: string;
-  items: AssessmentItem[];
-  selectedCategory: string | null;
-}
+import type { AssessmentItemsProps } from '../types';
 
 const AssessmentItems: React.FC<AssessmentItemsProps> = ({ judge1, judge2, items, selectedCategory }) => {
   if (!selectedCategory || items.length === 0) {
@@ -20,7 +13,7 @@ const AssessmentItems: React.FC<AssessmentItemsProps> = ({ judge1, judge2, items
 
   return (
     <div className="assessment-items">
-      <h3>Assessment Details - {selectedCategory}</h3>
+      <h3>Assessment Details - {`${selectedCategory[0]} → ${selectedCategory[1]}`}</h3>
       <div className="items-list">
         {items.map((item, index) => (
           <div key={index} className="assessment-item">

src/index.css

@@ -603,6 +603,27 @@ body {
   margin : 1rem 0;
 }
 
+/* Loading Indicator */
+.loading-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #6b7280;
+  gap: 1rem;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #e5e7eb;
+  border-top: 4px solid #10b981;
+  background: transparent;
+  border-radius: 50%;
+  animation: spin-and-pulse 2s linear infinite;
+}
+
 /* Responsive Design */
 @media (max-width: 1200px) {
   .charts-container {
@@ -654,8 +675,19 @@ body {
   }
 }
 
-.loading {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+@keyframes spin-and-pulse {
+  0%{
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+  50% {
+    opacity: 0.5;
+    transform: rotate(180deg);
+  }
+   100% {
+    opacity: 1;
+    transform: rotate(360deg);
+  }
 }
 
 /* Smooth transitions */

src/types.ts

@@ -51,3 +51,50 @@ export interface AssessmentItem {
   model: string;
   assessments: Record<string,JudgeAssessment>;
 }
+
+export interface FilterBarProps {
+  themes: Theme[];
+  judges: string[];
+  selectedTheme: string;
+  onThemeChange: (value: string) => void;
+  selectedJudge1: string;
+  onJudge1Change: (value: string) => void;
+  selectedJudge2: string;
+  onJudge2Change: (value: string) => void;
+}
+
+export interface AssessmentItemsProps {
+  judge1: string;
+  judge2: string;
+  items: AssessmentItem[];
+  selectedCategory: string[] | null;
+}
+
+export interface Segment {
+  category_label: string;
+  value: number;
+  fromCategory?: string; // Optional for flow bars
+}
+
+export interface PlotStage {
+  stage_name: string;
+  segments: Segment[];
+}
+
+export interface HeatmapProps {
+  matrix: TransitionMatrix;
+  judge1: string;
+  judge2: string;
+  onCellClick: (fromCategory: string, toCategory: string) => void;
+}
+
+export interface WaterfallProps {
+  matrix: TransitionMatrix;
+  judge1: string;
+  judge2: string;
+  onCellClick: (fromCategory: string, toCategory: string) => void;
+}
+
+export interface ApiError {
+  error: string;
+}

src/utils/apiUtils.ts

@@ -1,8 +1,6 @@
-import type { Theme, TransitionMatrix, AssessmentItem } from '../types.js';
+import type { Theme, TransitionMatrix, AssessmentItem, ApiError } from '../types.js';
+
 
-interface ApiError {
-  error: string;
-}
 
 // This helper centralizes our fetch logic and error handling.
 async function fetchAPI<T>(url: string, options?: RequestInit): Promise<T> {

src/utils/chartUtils.ts

@@ -1,5 +1,4 @@
-import type { TransitionMatrix } from '../types.js';
-
+import type { TransitionMatrix, PlotStage, Segment } from '../types.js';
 
 export const CATEGORIES = ["COMPLETE", "EVASIVE", "DENIAL", "ERROR" /*, "UNKNOWN"*/];
 export const COLOR_MAP: Record<string, string> = {
@@ -11,17 +10,6 @@ export const COLOR_MAP: Record<string, string> = {
     /*"UNKNOWN": "#6b7280"*/
 };
 
-
-interface Segment {
-  category_label: string;
-  value: number;
-}
-
-interface PlotStage {
-  stage_name: string;
-  segments: Segment[];
-}
-
 export function generateWaterfallData(
   matrix: TransitionMatrix,
   judge1Name: string,
@@ -74,7 +62,7 @@ export function generateWaterfallData(
           stage_name: `${j1Cat} → ${j2Cat}`,
           segments: [
             { category_label: 'BASE', value: baseValue },
-            { category_label: j2Cat, value: flowCount },
+            { category_label: j2Cat, value: flowCount, fromCategory: j1Cat },
           ],
         });
       }