Cornelius/dev (#94)

* Implemented Tooltips:
- file format explanations
- info that n dimensions are being supported
- info that t-SNE and PCA is used
- info that local execution can push a device to its limits
- info that the download file format is png

Deleted unnecessary routeToLogin() method.

* Changes by cedricpurwin

* Update input.component.html

Correction of previous commit: Made the expert options disable again when no file is uploaded

* Update input.component.html

Fixed syntax error (missing ")

* Update input.component.html

Made more precise tooltop regarding PCA and t-SNE

* Update input.component.html

Made even more precise tooltip regarding t-SNE and PCA on request of Klaus

---------

Co-authored-by: cookie.exe <[email protected]>
Co-authored-by: Cornelius Daemberg <[email protected]>

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle'
 import { TableComponent } from './home/chart-container/table/table.component'
 import { MatTabsModule } from '@angular/material/tabs'
 import { MatTableModule } from '@angular/material/table'
+import { MatTooltipModule } from '@angular/material/tooltip'
 
 const routes: Routes = [{ path: 'home', component: HomeComponent },
   { path: '', redirectTo: '/home', pathMatch: 'full' }]
@@ -53,7 +54,8 @@ const routes: Routes = [{ path: 'home', component: HomeComponent },
     MatExpansionModule,
     MatSlideToggleModule,
     MatTabsModule,
-    MatTableModule
+    MatTableModule,
+    MatTooltipModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/home/chart-container/chart/chart.component.html

@@ -3,7 +3,7 @@
     <canvas class="chart-canvas" id="Chart">{{ chart }}</canvas>
   </div>
   <a id="chartDownload">
-    <button mat-button>Download Chart</button>
+    <button mat-button matTooltip="Als PNG herunterladen">Download Chart</button>
   </a>
 
 </div>

src/app/home/home.component.ts

@@ -29,8 +29,4 @@ export class HomeComponent {
   public handleLoading (status: boolean): void {
     this.isLoading = status
   }
-
-  public routeToLogin (): void {
-    void this.router.navigate(['/login'])
-  }
 }

src/app/home/input/input.component.css

@@ -33,6 +33,9 @@
 
   .button-row{
     horiz-align: center;
+    display: grid;
+    text-align: left;
+    grid-template-columns: 20% 60% 20%;
   }
 }
 .dropzone:hover{

src/app/home/input/input.component.html

@@ -2,16 +2,21 @@
   <form class="form-container" [formGroup]="clusterInputFormGroup" (ngSubmit)="submit()">
     <h1 class="grid-over-two-columns">K-Means durchführen</h1>
 
-    <div class="grid-over-two-columns dropzone" (dragover)="onDragOver($event)" (drop)="onDropSuccess($event)">
+    <div class="grid-over-two-columns dropzone" (dragover)="onDragOver($event)" (drop)="onDropSuccess($event)" matTooltip="">
       <input type="file" style="display: none" (change)="onChange($event)" #fileUpload >
 
       <h3>Ziehe eine .csv / .xlsx Datei per Drag & Drop hierher</h3>
       <h3>oder</h3>
 
       <div class="button-row">
-        <button mat-raised-button (click)="fileUpload.click()" color="accent" type="button">
+        <div></div>
+        <button mat-raised-button (click)="fileUpload.click()" color="accent" type="button" matTooltip="Bei CSV-Dateien wird das Trennzeichen automatisch erkannt.">
           Lade eine Datei hoch <mat-icon>upload_file</mat-icon>
         </button>
+        <div>
+          <mat-icon style="color: #616161; margin-left: 8px; margin-top: 5px;" fontIcon="info"
+                       matTooltip="Jede Spalte der Datei entspricht einer Dimension. Es werden beliebig viele Dimensionen unterstützt."></mat-icon></div>
+
       </div>
 
     </div>
@@ -31,17 +36,20 @@ <h3>oder</h3>
 
           <div class="settings-grid">
             <div>Spaltenauswahl</div>
+
             <mat-form-field class="fixed-width-field"
-                            [class.has-error]="clusterInputFormGroup.get('selectedColumns')?.hasError('twoColumnsRequired')">
+                            [class.has-error]="clusterInputFormGroup.get('selectedColumns')?.hasError('twoColumnsRequired')" >
               <mat-label>Spalten</mat-label>
-              <mat-select multiple formControlName="selectedColumns">
+              <mat-select multiple formControlName="selectedColumns" matTooltip="Bei mehr als zwei Dimensionen wird zur Dimensionsreduzierung bei lokaler Ausführung PCA, bei Server-Ausführung t-SNE verwendet"  matTooltipPosition="above">
                 <mat-option *ngFor="let column of columnNames" [value]="column">{{column}} </mat-option>
               </mat-select>
-              <mat-error *ngIf="clusterInputFormGroup.get('selectedColumns')?.hasError('twoColumnsRequired')">
+              <mat-error *ngIf="clusterInputFormGroup.get('selectedColumns')?.hasError('twoColumnsRequired') ">
                 Bitte mindestens 2 Spalten auswählen.
               </mat-error>
             </mat-form-field>
 
+
+
             <div>Anzahl der Cluster (optional)</div>
             <div>
               <mat-form-field floatLabel="always" class="fixed-width-field">
@@ -69,7 +77,7 @@ <h3>oder</h3>
               </mat-button-toggle-group>
             </div>
             <div class="grid-over-two-columns">
-              <mat-slide-toggle name="localSelector" aria-label="execute locally" formControlName="offlineKmeans" (change)="updateClusterDetermination()">Lokal im Browser ausführen</mat-slide-toggle>            </div>
+              <mat-slide-toggle name="localSelector" aria-label="execute locally" formControlName="offlineKmeans" (change)="updateClusterDetermination()" matTooltip="Je nach Datenmenge kann diese Option dein Gerät an die Grenzen bringen.">Lokal im Browser ausführen</mat-slide-toggle></div>
           </div>
         </mat-expansion-panel>
       </mat-accordion>