des trucs

million/analyze/filter/participants.py

@@ -1,9 +1,10 @@
 
 
-from typing import List
+from enum import Enum
+from typing import List, Optional
 
 from pydantic import BaseModel
-from million.model.filter.MessageFilter import MessageFilter
+from million.model.filter.MessageFilter import MessageCountTrait, MessageFilter
 from million.model.filter.ParticipantFilter import OrderDirection, ParticipantFilter
 from million.model.message import Message
 from million.model.participant import Participant
@@ -15,22 +16,35 @@ class ParticipantCount(BaseModel):
     count: int
 
 
-def order_count(participants: List[Participant], messages: List[Message], criterias: MessageFilter = None, direction: OrderDirection = OrderDirection.desc) -> ParticipantCount:
-    result = [
-        ParticipantCount(
-            participant=participant,
-            count=len(
-                message_filter(
-                    messages,
-                    criterias=MessageFilter(**{
-                        **(criterias.model_dump() if criterias else dict()),
-                        "sender_name": participant.name
-                    })
-                )
+def order_count(
+        participants: List[Participant],
+        messages: List[Message],
+        criterias: ParticipantFilter = None,
+        direction: OrderDirection = OrderDirection.desc,
+        on_trait: Optional[MessageCountTrait] = None
+) -> ParticipantCount:
+    result = []
+    for participant in participants:
+        sent_messages = message_filter(
+
+            messages,
+            criterias=MessageFilter(**{
+                **(criterias.model_dump() if criterias else dict()),
+                "sender_name": participant.name
+            },
+            )
+        )
+        if criterias.on_message_trait == MessageCountTrait.total_reactions:
+            count = sum([len(message.reactions if message.reactions else []) for message in sent_messages])
+        else:
+            count = len(sent_messages)
+
+        result.append(
+            ParticipantCount(
+                participant=participant,
+                count=count
             ))
 
-        for participant in participants
-    ]
     result.sort(key=lambda p: p.count, reverse=True)
     return [result for result in result]
 

million/model/filter/MessageFilter.py

@@ -3,6 +3,10 @@ from enum import Enum
 from pydantic import BaseModel
 
 
+class MessageCountTrait(str, Enum):
+    total_reactions = "total_reactions"
+
+
 class MessageOrder(str, Enum):
     date = "date"
     reactions = "reactions"

million/model/filter/ParticipantFilter.py

@@ -2,7 +2,7 @@ from datetime import datetime
 from pydantic import BaseModel
 from enum import Enum
 
-from million.model.filter.MessageFilter import MessageFilter
+from million.model.filter.MessageFilter import MessageCountTrait, MessageFilter
 
 
 class OrderBy(str, Enum):
@@ -15,7 +15,7 @@ class OrderDirection(str, Enum):
 
 
 class ParticipantFilter(MessageFilter):
-
+    on_message_trait: MessageCountTrait | None = None
     order_by: OrderBy | None = OrderBy.count
     order_dir: OrderDirection | None = OrderDirection.desc
 

vite-wrapped/deno.json

@@ -22,6 +22,7 @@
         "@types/react-dom": "npm:@types/react-dom@^18.3.1",
         "@vitejs/plugin-react-swc": "npm:@vitejs/plugin-react-swc@^3.7.1",
         "framer-motion": "npm:framer-motion@^11.15.0",
+        "motion": "npm:motion@^12.0.6",
         "react": "npm:react@^18.3.1",
         "react-dom": "npm:react-dom@^18.3.1",
         "vite": "npm:vite@^6.0.1"

vite-wrapped/deno.lock

@@ -7,6 +7,7 @@
     "npm:@types/react@^18.3.12": "18.3.18",
     "npm:@vitejs/plugin-react-swc@^3.7.1": "3.7.2_vite@6.0.6",
     "npm:framer-motion@^11.15.0": "11.15.0_react@18.3.1_react-dom@18.3.1__react@18.3.1",
+    "npm:motion@^12.0.6": "12.0.6_react@18.3.1_react-dom@18.3.1__react@18.3.1",
     "npm:react-dom@^18.3.1": "18.3.1_react@18.3.1",
     "npm:react@^18.3.1": "18.3.1",
     "npm:vite@*": "6.0.6",
@@ -275,8 +276,18 @@
     "framer-motion@11.15.0_react@18.3.1_react-dom@18.3.1__react@18.3.1": {
       "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==",
       "dependencies": [
-        "motion-dom",
-        "motion-utils",
+        "motion-dom@11.14.3",
+        "motion-utils@11.14.3",
+        "react",
+        "react-dom",
+        "tslib"
+      ]
+    },
+    "framer-motion@12.0.6_react@18.3.1_react-dom@18.3.1__react@18.3.1": {
+      "integrity": "sha512-LmrXbXF6Vv5WCNmb+O/zn891VPZrH7XbsZgRLBROw6kFiP+iTK49gxTv2Ur3F0Tbw6+sy9BVtSqnWfMUpH+6nA==",
+      "dependencies": [
+        "motion-dom@12.0.0",
+        "motion-utils@12.0.0",
         "react",
         "react-dom",
         "tslib"
@@ -297,9 +308,27 @@
     "motion-dom@11.14.3": {
       "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA=="
     },
+    "motion-dom@12.0.0": {
+      "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
+      "dependencies": [
+        "motion-utils@12.0.0"
+      ]
+    },
     "motion-utils@11.14.3": {
       "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ=="
     },
+    "motion-utils@12.0.0": {
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA=="
+    },
+    "motion@12.0.6_react@18.3.1_react-dom@18.3.1__react@18.3.1": {
+      "integrity": "sha512-AzCEO0+//mPlcGiL9JaVwjddHY1cbbnvz5upHL0toqQwsPCs+hiKJ0XG5jfG0XwDtBbiSXdEqW/UTmGLwkVQ6A==",
+      "dependencies": [
+        "framer-motion@12.0.6_react@18.3.1_react-dom@18.3.1__react@18.3.1",
+        "react",
+        "react-dom",
+        "tslib"
+      ]
+    },
     "nanoid@3.3.8": {
       "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w=="
     },
@@ -386,6 +415,7 @@
       "npm:@types/react@^18.3.12",
       "npm:@vitejs/plugin-react-swc@^3.7.1",
       "npm:framer-motion@^11.15.0",
+      "npm:motion@^12.0.6",
       "npm:react-dom@^18.3.1",
       "npm:react@^18.3.1",
       "npm:vite@^6.0.1"

vite-wrapped/src/App.tsx

@@ -10,6 +10,7 @@ import {
 import { useAnimationFrame } from "framer-motion";
 import Welcome from "./steps/welcome.tsx";
 import GlobalTop from "./steps/GlobalTop.tsx";
+import MostLikedMessage from "./steps/MostLikedMessage.tsx";
 
 const steps = [
   {
@@ -22,7 +23,7 @@ const steps = [
   },
   {
     title: "Step 3",
-    content: "Content of step 3",
+    content: MostLikedMessage,
   },
 ];
 
@@ -92,6 +93,7 @@ function App() {
           <h1>Step selector (current = {currentStep})</h1>
           <button onClick={() => setCurrentStep(0)}>Step 1</button>
           <button onClick={() => setCurrentStep(1)}>Step 2</button>
+          <button onClick={() => setCurrentStep(2)}>Step 2</button>
         </div>
       </div>
     </>

vite-wrapped/src/data/most_reacted_contributors.ts

@@ -0,0 +1,654 @@
+type ParticipantStats = {
+  participant: {
+    name: string;
+  };
+  count: number;
+};
+
+const MostReactedParticipants: ParticipantStats[] = [
+  {
+    participant: {
+      name: "Elias Cheddar",
+    },
+    count: 52,
+  },
+  {
+    participant: {
+      name: "Maël Delanoë",
+    },
+    count: 42,
+  },
+  {
+    participant: {
+      name: "Amalia Arnaud",
+    },
+    count: 37,
+  },
+  {
+    participant: {
+      name: "Maël Drarig",
+    },
+    count: 35,
+  },
+  {
+    participant: {
+      name: "Victor Mélou",
+    },
+    count: 34,
+  },
+  {
+    participant: {
+      name: "Clervie Guillemot",
+    },
+    count: 18,
+  },
+  {
+    participant: {
+      name: "Léonard D'Aqr",
+    },
+    count: 15,
+  },
+  {
+    participant: {
+      name: "Jules Chanoine",
+    },
+    count: 12,
+  },
+  {
+    participant: {
+      name: "Thomas Guerit",
+    },
+    count: 7,
+  },
+  {
+    participant: {
+      name: "Ambre Salomé Ltr",
+    },
+    count: 7,
+  },
+  {
+    participant: {
+      name: "Djem Dean",
+    },
+    count: 6,
+  },
+  {
+    participant: {
+      name: "Alicia Charron",
+    },
+    count: 6,
+  },
+  {
+    participant: {
+      name: "Pierre Brlt",
+    },
+    count: 5,
+  },
+  {
+    participant: {
+      name: "Arthur Salaün",
+    },
+    count: 4,
+  },
+  {
+    participant: {
+      name: "Augustin Lhotelier Ivey",
+    },
+    count: 4,
+  },
+  {
+    participant: {
+      name: "Lucas Despres",
+    },
+    count: 4,
+  },
+  {
+    participant: {
+      name: "Léa Rivron",
+    },
+    count: 3,
+  },
+  {
+    participant: {
+      name: "Serban Suciu",
+    },
+    count: 3,
+  },
+  {
+    participant: {
+      name: "Hugo Mhl",
+    },
+    count: 3,
+  },
+  {
+    participant: {
+      name: "Mael Pl",
+    },
+    count: 3,
+  },
+  {
+    participant: {
+      name: "Lucien Lhotelier",
+    },
+    count: 3,
+  },
+  {
+    participant: {
+      name: "Antoine Bertho",
+    },
+    count: 2,
+  },
+  {
+    participant: {
+      name: "Ema Karena",
+    },
+    count: 2,
+  },
+  {
+    participant: {
+      name: "Luca D'aquaro",
+    },
+    count: 2,
+  },
+  {
+    participant: {
+      name: "Mikaël Royet",
+    },
+    count: 2,
+  },
+  {
+    participant: {
+      name: "Lea-maria Laurent",
+    },
+    count: 2,
+  },
+  {
+    participant: {
+      name: "Valentin Moisan",
+    },
+    count: 2,
+  },
+  {
+    participant: {
+      name: "Astrid Batt",
+    },
+    count: 2,
+  },
+  {
+    participant: {
+      name: "Noémie Le Maréchal",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "Vincent Dammann",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "François Ycq",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "Suniva Tessier",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "Laetitia Doudet",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "Eliott Richard",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "Sami Zaiter",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "Pauk Brunstein-Compard",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "Theophile Pere",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "Anne-Lise Le Guyadec",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "Vivien Motte",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "Gaëtan Martin",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "Victor Dibou Ivey",
+    },
+    count: 1,
+  },
+  {
+    participant: {
+      name: "Tom Dardilhac",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Léonard Hamroun II",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Pierre Cosson",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Alice Ruellan",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Bout Antho",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Citlali Souloumiac",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Martin Moré",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Matteo Söze",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Alice Guillemot",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Miriam Lang",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Jules Borderie",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Antoine Carrere",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Gireg Bouillon",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Antoine Neveu",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Soizic Thiébaud",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Baptiste Lhotelier LeMée Jeannès",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Pierre Houdant",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Brieuc Pidoux",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Alice Delanoe",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Bilel Choutri",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Mathys Allain",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Lucas Roulin",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Félix Fléau",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Tom Cousin",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Axel Polano",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Victor Zwahlen",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Glenn Cadoret",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Sébastien Palud",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Maï Thrvl",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Marie Delanoe",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Léo-Maxio Pereira",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Alice Bayle",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Pauline Lailvaux",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "William Milcent",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Oscar Gerard",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Thaïs Moncalvo",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Gabriel Cmmlt",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Hana Amzai",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Léa Vo",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Alexis Moreau",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Camille Bouvais",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Kevin Monfort",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Gabriel Reboux",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Pierre EM",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Thomas Bergamin",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Juliette Lbb",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Mancino Mancini",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Claire Jouannigot",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Jérémie Arnaud",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "No Lcmt",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Eilaroc Nitpor",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Tiphaine Yaddaden",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Thys Mah",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Lou Chamnn",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Julien Chanteloup",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Lise Mammeri Bachatène",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Manon Hrln",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Charles Darras",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Hugo Massot",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Jules de Senneville",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Lorea Etchegoin Lasnier",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Louison l'Espadon",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Adèle Bras",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Théo Phile",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Emile Cste",
+    },
+    count: 0,
+  },
+  {
+    participant: {
+      name: "Léo Carême",
+    },
+    count: 0,
+  },
+].slice(0, 10);
+
+export default MostReactedParticipants;
+export type { ParticipantStats };

vite-wrapped/src/data/most_reacted_messages.ts

@@ -0,0 +1,473 @@
+type Reaction = {
+  reaction: string;
+  actor: string;
+};
+
+type Message = {
+  sender_name: string;
+  timestamp_ms: number;
+  content: string;
+  sticker: any;
+  share: any;
+  photos: any;
+  videos: any;
+  gifs: any;
+  audio_files: any;
+  call_duration: any;
+  reactions: Reaction[];
+  is_unsent: any;
+  is_geoblocked_for_viewer: boolean;
+};
+
+const MostReactedMessages = [
+  {
+    sender_name: "Maël Drarig",
+    timestamp_ms: 1728318687795,
+    content: "94000",
+    sticker: null,
+    share: null,
+    photos: null,
+    videos: null,
+    gifs: null,
+    audio_files: null,
+    call_duration: null,
+    reactions: [
+      {
+        reaction: "❤",
+        actor: "Mael Pl",
+      },
+      {
+        reaction: "😮",
+        actor: "Mikaël Royet",
+      },
+      {
+        reaction: "👍",
+        actor: "Valentin Moisan",
+      },
+      {
+        reaction: "❤",
+        actor: "Ema Karena",
+      },
+      {
+        reaction: "❤",
+        actor: "Maël Delanoë",
+      },
+      {
+        reaction: "❤",
+        actor: "Alicia Charron",
+      },
+      {
+        reaction: "❤",
+        actor: "Amalia Arnaud",
+      },
+      {
+        reaction: "😮",
+        actor: "Bout Antho",
+      },
+      {
+        reaction: "❤",
+        actor: "Antoine Ltllc",
+      },
+      {
+        reaction: "❤",
+        actor: "Victor Mélou",
+      },
+    ],
+    is_unsent: null,
+    is_geoblocked_for_viewer: false,
+  },
+  {
+    sender_name: "Elias Cheddar",
+    timestamp_ms: 1722342573496,
+    content:
+      "Salut les comptos 📈\nBienvenue à tou(te)s les nouveaux collaborateurices 🎉 Gros gros merci à toutes les personnes qui recrutent 🤝! Je vois que vous tapez dans le mille 🎯 et que vous nous apportez des éléments qui ont l’air 👏 au 👏 top 👏\nIci c’est pas compliqué, on compte un max 🧮et on kiffe 👈😎👉\nça fait longtemps qu’on a pas fait le point avec nos data analysts ! \nOn commence par les sujets qui fâchent 😱 \n➡️ Les trous 🕳 🫢\nNos algorithmes d’assurance qualité détectent 462 trous, pour un total de 4363 valeurs oubliées 🙊 🙊\nC’est pas grave on rattrapera ça en temps voulu, la route est encore longue 🧘\n➡️Une petite analyse de nos meilleurs compteurs ça vous dit ? \nLe trio de tête bouge pas, toujours solide 🏋️‍♀️ sur les appuis : \n🏆 Maël Delanoë: 9348\n🥈 Victor Mélou: 8588\n🥉 Augustin Lhotelier Ivey: 4981\n🚨🚨🚨Maël chaparde la première place à Victor 😳😳\nMention spéciale au reste du top 🐥🐥 : \n3: Augustin Lhotelier Ivey: 4981\n4: Elias Cheddar: 4664\n5: Jules Chanoine: 4023\n6: Gabriel Cmmlt: 3482\n7: William Btl: 3056\n8: Clervie Guillemot: 2937\n9: Arthur Salaün: 2932\n10: Maï Thrvl: 2914\n11: Lucas Roulin: 2807\n12: Pauk Brunstein-Compard: 2549\n13: Louis Chanoine: 2486\n14: Léo-Maxio Pereira: 2469\n15: Sami Zaiter: 2349\n16: Gabriel Reboux: 1551\n17: Thomas Guerit: 1213\n18: Juliette Lbb: 1143\n19: Hugo Mhl: 1013\n20: Laetitia Doudet: 951\nOn remarque vos efforts 👷👷et on kiffe 🥰 🥰\nGros poutous, mettez de la crème solaire 😘",
+    sticker: null,
+    share: null,
+    photos: null,
+    videos: null,
+    gifs: null,
+    audio_files: null,
+    call_duration: null,
+    reactions: [
+      {
+        reaction: "❤",
+        actor: "Mikaël Royet",
+      },
+      {
+        reaction: "❤",
+        actor: "Laetitia Doudet",
+      },
+      {
+        reaction: "❤",
+        actor: "Clervie Guillemot",
+      },
+      {
+        reaction: "❤",
+        actor: "Emile Cste",
+      },
+      {
+        reaction: "❤",
+        actor: "Thomas Guerit",
+      },
+      {
+        reaction: "❤",
+        actor: "Augustin Lhotelier Ivey",
+      },
+      {
+        reaction: "❤",
+        actor: "Hugo Mhl",
+      },
+      {
+        reaction: "❤",
+        actor: "Bout Antho",
+      },
+      {
+        reaction: "❤",
+        actor: "Victor Mélou",
+      },
+    ],
+    is_unsent: null,
+    is_geoblocked_for_viewer: false,
+  },
+  {
+    sender_name: "Amalia Arnaud",
+    timestamp_ms: 1728915547165,
+    content: "95000",
+    sticker: null,
+    share: null,
+    photos: null,
+    videos: null,
+    gifs: null,
+    audio_files: null,
+    call_duration: null,
+    reactions: [
+      {
+        reaction: "😮",
+        actor: "Mikaël Royet",
+      },
+      {
+        reaction: "❤",
+        actor: "Ema Karena",
+      },
+      {
+        reaction: "😮",
+        actor: "Maël Delanoë",
+      },
+      {
+        reaction: "❤",
+        actor: "Hugo Mhl",
+      },
+      {
+        reaction: "😮",
+        actor: "Bout Antho",
+      },
+      {
+        reaction: "❤",
+        actor: "Antoine Ltllc",
+      },
+      {
+        reaction: "❤",
+        actor: "Victor Mélou",
+      },
+      {
+        reaction: "❤",
+        actor: "Maël Drarig",
+      },
+    ],
+    is_unsent: null,
+    is_geoblocked_for_viewer: false,
+  },
+  {
+    sender_name: "Antoine Ltllc",
+    timestamp_ms: 1725724976744,
+    content: "90000",
+    sticker: null,
+    share: null,
+    photos: null,
+    videos: null,
+    gifs: null,
+    audio_files: null,
+    call_duration: null,
+    reactions: [
+      {
+        reaction: "❤",
+        actor: "Jules Chanoine",
+      },
+      {
+        reaction: "❤",
+        actor: "Ema Karena",
+      },
+      {
+        reaction: "❤",
+        actor: "Alicia Charron",
+      },
+      {
+        reaction: "❤",
+        actor: "Hugo Mhl",
+      },
+      {
+        reaction: "❤",
+        actor: "Theophile Pere",
+      },
+      {
+        reaction: "❤",
+        actor: "Maël Drarig",
+      },
+      {
+        reaction: "❤",
+        actor: "Lucien Lhotelier",
+      },
+    ],
+    is_unsent: null,
+    is_geoblocked_for_viewer: false,
+  },
+  {
+    sender_name: "Elias Cheddar",
+    timestamp_ms: 1730924456650,
+    content: "Pas mal celui là en vrai",
+    sticker: null,
+    share: null,
+    photos: null,
+    videos: null,
+    gifs: null,
+    audio_files: null,
+    call_duration: null,
+    reactions: [
+      {
+        reaction: "😆",
+        actor: "Mikaël Royet",
+      },
+      {
+        reaction: "❤",
+        actor: "Sami Zaiter",
+      },
+      {
+        reaction: "😆",
+        actor: "Ema Karena",
+      },
+      {
+        reaction: "❤",
+        actor: "Alicia Charron",
+      },
+      {
+        reaction: "❤",
+        actor: "Amalia Arnaud",
+      },
+      {
+        reaction: "❤",
+        actor: "Arthur Salaün",
+      },
+      {
+        reaction: "❤",
+        actor: "Djem Dean",
+      },
+    ],
+    is_unsent: null,
+    is_geoblocked_for_viewer: false,
+  },
+  {
+    sender_name: "Clervie Guillemot",
+    timestamp_ms: 1708536294155,
+    content:
+      "Punaiz c’est les premiers comptages de 2024 bonne année les potes",
+    sticker: null,
+    share: null,
+    photos: null,
+    videos: null,
+    gifs: null,
+    audio_files: null,
+    call_duration: null,
+    reactions: [
+      {
+        reaction: "❤",
+        actor: "Vivien Motte",
+      },
+      {
+        reaction: "🥰",
+        actor: "Pauk Brunstein-Compard",
+      },
+      {
+        reaction: "❤",
+        actor: "Augustin Lhotelier Ivey",
+      },
+      {
+        reaction: "🥳",
+        actor: "Elias Cheddar",
+      },
+      {
+        reaction: "🎊",
+        actor: "Victor Mélou",
+      },
+      {
+        reaction: "❤",
+        actor: "Jules Chanoine",
+      },
+    ],
+    is_unsent: null,
+    is_geoblocked_for_viewer: false,
+  },
+  {
+    sender_name: "Elias Cheddar",
+    timestamp_ms: 1708910034369,
+    content:
+      "Bonjour à tous ! \nDans une démarche d'amélioration continue 📈 du comptage que nous réalisons tous ensemble main dans la main 👫👫, j'ai entrepris d'analyser les comptages réalisés jusqu'ici afin d'identifier des oublis 🙀\nJe ne vous laisse pas mariner 👨‍🍳 trop longtemps, le total s'élève à 3381 😳😳. Ça représente 4.5% des 74127 que nous avons atteint aujourd'hui.\n4.5% d'erreur ❌? D'inattention 🙈? Peut-être en partie, mais je pense qu'il s'agit surtout de 4.5% d'envie d'avancer 🏃, d'atteindre nos objectifs, d'ivresse de la passion 🤩 !\nQui serions nous pour juger une telle qui, grisée par la sensation de voir les chiffres 🔢 défiler, ne s'est pas vue sauter 5 valeurs, ou encore untel qui, peu formé à l'exercice🤸‍♂, confond un 6 et un 8 🔍? \n\nBon j'ai la flemme de continuer ce discours, toujours est-il que les données sont disponibles dans ce google docs : https://docs.google.com/spreadsheets/d/1peCrGqlTw2XaJYHjCvFc7XI_DKfrCP2fMxYPY8Z7Ty8/edit?usp=sharing",
+    sticker: null,
+    share: {
+      link: "https://docs.google.com/spreadsheets/d/1peCrGqlTw2XaJYHjCvFc7XI_DKfrCP2fMxYPY8Z7Ty8/edit?usp=sharing",
+      share_text:
+        "holes début,fin,taille,responsable,date1,date2,justification,résolu 299,301,2,Victor Mélou,15/06/2020 18:23:31,15/06/2020 19:09:59,Je crois qu'il avait envoyé l'affiche du film 300,ok 306,310,4,Victor Mélou,15/06/2020 19:10:13,15/06/2020 19:11:41 473,475,2,Elias Cheddar,15/06/2020 19:49:42,15/0...",
+    },
+    photos: null,
+    videos: null,
+    gifs: null,
+    audio_files: null,
+    call_duration: null,
+    reactions: [
+      {
+        reaction: "❤",
+        actor: "Mikaël Royet",
+      },
+      {
+        reaction: "❤",
+        actor: "Maï Thrvl",
+      },
+      {
+        reaction: "😮",
+        actor: "Clervie Guillemot",
+      },
+      {
+        reaction: "😆",
+        actor: "Gabriel Reboux",
+      },
+      {
+        reaction: "😆",
+        actor: "Victor Mélou",
+      },
+      {
+        reaction: "😆",
+        actor: "Jules Chanoine",
+      },
+    ],
+    is_unsent: null,
+    is_geoblocked_for_viewer: false,
+  },
+  {
+    sender_name: "Léonard D'Aqr",
+    timestamp_ms: 1722434371354,
+    content: "80000",
+    sticker: null,
+    share: null,
+    photos: null,
+    videos: null,
+    gifs: null,
+    audio_files: null,
+    call_duration: null,
+    reactions: [
+      {
+        reaction: "❤",
+        actor: "Mikaël Royet",
+      },
+      {
+        reaction: "❤",
+        actor: "Jules Borderie",
+      },
+      {
+        reaction: "😮",
+        actor: "Maël Delanoë",
+      },
+      {
+        reaction: "❤",
+        actor: "Elias Cheddar",
+      },
+      {
+        reaction: "❤",
+        actor: "Victor Mélou",
+      },
+      {
+        reaction: "❤",
+        actor: "Jules Chanoine",
+      },
+    ],
+    is_unsent: null,
+    is_geoblocked_for_viewer: false,
+  },
+  {
+    sender_name: "Antoine Ltllc",
+    timestamp_ms: 1726075192889,
+    content: "92000",
+    sticker: null,
+    share: null,
+    photos: null,
+    videos: null,
+    gifs: null,
+    audio_files: null,
+    call_duration: null,
+    reactions: [
+      {
+        reaction: "😮",
+        actor: "Mikaël Royet",
+      },
+      {
+        reaction: "❤",
+        actor: "Ema Karena",
+      },
+      {
+        reaction: "👍",
+        actor: "Maël Delanoë",
+      },
+      {
+        reaction: "❤",
+        actor: "Alicia Charron",
+      },
+      {
+        reaction: "❤",
+        actor: "Victor Mélou",
+      },
+      {
+        reaction: "❤",
+        actor: "Maël Drarig",
+      },
+    ],
+    is_unsent: null,
+    is_geoblocked_for_viewer: false,
+  },
+  {
+    sender_name: "Maël Drarig",
+    timestamp_ms: 1709119466755,
+    content: "Vous pouvez compter sur moi et moi je compterai pour vous",
+    sticker: null,
+    share: null,
+    photos: null,
+    videos: null,
+    gifs: null,
+    audio_files: null,
+    call_duration: null,
+    reactions: [
+      {
+        reaction: "😆",
+        actor: "Mikaël Royet",
+      },
+      {
+        reaction: "😮",
+        actor: "Clervie Guillemot",
+      },
+      {
+        reaction: "📠",
+        actor: "Maël Delanoë",
+      },
+      {
+        reaction: "😮",
+        actor: "Elias Cheddar",
+      },
+      {
+        reaction: "🤯",
+        actor: "Victor Mélou",
+      },
+    ],
+    is_unsent: null,
+    is_geoblocked_for_viewer: false,
+  },
+];
+
+export default MostReactedMessages;
+export type { Message };

vite-wrapped/src/steps/MostLikedMessage.tsx

@@ -0,0 +1,181 @@
+import { motion, Variants } from "framer-motion";
+import { StepProps } from "./stepProps.ts";
+import React, { useEffect, useRef, useState } from "react";
+import MostReactedParticipants from "../data/most_reacted_contributors.ts";
+import ContributorsContributionsWithReactions from "../data/contributors_contributions_with_reaction.ts";
+import { Message } from "../data/most_reacted_messages.ts";
+
+type VariantProps = {
+  delay: number;
+};
+
+type RunningAnimations = {
+  [key: string]: number;
+};
+
+type ReactionCount = { reaction: string; count: number };
+
+const getParticipantReactionCounts = (participant: string): [ReactionCount] => {
+  return ContributorsContributionsWithReactions[participant]
+    .filter((contribution: Message) => contribution.sender_name === participant)
+    .reduce((acc: [ReactionCount], contribution: Message) => {
+      contribution.reactions.forEach((reaction) => {
+        const existingReaction: undefined | ReactionCount = acc.find(
+          (existingReaction: ReactionCount) =>
+            existingReaction.reaction === reaction.reaction
+        );
+        if (existingReaction) {
+          existingReaction.count++;
+        } else {
+          acc.push({ reaction: reaction.reaction, count: 1 });
+        }
+      });
+      return acc;
+    }, [])
+    .sort((a, b) => b.count - a.count);
+};
+
+const getReactionString = (counts: [ReactionCount]) => {
+    return counts.map((reactionCount) => {
+        return `${reactionCount.reaction.repeat(reactionCount.count)}`;
+    });
+}
+
+function usePrevious(value: any) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+const TextAreaVariants: Variants = {
+  "1": (props: VariantProps) => ({
+    rotateY: 1,
+    z: 0.2,
+    transition: {
+      duration: 1.5,
+      delay: 1 + props.delay,
+    },
+  }),
+};
+
+const TextAreaStyle = {
+  rotateY: 90,
+};
+
+function MostLikedMessage({ progress }: StepProps) {
+  const [currentVariant, setCurrentVariant] = useState("1");
+  const [runningAnimations, setRunningAnimations] = useState<RunningAnimations>(
+    {}
+  );
+  const previousRunningAnimations = usePrevious(runningAnimations);
+
+  useEffect(() => {
+    for (const variant in runningAnimations) {
+      if (
+        runningAnimations[variant] === 0 &&
+        previousRunningAnimations[variant] !== 0
+      ) {
+        if (variant === "1") {
+          setCurrentVariant("1");
+        } else if (variant === "2") {
+          setCurrentVariant("1");
+        }
+      }
+    }
+  }, [runningAnimations]);
+
+  const animationComplete = (variant: string) => {
+    console.log("animationComplete", variant);
+    decrementAnimation(variant);
+  };
+
+  const animationStarted = (variant: string) => {
+    console.log("animationStarted", variant);
+    incrementAnimation(variant);
+  };
+
+  const incrementAnimation = (animation: string) => {
+    setRunningAnimations((prev: RunningAnimations) => {
+      const newRunningAnimations = { ...prev };
+      if (!newRunningAnimations[animation]) {
+        newRunningAnimations[animation] = 1;
+      } else {
+        newRunningAnimations[animation]++;
+      }
+      return newRunningAnimations;
+    });
+  };
+
+  const decrementAnimation = (animation: string) => {
+    setRunningAnimations((prev: RunningAnimations) => {
+      const newRunningAnimations = { ...prev };
+      if (newRunningAnimations[animation] > 0) {
+        newRunningAnimations[animation]--;
+      }
+      return newRunningAnimations;
+    });
+  };
+
+  // A text area that starts facing back, not visible, and
+  // then rotates to face the user, making it visible
+  return (
+    <div
+      style={{
+        position: "absolute",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        height: "100%",
+        backgroundColor: "rgba(0,0,0,0.5)",
+        color: "white",
+      }}
+    >
+      <motion.div
+        initial={TextAreaStyle}
+        variants={TextAreaVariants}
+        animate={currentVariant}
+        custom={{ delay: 0 }}
+        onAnimationStart={() => animationStarted(currentVariant)}
+        onAnimationComplete={() => animationComplete(currentVariant)}
+      >
+        <table>
+          {MostReactedParticipants.slice(0, 6).map((participant, index) => (
+            <tr
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "start",
+                justifyContent: "start",
+                padding: "1rem",
+                width: "30em"
+              }}
+              key={index}
+            >
+              <td style={{ paddingRight: "1em", verticalAlign: "top" }}>{participant.participant.name}</td>
+              <td
+                style={{
+                  display: "flex",
+                  gridTemplateColumns: "repeat(2, 1fr)",
+                  flexDirection: "row",
+                  flexWrap: "wrap",
+                  marginLeft: "1rem",
+                  verticalAlign: "top",
+                  gap: "0.5em",
+                  //width: "10%",
+                  wordBreak: "break-all",
+                }}
+              >
+                {getReactionString(getParticipantReactionCounts(participant.participant.name))}
+              </td>
+            </tr>
+          ))}
+        </table>
+      </motion.div>
+    </div>
+  );
+}
+
+export default MostLikedMessage;