From effdf8ae02e772469ed04f5db30f8084ec8e660b Mon Sep 17 00:00:00 2001
From: vkuchenik <vkuchenik@contractor.usgs.gov>
Date: Wed, 7 Oct 2026 12:03:32 -0700
Subject: [PATCH] update: display new data from llm quad plot view

---
 .../Widgets/LlmAlChangesQuadPlot.jsx          | 36 +++++++++----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Widgets/LlmAlChangesQuadPlot.jsx b/client/src/components/Widgets/LlmAlChangesQuadPlot.jsx
index 330436f..007c985 100644
--- a/client/src/components/Widgets/LlmAlChangesQuadPlot.jsx
+++ b/client/src/components/Widgets/LlmAlChangesQuadPlot.jsx
@@ -8,7 +8,7 @@ export default function LlmAlChangesQuadPlot(props) {
     let tn_percent = 0;
     let fp_percent = 0;
     let fn_percent = 0;
-    let just_false_count = 0;
+    let jf_percent = 0;
     let error_count = 0;
     let no_dvar_data_count = 0;
 
@@ -40,16 +40,15 @@ export default function LlmAlChangesQuadPlot(props) {
         tn_percent = ((apiData[0]['tn_count']/apiData[0]['vr_count'])*100).toFixed(2);
         fp_percent = ((apiData[0]['fp_count']/apiData[0]['vr_count'])*100).toFixed(2);
         fn_percent = ((apiData[0]['fn_count']/apiData[0]['vr_count'])*100).toFixed(2);
-        just_false_count = apiData[0]['jf_count'];
+        jf_percent = ((apiData[0]['jf_count']/apiData[0]['vr_count'])*100).toFixed(2);
         error_count = apiData[0]['e_count'];
         no_dvar_data_count = apiData[0]['ndd_count'];
     }
 
     return (
-        <Flex direction="column" w="100%" h="100%" bg="gray.800" borderRadius="lg" p={2}>
-            <Flex direction="row" w="100%" borderTopRadius="lg" justifyItems="center" alignItems="start" pb={0} pl={4} justifyContent="end">
-                {/*<Text fontWeight="bold" fontSize="lg" color="white">Alert Level Changes Quad Plot</Text>*/}
-                <Text bg="cyan.200/5" borderRadius="sm" padding="1" fontWeight="normal" fontSize="sm" color="white">All time</Text>
+        <Flex direction="column" w="100%" h="100%" bg="gray.800" borderRadius="lg" gap={1} p={1}>
+            <Flex direction="column" align="end" justify="center" color="white" gap={1}>
+                <Text w="fit" bg="cyan.200/5" borderRadius="sm" p={1}>All Time</Text>
             </Flex>
             <Flex direction="column" w="100%" h="100%" gap="2" borderBottomRadius="lg">
                 <Flex direction="row" w="100%" h="100%" gap="2">
@@ -84,20 +83,19 @@ export default function LlmAlChangesQuadPlot(props) {
                         </Flex>
                     </Center>
                 </Flex>
+                <Flex direction="row" w="100%" h="100%" gap="2">
+                    <Center bg={`blue.200/${jf_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
+                        <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
+                            <Text>Just False</Text>
+                            <Text fontSize="lg"> {jf_percent}% </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['jf_count']}/{apiData[0]['vr_count']} </Text>
+                        </Flex>
+                    </Center>
+                </Flex>
             </Flex>
-            <Flex direction="row" justify="space-between" color="white">
-                <Flex direction="row" bg="cyan.200/5" borderRadius="lg" p={1}>
-                    <Text fontWeight="semibold">Just False: </Text>
-                    <Text>{just_false_count}</Text>
-                </Flex>
-                <Flex direction="row" bg="cyan.200/5" borderRadius="lg" p={1}>
-                    <Text fontWeight="semibold">Errors: </Text>
-                    <Text>{error_count}</Text>
-                </Flex>
-                <Flex direction="row" bg="cyan.200/5" borderRadius="lg" p={1}>
-                    <Text fontWeight="semibold"># of No DVAR Data: </Text>
-                    <Text>{no_dvar_data_count}</Text>
-                </Flex>
+            <Flex direction="row" w="100%" justify="space-between" gap={1} color="white">
+                <Text w="fit" bg="blue.200/5" borderRadius="sm" p={1}>Errors: {error_count}</Text>
+                <Text w="fit" bg="blue.200/5" borderRadius="sm" p={1}>No DVAR Data: {no_dvar_data_count}</Text>
             </Flex>
         </Flex>
     )