Merge pull request #1144 from openmina/frontend

Web node local startup

Author: directcuteo

frontend/angular.json

@@ -90,6 +90,15 @@
               ],
               "outputHashing": "all"
             },
+            "webnodelocal": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.webnodelocal.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
             "fuzzing": {
               "fileReplacements": [
                 {
@@ -120,6 +129,9 @@
             "development": {
               "browserTarget": "frontend:build:development"
             },
+            "webnodelocal": {
+              "browserTarget": "frontend:build:webnodelocal"
+            },
             "local": {
               "browserTarget": "frontend:build:local"
             },

frontend/package-lock.json

@@ -1,10 +1,11 @@
 {
   "name": "frontend",
-  "version": "1.0.180",
+  "version": "1.0.183",
   "scripts": {
     "install:deps": "npm install",
     "start": "npm install && ng serve --configuration local --open",
     "start:dev": "ng serve --configuration development",
+    "start:webnode": "ng serve --configuration webnodelocal",
     "start:dev:mobile": "ng serve --configuration development --host 0.0.0.0",
     "start:fuzzing": "npm run install:deps && ng build --configuration fuzzing && npm run start:bundle",
     "build": "ng build",

frontend/package.json

@@ -1,3 +1,5 @@
-<a href="https://tinyurl.com/MWNT-Application-Form" class="gradient fx-row-full-cent w-100 pointer">
-  Applications Close Soon <span class="mina-icon icon-200">arrow_right_alt</span>
+<a class="gradient fx-row-full-cent w-100">
+  <span class="mina-icon icon-200 mr-5">sports_score</span>
+  Mina Web Node Testnet Finished
+  <span class="mina-icon icon-200 ml-5">sports_score</span>
 </a>

frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.html

@@ -24,6 +24,6 @@
   }
 
   &:hover .mina-icon {
-    animation: bounceLeftToRight .85s infinite ease-out;
+    //animation: bounceLeftToRight .85s infinite ease-out;
   }
 }

frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.scss

@@ -6,7 +6,7 @@
        [@dropdownAnimation]="isMenuOpen ? 'open' : 'closed'"
        [class.open]="isMenuOpen"
        (clickOutside)="closeMenu()">
-    <a [class.active]="route === '/leaderboard'" routerLink="/leaderboard">Leaderboard</a>
+    <a target="_blank" href="https://docs.google.com/spreadsheets/d/15XDlohOD9wUl1_ixNaso1B3zbcWdb-ZHOAxQUwX1Gyc">Prize results</a>
     <a target="_blank" href="https://docs.google.com/document/d/1RcLo6NMZzTHixI3Q6lyzhib1oHJKDyrqMscEmXmS9NE/edit?usp=sharing">Program Details</a>
     <a target="_blank" href="https://docs.google.com/document/d/1YGsVuWNgS8CJPnMngLo7w44B7a955IS5-xUn6dCCcik/edit?usp=sharing">Prize Draw & Tie-Break
       Process</a>

frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.html

@@ -3,7 +3,7 @@
 <!--</div>-->
 
 <div class="flex-column h-100 w-100 overflow-y-scroll" #scrollContainer>
-<!--  <mina-leaderboard-apply class="w-100 flex-row"></mina-leaderboard-apply>-->
+  <mina-leaderboard-apply class="w-100 flex-row"></mina-leaderboard-apply>
   <mina-leaderboard-header></mina-leaderboard-header>
   <main class="flex-1 flex-column">
     <mina-leaderboard-title></mina-leaderboard-title>

frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.html

@@ -43,6 +43,8 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
   private tooltip: d3.Selection<HTMLDivElement, unknown, HTMLElement, undefined>;
   private simulation: Simulation<DashboardSplitsPeerSimulation, undefined>;
   private circles: d3.Selection<SVGCircleElement, DashboardSplitsPeerSimulation, SVGGElement, undefined>;
+  private webnodeInnerCircles: d3.Selection<SVGCircleElement, DashboardSplitsPeerSimulation, SVGGElement, undefined>;
+  private webnodeOuterCircles: d3.Selection<SVGCircleElement, DashboardSplitsPeerSimulation, SVGGElement, undefined>;
   private triangles: d3.Selection<SVGPathElement, DashboardSplitsPeerSimulation, SVGGElement, undefined>;
   private squares: d3.Selection<SVGRectElement, DashboardSplitsPeerSimulation, SVGGElement, undefined>;
   private diamonds: d3.Selection<SVGPathElement, DashboardSplitsPeerSimulation, SVGGElement, undefined>;
@@ -158,7 +160,8 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
         console.log('Spectral Gap:', spectralGap);
 
         this.renderGraph({ peers, links, sets });
-      }, tap(({ fetching }) => {
+      },
+      tap(({ fetching }) => {
         if (fetching) {
           this.fetching = fetching;
         }
@@ -245,7 +248,8 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
       .attr('class', d => `link ${d.source.address} ${d.target.address}`)
       .attr('stroke', 'var(--base-divider)');
 
-    const circleNodes = nodes.filter(peer => !peer.node || ['node', 'generator'].some(n => peer.node.toLowerCase().includes(n)));
+    const circleNodes = nodes.filter(peer => !peer.node || ['node', 'generator'].some(n => peer.node.toLowerCase().includes(n) && !peer.node.toLowerCase().includes('webnode')));
+    const webnodeNodes = nodes.filter(p => p.node).filter(peer => peer.node.toLowerCase().includes('webnode'));
     const triangleNodes = nodes.filter(p => p.node).filter(peer => peer.node.toLowerCase().includes('snark'));
     const squareNodes = nodes.filter(p => p.node).filter(peer => peer.node.toLowerCase().includes('prod'));
     const diamondNodes = nodes.filter(p => p.node).filter(peer => peer.node.toLowerCase().includes('seed'));
@@ -259,6 +263,34 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
       .attr('r', (d: DashboardSplitsPeerSimulation) => d.radius);
     this.addCommonProperties(this.circles, lines);
 
+    this.webnodeOuterCircles = this.getG('webnodes-outer', 'circle')
+      .attr('class', 'webnodes-outer')
+      .selectAll('circle')
+      .data(webnodeNodes)
+      .enter()
+      .append('circle')
+      .attr('r', (d: DashboardSplitsPeerSimulation) => d.radius)
+      .attr('fill', 'none')
+    this.addCommonProperties(this.webnodeOuterCircles, lines, true);
+
+    this.webnodeInnerCircles = this.getG('webnodes-inner', 'circle')
+      .attr('class', 'webnodes-inner')
+      .selectAll('circle')
+      .data(webnodeNodes)
+      .enter()
+      .append('circle')
+      .attr('r', (d: DashboardSplitsPeerSimulation) => d.radius * 0.7)
+      .attr('fill', 'var(--success-primary)')
+      .on('mouseover', (event: MouseEvent & { target: HTMLElement }, peer: DashboardSplitsPeerSimulation) => this.mouseOverHandle(peer, event, true))
+      .on('mouseout', (event: MouseEvent & { target: HTMLElement }, peer: DashboardSplitsPeerSimulation) => this.mouseOutHandler(peer, event, true))
+      .on('click', (_event: MouseEvent & { target: HTMLElement }, peer: DashboardSplitsPeerSimulation) => {
+        let selectedPeer = this.peers.find(p => p.address === peer.address);
+        if (selectedPeer === this.activePeer) {
+          selectedPeer = undefined;
+        }
+        this.dispatch(DashboardSplitsSetActivePeer, selectedPeer);
+      })
+
     this.triangles = this.getG('triangles', 'path')
       .attr('class', 'triangles')
       .selectAll('path')
@@ -291,6 +323,30 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
   private createSimulation(sets: DashboardSplitsSet[], nodes: DashboardSplitsPeerSimulation[], lines: DashboardSplitsLinkSimulation[]): void {
     const numberOfSets = sets.length;
     const matrixSize = Math.ceil(Math.sqrt(numberOfSets));
+    const getRepulsion = (sets: number) => {
+      switch (sets) {
+        case 1:
+          return 30;
+        case 2:
+          return 25;
+        case 3:
+          return 22;
+        case 4:
+          return 20;
+        case 5:
+          return 15;
+        case 6:
+          return 12;
+        case 7:
+          return 9;
+        case 8:
+          return 7;
+        case 9:
+          return 5;
+        default:
+          return 2;
+      }
+    }
     this.simulation = d3.forceSimulation<DashboardSplitsPeerSimulation>(nodes)
       .force('link', d3.forceLink(lines).distance(numberOfSets === 1 ? 250 : 100))  // This adds links between nodes and sets the distance between them
       .force('charge', d3.forceManyBody().strength(-30))  // control the repulsion between groups - negative means bigger distance
@@ -310,7 +366,7 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
         }
         return this.height;
       }).strength(0.05))
-      .force('collide', d3.forceCollide().radius(numberOfSets < 3 ? 25 : 17)) // This adds repulsion between nodes. Play with the radius
+      .force('collide', d3.forceCollide().radius(getRepulsion(numberOfSets))) // This adds repulsion between nodes. Play with the radius
       .force('center', d3.forceCenter(this.width / 2, this.height / 2))
       .force('bounds', () => {
         for (let node of nodes) {
@@ -331,6 +387,12 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
       this.circles
         .attr('cx', (d: DashboardSplitsPeerSimulation) => d.x)
         .attr('cy', (d: DashboardSplitsPeerSimulation) => d.y);
+      this.webnodeInnerCircles
+        .attr('cx', (d: DashboardSplitsPeerSimulation) => d.x)
+        .attr('cy', (d: DashboardSplitsPeerSimulation) => d.y);
+      this.webnodeOuterCircles
+        .attr('cx', (d: DashboardSplitsPeerSimulation) => d.x)
+        .attr('cy', (d: DashboardSplitsPeerSimulation) => d.y);
       this.triangles
         .attr('transform', (d: DashboardSplitsPeerSimulation) => `translate(${d.x}, ${d.y})`);
       this.squares
@@ -346,14 +408,14 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
     this.simulation.alpha(0.1); // controls how much the animation lasts
   }
 
-  private addCommonProperties(selection: d3.Selection<any, DashboardSplitsPeerSimulation, SVGGElement, undefined>, lines: DashboardSplitsLinkSimulation[]): void {
+  private addCommonProperties(selection: d3.Selection<any, DashboardSplitsPeerSimulation, SVGGElement, undefined>, lines: DashboardSplitsLinkSimulation[], noColorChange: boolean = false): void {
     selection
       .attr('fill', 'var(--special-node)')
       .attr('stroke', (d: DashboardSplitsPeerSimulation) => `var(--${lines.some(link => link.source.address === d.address || link.target.address === d.address) ? 'success' : 'warn'}-primary)`)
       .attr('stroke-width', 1)
-      .on('mouseover', (event: MouseEvent & { target: HTMLElement }, peer: DashboardSplitsPeerSimulation) => this.mouseOverHandle(peer, event))
-      .on('mouseout', (event: MouseEvent & { target: HTMLElement }, peer: DashboardSplitsPeerSimulation) => this.mouseOutHandler(peer, event))
-      .on('click', (event: MouseEvent & { target: HTMLElement }, peer: DashboardSplitsPeerSimulation) => {
+      .on('mouseover', (event: MouseEvent & { target: HTMLElement }, peer: DashboardSplitsPeerSimulation) => this.mouseOverHandle(peer, event, noColorChange))
+      .on('mouseout', (event: MouseEvent & { target: HTMLElement }, peer: DashboardSplitsPeerSimulation) => this.mouseOutHandler(peer, event, noColorChange))
+      .on('click', (_event: MouseEvent & { target: HTMLElement }, peer: DashboardSplitsPeerSimulation) => {
         let selectedPeer = this.peers.find(p => p.address === peer.address);
         if (selectedPeer === this.activePeer) {
           selectedPeer = undefined;
@@ -372,7 +434,7 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
       .attr('class', cls);
   }
 
-  private mouseOverHandle(peer: DashboardSplitsPeerSimulation, event: MouseEvent & { target: HTMLElement }): void {
+  private mouseOverHandle(peer: DashboardSplitsPeerSimulation, event: MouseEvent & { target: HTMLElement }, noColorChange: boolean = false): void {
     const selection = this.tooltip.html(`${peer.node || peer.address}, <span class="tertiary">→</span> ${peer.incomingConnections} <span class="tertiary">/</span> ${peer.outgoingConnections} <span class="tertiary">→</span>`)
       .style('display', 'block');
 
@@ -386,7 +448,9 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
     if (this.activePeer?.address === peer.address) {
       return;
     }
-    d3.select(event.target).attr('fill', 'var(--special-node-selected)');
+    if (!noColorChange) {
+      d3.select(event.target).attr('fill', 'var(--special-node-selected)');
+    }
     this.hoveredConnectedLinks = this.connections.filter(link => {
       const isDirectConnection = link.source.address === peer.address || link.target.address === peer.address;
       if (this.activePeer) {
@@ -398,12 +462,14 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
     this.hoveredConnectedLinks.attr('stroke', 'var(--success-primary)');
   }
 
-  private mouseOutHandler(peer: DashboardSplitsPeerSimulation, event: MouseEvent & { target: HTMLElement }): void {
+  private mouseOutHandler(peer: DashboardSplitsPeerSimulation, event: MouseEvent & { target: HTMLElement }, noColorChange: boolean = false): void {
     this.tooltip.style('display', 'none');
     if (this.activePeer?.address === peer.address) {
       return;
     }
-    d3.select(event.target).attr('fill', 'var(--special-node)');
+    if (!noColorChange) {
+      d3.select(event.target).attr('fill', 'var(--special-node)');
+    }
     this.hoveredConnectedLinks.attr('stroke', 'var(--base-divider)');
   }
 }

frontend/src/app/features/network/splits/dashboard-splits-graph/dashboard-splits-graph.component.ts

@@ -5,9 +5,6 @@
     <mina-copy [value]="row.address"></mina-copy>
   </span>
   <span>{{ row.node || '-' }}</span>
-  <span>
-    <mina-copy [value]="row.peerId" [display]="row.peerId | truncateMid: 0: 4"></mina-copy>
-  </span>
   <span class="primary text-right pr-12 mr-5">
     <span class="tertiary">→</span> {{ row.incomingConnections }} <span class="tertiary">/</span> {{ row.outgoingConnections }} <span class="tertiary">→</span>
   </span>

frontend/src/app/features/network/splits/dashboard-splits-side-panel-table/dashboard-splits-side-panel-table.component.html

@@ -0,0 +1,5 @@
+:host ::ng-deep .mina-table .row.head {
+  span:last-child {
+    justify-content: flex-end;
+  }
+}