update: rounder borders for widget settings menu

wip: themes for checkboxes

client/Dockerfile

@@ -1,23 +0,0 @@
-# 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

@@ -1,23 +0,0 @@
-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/App.jsx

@@ -20,7 +20,6 @@ import Admin from "./pages/admin/Admin.jsx";
 import MyDashboard from "./pages/home/tabs/MyDashboard.jsx";
 import Settings from "./pages/auth/Settings.jsx";
 import WebAdmin from "./pages/auth/WebAdmin.jsx";
-import DataExplorer from "@/pages/data_explorer/DataExplorer.jsx";
 
 export default function App() {
   // 1. Pull the initialization function from Zustand
@@ -54,7 +53,6 @@ export default function App() {
           <Route path="/regional-map" element={<RegionalMap/>}/>
           <Route path="/volcano" element={<Volcano/>}/>
           <Route path="/admin" element={<Admin/>}/>
-          <Route path="/data-explorer" element={<DataExplorer/>}/>
         </Route>
 
       </Route>
@@ -74,7 +72,7 @@ function AppFoundation() {
   return (
     <>
       <DialogPopup dialog={dialog}/>
-      <Grid css={styles} templateRows="1fr 13fr" templateColumns="auto 1fr">
+      <Grid css={styles} templateRows="1fr 11fr" templateColumns="auto 1fr">
         <GridItem rowSpan={2} colSpan={1}>
           <Sidebar/>
         </GridItem>

client/src/components/Widgets/LlmAlChangesQuadPlot.jsx

@@ -8,10 +8,6 @@ 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');
@@ -36,34 +32,32 @@ export default function LlmAlChangesQuadPlot(props) {
 
     if (apiData) {
         console.log(apiData);
-        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'];
+        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);
     }
 
     return (
-        <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 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>
-            <Flex direction="column" w="100%" h="100%" gap="2" borderBottomRadius="lg">
+            <Flex direction="column" w="100%" h="100%" bg="gray.800" gap="2" padding="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]['vr_count']} </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tp_count']}/{apiData[0]['tot_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]['vr_count']} </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tn_count']}/{apiData[0]['tot_count']} </Text>
                         </Flex>
                     </Center>
                 </Flex>
@@ -72,30 +66,17 @@ 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]['vr_count']} </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fp_count']}/{apiData[0]['tot_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]['vr_count']} </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fn_count']}/{apiData[0]['tot_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/components/layout/Header.jsx

@@ -1,8 +1,7 @@
-import {useSlotRecipe, Text, Flex, Input, InputGroup} from "@chakra-ui/react"
+import {useSlotRecipe, Text, Flex} from "@chakra-ui/react"
 import UserAvatarMenu from "./UserAvatarMenu.jsx";
 import useAuthStore from "@/store/authStore";
 import {SearchBar} from "@/components/dashboard/SearchBar.jsx";
-import {Search} from "lucide-react";
 
 // Import the asset properly so Vite can bundle it for any server
 // import defaultAvatar from "@/assets/user_profile.svg";
@@ -21,11 +20,9 @@ export default function Header() {
 
   return (
     <Flex css={styles.root}>
-      <InputGroup startElement={<Search />} css={styles.search_bar}>
-        <Input
-          placeholder="Enter a volcano to search"
-        />
-      </InputGroup>
+      <Flex css={styles.search_bar}>
+       <SearchBar placeholder="Enter a volcano to search"/>
+      </Flex>
 
       {/* User Profile Section */}
       <Flex css={styles.user_info}>

client/src/components/layout/Sidebar.jsx

@@ -1,4 +1,4 @@
-import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen, ChartScatter, Telescope, Map, UserLock} from 'lucide-react';
+import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
 import {useSlotRecipe, Box, Button, IconButton, Text, Flex} from "@chakra-ui/react";
 import {ColorModeButton} from "@/components/ui/color-mode.jsx";
 import {NavLink} from "react-router-dom";
@@ -7,10 +7,9 @@ import {useState} from "react";
 const SIDEBAR_DEFAULT_BUTTONS = [
   {icon: House, name: "Home", url: "/home"},
   {icon: Earth, name: "Global Map", url: "/global-map"},
-  {icon: Map, name: "Regional Map", url: "/regional-map"},
+  {icon: MapPin, name: "Regional Map", url: "/regional-map"},
   {icon: Mountain, name: "Volcano", url: "/volcano"},
-  {icon: Telescope, name: "Data Explorer", url: "/data-explorer"},
-  {icon: UserLock, name: "Admin", url: "/admin"}, // TODO remove in the future as default should not have admin
+  {icon: ShieldUser, name: "Admin", url: "/admin"} // TODO remove in the future as default should not have admin
 ];
 
 export default function Sidebar() {

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(),
@@ -71,8 +71,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(),
@@ -92,8 +92,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(),
@@ -115,7 +115,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')),
@@ -135,8 +135,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(),
@@ -150,8 +150,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(),
@@ -165,7 +165,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 }
         }
@@ -175,8 +175,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,
@@ -192,8 +192,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(),
@@ -213,7 +213,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/pages/data_explorer/DataExplorer.jsx

@@ -1,188 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import { Box, Stack, Separator, Center, Spinner, Alert, Flex } from "@chakra-ui/react";
-import { toaster } from "../../components/ui/toaster.jsx"; // Adjust path to your v3 toaster if needed
-import VdapApi from "../../hooks/useVdapApi.js";
-
-// Import our newly consolidated engine and presentation components
-import QueryBuilder from "./QueryBuilder.jsx";
-import MyQueryBuilder from "./MyQueryBuilder.jsx";
-import DataTable from "./DataTable.jsx";
-// import { exportToCSV } from "../utils/csvExport.js";
-
-export default function DataExplorer() {
-  // 1. Core State
-  const [results, setResults] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [allColumns, setAllColumns] = useState([]);
-  const isReadyRef = useRef(false);
-
-  // 2. The Master Query State
-  const [url, setUrl] = useState({
-    source: "",
-    page: 1,
-    columns: [],
-    bundles: [],
-    ordering: "id",
-  });
-
-  // 3. API & URL Logic
-  const buildUrlParams = () => {
-    const { source, page, columns, bundles, ordering } = url;
-    const params = new URLSearchParams();
-
-    if (bundles.length > 0) {
-      // Scrub out incomplete filters before sending to the backend
-      const cleanBundles = bundles.map(bundle => {
-        const validFilters = bundle.filters
-          .filter(f => f.column && f.type && f.value)
-          .map(({ id, ...rest }) => rest);
-        return { ...bundle, filters: validFilters };
-      }).filter(bundle => bundle.filters.length > 0); // Only send bundles that actually have filters
-
-      if (cleanBundles.length > 0) {
-        params.append("bundles", JSON.stringify(cleanBundles));
-      }
-    }
-
-    if (source) params.append("source", source);
-    if (columns?.length > 0) params.append("columns", columns.join(","));
-    if (ordering) params.append("ordering", ordering);
-    if (page) params.append("page", page);
-
-    return params.toString();
-  };
-
-  // pulls list of column names and datatypes of said columns
-  const getColumns = async (endpoint) => {
-    setError(null);
-    isReadyRef.current = false; // does this need to be set to true at the end?
-    try {
-      // 🚨 Relative pathing so Traefik proxy handles it
-      const response = await fetch(endpoint);
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-
-      const data = await response.json();
-      setAllColumns(data);
-      setUrl({ ...url, columns: Object.keys(data.types), source: data.view }); // changed it from (prev => {...prev, columns: __, source: __ })
-    } catch (e) {
-      setError(e.message);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-
-  // pulls the data
-  const pullTable = async () => {
-    setIsLoading(true);
-    setError(null);
-
-    if (!url.source) {
-      setError("Please select a source (table) before fetching data.");
-      setIsLoading(false);
-      return;
-    }
-
-    try {
-      const response = await fetch(`/api/v3/table_view?${buildUrlParams()}`);
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-
-      const data = await response.json();
-      setResults(data);
-    } catch (e) {
-      setError(e.message);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // Auto-fetch when pagination, columns, or sorting changes (but skip first render)
-  useEffect(() => {
-    if (! isReadyRef.current) return;
-    // {
-      // isReadyRef.current = false; // why are we resetting the readyRef back to false since it already is false?
-      // return;
-    // }
-    pullTable();
-  }, [url.page, url.columns, url.ordering]);
-
-  // 4. Export Utility
-  const handleDownloadCSV = () => {
-    if (results?.results?.length > 0) {
-      const timestamp = new Date().toISOString().slice(0, 10);
-      const filename = `${url.source}_${timestamp}.csv`;
-      // exportToCSV(results.results, filename);
-      toaster.create({
-        title: "Dummy Success Toaster (csv download fn has been disabled for now)",
-        description: `Downloaded ${results.results.length} records as CSV`,
-        type: "success",
-      });
-    } else {
-      toaster.create({
-        title: "No Data",
-        description: "No results to download",
-        type: "error",
-      });
-    }
-  };
-
-  return (
-    // This Flex container will perfectly fill your new Sidebar Route canvas.
-    <Flex direction="column" p={2} gap={3} bg="transparent">
-      {/* The Engine */}
-      <MyQueryBuilder
-        url={url}
-        setUrl={setUrl}
-        allColumns={allColumns}
-        getColumns={getColumns}
-        pullTable={pullTable}
-        isLoading={isLoading}
-        isReadyRef={isReadyRef}
-      />
-
-      <Separator borderColor="widgetBadgeBg" />
-
-      {isLoading && (
-        <Center p={10}>
-          <Spinner color="blue.500" size="xl" thickness="4px" />
-        </Center>
-      )}
-
-      {error && (
-        <Alert.Root status="error" mt={4} bg="red.900" color="white">
-          <Alert.Indicator />
-          <Alert.Content>
-            <Alert.Title>Error Fetching Data</Alert.Title>
-            <Alert.Description>{error}</Alert.Description>
-          </Alert.Content>
-        </Alert.Root>
-      )}
-
-      {/* The Display (Table, Pagination, Download, Columns) */}
-      {results && (
-        <Box w="100%">
-          {results.results.length > 0 ? (
-            <DataTable
-              data={results.results}
-              count={results.count}
-              url={url}
-              setUrl={setUrl}
-              allColumns={allColumns.types}
-              isLoading={isLoading}
-              onDownload={handleDownloadCSV}
-            />
-          ) : (
-            <Alert.Root status="warning" mt={4} bg="widgetItemExpandedBg" color="text">
-              <Alert.Indicator />
-              <Alert.Content>
-                <Alert.Title>No Results Found</Alert.Title>
-                <Alert.Description>Try loosening your filter criteria.</Alert.Description>
-              </Alert.Content>
-            </Alert.Root>
-          )}
-        </Box>
-      )}
-    </Flex>
-  );
-};

client/src/pages/data_explorer/DataTable.jsx

@@ -1,220 +0,0 @@
-import React from "react";
-import {
-  Button,
-  ButtonGroup,
-  Table,
-  HoverCard,
-  Text,
-  Flex,
-  Menu,
-  Portal,
-  useCheckboxGroup,
-  IconButton,
-  Pagination,
-} from "@chakra-ui/react";
-import { ChevronDown, ChevronLeft, ChevronRight, Download, Files, ClipboardPaste } from 'lucide-react';
-// import { LuChevronDown, LuChevronLeft, LuChevronRight } from "react-icons/lu";
-// import { FiDownload, FiCopy, FiClipboard } from "react-icons/fi";
-
-// ============================================================================
-// 1. COLUMN SELECTOR (Toggles visible columns)
-// ============================================================================
-const ColumnSelector = ({ allColumns, url, setUrl, isLoading }) => {
-  const group = useCheckboxGroup({ defaultValue: url.columns || Object.keys(allColumns) });
-
-  return (
-    <Menu.Root closeOnSelect={false}>
-      <Menu.Trigger asChild>
-        <Button variant="surface" bg="widgetBadgeBg" color="text" _hover={{ bg: "widgetItemExpandedBg" }}>
-          Show Columns <ChevronDown />
-        </Button>
-      </Menu.Trigger>
-      <Portal>
-        <Menu.Positioner>
-          <Menu.Content bg="white" borderColor="widgetBadgeBg">
-            <Menu.ItemGroup>
-              <Menu.ItemGroupLabel color="widgetTextMuted">Available Columns</Menu.ItemGroupLabel>
-              {Object.keys(allColumns).map((colName) => (
-                <Menu.CheckboxItem
-                  key={colName}
-                  value={colName}
-                  checked={group.value.includes(colName)}
-                  onCheckedChange={() => group.toggleValue(colName)}
-                  color="text"
-                >
-                  <Menu.ItemIndicator />
-                  {colName}
-                </Menu.CheckboxItem>
-              ))}
-            </Menu.ItemGroup>
-            <Menu.Item
-              onClick={() => setUrl((prev) => ({ ...prev, columns: [...group.value] }))}
-              p="2"
-            >
-              <Button size="sm" w="100%" loading={isLoading} bg="blue.600" color="white" _hover={{ bg: "blue.500" }}>
-                Apply Columns
-              </Button>
-            </Menu.Item>
-          </Menu.Content>
-        </Menu.Positioner>
-      </Portal>
-    </Menu.Root>
-  );
-};
-
-// ============================================================================
-// 2. PAGE FOOTER (Pagination & Query Saving)
-// ============================================================================
-const PageFooter = ({ count, pageSize, url, setUrl }) => {
-  const page = url.page || 1;
-
-  const handleSaveQuery = () => {
-    navigator.clipboard.writeText(JSON.stringify(url)).then(() => {
-      alert("Query copied to clipboard!"); // Optional: replace with your Toast
-    });
-  };
-
-  const handlePasteQuery = async () => {
-    try {
-      const text = await navigator.clipboard.readText();
-      const clipBoardText = JSON.parse(text);
-      setUrl(clipBoardText);
-    } catch (err) {
-      console.error("Invalid clipboard content", err);
-      alert("Failed to paste. Make sure you copied a valid query.");
-    }
-  };
-
-  return (
-    <Flex w="100%" justify="space-between" align="center" mt="4">
-      {/* Query Save/Paste Tools */}
-      <ButtonGroup size="sm" attached>
-        <Button onClick={handleSaveQuery} variant="outline" borderColor="widgetBadgeBg" color="text">
-          <Files style={{ marginRight: "8px" }} /> Save Query
-        </Button>
-        <Button onClick={handlePasteQuery} variant="outline" borderColor="widgetBadgeBg" color="text">
-          <ClipboardPaste style={{ marginRight: "8px" }} /> Paste Query
-        </Button>
-      </ButtonGroup>
-
-      {/* Pagination Controls */}
-      <Pagination.Root count={count} pageSize={pageSize} page={page}>
-        <ButtonGroup variant="ghost" size="sm">
-          <Pagination.PrevTrigger asChild>
-            <IconButton onClick={() => setUrl((prev) => ({ ...prev, page: page - 1 }))} isDisabled={page <= 1} color="text">
-              <ChevronLeft />
-            </IconButton>
-          </Pagination.PrevTrigger>
-
-          <Pagination.Items
-            render={(pageItem) => (
-              <IconButton
-                key={pageItem.value}
-                variant={pageItem.value === page ? "surface" : "ghost"}
-                bg={pageItem.value === page ? "widgetBadgeBg" : "transparent"}
-                color="text"
-                onClick={() => setUrl((prev) => ({ ...prev, page: pageItem.value }))}
-              >
-                {pageItem.value}
-              </IconButton>
-            )}
-          />
-
-          <Pagination.NextTrigger asChild>
-            <IconButton onClick={() => setUrl((prev) => ({ ...prev, page: page + 1 }))} isDisabled={page * pageSize >= count} color="text">
-              <ChevronRight />
-            </IconButton>
-          </Pagination.NextTrigger>
-        </ButtonGroup>
-      </Pagination.Root>
-    </Flex>
-  );
-};
-
-// ============================================================================
-// 3. MAIN DATA TABLE (The Exported Presentation Wrapper)
-// ============================================================================
-const DataTable = React.memo(({ data, count, url, setUrl, allColumns, isLoading, onDownload }) => {
-  const columns = Object.keys(data[0] || {});
-
-  const handleSort = (col) => {
-    let order = col;
-    if (url.ordering === col) {
-      order = `-${col}`;
-    }
-    setUrl((prev) => ({ ...prev, ordering: order }));
-  };
-
-  return (
-    <Flex direction="column" w="100%" gap="4">
-      {/* Top Table Toolbar */}
-      <Flex w="100%" justify="space-between" align="center">
-        {allColumns && (
-          <ColumnSelector allColumns={allColumns} url={url} setUrl={setUrl} isLoading={isLoading} />
-        )}
-        <Button onClick={onDownload} variant="outline" borderColor="widgetBadgeBg" color="text" size="sm" _hover={{ bg: "widgetItemExpandedBg" }}>
-          <Download style={{ marginRight: "8px" }} /> Download CSV
-        </Button>
-      </Flex>
-
-      {/* Main Scrollable Table */}
-      <Table.ScrollArea borderWidth="1px" borderColor="widgetBadgeBg" rounded="md" maxH="65vh" bg="widgetItemBg">
-        <Table.Root stickyHeader showColumnBorder size="sm">
-          <Table.Header>
-            <Table.Row bg="white">
-              {columns.map((col) => (
-                <Table.ColumnHeader key={col} color="text" py="2">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    color="text"
-                    onClick={() => handleSort(col)}
-                    w="100%"
-                    justifyContent="flex-start"
-                    _hover={{ bg: "widgetBadgeBg" }}
-                  >
-                    {col}{" "}
-                    <ChevronDown
-                      style={{
-                        opacity: url.ordering === col || url.ordering === `-${col}` ? 1 : 0,
-                        transform: url.ordering === col ? "rotate(180deg)" : "rotate(0deg)",
-                        transition: "transform 0.2s",
-                        marginLeft: "8px",
-                      }}
-                    />
-                  </Button>
-                </Table.ColumnHeader>
-              ))}
-            </Table.Row>
-          </Table.Header>
-
-          <Table.Body>
-            {data.map((row, i) => (
-              <Table.Row key={i} _hover={{ bg: "widgetItemExpandedBg" }}>
-                {columns.map((col) => (
-                  <Table.Cell key={col} maxW="150px" textAlign="start" truncate color="text" borderColor="widgetBadgeBg">
-                    <HoverCard.Root>
-                      <HoverCard.Trigger asChild>
-                        <span style={{ cursor: "pointer" }}>{row[col]}</span>
-                      </HoverCard.Trigger>
-                      <HoverCard.Positioner>
-                        <HoverCard.Content p="4" maxW="400px" whiteSpace="normal" wordBreak="break-word" rounded="md" shadow="lg" bg="widgetItemExpandedBg" color="text">
-                          <Text>{row[col]}</Text>
-                        </HoverCard.Content>
-                      </HoverCard.Positioner>
-                    </HoverCard.Root>
-                  </Table.Cell>
-                ))}
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table.Root>
-      </Table.ScrollArea>
-
-      {/* Bottom Pagination Footer */}
-      <PageFooter count={count} pageSize={50} url={url} setUrl={setUrl} />
-    </Flex>
-  );
-});
-
-export default DataTable;

client/src/pages/data_explorer/MyQueryBuilder.jsx

@@ -1,272 +0,0 @@
-// CHAKRA COMPONENTS
-import {
-  Button,
-  Stack,
-  Flex,
-  Field,
-  NativeSelect,
-  Input,
-  HoverCard,
-  Text,
-  NumberInput,
-  Box,
-  useSlotRecipe,
-  Combobox,
-  Portal,
-  useFilter,
-  useListCollection
-} from "@chakra-ui/react";
-// ICONS
-import {
-  Plus,
-  CircleMinus,
-  Files,
-  ClipboardPaste,
-  Trash
-} from 'lucide-react';
-// OTHER
-import { useState } from 'react';
-import useDataFilterStore from '../../store/useDataFilterStore.jsx';
-
-// ============================================================================
-// 1. MAIN QUERY BUILDER (The Engine Wrapper)
-// ============================================================================
-export default function MyQueryBuilder({ url, setUrl, allColumns, getColumns, pullTable, isLoading, isReadyRef }) {
-  // STYLING
-  const dataExplorerRecipe = useSlotRecipe({ key: "dataExplorer" });
-  const dataExplorerStyle = dataExplorerRecipe();
-
-  // THE SELECT DROPDOWN MENU
-  const { contains } = useFilter({ sensitivity: "base" })
-
-  const { collection, filter } = useListCollection({
-    initialItems: tables,
-    filter: contains,
-  })
-
-  // STATE MANAGEMENT
-  const [value, setValue] = useState([]);
-  const addNewGroup = useDataFilterStore(state => state.addNewGroup);
-  const filterGroups = useDataFilterStore(state => state.filterGroups);
-
-  console.log("filter groups", filterGroups);
-
-  return (
-    <Flex direction="column" gap={2} w="100%" bg="transparent" css={dataExplorerStyle.query_builder}>
-      {/* Top Controls: Source & Execute */}
-      <Flex gap={2} align="flex-end">
-        <Combobox.Root
-          collection={collection}
-          onInputValueChange={(e) => filter(e.inputValue)}
-          value={value}
-          onValueChange={(e) => {
-            setValue(e.value);
-            const selectedView = e.value;
-            setUrl(prev => ({ ...prev, source: selectedView }));
-            // need to get all columns as default in param building
-            const endpoint = "/api/v3/view_dash_event_search_columns";
-            getColumns(endpoint);
-          }}
-          width="320px"
-        >
-          <Combobox.Label>Select Table</Combobox.Label>
-          <Combobox.Control>
-            <Combobox.Input placeholder="Type to search" />
-            <Combobox.IndicatorGroup>
-              <Combobox.ClearTrigger />
-              <Combobox.Trigger />
-            </Combobox.IndicatorGroup>
-          </Combobox.Control>
-          <Portal>
-            <Combobox.Positioner>
-              <Combobox.Content>
-                <Combobox.Empty>No items found</Combobox.Empty>
-                {collection.items.map((item) => (
-                  <Combobox.Item item={item} key={item.value}>
-                    {item.label}
-                    <Combobox.ItemIndicator />
-                  </Combobox.Item>
-                ))}
-              </Combobox.Content>
-            </Combobox.Positioner>
-          </Portal>
-        </Combobox.Root>
-
-        <Button
-          loading={isLoading}
-          onClick={() => {
-            isReadyRef.current = true;
-            pullTable();
-          }}
-        >
-          Execute Search
-        </Button>
-      </Flex>
-
-      {/* Filter Builder Engine */}
-      {url.source && allColumns?.types && (
-        <Stack w="100%" gap="2">
-          <Text fontSize="sm" fontWeight="bold" color="text">Filters</Text>
-
-          <Box w="100%" maxH="400px" overflow="auto">
-            <Stack w="100%" gap="2" pr="4">
-              {filterGroups.map((group) => (
-                <FilterGroup key={group.id} groupID={group.id} filters={group.filters} columns={allColumns.types} />
-              ))}
-              <Button onClick={() => addNewGroup()} variant="outline" borderColor="widgetBadgeBg" color="text" _hover={{ bg: "widgetBadgeBg" }}>
-                New Filter Group <Plus />
-              </Button>
-            </Stack>
-          </Box>
-        </Stack>
-      )}
-    </Flex>
-  );
-}
-
-// LIST OF TABLES USER CAN EXPLORE
-const tables = [
-  { label: "Events Table", value: "ViewDashEventSearch" },
-];
-
-// ============================================================================
-// 2. FILTERS GROUPS (The AND logic groups)
-// ============================================================================
-function FilterGroup({ groupID, filters, columns }) {
-  const removeGroup = useDataFilterStore(state => state.removeGroup);
-  const addFilter = useDataFilterStore(state => state.addFilter);
-
-  console.log("in filter group. GroupID: ", groupID, "filters: ", filters);
-
-  return (
-    <Stack bg="widgetItemBg" borderWidth="1px" borderColor="widgetBadgeBg" borderRadius="lg" p="3" spacing="3">
-      <Flex justify="space-between" align="center">
-        <Input placeholder="Group Name (Optional)" maxW="200px" size="sm" variant="flushed" color="text" />
-        <Button onClick={() => removeGroup(groupID)} variant="ghost" size="sm" color="red.400">
-          <Trash />
-        </Button>
-      </Flex>
-
-      <Stack spacing="2">
-        {filters?.map((filter) => (
-          <FilterRow key={filter.id} groupID={groupID} filterID={filter.id} filter={filter} columns={columns} />
-        ))}
-        <Button onClick={() => addFilter(groupID)} variant="outline" size="sm" color="text" borderColor="widgetBadgeBg" _hover={{ bg: "widgetBadgeBg" }}>
-          Add Filter <Plus />
-        </Button>
-      </Stack>
-    </Stack>
-  );
-};
-
-// ============================================================================
-// 3. FILTER ROW (The individual criteria inputs)
-// ============================================================================
-function FilterRow({ groupID, filterID, filter, columns }) {
-  // STATE MANAGEMENT
-  const removeFilter = useDataFilterStore(state => state.removeFilter);
-  const updateFilterColumn = useDataFilterStore(state => state.updateFilterColumn);
-  const updateFilterOp = useDataFilterStore(state => state.updateFilterOps);
-  const updateFilterValue = useDataFilterStore(state => state.updateFilterValue);
-  const copyFilter = useDataFilterStore(state => state.copyFilter);
-  const pasteFilter = useDataFilterStore(state => state.pasteFilter);
-
-  // CONSTANTS
-  const types = {
-    AutoField: ["=", "<", ">", "<=", ">="],
-    IntegerField: ["=", "<", ">", "<=", ">="],
-    CharField: ["=", "contains"],
-    DateTimeField: ["range"],
-  };
-
-  return (
-    <Flex gap="2" align="center">
-      {/* Remove button */}
-      <HoverCard.Root positioning={{ placement: "top" }}>
-        <HoverCard.Trigger asChild>
-          <Button onClick={() => removeFilter(groupID, filterID)} variant="ghost" size="sm" color="red.400">
-            <CircleMinus />
-          </Button>
-        </HoverCard.Trigger>
-        <HoverCard.Positioner>
-          <HoverCard.Content p="2" bg="white"><Text fontSize="sm">Remove Filter</Text></HoverCard.Content>
-        </HoverCard.Positioner>
-      </HoverCard.Root>
-
-      {/* Copy Button */}
-      <HoverCard.Root positioning={{ placement: "top" }}>
-        <HoverCard.Trigger asChild>
-          <Button onClick={() => copyFilter(filter)} variant="ghost" size="sm" color="text">
-            <Files />
-          </Button>
-        </HoverCard.Trigger>
-        <HoverCard.Positioner>
-          <HoverCard.Content p="2" bg="white"><Text fontSize="sm">Copy Filter</Text></HoverCard.Content>
-        </HoverCard.Positioner>
-      </HoverCard.Root>
-
-      {/* paste button */}
-      <HoverCard.Root positioning={{ placement: "top" }}>
-        <HoverCard.Trigger asChild>
-          <Button
-            onClick={() => pasteFilter(groupID, filterID)}
-            variant="ghost"
-            size="sm"
-            color="text"
-          >
-            <ClipboardPaste />
-          </Button>
-        </HoverCard.Trigger>
-        <HoverCard.Positioner>
-          <HoverCard.Content p="2" bg="white"><Text fontSize="sm">Paste Filter</Text></HoverCard.Content>
-        </HoverCard.Positioner>
-      </HoverCard.Root>
-
-      {/* Column selector */}
-      <Field.Root w={filter?.type === "DateTimeField" ? "30%" : "30%"}>
-        <NativeSelect.Root>
-          <NativeSelect.Field
-            bg="widgetItemBg"
-            color="text"
-            value={filter.col ?? ""}
-            onChange={(e) => updateFilterColumn(groupID, filterID, e.target.value, columns[e.target.value], null, null)} // e.target.value is the new column
-          >
-            <option value="" disabled hidden>Select Column</option>
-            {Object.keys(columns).map((colName) => (
-              <option key={colName} value={colName}>{colName}</option>
-            ))}
-          </NativeSelect.Field>
-          <NativeSelect.Indicator />
-        </NativeSelect.Root>
-      </Field.Root>
-
-      {/* Operator selector or start date for range */}
-      <Field.Root w={filter?.type === "DateTimeField" ? "20%" : "20%"}>
-        {filter?.type === "DateTimeField" ? (
-          <Input type="date" bg="widgetItemBg" color="text" value={filter.value?.start || ""} onChange={(e) => updateFilterValue(groupID, filterID, e.target.value, "s")} />
-        ) : (
-          <NativeSelect.Root>
-            <NativeSelect.Field bg="widgetItemBg" color="text" value={filter.op ?? ""} onChange={(e) => updateFilterOp(groupID, filterID, e.target.value)}>
-              <option value="" disabled hidden>Operator</option>
-              {filter?.type && types[filter?.type].map((op) => <option key={op} value={op}>{op}</option>)} {/* maps over the 'filter.type' corresponding ops from the types dictionary */}
-            </NativeSelect.Field>
-            <NativeSelect.Indicator />
-          </NativeSelect.Root>
-        )}
-      </Field.Root>
-
-      {/* Value input or end date for range */}
-      <Field.Root w={filter.type === "DateTimeField" ? "20%" : "50%"}>
-        {filter?.type === "DateTimeField" ? (
-          <Input type="date" bg="widgetItemBg" color="text" value={filter.value?.end || ""} onChange={(e) => updateFilterValue(groupID, filterID, e.target.value, "e")} />
-        ) : filter?.type === "IntegerField" || filter?.type === "AutoField" ? (
-          <NumberInput.Root value={filter.value ?? ""} onValueChange={(e) => updateFilterValue(groupID, filterID, e.value)}>
-            <NumberInput.Input placeholder="Value" bg="widgetItemBg" color="text" />
-          </NumberInput.Root>
-        ) : (
-          <Input placeholder="Value" bg="widgetItemBg" color="text" value={filter.value ?? ""} onChange={(e) => updateFilterValue(groupID, filterID, e.target.value)} />
-        )}
-      </Field.Root>
-    </Flex>
-  );
-};

client/src/pages/data_explorer/QueryBuilder.jsx

@@ -1,375 +0,0 @@
-import React, { useRef } from "react";
-import {
-  Button,
-  Stack,
-  Flex,
-  Field,
-  NativeSelect,
-  Input,
-  HoverCard,
-  Text,
-  NumberInput,
-  Box,
-  useSlotRecipe,
-  Combobox,
-  Portal,
-  useFilter,
-  useListCollection
-} from "@chakra-ui/react";
-import { Plus, CircleMinus, Files, ClipboardPaste, Trash } from 'lucide-react';
-import { useState } from 'react';
-import useDataFilterStore from '../../store/useDataFilterStore.jsx';
-
-// ============================================================================
-// 1. FILTER ROW (The individual criteria inputs)
-// ============================================================================
-const FilterRow = React.memo(({ filter, columns, setUrl, bundleId, copiedFilter }) => {
-  const types = {
-    AutoField: ["=", "<", ">", "<=", ">="],
-    IntegerField: ["=", "<", ">", "<=", ">="],
-    CharField: ["=", "contains"],
-    DateTimeField: ["range"],
-  };
-
-  const columnType = columns[filter.column];
-  const operators = types[columnType] || ["="]; // default to equals if unknown
-
-  const handleRemoveFilter = () => {
-    setUrl(prev => ({
-      ...prev,
-      bundles: prev.bundles.map((bundle) =>
-        bundle.id === bundleId ?
-          { ...bundle, filters: bundle.filters.filter((fil) => fil.id !== filter.id) }
-          : bundle
-      ),
-    }));
-  };
-
-  const updateFilterField = (field, value) => {
-    setUrl(prev => ({
-      ...prev,
-      bundles: prev.bundles.map(bundle =>
-        bundle.id === bundleId
-          ? {
-            ...bundle,
-            filters: bundle.filters.map(fil =>
-              fil.id === filter.id ? { ...fil, [field]: value } : fil
-            ),
-          }
-          : bundle
-      ),
-    }));
-  };
-
-  const handleColumnChange = (newCol) => {
-    setUrl((prev) => ({
-      ...prev,
-      bundles: prev.bundles.map((bundle) =>
-        bundle.id === bundleId
-          ? {
-            ...bundle,
-            filters: bundle.filters.map((fil) =>
-              fil.id === filter.id
-                ? { ...fil, column: newCol, type: columns[newCol], operator: null, value: null }
-                : fil
-            ),
-          }
-          : bundle
-      ),
-    }));
-  };
-
-  const handleDateChange = (type, newDate) => {
-    const currentValue = filter.value || { start: null, end: null };
-    const updatedValue = { ...currentValue, [type]: newDate || null };
-    updateFilterField("value", updatedValue);
-    updateFilterField("operator", "range");
-  };
-
-  return (
-    <Flex gap="2" align="center">
-      {/* Remove button */}
-      <HoverCard.Root positioning={{ placement: "top" }}>
-        <HoverCard.Trigger asChild>
-          <Button onClick={handleRemoveFilter} variant="ghost" size="sm" color="red.400">
-            <CircleMinus />
-          </Button>
-        </HoverCard.Trigger>
-        <HoverCard.Positioner>
-          <HoverCard.Content p="2" bg="white"><Text fontSize="sm">Remove Filter</Text></HoverCard.Content>
-        </HoverCard.Positioner>
-      </HoverCard.Root>
-
-      {/* Copy / Paste Buttons */}
-      <HoverCard.Root positioning={{ placement: "top" }}>
-        <HoverCard.Trigger asChild>
-          <Button onClick={() => (copiedFilter.current = { ...filter })} variant="ghost" size="sm" color="text">
-            <Files />
-          </Button>
-        </HoverCard.Trigger>
-        <HoverCard.Positioner>
-          <HoverCard.Content p="2" bg="white"><Text fontSize="sm">Copy Filter</Text></HoverCard.Content>
-        </HoverCard.Positioner>
-      </HoverCard.Root>
-
-      <HoverCard.Root positioning={{ placement: "top" }}>
-        <HoverCard.Trigger asChild>
-          <Button
-            onClick={() => {
-              if (copiedFilter.current) {
-                setUrl((prev) => ({
-                  ...prev,
-                  bundles: prev.bundles.map((bundle) =>
-                    bundle.id === bundleId
-                      ? {
-                        ...bundle,
-                        filters: bundle.filters.map((fil) =>
-                          fil.id === filter.id ? { ...copiedFilter.current, id: filter.id } : fil
-                        ),
-                      }
-                      : bundle
-                  ),
-                }));
-              }
-            }}
-            variant="ghost"
-            size="sm"
-            color="text"
-          >
-            <ClipboardPaste />
-          </Button>
-        </HoverCard.Trigger>
-        <HoverCard.Positioner>
-          <HoverCard.Content p="2" bg="white"><Text fontSize="sm">Paste Filter</Text></HoverCard.Content>
-        </HoverCard.Positioner>
-      </HoverCard.Root>
-
-      {/* Column selector */}
-      <Field.Root w={columnType === "DateTimeField" ? "30%" : "30%"}>
-        <NativeSelect.Root>
-          <NativeSelect.Field
-            bg="widgetItemBg"
-            color="text"
-            value={filter.column ?? ""}
-            onChange={(e) => handleColumnChange(e.target.value)}
-          >
-            <option value="" disabled hidden>Select Column</option>
-            {Object.keys(columns).map((colName) => (
-              <option key={colName} value={colName}>{colName}</option>
-            ))}
-          </NativeSelect.Field>
-          <NativeSelect.Indicator />
-        </NativeSelect.Root>
-      </Field.Root>
-
-      {/* Operator selector */}
-      <Field.Root w={columnType === "DateTimeField" ? "20%" : "20%"}>
-        {columnType === "DateTimeField" ? (
-          <Input type="date" bg="widgetItemBg" color="text" value={filter.value?.start || ""} onChange={(e) => handleDateChange("start", e.target.value)} />
-        ) : (
-          <NativeSelect.Root>
-            <NativeSelect.Field bg="widgetItemBg" color="text" value={filter.operator ?? ""} onChange={(e) => updateFilterField("operator", e.target.value)}>
-              <option value="" disabled hidden>Operator</option>
-              {filter.type && operators.map((op) => <option key={op} value={op}>{op}</option>)}
-            </NativeSelect.Field>
-            <NativeSelect.Indicator />
-          </NativeSelect.Root>
-        )}
-      </Field.Root>
-
-      {/* Value input */}
-      <Field.Root w={columnType === "DateTimeField" ? "20%" : "50%"}>
-        {columnType === "DateTimeField" ? (
-          <Input type="date" bg="widgetItemBg" color="text" value={filter.value?.end || ""} onChange={(e) => handleDateChange("end", e.target.value)} />
-        ) : columnType === "IntegerField" || columnType === "AutoField" ? (
-          <NumberInput.Root value={filter.value ?? ""} onValueChange={(e) => updateFilterField("value", e.value)}>
-            <NumberInput.Input placeholder="Value" bg="widgetItemBg" color="text" />
-          </NumberInput.Root>
-        ) : (
-          <Input placeholder="Value" bg="widgetItemBg" color="text" value={filter.value ?? ""} onChange={(e) => updateFilterField("value", e.target.value)} />
-        )}
-      </Field.Root>
-    </Flex>
-  );
-});
-
-// ============================================================================
-// 2. FILTER BUNDLES (The AND logic groups)
-// ============================================================================
-const FilterBundle = ({ bundle, columns, url, setUrl, copiedFilter }) => {
-  const handleRemoveBundle = () => {
-    setUrl(prev => ({
-      ...prev,
-      bundles: prev.bundles.filter(b => b.id !== bundle.id)
-    }));
-  };
-
-  const handleAddFilter = () => {
-    setUrl(prev => ({
-      ...prev,
-      bundles: prev.bundles.map(b =>
-        b.id === bundle.id ? ({
-          ...b,
-          filters: [
-            ...b.filters,
-            {
-              id: crypto.randomUUID(),
-              column: null,
-              type: null,
-              operator: null,
-              value: null
-            }
-          ]
-        }) : (b)
-      ),
-    }));
-
-
-  };
-
-  return (
-    <Stack bg="widgetItemBg" borderWidth="1px" borderColor="widgetBadgeBg" borderRadius="lg" p="3" spacing="3">
-      <Flex justify="space-between" align="center">
-        <Input placeholder="Group Name (Optional)" maxW="200px" size="sm" variant="flushed" color="text" />
-        <Button onClick={handleRemoveBundle} variant="ghost" size="sm" color="red.400">
-          <Trash />
-        </Button>
-      </Flex>
-
-      <Stack spacing="2">
-        {bundle.filters.map((filter) => (
-          <FilterRow key={filter.id} filter={filter} columns={columns} setUrl={setUrl} bundleId={bundle.id} copiedFilter={copiedFilter} />
-        ))}
-        <Button onClick={handleAddFilter} variant="outline" size="sm" color="text" borderColor="widgetBadgeBg" _hover={{ bg: "widgetBadgeBg" }}>
-          Add Filter <Plus />
-        </Button>
-      </Stack>
-    </Stack>
-  );
-};
-
-// ============================================================================
-// 3. MAIN QUERY BUILDER (The Engine Wrapper)
-// ============================================================================
-export default function QueryBuilder({ url, setUrl, allColumns, getColumns, pullTable, isLoading, isReadyRef }) {
-  // STYLING
-  const dataExplorerRecipe = useSlotRecipe({ key: "dataExplorer" });
-  const dataExplorerStyle = dataExplorerRecipe();
-
-  // SELECT DROPDOWN MENU
-  const { contains } = useFilter({ sensitivity: "base" })
-
-  const { collection, filter } = useListCollection({
-    initialItems: tables,
-    filter: contains,
-  })
-
-  // STATE MANAGEMENT
-  const copiedFilter = useRef(null);
-  const [value, setValue] = useState([]);
-  const addNewGroup = useDataFilterStore(state => state.addNewGroup);
-  const filterGroups = useDataFilterStore(state => state.filterGroups);
-
-  // FUNCTIONS
-  const handleAddBundle = () => {
-    setUrl(prev => ({
-      ...prev,
-      bundles: [
-        ...prev.bundles,
-        {
-          id: crypto.randomUUID(),
-          filters: [{
-            id: crypto.randomUUID(),
-            column: null,
-            type: null,
-            operator: null,
-            value: null
-          }],
-        },
-      ],
-    }));
-
-    // adding zustand state management as a test here
-    addNewGroup();
-  };
-
-  console.log("filter groups", filterGroups);
-
-  return (
-    <Flex direction="column" gap={2} w="100%" bg="transparent" css={dataExplorerStyle.query_builder}>
-      {/* Top Controls: Source & Execute */}
-      <Flex gap={2} align="flex-end">
-          <Combobox.Root
-            collection={collection}
-            onInputValueChange={(e) => filter(e.inputValue)}
-            value={value}
-            onValueChange={(e) => {
-              setValue(e.value);
-              const selectedView = e.value;
-              setUrl(prev => ({ ...prev, source: selectedView }));
-              // need to get all columns as default in param building
-              const endpoint = "/api/v3/view_dash_event_search_columns";
-              getColumns(endpoint);
-            }}
-            width="320px"
-          >
-            <Combobox.Label>Select Table</Combobox.Label>
-            <Combobox.Control>
-              <Combobox.Input placeholder="Type to search" />
-              <Combobox.IndicatorGroup>
-                <Combobox.ClearTrigger />
-                <Combobox.Trigger />
-              </Combobox.IndicatorGroup>
-            </Combobox.Control>
-            <Portal>
-              <Combobox.Positioner>
-                <Combobox.Content>
-                  <Combobox.Empty>No items found</Combobox.Empty>
-                  {collection.items.map((item) => (
-                    <Combobox.Item item={item} key={item.value}>
-                      {item.label}
-                      <Combobox.ItemIndicator />
-                    </Combobox.Item>
-                  ))}
-                </Combobox.Content>
-              </Combobox.Positioner>
-            </Portal>
-          </Combobox.Root>
-        {/*</Field.Root>*/}
-
-        <Button
-          loading={isLoading}
-          onClick={() => {
-            isReadyRef.current = true;
-            pullTable();
-          }}
-        >
-          Execute Search
-        </Button>
-      </Flex>
-
-      {/* Filter Builder Engine */}
-      {url.source && allColumns?.types && (
-        <Stack w="100%" gap="2">
-          <Text fontSize="sm" fontWeight="bold" color="text">Filters</Text>
-
-          <Box w="100%" maxH="400px" overflow="auto">
-            <Stack w="100%" gap="2" pr="4">
-              {url.bundles.map((bundle) => (
-                <FilterBundle key={bundle.id} bundle={bundle} columns={allColumns.types} url={url} setUrl={setUrl} copiedFilter={copiedFilter} />
-              ))}
-              <Button onClick={handleAddBundle} variant="outline" borderColor="widgetBadgeBg" color="text" _hover={{ bg: "widgetBadgeBg" }}>
-                New Filter Group <Plus />
-              </Button>
-            </Stack>
-          </Box>
-        </Stack>
-      )}
-    </Flex>
-  );
-}
-
-// LIST OF TABLES USER CAN EXPLORE
-const tables = [
-  { label: "Events Table", value: "ViewDashEventSearch" },
-]

client/src/store/authStore.js

@@ -46,11 +46,6 @@ 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,

client/src/store/useDataFilterStore.jsx

@@ -1,141 +0,0 @@
-import { create } from 'zustand';
-
-const useDataFilterStore = create((set, get) => ({
-  filterGroups: [],
-  copiedFilter: {},
-
-  addNewGroup: () => {
-    const newGroup = {
-      id: crypto.randomUUID(),
-      filters: []
-    }
-
-    set((state) => ({filterGroups: [...state.filterGroups, newGroup]}));
-  },
-
-  removeGroup: (groupID) => set((state) => ({
-      filterGroups: state.filterGroups.filter((group) => group.id !== groupID),
-  })),
-
-  addFilter: (groupID) => set((state) => ({
-    filterGroups: state.filterGroups.map(filterGroup =>
-      filterGroup.id === groupID ?
-        {
-          ...filterGroup,
-          filters: [
-            ...filterGroup.filters,
-            {
-              id: crypto.randomUUID(),
-              col: null,
-              type: null,
-              op: null,
-              value: null
-            }
-          ]
-        }
-      : filterGroup
-    )
-  })),
-
-  updateFilterColumn: (groupID, filterID, col, type, op, value) => set((state) => ({
-    filterGroups: state.filterGroups.map((group) =>
-      groupID === group.id ?
-        {
-          ...group,
-          filters: group.filters.map(filter =>
-            filterID === filter.id ?
-              {
-                ...filter,
-                col: col,
-                type: type,
-                op: op,
-                value: value
-              }
-            : filter
-          )
-        }
-      : group
-    ),
-  })),
-
-  updateFilterOps: (groupID, filterID, op) => set((state) => ({
-    filterGroups: state.filterGroups.map((group) =>
-      groupID === group.id ?
-        {
-          ...group,
-          filters: group.filters.map(filter =>
-            filterID === filter.id ?
-              {
-                ...filter,
-                op: op,
-              }
-            : filter
-          )
-        }
-        : group
-      ),
-  })),
-
-  updateFilterValue: (groupID, filterID, value, dateType = undefined) => set((state) => ({
-    filterGroups: state.filterGroups.map((group) =>
-      groupID === group.id ?
-      {
-        ...group,
-        filters: group.filters.map(filter =>
-          filterID === filter.id ?
-            {
-              ...filter,
-              value: (dateType === "s") ? {...filter.value, start: value} : (dateType === "e") ? {...filter.value, end: value } : value
-            }
-          : filter
-        )
-      }
-      : group
-    ),
-  })),
-
-  removeFilter: (groupID, filterID) => set((state) => ({
-    filterGroups: state.filterGroups.map((group) =>
-      group.id === groupID ?
-        {
-          ...group,
-          filters: group.filters.filter((f) => f.id !== filterID)
-        }
-      : group
-    ),
-  })),
-
-  copyFilter: (filter) => set({
-    copiedFilter: {
-      col: filter.col,
-      type: filter.type,
-      op: filter.op,
-      value: filter.value
-    }
-  }),
-
-  pasteFilter: (groupID, filterID) => set((state) => ({
-    filterGroups: state.filterGroups.map((group) =>
-      groupID === group.id ?
-        {
-          ...group,
-          filters: group.filters.map(filter =>
-            filterID === filter.id ?
-              {
-                ...filter,
-                col: state.copiedFilter.col,
-                type: state.copiedFilter.type,
-                op: state.copiedFilter.op,
-                value: state.copiedFilter.value
-              }
-            : filter
-          )
-        }
-      : group
-  )})),
-
-
-}));
-
-export default useDataFilterStore;
-

client/src/theme.js

@@ -23,6 +23,7 @@ const headerRecipe = defineSlotRecipe({
       color: "text",
       width: "100%",
       height: "100%",
+      display: "flex",
       flexDirection: "row",
       justifyContent: "space-between",
       alignItems: "center",
@@ -31,13 +32,8 @@ const headerRecipe = defineSlotRecipe({
     search_bar: {
       width: "100%",
       // input element in search bar component
-      "& svg": {
-        w: "20px",
-        h: "20px",
-      },
       "& input": {
         width: "410px",
-        borderRadius: "full",
       },
     },
     user_info: {
@@ -122,11 +118,11 @@ const sidebarRecipe = defineSlotRecipe({
       _hover: {
         bg: "rgba(255, 255, 255, 0.2)",
         color: "{text}",
-        // "& svg": {
-        //   strokeWidth: "3",
-        // },
+        "& svg": {
+          strokeWidth: "3",
+        },
         "& span": {
-          fontWeight: "800",
+          fontWeight: "700",
         },
       },
 
@@ -258,7 +254,7 @@ const dashboardRecipe = defineRecipe({
     // selects the third div in the grid layout (the canvas)
     "& > div:nth-of-type(3)": {
       width: "100%",
-      overflowY: "auto",
+      overflow: "auto",
     }
   }
 });
@@ -357,9 +353,9 @@ const glassPopoverRecipe = defineSlotRecipe({
       borderRadius: "1rem",
       p: 3,
       boxShadow: "lg",
-      bg: {base: "rgb(246 246 246 / 0.85)", _dark: "rgb(51 53 64 / 0.80)"},
-      backdropFilter: "blur(8px)",
-      WebkitBackdropFilter: "blur(8px)",
+      bg: {base: "rgb(246 246 246 / 0.95)", _dark: "#353742"},
+      backdropFilter: "blur(15px)",
+      WebkitBackdropFilter: "blur(15px)",
     },
     date: {
       color: "text",
@@ -537,7 +533,7 @@ const glassDialogRecipe = defineSlotRecipe({
   },
 });
 
-// 8. Pill/Glass Expanding Tab Button
+// 6. Pill/Glass Expanding Tab Button
 const glassTabRecipe = defineRecipe({
   base: {
     display: "flex",
@@ -599,37 +595,6 @@ const glassTabRecipe = defineRecipe({
   },
 });
 
-// 9. Data Explorer Page
-const dataExplorerRecipe = defineSlotRecipe({
-  slots: ["root", "query_builder", "data_table"],
-  base: {
-    root: {
-
-    },
-    query_builder: {
-      // "& button": {
-      //   borderRadius: "lg",
-      //
-      //   color: "white",
-      //   bg: "#B63B1F",
-      //   _hover: {
-      //     color: "text",
-      //     bg: "#B63B1F32"
-      //   },
-      //
-      //   _dark: {
-      //     bg: "#b55038",
-      //     color: "text",
-      //     _hover: {
-      //       bg: "#503D40"
-      //     }
-      //   }
-      // },
-
-    }
-  }
-});
-
 /* ==========================================================================
    RAW WIDGET COLORS (For Canvas/Plotly libraries that reject CSS variables)
    ========================================================================== */
@@ -711,10 +676,10 @@ const config = defineConfig({
         gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "#333540"}},
 
         // WIDGET SPECIFIC VALUES
-        widgetItemBg: { value: { base: "rgb(115 132 166 / 0.17)", _dark: "rgb(51 53 64 / 0.8)" } },
-        widgetItemExpandedBg: { value: { base: "rgb(184 197 220 / 0.17)", _dark: "rgb(59 61 73 / 0.8)" } },
-        widgetBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(75 77 90 / 0.8)" } },
-        widgetInnerBadgeBg: { value: { base: "rgb(224 226 232 / 0.6)", _dark: "rgb(100 103 119 / 0.8)" } },
+        widgetItemBg: { value: { base: "rgb(115 132 166 / 0.17)", _dark: "rgb(51 53 64)" } },
+        widgetItemExpandedBg: { value: { base: "rgb(184 197 220 / 0.17)", _dark: "rgb(59 61 73)" } },
+        widgetBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(75 77 90)" } },
+        widgetInnerBadgeBg: { value: { base: "rgb(224 226 232)", _dark: "rgb(100 103 119)" } },
         widgetTextMuted: { value: { base: "#262627", _dark: "rgb(236 236 236 / 0.9)" } },
 
         // ALERT COLORS
@@ -740,7 +705,6 @@ const config = defineConfig({
       widget: widgetRecipe,
       glassPopover: glassPopoverRecipe,
       glassDialog: glassDialogRecipe,
-      dataExplorer: dataExplorerRecipe,
     },
   },
 });