Seed for leader (#14)

* progress

* fix seed selection

* add network key

* fix legend

Author: patrick-ogrady

chain/src/actors/application/supervisor.rs

@@ -1,3 +1,4 @@
+use alto_types::leader_index;
 use commonware_consensus::{
     threshold_simplex::View, Activity, Proof, Supervisor as Su, ThresholdSupervisor as TSu,
 };
@@ -8,7 +9,6 @@ use commonware_cryptography::{
     },
     ed25519::PublicKey,
 };
-use commonware_utils::modulo;
 use std::collections::HashMap;
 
 /// Implementation of `commonware-consensus::Supervisor`.
@@ -73,8 +73,8 @@ impl TSu for Supervisor {
 
     fn leader(&self, _: Self::Index, seed: Self::Seed) -> Option<Self::PublicKey> {
         let seed = seed.serialize();
-        let index = modulo(&seed, self.participants.len() as u64);
-        Some(self.participants[index as usize].clone())
+        let index = leader_index(&seed, self.participants.len());
+        Some(self.participants[index].clone())
     }
 
     fn identity(&self, _: Self::Index) -> Option<&Self::Identity> {

explorer/README.md

@@ -7,8 +7,8 @@
 ```bash
 cd ../types
 wasm-pack build --release --target web
-mv pkg/alto_types.js ../explorer/public
-mv pkg/alto_types_bg.wasm ../explorer/public
+mv pkg/alto_types.js ../explorer/src/alto_types
+mv pkg/alto_types_bg.wasm ../explorer/src/alto_types
 cd ../explorer
 ```
 

explorer/src/App.css

@@ -75,24 +75,25 @@ body {
 .legend-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 16px;
-  padding: 10px;
-  background: white;
-  border: 1px solid #ccc;
+  gap: 8px;
   font-family: 'Consolas', monospace;
+  justify-content: flex-end;
 }
 
 .legend-item {
   display: flex;
   align-items: center;
   gap: 5px;
+  padding: 2px 6px;
+  border-radius: 0;
+  background-color: #fafafa;
+  border: 1px solid #eee;
 }
 
 .legend-color {
   width: 12px;
   height: 12px;
-  border: 1px solid black;
+  border: 1px solid #888;
 }
 
 .legend-label {
@@ -101,6 +102,15 @@ body {
 }
 
 /* Bars container */
+.bars-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
 .bars-container {
   background: white;
   border: 1px solid #ccc;
@@ -111,7 +121,7 @@ body {
 }
 
 .bars-title {
-  margin: 0 0 16px 0;
+  margin: 0;
   font-size: 18px;
   font-weight: normal;
   font-family: 'Consolas', monospace;
@@ -286,15 +296,6 @@ body {
     margin-bottom: 20px;
   }
 
-  .legend-label {
-    font-size: 14px;
-  }
-
-  .bars-title {
-    font-size: 20px;
-    margin-bottom: 20px;
-  }
-
   .bar-row {
     margin-bottom: 20px;
   }
@@ -311,6 +312,22 @@ body {
   .view-signature {
     font-size: 12px;
   }
+
+  .bars-header {
+    margin-bottom: 20px;
+  }
+
+  .bars-title {
+    font-size: 20px;
+  }
+
+  .legend-label {
+    font-size: 14px;
+  }
+
+  .legend-item {
+    padding: 2px 8px;
+  }
 }
 
 @media (max-width: 480px) {
@@ -326,25 +343,10 @@ body {
     height: 250px;
   }
 
-  .legend-container {
-    justify-content: space-between;
-    gap: 6px;
-    padding: 8px;
-  }
-
-  .legend-item {
-    font-size: 10px;
-  }
-
   .bars-container {
     padding: 10px 4px 10px 12px;
   }
 
-  .bars-title {
-    font-size: 16px;
-    margin-bottom: 12px;
-  }
-
   .bar-row {
     margin-bottom: 12px;
     width: 100%;
@@ -380,6 +382,38 @@ body {
   .latency-text {
     font-size: 9px;
   }
+
+  .bars-header {
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 12px;
+    gap: 8px;
+  }
+
+  .bars-title {
+    font-size: 16px;
+  }
+
+  .legend-container {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .legend-item {
+    font-size: 10px;
+    padding: 1px 4px;
+  }
+
+  .legend-color {
+    width: 10px;
+    height: 10px;
+  }
+
+  .legend-label {
+    font-size: 10px;
+  }
 }
 
 /* Fix for Leaflet popups */
@@ -402,4 +436,40 @@ body {
 /* Style override for map tiles to use monochrome */
 .leaflet-tile {
   filter: grayscale(100%) !important;
+}
+
+/* Public Key Display */
+.public-key-display {
+  background-color: #f4f4f4;
+  border: 1px solid #ddd;
+  padding: 8px;
+  margin-bottom: 16px;
+  word-break: break-all;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.public-key-label {
+  font-weight: bold;
+  margin-right: 8px;
+  white-space: nowrap;
+}
+
+.public-key-value {
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 480px) {
+  .public-key-display {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .public-key-label {
+    margin-right: 0;
+  }
 }

explorer/src/App.tsx

@@ -2,17 +2,17 @@ import React, { useEffect, useState, useRef } from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 import { LatLng, DivIcon } from "leaflet";
 import "leaflet/dist/leaflet.css";
-import init, { parse_seed, parse_notarized, parse_finalized } from "./alto_types/alto_types.js";
-import { WS_URL, PUBLIC_KEY, LOCATIONS } from "./config";
+import init, { parse_seed, parse_notarized, parse_finalized, leader_index } from "./alto_types/alto_types.js";
+import { WS_URL, PUBLIC_KEY, LOCATIONS, PUBLIC_KEY_HEX } from "./config";
 import { SeedJs, NotarizedJs, FinalizedJs, BlockJs } from "./types";
 import "./App.css";
 
 type ViewStatus = "growing" | "notarized" | "finalized" | "timed_out";
 
 interface ViewData {
   view: number;
-  location: [number, number];
-  locationName: string;
+  location?: [number, number];
+  locationName?: string;
   status: ViewStatus;
   startTime: number;
   notarizationTime?: number;
@@ -200,17 +200,15 @@ const App: React.FC = () => {
 
         // Add any missed views as skipped/timed out
         for (let missedView = startViewIndex; missedView < view; missedView++) {
-          const locationIndex = missedView % LOCATIONS.length;
-
           // Check if this view already exists
           const existingIndex = newViews.findIndex(v => v.view === missedView);
 
           if (existingIndex === -1) {
             // Only add if it doesn't already exist
             newViews.unshift({
               view: missedView,
-              location: LOCATIONS[locationIndex][0],
-              locationName: LOCATIONS[locationIndex][1],
+              location: undefined,
+              locationName: undefined,
               status: "timed_out",
               startTime: Date.now(),
             });
@@ -235,7 +233,7 @@ const App: React.FC = () => {
       }
 
       // Create the new view data
-      const locationIndex = view % LOCATIONS.length;
+      const locationIndex = leader_index(seed.signature, LOCATIONS.length);
       const newView: ViewData = {
         view,
         location: LOCATIONS[locationIndex][0],
@@ -316,11 +314,10 @@ const App: React.FC = () => {
       }
 
       // If view doesn't exist, create it
-      const locationIndex = view % LOCATIONS.length;
       return [{
         view,
-        location: LOCATIONS[locationIndex][0],
-        locationName: LOCATIONS[locationIndex][1],
+        location: undefined,
+        locationName: undefined,
         status: "notarized",
         startTime: Date.now(),
         notarizationTime: Date.now(),
@@ -361,11 +358,10 @@ const App: React.FC = () => {
       }
 
       // If view doesn't exist, create it
-      const locationIndex = view % LOCATIONS.length;
       return [{
         view,
-        location: LOCATIONS[locationIndex][0],
-        locationName: LOCATIONS[locationIndex][1],
+        location: undefined,
+        locationName: undefined,
         status: "finalized",
         startTime: Date.now(),
         finalizationTime: Date.now(),
@@ -422,14 +418,20 @@ const App: React.FC = () => {
       </header>
 
       <main className="app-main">
+        {/* Network Key */}
+        <div className="public-key-display">
+          <span className="public-key-label">Network Key:</span>
+          <span className="public-key-value">{PUBLIC_KEY_HEX}</span>
+        </div>
+
         {/* Map */}
         <div className="map-container">
           <MapContainer center={center} zoom={isMobile ? 1 : 2} style={{ height: "100%", width: "100%" }}>
             <TileLayer
               url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
               attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
             />
-            {views.length > 0 && (
+            {views.length > 0 && views[0].location !== undefined && (
               <Marker
                 key={views[0].view}
                 position={views[0].location}
@@ -453,17 +455,17 @@ const App: React.FC = () => {
           </MapContainer>
         </div>
 
-        {/* Legend */}
-        <div className="legend-container">
-          <LegendItem color="#aaa" label="Notarization" />
-          <LegendItem color="#d9ead3ff" label="Finalization" />
-          <LegendItem color="#274e13ff" label="Finalized" />
-          <LegendItem color="#f4ccccff" label="Skipped" />
-        </div>
-
-        {/* Bars */}
+        {/* Bars with integrated legend */}
         <div className="bars-container">
-          <h2 className="bars-title">Consensus Views</h2>
+          <div className="bars-header">
+            <h2 className="bars-title">Views</h2>
+            <div className="legend-container">
+              <LegendItem color="#aaa" label="Notarization" />
+              <LegendItem color="#d9ead3ff" label="Finalization" />
+              <LegendItem color="#274e13ff" label="Finalized" />
+              <LegendItem color="#f4ccccff" label="Skipped" />
+            </div>
+          </div>
           <div className="bars-list">
             {views.slice(0, 100).map((viewData) => (
               <Bar

explorer/src/alto_types/alto_types.js

@@ -83,6 +83,18 @@ export function parse_block(bytes) {
     return ret;
 }
 
+/**
+ * @param {Uint8Array} seed
+ * @param {number} participants
+ * @returns {number}
+ */
+export function leader_index(seed, participants) {
+    const ptr0 = passArray8ToWasm0(seed, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.leader_index(ptr0, len0, participants);
+    return ret >>> 0;
+}
+
 async function __wbg_load(module, imports) {
     if (typeof Response === 'function' && module instanceof Response) {
         if (typeof WebAssembly.instantiateStreaming === 'function') {