Merge remote-tracking branch 'origin/20260605_1123_Hight_updates' into 20260605_1123_Hight_updates

20261005 1531 updatequadplotwidget

See merge request vkuchenik/website-framework!113

client/Dockerfile

@@ -0,0 +1,23 @@
+# Stage 1: The Node Builder
+FROM node:20-alpine AS builder
+WORKDIR /app
+
+# Install dependencies
+COPY package*.json ./
+RUN npm ci
+
+# Copy React source code and build it
+COPY . .
+RUN npm run build 
+
+# Stage 2: The Nginx Server
+FROM nginx:alpine
+
+# Copy the compiled files from Stage 1 (Change /dist to /build if using Create-React-App instead of Vite)
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy your custom Nginx routing file
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

client/nginx.conf

@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        # SPA routing: if a file isn't found, serve index.html
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Optional: Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        root /usr/share/nginx/html;
+        expires 1y;
+        add_header Cache-Control "public, no-transform";
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}

client/src/components/Widgets/LlmAlChangesQuadPlot.jsx

@@ -8,6 +8,10 @@ export default function LlmAlChangesQuadPlot(props) {
     let tn_percent = 0;
     let fp_percent = 0;
     let fn_percent = 0;
+    let jf_percent = 0;
+    let error_count = 0;
+    let no_dvar_data_count = 0;
+
 
     // Clean, single-line data fetching
     const { data: apiData, isLoading, error } = VdapApi('/api/v2/llm_quadrant_plot');
@@ -32,32 +36,34 @@ export default function LlmAlChangesQuadPlot(props) {
 
     if (apiData) {
         console.log(apiData);
-        tp_percent = ((apiData[0]['tp_count']/apiData[0]['tot_count'])*100).toFixed(2);
-        tn_percent = ((apiData[0]['tn_count']/apiData[0]['tot_count'])*100).toFixed(2);
-        fp_percent = ((apiData[0]['fp_count']/apiData[0]['tot_count'])*100).toFixed(2);
-        fn_percent = ((apiData[0]['fn_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]['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);
+        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%" borderRadius="lg">
-            <Flex direction="row" w="100%" bg="gray.800" borderTopRadius="lg" justifyItems="center" alignItems="start" p={2} 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%" 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">
                     <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">
                             <Text>True Positive</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>
                     </Center>
                     <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">
                             <Text>True Negative</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>
                     </Center>
                 </Flex>
@@ -66,17 +72,30 @@ export default function LlmAlChangesQuadPlot(props) {
                         <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                             <Text>False Positive</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>
                     </Center>
                     <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">
                             <Text>False Negative</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>
                     </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" 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>
     )

client/src/constants/widgetRegistry.jsx

@@ -50,8 +50,8 @@ export const WIDGET_REGISTRY = {
         name: "IVANS",
         category: "Communications",
         description: "Feed of recent IVANS reports and reviewer statuses.",
-        component: lazy(() => import('../components/Widgets/IvansAlerts.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/IvansAlertsSettings.jsx')),
+        component: lazy(() => import('../components/widgets/IvansAlerts.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/IvansAlertsSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -72,8 +72,8 @@ export const WIDGET_REGISTRY = {
         name: "Remote Sensing",
         category: "Remote Sensing",
         description: "Feed of recent remote sensing reports.",
-        component: lazy(() => import('../components/Widgets/RemoteSensing.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/Settings/RemoteSensingSettings.jsx')),
+        component: lazy(() => import('../components/widgets/RemoteSensing.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/RemoteSensingSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -94,8 +94,8 @@ export const WIDGET_REGISTRY = {
         name: "Alert Level Changes",
         category: "Daily Alerts",
         description: "List of 7-day alert level changes with trend arrows.",
-        component: lazy(() => import('../components/Widgets/AlertChanges.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/AlertChangeSettings.jsx')),
+        component: lazy(() => import('../components/widgets/AlertChanges.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/AlertChangeSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -111,7 +111,7 @@ export const WIDGET_REGISTRY = {
         category: "Daily Volcanic Activity",
         description: "List of explosion events over a specified time period.",
 
-        component: lazy(() => import('../components/Widgets/ExplosionEvents.jsx')),
+        component: lazy(() => import('../components/widgets/ExplosionEvents.jsx')),
 
         // The specific settings UI for this widget
         settingsComponent: lazy(() => import('../components/widgets/settings/ExplosionEventsSettings.jsx')),
@@ -131,8 +131,8 @@ export const WIDGET_REGISTRY = {
         name: "Plume Events",
         category: "Daily Volcanic Activity",
         description: "Plot of explosion heights over a weeks time.",
-        component: lazy(() => import('../components/Widgets/PlumeEvents.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/PlumeEventsSettings.jsx')),
+        component: lazy(() => import('../components/widgets/PlumeEvents.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/PlumeEventsSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -146,8 +146,8 @@ export const WIDGET_REGISTRY = {
         name: "Seismic Events",
         category: "Daily Volcanic Activity",
         description: "Plot of number of seismic events over a weeks time.",
-        component: lazy(() => import('../components/Widgets/SeismicEvents.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/SeismicEventsSettings.jsx')),
+        component: lazy(() => import('../components/widgets/SeismicEvents.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/SeismicEventsSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -161,7 +161,7 @@ export const WIDGET_REGISTRY = {
         name: "Alert Level Changes Quad Plot",
         category: "Computer Science",
         description: "Percentage of TP, TN, FP, and FN changes in viable alert levels.",
-        component: lazy(() => import('../components/Widgets/LlmAlChangesQuadPlot.jsx')),
+        component: lazy(() => import('../components/widgets/LlmAlChangesQuadPlot.jsx')),
         allowedSizes: {
             medium: { w: 3, h: 12 }
         }
@@ -171,8 +171,8 @@ export const WIDGET_REGISTRY = {
         name: "Communication Coordinator Report",
         category: "Daily Volcanic Activity",
         description: "Generated Report",
-        component: lazy(() => import('../components/Widgets/CommCoorReport.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/CommCoorReportSettings.jsx')),
+        component: lazy(() => import('../components/widgets/CommCoorReport.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/CommCoorReportSettings.jsx')),
         defaultSettings: {
             copyToClipboard: false,
             downloadReport: false,
@@ -188,8 +188,8 @@ export const WIDGET_REGISTRY = {
         name: "VAA Polygon Projections Map",
         category: "Maps",
         description: "By selecting a volcano, the map will take you to it and show a polygon of the ash in 8, 12, and 18 hours",
-        component: lazy(() => import('../components/Widgets/VaaMap.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/VaaMapSettings.jsx')),
+        component: lazy(() => import('../components/widgets/VaaMap.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/VaaMapSettings.jsx')),
         defaultSettings: {
             position: [45.61142, -122.49630], // CVO's coordinates
             startDate: getToday(),
@@ -209,7 +209,7 @@ export const WIDGET_REGISTRY = {
         name: "Travel Gantt Chart",
         category: "Communications",
         description: "View upcoming travels in a gantt chart",
-        component: lazy(() => import('../components/Widgets/TravelGanttChart.jsx')),
+        component: lazy(() => import('../components/widgets/TravelGanttChart.jsx')),
         allowedSizes: {
             medium: { w: 6, h: 12 }
         }

client/src/store/authStore.js

@@ -46,6 +46,11 @@ const useAuthStore = create((set) => ({
             // Hit the new lightweight endpoint
             const res = await api.get('session/');
 
+            // 🔨 Security Fix a broken API call, Verify we actually got a user object back, not HTML fallback text
+            if (typeof res.data === 'string' || !res.data.username) {
+                throw new Error("Received invalid data format instead of user session");
+            }
+
             // Rehydrate the store with the user's info!
             set({
                 isAuthenticated: true,