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

update: display new data from llm quad plot view

Browse Source
This commit is contained in:
vkuchenik
2026-10-07 12:03:32 -07:00
parent 1ef77c02ff
commit effdf8ae02
1 changed files with 17 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Widgets/LlmAlChangesQuadPlot.jsx
+17 -19
View File
@@ -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>
)