✨ feat(frontend): add visual indicators feature for employee acquaintances at tables on the Seat Allocation Page

- Color-code chairs: green for no acquaintances, red for known colleagues at table
- Display arrows pointing to acquainted chairs when chair is clicked

Author: ge85riz

frontend/src/components/canvas/elements/Chair.tsx

@@ -14,8 +14,9 @@ export class Chair implements ElementProperties {
   attachedTo: string | undefined;
   draggable: boolean;
   offset: { dx: number; dy: number };
-  assigneeProfile?: Profile;
-  belongsToVisitor?: boolean;
+  assigneeProfile?: Profile; // we don't persist this data to DB
+  belongsToVisitor?: boolean; // we don't persist this data to DB
+  acquaintedProfileIds?: UUID[]; // we don't persist this data to DB
 
   constructor(stageCenter: { x: number, y: number }) {
     this.id = uuidv4();
@@ -29,6 +30,7 @@ export class Chair implements ElementProperties {
     this.offset = { dx: 0, dy: 0 };
     this.assigneeProfile = undefined;
     this.belongsToVisitor = false;
+    this.acquaintedProfileIds = undefined;
   }
 }
 
@@ -39,7 +41,11 @@ export function ChairRender(chair: Chair) {
       onMouseOut={handleMouseOut}>
       <Circle
         radius={chair.radius || 10}
-        fill={chair.color || "#cccccc"}
+        fill={
+          !chair.acquaintedProfileIds ? (chair.color ?? "#cccccc") :
+            chair.acquaintedProfileIds.length > 0 ? "red" :
+              "rgba(73,154,33,0.79)"
+        }
         perfectDrawEnabled={false}
       />
       {chair.assigneeProfile && (

frontend/src/components/canvas/elements/NeighbourArrows.tsx

@@ -30,11 +30,14 @@ function NeighbourArrows({
 
   const arrows = chairs
     .filter((chair) => chair.id !== selectedChair.id)
-    .filter((chair) => {
+    .filter((neighborChair) => {
       if (algorithmType === "table") {
-        return selectedChair.attachedTo === chair.attachedTo;
+        if (selectedChair.acquaintedProfileIds && neighborChair.assigneeProfile) {
+          return selectedChair.acquaintedProfileIds.includes(neighborChair.assigneeProfile.id);
+        }
+        return false;
       } else if (algorithmType === "distance") {
-        return areNeighbours(selectedChair, chair);
+        return areNeighbours(selectedChair, neighborChair);
       } else {
         return false;
       }

frontend/src/pages/Events/EventSeatAllocation.tsx

@@ -6,7 +6,7 @@ import useApiService from "services/apiService";
 import { CanvasProvider, useCanvas } from "components/canvas/contexts/CanvasContext";
 import KonvaCanvas, { type KonvaCanvasProps } from "components/canvas/KonvaCanvas";
 import { getFullName, type Profile } from "types/employee";
-import { type AlgorithmType, type ElementProperties } from "components/canvas/utils/constants.tsx";
+import { type AlgorithmType, type ElementProperties, type UUID } from "components/canvas/utils/constants.tsx";
 import type { Chair } from "components/canvas/elements/Chair.tsx";
 import type { Table } from "components/canvas/elements/Table.tsx";
 
@@ -49,7 +49,12 @@ const SeatAllocationContent = ({
   const [allocated, setAllocated] = useState<SeatAllocationResult[]>([]);
   const [unallocatedSearch, setUnallocatedSearch] = useState("");
   const [allocatedSearch, setAllocatedSearch] = useState("");
-  const { getSeatAllocations, updateSeatAllocation, generateSeatAllocations } = useApiService();
+  const {
+    getSeatAllocations,
+    updateSeatAllocation,
+    generateSeatAllocations,
+    findEmployeesSittingWithAcquaintances,
+  } = useApiService();
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [emptyChairCount, setEmptyChairCount] = useState(0);
   const [constraintInputValues, setConstraintInputValues] = useState({
@@ -151,12 +156,14 @@ const SeatAllocationContent = ({
         if (e.type === "chair" && chairProfileMap.has(e.id)) {
           (e as Chair).assigneeProfile = { ...chairProfileMap.get(e.id)! };
           (e as Chair).belongsToVisitor = chairProfileMap.get(e.id)!.isVisitor;
+          (e as Chair).acquaintedProfileIds = undefined;
           if (!(e as Chair).attachedTo) {
             toast.error("Some participants are assigned to chairs that are not linked to a table. It might cause inconsistencies. Please be aware.");
           }
         } else if (e.type === "chair") {
           (e as Chair).assigneeProfile = undefined;
           (e as Chair).belongsToVisitor = undefined;
+          (e as Chair).acquaintedProfileIds = undefined;
           emptyChairCount++;
         }
       });
@@ -234,6 +241,33 @@ const SeatAllocationContent = ({
             title="Find and go to the first chair element on the canvas">
             <FullscreenExitOutlined />
           </Button>
+          <Button
+            className="ms-3 mt-2"
+            type="primary"
+            title={`Green Chairs: every employee at the table is new \nRed Chairs: know at least one employee`}
+            onClick={async () => {
+              try {
+                setLoading(true);
+                const employeeIdsSittingWithTheirAcquaintances: Record<UUID, UUID[]> | null = await findEmployeesSittingWithAcquaintances(eventId);
+                if (employeeIdsSittingWithTheirAcquaintances) {
+                  state.elements.forEach(element => {
+                    if (element.type === "chair") {
+                      const chair = element as Chair;
+                      // we have to clear chair's state
+                      chair.acquaintedProfileIds = undefined;
+                      if (chair.assigneeProfile && !chair.belongsToVisitor) {
+                        const employeeId = chair.assigneeProfile!.id;
+                        chair.acquaintedProfileIds = employeeIdsSittingWithTheirAcquaintances[employeeId] ?? [];
+                      }
+                    }
+                  });
+                }
+              } finally {
+                setLoading(false);
+              }
+            }}>
+            Show Acquainted Employees
+          </Button>
         </div>
 
         <Space>

frontend/src/services/apiService.ts

@@ -13,6 +13,7 @@ import { useAuth } from "../contexts/AuthContext.tsx";
 import type { AppState } from "components/canvas/reducers/CanvasReducer.tsx";
 import { Chair } from "components/canvas/elements/Chair.tsx";
 import { useNavigate } from "react-router-dom";
+import type { UUID } from "components/canvas/utils/constants.tsx";
 
 export const BASE_URL = import.meta.env.VITE_API_ORIGIN;
 
@@ -313,6 +314,7 @@ export default function useApiService() {
           if (el.type === "chair") {
             delete (el as Chair).assigneeProfile;
             delete (el as Chair).belongsToVisitor;
+            delete (el as Chair).acquaintedProfileIds;
           }
         });
         const response = await request(`/schematics/${id}`, {
@@ -573,6 +575,15 @@ export default function useApiService() {
     }
   }, [request]);
 
+  const findEmployeesSittingWithAcquaintances = useCallback(async (eventId: string) => {
+    try {
+      return await request<Record<UUID, UUID[]>>(`/seat-allocation/${eventId}/findAcquaintances`);
+    } catch (err) {
+      toast.error("Fetching employee acquaintances for this event failed");
+      return null;
+    }
+  }, [request]);
+
   return {
     request,
     logoutRequest,
@@ -603,6 +614,7 @@ export default function useApiService() {
     updateParticipant,
     deleteParticipation,
     generateSeatAllocations,
+    findEmployeesSittingWithAcquaintances,
     getSeatAllocations,
     updateSeatAllocation,
   };