Commit 6d109146 authored by Kruyff,D.L.W. (Dylan)'s avatar Kruyff,D.L.W. (Dylan)
Browse files

Stable margins and overflow


Former-commit-id: 9316e75b
parent a1a7ba13
......@@ -2552,6 +2552,21 @@
"resolved": "https://registry.npmjs.org/angular-plotly.js/-/angular-plotly.js-2.0.0.tgz",
"integrity": "sha512-LXOIovVABli5KSg4va7D4xw1Mu246iUOrT3yIy3ktK87BMdwSOCGaX2jijwLpgbTLvRc62PxwSFHVsOM4XTwJg=="
},
"angular-split": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/angular-split/-/angular-split-5.0.0.tgz",
"integrity": "sha512-V7m/mdp31189EGeVRw5j6MOfb8EiYoDqr8XTay4D7GcCpEm2+7oHD1n6eWbCvQMuRb8X3ZfP2pZNDmJs8bLaAg==",
"requires": {
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
"integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
}
}
},
"ansi-colors": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
......
......@@ -22,6 +22,7 @@
"@angular/platform-browser-dynamic": "~9.1.12",
"@angular/router": "~9.1.12",
"angular-plotly.js": "^2.0.0",
"angular-split": "^5.0.0",
"d3": "^5.0.0",
"plotly.js": "^1.54.6",
"rxjs": "~6.5.4",
......
......@@ -22,6 +22,7 @@ import {MatSliderModule} from '@angular/material/slider';
import { TrainingWindowComponent } from './training-window/training-window.component';
import {MatCheckboxModule} from '@angular/material/checkbox';
import { StateManagementComponent } from './state-management/state-management.component';
import {AngularSplitModule} from 'angular-split';
PlotlyModule.plotlyjs = PlotlyJS;
......@@ -48,7 +49,8 @@ PlotlyModule.plotlyjs = PlotlyJS;
MatProgressBarModule,
MatCheckboxModule,
ZingchartAngularModule,
MatSliderModule
MatSliderModule,
AngularSplitModule,
],
providers: [],
bootstrap: [AppComponent]
......
.subplot {
margin-right: 20px;
justify-content: center;
border-right: 1px solid;
border-bottom: 1px solid;
margin: 20px;
height: max-content;
border: 2px solid;
border-radius: 25px;
padding: 20px;
}
.subplot-container {
......@@ -32,9 +33,10 @@
.channel_header {
height: 20px;
padding: 10px;
border-bottom: 1px solid lightgray;
color: black;
font-weight: 400;
font-weight: 500;
text-align: center;
vertical-align: middle;
}
......
<div class="container">
<div class="subplot-container">
<div class="subplot" *ngFor="let subplot of subplots">
<div class="channel_header" [ngStyle]="{'background-color': subplot.color}">
index: {{ subplot.index }}
<div class="subplot" *ngFor="let subplot of subplots" [ngStyle]="{'border-color': subplot.color}">
<div class="channel_header">
Index: {{ subplot.index }}
</div>
<div class="button-holder">
<button class="correct-button label-button" [class.correct-selected]="labels[subplot.index]" (click)="labelCorrect(subplot.index)">&#10004;</button>
......
......@@ -73,7 +73,6 @@ export class LabelingWindowComponent implements OnInit {
subplots: subplots,
},
showlegend: false,
title: `Index: ${this.topk[idx].toString()}`,
hovermode: 'closest',
autosize: true,
margin: {
......
......@@ -31,31 +31,41 @@
}
.left {
display: flex;
flex-direction: column;
width: 70%;
}
.right {
width: 30%;
flex-grow: 1; /*width: 30%;*/
border-left: groove;
overflow: hidden;
display: flex;
flex-direction: column;
}
.top {
height: 30%;
display: flex;
flex-direction: column;
min-height: 30%;
max-height: 30%;
border-bottom: groove;
}
.bot {
height: 69%;
flex-grow: 1;
display: flex;
flex-direction: column;
/*height: 69%;*/
}
.progress {
height: 98%;
flex-grow: 1;
height: 10px;
}
.container {
display: flex;
justify-content: space-between;
height: 100%;
width: 100%
}
......@@ -77,3 +87,7 @@ mat-tab-group {
text-align: center;
vertical-align: middle;
}
app-overview-window {
height: 100%;
}
......@@ -7,7 +7,7 @@
<div class="channel_header">
Feedback
</div>
<div>
<div class="progress">
<app-training-window></app-training-window>
</div>
</div>
......@@ -17,7 +17,9 @@
<div class="channel_header">
Query
</div>
<app-query-window></app-query-window>
<div class="progress">
<app-query-window></app-query-window>
</div>
</div>
<div class="bot">
<div class="channel_header">
......
......@@ -19,6 +19,7 @@
.right {
width: 85%;
border-left: groove;
overflow: scroll;
}
.container {
......
......@@ -8,8 +8,11 @@
}
.subplot {
border-right: 1px solid;
border-bottom: 1px solid;
margin: 20px;
height: max-content;
border: 2px solid;
border-radius: 25px;
padding: 20px;
}
.plotly-plot, .button-holder {
......@@ -33,10 +36,9 @@
.channel_header {
height: 20px;
background-color: lightblue;
border-bottom: 1px solid lightgray;
padding: 10px;
color: black;
font-weight: 400;
font-weight: 500;
text-align: center;
vertical-align: middle;
}
......@@ -47,3 +49,7 @@
.neutral-selected { background-color: #ffa300
}
.incorrect-selected { background-color: #f44336 }
fieldset {
margin: 10px 0;
}
......@@ -8,8 +8,14 @@
<button class="correct-button label-button" [class.correct-selected]="labels[subplot.index]" (click)="labelCorrect(subplot.index)">&#10004;</button>
<button class="neutral-button label-button" [class.neutral-selected]="labels[subplot.index] == undefined" (click)="labelUndefined(subplot.index)">&#8226;</button>
</div>
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
<plotly-plot class="plotly-plot" [data]="averages[i]" [layout]="layout"></plotly-plot>
<fieldset>
<legend>Similarity distribution</legend>
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
</fieldset>
<fieldset>
<legend>Top-20 windows</legend>
<plotly-plot class="plotly-plot" [data]="averages[i]" [layout]="layout"></plotly-plot>
</fieldset>
</div>
</div>
<!-- <div class="plots">-->
......
Markdown is supported
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