feat(JAQPOT-420): improve metrics labels (#74)

* feat(JAQPOT-420): improve metrics labels * fix: expect nullable confusion matrix * fix: compilation
ntua-unit-of-control-and-informatics · Nov 11, 2024 · fef63c9 · fef63c9
1 parent 0bfe4f2
commit fef63c9
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 35 deletions.
diff --git a/src/app/api.schema.d.ts b/src/app/api.schema.d.ts
@@ -322,7 +322,7 @@ export interface components {
       jaccard?: number[];
       /** Format: float */
       matthewsCorrCoef?: number;
-      confusionMatrix?: number[][];
+      confusionMatrix?: number[][][];
     };
     MulticlassClassificationScores: {
       labels?: string[];
@@ -605,9 +605,9 @@ export interface components {
       /** Format: int64 */
       id?: number;
       userId: string;
-      username: string;
+      username?: string;
       /** Format: email */
-      email: string;
+      email?: string;
       associationType: components["schemas"]["OrganizationUserAssociationType"];
     };
     /** @enum {string} */

diff --git a/src/app/dashboard/models/[modelId]/components/scores/BinaryClassificationScoreCard.tsx b/src/app/dashboard/models/[modelId]/components/scores/BinaryClassificationScoreCard.tsx
@@ -20,32 +20,34 @@ export default function BinaryClassificationScoreCard({
       </CardHeader>
       <CardBody className="overflow-visible py-2">
         <div className="my-2 text-sm">
-          <b>accuracy</b>: {score!.accuracy}
+          <b>Accuracy</b>: {score!.accuracy}
         </div>
         <div className="my-2 text-sm">
-          <b>balancedAccuracy</b>: {score!.balancedAccuracy}
+          <b>Balanced accuracy</b>: {score!.balancedAccuracy}
         </div>
         <div className="my-2 text-sm">
-          <b>precision</b>: {JSON.stringify(score!.precision)}
+          <b>Precision</b>: {JSON.stringify(score!.precision)}
         </div>
         <div className="my-2 text-sm">
-          <b>recall</b>: {JSON.stringify(score!.recall)}
+          <b>Recall</b>: {JSON.stringify(score!.recall)}
         </div>
         <div className="my-2 text-sm">
-          <b>f1Score</b>: {JSON.stringify(score!.f1Score)}
+          <b>F1 score</b>: {JSON.stringify(score!.f1Score)}
         </div>
         <div className="my-2 text-sm">
-          <b>jaccard</b>: {JSON.stringify(score!.jaccard)}
+          <b>Jaccard</b>: {JSON.stringify(score!.jaccard)}
         </div>
         <div className="my-2 text-sm">
-          <b>matthewsCorrCoef</b>: {score!.matthewsCorrCoef}
+          <b>Matthews Correlation Coefficient</b>: {score!.matthewsCorrCoef}
         </div>
+        {score!.folds && (
+          <div className="my-2 text-sm">
+            <b>Folds</b>: {score!.folds}
+          </div>
+        )}
         <div className="my-2 text-sm">
           <ConfusionMatrix
-            matrix={[
-              score!.confusionMatrix!,
-              transposeMatrix(score!.confusionMatrix!),
-            ]}
+            matrix={score!.confusionMatrix}
             classNames={score!.labels}
           />
         </div>

diff --git a/src/app/dashboard/models/[modelId]/components/scores/ConfusionMatrix.tsx b/src/app/dashboard/models/[modelId]/components/scores/ConfusionMatrix.tsx
@@ -62,15 +62,19 @@ export default function ConfusionMatrix({
       </p>
       {classNames?.map((className, index) => {
         return (
-          <div key={index} className="max-w-[360px]">
-            <Heatmap
-              legend={className}
-              data={matrix[index]}
-              xLabels={xLabels}
-              yLabels={yLabels}
-              getColor={getCellColor}
-            />
-          </div>
+          <>
+            {matrix && matrix[index] && (
+              <div key={index} className="max-w-[360px]">
+                <Heatmap
+                  legend={`Label: ${className}`}
+                  data={matrix[index]}
+                  xLabels={xLabels}
+                  yLabels={yLabels}
+                  getColor={getCellColor}
+                />
+              </div>
+            )}
+          </>
         );
       })}
     </>

diff --git a/src/app/dashboard/models/[modelId]/components/scores/MulticlassClassificationScoreCard.tsx b/src/app/dashboard/models/[modelId]/components/scores/MulticlassClassificationScoreCard.tsx
@@ -17,26 +17,31 @@ export default function MulticlassClassificationScoreCard({
         </CardHeader>
         <CardBody className="overflow-visible py-2">
           <div className="my-2 text-sm">
-            <b>accuracy</b>: {score!.accuracy}
+            <b>Accuracy</b>: {score!.accuracy}
           </div>
           <div className="my-2 text-sm">
-            <b>balancedAccuracy</b>: {JSON.stringify(score!.balancedAccuracy)}
+            <b>Balanced accuracy</b>: {JSON.stringify(score!.balancedAccuracy)}
           </div>
           <div className="my-2 text-sm">
-            <b>precision</b>: {JSON.stringify(score!.precision)}
+            <b>Precision</b>: {JSON.stringify(score!.precision)}
           </div>
           <div className="my-2 text-sm">
-            <b>recall</b>: {JSON.stringify(score!.recall)}
+            <b>Recall</b>: {JSON.stringify(score!.recall)}
           </div>
           <div className="my-2 text-sm">
-            <b>f1Score</b>: {JSON.stringify(score!.f1Score)}
+            <b>F1 score</b>: {JSON.stringify(score!.f1Score)}
           </div>
           <div className="my-2 text-sm">
-            <b>jaccard</b>: {JSON.stringify(score!.jaccard)}
+            <b>Jaccard</b>: {JSON.stringify(score!.jaccard)}
           </div>
           <div className="my-2 text-sm">
-            <b>matthewsCorrCoef</b>: {score!.matthewsCorrCoef}
+            <b>Matthews correlation coefficient</b>: {score!.matthewsCorrCoef}
           </div>
+          {score!.folds && (
+            <div className="my-2 text-sm">
+              <b>Folds</b>: {score!.folds}
+            </div>
+          )}
           <div className="my-2 text-sm">
             <ConfusionMatrix
               matrix={score!.confusionMatrix}

diff --git a/src/app/dashboard/models/[modelId]/components/scores/RegressionScoreCard.tsx b/src/app/dashboard/models/[modelId]/components/scores/RegressionScoreCard.tsx
@@ -14,11 +14,44 @@ export default function RegressionScoreCard({
         <p className="text-tiny font-bold uppercase">{score!.yName}</p>
       </CardHeader>
       <CardBody className="overflow-visible py-2">
-        {Object.entries(score!).map(([key, value]) => (
-          <div key={key} className="my-2 text-sm">
-            <b>{key}</b>: {value}
+        <div className="my-2 text-sm">
+          <b>
+            R<sup>2</sup>
+          </b>
+          : {score!.r2}
+        </div>
+        <div className="my-2 text-sm">
+          <b>MAE</b>: {score!.mae}
+        </div>
+        <div className="my-2 text-sm">
+          <b>RMSE</b>: {score!.rmse}
+        </div>
+        <div className="my-2 text-sm">
+          <b>
+            R<sup>2</sup> diff R=0
+          </b>
+          : {score!.rSquaredDiffRZero}
+        </div>
+        <div className="my-2 text-sm">
+          <b>
+            R<sup>2</sup> diff R=0 Hat
+          </b>
+          : {score!.rSquaredDiffRZeroHat}
+        </div>
+        <div className="my-2 text-sm">
+          <b>Abs diff R=0 Hat</b>: {score!.absDiffRZeroHat}
+        </div>
+        <div className="my-2 text-sm">
+          <b>K</b>: {score!.k}
+        </div>
+        <div className="my-2 text-sm">
+          <b>K Hat</b>: {score!.kHat}
+        </div>
+        {score!.folds && (
+          <div className="my-2 text-sm">
+            <b>Folds</b>: {score!.folds}
           </div>
-        ))}
+        )}
       </CardBody>
     </Card>
   );

diff --git a/src/app/dashboard/organizations/[orgName]/components/OrganizationMembers.tsx b/src/app/dashboard/organizations/[orgName]/components/OrganizationMembers.tsx
@@ -83,7 +83,7 @@ export default function OrganizationMembers({
                     <TableCell>
                       <div className="flex items-center gap-2">
                         <Image
-                          src={`https://api.dicebear.com/9.x/bottts/svg?seed=${item.email.replace(
+                          src={`https://api.dicebear.com/9.x/bottts/svg?seed=${item.email?.replace(
                             ' ',
                             '',
                           )}`}