display player type in Sociogram in RGB

frontend/src/Network.tsx

@@ -49,6 +49,7 @@ export const GraphComponent = () => {
   const [showLikes, setShowLikes] = useState(true);
   const [showDislikes, setShowDislikes] = useState(false);
   const [popularity, setPopularity] = useState(false);
+  const [showPlayerType, setShowPlayerType] = useState(false);
   const [mutuality, setMutuality] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
   const { user, teams } = useSession();
@@ -95,6 +96,10 @@ export const GraphComponent = () => {
     popularityLabel(!popularity);
     setPopularity(!popularity);
   }
+  function handlePlayerType() {
+    playerType(!showPlayerType);
+    setShowPlayerType(!showPlayerType);
+  }
 
   function handleMutuality() {
     colorMatches(!mutuality);
@@ -138,13 +143,25 @@ export const GraphComponent = () => {
     setData({ nodes: data.nodes, edges: newEdges });
   }
 
+  function playerType(popularity: boolean) {
+    const newNodes = data.nodes;
+    if (popularity) {
+      newNodes.forEach((node) => {
+        node.fill = node.data.playertype;
+      });
+    } else {
+      newNodes.forEach((node) => (node.fill = undefined));
+    }
+    setData({ nodes: newNodes, edges: data.edges });
+  }
+
   function popularityLabel(popularity: boolean) {
     const newNodes = data.nodes;
-    console.log(data.nodes);
     if (popularity) {
-      newNodes.forEach(
-        (node) => (node.subLabel = `pop.: ${node.data.inDegree.toFixed(1)}`)
-      );
+      newNodes.forEach((node) => {
+        node.subLabel = `pop.: ${node.data.inDegree.toFixed(1)}`;
+        node.fill = node.data.playertype;
+      });
     } else {
       newNodes.forEach((node) => (node.subLabel = undefined));
     }
@@ -305,6 +322,51 @@ export const GraphComponent = () => {
                   <span className="ml-1">popularity</span>
                 </label>
               </div>
+
+              <div className="control">
+                <label className="checkbox">
+                  <input
+                    type="checkbox"
+                    checked={showPlayerType}
+                    onClick={handlePlayerType}
+                  />
+                  <span className="ml-1">player type</span>
+                </label>
+              </div>
+              <div className="control pl-4">
+                {showPlayerType && (
+                  <>
+                    <p>RGB:</p>
+                    <p
+                      style={{
+                        color: "red",
+                        fontWeight: "bold",
+                        paddingLeft: "1rem",
+                      }}
+                    >
+                      handler
+                    </p>
+                    <p
+                      style={{
+                        color: "green",
+                        fontWeight: "bold",
+                        paddingLeft: "1rem",
+                      }}
+                    >
+                      combi
+                    </p>
+                    <p
+                      style={{
+                        color: "blue",
+                        fontWeight: "bold",
+                        paddingLeft: "1rem",
+                      }}
+                    >
+                      cutter
+                    </p>
+                  </>
+                )}
+              </div>
             </div>
           </div>
         )}