chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: quad plot api has new data, ui was updated to display it correctly

Browse Source
This commit is contained in:
vkuchenik
2026-10-05 16:10:46 -07:00
parent b8aa67f64c
commit 1ef77c02ff
1 changed files with 32 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Widgets/LlmAlChangesQuadPlot.jsx
+32 -11
View File
@@ -8,6 +8,10 @@ export default function LlmAlChangesQuadPlot(props) {
let tn_percent = 0; let tn_percent = 0;
let fp_percent = 0; let fp_percent = 0;
let fn_percent = 0; let fn_percent = 0;
let just_false_count = 0;
let error_count = 0;
let no_dvar_data_count = 0;
// Clean, single-line data fetching // Clean, single-line data fetching
const { data: apiData, isLoading, error } = VdapApi('/api/v2/llm_quadrant_plot'); const { data: apiData, isLoading, error } = VdapApi('/api/v2/llm_quadrant_plot');
@@ -32,32 +36,35 @@ export default function LlmAlChangesQuadPlot(props) {
if (apiData) { if (apiData) {
console.log(apiData); console.log(apiData);
tp_percent = ((apiData[0]['tp_count']/apiData[0]['tot_count'])*100).toFixed(2); tp_percent = ((apiData[0]['tp_count']/apiData[0]['vr_count'])*100).toFixed(2);
tn_percent = ((apiData[0]['tn_count']/apiData[0]['tot_count'])*100).toFixed(2); tn_percent = ((apiData[0]['tn_count']/apiData[0]['vr_count'])*100).toFixed(2);
fp_percent = ((apiData[0]['fp_count']/apiData[0]['tot_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]['tot_count'])*100).toFixed(2); fn_percent = ((apiData[0]['fn_count']/apiData[0]['vr_count'])*100).toFixed(2);
just_false_count = apiData[0]['jf_count'];
error_count = apiData[0]['e_count'];
no_dvar_data_count = apiData[0]['ndd_count'];
} }
return ( return (
<Flex direction="column" w="100%" h="100%" borderRadius="lg"> <Flex direction="column" w="100%" h="100%" bg="gray.800" borderRadius="lg" p={2}>
<Flex direction="row" w="100%" bg="gray.800" borderTopRadius="lg" justifyItems="center" alignItems="start" p={2} pb={0} pl={4} justifyContent="end"> <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 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> <Text bg="cyan.200/5" borderRadius="sm" padding="1" fontWeight="normal" fontSize="sm" color="white">All time</Text>
</Flex> </Flex>
<Flex direction="column" w="100%" h="100%" bg="gray.800" gap="2" padding="2" borderBottomRadius="lg"> <Flex direction="column" w="100%" h="100%" gap="2" borderBottomRadius="lg">
<Flex direction="row" w="100%" h="100%" gap="2"> <Flex direction="row" w="100%" h="100%" gap="2">
<Center bg={`blue.200/${tp_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold"> <Center bg={`blue.200/${tp_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"> <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
<Text>True Positive</Text> <Text>True Positive</Text>
<Text fontSize="lg"> {tp_percent}% </Text> <Text fontSize="lg"> {tp_percent}% </Text>
<Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tp_count']}/{apiData[0]['tot_count']} </Text> <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tp_count']}/{apiData[0]['vr_count']} </Text>
</Flex> </Flex>
</Center> </Center>
<Center bg={`blue.200/${tn_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold"> <Center bg={`blue.200/${tn_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"> <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
<Text>True Negative</Text> <Text>True Negative</Text>
<Text fontSize="lg"> {tn_percent}% </Text> <Text fontSize="lg"> {tn_percent}% </Text>
<Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tn_count']}/{apiData[0]['tot_count']} </Text> <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tn_count']}/{apiData[0]['vr_count']} </Text>
</Flex> </Flex>
</Center> </Center>
</Flex> </Flex>
@@ -66,18 +73,32 @@ export default function LlmAlChangesQuadPlot(props) {
<Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center"> <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
<Text>False Positive</Text> <Text>False Positive</Text>
<Text fontSize="lg"> {fp_percent}% </Text> <Text fontSize="lg"> {fp_percent}% </Text>
<Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fp_count']}/{apiData[0]['tot_count']} </Text> <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fp_count']}/{apiData[0]['vr_count']} </Text>
</Flex> </Flex>
</Center> </Center>
<Center bg={`blue.200/${fn_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold"> <Center bg={`blue.200/${fn_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"> <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
<Text>False Negative</Text> <Text>False Negative</Text>
<Text fontSize="lg"> {fn_percent}% </Text> <Text fontSize="lg"> {fn_percent}% </Text>
<Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fn_count']}/{apiData[0]['tot_count']} </Text> <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fn_count']}/{apiData[0]['vr_count']} </Text>
</Flex> </Flex>
</Center> </Center>
</Flex> </Flex>
</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>
</Flex> </Flex>
) )