compañeros en clubes y query de nenas vs nenes

ui/src/components/CompasZurdos.tsx

@@ -21,7 +21,7 @@ const CompasZurdos = () => {
 
   return (
     <>
-      <h2>Cantidad de compañeros mas altos que jugador</h2>
+      <h2>Compañeros de un jugador que son mas altos que él (de cualquier club en cualquier edicion)</h2>
       <Autocomplete
         disablePortal
         id="combo-box-demo"

ui/src/components/ElMasPopu.tsx

+import React, { useState } from "react";
+import { useReadCypher, useLazyReadCypher } from "use-neo4j";
+import { Autocomplete, TextField, Button, Stack } from "@mui/material";
+
+const ElMasPopu = () => {
+  const query = `MATCH (p:Player {gender: "Male"}) RETURN p`;
+  const queryCompanerosPorJugador = `MATCH (p1:Player {long_name: $playerName})-[:FIFA_17|:FIFA_18|:FIFA_19|:FIFA_20|:FIFA_21|:FIFA_22]->(e:Statistics)-[:PLAY_FOR_CLUB]->(team:Clubs)<-[:PLAY_FOR_CLUB]-(e2:Statistics)<-[:FIFA_17|:FIFA_18|:FIFA_19|:FIFA_20|:FIFA_21|:FIFA_22]-(p2:Player) WHERE p1 <> p2 WITH p1, team, COLLECT(DISTINCT p2) as other_players RETURN p1.short_name AS player, SIZE(other_players) as total_companeros, team.club_name AS team_name, SIZE(other_players) as total_companeros_en_club`;
+
+  const [player, setPlayer] = useState("");
+  const [companerosQuery, companerosQueryState] = useLazyReadCypher(queryCompanerosPorJugador);
+
+  const { loading, records, result } = useReadCypher(query);
+  if (loading) return <div>Loading...</div>;
+  const players = records?.map((record) => record.get("p"));
+
+  const handleSearch = () => {
+    companerosQuery({ playerName: player });
+  };
+
+  return (
+    <>
+      <h2>Jugador con más compañeros de equipo</h2>
+      <Autocomplete
+        disablePortal
+        id="combo-box-demo"
+        options={players?.map((player) => player.properties.long_name) || []}
+        sx={{ width: "100%" }}
+        renderInput={(params) => <TextField {...params} label="Jugador" />}
+        onChange={(e, value) => setPlayer(value)}
+      />
+      <Button
+        sx={{ marginTop: "1rem" }}
+        variant="contained"
+        onClick={handleSearch}
+        disabled={!player || companerosQueryState.loading}
+      >
+        Buscar
+      </Button>
+      {companerosQueryState.result && companerosQueryState.result.records.map((record, index) => {
+        const team_name = record.get("team_name");
+        const total_companeros_en_club = record.get("total_companeros_en_club").toNumber();
+        return (
+          <Stack flexDirection="row" key={team_name + index}>
+            <Stack>
+              <p>Total de compañeros en {team_name}: {total_companeros_en_club}</p>
+            </Stack>
+          </Stack>
+        );
+    })}
+
+
+    </>
+  );
+};
+
+export { ElMasPopu };

ui/src/components/NenasVsNenes.tsx

+// MATCH (p:Player)-[:FIFA_16|FIFA_17|FIFA_18|FIFA_19|FIFA_20|FIFA_21|FIFA_22]->(e:Statistics)
+// WHERE p.gender IN ['Male', 'Female']
+// WITH p.gender AS Gender, AVG(e.overall) AS AverageRating, MAX(e.overall) as MaxRating
+// MATCH (p:Player)-[:FIFA_16|FIFA_17|FIFA_18|FIFA_19|FIFA_20|FIFA_21|FIFA_22]->(e:Statistics)
+// WHERE e.overall = MaxRating
+// RETURN Gender, AverageRating, p.long_name AS PlayerWithBestRating

ui/src/components/index.ts

@@ -2,3 +2,4 @@ export { CaminoMinimo } from "./CaminoMinimo";
 export { Layout } from "./Layout";
 export { Valoracion } from "./Valoracion";
 export { CompasZurdos } from "./CompasZurdos";
+export { ElMasPopu } from "./ElMasPopu";
\ No newline at end of file

ui/src/pages/Home.tsx

 import { Box, Toolbar, Typography } from "@mui/material";
-import { CaminoMinimo, CompasZurdos, Layout, Valoracion } from "../components";
+import { CaminoMinimo, CompasZurdos, ElMasPopu, Layout, Valoracion } from "../components";
 
 const Home = () => {
   return (
@@ -17,6 +17,7 @@ const Home = () => {
       <CaminoMinimo />
 
       <CompasZurdos />
+      <ElMasPopu />
     </Layout>
   );
 };