fetch and animate new pca data

Author: ballPointPenguin

client-participation-alpha/src/api/pca.ts

@@ -64,6 +64,7 @@ export interface PCAData {
   repness?: {
     [groupId: string]: RepnessItem[];
   };
+  mathTick?: number;
 }
 
 export async function fetchPCAData(conversationId: string): Promise<PCAData> {

client-participation-alpha/src/components/PCAVisualization.tsx

@@ -56,7 +56,7 @@ function CheckCircleIcon({ fill, size = 22 }: { fill: string; size?: number }) {
       style={{ display: 'block' }}
     >
       <path
-        d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"
+        d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"
         fill={fill}
       />
     </svg>
@@ -417,18 +417,27 @@ export default function PCAVisualization({ data, comments, conversationId }: PCA
             const groupKey = `group-${groupId}`;
 
             if (hull) {
+              const pathString = `M${hull.map((point: [number, number]) => point.join(',')).join('L')}Z`;
               return (
                 <motion.path
                   key={`${groupKey}-hull`}
-                  d={`M${hull.map((point: [number, number]) => point.join(',')).join('L')}Z`}
+                  d={pathString}
                   fill={color}
                   fillOpacity={isSelected ? 0.35 : 0.2}
                   stroke={color}
                   strokeWidth={isSelected ? 3 : 2}
                   strokeOpacity={isSelected ? 1 : 1}
-                  initial={{ pathLength: 0, opacity: 0 }}
-                  animate={{ pathLength: 1, opacity: 1 }}
-                  transition={{ duration: 1, delay: i * 0.2 }}
+                  initial={false}
+                  animate={{ 
+                    d: pathString,
+                    fill: color,
+                    fillOpacity: isSelected ? 0.35 : 0.2,
+                    strokeWidth: isSelected ? 3 : 2,
+                  }}
+                  transition={{ 
+                    duration: 0.8, 
+                    ease: "easeInOut" 
+                  }}
                 />
               );
             }
@@ -444,9 +453,16 @@ export default function PCAVisualization({ data, comments, conversationId }: PCA
                   stroke={color}
                   strokeWidth={isSelected ? 3 : 2}
                   strokeLinecap="round"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ duration: 1, delay: i * 0.2 }}
+                  initial={false}
+                  animate={{ 
+                    x1: points[0][0],
+                    y1: points[0][1],
+                    x2: points[1][0],
+                    y2: points[1][1],
+                    stroke: color,
+                    strokeWidth: isSelected ? 3 : 2,
+                  }}
+                  transition={{ duration: 0.8, ease: "easeInOut" }}
                 />
               );
             }
@@ -479,32 +495,59 @@ export default function PCAVisualization({ data, comments, conversationId }: PCA
                   <feColorMatrix type="saturate" values="0" />
                 </filter>
               </defs>
-              <circle
+              <motion.circle
                 cx={userPosition.x}
                 cy={userPosition.y}
                 r={13}
                 fill="none"
                 stroke="#03a9f4"
                 strokeWidth={4}
+                initial={false}
+                animate={{ 
+                  cx: userPosition.x, 
+                  cy: userPosition.y 
+                }}
+                transition={{ 
+                  duration: 0.8, 
+                  ease: "easeInOut" 
+                }}
               />
-              <circle
+              <motion.circle
                 cx={userPosition.x}
                 cy={userPosition.y}
                 r={11}
                 fill="url(#user-profile-pattern)"
                 filter="url(#grayscale-filter)"
+                initial={false}
+                animate={{ 
+                  cx: userPosition.x, 
+                  cy: userPosition.y 
+                }}
+                transition={{ 
+                  duration: 0.8, 
+                  ease: "easeInOut" 
+                }}
               />
-              <text
+              <motion.text
                 x={userPosition.x}
                 y={userPosition.y - 18}
                 textAnchor="middle"
                 fontSize={12}
                 fontWeight="bold"
                 fill="#000"
                 style={{ textShadow: '0 1px 2px rgba(255,255,255,0.8)' }}
+                initial={false}
+                animate={{ 
+                  x: userPosition.x, 
+                  y: userPosition.y - 18 
+                }}
+                transition={{ 
+                  duration: 0.8, 
+                  ease: "easeInOut" 
+                }}
               >
                 You
-              </text>
+              </motion.text>
             </Group>
           )}
 

client-participation-alpha/src/components/Survey.jsx

@@ -20,6 +20,11 @@ const submitVoteAndGetNextCommentAPI = async (vote, conversation_id, high_priori
       vote: vote.vote,
     });
 
+    // Dispatch event to notify visualization to update
+    window.dispatchEvent(new CustomEvent('polis-vote-submitted', {
+      detail: { conversation_id }
+    }));
+    
     return resp;
   } catch (error) {
     // The net module already handles JWT extraction and storage

client-participation-alpha/src/components/SurveyForm.jsx

@@ -14,6 +14,11 @@ const submitPerspectiveAPI = async (text, conversation_id) => {
       vote: -1,
     });
 
+    // Dispatch event to notify visualization to update
+    window.dispatchEvent(new CustomEvent('polis-comment-submitted', {
+      detail: { conversation_id }
+    }));
+    
     // The net module automatically handles JWT extraction and storage
     return resp;
   } catch (error) {
@@ -23,7 +28,6 @@ const submitPerspectiveAPI = async (text, conversation_id) => {
   }
 };
 
-
 export default function SurveyForm({ s, conversation_id, requiresInviteCode = false }) {
   const [text, setText] = useState('');
   const [feedback, setFeedback] = useState('');

client-participation-alpha/src/components/VisualizationContainer.tsx

@@ -1,8 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import PCAVisualization from './PCAVisualization';
 import { fetchPCAData, type PCAData } from '../api/pca';
 import { fetchComments, type Comment } from '../api/comments';
 
+const REFRESH_DELAY_MS = 500;
+
 interface VisualizationContainerProps {
   conversation_id: string;
 }
@@ -12,35 +14,81 @@ export default function VisualizationContainer({ conversation_id }: Visualizatio
   const [comments, setComments] = useState<Comment[] | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const currentMathTick = useRef<number | undefined>(undefined);
+  const refetchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  useEffect(() => {
+  const loadData = useCallback(async (showLoadingState = true) => {
     if (!conversation_id) {
       setLoading(false);
       setError('No conversation ID provided');
       return;
     }
 
-    async function loadData() {
-      try {
+    try {
+      if (showLoadingState) {
         setLoading(true);
-        setError(null);
-        // Fetch both PCA data and comments in parallel
-        const [pcaDataResult, commentsResult] = await Promise.all([
-          fetchPCAData(conversation_id),
-          fetchComments(conversation_id),
-        ]);
-        setPcaData(pcaDataResult);
-        setComments(commentsResult);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to fetch data');
-        console.error('Error fetching data:', err);
-      } finally {
+      }
+      setError(null);
+      
+      // Fetch both PCA data and comments in parallel
+      const [pcaDataResult, commentsResult] = await Promise.all([
+        fetchPCAData(conversation_id),
+        fetchComments(conversation_id),
+      ]);
+      
+      // Check if mathTick has changed (skip update if unchanged)
+      if (pcaDataResult.mathTick !== undefined && 
+          pcaDataResult.mathTick === currentMathTick.current) {
+        // Math hasn't been recalculated yet, data is the same
+        return;
+      }
+      
+      currentMathTick.current = pcaDataResult.mathTick;
+      setPcaData(pcaDataResult);
+      setComments(commentsResult);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch data');
+      console.error('Error fetching data:', err);
+    } finally {
+      if (showLoadingState) {
         setLoading(false);
       }
     }
+  }, [conversation_id]);
 
+  // Initial load
+  useEffect(() => {
     loadData();
-  }, [conversation_id]);
+  }, [loadData]);
+
+  // Listen for vote/comment submissions and refetch after delay
+  useEffect(() => {
+    const handleDataChange = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (detail && detail.conversation_id === conversation_id) {
+        // Clear any pending refetch
+        if (refetchTimeoutRef.current) {
+          clearTimeout(refetchTimeoutRef.current);
+        }
+        
+        // Schedule refetch after 1 second delay
+        refetchTimeoutRef.current = setTimeout(() => {
+          loadData(false); // Don't show loading state for updates
+        }, REFRESH_DELAY_MS);
+      }
+    };
+
+    window.addEventListener('polis-vote-submitted', handleDataChange);
+    window.addEventListener('polis-comment-submitted', handleDataChange);
+    
+    return () => {
+      window.removeEventListener('polis-vote-submitted', handleDataChange);
+      window.removeEventListener('polis-comment-submitted', handleDataChange);
+      if (refetchTimeoutRef.current) {
+        clearTimeout(refetchTimeoutRef.current);
+      }
+    };
+  }, [conversation_id, loadData]);
 
   if (loading) {
     return (

client-participation-alpha/src/lib/hull.ts

@@ -460,6 +460,8 @@ class PointGrid {
                 }
             }
         }
+        
+        return points
     }
 
     /**
@@ -626,6 +628,11 @@ function _bBoxAround(edge: [Point, Point]): Bbox {
 }
 
 function _midPoint(edge: [Point, Point], innerPoints: Point[], convex: Point[]): Point | null {
+    // Safety check: ensure innerPoints is defined and is an array
+    if (!innerPoints || !Array.isArray(innerPoints) || innerPoints.length === 0) {
+        return null
+    }
+
     let point: Point | null = null
     let angle1Cos = MAX_CONCAVE_ANGLE_COS
     let angle2Cos = MAX_CONCAVE_ANGLE_COS