Sync test-deployment with main

.github/workflows/playwright.yml

@@ -1,9 +1,14 @@
 name: Playwright Tests
 on:
+  schedule:
+    - cron: '35 4 * * *'
   push:
-    branches: '**'
+    branches: [ main, test-deployment ]
+  pull_request:
+    branches: [ main, test-deployment ]
+
 jobs:
-  test:
+  E2E_Tests:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
@@ -13,6 +18,16 @@ jobs:
         node-version: 18
     - name: Install dependencies
       run: npm ci
+    - name: Install Angular CLI
+      run: npm install -g @angular/cli
+    - name: Start local server in the background
+      run: ng serve &
+    - name: Wait for the server to start
+      run: |
+        until nc -z -w5 localhost 4200; do
+          echo 'Waiting for the local server to start...'
+          sleep 5
+        done     
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
     - name: Run Playwright tests

playwright.config.ts

@@ -37,11 +37,6 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },

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-services/api.service.spec.ts

@@ -1,21 +1,71 @@
 import { TestBed } from '@angular/core/testing'
-
 import { ApiService } from './api.service'
 import { HttpClientModule } from '@angular/common/http'
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'
 
 describe('ApiService', () => {
   let service: ApiService
+  let httpMock: HttpTestingController
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpClientModule
+        HttpClientModule,
+        HttpClientTestingModule
       ]
     })
     service = TestBed.inject(ApiService)
+    httpMock = TestBed.inject(HttpTestingController)
   })
 
   it('should be created', () => {
     expect(service).toBeTruthy()
   })
+
+  it('should perform basic 2d api call', () => {
+    const mockResponse = {}
+    const mockFile = new File(['test'], 'test.csv', { type: 'text/csv' })
+
+    service.postKmeans(mockFile, 1, 2, 3, 'euclidean', 'auto', false).subscribe(response => {
+      expect(response).toEqual(mockResponse)
+    })
+
+    const req = httpMock.expectOne(request => request.url.startsWith('https://app.axellotl.de/basic/perform-2d-kmeans/'))
+    expect(req.request.method).toBe('POST')
+    expect(req.request.params.get('column1')).toBe('1')
+    expect(req.request.params.get('column2')).toBe('2')
+    expect(req.request.params.get('k_clusters')).toBe('3')
+    expect(req.request.params.get('distanceMetric')).toBe('euclidean')
+    expect(req.request.params.get('clusterDetermination')).toBe('auto')
+
+    req.flush(mockResponse)
+  })
+
+  it('should perform n dimensional api call with k', () => {
+    const mockResponse = {}
+    const mockFile = new File(['test'], 'test.csv', { type: 'text/csv' })
+
+    service.postKmeans(mockFile, 1, 2, 3, 'euclidean', 'auto', true).subscribe(response => {
+      expect(response).toEqual(mockResponse)
+    })
+
+    const req = httpMock.expectOne(request => request.url.startsWith('https://app.axellotl.de/basic/perform-nd-kmeans/'))
+    expect(req.request.method).toBe('POST')
+
+    req.flush(mockResponse)
+  })
+
+  it('should perform n dimensional api call without k', () => {
+    const mockResponse = {}
+    const mockFile = new File(['test'], 'test.csv', { type: 'text/csv' })
+
+    service.postKmeans(mockFile, 1, 2, undefined, 'euclidean', 'auto', true).subscribe(response => {
+      expect(response).toEqual(mockResponse)
+    })
+
+    const req = httpMock.expectOne(request => request.url.startsWith('https://app.axellotl.de/basic/perform-nd-kmeans/'))
+    expect(req.request.method).toBe('POST')
+
+    req.flush(mockResponse)
+  })
 })

src/app/home/home-services/api.service.ts

@@ -16,16 +16,16 @@ export class ApiService {
     nDimensional?: boolean
   ): Observable<any> {
     let Params: HttpParams = new HttpParams()
-    let url = 'https://beta.axellotl.de/advanced/perform-advanced-2d-kmeans/'
+    let url = 'https://app.axellotl.de/advanced/perform-advanced-2d-kmeans/'
     if (nDimensional === true) {
       if (kCluster !== 0) {
-        url = 'https://beta.axellotl.de/basic/perform-nd-kmeans/'
+        url = 'https://app.axellotl.de/basic/perform-nd-kmeans/'
       } else {
-        url = 'https://beta.axellotl.de/advanced/perform-advanced-nd-kmeans/'
+        url = 'https://app.axellotl.de/advanced/perform-advanced-nd-kmeans/'
       }
     } else {
       if (kCluster !== 0) {
-        url = 'https://beta.axellotl.de/basic/perform-2d-kmeans/'
+        url = 'https://app.axellotl.de/basic/perform-2d-kmeans/'
       }
     }
     if (nDimensional === false) {
@@ -48,7 +48,6 @@ export class ApiService {
 
     const formData = new FormData()
     formData.append('file', new Blob([csv], { type: 'text/csv' }), csv.name)
-
     return this.http.post(
       url,
       formData,

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

@@ -9,9 +9,14 @@ <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>