Commit ff38f996 authored by gamarcad's avatar gamarcad
Browse files

Some improvement

parent 4c29b521
......@@ -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>
......
......@@ -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;
......
......@@ -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;
......
......@@ -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>
......
......@@ -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,
......
<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"
......
......@@ -9,6 +9,8 @@
position: relative;
display: block;
width: 50%;
margin-left: 5%;
margin-right: 5%;
div {
height: 200px;
......
......@@ -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>
......
......@@ -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;
}
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 );
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment