Test deployment (#60)

* Fixed FireFox Bug * Disable K Determination when k is not empty; Removed Jaccard * Filter out invalid Arrays, throw Error if more than 25% of data was removed * Filter out invalid Arrays, throw Error if more than 25% of data was removed * Cedric/remove sidedrawer and login component (#53) * removed Sidedrawer * removed login component * Clean up repo (#55) * Delete dockerfile * Delete cloudbuild.yaml * Deleted src/assets/.gitkeep * Test deployment (#58) * Fixed FireFox Bug * Disable K Determination when k is not empty; Removed Jaccard * Filter out invalid Arrays, throw Error if more than 25% of data was removed * Filter out invalid Arrays, throw Error if more than 25% of data was removed * Cedric/remove sidedrawer and login component (#53) * removed Sidedrawer * removed login component --------- Co-authored-by: khuepp <[email protected]> * Delete dockerfile * Delete cloudbuild.yaml * Deleted src/assets/.gitkeep * Removed Name input and changed heading --------- Co-authored-by: cepurwin <[email protected]> Co-authored-by: khuepp <[email protected]> Co-authored-by: cepurwin <[email protected]> * Fixed manifest-error in dev-console (#61) * Delete dockerfile * Delete cloudbuild.yaml * Deleted src/assets/.gitkeep * Klaas/clustering (#51) * front without logic implemented * läuft mit einem Fehler * Deutsch * Added Kmeans Service File and Test * Sync test-deployment with main (#29) * Installed Playwright for E2E-Testing * Installed ESLint * Added Linting as GitHub Action * Removed Linting as GitHub Action * csv inport (#24) * front without logic implemented * läuft mit einem Fehler * Deutsch * Update sync-test-deploy-branch.yaml (#25) * Update sync-test-deploy-branch.yaml * Update sync-test-deploy-branch.yaml * Finalized sync-test-deploy-branch.yaml (#28) Should work now. Was tested in separate repo --------- Co-authored-by: david-2031 <[email protected]> * Daniel/only https (#30) * Installed Playwright for E2E-Testing * Installed ESLint * Added Linting as GitHub Action * Removed Linting as GitHub Action * csv inport (#24) * front without logic implemented * läuft mit einem Fehler * Deutsch * Update sync-test-deploy-branch.yaml (#25) * Update sync-test-deploy-branch.yaml * Update sync-test-deploy-branch.yaml * Finalized sync-test-deploy-branch.yaml (#28) Should work now. Was tested in separate repo * Ensured only HTTPS is used to access * Fixed Routing Bug (Probably) --------- Co-authored-by: david-2031 <[email protected]> * Inputfeld Manhattan/Euclidean, Input lokale Berechnung * Sync test-deployment with main (#31) * Chart working with Mock-Data * Removed unused import * Installed Playwright for E2E-Testing * Installed ESLint * Added Linting as GitHub Action * Removed Linting as GitHub Action * csv inport (#24) * front without logic implemented * läuft mit einem Fehler * Deutsch * Chart working with Mock-Data * Removed unused import * Update sync-test-deploy-branch.yaml (#25) * Update sync-test-deploy-branch.yaml * Update sync-test-deploy-branch.yaml * Finalized sync-test-deploy-branch.yaml (#28) Should work now. Was tested in separate repo --------- Co-authored-by: cepurwin <[email protected]> Co-authored-by: david-2031 <[email protected]> * Inputfeld Manhattan/Euclidean; Input lokale Berechnung; Hinweis dass K optional ist * Update cloudbuild.yaml * Update app.yaml * Ensured usage of HTTPS * Optionen für die Methode zur Bestiummung von K eingebaut (Ellenbogen, Silhouette); Berechnungsmethode um Methode "Jaccard" ergänzt Alle Optionen wurden in ein Expansion Panel eingebaut * Daniel/fix merge conflicts1 (#36) * Update input.component.css from main for fixing merge conflict * Update input.component.html from main for fixing merge conflict * Update input.component.ts from main for fixing merge conflict * Sync test-deployment with main (#33) * Chart working with Mock-Data * Removed unused import * Installed Playwright for E2E-Testing * Installed ESLint * Added Linting as GitHub Action * Removed Linting as GitHub Action * csv inport (#24) * front without logic implemented * läuft mit einem Fehler * Deutsch * Chart working with Mock-Data * Removed unused import * Update sync-test-deploy-branch.yaml (#25) * Update sync-test-deploy-branch.yaml * Update sync-test-deploy-branch.yaml * Finalized sync-test-deploy-branch.yaml (#28) Should work now. Was tested in separate repo * Dave/import data format (#32) * edited upload text * display uploaded data * Fixed reloading bug (#35) * Update app.yaml * Update cloudbuild.yaml --------- Co-authored-by: cepurwin <[email protected]> Co-authored-by: david-2031 <[email protected]> * Got linting to working and added GitHub action "lint" (#39) * Added Kmeans Service File and Test * Fixed most linting errors * CSV-File Reading implemented * KMeans and JSON-result implementet * Added Elbow Method * Added Elbow Method * Added Elbow Method * Added automatic detection for different csv delimiters * Added automatic detection for different csv delimiters * Added Excel Support, CSV-Service accepts Files (same format as Excel-Service), KMeans-Service cleaner * Merged CSV and Excel Service; moved decision on which file type is used to Data-Service * Adjusted CSV-Service naming * Added Drop-Down-Field for selecting Columns. Default: first two columns are selected * Give Backend API the selected columns * Clean Up Package.json * Disable Jaccard and Silhoutte when in local mode; Cleaned up package.json * Forgot package-lock.json * removed console logs from table component --------- Co-authored-by: david-2031 <[email protected]> Co-authored-by: REDDERD <[email protected]> Co-authored-by: david-2031 <[email protected]> Co-authored-by: cookie.exe <[email protected]> Co-authored-by: cepurwin <[email protected]> Co-authored-by: Cornelius Daemberg <[email protected]> * Test deployment (#56) * Fixed FireFox Bug * Disable K Determination when k is not empty; Removed Jaccard * Filter out invalid Arrays, throw Error if more than 25% of data was removed * Filter out invalid Arrays, throw Error if more than 25% of data was removed --------- Co-authored-by: khuepp <[email protected]> * Test deployment (#58) * Fixed FireFox Bug * Disable K Determination when k is not empty; Removed Jaccard * Filter out invalid Arrays, throw Error if more than 25% of data was removed * Filter out invalid Arrays, throw Error if more than 25% of data was removed * Cedric/remove sidedrawer and login component (#53) * removed Sidedrawer * removed login component --------- Co-authored-by: khuepp <[email protected]> * Updated site.webmanifest * Updated index.html * Updated index.html * Updated index.html * Updated index.html * Updated index.html * Fixed Manifest error --------- Co-authored-by: khuepp <[email protected]> Co-authored-by: david-2031 <[email protected]> Co-authored-by: david-2031 <[email protected]> Co-authored-by: cookie.exe <[email protected]> Co-authored-by: cepurwin <[email protected]> Co-authored-by: Cornelius Daemberg <[email protected]> Co-authored-by: cepurwin <[email protected]> * Disabled Expert-Settings when no file is uploaded * k bug fix * added new Endpoints (#62) * Fixed Column-Selection Bug (no columns can be "selected" too now). * Simplified function in input component * K-Bug V2 --------- Co-authored-by: khuepp <[email protected]> Co-authored-by: REDDERD <[email protected]> Co-authored-by: david-2031 <[email protected]> Co-authored-by: david-2031 <[email protected]> Co-authored-by: cookie.exe <[email protected]> Co-authored-by: Cornelius Daemberg <[email protected]>
REDDERD · Oct 11, 2023 · 244a24c · 244a24c
1 parent 5a82d24
commit 244a24c
Show file tree

Hide file tree

Showing 13 changed files with 44 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,22 @@
 # Programmierprojekt
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.1.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.1. For running the following commands, it is neccessary to install said CLI.
 
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
+## Online server
+
+### Accessibility
+
+The project is available online at www.clustericke.de. A separate branch (test-deployment) is also available online at www.test.clustericke.de. You can push changes directly to test-deployment, then the build process is triggered and the changes are deployed to www.test.clustericke.de.
+
+### CI/CD-Pipeline
+
+For viewing triggers and builds see [Google Cloud Build](https://console.cloud.google.com/cloud-build/builds?project=programmierprojektfrontend).
+For viewing the deployed versions, traffic allocation and monitoring traffic see [Google App Engine](https://console.cloud.google.com/appengine?project=programmierprojektfrontend&serviceId=default).
+
 ## Code scaffolding
 
 Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
@@ -14,13 +25,15 @@ Run `ng generate component component-name` to generate a new component. You can
 
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-## Running unit tests
+## Testing
+
+### Unit-Tests
 
 Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-## Running end-to-end tests
+### End-to-end tests
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+Run `npx playwright test` to execute end-to-end test via [Playwright](https://playwright.dev/).
 
 ## Further help
 

diff --git a/cloudbuild.yaml b/cloudbuild.yaml
diff --git a/dockerfile b/dockerfile
diff --git a/src/app/home/chart-container/chart/mock-daten.ts b/src/app/home/chart-container/chart/mock-daten.ts
@@ -10,7 +10,5 @@ export const MockDaten: ResponseInterface = {
   y_label: '',
   iterations: 4,
   used_distance_metric: 'EUCLIDEAN',
-  used_optK_method: 'ELBOW',
-  clusters_elbow: 21,
-  clusters_silhouette: 2
+  k_value: 4
 }
diff --git a/src/app/home/home-services/api.service.ts b/src/app/home/home-services/api.service.ts
@@ -15,6 +15,11 @@ export class ApiService {
     clusterDetermination?: string
   ): Observable<any> {
     let Params: HttpParams = new HttpParams()
+    let url = 'https://beta.axellotl.de/advanced/perform-advanced-2d-kmeans/'
+
+    if (kCluster !== 0) {
+      url = 'https://beta.axellotl.de/basic/perform-2d-kmeans/'
+    }
 
     if (column1 != null) {
       Params = Params.set('column1', column1)
@@ -36,7 +41,7 @@ export class ApiService {
     formData.append('file', new Blob([csv], { type: 'text/csv' }), csv.name)
 
     return this.http.post(
-      'https://beta.axellotl.de/clustering/perform-kmeans-clustering/',
+      url,
       formData,
       { params: Params }
     )

diff --git a/src/app/home/home-services/kmeans-local.service.ts b/src/app/home/home-services/kmeans-local.service.ts
@@ -108,9 +108,7 @@ export class KmeansLocalService {
       y_label: yLabel,
       iterations: result.iterations,
       used_distance_metric: distanceMetric,
-      used_optK_method: 'deine Mutter',
-      clusters_elbow: 0,
-      clusters_silhouette: 0
+      k_value: 1
     }
   }
 

diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
@@ -71,6 +71,6 @@ mat-drawer {
   background-color: rgba(106, 106, 106, 0.5);
   position: absolute;
   width: 100vw;
-  height: 100vh;
+  height: 120vh;
   z-index: 9;
 }
diff --git a/src/app/home/input/input.component.html b/src/app/home/input/input.component.html
@@ -1,10 +1,6 @@
 <div class="center-contents">
   <form class="form-container" [formGroup]="clusterInputFormGroup" (ngSubmit)="submit()">
-    <h1 class="grid-over-two-columns">Clustering</h1>
-    <mat-form-field class="grid-over-two-columns">
-      <mat-label>Name des Clusters</mat-label>
-      <input matInput placeholder="Vorgang XY" formControlName="clusterName">
-    </mat-form-field>
+    <h1 class="grid-over-two-columns">K-Means durchführen</h1>
 
     <div class="grid-over-two-columns dropzone" (dragover)="onDragOver($event)" (drop)="onDropSuccess($event)">
       <input type="file" style="display: none" (change)="onChange($event)" #fileUpload >
@@ -27,7 +23,7 @@ <h3>oder</h3>
 
     <div class="grid-over-two-columns" style="margin-bottom: 22px;">
       <mat-accordion>
-        <mat-expansion-panel>
+        <mat-expansion-panel [disabled]="!isFileUploaded()">
           <mat-expansion-panel-header>
             <mat-panel-title>Experteneinstellungen</mat-panel-title>
           </mat-expansion-panel-header>
@@ -38,7 +34,7 @@ <h3>oder</h3>
             <mat-form-field class="fixed-width-field"
                             [class.has-error]="clusterInputFormGroup.get('selectedColumns')?.hasError('twoColumnsRequired')">
               <mat-label>Spalten</mat-label>
-              <mat-select multiple formControlName="selectedColumns" [(value)]="selectedColumnsValue">
+              <mat-select multiple formControlName="selectedColumns">
                 <mat-option *ngFor="let column of columnNames" [value]="column">{{column}} </mat-option>
               </mat-select>
               <mat-error *ngIf="clusterInputFormGroup.get('selectedColumns')?.hasError('twoColumnsRequired')">

diff --git a/src/app/home/input/input.component.ts b/src/app/home/input/input.component.ts
@@ -13,12 +13,11 @@ import { DataTo2dArrayService } from '../home-services/data-to-2d-array.service'
 })
 export class InputComponent {
   clusterInputFormGroup = new FormGroup({
-    clusterName: new FormControl(''),
     k: new FormControl(''),
     distanceMetric: new FormControl('EUCLIDEAN'),
     clusterDetermination: new FormControl('SILHOUETTE'),
     offlineKmeans: new FormControl(false),
-    selectedColumns: new FormControl<number[]>([], [this.twoColumnsSelectedValidator()])
+    selectedColumns: new FormControl<string[]>([], [this.twoColumnsSelectedValidator()])
   })
 
   @Output() kmeansResult: EventEmitter<ResponseInterface> = new EventEmitter<ResponseInterface>()
@@ -59,7 +58,10 @@ export class InputComponent {
           })
       }
     } else {
-      if ((this.file != null) && (this.clusterInputFormGroup.value.distanceMetric != null) && (this.clusterInputFormGroup.value.clusterDetermination != null)) {
+      if ((this.file != null) && (this.clusterInputFormGroup.value.distanceMetric != null)) {
+        if (this.clusterInputFormGroup.value.clusterDetermination == null) {
+          this.clusterInputFormGroup.value.clusterDetermination = undefined
+        }
         this.isLoading.emit(true)
         this.apiService.postKmeans(
           this.file,
@@ -104,12 +106,13 @@ export class InputComponent {
 
       this.dataTo2DArrayService.dataTo2DArray(file).then(data => {
         // Spaltennamen (Header) extrahieren
-        if (data !== null && data !== undefined && data.length > 0) {
+        if (data !== null && data !== undefined && data.length > 1) {
           this.columnNames = data[0]
+          // Setzen Sie die ersten beiden Spalten als standardmäßig ausgewählt
+          this.clusterInputFormGroup.get('selectedColumns')?.setValue([this.columnNames[0], this.columnNames[1]])
         }
-        this.clusterInputFormGroup.get('selectedColumns')?.setValue([])
       }).catch(error => {
-        this.snackbar.open('Fehler beim Lesen der Datei', 'Okay', { duration: 3000 })
+        this.snackbar.open('Daten fehlerhaft.', 'Okay', { duration: 3000 })
         console.error(error)
       })
     } else {
@@ -129,24 +132,17 @@ export class InputComponent {
   }
 
   get selectedColumnsValue (): string[] {
-    const value = this.clusterInputFormGroup.get('selectedColumns')?.value
-    if (value === null || value === undefined || value.length === 0) {
-      if (Array.isArray(this.columnNames) && this.columnNames.length > 1) {
-        return [this.columnNames[0], this.columnNames[1]]
-      }
-      return []
-    }
-    return value.map((val: number) => val.toString())
-  }
-
-  set selectedColumnsValue (value: number[] | null) {
-    this.clusterInputFormGroup.get('selectedColumns')?.setValue(value)
+    return this.clusterInputFormGroup.get('selectedColumns')?.value ?? []
   }
 
   get selectedColumnsIndices (): number[] {
     return this.selectedColumnsValue.map(name => this.columnNames.indexOf(name))
   }
 
+  isFileUploaded (): boolean {
+    return this.file !== null && this.file !== undefined
+  }
+
   hasKValue (): boolean {
     const kValue = this.clusterInputFormGroup.get('k')?.value
     return kValue !== ''

diff --git a/src/app/interfaces/response-interface.ts b/src/app/interfaces/response-interface.ts
@@ -7,9 +7,7 @@ export interface ResponseInterface {
   'y_label': string
   'iterations': number
   'used_distance_metric': string
-  'used_optK_method': string
-  'clusters_elbow': number
-  'clusters_silhouette': number
+  'k_value': number
 }
 
 export interface Cluster {

diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
diff --git a/src/assets/favicon/site.webmanifest b/src/assets/favicon/site.webmanifest
diff --git a/src/index.html b/src/index.html
@@ -8,7 +8,6 @@
   <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
-  <link rel="manifest" href="assets/favicon/site.webmanifest">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">