Some improvement

samba-app/src/app/app.component.html

@@ -111,6 +111,7 @@
               <div class="action">
                 <button (click)="reset()" [class.disabled]="isPlaying">Reset</button>
                 <button (click)="moveToCumulativeRewardChapter()" [class.disabled]="isPlaying">End</button>
+                <button *ngIf="execution" (click)="listHistoryInHistoryDialog(execution.history)" [class.disabled]="isPlaying">Save</button>
               </div>
             </div>
 
@@ -125,7 +126,7 @@
 
         <!-- Message -->
         <div id="message" class="card">
-          <div class="card-title">Message</div>
+          <div class="card-title">Probabilities</div>
           <div class="card-content">
             <app-action-text [execution]="execution"></app-action-text>
           </div>
@@ -137,8 +138,7 @@
           <div class="card-content">
             <ul>
               <li>
-                Access to the <a href="https://github.com/gamarcad/samba-demo">git</a> to inspect the code.
-                Feel free to clone and modify it as you want.
+                Code available on <a href="https://github.com/gamarcad/samba-demo">github</a>.
               </li>
               <li>
                 <!-- TODO put the link to the paper -->
@@ -331,19 +331,6 @@
 
         <!-- Stats Panel -->
         <div id="stats-panel" class="panel" [class.highlightMode]="highlightStatus">
-          <app-execution-time-components-plot
-            [execution]="execution"
-            [securityOption]="securityOption"></app-execution-time-components-plot>
-
-          <app-execution-time-plot
-            [execution]="execution"
-            [securityOption]="securityOption"></app-execution-time-plot>
-
-
-          <!-- History Button -->
-          <div id="history">
-            <button (click)="showHistory()" [class.disabled]="isPlaying">History</button>
-          </div>
 
           <!-- Actions -->
           <div id="actions">
@@ -353,7 +340,19 @@
               <span *ngIf="isPlaying">Pause</span>
             </button>
             <button (click)="nextState()" [class.disabled]="isPlaying">Next</button>
+            <button id="history" (click)="showHistory()" [class.disabled]="isPlaying">History</button>
+            <button *ngIf="execution" (click)="listHistoryInHistoryDialog(execution.history)" [class.disabled]="isPlaying">Save</button>
           </div>
+
+          <app-execution-time-components-plot
+            [execution]="execution"
+            [securityOption]="securityOption"></app-execution-time-components-plot>
+
+          <app-execution-time-plot
+            [execution]="execution"
+            [securityOption]="securityOption"></app-execution-time-plot>
+
+
         </div>
 
 
@@ -365,7 +364,7 @@
   <!-- History -->
   <div id="history-container" *ngIf="showHistoryPopup" [class.hidden]="!showHistoryPopup">
     <div id="history-popup">
-      <app-history (closeEvent)="hideHistory()"></app-history>
+      <app-history (closeEvent)="hideHistory()" (deleteHistoryCallback)="deleteHistory($event)" [histories]="historiesToListInHistory"></app-history>
     </div>
   </div>
 </body>

samba-app/src/app/app.component.scss

@@ -81,12 +81,7 @@ $architecturePanelWidth: 30%;
     margin-bottom: 5px;
   }
 
-  #history {
-    position: absolute;
-    bottom: 0;
-    left: 47.5%;
-    margin-top: 5px;
-  }
+
 
   $buttonWidth: 75px;
   $buttonHeight: 20px;
@@ -102,6 +97,9 @@ $architecturePanelWidth: 30%;
     align-content: center;
     align-items: center;
 
+    #history {
+      border-left: 1px solid gray;
+    }
 
     button {
       text-align: center;

samba-app/src/app/app.component.ts

@@ -51,6 +51,7 @@ export class AppComponent implements OnInit, OnChanges  {
   ]
 
   BUDGETS_SET = [
+    10,
     50,
     100,
     200,
@@ -91,6 +92,7 @@ export class AppComponent implements OnInit, OnChanges  {
 
 
   history: ExecutionHistory | undefined;
+  historiesToListInHistory : ExecutionHistory[];
   securityOption : SecurityOption;
   paillier: boolean;
   mask : boolean;
@@ -110,6 +112,8 @@ export class AppComponent implements OnInit, OnChanges  {
     this.selectedThreshold = this.TRESHOLD_SET[0]
     this.selectedK = this.NB_ARMS_SET[0]
 
+    this.historiesToListInHistory = []
+
     this.focusedNode = {nodeIndex: 0}
     this.execution = undefined;
 
@@ -365,6 +369,8 @@ export class AppComponent implements OnInit, OnChanges  {
 
           }
         }
+        // save the history
+        this.listHistoryInHistoryDialog(this.execution.history);
       }
     }
 
@@ -393,6 +399,10 @@ export class AppComponent implements OnInit, OnChanges  {
     this.execution = JSON.parse(JSON.stringify(this.execution))
   }
 
+  /**
+   * Updates information displayed in the node's data panel.
+   * @param execution
+   */
   updateNodeVariable( execution : Execution ) {
     // define variables that we will used to update node var
     let rewards = []
@@ -458,6 +468,40 @@ export class AppComponent implements OnInit, OnChanges  {
       node.pulls = pulls[nodeIndex]
       nodeIndex++
     }
+
+  }
+
+  /**
+   * Adjust the position of each node's data panel in the architecture
+   */
+  adjustNodesPosition() {
+    // place each node at the right place
+    let HTMLNodes = document.getElementById("nodes")
+    if ( HTMLNodes == null || this.execution == null) return
+    let initialMarginLeft = 19;
+    let availableWidth = 85;
+    let current = initialMarginLeft
+    for ( let index = 0; index < HTMLNodes.childNodes.length; index++ ) {
+        let node : any = HTMLNodes.childNodes.item(index)
+        node.setAttribute( "style", "position: absolute; left:" + current +"%;" )
+      current = current + (availableWidth - initialMarginLeft) / this.execution.history.nb_arms
+    }
+    console.error("NODES",HTMLNodes)
+  }
+
+  /**
+   * List the given history in the History dialog.
+   */
+  listHistoryInHistoryDialog( history : ExecutionHistory ) {
+    // if the history already exists, ignore it
+    for ( let item of this.historiesToListInHistory ) {
+      if ( JSON.stringify(history) == JSON.stringify(item) ) {
+        return
+      }
+    }
+
+    // add it in the execution
+    this.historiesToListInHistory.push(history);
   }
 
   /**
@@ -510,7 +554,6 @@ export class AppComponent implements OnInit, OnChanges  {
 
   hideHistory() {
     this.showHistoryPopup = false;
-    console.log("Popup must be hidden now", this.showHistoryPopup)
   }
 
   existsInArray( arr : any[], item : any ) : boolean {
@@ -540,6 +583,12 @@ export class AppComponent implements OnInit, OnChanges  {
     this.onSecurityOptionsChanged()
   }
 
+  deleteHistory( history : ExecutionHistory ) {
+    this.historiesToListInHistory = this.historiesToListInHistory.filter( function (item : ExecutionHistory) {
+      return JSON.stringify(history) != JSON.stringify(item)
+    } )
+  }
+
   highlightStatus : boolean = false;
   switchHighlight($event: any) {
     this.highlightStatus = !this.highlightStatus;

samba-app/src/app/samba/action-text/action-text.component.html

@@ -4,7 +4,7 @@
     <tr>
       <td></td>
       <td>Exact</td>
-      <td>Approx</td>
+      <td>Estimate</td>
     </tr>
     <tr *ngFor="let prob of execution.history.probs; let index=index">
       <td>DO{{index}}</td>

samba-app/src/app/samba/architecture-plot/architecture-plot.component.ts

@@ -125,7 +125,7 @@ export class ArchitecturePlotComponent implements OnInit, OnChanges {
     nodes.push({
       name: SambaEntity.COMP,
       value: SambaEntity.known( SambaEntity.COMP, true, this.securityOption ),
-      x: middle / 4,
+      x: middle / 8,
       y: -height,
       itemStyle:  {
         color: this.configs.colors.comp,

samba-app/src/app/samba/communications-plot/communications-plot.component.html

 <div id="communications">
   <div id="unsecure" class="plots">
-    <h3 class="title-center">Non-Secure</h3>
+    <h3 class="title-center">Non-Secure Communications</h3>
     <div class="plot" *ngFor="let comm of communications" [class.reduce-opacity]="comm.hidden">
       <app-single-communications-plot
         *ngIf="!comm.hidden"
@@ -13,7 +13,7 @@
     </div>
   </div>
   <div id="secure" class="plots">
-    <h3 class="title-center">Secure</h3>
+    <h3 class="title-center">Secure Communications</h3>
     <div class="plot" *ngFor="let comm of communications"  [class.reduce-opacity]="comm.hidden"  >
       <app-single-communications-plot
         *ngIf="!comm.hidden"

samba-app/src/app/samba/execution-time-components-plot/execution-time-components-plot.component.scss

@@ -9,6 +9,8 @@
     position: relative;
     display: block;
     width: 50%;
+    margin-left: 5%;
+    margin-right: 5%;
 
     div {
       height: 200px;

samba-app/src/app/samba/history/history.component.html

@@ -7,16 +7,20 @@
     <tr class="header">
       <th scope="col">Algorithm</th>
       <th scope="col">Parameters</th>
-      <th scope="col">Budget</th>
-      <th scope="col">Secure Exec. Time (s)</th>
-      <th scope="col">Cumulative Rewards</th>
+      <th scope="col">N</th>
+      <th scope="col">K</th>
+      <th scope="col">Secure Time</th>
+      <th scope="col">Rewards</th>
+      <th scope="col"></th>
     </tr>
     <tr *ngFor="let history of histories; let i = index" [class.even]="i % 2 == 0" [class.odd]="i % 2 == 1">
       <td>{{getFormattedAlgorithName(history.algorithm)}}</td>
       <td><span *ngFor="let param of history.params">{{param.name}}: {{param.value}}</span></td>
       <td class="right">{{history.budget}}</td>
-      <td class="right">{{getExecutionTime(history)}}</td>
+      <td >{{history.nb_arms}}</td>
+      <td class="right">{{getExecutionTime(history)}}s</td>
       <td class="right">{{history.turns[history.turns.length - 1].cumulative_reward}}</td>
+      <td class="remove-cell"><button class="remove" (click)="deleteHistory(history)">Remove</button></td>
     </tr>
   </table>
 </div>

samba-app/src/app/samba/history/history.component.scss

@@ -29,6 +29,10 @@ table {
     padding: 5px;
   }
 
+  tr:nth-child(even) {
+    background-color: rgba(217, 209, 209, 0.46);
+  }
+
   tr {
     .odd {
       background-color: rgba(42, 41, 41, 0.18);
@@ -39,3 +43,22 @@ table {
     }
   }
 }
+.remove-cell {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+.remove {
+  border: 1px solid rgb(255, 0, 0);
+  color: red;
+  background: white;
+  border-radius: 5px;
+  padding: 3px;
+}
+
+.remove:hover {
+  cursor: pointer;
+  background-color: rgb(255, 0, 0);
+  color: white;
+}

samba-app/src/app/samba/history/history.component.ts

-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, OnInit, Output, Input} from '@angular/core';
 import {SambaApi} from "../../api/samba-api";
 import {ExecutionHistory} from "../executionHistory";
-import {exec} from "child_process";
 
 @Component({
   selector: 'app-history',
@@ -10,20 +9,21 @@ import {exec} from "child_process";
 })
 export class HistoryComponent implements OnInit {
 
-  histories : ExecutionHistory[];
+  @Input() histories : ExecutionHistory[];
   @Output() closeEvent = new EventEmitter<void>();
+  @Output() deleteHistoryCallback = new EventEmitter<ExecutionHistory>();
 
-  constructor( public api : SambaApi ) {
+
+  constructor() {
     this.histories = []
   }
 
   ngOnInit(): void {
-    this.api.getHistories().subscribe((data ) => {
-      this.histories = data
-      console.log(data)
-    })
+
   }
 
+
+
   getFormattedAlgorithName(algorithm: string) : string {
     if ( algorithm == 'epsilon-greedy' ) { return "Epsilon Greedy" }
     if ( algorithm == 'thompson-sampling' ) { return "Thompson Sampling" }
@@ -50,10 +50,18 @@ export class HistoryComponent implements OnInit {
       history.time.security.paillier.decryption
 
     return secureTime.toFixed(2)
-
   }
 
+
   close() {
     this.closeEvent.emit();
   }
+
+  /**
+   * Delete the history from the list of history
+   * @param history
+   */
+  deleteHistory(history : ExecutionHistory) {
+    this.deleteHistoryCallback.emit( history );
+  }
 }