Add ALL campus filter, multiple campus selection, person links in new tabs, and reposition growing arrow

Author: storyworks

src/App.tsx

@@ -7,21 +7,21 @@ import TeamNodeDrawer from "./components/TeamNodeDrawer.tsx";
 import { PathwayProvider } from "./contexts/PathwayProvider.tsx";
 
 function App() {
-  const [selectedCampusId, setSelectedCampusId] = useState<string | null>("3");
+  const [selectedCampusIds, setSelectedCampusIds] = useState<string[]>(["3"]);
 
   return (
     <PathwayProvider>
       <ReactFlowProvider>
         <div className="h-screen w-screen flex flex-col overflow-hidden">
           {/* Campus Filter Buttons */}
           <CampusFilterButtons
-            onCampusFilter={setSelectedCampusId}
-            selectedCampusId={selectedCampusId}
+            onCampusFilter={setSelectedCampusIds}
+            selectedCampusIds={selectedCampusIds}
           />
 
           {/* React Flow Container */}
           <div className="flex-1 w-full overflow-hidden">
-            <PeopleFlow campusFilter={selectedCampusId} />
+            <PeopleFlow campusFilter={selectedCampusIds} />
           </div>
 
           {/* Team Node Drawer */}

src/components/CampusFilterButtons.tsx

@@ -1,29 +1,65 @@
 interface CampusFilterButtonsProps {
-  onCampusFilter: (campusId: string | null) => void;
-  selectedCampusId?: string | null;
+  onCampusFilter: (campusIds: string[]) => void;
+  selectedCampusIds: string[];
 }
 
 const CampusFilterButtons = ({
   onCampusFilter,
-  selectedCampusId,
+  selectedCampusIds,
 }: CampusFilterButtonsProps) => {
   const campuses = [
     { id: "3", label: "Central" },
     { id: "2", label: "North" },
     { id: "4", label: "Unichurch" },
   ];
 
+  const handleCampusToggle = (campusId: string) => {
+    if (selectedCampusIds.includes(campusId)) {
+      // Remove campus from selection
+      onCampusFilter(selectedCampusIds.filter((id) => id !== campusId));
+    } else {
+      // Add campus to selection
+      onCampusFilter([...selectedCampusIds, campusId]);
+    }
+  };
+
+  const handleAllToggle = () => {
+    if (selectedCampusIds.length === campuses.length) {
+      // If all are selected, deselect all
+      onCampusFilter([]);
+    } else {
+      // Select all campuses
+      onCampusFilter(campuses.map((campus) => campus.id));
+    }
+  };
+
+  const allSelected = selectedCampusIds.length === campuses.length;
+
   return (
     <div className="absolute z-10 bottom-2 left-2 sm:bottom-4 sm:left-4 flex flex-row gap-1 sm:gap-2">
+      {/* ALL Button */}
+      <button
+        type="button"
+        onClick={handleAllToggle}
+        className={`font-bold py-1.5 px-3 sm:py-2 sm:px-4 rounded-md shadow-lg text-sm sm:text-base border-0 focus:outline-none ${
+          allSelected
+            ? "bg-green-500 text-white"
+            : "bg-gray-300 hover:bg-gray-400 text-white cursor-pointer"
+        }`}
+      >
+        ALL
+      </button>
+
+      {/* Individual Campus Buttons */}
       {campuses.map((campus) => (
         <button
           key={campus.id}
           type="button"
-          onClick={() =>
-            { onCampusFilter(selectedCampusId === campus.id ? null : campus.id); }
-          }
-          className={`font-bold py-1 px-2 sm:py-1.5 sm:px-3 rounded-md shadow-lg text-xs sm:text-sm border-0 focus:outline-none ${
-            selectedCampusId === campus.id
+          onClick={() => {
+            handleCampusToggle(campus.id);
+          }}
+          className={`font-bold py-1.5 px-3 sm:py-2 sm:px-4 rounded-md shadow-lg text-sm sm:text-base border-0 focus:outline-none ${
+            selectedCampusIds.includes(campus.id)
               ? "bg-blue-500 text-white"
               : "bg-gray-300 hover:bg-gray-400 text-white cursor-pointer"
           }`}

src/components/PeopleFlow.tsx

@@ -23,7 +23,7 @@ const nodeTypes = {
 };
 
 interface PeopleFlowProps {
-  campusFilter?: string | null;
+  campusFilter?: string[];
 }
 
 const PeopleFlow = ({ campusFilter }: PeopleFlowProps) => {

src/components/PeopleList/PeopleListItem/PeopleListItem.tsx

@@ -16,7 +16,7 @@ function PeopleListItem({ person, survey, label }: PeopleListItemProps) {
       <a
         className="flex items-center gap-2 grow cursor-pointer"
         href={`https://rock.ev.church/Person/${person.id.toString()}`}
-        target="_parent"
+        target="_blank"
         rel="noopener noreferrer"
       >
         <img
@@ -47,7 +47,7 @@ function PeopleListItem({ person, survey, label }: PeopleListItemProps) {
           {hasDoneSurvey ? (
             <a
               href={`https://rock.ev.church/Workflow/${survey.formId}`}
-              target="_parent"
+              target="_blank"
               rel="noopener noreferrer"
               className={`text-xs p-1 font-semibold cursor-pointer transition-colors flex items-center justify-center w-6 rounded ${
                 person.isServing

src/hooks/usePeopleFlowData.ts

@@ -41,7 +41,7 @@ const messageEventDataSchema = z.object({
   data: z.unknown(),
 });
 
-export function usePeopleFlowData(campusFilter?: string | null): {
+export function usePeopleFlowData(campusFilter?: string[]): {
   data: PeopleFlowData;
   isLoading: boolean;
   error: Error | undefined;
@@ -54,14 +54,14 @@ export function usePeopleFlowData(campusFilter?: string | null): {
   });
   const filteredData = useMemo(() => {
     let filteredConnectionStatuses = connectionStatuses;
-    if (campusFilter != null) {
+    if (campusFilter && campusFilter.length > 0) {
       filteredConnectionStatuses = Object.fromEntries(
         Object.entries(connectionStatuses).map(([key, status]) => [
           key,
           {
             ...status,
-            people: status.people.filter(
-              (person) => person.primaryCampusId?.toString() === campusFilter
+            people: status.people.filter((person) =>
+              campusFilter.includes(person.primaryCampusId?.toString() || "")
             ),
           },
         ])

src/utils/layoutUtils.ts

@@ -80,7 +80,7 @@ export const getCustomLayout = (nodes: Node<NodeData>[], edges: Edge[]) => {
     {
       id: "churchLife",
       type: "staticNode",
-      position: { x: 1650, y: 400 },
+      position: { x: 1600, y: 400 },
       draggable: false,
       data: {
         label: "Church Life",
@@ -91,7 +91,7 @@ export const getCustomLayout = (nodes: Node<NodeData>[], edges: Edge[]) => {
     {
       id: "growth",
       type: "staticNode",
-      position: { x: 2150, y: 400 },
+      position: { x: 2000, y: 400 },
       draggable: false,
       data: {
         label: "Growth",
@@ -102,7 +102,7 @@ export const getCustomLayout = (nodes: Node<NodeData>[], edges: Edge[]) => {
     {
       id: "serving",
       type: "staticNode",
-      position: { x: 2550, y: 400 },
+      position: { x: 2400, y: 400 },
       draggable: false,
       data: {
         label: "Serving",
@@ -113,7 +113,7 @@ export const getCustomLayout = (nodes: Node<NodeData>[], edges: Edge[]) => {
     {
       id: "sending",
       type: "staticNode",
-      position: { x: 2900, y: 400 },
+      position: { x: 2800, y: 400 },
       draggable: false,
       data: {
         label: "Sending",
@@ -207,19 +207,19 @@ export const getCustomLayout = (nodes: Node<NodeData>[], edges: Edge[]) => {
     {
       id: "custom-position-integration-churchLife",
       type: "staticNode",
-      position: { x: 1550, y: 400 },
+      position: { x: 1500, y: 400 },
       draggable: false,
       data: {
         label: "",
         description: "",
         isStatic: true,
       },
     },
-    // Custom position node for the midpoint of Church Life to Growth edge
+    // Custom position node for the midpoint of Growth to Serving edge
     {
       id: "custom-position-churchLife-growth",
       type: "staticNode",
-      position: { x: 2000, y: 400 },
+      position: { x: 2300, y: 400 },
       draggable: false,
       data: {
         label: "",
@@ -501,7 +501,7 @@ export const getCustomLayout = (nodes: Node<NodeData>[], edges: Edge[]) => {
         color: "#e5e7eb",
       },
     },
-    // Edge from Growing to the edge between Church Life and Growth
+    // Edge from Growing to the midpoint of Growth to Serving edge
     {
       id: "edge-growing-to-churchLife-growth",
       source: "1229",
@@ -545,12 +545,12 @@ export const getCustomLayout = (nodes: Node<NodeData>[], edges: Edge[]) => {
       case "Attending":
         return {
           ...node,
-          position: { x: 1350, y: 600 },
+          position: { x: 1300, y: 600 },
         };
       case "Growing":
         return {
           ...node,
-          position: { x: 1850, y: 600 },
+          position: { x: 2110, y: 600 },
         };
       case "Investigating":
         return {