Dashboard UX re-design

front/package.json

@@ -11,7 +11,6 @@
     "jotai": "^2.20.0",
     "react-big-calendar": "^1.20.0",
     "react-csv": "^2.2.2",
-    "react-icons": "^5.6.0",
     "react-joyride": "^3.1.0",
     "react-table": "^7.8.0",
     "regenerator-runtime": "^0.14.1",

package.json

@@ -51,6 +51,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.62.0",
+    "react-icons": "^5.6.0",
     "react-router-dom": "^6.30.4",
     "zod": "^4.4.3"
   },

shared-components/statviz/components/filter/DemographicsFilters.tsx

@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  VStack,
+  Button,
+  SimpleGrid,
+  Box,
+  CheckboxGroup,
+  Checkbox,
+  HStack,
+  FormLabel,
+} from "@chakra-ui/react";
+import TabbedTagDropdown from "./TabbedTagDropdown";
+import type { ITagOption, DemographicsAppliedFilters } from "../../utils/dashboardFilters";
+import { AGE_RANGES } from "../../utils/dashboardFilters";
+
+const HUMAN_GENDERS = ["Male", "Female", "Diverse"] as const;
+
+interface DemographicsFiltersProps {
+  isOpen: boolean;
+  onClose: () => void;
+  appliedFilters: DemographicsAppliedFilters;
+  tags: ITagOption[];
+  onApply: (filters: DemographicsAppliedFilters) => void;
+}
+
+export function DemographicsFilters({
+  isOpen,
+  onClose,
+  appliedFilters,
+  tags,
+  onApply,
+}: DemographicsFiltersProps) {
+  const [staged, setStaged] = useState<DemographicsAppliedFilters>(appliedFilters);
+
+  useEffect(() => {
+    if (isOpen) {
+      setStaged(appliedFilters);
+    }
+  }, [isOpen, appliedFilters]);
+
+  const handleApply = useCallback(() => {
+    onApply(staged);
+    onClose();
+  }, [staged, onApply, onClose]);
+
+  const handleClear = useCallback(() => {
+    setStaged({ ageRanges: [], genders: [], includedTags: [], excludedTags: [] });
+  }, []);
+
+  return (
+    <VStack spacing={4} align="stretch">
+      <SimpleGrid columns={1} spacing={4}>
+        <Box>
+          <FormLabel mb={2}>Age</FormLabel>
+          <CheckboxGroup
+            value={staged.ageRanges}
+            onChange={(values) => setStaged((prev) => ({ ...prev, ageRanges: values as string[] }))}
+          >
+            <HStack spacing={4} flexWrap="wrap">
+              {AGE_RANGES.map((range) => (
+                <Checkbox key={range.label} value={range.label}>
+                  {range.label}
+                </Checkbox>
+              ))}
+            </HStack>
+          </CheckboxGroup>
+        </Box>
+        <Box>
+          <FormLabel mb={2}>Gender</FormLabel>
+          <CheckboxGroup
+            value={staged.genders}
+            onChange={(values) => setStaged((prev) => ({ ...prev, genders: values as string[] }))}
+          >
+            <HStack spacing={4}>
+              {HUMAN_GENDERS.map((gender) => (
+                <Checkbox key={gender} value={gender}>
+                  {gender}
+                </Checkbox>
+              ))}
+            </HStack>
+          </CheckboxGroup>
+        </Box>
+        <Box>
+          <FormLabel mb={2}>Tags</FormLabel>
+          <TabbedTagDropdown
+            availableTags={tags}
+            includedTags={staged.includedTags}
+            excludedTags={staged.excludedTags}
+            onIncludedChange={(newTags) =>
+              setStaged((prev) => ({ ...prev, includedTags: newTags }))
+            }
+            onExcludedChange={(newTags) =>
+              setStaged((prev) => ({ ...prev, excludedTags: newTags }))
+            }
+            onClearAll={() =>
+              setStaged((prev) => ({ ...prev, includedTags: [], excludedTags: [] }))
+            }
+            placeholder="Select tags"
+          />
+        </Box>
+      </SimpleGrid>
+      <Box pt={4}>
+        <VStack spacing={3}>
+          <Button
+            colorScheme="blue"
+            onClick={handleApply}
+            width="100%"
+            data-testid="demographics-filter-apply"
+          >
+            Apply
+          </Button>
+          <Button
+            variant="outline"
+            onClick={handleClear}
+            width="100%"
+            data-testid="demographics-filter-clear"
+          >
+            Clear filters
+          </Button>
+        </VStack>
+      </Box>
+    </VStack>
+  );
+}

shared-components/statviz/components/filter/FilterPanel.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  IconButton,
+  useBreakpointValue,
+} from "@chakra-ui/react";
+import { MdFilterList } from "react-icons/md";
+
+interface FilterPanelProps {
+  label?: string;
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  children: ReactNode;
+}
+
+export function FilterPanel({
+  label = "Filters",
+  isOpen,
+  onOpen,
+  onClose,
+  children,
+}: FilterPanelProps) {
+  const placement = useBreakpointValue({ base: "left" as const, md: "right" as const }) ?? "right";
+  const size = useBreakpointValue({ base: undefined, md: "md" });
+  const maxW = useBreakpointValue({ base: "90vw", md: undefined });
+
+  return (
+    <>
+      <IconButton
+        icon={<MdFilterList color={"black"} size={25} />}
+        aria-label="Open ${label}"
+        size="md"
+        data-testid="${label.replaceAll(' ', '').lower()}-drawer-button"
+        onClick={onOpen}
+      />
+      <Drawer isOpen={isOpen} onClose={onClose} placement={placement} size={size}>
+        <DrawerOverlay />
+        <DrawerContent maxW={maxW}>
+          <DrawerHeader>{label}</DrawerHeader>
+          <DrawerCloseButton />
+          <DrawerBody>{children}</DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}