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

fixed overall layout


Former-commit-id: 831d5752
parent 59ff53bf
......@@ -8,12 +8,13 @@
.subplot-container {
display: flex;
overflow-x: scroll;
width: 95%;
width: 100%;
}
.container {
display: flex;
justify-content: space-between;
height: 100%;
}
.train-button {
......
......@@ -37,22 +37,27 @@
.right {
width: 30%;
border-left: groove;
overflow: hidden;
}
.top {
height: 30%;
overflow-y: scroll;
border-bottom: groove;
}
.bot {
height: 70%;
height: 69%;
}
.progress {
height: 98%;
}
.container {
display: flex;
justify-content: space-between;
height: 100%;
width: 100%
}
mat-tab-group {
......
......@@ -7,7 +7,9 @@
<div class="channel_header">
Feedback
</div>
<app-training-window></app-training-window>
<div>
<app-training-window></app-training-window>
</div>
</div>
</div>
<div class="right">
......@@ -21,7 +23,9 @@
<div class="channel_header">
Results
</div>
<app-progress-view></app-progress-view>
<div class="progress">
<app-progress-view></app-progress-view>
</div>
</div>
</div>
</div>
......
......@@ -13,6 +13,7 @@
.list {
padding-top: 10px;
margin-left: 5px;
overflow-y: scroll;
}
.right {
......@@ -44,6 +45,10 @@ html, body {
overflow: scroll;
}
.overview {
overflow-y: scroll;
}
.small-margin {
margin: auto;
}
......
......@@ -3,7 +3,6 @@
<div class="channel_header">
Channels
</div>
<span class="example-list-section">
<div class="list">
<div class="list-element" *ngFor="let index of allChannels">
<mat-checkbox [checked]="isInSelection(index)"
......@@ -12,7 +11,6 @@
</mat-checkbox>
</div>
</div>
</span>
</div>
<div class="right">
<div class="channel_header">
......@@ -30,6 +28,8 @@
Set as query
</button>
</div>
<zingchart-angular #chart [id]="id" (mousewheel)="zoom($event)" (zoom)="ping()" [height]="height" (complete)="ping()"></zingchart-angular>
<div class="overview">
<zingchart-angular #chart [id]="id" (mousewheel)="zoom($event)" (zoom)="ping()" [height]="height" (complete)="ping()"></zingchart-angular>
</div>
</div>
</div>
......@@ -22,6 +22,11 @@
display: none;
}
.main-container {
overflow-y: scroll;
height: 100%;
}
.container {
display: flex;
justify-content: center;
......
<!--<svg id="visual" width='500' height='300'></svg>-->
<mat-tab-group animationDuration="0ms">
<mat-tab label="Classifier">
<div style="overflow-y: scroll">
<div *ngIf="data" class="histogram">
<div class="container">
<plotly-plot (hover)="onHover($event)" [data]="hist.data" [layout]="hist.layout"></plotly-plot>
</div>
<div class="slider">
<mat-slider [min]="0" [max]="maxLength" step="1" [value]="sliderValue" (input)="setSliderValue($event)" thumbLabel tickInterval="5"></mat-slider>
<div class="main-container">
<mat-tab-group animationDuration="0ms">
<mat-tab label="Classifier">
<div style="overflow-y: scroll">
<div *ngIf="data" class="histogram">
<div class="slider">
<mat-slider [min]="0" [max]="maxLength" step="1" [value]="sliderValue" (input)="setSliderValue($event)" thumbLabel tickInterval="5"></mat-slider>
</div>
<div class="container">
<fieldset>
<legend>Similarity distribution</legend>
<plotly-plot (hover)="onHover($event)" [data]="hist.data" [layout]="hist.layout"></plotly-plot>
</fieldset>
</div>
</div>
</div>
<div *ngIf="data" class="container">
<div class="window">
<div class="plots">
<plotly-plot *ngFor="let data of this.data; index as i;" [class.hide]="i != sliderValue" [data]="data" [layout]="layout"></plotly-plot>
<div *ngIf="data" class="container">
<div class="window">
<fieldset>
<legend>Uncertainty</legend>
<div class="plots">
<plotly-plot *ngFor="let data of this.data; index as i;" [class.hide]="i != sliderValue" [data]="data" [layout]="layout"></plotly-plot>
</div>
</fieldset>
</div>
</div>
<div *ngIf="data" class="container">
<button>
Show {{ nrOfCandidates }} similar candidates
</button>
</div>
</div>
<div *ngIf="data" class="container">
<button>
Show {{ nrOfCandidates }} similar candidates
</button>
</div>
</div>
</mat-tab>
<mat-tab label="History">
<ng-template matTabContent>
<app-state-management></app-state-management>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-tab>
<mat-tab label="History">
<ng-template matTabContent>
<app-state-management></app-state-management>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>
<script src='https://d3js.org/d3.v4.min.js'></script>
......@@ -3,6 +3,7 @@
margin: auto;
display: flex;
justify-content: center;
overflow-y: scroll;
}
.query-contents {
......
......@@ -45,3 +45,10 @@ button {
transition-duration: 0.4s;
cursor: pointer;
}
::ng-deep mat-tab-group{
height: 100%;
}
::ng-deep .mat-tab-body {
flex-grow: 1;
}
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