Minor improvements in evaluation management

- Fixed import
- Aligned color of add metric button with other green buttons
- Aligned start evaluation button to be on same line as other buttons

playground/src/components/view_mode/evaluation_mode/expert_evaluation/evaluation_management.tsx

@@ -94,9 +94,11 @@ export default function EvaluationManagement() {
       alert("Invalid config type");
       return;
     }
-    const newConfig = createNewEvaluationConfig(importedConfig.name);
-    setSelectedConfig({ ...newConfig, ...importedConfig });
-    setHasUnsavedChanges(true);
+    importedConfig.id = "new";
+    importedConfig.creationDate = new Date();
+    importedConfig.started = false;
+    importedConfig.expertIds = [];
+    setSelectedConfig(importedConfig);
   };
 
   const { mutate: downloadEvaluationData, isLoading: isExporting } = useDownloadExpertEvaluationData({
@@ -248,16 +250,16 @@ export default function EvaluationManagement() {
             {isExporting ? "Downloading..." : "Download Results"}
           </button>
         )}
-      </div>
 
-      {selectedConfig.id !== "new" && !selectedConfig.started && (
-        <button
-          className="bg-green-500 text-white rounded-md p-2 mt-2 hover:bg-green-600"
-          onClick={startEvaluation}
-        >
-          Start Evaluation
-        </button>
-      )}
+        {selectedConfig.id !== "new" && !selectedConfig.started && (
+          <button
+            className="bg-green-500 text-white rounded-md p-2 hover:bg-green-600"
+            onClick={startEvaluation}
+          >
+            Start Evaluation
+          </button>
+        )}
+      </div>
     </div>
   );
 }

playground/src/components/view_mode/evaluation_mode/expert_evaluation/expert_links.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck, faCopy, faPlus, faSyncAlt, faTrash } from '@fortawesome/free-solid-svg-icons';
 import baseUrl from '@/helpers/base_url';
 import { fetchExpertEvaluationProgressStats } from '@/hooks/playground/expert_evaluation_progress_stats';
+import { ExpertEvaluationProgressStats } from "@/model/expert_evaluation_progress_stats";
 
 type ExpertLinksProps = {
   expertIds: string[];
@@ -15,7 +16,7 @@ type ExpertLinksProps = {
 export default function ExpertLinks(props: ExpertLinksProps) {
   const { expertIds, setExpertIds, started, configId } = props;
   const [copiedLink, setCopiedLink] = useState<string | null>(null);
-  const [progressStats, setProgressStats] = useState<Record<string, number> | null>(null);
+  const [progressStats, setProgressStats] = useState<ExpertEvaluationProgressStats>();
   const [loading, setLoading] = useState(false);
 
   // Fetch progress stats with a minimum delay for feedback
@@ -117,7 +118,7 @@ export default function ExpertLinks(props: ExpertLinksProps) {
                       <div className="bg-blue-500 h-2 rounded" style={{ width: `${progressPercentage}%` }} />
                     </div>
                     <span className="text-sm text-gray-700">
-                      {completed} / {total} completed
+                      {completed === 0 ? 'Not started' : `${completed} / ${total} completed`}
                     </span>
                   </>
                 )}

playground/src/components/view_mode/evaluation_mode/expert_evaluation/metrics_form.tsx

@@ -229,7 +229,7 @@ export default function MetricsForm({ metrics, setMetrics, disabled }: MetricsFo
             <div className="flex gap-2">
               <button
                 onClick={addMetric}
-                className={`bg-green-600 text-white rounded-md p-2 hover:bg-green-700 flex items-center gap-2 ${buttonDisabledStyle}`}
+                className={`bg-green-500 text-white rounded-md p-2 hover:bg-green-600 flex items-center gap-2 ${buttonDisabledStyle}`}
               >
                 <FontAwesomeIcon icon={faPlus} />
                 Add Metric