feat: exponentially decreasing edge weight

and adjustment of negative weight

cutt/analysis.py

@@ -153,20 +153,23 @@ def graph_json(
         )
 
         for c in session.exec(statement2):
+            if c.user not in player_map:
+                continue
             user = player_map[c.user]
             for i, p_id in enumerate(c.love):
                 if p_id not in player_map:
                     continue
                 p = player_map[p_id]
+                weight = 0.9**i
                 edges.append(
                     {
                         "id": f"{user}->{p}",
                         "source": user,
                         "target": p,
-                        "size": max(1.0 - 0.1 * i, 0.3),
+                        "size": weight,
                         "data": {
                             "relation": 2,
-                            "origSize": max(1.0 - 0.1 * i, 0.3),
+                            "origSize": weight,
                             "origFill": "#bed4ff",
                         },
                     }
@@ -180,7 +183,7 @@ def graph_json(
                         "id": f"{user}-x>{p}",
                         "source": user,
                         "target": p,
-                        "size": 0.3,
+                        "size": 0.5,
                         "data": {"relation": 0, "origSize": 0.3, "origFill": "#ff7c7c"},
                         "fill": "#ff7c7c",
                     }
@@ -318,10 +321,17 @@ def last_submissions(
 ):
     times = {}
     with Session(engine) as session:
+        player_ids = session.exec(
+            select(P.id)
+            .join(PlayerTeamLink)
+            .join(Team)
+            .where(Team.id == request.team_id, P.disabled == False)
+        ).all()
         for survey in [C, PT, R]:
             subquery = (
                 select(survey.user, func.max(survey.time).label("latest"))
                 .where(survey.team == request.team_id)
+                .where(survey.user.in_(player_ids))
                 .group_by(survey.user)
                 .subquery()
             )
@@ -340,24 +350,26 @@ def last_submissions(
 
 
 def mvp(
-    request: Annotated[TeamScopedRequest, Security(verify_team_scope)],
+    request: Annotated[TeamScopedRequest, Security(verify_team_scope)], mixed=False
 ):
-    ranks = dict()
     if request.team_id == 42:
+        ranks = {}
         random.seed(42)
         players = [request.user] + demo_players
         for p in players:
             random.shuffle(players)
             for i, p in enumerate(players):
-                ranks[p.display_name] = ranks.get(p.display_name, []) + [i + 1]
+                ranks[p.id] = ranks.get(p.id, []) + [i + 1]
         return [
-            {
-                "name": p,
-                "rank": f"{np.mean(v):.02f}",
-                "std": f"{np.std(v):.02f}",
-                "n": len(v),
-            }
-            for p, v in ranks.items()
+            [
+                {
+                    "p_id": p_id,
+                    "rank": f"{np.mean(v):.02f}",
+                    "std": f"{np.std(v):.02f}",
+                    "n": len(v),
+                }
+                for i, (p_id, v) in enumerate(ranks.items())
+            ]
         ]
 
     with Session(engine) as session:
@@ -369,7 +381,7 @@ def mvp(
         ).all()
         if not players:
             raise HTTPException(status_code=status.HTTP_404_NOT_FOUND)
-        player_map = {p.id: p.display_name for p in players}
+        player_map = {p.id: p for p in players}
         subquery = (
             select(R.user, func.max(R.time).label("latest"))
             .where(R.team == request.team_id)
@@ -379,25 +391,45 @@ def mvp(
         statement2 = select(R).join(
             subquery, (R.user == subquery.c.user) & (R.time == subquery.c.latest)
         )
-        for r in session.exec(statement2):
-            for i, p_id in enumerate(r.mvps):
-                if p_id not in player_map:
-                    continue
-                p = player_map[p_id]
-                ranks[p] = ranks.get(p, []) + [i + 1]
+        if mixed:
+            all_ranks = []
+            for gender in ["fmp", "mmp"]:
+                ranks = {}
+                for r in session.exec(statement2):
+                    mvps = [
+                        p_id
+                        for p_id in r.mvps
+                        if p_id in player_map and player_map[p_id].gender == gender
+                    ]
+                    for i, p_id in enumerate(mvps):
+                        p = player_map[p_id]
+                        ranks[p_id] = ranks.get(p_id, []) + [i + 1]
+                all_ranks.append(ranks)
+        else:
+            ranks = {}
+            for r in session.exec(statement2):
+                for i, p_id in enumerate(r.mvps):
+                    if p_id not in player_map:
+                        continue
+                    p = player_map[p_id]
+                    ranks[p_id] = ranks.get(p_id, []) + [i + 1]
+            all_ranks = [ranks]
 
-    if not ranks:
+    if not all_ranks:
         raise HTTPException(
             status_code=status.HTTP_404_NOT_FOUND, detail="no entries found"
         )
     return [
-        {
-            "name": p,
-            "rank": f"{np.mean(v):.02f}",
-            "std": f"{np.std(v):.02f}",
-            "n": len(v),
-        }
-        for p, v in ranks.items()
+        [
+            {
+                "p_id": p_id,
+                "rank": f"{np.mean(v):.02f}",
+                "std": f"{np.std(v):.02f}",
+                "n": len(v),
+            }
+            for p_id, v in ranks.items()
+        ]
+        for ranks in all_ranks
     ]
 
 

cutt/db.py

@@ -38,6 +38,7 @@ class Team(SQLModel, table=True):
     name: str
     location: str | None
     country: str | None
+    mixed: bool = False
     players: list["Player"] | None = Relationship(
         back_populates="teams", link_model=PlayerTeamLink
     )

cutt/demo.py

@@ -16,7 +16,7 @@ names = [
 demo_players = [
     Player.model_validate(
         {
-            "id": i,
+            "id": i + 4200,
             "display_name": name,
             "username": name.lower().replace(" ", "").replace(".", ""),
             "gender": gender,

cutt/player.py

@@ -188,6 +188,7 @@ async def list_players(
             .join(PlayerTeamLink)
             .join(Team)
             .where(Team.id == team_id, P.disabled == False)
+            .order_by(P.display_name)
         ).all()
         if players:
             return [

src/Analysis.tsx

@@ -1,228 +0,0 @@
-import { useEffect, useState } from "react";
-import { apiAuth } from "./api";
-
-//const debounce = <T extends (...args: any[]) => void>(
-//  func: T,
-//  delay: number
-//): ((...args: Parameters<T>) => void) => {
-//  let timeoutId: number | null = null;
-//  return (...args: Parameters<T>) => {
-//    if (timeoutId !== null) {
-//      clearTimeout(timeoutId);
-//    }
-//    console.log(timeoutId);
-//    timeoutId = setTimeout(() => {
-//      func(...args);
-//    }, delay);
-//  };
-//};
-//
-
-interface Params {
-  nodeSize: number;
-  edgeWidth: number;
-  arrowSize: number;
-  fontSize: number;
-  distance: number;
-  weighting: boolean;
-  popularity: boolean;
-  show: number;
-}
-
-let timeoutID: NodeJS.Timeout | null = null;
-export default function Analysis() {
-  const [image, setImage] = useState("");
-  const [params, setParams] = useState<Params>({
-    nodeSize: 2000,
-    edgeWidth: 1,
-    arrowSize: 16,
-    fontSize: 10,
-    distance: 2,
-    weighting: true,
-    popularity: true,
-    show: 2,
-  });
-  const [showControlPanel, setShowControlPanel] = useState(false);
-  const [loading, setLoading] = useState(true);
-
-  // Function to generate and fetch the graph image
-  async function loadImage() {
-    setLoading(true);
-    await apiAuth("analysis/image", params, "POST")
-      .then((data) => {
-        setImage(data.image);
-        setLoading(false);
-      })
-      .catch((e) => {
-        console.log("best to just reload... ", e);
-      });
-  }
-
-  useEffect(() => {
-    if (timeoutID) {
-      clearTimeout(timeoutID);
-    }
-    timeoutID = setTimeout(() => {
-      loadImage();
-    }, 1000);
-  }, [params]);
-
-  function showLabel() {
-    switch (params.show) {
-      case 0:
-        return "dislike";
-      case 1:
-        return "both";
-      case 2:
-        return "like";
-    }
-  }
-
-  return (
-    <div className="stack column dropdown">
-      <button onClick={() => setShowControlPanel(!showControlPanel)}>
-        Parameters{" "}
-        <svg
-          viewBox="0 0 24 24"
-          height="1.2em"
-          style={{
-            fill: "#ffffff",
-            display: "inline",
-            top: "0.2em",
-            position: "relative",
-            transform: showControlPanel ? "rotate(180deg)" : "unset",
-          }}
-        >
-          {" "}
-          <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"> </path>
-        </svg>
-      </button>
-      <div id="control-panel" className={showControlPanel ? "opened" : ""}>
-        <div className="control">
-          <datalist id="markers">
-            <option value="0"></option>
-            <option value="1"></option>
-            <option value="2"></option>
-          </datalist>
-          <div id="three-slider">
-            <label>😬</label>
-            <input
-              type="range"
-              list="markers"
-              min="0"
-              max="2"
-              step="1"
-              width="16px"
-              onChange={(evt) =>
-                setParams({ ...params, show: Number(evt.target.value) })
-              }
-            />
-            <label>😍</label>
-          </div>
-          {showLabel()}
-        </div>
-        <div className="control">
-          <div className="checkBox">
-            <input
-              type="checkbox"
-              checked={params.weighting}
-              onChange={(evt) =>
-                setParams({ ...params, weighting: evt.target.checked })
-              }
-            />
-            <label>weighting</label>
-          </div>
-
-          <div className="checkBox">
-            <input
-              type="checkbox"
-              checked={params.popularity}
-              onChange={(evt) =>
-                setParams({ ...params, popularity: evt.target.checked })
-              }
-            />
-            <label>popularity</label>
-          </div>
-        </div>
-
-        <div className="control">
-          <label>distance between nodes</label>
-          <input
-            type="range"
-            min="0.01"
-            max="3.001"
-            step="0.05"
-            value={params.distance}
-            onChange={(evt) =>
-              setParams({ ...params, distance: Number(evt.target.value) })
-            }
-          />
-          <span>{params.distance}</span>
-        </div>
-
-        <div className="control">
-          <label>node size</label>
-          <input
-            type="range"
-            min="500"
-            max="3000"
-            value={params.nodeSize}
-            onChange={(evt) =>
-              setParams({ ...params, nodeSize: Number(evt.target.value) })
-            }
-          />
-          <span>{params.nodeSize}</span>
-        </div>
-
-        <div className="control">
-          <label>font size</label>
-          <input
-            type="range"
-            min="4"
-            max="24"
-            value={params.fontSize}
-            onChange={(evt) =>
-              setParams({ ...params, fontSize: Number(evt.target.value) })
-            }
-          />
-          <span>{params.fontSize}</span>
-        </div>
-
-        <div className="control">
-          <label>edge width</label>
-          <input
-            type="range"
-            min="1"
-            max="5"
-            step="0.1"
-            value={params.edgeWidth}
-            onChange={(evt) =>
-              setParams({ ...params, edgeWidth: Number(evt.target.value) })
-            }
-          />
-          <span>{params.edgeWidth}</span>
-        </div>
-
-        <div className="control">
-          <label>arrow size</label>
-          <input
-            type="range"
-            min="10"
-            max="50"
-            value={params.arrowSize}
-            onChange={(evt) =>
-              setParams({ ...params, arrowSize: Number(evt.target.value) })
-            }
-          />
-          <span>{params.arrowSize}</span>
-        </div>
-      </div>
-      <button onClick={() => loadImage()}>reload ↻</button>
-      {loading ? (
-        <span className="loader"></span>
-      ) : (
-        <img src={"data:image/png;base64," + image} width="86%" />
-      )}
-    </div>
-  );
-}

src/App.css

@@ -154,6 +154,8 @@ select {
   margin-top: 0.25em;
   margin-bottom: 0.25em;
   border-radius: 1em;
+  color: black;
+  background-color: white;
 }
 
 h1,
@@ -491,7 +493,6 @@ button {
   }
   select {
     max-width: 335px;
-    background-color: white;
   }
 }
 
@@ -514,12 +515,6 @@ button {
   &.disable-player {
     background-color: #e338;
   }
-  &.mmp {
-    background-color: lightskyblue;
-  }
-  &.fmp {
-    background-color: salmon;
-  }
 }
 
 .new-player-inputs {
@@ -550,6 +545,14 @@ button {
   }
 }
 
+.mmp {
+  background-color: lightskyblue;
+}
+
+.fmp {
+  background-color: salmon;
+}
+
 @keyframes blink {
   0% {
     background-color: #8888;
@@ -648,6 +651,7 @@ button {
 .calendar-container {
   position: relative;
   margin: 20px auto;
+  font-size: small;
 }
 
 .month-navigation {
@@ -678,9 +682,10 @@ button {
 }
 
 .day {
-  padding: 8px;
+  padding: 2px;
   border: 1px solid grey;
   cursor: pointer;
+  display: flex;
 }
 
 .selected-day {
@@ -719,6 +724,7 @@ button {
 }
 
 .events {
+  font-size: large;
   padding: 20px;
   ul > li {
     padding: 0;

src/App.tsx

@@ -1,4 +1,3 @@
-import Analysis from "./Analysis";
 import "./App.css";
 import Footer from "./Footer";
 import Header from "./Header";
@@ -35,7 +34,6 @@ function App() {
                 <Routes>
                   <Route index element={<Rankings />} />
                   <Route path="network" element={<GraphComponent />} />
-                  <Route path="analysis" element={<Analysis />} />
                   <Route path="mvp" element={<MVPChart />} />
                   <Route path="changepassword" element={<SetPassword />} />
                   <Route path="team" element={<TeamPanel />} />

src/BarChart.tsx

@@ -1,95 +0,0 @@
-import { FC } from 'react';
-import { PlayerRanking } from './types';
-
-interface BarChartProps {
-  players: PlayerRanking[];
-  width: number;
-  height: number;
-  std: boolean;
-}
-
-const BarChart: FC<BarChartProps> = ({ players, width, height, std }) => {
-  const padding = 24;
-  const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
-  const barWidth = (width - 2 * padding) / players.length;
-
-  return (
-    <svg width={width} height={height}>
-
-      {players.map((player, index) => (
-        <rect
-          key={index}
-          x={index * barWidth + padding}
-          y={height - (1 - player.rank / maxValue) * height}
-          width={barWidth - 8} // subtract 2 for some spacing between bars
-          height={(1 - player.rank / maxValue) * height}
-          fill="#69f"
-        />
-      ))}
-
-      {players.map((player, index) => (
-        <text
-          key={index}
-          x={index * barWidth + barWidth / 2 - 4 + padding}
-          y={height - (1 - player.rank / maxValue) * height - 5}
-          textAnchor="middle"
-          //transform='rotate(-27)'
-          //style={{ transformOrigin: "center", transformBox: "fill-box" }}
-          fontSize="16px"
-          fill="#404040"
-        >
-          {player.name}
-        </text>
-      ))}
-
-      {players.map((player, index) => (
-        <text
-          key={index}
-          x={index * barWidth + barWidth / 2 + padding - 4}
-          y={height - 8}
-          textAnchor="middle"
-          fontSize="12px"
-          fill="#404040"
-        >
-          {player.rank}
-        </text>
-      ))}
-
-      {std && players.map((player, index) => (
-        <line
-          key={`error-${index}`}
-          x1={index * barWidth + barWidth / 2 + padding}
-          y1={height - (1 - player.rank / maxValue) * height - (player.std / maxValue) * height}
-          x2={index * barWidth + barWidth / 2 + padding}
-          y2={height - (1 - player.rank / maxValue) * height + (player.std / maxValue) * height}
-          stroke="#ff0000"
-          strokeWidth="1"
-        />
-      ))}
-      {std && players.map((player, index) => (
-        <line
-          key={`cap-${index}-top`}
-          x1={index * barWidth + barWidth / 2 - 2 + padding}
-          y1={height - (1 - player.rank / maxValue) * height - (player.std / maxValue) * height}
-          x2={index * barWidth + barWidth / 2 + 2 + padding}
-          y2={height - (1 - player.rank / maxValue) * height - (player.std / maxValue) * height}
-          stroke="#ff0000"
-          strokeWidth="1"
-        />
-      ))}
-      {std && players.map((player, index) => (
-        <line
-          key={`cap-${index}-bottom`}
-          x1={index * barWidth + barWidth / 2 - 2 + padding}
-          y1={height - (1 - player.rank / maxValue) * height + (player.std / maxValue) * height}
-          x2={index * barWidth + barWidth / 2 + 2 + padding}
-          y2={height - (1 - player.rank / maxValue) * height + (player.std / maxValue) * height}
-          stroke="#ff0000"
-          strokeWidth="1"
-        />
-      ))}
-    </svg>
-  );
-};
-
-export default BarChart;

src/Calendar.tsx

@@ -91,7 +91,7 @@ const Calendar = ({ playerId }: { playerId: number }) => {
       days.push(
         <div key={"weekday_" + i} className="weekday">
           {date.toLocaleString("default", {
-            weekday: "short",
+            weekday: "narrow",
           })}
         </div>
       );
@@ -147,10 +147,10 @@ const Calendar = ({ playerId }: { playerId: number }) => {
         {eventsForDay && (
           <ul>
             {Object.entries(eventsForDay).map(([id, sub]) => {
-              const name = players?.filter((p) => p.id === Number(id));
+              const name = players?.find((p) => p.id === Number(id));
               return (
                 <li key={id}>
-                  {name ? name[0].display_name : ""}:{" "}
+                  {name !== undefined ? name.display_name : ""}:{" "}
                   <span style={{ letterSpacing: 8 }}>{sub}</span>
                 </li>
               );
@@ -163,6 +163,7 @@ const Calendar = ({ playerId }: { playerId: number }) => {
 
   return (
     <div className="calendar-container">
+      <h2>Latest Submissions</h2>
       {renderMonthNavigation()}
       {renderCalendar()}
       {renderEvents()}

src/MVPChart.tsx

@@ -6,12 +6,13 @@ import { useSession } from "./Session";
 import { useNavigate } from "react-router";
 
 const MVPChart = () => {
-  let initialData = {} as PlayerRanking[];
+  let initialData = {} as PlayerRanking[][];
   const [data, setData] = useState(initialData);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
   const [showStd, setShowStd] = useState(false);
   const { user, teams } = useSession();
+  const [mixed, setMixed] = useState(false);
   const navigate = useNavigate();
   useEffect(() => {
     user?.scopes.includes(`team:${teams?.activeTeam}`) ||
@@ -19,21 +20,30 @@ const MVPChart = () => {
       navigate("/", { replace: true });
   }, [user]);
 
+  useEffect(() => {
+    if (teams) {
+      const activeTeam = teams.teams.find(
+        (team) => team.id == teams.activeTeam
+      );
+      activeTeam && setMixed(activeTeam.mixed);
+    }
+  }, [teams]);
+
   async function loadData() {
     setLoading(true);
     if (teams) {
-      await apiAuth(`analysis/mvp/${teams?.activeTeam}`, null)
+      await apiAuth(`analysis/mvp/${teams?.activeTeam}?mixed=${mixed}`, null)
         .then((data) => {
           if (data.detail) {
             setError(data.detail);
             return initialData;
           } else {
             setError("");
-            return data as Promise<PlayerRanking[]>;
+            return data as Promise<PlayerRanking[][]>;
           }
         })
         .then((data) => {
-          setData(data.sort((a, b) => a.rank - b.rank));
+          setData(data.map((_data) => _data.sort((a, b) => a.rank - b.rank)));
         })
         .catch(() => setError("no access"));
       setLoading(false);
@@ -46,7 +56,8 @@ const MVPChart = () => {
 
   if (loading) return <span className="loader" />;
   else if (error) return <span>{error}</span>;
-  else return <RaceChart std={showStd} players={data} />;
+  else
+    return data.map((_data) => <RaceChart std={showStd} playerRanks={_data} />);
 };
 
 export default MVPChart;

src/RaceChart.tsx

@@ -1,8 +1,9 @@
 import { FC, useEffect, useState } from "react";
 import { PlayerRanking } from "./types";
+import { useSession } from "./Session";
 
 interface RaceChartProps {
-  players: PlayerRanking[];
+  playerRanks: PlayerRanking[];
   std: boolean;
 }
 
@@ -13,15 +14,14 @@ const determineNiceWidth = (width: number) => {
   else return width * 0.96;
 };
 
-const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
+const RaceChart: FC<RaceChartProps> = ({ playerRanks, std }) => {
   const [width, setWidth] = useState(determineNiceWidth(window.innerWidth));
-  //const [height, setHeight] = useState(window.innerHeight);
-  const height = (players.length + 1) * 40;
+  const height = (playerRanks.length + 1) * 40;
+  const { players } = useSession();
 
   useEffect(() => {
     const handleResize = () => {
       setWidth(determineNiceWidth(window.innerWidth));
-      //setHeight(window.innerHeight);
     };
     window.addEventListener("resize", handleResize);
     return () => {
@@ -30,18 +30,18 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
   }, []);
   const padding = 24;
   const gap = 8;
-  const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
-  const barHeight = (height - 2 * padding) / players.length;
+  const maxValue = Math.max(...playerRanks.map((player) => player.rank)) + 1;
+  const barHeight = (height - 2 * padding) / playerRanks.length;
   const fontSize = Math.min(barHeight - 1.5 * gap, width / 22);
 
   return (
     <svg width={width} height={height} id="RaceChartSVG">
-      {players.map((player, index) => (
+      {playerRanks.map((playerRank, index) => (
         <rect
           key={String(index)}
           x={4}
           y={index * barHeight + padding}
-          width={(1 - player.rank / maxValue) * width}
+          width={(1 - playerRank.rank / maxValue) * width}
           height={barHeight - gap} // subtract 2 for some spacing between bars
           fill="#36c"
           stroke="aliceblue"
@@ -50,49 +50,53 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
         />
       ))}
 
-      {players.map((player, index) => (
-        <g key={"group" + index}>
-          <text
-            key={index + "_name"}
-            x={8}
-            y={index * barHeight + barHeight / 2 + padding + gap / 2}
-            width={(1 - player.rank / maxValue) * width}
-            height={barHeight - 8} // subtract 2 for some spacing between bars
-            fontSize={fontSize}
-            fill="aliceblue"
-            stroke="#36c"
-            strokeWidth={4}
-            fontWeight={"bold"}
-            paintOrder={"stroke fill"}
-            fontFamily="monospace"
-            style={{ whiteSpace: "pre" }}
-          >
-            {`${String(index + 1).padStart(2)}. ${player.name}`}
-          </text>
-          <text
-            key={index + "_value"}
-            x={
-              8 +
-              (4 + Math.max(...players.map((p, _) => p.name.length))) *
-                fontSize *
-                0.66
-            }
-            y={index * barHeight + barHeight / 2 + padding + gap / 2}
-            width={(1 - player.rank / maxValue) * width}
-            height={barHeight - 8} // subtract 2 for some spacing between bars
-            fontSize={0.8 * fontSize}
-            fill="aliceblue"
-            stroke="#36c"
-            fontWeight={"bold"}
-            fontFamily="monospace"
-            strokeWidth={4}
-            paintOrder={"stroke fill"}
-            style={{ whiteSpace: "pre" }}
-          >
-            {`${String(player.rank).padStart(5)} ± ${player.std}   N = ${player.n}`}
-          </text>
-        </g>
-      ))}
+      {playerRanks.map((playerRank, index) => {
+        const player = players!.find((p) => p.id === playerRank.p_id);
+        return (
+          <g key={"group" + index}>
+            <text
+              key={index + "_name"}
+              x={8}
+              y={index * barHeight + barHeight / 2 + padding + gap / 2}
+              width={(1 - playerRank.rank / maxValue) * width}
+              height={barHeight - 8} // subtract 2 for some spacing between bars
+              fontSize={fontSize}
+              fill="aliceblue"
+              stroke="#36c"
+              strokeWidth={4}
+              fontWeight={"bold"}
+              paintOrder={"stroke fill"}
+              fontFamily="monospace"
+              style={{ whiteSpace: "pre" }}
+            >
+              {`${String(index + 1).padStart(2)}. ${player?.display_name}`}
+            </text>
+            <text
+              key={index + "_value"}
+              x={
+                8 +
+                (4 +
+                  Math.max(...players!.map((p, _) => p.display_name.length))) *
+                  fontSize *
+                  0.66
+              }
+              y={index * barHeight + barHeight / 2 + padding + gap / 2}
+              width={(1 - playerRank.rank / maxValue) * width}
+              height={barHeight - 8} // subtract 2 for some spacing between bars
+              fontSize={0.8 * fontSize}
+              fill="aliceblue"
+              stroke="#36c"
+              fontWeight={"bold"}
+              fontFamily="monospace"
+              strokeWidth={4}
+              paintOrder={"stroke fill"}
+              style={{ whiteSpace: "pre" }}
+            >
+              {`${String(playerRank.rank).padStart(5)} ± ${playerRank.std}   N = ${playerRank.n}`}
+            </text>
+          </g>
+        );
+      })}
     </svg>
   );
 };

src/Rankings.tsx

@@ -7,9 +7,11 @@ import TabController from "./TabController";
 
 type PlayerListProps = Partial<ReactSortableProps<any>> & {
   orderedList?: boolean;
+  gender?: boolean;
 };
 
 function PlayerList(props: PlayerListProps) {
+  const fmps = props.list?.filter((item) => item.gender === "fmp").length;
   return (
     <ReactSortable
       {...props}
@@ -17,13 +19,23 @@ function PlayerList(props: PlayerListProps) {
       swapThreshold={0.2}
       style={{ minHeight: props.list && props.list?.length < 1 ? 64 : 32 }}
     >
-      {props.list?.map((item, index) => (
-        <div key={item.id} className="item">
-          {props.orderedList
-            ? index + 1 + ". " + item.display_name
-            : item.display_name}
-        </div>
-      ))}
+      {props.list &&
+        props.list.map((item, index) => (
+          <div
+            key={item.id}
+            className={"item " + (props.gender ? item.gender : "")}
+          >
+            {props.orderedList
+              ? props.gender
+                ? index +
+                  1 -
+                  (item.gender !== "fmp" ? fmps! : 0) +
+                  ". " +
+                  item.display_name
+                : index + 1 + ". " + item.display_name
+              : item.display_name}
+          </div>
+        ))}
     </ReactSortable>
   );
 }
@@ -325,10 +337,18 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
   const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
   const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
   const [loading, setLoading] = useState(false);
+  const [mixed, setMixed] = useState(false);
+
+  useEffect(() => {
+    const activeTeam = teams.teams.find((team) => team.id == teams.activeTeam);
+    activeTeam && setMixed(activeTeam.mixed);
+    handleGet();
+  }, [players]);
 
   useEffect(() => {
     handleGet();
-  }, [players]);
+    // setMixedList(rankedPlayers);
+  }, [mixed]);
 
   const [dialog, setDialog] = useState("dialog");
   const dialogRef = useRef<HTMLDialogElement>(null);
@@ -342,6 +362,15 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
     response ? setDialog(response) : setDialog("try sending again");
   }
 
+  const setMixedList = (newList: User[]) =>
+    mixed
+      ? setRankedPlayers(
+          newList.sort((a, b) =>
+            a.gender && b.gender ? a.gender.localeCompare(b.gender) : -1
+          )
+        )
+      : setRankedPlayers(newList);
+
   async function handleGet() {
     setLoading(true);
     const data = await apiAuth(`mvps/${teams.activeTeam}`, null, "GET");
@@ -351,7 +380,7 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
       setRankedPlayers([]);
     } else {
       const mvps = data as MVPRanking;
-      setRankedPlayers(filterSort(players, mvps.mvps));
+      setMixedList(filterSort(players, mvps.mvps));
       setAvailablePlayers(
         players.filter((user) => !mvps.mvps.includes(user.id))
       );
@@ -382,11 +411,9 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
               setList={setAvailablePlayers}
               group={{
                 name: "mvp-shared",
-                pull: function (to) {
-                  return to.el.classList.contains("putclone") ? "clone" : true;
-                },
               }}
               className="dragbox"
+              gender={mixed}
             />
           </div>
           <div className="box two">
@@ -399,15 +426,13 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
             )}
             <PlayerList
               list={rankedPlayers}
-              setList={setRankedPlayers}
+              setList={setMixedList}
               group={{
                 name: "mvp-shared",
-                pull: function (to) {
-                  return to.el.classList.contains("putclone") ? "clone" : true;
-                },
               }}
               className="dragbox"
               orderedList
+              gender={mixed}
             />
           </div>
         </div>

src/SetPassword.tsx

@@ -1,6 +1,6 @@
 import { jwtDecode, JwtPayload } from "jwt-decode";
 import { ReactNode, useEffect, useState } from "react";
-import { apiAuth, baseUrl, User } from "./api";
+import { apiAuth, baseUrl, Gender, User } from "./api";
 import { useNavigate } from "react-router";
 import { Eye, EyeSlash } from "./Icons";
 import { useSession } from "./Session";
@@ -237,6 +237,21 @@ export const SetPassword = () => {
               }}
             />
           </div>
+          <div>
+            <label>gender</label>
+            <select
+              name="gender"
+              required
+              value={player.gender}
+              onChange={(e) => {
+                setPlayer({ ...player, gender: e.target.value as Gender });
+              }}
+            >
+              <option value={undefined}></option>
+              <option value="fmp">FMP</option>
+              <option value="mmp">MMP</option>
+            </select>
+          </div>
           <div>
             <label>number (optional)</label>
             <input

src/TeamPanel.tsx

@@ -12,7 +12,7 @@ const TeamPanel = () => {
     user?.scopes.includes(`team:${teams?.activeTeam}`) ||
       teams?.activeTeam === 42 ||
       navigate("/", { replace: true });
-  }, [user]);
+  }, [user, teams]);
   const newPlayerTemplate = {
     id: 0,
     username: "",
@@ -87,23 +87,22 @@ const TeamPanel = () => {
                 justifyContent: "center",
               }}
             >
-              {players &&
-                players.map((p) => (
-                  <button
-                    className={
-                      "team-player " +
-                      p.gender +
-                      (p.id === player.id ? " active-player" : "")
-                    }
-                    key={p.id}
-                    onClick={() => {
-                      setPlayer(p);
-                      setError({ ok: true, message: "" });
-                    }}
-                  >
-                    {p.display_name}
-                  </button>
-                ))}
+              {players.map((p) => (
+                <button
+                  className={
+                    "team-player " +
+                    p.gender +
+                    (p.id === player.id ? " active-player" : "")
+                  }
+                  key={p.id}
+                  onClick={() => {
+                    setPlayer(p);
+                    setError({ ok: true, message: "" });
+                  }}
+                >
+                  {p.display_name}
+                </button>
+              ))}
               <button
                 className="team-player new-player"
                 key="add-player"
@@ -156,7 +155,6 @@ const TeamPanel = () => {
               <label>gender</label>
               <select
                 name="gender"
-                required
                 value={player.gender}
                 onChange={(e) => {
                   setPlayer({ ...player, gender: e.target.value as Gender });

src/types.ts

@@ -13,7 +13,7 @@ export default interface NetworkData {
 }
 
 export interface PlayerRanking {
-  name: string;
+  p_id: number;
   rank: number;
   std: number;
   n: number;
@@ -46,6 +46,7 @@ export interface Team {
   name: string;
   location: string;
   country: string;
+  mixed: boolean;
 }
 
 export type ErrorState = {