Add logic to detect empty file and improve UI

googleinterns · Oct 31, 2022 · 6df3dcc · 6df3dcc
1 parent fc7f86e
commit 6df3dcc
Show file tree

Hide file tree

Showing 20 changed files with 39 additions and 96 deletions.
diff --git a/backend/main.py b/backend/main.py
@@ -73,7 +73,11 @@ def get_data():
     client = storage.Client()
     fetcher = DataFetcher(name, PREPROCESS_DIR,
                           client.bucket(PREPROCESS_BUCKET))
-
+    bucket = client.bucket(RAW_BUCKET)
+    file =  bucket.blob(name)
+    if not file.exists():
+        response = make_response('Target file does not exist, please check file name')
+        return response, 404
     if not fetcher.is_preprocessed():
         response = make_response('Preprocessing incomplete.')
         return response, 404

diff --git a/frontend/dist/frontend/3rdpartylicenses.txt b/frontend/dist/frontend/3rdpartylicenses.txt
@@ -60,6 +60,9 @@ MIT
 @angular/forms
 MIT
 
+@angular/localize
+MIT
+
 @angular/material
 MIT
 The MIT License

diff --git a/frontend/dist/frontend/index.html b/frontend/dist/frontend/index.html
@@ -31,8 +31,8 @@
       rel="stylesheet"
     />
     <script src="https://api-dot-tank-big-data-plotting-285623.googleplex.com/empty.js"></script>
-  <link rel="stylesheet" href="styles.1e8480a9465fccb42f4b.css"></head>
+  <link rel="stylesheet" href="styles.9cc795de30faa8473576.css"></head>
   <body class="mat-typography">
     <app-root></app-root>
-  <script src="runtime-es2015.1eba213af0b233498d9d.js" type="module"></script><script src="runtime-es5.1eba213af0b233498d9d.js" nomodule defer></script><script src="polyfills-es5.d8c2c2305bb085369072.js" nomodule defer></script><script src="polyfills-es2015.39c2887a7b855dbb44c9.js" type="module"></script><script src="main-es2015.8862358a24d701574726.js" type="module"></script><script src="main-es5.8862358a24d701574726.js" nomodule defer></script></body>
+  <script src="runtime-es2015.0dae8cbc97194c7caed4.js" type="module"></script><script src="runtime-es5.0dae8cbc97194c7caed4.js" nomodule defer></script><script src="polyfills-es5.69c85fcea851aa3b77d9.js" nomodule defer></script><script src="polyfills-es2015.a9dba46e05c1741973db.js" type="module"></script><script src="main-es2015.4e97e65bb9fba75be658.js" type="module"></script><script src="main-es5.4e97e65bb9fba75be658.js" nomodule defer></script></body>
 </html>
diff --git a/frontend/dist/frontend/main-es2015.4e97e65bb9fba75be658.js b/frontend/dist/frontend/main-es2015.4e97e65bb9fba75be658.js
diff --git a/frontend/dist/frontend/main-es2015.8862358a24d701574726.js b/frontend/dist/frontend/main-es2015.8862358a24d701574726.js
diff --git a/frontend/dist/frontend/main-es5.4e97e65bb9fba75be658.js b/frontend/dist/frontend/main-es5.4e97e65bb9fba75be658.js
diff --git a/frontend/dist/frontend/main-es5.8862358a24d701574726.js b/frontend/dist/frontend/main-es5.8862358a24d701574726.js
diff --git a/frontend/dist/frontend/polyfills-es2015.39c2887a7b855dbb44c9.js b/frontend/dist/frontend/polyfills-es2015.39c2887a7b855dbb44c9.js
diff --git a/frontend/dist/frontend/polyfills-es2015.a9dba46e05c1741973db.js b/frontend/dist/frontend/polyfills-es2015.a9dba46e05c1741973db.js
diff --git a/frontend/dist/frontend/polyfills-es5.69c85fcea851aa3b77d9.js b/frontend/dist/frontend/polyfills-es5.69c85fcea851aa3b77d9.js
diff --git a/frontend/dist/frontend/polyfills-es5.d8c2c2305bb085369072.js b/frontend/dist/frontend/polyfills-es5.d8c2c2305bb085369072.js
diff --git a/...nd/runtime-es2015.1eba213af0b233498d9d.js → ...nd/runtime-es2015.0dae8cbc97194c7caed4.js b/...nd/runtime-es2015.1eba213af0b233498d9d.js → ...nd/runtime-es2015.0dae8cbc97194c7caed4.js
diff --git a/...ntend/runtime-es5.1eba213af0b233498d9d.js → ...ntend/runtime-es5.0dae8cbc97194c7caed4.js b/...ntend/runtime-es5.1eba213af0b233498d9d.js → ...ntend/runtime-es5.0dae8cbc97194c7caed4.js
diff --git a/frontend/dist/frontend/styles.1e8480a9465fccb42f4b.css b/frontend/dist/frontend/styles.1e8480a9465fccb42f4b.css
diff --git a/frontend/dist/frontend/styles.9cc795de30faa8473576.css b/frontend/dist/frontend/styles.9cc795de30faa8473576.css
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -36,7 +36,7 @@
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
+    "jasmine-core": "~3.8.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",

diff --git a/frontend/src/app/file-list/file-list.component.html b/frontend/src/app/file-list/file-list.component.html
@@ -6,14 +6,11 @@
   <span class="mat-headline">TAnK - BDP</span>
 </div>
 <mat-divider></mat-divider>
-<mat-progress-bar mode="indeterminate" *ngIf="loading"></mat-progress-bar>
-<div class="search-container">
-  <mat-icon aria-hidden="false" aria-label="search">search</mat-icon>
-  <input type="text" name="search" (keyup)="searchFile($event)"><br><br>
-</div>
-<mat-selection-list #files [multiple]="false" class="mat-filelist" *ngIf="!loading&&!loadingError">
-  <mat-list-option *ngFor="let file of displayList" [value]="file" (click)="selectFile(file)">
-    {{file}}
-  </mat-list-option>
-</mat-selection-list>
+<p class="mat-h3">Instructions</p>
+<mat-list role="list" dense>
+  <mat-list-item role="listitem">Select a range on the chart to zoom in</mat-list-item>
+  <mat-list-item role="listitem">Double click to return to the top level</mat-list-item>
+  <mat-list-item role="listitem">Hover on the chart to check metric values</mat-list-item>
+  <mat-list-item role="listitem">Click on the selectable legend to display/hide channel</mat-list-item>
+</mat-list>
 <div class="place-holder"></div>
diff --git a/frontend/src/app/file-list/file-list.component.scss b/frontend/src/app/file-list/file-list.component.scss
@@ -23,29 +23,6 @@ mat-list-option{
   vertical-align: middle;
 }
 
-.file-header{
-  margin: 16px 0 4px 16px;
-  padding: 0;
-}
-.search-container{
-  display: flex;
-  border: 1px solid #ddd;
-  max-width: $sidebar-width - 16px;
-  align-items: center;
-  padding-left: 16px;
-  mat-icon{
-    font-size: 26px;
-  }
-  input{
-    width: 100%;
-    height: 100%;
-    outline: none;
-    border: none;
-    height: 30px;
-    font-size: 16px;
-    padding: 4px 0 0 8px;
-  }
-}
 
 .place-holder{
   width: $sidebar-width;
@@ -55,4 +32,13 @@ mat-list-option{
   font-size: 14px;
   overflow: auto !important;
   margin: 8px 0;
+}
+
+.mat-list-base[dense] .mat-list-item {
+  font-size: 14px !important;
+}
+
+p{
+  padding: 0 16px;
+  margin: 16px 0 0;
 }
diff --git a/frontend/src/app/file-list/file-list.component.ts b/frontend/src/app/file-list/file-list.component.ts
@@ -25,31 +25,6 @@ export class FileListComponent implements OnInit {
   constructor(private service: HttpService, private readonly fileService: FileServiceService,private readonly location: Location, private readonly router: Router) {
    }
 
-  selectFile(file: string){
-    this.selectedFilename = file;
-    this.updateUrl();
-    this.fileService.updateFilename(file);
-  }
-
-  searchFile(event: any){
-    const keyword = event.target.value.toLowerCase();
-    const keywords = keyword.split(" ");
-    this.displayList = [];
-    for(let file of this.fileList){
-      for(let i=0;i<keywords.length;i++){
-        if(!file.toLowerCase().includes(keywords[i])){
-          break;
-        }
-        if(i===keywords.length-1){
-          this.displayList.push(file);
-        }
-      }
-    }
-    if(this.displayList.length === 0){
-      this.displayList.push("No record found")
-    }
-  }
-
   updateUrl() {
     const url = this.router
       .createUrlTree([window.location.pathname], {
@@ -64,28 +39,6 @@ export class FileListComponent implements OnInit {
     this.fileService.filename.subscribe(filename => {
       this.selectedFilename = filename;
     });
-    this.loading = true;
-    this.loadingError = false;
-    this.service
-      .getFileInfo('/fileinfo')
-      .pipe(
-        catchError((error: HttpErrorResponse) => {
-          this.loadingError = true;
-          if (error.error instanceof ProgressEvent) {
-            console.error(error.message)
-          } else {
-            console.error(error.error);
-          }
-          return throwError(error);
-        })
-      )
-      .subscribe((response: ResponseFileInfo[]) => {
-        for(let fileInfo of response){
-          this.fileList.push(fileInfo.name);
-        }
-        this.displayList = this.fileList;
-        this.loading = false;
-      });
   }
 
 }