Region filtering in table

Author: stronk-dev

src/components/RankingTable.css

@@ -77,3 +77,24 @@ td:nth-child(3), th:nth-child(3) {
     width: 25%; /* Adjusts KPI values width */
   }
 }
+
+/* Region Selector Dropdown Styling */
+.region-selector {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.region-selector label {
+  color: var(--text-color);
+  margin-right: 10px;
+}
+
+.region-selector select {
+  padding: 8px;
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+  background-color: var(--input-background);
+  color: var(--text-color);
+  cursor: pointer;
+}

src/components/RankingTable.js

@@ -1,18 +1,68 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import "./RankingTable.css";
 
 const RankingTable = ({ orchestrators, selectedKPI }) => {
+  const [selectedRegion, setSelectedRegion] = useState("global");
+
+  // Set initial position once when parentRef becomes available
+  useEffect(() => {
+    setSelectedRegion("global");
+  }, [selectedKPI]);
+
   const kpiLabel = {
     avgPrice: "Price",
     avgDiscoveryTime: "Discovery Time",
-    avgRTR: "Realtime ratio",
+    avgRTR: "Realtime Ratio",
   };
 
-  // Validate data
-  const validOrchestrators = orchestrators.filter((orch) =>
-    orch[selectedKPI] !== undefined && orch[selectedKPI] > 0.0
-  );
+  // Extract unique regions for dropdown options
+  const uniqueRegions = [
+    "global",
+    ...new Set(
+      orchestrators.flatMap((orch) =>
+        orch.instances.flatMap((instance) => {
+          if (selectedKPI === "avgRTR") {
+            return instance.livepeer_regions;
+          } else {
+            return instance.regions;
+
+          }
+        }
+        )
+      )
+    ),
+  ];
+
+  // Handle dropdown change
+  const handleRegionChange = (event) => {
+    setSelectedRegion(event.target.value);
+  };
+
+  // Validate and filter orchestrators based on the selected KPI and region
+  const validOrchestrators = orchestrators.filter((orch) => {
+    // If global, return all orchestrators with valid KPI values
+    if (selectedRegion === "global") {
+      return orch[selectedKPI] !== undefined && orch[selectedKPI] > 0.0;
+    }
+
+    // If filtering by specific region
+    return orch.instances.some((instance) => {
+      if (selectedKPI === "avgRTR") {
+        return (
+          instance.livepeer_regions.includes(selectedRegion) &&
+          instance.avgRTRByRegion[selectedRegion] !== undefined &&
+          instance.avgRTRByRegion[selectedRegion] > 0.0
+        );
+      } else {
+        return (
+          instance.regions.includes(selectedRegion) &&
+          instance.avgPriceByRegion[selectedRegion] !== undefined &&
+          instance.avgPriceByRegion[selectedRegion] > 0.0
+        );
+      }
+    });
+  });
 
   const sortedOrchestrators = [...validOrchestrators].sort((a, b) => {
     const valueA = a[selectedKPI] >= 0 ? a[selectedKPI] : Infinity;
@@ -23,6 +73,19 @@ const RankingTable = ({ orchestrators, selectedKPI }) => {
   return (
     <div className="ranking-table">
       <h4>Ranking Table</h4>
+
+      {/* Dropdown for Region Selection */}
+      <div className="region-selector">
+        <label htmlFor="region-select">Select Region:</label>
+        <select id="region-select" value={selectedRegion} onChange={handleRegionChange}>
+          {uniqueRegions.map((region) => (
+            <option key={region} value={region}>
+              {region}
+            </option>
+          ))}
+        </select>
+      </div>
+
       <table>
         <thead>
           <tr>
@@ -32,15 +95,33 @@ const RankingTable = ({ orchestrators, selectedKPI }) => {
           </tr>
         </thead>
         <tbody>
-          {sortedOrchestrators.map((orchestrator, index) => (
-            <tr key={orchestrator.id}>
-              <td>{index + 1}</td>
-              <td>{orchestrator.name}</td>
-              <td>
-                {orchestrator[selectedKPI] >= 0 ? orchestrator[selectedKPI]?.toFixed(2) || 0 : "?"}
-              </td>
-            </tr>
-          ))}
+          {sortedOrchestrators.map((orchestrator, index) => {
+            // Determine which value to display based on selected region
+            let value = 0;
+
+            if (selectedRegion === "global") {
+              value = orchestrator[selectedKPI];
+            } else {
+              const instance = orchestrator.instances.find((inst) =>
+                selectedKPI === "avgRTR"
+                  ? inst.livepeer_regions.includes(selectedRegion)
+                  : inst.regions.includes(selectedRegion)
+              );
+              if (instance) {
+                value = selectedKPI === "avgRTR"
+                  ? instance.avgRTRByRegion[selectedRegion]
+                  : instance.avgPriceByRegion[selectedRegion];
+              }
+            }
+
+            return (
+              <tr key={orchestrator.id}>
+                <td>{index + 1}</td>
+                <td>{orchestrator.name}</td>
+                <td>{value >= 0 ? value?.toFixed(2) || 0 : "?"}</td>
+              </tr>
+            );
+          })}
         </tbody>
       </table>
     </div>
@@ -56,6 +137,18 @@ RankingTable.propTypes = {
       avgDiscoveryTime: PropTypes.number,
       avgRTR: PropTypes.number,
       avgSR: PropTypes.number,
+      instances: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.string.isRequired,
+          regions: PropTypes.arrayOf(PropTypes.string).isRequired,
+          livepeer_regions: PropTypes.arrayOf(PropTypes.string).isRequired,
+          price: PropTypes.number,
+          avgRTR: PropTypes.number,
+          avgPriceByRegion: PropTypes.object,
+          avgDiscoveryTimeByRegion: PropTypes.object,
+          avgRTRByRegion: PropTypes.object,
+        })
+      ).isRequired,
     })
   ).isRequired,
   selectedKPI: PropTypes.oneOf(["avgPrice", "avgDiscoveryTime", "avgRTR"]).isRequired,

src/hooks/useProcessedData.js

@@ -39,6 +39,22 @@ const useProcessedData = () => {
             .map((stats) => stats.avgDiscoveryTime || Infinity)
             .reduce((best, current) => Math.min(best, current), Infinity);
 
+          // Store regional stats for avgPrice and avgDiscoveryTime
+          const regionalStats = orchestratorData.regionalStats || {};
+          const avgPriceByRegion = {};
+          const avgDiscoveryTimeByRegion = {};
+          regions.forEach((region) => {
+            const stats = regionalStats[region] || {};
+            avgPriceByRegion[region] = stats.avgPrice || 0;
+            avgDiscoveryTimeByRegion[region] = stats.avgDiscoveryTime || Infinity;
+          });
+          // Store avgRTR per livepeer region
+          const avgRTRByRegion = {};
+          livepeerRegions.forEach((region) => {
+            const leaderboard = leaderboardResults[region] || {};
+            avgRTRByRegion[region] = leaderboard.latestRTR || 0;
+          });
+
           return {
             id: instanceId,
             price: instanceData.price || 0,
@@ -51,6 +67,9 @@ const useProcessedData = () => {
             bestDiscoveryTime: bestDiscoveryTime === Infinity ? null : bestDiscoveryTime,
             avgRTR: avgRTR || 0,
             avgSR: avgSR || 0,
+            avgPriceByRegion,
+            avgDiscoveryTimeByRegion,
+            avgRTRByRegion,
           };
         }
       );