Better tabs and table fixups

Author: stronk-dev

package.json

@@ -8,6 +8,7 @@
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
     "react-leaflet": "^4.2.1",
     "react-leaflet-markercluster": "^4.1.1",
     "react-router-dom": "^6.0.2",

src/components/RankingTable.css

@@ -98,3 +98,7 @@ td:nth-child(3), th:nth-child(3) {
   color: var(--text-color);
   cursor: pointer;
 }
+
+.expanded-content {
+  display: flex;
+}

src/components/RankingTable.js

@@ -107,8 +107,6 @@ 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>
@@ -161,17 +159,16 @@ const RankingTable = ({ orchestrators, selectedKPI }) => {
                     <td colSpan="3">
                       <div className="expanded-content">
                         {selectedKPI === "avgPrice" && (
-                          <p>
-                            <strong>Wei per pixel:</strong> {value.toFixed(0)} Wei<br />
-                            <strong>Converted Price:</strong> {ethPerHour?.toFixed(8)} ETH/hr at 1080p 30fps<br />
-                            <strong>Price in Dollars:</strong> ${(ethPerHour * 3000)?.toFixed(3)} (assuming 1 ETH = 3000 USD)
-                          </p>
+                          <span>
+                            {value.toFixed(1)} Wei -> {ethPerHour?.toFixed(8)} ETH/hr<br />
+                            TODO: results that make up the avg
+                          </span>
                         )}
                         {selectedKPI === "avgDiscoveryTime" && (
-                          <p>Discovery time is measured in milliseconds (ms).</p>
+                          <span>TODO: results that make up the avg</span>
                         )}
                         {selectedKPI === "avgRTR" && (
-                          <p>Realtime ratio (RTR) indicates the performance of the orchestrator.</p>
+                          <span>TODO: results that make up the avg</span>
                         )}
                       </div>
                     </td>

src/pages/home.css

@@ -37,52 +37,71 @@
   flex-direction: column; /* Default for narrow screens */
   align-items: center; /* Centers the tabs and logo */
   padding: 10px 0;
+  padding-bottom: 0;
   background-color: var(--darkest);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: shadow for separation */
-  border-bottom: 1px solid var(--darker);
-  z-index: 10;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Updated shadow for better separation */
+  border-bottom: 2px solid var(--darker);
+  position: sticky; /* Makes header bar sticky */
+  top: 0;
+  z-index: 100;
 }
 
 @media (min-width: 768px) {
   .header-bar {
     flex-direction: row; /* Horizontal layout for wide screens */
     justify-content: space-between; /* Separates the two tab groups */
     padding: 20px; /* More padding for larger screens */
+    padding-bottom: 0;
   }
 }
 
 .tabs {
   display: flex;
   justify-content: center;
-  gap: 0.2em;
-  flex-wrap: nowrap;
+  gap: 1em;
+  flex-wrap: wrap;
   height: 100%;
   margin: 10px 0;
 }
 
+span {
+  text-align: center;
+  margin: 0;
+  flex: 1;
+}
+
 .tab {
   position: relative;
-  background: var(--darker);
+  background: var(--dark);
   color: var(--button-text-color);
   padding: 10px 20px;
   border: 1px solid var(--button-border);
-  border-bottom: none; /* Makes it look like a folder tab */
-  border-radius: 5px 5px 0 0;
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
   cursor: pointer;
   font-size: 1rem;
-  height: 100%;
-  transition: background-color 0.3s ease, transform 0.3s ease;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-icon {
+  margin-right: 8px;
 }
 
 .tab.active {
-  background: var(--button-hover-background);
-  color: var(--accent-color);
+  background: var(--dark); /* Updated to make the active tab stand out more */
+  color: var(--weird);
+  border-color: var(--yellow);
   z-index: 12;
+  transform: scale(1.05); /* Subtle enlargement to emphasize selection */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .tab:hover {
-  background: var(--dark);
+  background: var(--darker);
+  transform: scale(1.10);
 }
 
 .tab-content {
@@ -149,7 +168,11 @@
 }
 
 .ranking-section {
+  display: flex;
+  flex-direction: column;
   max-width: 800px;
+  align-items: center;
+  justify-content: center;
 }
 
 .ranking-section,

src/pages/home.js

@@ -5,6 +5,7 @@ import RankingTable from "../components/RankingTable";
 import Histogram from "../components/Histogram";
 import WorldMap from "../components/WorldMap";
 import useProcessedData from "../hooks/useProcessedData";
+import { FaDollarSign, FaClock, FaChartLine, FaMap, FaTable, FaChartBar } from 'react-icons/fa';
 import "./home.css";
 
 const Home = () => {
@@ -38,7 +39,8 @@ const Home = () => {
             <div className="scrollable-content">
               <div className="tab-content">
                 <section className="ranking-section">
-                  <h3>{getTitle()} Ranking</h3>
+                  <h4>{getTitle()} Ranking</h4>
+                  {activeKPI == "pricing" ? <span>(for 1 hour of 1080p 30fps, assuming 1 ETH = 3000 USD)</span> : ""}
                   <RankingTable orchestrators={processedData.orchestrators} selectedKPI={selectedKPI} />
                 </section>
               </div>
@@ -65,7 +67,7 @@ const Home = () => {
             <div className="scrollable-content">
               <div className="tab-content">
                 <section className="histogram-section">
-                  <h3>{getTitle()} Histogram</h3>
+                  <h4>{getTitle()} Charts</h4>
                   <Histogram aggregateData={processedData.aggregates} selectedKPI={selectedKPI} />
                 </section>
               </div>
@@ -93,18 +95,21 @@ const Home = () => {
             className={`tab ${activeKPI === "pricing" ? "active" : ""}`}
             onClick={() => setKPI("pricing")}
           >
+            <FaDollarSign className="tab-icon" />
             Pricing
           </button>
           <button
             className={`tab ${activeKPI === "discovery-time" ? "active" : ""}`}
             onClick={() => setKPI("discovery-time")}
           >
+            <FaClock className="tab-icon" />
             Discovery Time
           </button>
           <button
             className={`tab ${activeKPI === "performance" ? "active" : ""}`}
             onClick={() => setKPI("performance")}
           >
+            <FaChartLine className="tab-icon" />
             Performance
           </button>
         </div>
@@ -113,18 +118,21 @@ const Home = () => {
             className={`tab ${activeView === "table" ? "active" : ""}`}
             onClick={() => setView("table")}
           >
+            <FaTable className="tab-icon" />
             Ranking
           </button>
           <button
             className={`tab ${activeView === "map" ? "active" : ""}`}
             onClick={() => setView("map")}
           >
+            <FaMap className="tab-icon" />
             World Map
           </button>
           <button
             className={`tab ${activeView === "distribution" ? "active" : ""}`}
             onClick={() => setView("distribution")}
           >
+            <FaChartBar className="tab-icon" />
             Distribution
           </button>
         </div>