feat: ✨ add review score to bottom panel

klarna-incubator · Nov 20, 2024 · a910d42 · a910d42
1 parent 793f423
commit a910d42
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/app/src/components/model/panels/bottom/BottomPanel.js b/app/src/components/model/panels/bottom/BottomPanel.js
@@ -6,7 +6,6 @@ import { useState, useEffect } from "react";
 import { useModelID } from "../../hooks/useModelID";
 import { useSelectedComponent } from "../../hooks/useSelectedComponent";
 import { useValidateQuery } from "../../../../api/gram/validation";
-import { COMPONENT_TYPE } from "../../board/constants";
 
 export function BottomPanel() {
   const modelId = useModelID();
@@ -40,6 +39,12 @@ export function BottomPanel() {
       : [];
   }
 
+  const passedResults = validationResults.filter((result) => result.testResult);
+  const successRatio =
+    validationResults.length === 0
+      ? 0
+      : Number((passedResults.length / validationResults.length).toFixed(2));
+
   if (tab === 0) {
     // TAB.ALL
     filteredResults = allNegativeResults;
@@ -78,6 +83,7 @@ export function BottomPanel() {
             modelLength={modelResults.length}
             selectedLength={selectedResults.length}
             selectedComponent={selectedComponent}
+            successRatio={successRatio}
           />
           <ValidationTab
             tab={tab}

diff --git a/app/src/components/model/panels/bottom/BottomTabsHeader.js b/app/src/components/model/panels/bottom/BottomTabsHeader.js
@@ -25,27 +25,44 @@ function getBadgeColor(length) {
   return "error";
 }
 
+function getSuccessRatioColor(ratio) {
+  if (ratio >= 0.75) {
+    return "success";
+  } else if (ratio >= 0.5) {
+    return "warning";
+  }
+  return "error";
+}
+
 export function BottomTabsHeader({
   tab,
   setTab,
   allLength,
   modelLength,
   selectedLength,
   selectedComponent,
+  successRatio,
 }) {
   return (
     <Paper elevation={3} sx={{ display: "flex" }}>
       <Box
         sx={{
           mx: 3,
           display: "flex",
+          gap: 1,
           justifyContent: "center",
           alignItems: "center",
         }}
       >
         <Typography variant="h6" sx={{ fontSize: "0.8rem" }}>
           QUALITY CHECK
         </Typography>
+        <Badge
+          showZero
+          badgeContent={`${successRatio * 100}%`}
+          color={getSuccessRatioColor(successRatio)}
+          sx={tabBadgeStyle}
+        ></Badge>
       </Box>
       <Box sx={{ flexGrow: 1 }}>
         <Grow in={true}>