Adjustable dividers

AngularApp/prototype/package.json

@@ -7,7 +7,8 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "postinstall": "ngcc"
   },
   "private": true,
   "dependencies": {

AngularApp/prototype/src/app/labeling-window/labeling-window.component.css

@@ -34,7 +34,6 @@
 .channel_header {
   height: 20px;
   padding: 10px;
-  border-bottom: 1px solid lightgray;
   color: black;
   font-weight: 500;
   text-align: center;

AngularApp/prototype/src/app/main/main.component.html

 <div class="container">
-  <div class="left">
-    <div class="top">
-      <app-overview-window style="z-index: 10"></app-overview-window>
-    </div>
-    <div class="bot">
-      <div class="channel_header">
-        Feedback
-      </div>
-      <div class="progress">
-        <app-training-window></app-training-window>
-      </div>
-    </div>
-  </div>
-  <div class="right">
-    <div class="top">
-      <div class="channel_header">
-        Query
-      </div>
-      <div class="progress">
-        <app-query-window></app-query-window>
-      </div>
-    </div>
-    <div class="bot">
-      <div class="channel_header">
-        Results
-      </div>
-      <div class="progress">
-        <app-progress-view></app-progress-view>
-      </div>
-    </div>
-  </div>
+  <as-split direction="vertical">
+    <as-split-area [size]="30">
+
+      <as-split direction="horizontal">
+        <as-split-area [size]="70">
+          <app-overview-window style="z-index: 10"></app-overview-window>
+        </as-split-area>
+
+        <as-split-area [size]="30">
+          <div class="channel_header">
+            Query
+          </div>
+          <div class="progress">
+            <app-query-window></app-query-window>
+          </div>
+        </as-split-area>
+      </as-split>
+
+    </as-split-area>
+    <as-split-area [size]="70">
+
+      <as-split direction="horizontal">
+        <as-split-area [size]="70">
+          <div class="channel_header">
+            Feedback
+          </div>
+          <div class="progress">
+            <app-training-window></app-training-window>
+          </div>
+        </as-split-area>
+        <as-split-area [size]="30">
+          <div class="channel_header">
+            Results
+          </div>
+          <div class="progress">
+            <app-progress-view></app-progress-view>
+          </div>
+        </as-split-area>
+      </as-split>
+
+    </as-split-area>
+  </as-split>
 </div>
 <div class="overlay" [class.show]="greyOut" *ngIf="loadingProgress != 100"></div>
 <div class="loading-progress" *ngIf="loadingProgress != 100">

AngularApp/prototype/src/app/overview-window/overview-window.component.css

@@ -8,12 +8,15 @@
 
 .left {
   width: 15%;
+  display: flex;
+  flex-direction: column;
 }
 
 .list {
   padding-top: 10px;
   margin-left: 5px;
   overflow-y: scroll;
+  flex-grow: 1;
 }
 
 .right {

AngularApp/prototype/src/app/progress-view/progress-view.component.css

@@ -24,7 +24,6 @@
 
 .main-container {
   overflow-y: scroll;
-  height: 100%;
 }
 
 .container {

AngularApp/prototype/src/app/query-window/query-window.component.css

 .query-container {
-  height: 100%;
   margin: auto;
   display: flex;
   justify-content: center;

AngularApp/prototype/src/app/table-overview/table-overview.component.css

@@ -10,7 +10,7 @@
 .subplot {
   margin: 20px;
   height: max-content;
-  border: 2px solid;
+  border: 2px solid lightblue;
   border-radius: 25px;
   padding: 20px;
 }

AngularApp/prototype/src/app/training-window/training-window.component.css

 .container {
-  height: 100%;
   position: relative;
 }
 
-.top {
-  height: 50%;
-  overflow-y: scroll;
-  border-bottom: groove;
-}
-
-.bot {
-  height: 50%;
-  overflow-y: scroll;
-}
-
 .train-button:hover {
   background-color: white;
   color: black;
@@ -45,10 +33,3 @@ button {
   transition-duration: 0.4s;
   cursor: pointer;
 }
-
-::ng-deep mat-tab-group{
-  height: 100%;
-}
-::ng-deep .mat-tab-body {
-  flex-grow: 1;
-}