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

fixed overall layout

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