Els Service: get Artists

Add link with angular-tag-cloud
It's OK with angular4-word-cloud
2017-10-13 20:32:28 +02:00 · 2017-10-13 20:00:09 +02:00 · 2017-10-13 19:59:44 +02:00 · 2017-10-12 01:19:10 +02:00 · 2017-10-12 00:31:20 +02:00 · 2017-10-12 00:27:50 +02:00
152 changed files with 26993 additions and 18848 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,18 +0,0 @@
-node_modules/
-.vscode/
-/es-albums.json
-/es-artists.json
-/es-songs.json
-/iTunesLibrary.xml
-
-# Working files
-*.txt
-*.code-workspace
-
-# Snippets for tests
-snippet.py
-snippet.js
-dashboard/resultToStudy.json
-sand_box.py
-rating_test.py
-iTunesGraphParser.my.py
--- a/README.md
+++ b/README.md
@@ -1,21 +0,0 @@
-# Classic data
-
-1. Analyze data :
-
-```sh
-python3 iTunesParser.py
-```
-2. Send data to ELS :
-
-```sh
-python3 send_data.py -D -A
-```
-
-# Suggester
-
-To use suggester, create index with data in `suggester.es` file.
-Then :
-
-```sh
-python3 suggester.py
-```
--- a/check_id.py
+++ b/check_id.py
@@ -1,26 +0,0 @@
-import json
-
-files = ['es-songs.json', 'es-artists.json', 'es-albums.json']
-
-ids = []
-bad_lines = {}
-
-for file in files:
-    with open(file) as fp:
-        line = fp.readline()
-
-        while line:
-            content = json.loads(line)
-            if 'index' in content:
-                id = content['index']['_id']
-                if id in ids:
-                    bad_lines[id] = content
-                else:
-                    ids.append(id)
-            line = fp.readline()
-
-if not bad_lines:
-    print("No duplicate ID's found, everything's fine!!")
-else:
-    print('KO')
-    print(bad_lines)
--- a/dashboard/.angular-cli.json
+++ b/dashboard/.angular-cli.json
@@ -0,0 +1,63 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "dashboard"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css",
+        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
+      ],
+      "scripts": [
+        "../node_modules/angular4-word-cloud/d3.min.js"
+      ],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}
--- a/dashboard/.gitignore
+++ b/dashboard/.gitignore
@@ -25,7 +25,6 @@
 !.vscode/extensions.json

 # misc
-/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
--- a/dashboard/.nvmrc
+++ b/dashboard/.nvmrc
@@ -1 +0,0 @@
-v18.12.1
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -1,27 +0,0 @@
-# Dashboard
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.4.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## 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`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
--- a/dashboard/angular.json
+++ b/dashboard/angular.json
@@ -1,118 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "dashboard": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/dashboard",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "tsConfig": "tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ],
-            "styles": [
-              "src/styles.css",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css"
-            ],
-            "scripts": [],
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
-            }
-          },
-          "defaultConfiguration": ""
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "buildTarget": "dashboard:build"
-          },
-          "configurations": {
-            "production": {
-              "buildTarget": "dashboard:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "dashboard:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ],
-            "styles": [
-              "src/styles.css",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css"
-            ],
-            "scripts": []
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "dashboard:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "dashboard:serve:production"
-            }
-          }
-        }
-      }
-    }
-  }
-}
--- a/dashboard/e2e/app.e2e-spec.ts
+++ b/dashboard/e2e/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('dashboard App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  });
+});
--- a/dashboard/e2e/app.po.ts
+++ b/dashboard/e2e/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}
--- a/dashboard/e2e/src/app.e2e-spec.ts
+++ b/dashboard/e2e/src/app.e2e-spec.ts
@@ -1,23 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', async () => {
-    await page.navigateTo();
-    expect(await page.getTitleText()).toEqual('dashboard app is running!');
-  });
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
-  });
-});
--- a/dashboard/e2e/src/app.po.ts
+++ b/dashboard/e2e/src/app.po.ts
@@ -1,11 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class AppPage {
-  async navigateTo(): Promise<unknown> {
-    return browser.get(browser.baseUrl);
-  }
-
-  async getTitleText(): Promise<string> {
-    return element(by.css('app-root .content span')).getText();
-  }
-}
--- a/dashboard/e2e/tsconfig.e2e.json
+++ b/dashboard/e2e/tsconfig.e2e.json
@@ -1,12 +1,13 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
    "module": "commonjs",
-    "target": "es2018",
+    "target": "es5",
    "types": [
      "jasmine",
+      "jasminewd2",
      "node"
    ]
  }
--- a/dashboard/karma.conf.js
+++ b/dashboard/karma.conf.js
@@ -4,33 +4,23 @@
 module.exports = function (config) {
  config.set({
    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
+    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/dashboard'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
+    angularCli: {
+      environment: 'dev'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
@@ -38,7 +28,6 @@ module.exports = function (config) {
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
+    singleRun: false
  });
 };
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -1,6 +1,7 @@
 {
  "name": "dashboard",
  "version": "0.0.0",
+  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
@@ -11,38 +12,42 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^17.1.0",
-    "@angular/common": "^17.1.0",
-    "@angular/compiler": "^17.1.0",
-    "@angular/core": "^17.1.0",
-    "@angular/forms": "^17.1.0",
-    "@angular/localize": "^17.1.0",
-    "@angular/platform-browser": "^17.1.0",
-    "@angular/platform-browser-dynamic": "^17.1.0",
-    "@angular/router": "^17.1.0",
-    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
-    "bootstrap": "^3.4.1",
-    "rxjs": "~7.8.1",
-    "tslib": "^2.6.2",
-    "zone.js": "^0.14.3"
+    "@angular/animations": "^4.2.4",
+    "@angular/common": "^4.2.4",
+    "@angular/compiler": "^4.2.4",
+    "@angular/core": "^4.2.4",
+    "@angular/forms": "^4.2.4",
+    "@angular/http": "^4.2.4",
+    "@angular/platform-browser": "^4.2.4",
+    "@angular/platform-browser-dynamic": "^4.2.4",
+    "@angular/router": "^4.2.4",
+    "angular-tag-cloud-module": "^1.4.0",
+    "angular4-word-cloud": "^0.1.2",
+    "bootstrap": "3.3.7",
+    "core-js": "^2.4.1",
+    "d3": "^4.11.0",
+    "rxjs": "^5.4.2",
+    "zone.js": "^0.8.14"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^17.1.0",
-    "@angular/cli": "^17.1.0",
-    "@angular/compiler-cli": "^17.1.0",
-    "@types/jasmine": "~5.1.4",
-    "@types/node": "^20.11.5",
-    "codelyzer": "^6.0.2",
-    "jasmine-core": "~5.1.1",
-    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.2",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.1",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.1.0",
-    "protractor": "~7.0.0",
-    "ts-node": "~10.9.2",
-    "tslint": "~6.1.0",
-    "typescript": "~5.3.3"
+    "@angular/cli": "1.3.2",
+    "@angular/compiler-cli": "^4.2.4",
+    "@angular/language-service": "^4.2.4",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~3.1.1",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3"
  }
 }
--- a/dashboard/protractor.conf.js
+++ b/dashboard/protractor.conf.js
@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
--- a/dashboard/src/app/album/album.component.css
+++ b/dashboard/src/app/album/album.component.css
@@ -0,0 +1,37 @@
+/* Thank to https://codyhouse.co/gem/back-to-top/ */
+
+.btn-top {
+  display: inline-block;
+  height: 40px;
+  width: 40px;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+  /* image replacement properties */
+  /*overflow: hidden;*/
+  /*text-indent: 100%;*/
+  /*white-space: nowrap;*/
+  /*background: rgba(232, 98, 86, 0.8);*/
+  /*background: #ff9000;*/
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
+  -moz-transition: opacity .3s 0s, visibility 0s .3s;
+  transition: opacity .3s 0s, visibility 0s .3s;
+}
+.btn-top.btn-top-is-visible, .no-touch .btn-top:hover {
+  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
+  -moz-transition: opacity .3s 0s, visibility 0s 0s;
+  transition: opacity .3s 0s, visibility 0s 0s;
+}
+.btn-top.btn-top-is-visible {
+  /* the button becomes visible */
+  visibility: visible;
+  opacity: 1;
+}
+
+.btn-sort {
+  bottom: 20px;
+  right: 70px;
+}
--- a/dashboard/src/app/album/album.component.html
+++ b/dashboard/src/app/album/album.component.html
@@ -1,15 +1,8 @@
 <div class="container">
  <h1>{{albumName}}</h1>

-  <div *ngIf="sortFilter" class="alert alert-danger">
-    To sort filter applyed. Songs are filter on location. <br/>
-    Album folder: {{album['Location']}}
-  </div>
-
  <div class="alert alert-warning">
-      <img  class="images" src="data:image/png;base64, {{album.Cover}}" height="500"/>
      <h3>Debug Zone</h3>
-      ID: {{album.id}}<br />
      Returned song: {{songs.length}}<br />
      Theorical number song: {{ album ? album['Track Count'] : ""  }}
      <span *ngIf="album && (songs.length == album['Track Count'])" class="glyphicon glyphicon-ok" style="color:green"></span>
@@ -17,7 +10,7 @@
  </div>

  <div class="row cardAdmin">
-      <div class="col-lg-3 col-md-3 col-sm-6">
+      <div class="col-lg-3 col-md-3">
          <div class="panel panel-yellow">
              <div class="panel-heading">
                  <div class="row">
@@ -27,7 +20,7 @@
                      <div class="col-xs-9 text-right">
                          <div>
                              <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                              <h3 *ngIf="album">{{album['Album Rating']}}/100</h3>
+                              <h3 *ngIf="album">{{album.Rating}}/100</h3>
                          </div>
                          <div><br>Rating</div>
                      </div>
@@ -35,7 +28,7 @@
              </div>
          </div>
      </div>
-      <div class="col-lg-3 col-md-3 col-sm-6">
+      <div class="col-lg-3 col-md-3">
          <div class="panel panel-green">
              <div class="panel-heading">
                  <div class="row">
@@ -53,7 +46,7 @@
              </div>
          </div>
      </div>
-      <div class="col-lg-3 col-md-3 col-sm-6">
+      <div class="col-lg-3 col-md-3">
          <div class="panel panel-purple">
              <div class="panel-heading">
                  <div class="row">
@@ -71,7 +64,7 @@
              </div>
          </div>
      </div>
-      <div class="col-lg-3 col-md-3 col-sm-6">
+      <div class="col-lg-3 col-md-3">
          <div class="panel panel-blue">
              <div class="panel-heading">
                  <div class="row">
@@ -91,9 +84,38 @@
      </div>
  </div>

-  <app-song-table [songs]=songs (atBottom)=loadSongs()></app-song-table>
+  <table class="table table-striped" (window:scroll)="onScroll($event)">
+  <thead>
+      <tr>
+          <th></th>
+          <th>Name</th>
+          <th>Artist</th>
+          <th>Album</th>
+          <th>Album Artist</th>
+          <th>Play Count</th>
+          <th>Genre</th>
+      </tr>
+  </thead>
+  <tbody>
+      <tr *ngFor="let song of songs | sortBy : 'Track Number'">
+          <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
+          <td>{{song.Name}}</td>
+          <td><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
+          <td><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
+          <td>{{song['Album Artist']}}</td>
+          <td>{{song['Play Count']}}</td>
+          <td><a [routerLink]="['/genre', song.Genre]">{{song.Genre}}</a></td>
+      </tr>
+  </tbody>
+  </table>

  <button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
  </button>
+
+  <!-- Go to Top Button-->
+  <button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="atBottom"
+      aria-label="Top" (click)="scrollTop()">
+      <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
+  </button>
  </div>
--- a/dashboard/src/app/album/album.component.ts
+++ b/dashboard/src/app/album/album.component.ts
@@ -1,73 +1,80 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';

-import { Song } from './../model/song';
-import { Album } from './../model/album';
-import { SongTableComponent } from '../song-table/song-table.component';
-
-import { TsService } from '../ts-service/ts.service';
-import { TsAlbumService } from '../ts-service/ts-album.service';
+import { ElsService } from './../els.service';
+import { Song } from './../object/song';
+import { Album } from './../object/album';

@Component({
  selector: 'app-album',
  templateUrl: './album.component.html',
-  styleUrls: [ './album.component.css', './../dashboard/dashboard.component.css' ]
+  styleUrls: [ './album.component.css', './../dashboard.component.css' ]
 })

 export class AlbumComponent implements OnInit {
-  @ViewChild(SongTableComponent) private songtable: SongTableComponent;
-
  albumName = '';
  songs: Array<Song> = [];
  album: Album = new Album(); // If album not found, will be replaced by 'undefined'
-  sortFilter: boolean = false; // Show only song to sort
-
-  // Prevent useless data load + activate button in interface var
-  moreDataAvailable = true;
-  lockLoadData = false;
+  moreDataAvailable = false;
+  atBottom = false;

  constructor(
-    private tsAlbumService: TsAlbumService,
-    private route: ActivatedRoute
+    private elsService: ElsService,
+    private route: ActivatedRoute,
+    private location: Location
  ) { }

  ngOnInit(): void {
-    this.route.params.subscribe((params: Params) => this.albumName = params['name']);
-    this.route.queryParams.subscribe(params => { this.sortFilter = params.tosort ?? false; });
+    this.route.params
+      .subscribe((params: Params) => this.albumName = params['name']);

    this.loadSongs();

-    this.tsAlbumService.getAlbum(this.albumName).subscribe(data => this.album = data);
+    this.elsService.getAlbum(this.albumName).subscribe(data => this.album = data);
  }

  loadSongs(): void {
-    if (this.lockLoadData) {
-      console.log('Loading data locked');
-      return;
-    }
-
-    if (!this.moreDataAvailable) {
-      return;
-    }
-
-    this.lockLoadData = true;
-    this.tsAlbumService.getAlbumSongs(this.albumName, this.songs.length, this.sortFilter).subscribe(
+    this.elsService.getAlbumSongs(this.albumName, this.songs.length).subscribe(
      data => {
-        this.moreDataAvailable = data.length === TsService.DEFAULT_SIZE;
+        this.moreDataAvailable = data.length === ElsService.DEFAULT_SIZE;

        // Erase song array with result for first load, then add elements one by one
        // instead use concat => concat will sort table at each load, very consuming! and not user friendly
        if (this.songs.length === 0) {
          this.songs = data;
        } else {
-          this.songtable.setSortable(true);
          data.forEach(song => {
            this.songs.push(song);
          });
        }
-        console.log('Unlock load data');
-        this.lockLoadData = false;
      }
    );
  }
+
+  scrollTop(): void {
+    window.scrollTo(0, 0);
+  }
+
+  /**
+   * Handle scroll:
+   * - load data if at bottom of screen (if needed)
+   * - hide/show "go to top" button
+   *
+   * @param event scroll event
+   */
+  onScroll(event: any) {
+    if (this.moreDataAvailable &&
+          (window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+        this.loadSongs();
+    }
+
+    if (window.scrollY > window.innerHeight) {
+      this.atBottom = true;
+    }
+
+    if (window.scrollY === 0) {
+      this.atBottom = false;
+    }
+  }
 }
--- a/dashboard/src/app/albums/albums.component.css
+++ b/dashboard/src/app/albums/albums.component.css
@@ -1,34 +0,0 @@
-/***  BOTTOM BUTTON PART  ***/
-/* Thank to https://codyhouse.co/gem/back-to-top/ */
-.btn-top {
-  display: inline-block;
-  height: 40px;
-  width: 40px;
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-  /* image replacement properties */
-  /*overflow: hidden;*/
-  /*text-indent: 100%;*/
-  /*white-space: nowrap;*/
-  /*background: rgba(232, 98, 86, 0.8);*/
-  /*background: #ff9000;*/
-  visibility: hidden;
-  opacity: 0;
-  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
-  -moz-transition: opacity .3s 0s, visibility 0s .3s;
-  transition: opacity .3s 0s, visibility 0s .3s;
-}
-.btn-top.btn-top-is-visible, .no-touch .btn-top:hover {
-  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
-  -moz-transition: opacity .3s 0s, visibility 0s 0s;
-  transition: opacity .3s 0s, visibility 0s 0s;
-}
-.btn-top.btn-top-is-visible {
-  /* the button becomes visible */
-  visibility: visible;
-  opacity: 1;
-}
-
-/***  END BOTTOM BUTTON PART  ***/
--- a/dashboard/src/app/albums/albums.component.html
+++ b/dashboard/src/app/albums/albums.component.html
@@ -1,74 +0,0 @@
-<div class="container">
-  <h1>Albums - {{this.albums.length}}</h1>
-
-<div class="col-md-12">
-  <table class="table table-striped" style="white-space: nowrap;">
-      <thead>
-          <tr>
-              <th>Album</th>
-              <th>Track Count</th>
-              <th></th>
-              <th></th>
-              <th>Artist/Album Artist</th>
-              <th>Avg Bit Rate (min)</th>
-              <th>Play Count</th>
-              <th>Rating</th>
-          </tr>
-      </thead>
-      <tbody>
-          <tr *ngFor="let album of albums">
-              <td>
-                <a [routerLink]="['/album', album.Album]">{{album.Album}}</a>&nbsp;
-                <span class="glyphicon glyphicon-remove-circle" style="cursor:pointer;color:red;" (click)="exlude('Album', album)"></span>
-              </td>
-
-              <td>{{album['Track Count']}}</td>
-
-              <ng-template [ngIf]="album['Album Artist']" [ngIfElse]="artistSection">
-                <td>
-                  <span class="glyphicon glyphicon-ban-circle" style="cursor:pointer;color:red;" (click)="exlude('Album Artist', album)"></span>
-                </td>
-                <td>
-                  <span class="glyphicon glyphicon-zoom-in" style="cursor:pointer;" (click)="select('Album Artist', album)"></span>
-                </td>
-                <td>
-                    <a [routerLink]="['/artist', album['Album Artist']]">{{album['Album Artist']}}</a>&nbsp;
-                </td>
-              </ng-template>
-
-              <ng-template #artistSection>
-                <td>
-                  <span class="glyphicon glyphicon-ban-circle" style="cursor:pointer;color:red;" (click)="exlude('Artist', album)"></span>
-                </td>
-                <td>
-                  <span class="glyphicon glyphicon-zoom-in" style="cursor:pointer;" (click)="select('Artist', album)"></span>
-                </td>
-                <td>
-                    <a [routerLink]="['/artist', album.Artist[0]]">{{album.Artist}}</a>&nbsp;
-                </td>
-              </ng-template>
-
-              <td>
-                {{album['Avg Bit Rate']}}
-                <span *ngIf="album['Avg Bit Rate'] != album['Min Bit Rate']">({{album['Min Bit Rate']}})</span>
-              </td>
-
-              <td>
-                {{album['Play Count']}} ({{album['Play Count']/album['Track Count'] | number:'1.0-0'}}/songs)
-              </td>
-
-              <td class="star" [title]="(album['Album Rating Computed']?'Computed Rating: ':'Rating: ') + album['Album Rating']">
-              <span *ngFor="let item of numberToArray(album['Album Rating'], 20)">
-                <span class="glyphicon" [ngClass]="album['Album Rating Computed']?'glyphicon-star-empty':'glyphicon-star'"></span>
-              </span>
-              </td>
-          </tr>
-      </tbody>
-  </table>
-</div>
-
-<button type="button" class="btn btn-danger btn-top" [class.btn-top-is-visible]="queryEdited"
-  aria-label="Reset filters" (click)="resetQuery()" title="Reset filters and reload datas">
-  <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
-</button>
-</div>
--- a/dashboard/src/app/albums/albums.component.spec.ts
+++ b/dashboard/src/app/albums/albums.component.spec.ts
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AlbumsComponent } from './albums.component';
-
-describe('AlbumsComponent', () => {
-  let component: AlbumsComponent;
-  let fixture: ComponentFixture<AlbumsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AlbumsComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AlbumsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/dashboard/src/app/albums/albums.component.ts
+++ b/dashboard/src/app/albums/albums.component.ts
@@ -1,77 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-
-import { Album } from "../model/album";
-
-import { Utils } from "../utils";
-
-import { TsAlbumService } from "../ts-service/ts-album.service";
-
-enum query_edit_type {
-  exclude = "must_not",
-  select = "must",
-}
-
-@Component({
-  selector: "app-albums",
-  templateUrl: "./albums.component.html",
-  styleUrls: ["./albums.component.css"],
-})
-export class AlbumsComponent implements OnInit {
-  numberToArray = Utils.numberToArray; // For star representation
-  albums: Album[] = [];
-  filterParams = TsAlbumService.GET_ALBUMS_DEFAULT_PARAMS();
-  queryEdited = false; // Show reset button if true
-
-  constructor(private tsService: TsAlbumService) {}
-
-  ngOnInit(): void {
-    this.loadData();
-  }
-
-  private editQuery(field: string, value: Album, type: query_edit_type): void {
-    // TODO Move this method to a service
-    if (value[field] instanceof Array) {
-      value[field] = value[field][0];
-    }
-
-    if (type == query_edit_type.exclude) {
-      // Filter can be cumulated
-      // TODO Specific treatment for array? https://typesense.org/docs/0.25.1/api/search.html#filter-parameters
-      this.filterParams = this.filterParams.append(
-        "filter_by",
-        field + ":!=`" + value[field] + "`"
-      );
-    }
-
-    if (type == query_edit_type.select) {
-      this.filterParams = this.filterParams
-        .delete("q")
-        .append("q", value[field])
-        .delete("query_by")
-        .append("query_by", field);
-    }
-    this.queryEdited = true;
-  }
-
-  exlude(field: string, value: Album): void {
-    this.editQuery(field, value, query_edit_type.exclude);
-    this.loadData();
-  }
-
-  select(field: string, value: Album): void {
-    this.editQuery(field, value, query_edit_type.select);
-    this.loadData();
-  }
-
-  resetQuery(): void {
-    this.filterParams = TsAlbumService.GET_ALBUMS_DEFAULT_PARAMS();
-    this.loadData();
-  }
-
-  loadData(): void {
-    console.log(this.filterParams.toString());
-    this.tsService
-      .getAlbums(this.filterParams)
-      .subscribe((data) => (this.albums = data));
-  }
-}
--- a/dashboard/src/app/app-routing.module.ts
+++ b/dashboard/src/app/app-routing.module.ts
@@ -1,23 +1,17 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';

-import { DashboardComponent } from './dashboard/dashboard.component';
+import { DashboardComponent } from './dashboard.component';
 import { AlbumComponent } from './album/album.component';
 import { ArtistComponent } from './artist/artist.component';
 import { GenreComponent } from './genre/genre.component';
-import { TopPlayedComponent } from './top-played/top-played.component';
-import { AlbumsComponent } from './albums/albums.component';
-import { ToSortComponent } from './to-sort/to-sort.component';

 const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'album/:name',      component: AlbumComponent },
-  { path: 'album',      component: AlbumsComponent },
  { path: 'artist/:name',      component: ArtistComponent },
-  { path: 'genre/:name',      component: GenreComponent },
-  { path: 'top-played',      component: TopPlayedComponent },
-  { path: 'to-sort',      component: ToSortComponent }
+  { path: 'genre/:name',      component: GenreComponent }
 ];

@NgModule({
--- a/dashboard/src/app/app.component.css
+++ b/dashboard/src/app/app.component.css
@@ -36,8 +36,7 @@ nav a.active {

 /* FIXME Code Repetition  */
 .btn-top {
-  display: flex;
-  flex-direction: column;
+  display: inline-block;
  position: fixed;
  z-index: 1;
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
--- a/dashboard/src/app/app.component.html
+++ b/dashboard/src/app/app.component.html
@@ -1,8 +1,4 @@
 <nav>
-  <div class="btn-top">
-  <a routerLink="/dashboard" routerLinkActive="active"><span class="glyphicon glyphicon-home"></span></a><br />
-  <a routerLink="/album" routerLinkActive="active"><span class="glyphicon glyphicon-cd"></span></a>
-  <a routerLink="/to-sort" routerLinkActive="active"><span class="glyphicon glyphicon-sort"></span></a>
-</div>
+  <a class="btn-top" routerLink="/dashboard" routerLinkActive="active"><span class="glyphicon glyphicon-home"></span></a>
 </nav>
 <router-outlet></router-outlet>
--- a/dashboard/src/app/app.module.ts
+++ b/dashboard/src/app/app.module.ts
@@ -1,60 +1,42 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
-import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
+import { HttpModule } from '@angular/http';
+
+import { TagCloudModule } from 'angular-tag-cloud-module';
+import { AgWordCloudModule } from 'angular4-word-cloud';

 import { AppComponent } from './app.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
+import { DashboardComponent } from './dashboard.component';
 import { AlbumComponent } from './album/album.component';
 import { ArtistComponent } from './artist/artist.component';
 import { GenreComponent } from './genre/genre.component';
-import { SongTableComponent } from './song-table/song-table.component';
-import { TopPlayedComponent } from './top-played/top-played.component';

-import { TsService } from './ts-service/ts.service';
-import { TsAlbumService } from './ts-service/ts-album.service';
-import { TsArtistService } from './ts-service/ts-artist.service';
+import { ElsService } from './els.service';

 import { AppRoutingModule } from './app-routing.module';

-import { ConvertMsPipe } from './pipes/convertms.pipe';
-import { ConvertMoreExactPipe } from './pipes/convert-more-exact.pipe';
-import { SortByPipe } from './pipes/sort-by.pipe';
-import { ConvertSizeToStringPipe } from './pipes/convert-size-to-string.pipe';
-import { RoundPipe } from './pipes/round.pipe';
-import { AlbumsComponent } from './albums/albums.component';
-import { ToSortComponent } from './to-sort/to-sort.component';
-
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { ConvertMsPipe } from './convertms.pipe';
+import { SortByPipe } from './sort-by.pipe';

@NgModule({
  imports: [
    BrowserModule,
-    HttpClientModule,
-    FormsModule,
-    AppRoutingModule,
-    NgbModule
+    HttpModule,
+    TagCloudModule,
+    AgWordCloudModule.forRoot(),
+    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    AlbumComponent,
-    AlbumsComponent,
    ArtistComponent,
    GenreComponent,
-    SongTableComponent,
    ConvertMsPipe,
-    ConvertMoreExactPipe,
-    SortByPipe,
-    ConvertSizeToStringPipe,
-    TopPlayedComponent,
-    RoundPipe,
-    ToSortComponent
+    SortByPipe
  ],
  providers: [
-    TsService,
-    TsAlbumService,
-    TsArtistService
+    ElsService
  ],
  bootstrap: [ AppComponent ]
 })
--- a/dashboard/src/app/artist/artist.component.html
+++ b/dashboard/src/app/artist/artist.component.html
@@ -3,18 +3,14 @@

  <div class="alert alert-warning">
      <h3>Debug Zone</h3>
-      Returned song:&emsp;{{songs.length}}<br />
-      Theorical song:&emsp;{{ artist ? artist['Track Count'] : ""  }}
+      Returned song: {{songs.length}}<br />
+      Theorical song: {{ artist ? artist['Track Count'] : ""  }}
      <span *ngIf="artist && (songs.length == artist['Track Count'])" class="glyphicon glyphicon-ok" style="color:green"></span>
      <span *ngIf="artist && (songs.length != artist['Track Count'])" class="glyphicon glyphicon-remove" style="color:red"></span>
-      <br />
-      Artist song:&emsp;&emsp;&emsp;{{countSong}}
-      <span *ngIf="artist && (songs.length == countSong)" class="glyphicon glyphicon-ok" style="color:green"></span>
-      <span *ngIf="artist && (songs.length != countSong)" class="glyphicon glyphicon-remove" style="color:red"></span>
  </div>

  <div class="row cardAdmin">
-      <div class="col-lg-3 col-md-3 col-sm-6">
+      <div class="col-lg-3 col-md-3">
          <div class="panel panel-yellow">
              <div class="panel-heading">
                  <div class="row">
@@ -32,7 +28,7 @@
              </div>
          </div>
      </div>
-      <div class="col-lg-3 col-md-3 col-sm-6">
+      <div class="col-lg-3 col-md-3">
          <div class="panel panel-blue">
              <div class="panel-heading">
                  <div class="row">
@@ -50,7 +46,7 @@
              </div>
          </div>
      </div>
-      <div class="col-lg-3 col-md-3 col-sm-6">
+      <div class="col-lg-3 col-md-3">
          <div class="panel panel-green">
              <div class="panel-heading">
                  <div class="row">
@@ -68,7 +64,7 @@
              </div>
          </div>
      </div>
-      <div class="col-lg-3 col-md-3 col-sm-6">
+      <div class="col-lg-3 col-md-3">
          <div class="panel panel-purple">
              <div class="panel-heading">
                  <div class="row">
@@ -89,9 +85,44 @@
      </div>
  </div>

-  <app-song-table [songs]=songs (atBottom)=loadSongs()></app-song-table>
+  <table class="table table-striped" (window:scroll)="onScroll($event)">
+  <thead>
+      <tr>
+          <th></th>
+          <th>Name</th>
+          <th>Album</th>
+          <th>Year</th>
+          <th>Artist</th>
+          <th>Album Artist</th>
+          <th>Play Count</th>
+          <th>Genre</th>
+      </tr>
+  </thead>
+  <tbody>
+      <tr *ngFor="let song of songs | sortBy : 'Year':'Album':'Track Number'">
+          <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
+          <td>{{song.Name}}</td>
+          <td><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
+          <td>{{song.Year}}</td>
+          <td><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
+          <td>{{song['Album Artist'] ? song['Album Artist'] : "-" }}</td>
+          <td>{{song['Play Count']}}</td>
+          <td><a [routerLink]="['/genre', song.Genre]">{{song.Genre}}</a></td>
+      </tr>
+  </tbody>
+  </table>

  <button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
  </button>
+
+  <!-- Go to Top Button-->
+  <button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="atBottom"
+      aria-label="Top" (click)="scrollTop()" title="Go back to Top!">
+      <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
+  </button>
+  <button type="button" class="btn btn-primary btn-top btn-sort" [class.btn-top-is-visible]="sortable"
+      aria-label="Top" (click)="sort()" title="Sort by Album & Track Number">
+      <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span>
+  </button>
  </div>
--- a/dashboard/src/app/artist/artist.component.ts
+++ b/dashboard/src/app/artist/artist.component.ts
@@ -1,52 +1,40 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';

-import { Song } from './../model/song';
-import { Artist } from './../model/artist';
-import { SongTableComponent } from '../song-table/song-table.component';
+import { ElsService } from './../els.service';
+import { Song } from './../object/song';
+import { Artist } from './../object/artist';

-import { TsService } from '../ts-service/ts.service';
-import { TsArtistService } from '../ts-service/ts-artist.service';
+import { SortByPipe } from './../sort-by.pipe';

@Component({
  selector: 'app-artist',
  templateUrl: './artist.component.html',
-  styleUrls: [ './../album/album.component.css', './../dashboard/dashboard.component.css', './artist.component.css' ]
+  styleUrls: [ './../album/album.component.css', './../dashboard.component.css' ]
 })

 export class ArtistComponent implements OnInit {
-  // Interacte with table to set sortable
-  @ViewChild(SongTableComponent) songtable: SongTableComponent;
-
-  // Prevent useless data load + activate button in interface var
-  moreDataAvailable = true;
-
  artistName = '';
  songs: Array<Song> = [];
  artist: Artist = new Artist();
+  // To activate button in interface var
+  moreDataAvailable = false;
+  atBottom = false;
+  sortable = false;
+
  lockLoadData = false;
-  countSong: number;
-  toSortFilter: boolean = false; // Show only song to sort

  constructor(
-    private elsService: TsArtistService,
+    private elsService: ElsService,
    private route: ActivatedRoute,
+    private location: Location
  ) { }

  ngOnInit(): void {
    this.route.params.subscribe((params: Params) => this.artistName = params['name']);
-    this.route.queryParams.subscribe(params => { this.toSortFilter = params.tosort ?? false; });

    this.elsService.getArtist(this.artistName).subscribe(data => this.artist = data);
-
-    this.elsService.getCountArtistSong(this.artistName, this.toSortFilter).subscribe(data => {
-      this.countSong = data
-      this.artist['Track Count'] = this.countSong;
-      // TODO Async problem: some time, get updated data, some time no
-      // TODO Use only this value?
-      // TODO ==> Show each time if there are unsorted songs
-    });
-
    this.loadSongs();
  }

@@ -57,23 +45,17 @@ export class ArtistComponent implements OnInit {
      return;
    }

-    if (!this.moreDataAvailable) {
-      return;
-    }
-
    this.lockLoadData = true;
-    this.elsService.getArtistSongs(this.artistName, this.songs.length, this.toSortFilter).subscribe(
+    this.elsService.getArtistSongs(this.artistName, this.songs.length).subscribe(
      data => {
-        this.moreDataAvailable = data.length === TsService.DEFAULT_SIZE;
-        console.log(data.length)
-        console.log(this.moreDataAvailable)
+        this.moreDataAvailable = data.length === ElsService.DEFAULT_SIZE;

        // Erase song array with result for first load, then add elements one by one
        // instead use concat => concat will sort table at each load, very consuming! and not user friendly
        if (this.songs.length === 0) {
          this.songs = data;
        } else {
-          this.songtable.setSortable(true);
+          this.sortable = true;
          data.forEach(song => {
            this.songs.push(song);
          });
@@ -83,4 +65,35 @@ export class ArtistComponent implements OnInit {
      }
    );
  }
+
+  scrollTop(): void {
+    window.scrollTo(0, 0);
+  }
+
+  /**
+   * Handle scroll:
+   * - load data if at bottom of screen (if needed)
+   * - hide/show "go to top" button
+   *
+   * @param event scroll event
+   */
+  onScroll(event: any) {
+    if (this.moreDataAvailable &&
+          (window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+        this.loadSongs();
+    }
+
+    if (window.scrollY > window.innerHeight) {
+      this.atBottom = true;
+    }
+
+    if (window.scrollY === 0) {
+      this.atBottom = false;
+    }
+  }
+
+  sort(): void {
+    this.songs = new SortByPipe().transform(this.songs, 'Year', 'Album', 'Track Number', 'Play Count');
+    this.sortable = false;
+  }
 }
--- a/dashboard/src/app/convertms.pipe.spec.ts
+++ b/dashboard/src/app/convertms.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { ConvertmsPipe } from './convertms.pipe';
+
+describe('ConvertmsPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ConvertmsPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
--- a/dashboard/src/app/convertms.pipe.ts
+++ b/dashboard/src/app/convertms.pipe.ts
@@ -0,0 +1,34 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'convertMs'
+})
+export class ConvertMsPipe implements PipeTransform {
+
+  transform(timeMs: number): string {
+    let x = timeMs / 1000;
+
+    const seconds = Math.round(x % 60);
+    x /= 60;
+
+    let minutes = 0;
+    if (x > 1) { minutes = Math.round(x % 60); }
+    x /= 60;
+
+    let hours = 0;
+    if (x > 1) { hours = Math.round(x % 24); }
+    // TODO Enable/disable day
+    x /= 24;
+    const days = Math.round(x);
+
+    // Final string
+    let ret = '';
+    if (days > 0) { ret += ('0' + days).slice(-2) + ':'; }
+    if (hours > 0) { ret += ('0' + hours).slice(-2) + ':'; }
+    if (minutes > 0) { ret += ('0' + minutes).slice(-2) + ':'; }
+    if (seconds > 0) { ret += ('0' + seconds).slice(-2); }
+
+    return ret;
+    // return ('0' + days).slice(-2) + ':' + ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);
+  }
+}
--- a/dashboard/src/app/dashboard.component.css
+++ b/dashboard/src/app/dashboard.component.css
@@ -0,0 +1,38 @@
+.panel-stat {
+    min-height: 102px;
+}
+
+.panel-green {
+  background-color: #16a085;
+  color:white;
+}
+.panel-yellow {
+  background-color: #f1c40f;
+  color:white;
+}
+
+.panel-red {
+  background-color: #d9534f;
+  color:white;
+}
+
+.panel-purple {
+  background-color: #9b59b6;
+  color:white;
+}
+
+.panel-blue {
+  background-color: #3498db;
+  color:white;
+}
+
+.stats_icon {
+  font-size: 3em;
+}
+
+.circle {
+  border-radius: 50%;
+  background-color: #9b59b6;
+  margin: 0 auto;
+
+}
--- a/dashboard/src/app/dashboard/dashboard.component.html
+++ b/dashboard/src/app/dashboard/dashboard.component.html
@@ -15,7 +15,7 @@
                            <h3 *ngIf="!totalTime"><span class="glyphicon glyphicon-refresh loading"></span></h3>
                            <h3 *ngIf="totalTime">{{totalTime | convertMs}}</h3>
                        </div>
-                        <div><br>Total time ({{totalTime | convertMoreExact}})</div>
+                        <div><br>Total time</div>
                    </div>
                </div>
            </div>
@@ -30,8 +30,8 @@
                    </div>
                    <div class="col-xs-9 text-right">
                        <div>
-                            <h3 *ngIf="!totalSize"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                            <h3 *ngIf="totalSize">{{totalSize | convertSizeToString}}</h3>
+                            <h3 *ngIf="!totalSizeSt"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                            <h3 *ngIf="totalSizeSt">{{totalSizeSt}}</h3>
                        </div>
                        <div><br>Total size</div>
                    </div>
@@ -69,7 +69,7 @@
                            <h3 *ngIf="!neverListenSong"><span class="glyphicon glyphicon-refresh loading"></span></h3>
                            <h3 *ngIf="neverListenSong">{{neverListenSong}}</h3>
                        </div>
-                        <div><br>Never list. songs (~{{neverListenSong / trackCountSong * 100 | round}}%)</div>
+                        <div><br>Never list. songs</div>
                    </div>
                </div>
            </div>
@@ -77,73 +77,44 @@
    </div>
 </div>

-<ng-template #rt let-r="result" let-t="term">
-    <!-- glyphicon glyphicon-cd -->
-    <span *ngIf="r.type == 'artist'" class="glyphicon glyphicon-user"></span>
-    <span *ngIf="r.type == 'album'" class="glyphicon glyphicon-cd"></span>
-    &nbsp; <ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
-</ng-template>
-
-
-<form class="navbar-form">
-    <div class="form-group" style="display:inline;">
-        <div class="input-group" style="display:table;">
-            <span class="input-group-addon" style="width:1%;">
-                <span class="glyphicon glyphicon-search"></span>
-            </span>
-            <input class="form-control" type="text" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus"
-                id="searchSuggest"
-                [(ngModel)]="searchTerm"
-                [ngbTypeahead]="search"
-                [resultTemplate]="rt"
-                (selectItem)="onSelectSearch($event)">
-        </div>
-    </div>
-</form>
-
 <div class="col-md-12">
+    <h3>Last added albums</h3>
+
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Album</th>
-                <th>Track Count</th>
-                <th>Album Artist</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let album of lastAddedAlbums">
-                <td><a [routerLink]="['/album/', album.group_key[0]]">{{album.group_key[0]}}</a></td>
-                <td>{{album.found}}</td>
-                <td><a [routerLink]="['/artist', albumArtists[album.group_key[0]]]">{{albumArtists[album.group_key[0]]}}</a></td>
+                <td><a [routerLink]="['/album', album.key]">{{album.key}}</a></td>
+                <td>{{album.doc_count}}</td>
+                <td><a [routerLink]="['/artist', albumArtists[album.key]]">{{albumArtists[album.key]}}</a></td>
            </tr>
        </tbody>
    </table>
 </div>

-<input type="button" class="btn btn-primary btn-lg btn-block" value="All Albums" routerLink="/album">
-
-<div class="col-md-12">
 <h3>Top Played Songs</h3>
-    <table class="table table-striped">
-    <thead>
-        <tr>
-            <th>Track Name</th>
-            <th>Artist</th>
-            <th>Album</th>
-            <th>Play Count</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr *ngFor="let song of mostPlayedSongs">
-            <td><b>{{song.Name}}</b></td>
-            <td><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
-            <td><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
-            <td>{{song['Play Count']}}</td>
-        </tr>
-    </tbody>
-    </table>
-    <h3><a [routerLink]="['/top-played']">Top Played page</a></h3>
-</div>
+<table class="table table-striped">
+<thead>
+    <tr>
+        <th>Track Name</th>
+        <th>Artist</th>
+        <th>Album</th>
+        <th>Play Count</th>
+    </tr>
+</thead>
+<tbody>
+    <tr *ngFor="let song of mostPlayedSongs">
+        <td><b>{{song.Name}}</b></td>
+        <td><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
+        <td><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
+        <td>{{song['Play Count']}}</td>
+    </tr>
+</tbody>
+</table>

 <div class="col-md-6">
    <h3>Top Genres</h3>
@@ -156,8 +127,8 @@
    </thead>
    <tbody>
        <tr *ngFor="let genre of topGenres">
-            <td><a [routerLink]="['/genre', genre.value]">{{genre.value}}</a></td>
-            <td>{{genre.count}}</td>
+            <td><a [routerLink]="['/genre', genre.key]">{{genre.key}}</a></td>
+            <td>{{genre.doc_count}}</td>
        </tr>
    </tbody>
    </table>
@@ -173,10 +144,28 @@
    </thead>
    <tbody>
        <tr *ngFor="let genre of bottomGenres">
-            <td><a [routerLink]="['/genre', genre.value]">{{genre.value}}</a></td>
-            <td>{{genre.count}}</td>
+            <td><a [routerLink]="['/genre', genre.key]">{{genre.key}}</a></td>
+            <td>{{genre.doc_count}}</td>
        </tr>
    </tbody>
    </table>
 </div>
+
+<div>
+    <angular-tag-cloud
+      [data]="wordCloud"
+      [width]="options.width"
+      [height]="options.height"
+      [overflow]="options.overflow">
+    </angular-tag-cloud>
+  </div>
+
+
+<div AgWordCloud
+  #word_cloud_chart=ag-word-cloud
+  [wordData]="word_cloud">
+</div>
+
+<button (click)="word_cloud_chart.update()">Toggle tooltip</button>
+
 </div>
--- a/dashboard/src/app/dashboard.component.ts
+++ b/dashboard/src/app/dashboard.component.ts
@@ -0,0 +1,148 @@
+import { Observable } from 'rxjs/Rx';
+import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
+
+import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
+import { AgWordCloudData, AgWordCloudDirective } from 'angular4-word-cloud';
+
+import { ElsService } from './els.service';
+import { Song } from './object/song';
+import { Bucket } from './object/bucket';
+import { Album } from './object/album';
+import { Artist } from './object/artist';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: [ './dashboard.component.css' ]
+})
+
+export class DashboardComponent implements OnInit {
+  totalTime = 0;
+  totalSize = 0;
+  totalSizeSt = '';
+  trackCountSong = 0;
+  trackCountArtist = 0;
+  trackCountAlbum = 0;
+  neverListenSong = 0;
+
+  albumArtistCount = 0;
+
+  topGenres: Bucket[] = [];
+  bottomGenres: Bucket[] = [];
+
+  mostPlayedSongs: Song[] = [];
+
+  lastAddedAlbums: Bucket[] = [];
+  albumArtists = [];
+
+  /**
+   * Test of angular-tag-cloud-module (https://www.npmjs.com/package/angular-tag-cloud-module)
+   */
+  options: CloudOptions = {
+    // if width is between 0 and 1 it will be set to the size of the upper element multiplied by the value
+    width : 1,
+    height : 400,
+    overflow: false,
+  };
+
+  wordCloud: Array<CloudData> = [];
+
+  /**
+   * Test of angular4-word-cloud (https://www.npmjs.com/package/angular4-word-cloud)
+   */
+  word_cloud: Array<AgWordCloudData> = [];
+
+  @ViewChild('word_cloud_chart') testTruc: AgWordCloudDirective;
+
+  constructor(private elsService: ElsService) { }
+
+  ngOnInit(): void {
+    this.elsService.getTime().then(result => {
+      this.totalTime = result;
+    });
+
+    this.elsService.getSize().then(result => {
+      this.totalSize = result;
+      this.totalSizeSt = this.convertSizeToString(result);
+    });
+
+    this.elsService.getCountSong('song')
+      .then(result => this.trackCountSong = result);
+    this.elsService.getCountSong('artist')
+      .then(result => this.trackCountArtist = result);
+    this.elsService.getCountSong('album')
+      .then(result => this.trackCountAlbum = result);
+
+    this.elsService.getCountNeverListenSong()
+      .then(result => this.neverListenSong = result);
+
+    this.elsService.getMostPlayedTrack().subscribe(
+      data => this.mostPlayedSongs = data
+    );
+
+    this.elsService.getGenres().subscribe(data => {
+      this.topGenres = data.slice(0, 10);
+
+      /** angular-tag-cloud-module **/
+      const changedData: Observable<Array<CloudData>> = Observable.of(
+        data.map(element => {
+          return {weight: element.doc_count, text: element.key, link: '/genre/' + element.key};
+        })
+      );
+      changedData.subscribe(res => this.wordCloud = res);
+
+      data.forEach((el) => {
+        this.word_cloud.push({size: el.doc_count, text: el.key});
+      });
+      this.testTruc.update();
+    });
+    this.elsService.getGenres('asc').subscribe(data => this.bottomGenres = data.slice(0, 10).reverse());
+    // this.elsService.getGenreCount().subscribe(data => console.log(data));
+
+    this.elsService.getLastAddedAlbums(6).subscribe(buckets => {
+      this.lastAddedAlbums = buckets;
+      buckets.forEach(bucket => this.getArtistName(bucket));
+    });
+  }
+
+  private getArtistName(albumBucket: Bucket) {
+    // For each bucket.key (album name), search artist.
+    // Use track count to compare
+    this.elsService.getArtistFromAlbumName(albumBucket.key).subscribe(albums => {
+      if (albums.length > 1) {
+        // More than one result for an album name
+        // Search good artist by track count
+        albums.forEach(album => {
+          if (album['Track Count'] === albumBucket.doc_count) {
+            this.albumArtists[album.Name] = album.Artist.toString();
+          }
+        });
+      } else {
+        // Just one artistresult for album name
+        this.albumArtists[albums[0].Name] = albums[0].Artist.toString();
+      }
+      if (this.albumArtists[albums[0].Name].length > 50) {
+        this.albumArtists[albums[0].Name] = this.albumArtists[albums[0].Name].substring(0, 50) + '...';
+      }
+    });
+  }
+
+
+  /**
+   * UTILS FUNCTION - TODO MOVE
+   */
+
+  convertSizeToString(size: number) {
+    const units = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
+
+    if (size === 0) {
+      return '0 Byte';
+    }
+
+    const i = Math.floor(Math.log(size) / Math.log(1024));
+    let calcSize = size / Math.pow(1024, i);
+    calcSize = Math.round(calcSize * 100) / 100;
+
+    return calcSize + ' ' + units[i];
+  }
+}
--- a/dashboard/src/app/dashboard/dashboard.component.css
+++ b/dashboard/src/app/dashboard/dashboard.component.css
@@ -1,77 +0,0 @@
-.panel-stat {
-    min-height: 102px;
-}
-
-.panel-green {
-  background-color: #16a085;
-  color:white;
-}
-.panel-yellow {
-  background-color: #f1c40f;
-  color:white;
-}
-
-.panel-red {
-  background-color: #d9534f;
-  color:white;
-}
-
-.panel-purple {
-  background-color: #9b59b6;
-  color:white;
-}
-
-.panel-blue {
-  background-color: #3498db;
-  color:white;
-}
-
-.stats_icon {
-  font-size: 3em;
-}
-
-.circle {
-  border-radius: 50%;
-  background-color: #9b59b6;
-  margin: 0 auto;
-}
-
-/* Style for autocompletion */
-/* Stolen from https://ng-bootstrap.github.io/#/components/typeahead/examples */
-::ng-deep .dropdown-item {
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    font-weight: 400;
-    color: #212529;
-    text-align: inherit;
-    white-space: nowrap;
-    background-color: transparent;
-    border: 0
-}
-
-::ng-deep .dropdown-item:focus,
-::ng-deep .dropdown-item:hover {
-    color: #16181b;
-    text-decoration: none;
-    background-color: #f8f9fa
-}
-
-::ng-deep .dropdown-item.active,
-::ng-deep .dropdown-item:active {
-    color: #fff;
-    text-decoration: none;
-    background-color: #007bff
-}
-
-::ng-deep .dropdown-item.disabled,
-::ng-deep .dropdown-item:disabled {
-    color: #6c757d;
-    pointer-events: none;
-    background-color: transparent
-}
-
-::ng-deep .dropdown-menu.show {
-    display: block
-}
--- a/dashboard/src/app/dashboard/dashboard.component.ts
+++ b/dashboard/src/app/dashboard/dashboard.component.ts
@@ -1,138 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { ElsService } from '../els-service/els.service';
-import { Song } from './../model/song';
-import { Bucket } from './../model/bucket';
-import { Suggested } from '../model/suggested';
-
-import {Observable, of, OperatorFunction} from 'rxjs';
-import {catchError, debounceTime, distinctUntilChanged, map, tap, switchMap} from 'rxjs/operators';
-import { TsService } from '../ts-service/ts.service';
-import { TsBucket } from '../model/tsBucket';
-
-@Component({
-  selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: [ './dashboard.component.css' ]
-})
-export class DashboardComponent implements OnInit {
-  totalTime = 0;
-  totalSize = 0;
-  trackCountSong = 0;
-  trackCountArtist = 0;
-  trackCountAlbum = 0;
-  neverListenSong = 0;
-
-  albumArtistCount = 0;
-
-  topGenres: TsBucket[] = [];
-  bottomGenres: TsBucket[] = [];
-
-  mostPlayedSongs: Song[] = [];
-
-  lastAddedAlbums: TsBucket[] = [];
-  albumArtists = [];
-
-  searchTerm = ''
-  suggested : Suggested[] = []
-
-  constructor(private tsService: TsService, private route: Router) { }
-
-  ngOnInit(): void {
-    this.tsService.getTime().then(result => {
-      this.totalTime = result;
-    });
-
-    this.tsService.getSize().then(result => this.totalSize = result);
-
-    this.tsService.getCountSong(ElsService.SONG_INDEX_NAME)
-      .then(result => this.trackCountSong = result);
-
-    this.tsService.getCountNeverListenSong()
-      .then(result => this.neverListenSong = result);
-
-    this.tsService.getMostPlayedTrack().subscribe(
-      data => this.mostPlayedSongs = data
-    );
-
-    this.tsService.getGenres().subscribe(data => this.topGenres = data);
-    this.tsService.getGenres('asc').subscribe(data => this.bottomGenres = data);
-    this.tsService.getGenreCount().subscribe(data => console.log(data));
-
-    const lastAddedAlbumsTemp: TsBucket[] = [];
-    this.tsService.getLastAddedAlbums(6).subscribe(buckets => {
-      buckets.forEach(bucket => {
-        // console.log(bucket);
-
-        if (lastAddedAlbumsTemp.length === 0) {
-          lastAddedAlbumsTemp.push(bucket);
-        } else {
-          let found = false;
-          lastAddedAlbumsTemp.forEach(element => {
-            if (element.group_key === bucket.group_key) {
-              element.found += bucket.found;
-              found = true;
-            }
-          });
-          if (!found) {
-            lastAddedAlbumsTemp.push(bucket);
-          }
-        }
-      });
-
-      this.lastAddedAlbums = lastAddedAlbumsTemp;
-      this.lastAddedAlbums.forEach(bucket => this.getArtistName(bucket));
-    });
-  }
-
-  private getArtistName(albumBucket: TsBucket) {
-    // For each bucket.key (album name), search artist.
-    // Use track count to compare
-    this.tsService.getArtistFromAlbumName(albumBucket.group_key[0]).subscribe(albums => {
-      // Identification of the good album
-      let goodAlbum;
-      if (albums.length > 1) {
-        // More than one result for an album name: search good by track count
-        albums.forEach(album => {
-          if (album['Track Count'] === albumBucket.found) {
-            goodAlbum = album;
-          }
-        });
-      } else {
-        // Just one result for album name
-        goodAlbum = albums[0];
-      }
-
-      this.albumArtists[goodAlbum.Name] = goodAlbum['Album Artist'] ? goodAlbum['Album Artist'].toString() : goodAlbum.Artist.toString();
-
-      // If an album with multiple artist doesn't have 'Album Artist' field - this case should not happen
-      if (this.albumArtists[goodAlbum.Name].length > 50) {
-        this.albumArtists[goodAlbum.Name] = this.albumArtists[goodAlbum.Name].substring(0, 50) + '...';
-      }
-    });
-  }
-
-  onSelectSearch($event) {
-    this.route.navigate(['/' + $event.item.type + '/' + $event.item.name])
-  }
-
-  searching = false;
-  searchFailed = false;
-
-  search: OperatorFunction<string, readonly string[]> = (text$: Observable<string>) =>
-    text$.pipe(
-      debounceTime(300),
-      distinctUntilChanged(),
-      tap(() => this.searching = true),
-      switchMap(term =>
-        this.tsService.getSuggest(term).pipe(
-          tap(() => this.searchFailed = false),
-          catchError(() => {
-            this.searchFailed = true;
-            return of([]);
-          }))
-      ),
-      tap(() => this.searching = false)
-    )
-}
--- a/dashboard/src/app/els-service/els-album.service.spec.ts
+++ b/dashboard/src/app/els-service/els-album.service.spec.ts
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ElsAlbumService } from './els-album.service';
-
-describe('ElsAlbumService', () => {
-  let service: ElsAlbumService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(ElsAlbumService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
--- a/dashboard/src/app/els-service/els-album.service.ts
+++ b/dashboard/src/app/els-service/els-album.service.ts
@@ -1,96 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http'
-
-import { Observable } from 'rxjs';
-import { map, catchError } from 'rxjs/operators';
-
-import { Album } from './../model/album';
-import { ElsService } from './els.service';
-
-@Injectable()
-export class ElsAlbumService extends ElsService {
-  public static readonly GET_ALBUMS_DEFAULT_QUERY = {
-    'query': {
-      'bool': {
-        'must': [],
-        'must_not': [],
-        'filter': [
-          { 'range': { 'Avg Bit Rate': { 'lte': '128'}}}
-        ]
-      }
-    },
-    'sort': [ {
-      '_script' : {
-          'type' : 'number',
-          'script' : {
-              'lang': 'painless',
-              'source': 'doc[\'Play Count\'].value / doc[\'Track Count\'].value'
-          },
-          'order' : 'desc'
-      }
-  }, {
-    'Avg Bit Rate': {
-      'order': 'asc'
-    }
-  } ],
-    'size': 500
-  }
-
-  constructor(protected http: HttpClient) {
-    super(http);
-  }
-
-  getAlbums(query: any): Observable<Album[]> {
-    console.info('getAlbums');
-    console.info(query);
-    return this.http
-      .post(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH,
-        JSON.stringify(query), {headers: this.headers})
-      .pipe(
-        map(res => this.responseToAlbums(res)),
-        catchError(error => this.handleError(error, 'getAlbums'))
-      );
-  }
-
-  getAlbumsFiltered(size: number): Observable<Album[]> {
-    // http://localhost:9200/itunes-albums/_search
-    console.info('getAlbums');
-    return this.http
-      .post(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH,
-        JSON.stringify({
-          'sort': [ {
-            'Avg Bit Rate': {
-              'order': 'asc'
-            }
-          } ],
-          'size': size,
-          'query': {
-            'bool': {
-              'must': [],
-              'filter': [
-                {
-                  'match_all': {}
-                }
-              ],
-              'should': [],
-              'must_not': [
-                {
-                  'match_phrase': {
-                    'Artist': 'François Pérusse'
-                  }
-                },
-                {
-                  'match_phrase': {
-                    'Album Artist': 'Comédiens'
-                  }
-                }
-              ]
-            }
-          }
-        }), {headers: this.headers})
-      .pipe(
-        map(res => this.responseToAlbums(res)),
-        catchError(error => this.handleError(error, 'getAlbums'))
-      );
-  }
-}
--- a/dashboard/src/app/els-service/els-artist.service.spec.ts
+++ b/dashboard/src/app/els-service/els-artist.service.spec.ts
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ElsArtistService } from './els-artist.service';
-
-describe('ElsArtistService', () => {
-  let service: ElsArtistService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(ElsArtistService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
--- a/dashboard/src/app/els-service/els-artist.service.ts
+++ b/dashboard/src/app/els-service/els-artist.service.ts
@@ -1,121 +0,0 @@
-import { HttpClient } from "@angular/common/http";
-import { Injectable } from "@angular/core";
-import { Observable } from "rxjs";
-import { catchError, map } from "rxjs/operators";
-import { Artist } from "../model/artist";
-import { Song } from "../model/song";
-import { ElsService } from "./els.service";
-
-@Injectable()
-export class ElsArtistService extends ElsService {
-  constructor(protected http: HttpClient) {
-    super(http);
-  }
-
-  private getQuerySongsWithArtistName(
-    artistName: string,
-    sortFilter: boolean = false,
-    size: number = 0,
-    from: number = 0
-  ) {
-    let query = {
-      query: {
-        bool: {
-          should: [
-            { match_phrase: { "Album Artist": artistName } },
-            { match_phrase: { Artist: artistName } },
-          ],
-          must_not: [],
-        },
-      },
-    };
-
-    if (sortFilter) {
-      console.log("ElsArtistService- TO SORT filter enabled");
-      query = this.addSortFilterToQuery(query);
-    }
-
-    if (size) {
-      query["size"] = size;
-    }
-
-    if (from) {
-      query["from"] = from;
-    }
-    return query;
-  }
-
-  public getArtist(artistName: string): Observable<Artist> {
-    return this.http
-      .post(
-        this.elsUrl + ElsService.ARTIST_INDEX_NAME + ElsService.ACTION_SEARCH,
-        JSON.stringify({
-          query: {
-            match_phrase: { Artist: artistName },
-          },
-          size: ElsService.DEFAULT_SIZE,
-        }),
-        { headers: this.headers }
-      )
-      .pipe(
-        map((res) => this.responseToOneTypedResult<Artist>(res, artistName)),
-        catchError((error) =>
-          this.handleError(error, "getArtist(" + artistName + ")")
-        )
-      );
-  }
-
-  public getArtistSongs(
-    artistName: string,
-    from: number = 0,
-    sortFilter = false
-  ): Observable<Song[]> {
-    console.info(
-      "getArtistSongs- Artist name: " + artistName + " - from: " + from
-    );
-
-    let query = this.getQuerySongsWithArtistName(
-      artistName,
-      sortFilter,
-      ElsService.DEFAULT_SIZE,
-      from
-    );
-
-    return this.http
-      .post(
-        this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
-        JSON.stringify(query),
-        { headers: this.headers }
-      )
-      .pipe(
-        map((res) => this.responseToSongs(res)),
-        catchError((error) =>
-          this.handleError(
-            error,
-            "getArtistSongs(" + artistName + "," + from + ")"
-          )
-        )
-      );
-  }
-
-  public getCountArtistSong(
-    artistName: string,
-    sortFilter = false
-  ): Observable<number> {
-    console.log("artistname: " + artistName);
-    const query = this.getQuerySongsWithArtistName(artistName, sortFilter);
-
-    return this.http
-      .post<any>(
-        this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_COUNT,
-        JSON.stringify(query),
-        { headers: this.headers }
-      )
-      .pipe(
-        map((res) => res.count as number),
-        catchError((error) =>
-          this.handleError(error, "getCountArtistSong" + artistName + ")")
-        )
-      );
-  }
-}
--- a/dashboard/src/app/els-service/els-sort.service.spec.ts
+++ b/dashboard/src/app/els-service/els-sort.service.spec.ts
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ElsSortService } from './els-sort.service';
-
-describe('ElsSortService', () => {
-  let service: ElsSortService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(ElsSortService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
--- a/dashboard/src/app/els-service/els-sort.service.ts
+++ b/dashboard/src/app/els-service/els-sort.service.ts
@@ -1,169 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map, catchError } from 'rxjs/operators';
-import { ElsService } from './els.service';
-import { Album } from './../model/album';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ElsSortService extends ElsService {
-
-  constructor(protected http: HttpClient) {
-    super(http);
-  }
-
-  getTime(): Promise<number> {
-    return this.http
-      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              query: {
-                bool: {
-                  must_not: [
-                    {
-                      term: {
-                        "Location.tree": "/F:/Musique"
-                      }
-                    }
-                  ]
-                }
-              },
-              aggs: {
-                sum_time: {
-                  sum: { field: 'Total Time'}
-                }
-              },
-              'size': 0
-            }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.aggregations.sum_time.value as number)
-      .catch(error => this.handleError(error, 'getTime()'));
-  }
-
-  getSize(): Promise<number> {
-    return this.http
-      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              query: {
-                bool: {
-                  must_not: [
-                    {
-                      term: {
-                        "Location.tree": "/F:/Musique"
-                      }
-                    }
-                  ]
-                }
-              },
-              aggs: {
-                sum_time: {
-                  sum: { field: 'Size' }
-                }
-              },
-              'size': 0
-            }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.aggregations.sum_time.value as number)
-      .catch(error => this.handleError(error, 'getSize()'));
-  }
-
-  getCountSong(): Promise<number> {
-    return this.http
-      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_COUNT,
-        JSON.stringify({
-          query: {
-              bool: {
-                  must_not: [
-                      {
-                          term: {
-                              "Location.tree": "/F:/Musique"
-                          }
-                      }
-                  ]
-              }
-          }
-        }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.count as number)
-      .catch(error => this.handleError(error, 'getCountSong()'));
-  }
-
-  getCountNeverListenSong(): Promise<number> {
-    return this.http
-      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_COUNT,
-            JSON.stringify({
-              'query': {
-                'bool': {
-                  'must_not': [
-                    {
-                    'exists': { 'field': 'Play Count'}
-                  }, {
-                  term: {
-                    "Location.tree": "/F:/Musique"
-                  } }
-                ]
-                }
-              }
-            }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.count as number)
-      .catch(error => this.handleError(error, 'getCountNeverListenSong()'));
-  }
-
-  getNbAlbums(): Promise<number> {
-    return this.http
-      .post<any>(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              'query': {
-                'bool': {
-                  'must_not': [
-                  {
-                    term: {
-                      "Location.tree": "/F:/Musique"
-                    }
-                  }
-                ]
-                }
-              },
-              size: 0,
-              "aggs": {
-                "album_count": {
-                  "cardinality": {
-                    "field": "Album.raw"
-                  }
-                }
-              }
-            }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.aggregations.album_count.value as number )
-      .catch(error => this.handleError(error, 'getNbAlbums()'));
-  }
-
-  getAlbums(): Observable<Album[]> {
-    return this.http
-      .post(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH,
-        JSON.stringify({
-          query: {
-            bool: {
-              must_not: [
-                {
-                  term: {
-                    "Location.tree": "/F:/Musique"
-                  }
-                }
-              ]
-            }
-          },
-          'size': 550,
-          "sort": [
-            { "Play Count": "desc"}
-          ]
-        }), {headers: this.headers})
-      .pipe(
-        map(res => this.responseToAlbums(res)),
-        catchError(error => this.handleError(error, 'getAlbums'))
-      );
-  }
-}
--- a/dashboard/src/app/els-service/els.service.ts
+++ b/dashboard/src/app/els-service/els.service.ts
@@ -1,480 +0,0 @@
-import { Inject, Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http'
-
-import { Observable } from 'rxjs';
-import { map, catchError } from 'rxjs/operators';
-
-import { Song } from '../model/song';
-import { Album } from '../model/album';
-import { Artist } from '../model/artist';
-import { Bucket } from '../model/bucket';
-import { Suggested } from '../model/suggested';
-
-@Injectable()
-export class ElsService {
-  public static readonly DEFAULT_SIZE: number = 50;
-  public static readonly SONG_INDEX_NAME = '/itunes-songs';
-  public static readonly ARTIST_INDEX_NAME = '/itunes-artists';
-  public static readonly ALBUM_INDEX_NAME = '/itunes-albums';
-  public static readonly SUGGEST_INDEX_NAME = '/itunes-suggest';
-
-  protected static readonly ACTION_SEARCH = '/_search';
-  protected static readonly ACTION_COUNT = '/_count';
-
-  protected elsUrl = 'http://192.168.1.20:9200';
-  protected headers = new HttpHeaders({'Content-Type': 'application/json'});
-  protected defaultLocation = "/F:/Musique"; // TODO Use conf
-
-  constructor(protected http: HttpClient) { }
-
-  getTime(): Promise<number> {
-    return this.http
-      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              aggs: {
-                sum_time: {
-                  sum: { field: 'Total Time'}
-                }
-              },
-              'size': 0
-            }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.aggregations.sum_time.value as number)
-      .catch(error => this.handleError(error, 'getTime()'));
-  }
-
-  getSize(): Promise<number> {
-    return this.http
-      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              aggs: {
-                sum_time: {
-                  sum: { field: 'Size' }
-                }
-              },
-              'size': 0
-            }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.aggregations.sum_time.value as number)
-      .catch(error => this.handleError(error, 'getSize()'));
-  }
-
-  getCountSong(index: string): Promise<number> {
-    return this.http
-      .get<any>(this.elsUrl + index + ElsService.ACTION_COUNT)
-      .toPromise()
-      .then(res => res.count as number)
-      .catch(error => this.handleError(error, 'getCountSong(' + index + ')'));
-  }
-
-  getCountNeverListenSong(): Promise<number> {
-    return this.http
-      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_COUNT,
-            JSON.stringify({
-              'query': {
-                'bool': {
-                  'must_not': {
-                    'exists': { 'field': 'Play Count'}
-                  }
-                }
-              }
-            }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.count as number)
-      .catch(error => this.handleError(error, 'getCountNeverListenSong()'));
-  }
-
-  getMostPlayedTrack(): Observable<Song[]> {
-    // Thank to http://chariotsolutions.com/blog/post/angular2-observables-http-separating-services-components/
-    // for the map part
-    return this.http
-      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              'sort': [ {
-                'Play Count': {
-                  'order': 'desc'
-                }
-              } ],
-              'size': 5
-            }), {headers: this.headers})
-      .pipe(
-        map(res => this.responseToSongs(res)),
-        catchError(error => this.handleError(error, 'getMostPlayedTrack()'))
-      );
-  }
-
-  /**
-   * A basic get of albums ordered by 'Play Count' field.
-   */
-  getMostPlayedAlbumNaive(): Promise<Album[]> {
-    return this.http
-      .get(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH + '?sort=Play Count:desc&size=20')
-      .toPromise()
-      .then(res => this.responseToAlbums(res))
-      .catch(error => this.handleError(error, 'getMostPlayedAlbumNaive'));
-    // TODO Excluse 'Divers' + compilation
-  }
-
-  /**
-   * More complicated query to calculate Avg. Play and get  top ordrered by this results.
-   * Result is in '.hits.hits[].sort' field - not casted by conversion method
-   */
-  getMostPlayedAlbum(): Observable<Album[]> {
-    return this.http
-      .post(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              'sort': [
-                {
-                '_script': {
-                  'type': 'number',
-                  'script': {
-                    'inline': 'doc[\'Play Count\'].value / doc[\'Track Count\'].value'
-                  },
-                  'order': 'desc'
-                }
-              }
-            ]
-            }), {headers: this.headers})
-      .pipe(
-        map(res => this.responseToAlbums(res)),
-        catchError(error => this.handleError(error, 'getMostPlayedAlbum()'))
-      );
-  }
-
-  getMostPlayedArtistNaive(): Promise<Artist[]> {
-    return this.http
-      .get(this.elsUrl + ElsService.ARTIST_INDEX_NAME + ElsService.ACTION_SEARCH + '?sort=Play Count:desc&size=20')
-      .toPromise()
-      .then(res => this.responseToAlbums(res))
-      .catch(error => this.handleError(error, 'getMostPlayedArtistNaive'));
-    // TODO Excluse 'Divers' + compilation
-  }
-
-  getMostPlayedArtist(): Observable<Artist[]> {
-    return this.http
-      .post(this.elsUrl + ElsService.ARTIST_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              'sort': [
-                {
-                '_script': {
-                  'type': 'number',
-                  'script': {
-                    'inline': 'doc[\'Play Count\'].value / doc[\'Track Count\'].value'
-                  },
-                  'order': 'desc'
-                }
-              },
-            ],
-            'size': 100
-            }), {headers: this.headers})
-      .pipe(
-        map(res => this.responseToArtists(res)),
-        catchError(error => this.handleError(error, 'getMostPlayedArtist()'))
-      );
-  }
-
-  getAlbumSongs(albumName: string, from: number = 0, toSortFilter = false): Observable<Song[]> {
-    // TODO Move in els-album service
-    console.info(
-      "getAlbumSongs- Album name: " + albumName + " - from: " + from
-    );
-
-    let query = {
-      query: {
-        bool: {
-          must: [
-            {
-              match_phrase: {
-                "Album.raw": albumName,
-              },
-            },
-          ],
-          must_not: [],
-        },
-      },
-      size: ElsService.DEFAULT_SIZE,
-      from: from,
-    };
-
-    if (toSortFilter) {
-      console.log("getAlbumSongs- TO SORT filter enabled");
-      query = this.addSortFilterToQuery(query)
-    }
-
-    return this.http
-      .post(
-        this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
-        JSON.stringify(query),
-        { headers: this.headers }
-      )
-      .pipe(
-        map((res) => this.responseToSongs(res)),
-        catchError((error) =>
-          this.handleError(
-            error,
-            "getAlbumSongs(" + albumName + "," + from + ")"
-          )
-        )
-      );
-  }
-
-  getGenreSongs(genreName: string, from: number = 0): Observable<Song[]> {
-    console.info('getGenreSongs- Genre name: ' + genreName + ' - from: ' + from);
-    // TODO Code repetition => to refactor
-    return this.http
-      .post(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              'query': {
-                'match_phrase': { 'Genre': genreName }
-              },
-              'size': ElsService.DEFAULT_SIZE,
-              'from': from
-            }), {headers: this.headers})
-      .pipe(
-        map(res => this.responseToSongs(res)),
-        catchError(error => this.handleError(error, 'getGenreSongs(' + genreName + ',' + from + ')'))
-      );
-  }
-
-
-
-  getAlbum(albumName: string): Observable<Album> {
-    // TODO Why this is used on album pages?
-    // When it's commented, the album information goes up correctly  */
-    return this.http
-      .post(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              'query': {
-                'match_phrase': { 'Album': albumName }
-              },
-              'size': ElsService.DEFAULT_SIZE
-            }), {headers: this.headers})
-      .pipe(
-        map(res => this.responseToOneTypedResult<Album>(res, albumName)),
-        catchError(error => this.handleError(error, 'getAlbum(' + albumName + ')'))
-      );
-  }
-
-  getGenres(ordering: string = 'desc'): Observable<Bucket[]> {
-    return this.http
-      .post(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              'aggs' : {
-                'genres' : {
-                  'terms' : {
-                    'field' : 'Genre',
-                    'size' : 10,
-                    'missing': 'N/A',
-                    'order': { '_count' : ordering }
-                  }
-                }
-              },
-              'size': 0
-            }), {headers: this.headers})
-      .pipe(
-        map(res => this.responseAggregationToBucket(res, 'genres')),
-        catchError(error => this.handleError(error, 'getGenres(' + ordering + ')'))
-      );
-  }
-
-  getLastAddedAlbums(month: number): Observable<Bucket[]> {
-    return this.http
-      .post(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              'query': {
-              'range' : {
-                  'Date Added' : {
-                      'gte' : 'now-' + month + 'M/d',
-                      'lte' : 'now/d'
-                  }
-              }
-          },
-              'size': 0,
-              'aggs': {
-                'date' : {
-                  'terms': {
-                    'field' : 'Date Added',
-                    'order': { '_key': 'desc' },
-                    'size': 20
-                  },
-                  'aggs': {
-                    'album': {
-                      'terms': {
-                        'field': 'Album.raw'
-                      }
-                    }
-                  }
-                }
-              }
-            }), {headers: this.headers})
-      .pipe(
-        map(res => this.responseSubAggregationToBucket(res, 'date')),
-        catchError(error => this.handleError(error, 'getLastAddedAlbums(' + month + ')' ))
-      );
-      // TODO Take in consideration "sum_other_doc_count"
-  }
-
-  getArtistFromAlbumName(albumname: string): Observable<Album[]> { // TODO Rename ?
-    return this.http
-      .post<any>(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              'query': {
-                  'match_phrase' : {
-                      'Album' : albumname
-                  }
-              }
-          }), {headers: this.headers})
-      .pipe(
-        map(res => res.hits.hits),
-        map((hits: Array<any>) => {
-          // TODO Use a method (duplicated code ?)
-          const result: Array<Album> = [];
-          hits.forEach((hit) => {
-            result.push(hit._source);
-          });
-          return result;
-        }),
-        catchError(error => this.handleError(error, 'getArtistFromAlbumName' + albumname + ')'))
-      );
-  }
-
-  getSuggest(text: string): Observable<Suggested[]> {
-    console.log('search sugget: ' + text);
-    return this.http
-    .post<any>(this.elsUrl + ElsService.SUGGEST_INDEX_NAME + ElsService.ACTION_SEARCH,
-          JSON.stringify({
-            '_source': ['album', 'artist'],
-            'suggest': {
-                'album-suggest': {
-                    'prefix': text,
-                    'completion': {
-                        'field': 'album_suggest'
-                    }
-                },
-                'artist-suggest': {
-                    'prefix': text,
-                    'completion': {
-                        'field': 'artist_suggest'
-                    }
-                }
-            }
-        }), {headers: this.headers})
-    .pipe(
-      map(res => this.responseSuggesterToSuggested(res, 'album-suggest', 'artist-suggest')),
-      catchError(error => this.handleError(error, 'getSuggest(' + text + ')'))
-    );
-
-  }
-
-  /** Process a result to return just one result.
-   * Used to get an album or an artist.
-   * Take a name to put in console output if no result or more than one result.
-   *
-   * @param res Response to process
-   * @param name The searched name - for console output
-   */
-  protected responseToOneTypedResult<T>(res: any, name: string): T {
-    const hits = res.hits.hits;
-
-    if (hits.length < 1) {
-      console.info('No result found for name: "' + name);
-      return undefined;
-    }
-    if (hits.length > 1) {
-      // TODO Cumul results (for album)
-      console.error('More than one result for name: "' + name + '". Found (' + hits.length + '), return the first.');
-    }
-    return hits[0]._source;
-  }
-
-  /** Process a response to a array of songs.
-   *
-   * @param res Response to process
-   */
-  protected responseToSongs(res: any): Song[] {
-    const result: Array<Song> = [];
-    res.hits.hits.forEach((hit) => {
-      result.push(hit._source);
-    });
-    return result;
-  }
-
-  /** Process a response to a array of songs.
-   *
-   * @param res Response to process
-   */
-  protected responseToAlbums(res: any): Album[] {
-    const result: Array<Album> = [];
-    res.hits.hits.forEach((hit) => {
-      result.push(hit._source);
-    });
-    return result;
-  }
-
-  /** Process a response to a array of songs.
-   *
-   * @param res Response to process
-   */
-  private responseToArtists(res: any): Artist[] {
-    const result: Array<Artist> = [];
-    res.hits.hits.forEach((hit) => {
-      result.push(hit._source);
-    });
-    return result;
-  }
-
-
-  /** Process an aggregation response to an array of Bucket.
-   *
-   * @param res Response to process
-   * @param name Name of aggregation
-   */
-  protected responseAggregationToBucket(res: any, name: string): Bucket[] {
-    const result: Array<Bucket> = [];
-    res.aggregations[name].buckets.forEach((bucket) => {
-      result.push(bucket);
-    });
-    return result;
-  }
-
-  private responseSubAggregationToBucket(res: any, name: string): Bucket[] {
-    const result: Array<Bucket> = [];
-    res.aggregations[name].buckets.forEach((bucket) => {
-      bucket['album'].buckets.forEach((subBucket) => {
-        result.push(subBucket);
-      });
-    });
-    return result;
-  }
-
-  protected responseSuggesterToSuggested(res: any, ...suggestName: string[]): Suggested[] {
-    const result: Array<Suggested> = []
-    suggestName.forEach(sname => {
-      res['suggest'][sname][0]['options'].forEach(option => {
-        let suggest = new Suggested()
-        // TODO If more than one key, raise exception
-        suggest.type = String(Object.keys(option['_source']))
-        suggest.name = option['_source'][suggest.type]
-        result.push(suggest)
-      });
-    });
-    return result;
-  }
-
-  protected handleError(error: any, origin: string): Promise<any> {
-    console.error('An error occurred!');
-    console.error('Origin function: ', origin);
-    console.error('An error occurred!', error); // for demo purposes only
-    console.error(error); // for demo purposes only
-    return Promise.reject(error.message || error);
-  }
-
-  protected addSortFilterToQuery(query) {
-    query.query.bool.must_not.push({
-      term: {
-        "Location.tree": this.defaultLocation,
-      },
-    });
-    return query;
-  }
-}
--- a/dashboard/src/app/els-service/els.service.spec.ts
+++ b/dashboard/src/app/els-service/els.service.spec.ts
--- a/dashboard/src/app/els.service.ts
+++ b/dashboard/src/app/els.service.ts
@@ -0,0 +1,390 @@
+import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/toPromise';
+import 'rxjs/add/operator/map';
+
+import { Song } from './object/song';
+import { Album } from './object/album';
+import { Artist } from './object/artist';
+import { Bucket } from './object/bucket';
+
+@Injectable()
+export class ElsService {
+  public static readonly DEFAULT_SIZE: number = 50;
+  private static readonly INDEX_NAME = 'itunessongs';
+
+  private static readonly ACTION_SEARCH = '/_search';
+  private static readonly ACTION_COUNT = '/_count';
+
+  private elsUrl = 'http://localhost:9200/' + ElsService.INDEX_NAME + '/';
+  private headers = new Headers({'Content-Type': 'application/json'});
+
+  constructor(private http: Http) { }
+
+  getTime(): Promise<number> {
+    return this.http
+      .post(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              aggs: {
+                sum_time: {
+                  sum: { field: 'Total Time'}
+                }
+              },
+              'size': 0
+            }), {headers: this.headers})
+      .toPromise()
+      .then(res => res.json().aggregations.sum_time.value as number)
+      .catch(this.handleError);
+  }
+
+  getTimeSlowly(): Promise<number> {
+    return new Promise(resolve => {
+      setTimeout(() => resolve(this.getTime()), 2000);
+    });
+  }
+
+  getSize(): Promise<number> {
+    return this.http
+      .post(this.elsUrl + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              aggs: {
+                sum_time: {
+                  sum: { field: 'Size' }
+                }
+              },
+              'size': 0
+            }), {headers: this.headers})
+      .toPromise()
+      .then(res => res.json().aggregations.sum_time.value as number)
+      .catch(this.handleError);
+  }
+
+  getSizeSlowly(): Promise<number> {
+    return new Promise(resolve => {
+      setTimeout(() => resolve(this.getSize()), 2000);
+    });
+  }
+
+  getCountSong(type: string): Promise<number> {
+    return this.http
+      .get(this.elsUrl + type + ElsService.ACTION_COUNT)
+      .toPromise()
+      .then(res => res.json().count as number)
+      .catch(this.handleError);
+  }
+
+  getCountNeverListenSong(): Promise<number> {
+    return this.http
+      .post(this.elsUrl + 'song' + ElsService.ACTION_COUNT,
+            JSON.stringify({
+              'query': {
+                'bool': {
+                  'must_not': {
+                    'exists': { 'field': 'Play Count'}
+                  }
+                }
+              }
+            }), {headers: this.headers})
+      .toPromise()
+      .then(res => res.json().count as number)
+      .catch(this.handleError);
+  }
+
+  getTrackCountSlowly(type: string): Promise<number> {
+    return new Promise(resolve => {
+      setTimeout(() => resolve(this.getCountSong(type)), 2000);
+    });
+  }
+
+  getMostPlayedTrack(): Observable<Song[]> {
+    // Thank to http://chariotsolutions.com/blog/post/angular2-observables-http-separating-services-components/
+    // for the map part
+
+    // Could be shorter but I think it's more readable like this.
+    return this.http
+      .post(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'sort': [ {
+                'Play Count': {
+                  'order': 'desc'
+                }
+              } ],
+              'size': 5
+            }), {headers: this.headers})
+      .map(res => {
+        return res.json().hits.hits;
+      })
+      .map((hits: Array<any>) => {
+        const result: Array<Song> = [];
+        hits.forEach((hit) => {
+          result.push(hit._source);
+        });
+        return result;
+      });
+      // Shorter way:
+      // .map(res => {
+      //   let result: Array<Song> = [];
+      //   res.json().hits.hits.forEach(element => {
+      //     result.push(element._source);
+      //   });
+      //   return result;
+      // });
+  }
+
+  getAlbumSongs(albumName: string, from: number = 0): Observable<Song[]> {
+    console.info('getAlbumSongs- Album name: ' + albumName + ' - from: ' + from);
+    return this.http
+      .post(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                'match_phrase': { 'Album': albumName }
+              },
+              'size': ElsService.DEFAULT_SIZE,
+              'from': from
+            }), {headers: this.headers})
+      .map(res => {
+        return res.json().hits.hits;
+      })
+      .map((hits: Array<any>) => {
+        const result: Array<Song> = [];
+        hits.forEach((hit) => {
+          result.push(hit._source);
+        });
+        return result;
+      });
+  }
+
+  getGenreSongs(genreName: string, from: number = 0): Observable<Song[]> {
+    console.info('getGenreSongs- Genre name: ' + genreName + ' - from: ' + from);
+    // TODO Code repetition => to refactor
+    return this.http
+      .post(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                'match_phrase': { 'Genre': genreName }
+              },
+              'size': ElsService.DEFAULT_SIZE,
+              'from': from
+            }), {headers: this.headers})
+      .map(res => {
+        return res.json().hits.hits;
+      })
+      .map((hits: Array<any>) => {
+        const result: Array<Song> = [];
+        hits.forEach((hit) => {
+          result.push(hit._source);
+        });
+        return result;
+      });
+  }
+
+  getArtistSongs(artistName: string, from: number = 0): Observable<Song[]> {
+    console.info('getArtistSongs- Artist name: ' + artistName + ' - from: ' + from);
+    return this.http
+      .post(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                  'bool': {
+                      'should': [
+                          {'match_phrase' : { 'Album Artist' : artistName }},
+                          {'match_phrase' : { 'Artist' : artistName }}
+                      ]
+                  }
+              },
+              'size': ElsService.DEFAULT_SIZE,
+              'from': from
+            }), {headers: this.headers})
+      .map(res => {
+        return res.json().hits.hits;
+      })
+      .map((hits: Array<any>) => {
+        const result: Array<Song> = [];
+        hits.forEach((hit) => {
+          result.push(hit._source);
+        });
+        return result;
+      });
+  }
+
+  getAlbum(albumName: string): Observable<Album> {
+    return this.http
+      .post(this.elsUrl + 'album' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                'match_phrase': { 'Album': albumName }
+              },
+              'size': ElsService.DEFAULT_SIZE
+            }), {headers: this.headers})
+      .map(res => {
+        return res.json().hits.hits;
+      })
+      .map((hits: Array<any>) => {
+        if (hits.length < 1) {
+          console.info('No album "' + albumName + '" found.');
+          return undefined;
+        }
+        if (hits.length > 1) {
+          console.error('More than one album "' + albumName + '" found (' + hits.length + '), return the first.');
+        }
+        return hits[0]._source;
+      });
+  }
+
+  getArtist(artistName: string): Observable<Artist> {
+    return this.http
+      .post(this.elsUrl + 'artist' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                'match_phrase': { 'Artist': artistName }
+              },
+              'size': ElsService.DEFAULT_SIZE
+            }), {headers: this.headers})
+      .map(res => res.json().hits.hits)
+      .map((hits: Array<any>) => {
+        // Theorically, my script prevent to found two documents with this query.
+        // But Prevention is better than cure as Shakespeare said
+        if (hits.length < 1) {
+          console.info('No artist "' + artistName + '" found.');
+          return undefined;
+        }
+        if (hits.length > 1) {
+          console.error('More than one artist "' + artistName + '" found (' + hits.length + '), return the first.');
+          console.error('This is not normal!');
+        }
+        return hits[0]._source;
+      });
+  }
+
+  getGenres(ordering: string = 'desc'): Observable<Bucket[]> {
+    return this.http
+      .post(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'aggs' : {
+                'genres' : {
+                  'terms' : {
+                    'field' : 'Genre.original',
+                    'size' : 100,
+                    'missing': 'N/A',
+                    'order': { '_count' : ordering }
+                  }
+                }
+              },
+              'size': 0
+            }), {headers: this.headers})
+      .map(res => res.json().aggregations.genres.buckets)
+      .map((hits: Array<any>) => this.hitsToBuckets(hits));
+  }
+
+  getArtists(): Observable<Bucket[]> {
+    return this.http
+      .post(this.elsUrl + 'artist' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'size': 100,
+              '_source': [
+                'Artist',
+                'Track Count'
+              ],
+              'sort': [
+                {
+                  'Track Count': {
+                    'order': 'desc'
+                  }
+                }
+              ]
+          }), {headers: this.headers})
+      .map(res => {
+        return res.json().hits.hits;
+      })
+      .map((hits: Array<any>) => {
+        const result: Array<Bucket> = [];
+        hits.forEach((hit) => {
+          const bucket = new Bucket;
+          bucket.doc_count = hit._source['Track Count'];
+          bucket.key = hit._source.Artist;
+          result.push(bucket);
+        });
+        console.log(result);
+        return result;
+      });
+  }
+
+  getGenreCount(): Observable<number> {
+    return this.http
+      .post(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'aggs' : {
+                'genres' : {
+                  'cardinality' : {
+                    'field' : 'Genre.original',
+                    'missing': 'N/A',
+                  }
+                }
+              },
+              'size': 0
+            }), {headers: this.headers})
+      .map(res => res.json().aggregations.genres.value);
+  }
+
+  getLastAddedAlbums(month: number): Observable<Bucket[]> {
+    return this.http
+      .post(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                  'range' : {
+                      'Date Added' : {
+                          'gte' : 'now-' + month + 'M/d',
+                          'lte' : 'now/d'
+                      }
+                  }
+              },
+              'aggs' : {
+                  'album' : {
+                      'terms' : {
+                          'field' : 'Album.original',
+                          'size': 10
+                      }
+                  }
+              },
+              'size': 0
+          }), {headers: this.headers})
+      .map(res => res.json().aggregations.album.buckets)
+      // TODO Take in consideration "sum_other_doc_count"
+      .map((hits: Array<any>) => this.hitsToBuckets(hits));
+  }
+
+  getArtistFromAlbumName(albumname: string): Observable<Album[]> {
+    return this.http
+      .post(this.elsUrl + 'album' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                  'match_phrase' : {
+                      'Album' : albumname
+                  }
+              }
+          }), {headers: this.headers})
+      .map(res => res.json().hits.hits)
+      .map((hits: Array<any>) => {
+        // TODO Use a method (duplicated code ?)
+        const result: Array<Album> = [];
+        hits.forEach((hit) => {
+          result.push(hit._source);
+        });
+        return result;
+      });
+  }
+
+  private hitsToBuckets(hits: Array<any>): Bucket[] {
+      const result: Array<Bucket> = [];
+      hits.forEach((bucket) => {
+        result.push(bucket);
+      });
+      return result;
+  }
+
+  private handleError(error: any): Promise<any> {
+    console.error('An error occurred', error); // for demo purposes only
+    return Promise.reject(error.message || error);
+  }
+}
--- a/dashboard/src/app/genre/genre.component.html
+++ b/dashboard/src/app/genre/genre.component.html
@@ -1,5 +1,28 @@
 <div class="container">
  <h1>{{genreName}}</h1>

-  <app-song-table [songs]=songs (atBottom)=loadSongs()></app-song-table>
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th></th>
+        <th>Name</th>
+        <th>Artist</th>
+        <th>Album</th>
+        <th>Album Artist</th>
+        <th>Play Count</th>
+        <th>Genre</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let song of songs | sortBy : 'Track Number'">
+        <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
+        <td>{{song.Name}}</td>
+        <td><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
+        <td><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
+        <td>{{song['Album Artist']}}</td>
+        <td>{{song['Play Count']}}</td>
+        <td>{{song.Genre}}</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
--- a/dashboard/src/app/genre/genre.component.ts
+++ b/dashboard/src/app/genre/genre.component.ts
@@ -1,10 +1,9 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';

-import { TsService } from '../ts-service/ts.service';
-import { SongTableComponent } from '../song-table/song-table.component';
+import { ElsService } from '../els.service';

-import { Song } from '../model/song';
+import { Song } from '../object/song';

@Component({
  selector: 'app-genre',
@@ -12,12 +11,11 @@ import { Song } from '../model/song';
  styleUrls: ['./genre.component.css']
 })
 export class GenreComponent implements OnInit {
-  @ViewChild(SongTableComponent) songtable: SongTableComponent;
  genreName = '';
  songs: Array<Song> = [];

  constructor(
-    private tsService: TsService,
+    private elsService: ElsService,
    private route: ActivatedRoute
  ) { }

@@ -29,7 +27,7 @@ export class GenreComponent implements OnInit {
  }

  loadSongs(): any {
-    this.tsService.getGenreSongs(this.genreName, this.songs.length).subscribe(
+    this.elsService.getGenreSongs(this.genreName, this.songs.length).subscribe(
      data => {
        // this.moreDataAvailable = data.length === ElsService.DEFAULT_SIZE;

@@ -39,7 +37,6 @@ export class GenreComponent implements OnInit {
          this.songs = data;
        } else {
          data.forEach(song => {
-            this.songtable.setSortable(true);
            this.songs.push(song);
          });
        }
--- a/dashboard/src/app/model/suggested.ts
+++ b/dashboard/src/app/model/suggested.ts
@@ -1,4 +0,0 @@
-export class Suggested {
-    name: string;
-    type: string;
-}
--- a/dashboard/src/app/model/tsBucket.ts
+++ b/dashboard/src/app/model/tsBucket.ts
@@ -1,6 +0,0 @@
-export class TsBucket {
-  value: string;
-  count: number;
-  group_key: string[];
-  found: number;
-}
--- a/dashboard/src/app/object/album.ts
+++ b/dashboard/src/app/object/album.ts
@@ -1,7 +1,5 @@
 export class Album {
-    id: number;
    Name: string;
-    Cover: string;
    Album: string;
    Artist: Array<string>;
    Rating: number;
@@ -12,5 +10,4 @@ export class Album {
    'Album Rating Computed':  boolean;
    'Play Count': number;
    'Total Time': number;
-    'Album Artist': string;
 }
--- a/dashboard/src/app/object/artist.ts
+++ b/dashboard/src/app/object/artist.ts
--- a/dashboard/src/app/object/bucket.ts
+++ b/dashboard/src/app/object/bucket.ts
--- a/dashboard/src/app/object/song.ts
+++ b/dashboard/src/app/object/song.ts
@@ -4,5 +4,4 @@ export class Song {
    'Play Count': number;
    Album: string;
    'Track Number': number; // TODO Default property
-    'Disc Number': number;
 }
--- a/dashboard/src/app/pipes/convert-more-exact.pipe.spec.ts
+++ b/dashboard/src/app/pipes/convert-more-exact.pipe.spec.ts
@@ -1,8 +0,0 @@
-import { ConvertMoreExactPipe } from './convert-more-exact.pipe';
-
-describe('ConvertMoreExactPipe', () => {
-  it('create an instance', () => {
-    const pipe = new ConvertMoreExactPipe();
-    expect(pipe).toBeTruthy();
-  });
-});
--- a/dashboard/src/app/pipes/convert-more-exact.pipe.ts
+++ b/dashboard/src/app/pipes/convert-more-exact.pipe.ts
@@ -1,56 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'convertMoreExact'
-})
-export class ConvertMoreExactPipe implements PipeTransform {
-
-  /**
-   * Convert milliseconds to rounded time e.g. ~84d
-   * @param timeMs time in milliseconds
-   */
-  transform(timeMs: number): string  {
-    let x = timeMs / 1000;
-
-    const seconds = Math.floor(x % 60);
-    x /= 60;
-
-    let minutes = 0;
-    if (x > 1) { minutes = Math.floor(x % 60); }
-    x /= 60;
-
-    let hours = 0;
-    if (x > 1) { hours = Math.floor(x % 24); }
-    // TODO Enable/disable day
-    x /= 24;
-    const days = Math.floor(x);
-
-    // Final string
-    let ret = '~';
-    if (days > 0) {
-      return '~' + (days + (hours > 12 ? 1 : 0)) + 'd';
-    }
-    if (hours > 0) {
-      if (minutes > 45) {
-        ret += (hours + 1) + 'h';
-      } else if (minutes < 15) {
-        ret += hours + 'h';
-      } else {
-        ret += hours + 'h 1/2';
-      }
-      return ret;
-    }
-    if (minutes > 0) {
-      ret += (minutes + (seconds > 35 ? 1 : 0)) + 'min';
-      return ret;
-    }
-    if (seconds > 0) {
-      if (seconds > 35) {
-        return '~1min';
-      } else {
-        return seconds + 's';
-      }
-    }
-  }
-
-}
--- a/dashboard/src/app/pipes/convert-size-to-string.pipe.spec.ts
+++ b/dashboard/src/app/pipes/convert-size-to-string.pipe.spec.ts
@@ -1,8 +0,0 @@
-import { ConvertSizeToStringPipe } from './convert-size-to-string.pipe';
-
-describe('ConvertSizeToStringPipe', () => {
-  it('create an instance', () => {
-    const pipe = new ConvertSizeToStringPipe();
-    expect(pipe).toBeTruthy();
-  });
-});
--- a/dashboard/src/app/pipes/convert-size-to-string.pipe.ts
+++ b/dashboard/src/app/pipes/convert-size-to-string.pipe.ts
@@ -1,26 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'convertSizeToString'
-})
-export class ConvertSizeToStringPipe implements PipeTransform {
-
-  /**
-   * Convert size to human readable size
-   * @param size size in byte
-   */
-  transform(size: number): any {
-    const units = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
-
-    if (size === 0) {
-      return '0 Byte';
-    }
-
-    const i = Math.floor(Math.log(size) / Math.log(1024));
-    let calcSize = size / Math.pow(1024, i);
-    calcSize = Math.round(calcSize * 100) / 100;
-
-    return calcSize + ' ' + units[i];
-  }
-
-}
--- a/dashboard/src/app/pipes/convertms.pipe.spec.ts
+++ b/dashboard/src/app/pipes/convertms.pipe.spec.ts
@@ -1,8 +0,0 @@
-import { ConvertMsPipe } from './convertms.pipe';
-
-describe('ConvertMsPipe', () => {
-  it('create an instance', () => {
-    const pipe = new ConvertMsPipe();
-    expect(pipe).toBeTruthy();
-  });
-});
--- a/dashboard/src/app/pipes/convertms.pipe.ts
+++ b/dashboard/src/app/pipes/convertms.pipe.ts
@@ -1,38 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'convertMs'
-})
-export class ConvertMsPipe implements PipeTransform {
-
-  /**
-   * Convert milliseconds to "readable" duration e.g. 1d21h35m24s
-   * @param timeMs time in milliseconds
-   */
-  transform(timeMs: number): string {
-    let x = timeMs / 1000;
-
-    const seconds = Math.floor(x % 60);
-    x /= 60;
-
-    let minutes = 0;
-    if (x > 1) { minutes = Math.floor(x % 60); }
-    x /= 60;
-
-    let hours = 0;
-    if (x > 1) { hours = Math.floor(x % 24); }
-    // TODO Enable/disable day
-    x /= 24;
-    const days = Math.floor(x);
-
-    // Final string
-    let ret = '';
-    if (days > 0) { ret += parseInt('0' + days) + 'd'; }
-    if (hours > 0) { ret += ('0' + hours).slice(-2) + 'h'; }
-    if (minutes > 0) { ret += ('0' + minutes).slice(-2) + 'm'; }
-    if (seconds > 0) { ret += ('0' + seconds).slice(-2) + 's'; }
-
-    return ret;
-    // return ('0' + days).slice(-2) + ':' + ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);
-  }
-}
--- a/dashboard/src/app/pipes/round.pipe.spec.ts
+++ b/dashboard/src/app/pipes/round.pipe.spec.ts
@@ -1,8 +0,0 @@
-import { RoundPipe } from './round.pipe';
-
-describe('RoundPipe', () => {
-  it('create an instance', () => {
-    const pipe = new RoundPipe();
-    expect(pipe).toBeTruthy();
-  });
-});
--- a/dashboard/src/app/pipes/round.pipe.ts
+++ b/dashboard/src/app/pipes/round.pipe.ts
@@ -1,21 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'round'
-})
-export class RoundPipe implements PipeTransform {
-
-  /**
-   * Round a value
-   * @param value value to round
-   * @param precision number of numbers to keep after coma - 1 if unspecified
-   */
-  transform(value: number, precision?: number): number {
-    if (precision === undefined) {
-      precision = 1;
-    }
-    const factor = Math.pow(10, precision);
-    return Math.round(value * factor) / factor;
-  }
-
-}
--- a/dashboard/src/app/pipes/sort-by.pipe.ts
+++ b/dashboard/src/app/pipes/sort-by.pipe.ts
@@ -1,40 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'sortBy'
-})
-export class SortByPipe implements PipeTransform {
-
-  /**
-   * Sort an array by multiple elements.
-   *
-   * Example to sort an array respectively by Year, Album, Disc Number, etc.
-   * Typescript usage:
-   * <pre>
-   * new SortByPipe().transform(this.songs, 'Year', 'Album', 'Disc Number', 'Track Number', 'Play Count');
-   * </pre>
-   * In HTML usage:
-   * <pre>
-   * <tr *ngFor="let song of songs | sortBy : 'Year':'Album':'Disc Number':'Track Number'">
-   * </pre>
-   *
-   * @param array array to sort
-   * @param args elements used to sort in oder
-   */
-  transform(array: Array<any>, ...args: any[]): Array<any> {
-    array.sort((a: any, b: any) => {
-      for (let i = 0; i < args.length; i++) {
-        const arg = args[i];
-
-        if (a[arg] === undefined && b[arg] !== undefined) { return -1; }
-        if (a[arg] !== undefined && b[arg] === undefined) { return 1; }
-
-        if (a[arg] < b[arg]) { return -1; }
-        if (a[arg] > b[arg]) { return 1; }
-      }
-      return 0;
-    });
-    return array;
-  }
-
-}
--- a/dashboard/src/app/song-table/song-table.component.css
+++ b/dashboard/src/app/song-table/song-table.component.css
--- a/dashboard/src/app/song-table/song-table.component.html
+++ b/dashboard/src/app/song-table/song-table.component.html
@@ -1,55 +0,0 @@
-<table class="table table-striped" (window:scroll)="onScroll($event)">
-  <thead>
-    <tr>
-      <th></th>
-      <th>Name</th>
-      <th>Album</th>
-      <th>Year</th>
-      <th>Artist</th>
-      <th>Album Artist</th>
-      <th>Play Count</th>
-      <th>Genre</th>
-      <th>Bit Rate</th>
-      <th>Rating</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let song of songs | sortBy : 'Year':'Album':'Disc Number':'Track Number'">
-      <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
-      <td>{{song.Name}}</td>
-      <td>
-        <a [routerLink]="['/album', song.Album]">{{song.Album}}</a>
-      </td>
-      <td>{{song.Year}}</td>
-      <td>
-        <a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a>
-      </td>
-      <td>{{song['Album Artist'] ? song['Album Artist'] : "-" }}</td>
-      <td>{{song['Play Count']}}</td>
-      <td>
-        <a [routerLink]="['/genre', song.Genre]">{{song.Genre}}</a>
-      </td>
-      <td [title]="song['Bit Rate']">
-        <span [class]="'signal signal-' + roundBitRate(song['Bit Rate'])"></span>
-      </td>
-      <td class="star" [title]="(song['Rating Computed']?'Computed Rating: ':'Rating: ') + song.Rating">
-        <span *ngFor="let item of numberToArray(song.Rating, 20)">
-          <span class="glyphicon" [ngClass]="song['Rating Computed']?'glyphicon-star-empty':'glyphicon-star'"></span>
-        </span>
-        </td>
-      <td *ngIf="song.Loved" class="loved">
-        <span class="glyphicon glyphicon-heart heart"></span>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-<!-- Go to Top Button-->
-<button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="bottomReached" aria-label="Top" (click)="scrollTop()"
-  title="Go back to Top!">
-  <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
-</button>
-<button type="button" class="btn btn-primary btn-top btn-sort" [class.btn-top-is-visible]="sortable" aria-label="Top" (click)="sort()"
-  title="Sort by Album & Track Number">
-  <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span>
-</button>
--- a/dashboard/src/app/song-table/song-table.component.spec.ts
+++ b/dashboard/src/app/song-table/song-table.component.spec.ts
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SongTableComponent } from './song-table.component';
-
-describe('SongTableComponent', () => {
-  let component: SongTableComponent;
-  let fixture: ComponentFixture<SongTableComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SongTableComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SongTableComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/dashboard/src/app/song-table/song-table.component.ts
+++ b/dashboard/src/app/song-table/song-table.component.ts
@@ -1,61 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Utils } from '../utils';
-
-import { Song } from './../model/song';
-import { SortByPipe } from './../pipes/sort-by.pipe';
-
-@Component({
-  selector: 'app-song-table',
-  templateUrl: './song-table.component.html',
-  styleUrls: ['./song-table.component.css']
-})
-export class SongTableComponent {
-  numberToArray = Utils.numberToArray;
-  @Input() songs: Array<Song> = [];
-  @Output() private atBottom = new EventEmitter();
-
-  // To activate button in interface var
-  bottomReached = false;
-  sortable: boolean;
-
-  constructor() { }
-
-  /**
-   * Handle scroll:
-   * - load data if at bottom of screen (if needed)
-   * - hide/show "go to top" button
-   *
-   * @param event scroll event
-   */
-  onScroll(event: any) {
-    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
-      this.atBottom.emit();
-    }
-
-    // Show/hide 'at top' button
-    if (window.scrollY > window.innerHeight) {
-      this.bottomReached = true;
-    }
-
-    if (window.scrollY === 0) {
-      this.bottomReached = false;
-    }
-  }
-
-  scrollTop(): void {
-    window.scrollTo(0, 0);
-  }
-
-  roundBitRate(bitRate: number) {
-    return Math.round(bitRate / 64);
-  }
-
-  sort(): void {
-    this.songs = new SortByPipe().transform(this.songs, 'Year', 'Album', 'Disc Number', 'Track Number', 'Play Count');
-    this.sortable = false;
-  }
-
-  setSortable(sortable: boolean) {
-    this.sortable = sortable;
-  }
-}
--- a/dashboard/src/app/pipes/sort-by.pipe.spec.ts
+++ b/dashboard/src/app/pipes/sort-by.pipe.spec.ts
--- a/dashboard/src/app/sort-by.pipe.ts
+++ b/dashboard/src/app/sort-by.pipe.ts
@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'sortBy'
+})
+export class SortByPipe implements PipeTransform {
+
+  transform(array: Array<any>, ...args: any[]): Array<any> {
+    array.sort((a: any, b: any) => {
+      for (let i = 0; i < array.length; i++) {
+        const arg = args[i];
+
+        if (a[arg] === undefined && b[arg] !== undefined) { return -1; }
+        if (a[arg] !== undefined && b[arg] === undefined) { return 1; }
+
+        if (a[arg] < b[arg]) { return -1; }
+        if (a[arg] > b[arg]) { return 1; }
+      }
+      return 0;
+    });
+    return array;
+  }
+
+}
--- a/dashboard/src/app/to-sort/to-sort.component.css
+++ b/dashboard/src/app/to-sort/to-sort.component.css
@@ -1,38 +0,0 @@
-.panel-stat {
-  min-height: 102px;
-}
-
-.panel-green {
-background-color: #16a085;
-color:white;
-}
-.panel-yellow {
-background-color: #f1c40f;
-color:white;
-}
-
-.panel-red {
-background-color: #d9534f;
-color:white;
-}
-
-.panel-purple {
-background-color: #9b59b6;
-color:white;
-}
-
-.panel-blue {
-background-color: #3498db;
-color:white;
-}
-
-.stats_icon {
-font-size: 3em;
-}
-
-.circle {
-border-radius: 50%;
-background-color: #9b59b6;
-margin: 0 auto;
-
-}
--- a/dashboard/src/app/to-sort/to-sort.component.html
+++ b/dashboard/src/app/to-sort/to-sort.component.html
@@ -1,132 +0,0 @@
-<div class="container">
-  <h1>To sort Songs - </h1>
-
-<br />
-<div class="row cardAdmin">
-  <div class="col-lg-3 col-md-3">
-    <div class="panel panel-yellow">
-        <div class="panel-heading">
-            <div class="row">
-                <div class="col-xs-3">
-                    <span class="glyphicon glyphicon-play stats_icon"></span>
-                </div>
-                <div class="col-xs-9 text-right">
-                    <div>
-                        <h3 *ngIf="!trackCountSong"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                        <h3 *ngIf="trackCountSong">{{trackCountSong}} songs</h3>
-                    </div>
-                    <div>Total songs
-                        <br>~{{totalTime | convertMs}}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-  </div>
-  <div class="col-lg-3 col-md-3">
-    <div class="panel panel-blue">
-        <div class="panel-heading">
-            <div class="row">
-                <div class="col-xs-3">
-                    <span class="glyphicon glyphicon-cd stats_icon"></span>
-                </div>
-                <div class="col-xs-9 text-right">
-                    <div>
-                        <h3 *ngIf="!neverListenSong"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                        <h3 *ngIf="neverListenSong">{{nbAlbums}}</h3>
-                    </div>
-                    <div><br>Albums</div>
-                </div>
-            </div>
-        </div>
-    </div>
-  </div>
-  <div class="col-lg-3 col-md-3">
-    <div class="panel panel-green">
-        <div class="panel-heading">
-            <div class="row">
-                <div class="col-xs-3">
-                    <span class="glyphicon glyphicon-hdd stats_icon"></span>
-                </div>
-                <div class="col-xs-9 text-right">
-                    <div>
-                        <h3 *ngIf="!totalSize"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                        <h3 *ngIf="totalSize">{{totalSize | convertSizeToString}}</h3>
-                    </div>
-                    <div><br>Total size</div>
-                </div>
-            </div>
-        </div>
-    </div>
-  </div>
-  <div class="col-lg-3 col-md-3">
-    <div class="panel panel-red">
-        <div class="panel-heading">
-            <div class="row">
-                <div class="col-xs-3">
-                    <span class="glyphicon glyphicon-stop stats_icon"></span>
-                </div>
-                <div class="col-xs-9 text-right">
-                    <div>
-                        <h3 *ngIf="!neverListenSong"><span class="glyphicon glyphicon-refresh loading"></span></h3>
-                        <h3 *ngIf="neverListenSong">{{neverListenSong}}</h3>
-                    </div>
-                    <div><br>Never list. songs (~{{neverListenSong / trackCountSong * 100 | round}}%)</div>
-                </div>
-            </div>
-        </div>
-    </div>
-  </div>
-</div>
-
-<div class="col-md-12">
-  <table class="table table-striped" style="white-space: nowrap;">
-    <thead>
-        <tr>
-            <th>Album</th>
-            <th>Track Count</th>
-            <th>Artist/Album Artist</th>
-            <th>Play Count</th>
-            <th>Rating</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr *ngFor="let album of albums">
-            <td>
-              <a [routerLink]="['/album', album.Name]" [queryParams]="{tosort: true}">{{album.Name}}</a>&nbsp;
-            </td>
-
-            <td>{{album['Track Count']}}</td>
-
-            <ng-template [ngIf]="album['Album Artist']" [ngIfElse]="artistSection">
-              <td>
-                  <a [routerLink]="['/artist', album['Album Artist']]"  [queryParams]="{tosort: true}">{{album['Album Artist']}}</a>&nbsp;
-              </td>
-            </ng-template>
-
-            <ng-template #artistSection>
-              <td>
-                  <a [routerLink]="['/artist', album.Artist[0]]">{{album.Artist}}</a>&nbsp;
-              </td>
-            </ng-template>
-
-            <ng-template #artistSection>
-              <td>
-                  <a [routerLink]="['/artist', albums[album.key].Artist[0]]">{{albums[album.key].Artist}}</a>&nbsp;
-              </td>
-            </ng-template>
-
-            <td>
-              {{album['Play Count']}} ({{album['Play Count']/album['Track Count'] | number:'1.0-0'}}/songs)
-            </td>
-
-            <td class="star" [title]="(album['Album Rating Computed']?'Computed Rating: ':'Rating: ') + album['Album Rating']">
-            <span *ngFor="let item of numberToArray(album['Album Rating'], 20)">
-              <span class="glyphicon" [ngClass]="album['Album Rating Computed']?'glyphicon-star-empty':'glyphicon-star'"></span>
-            </span>
-            </td>
-        </tr>
-    </tbody>
-  </table>
-</div>
-</div>
--- a/dashboard/src/app/to-sort/to-sort.component.spec.ts
+++ b/dashboard/src/app/to-sort/to-sort.component.spec.ts
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ToSortComponent } from './to-sort.component';
-
-describe('ToSortComponent', () => {
-  let component: ToSortComponent;
-  let fixture: ComponentFixture<ToSortComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ToSortComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ToSortComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/dashboard/src/app/to-sort/to-sort.component.ts
+++ b/dashboard/src/app/to-sort/to-sort.component.ts
@@ -1,38 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ElsSortService } from '../els-service/els-sort.service';
-import { Bucket } from '../model/bucket';
-
-import { Utils } from '../utils';
-
-@Component({
-  selector: 'app-to-sort',
-  templateUrl: './to-sort.component.html',
-  styleUrls: ['./to-sort.component.css']
-})
-export class ToSortComponent implements OnInit {
-  numberToArray = Utils.numberToArray;
-  // Stats var
-  totalTime = 0;
-  totalSize = 0;
-  trackCountSong = 0;
-  neverListenSong = 0;
-  nbAlbums = 0;
-
-  // Global var
-  toSortAlbum: Bucket[] = [];
-  albums = []
-
-  constructor(private elsService: ElsSortService) { }
-
-  ngOnInit(): void {
-    // **** GET STATS ****//
-    this.elsService.getTime().then(result => this.totalTime = result);
-    this.elsService.getSize().then(result => this.totalSize = result);
-    this.elsService.getCountSong().then(result => this.trackCountSong = result);
-    this.elsService.getCountNeverListenSong().then(result => this.neverListenSong = result);
-    this.elsService.getNbAlbums().then(result => this.nbAlbums = result);
-
-    this.elsService.getAlbums().subscribe(data => this.albums = data)
-  }
-
-}
--- a/dashboard/src/app/top-played/top-played.component.css
+++ b/dashboard/src/app/top-played/top-played.component.css
--- a/dashboard/src/app/top-played/top-played.component.html
+++ b/dashboard/src/app/top-played/top-played.component.html
@@ -1,111 +0,0 @@
-<div class="container">
-<div class="col-md-12">
-  <h3>Top Played Album (Naive Way)</h3>
-  <div class="alert alert-info">
-    <strong>Caution:</strong> In this list, albums with more than 10 artists are ignored.
-  </div>
-  <table class="table table-striped">
-    <thead>
-      <tr>
-        <th>Album</th>
-        <th>Artist Name</th>
-        <th>Track Count</th>
-        <th>Play Count</th>
-        <th>Average Play</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let album of mostPlayedAlbumsNaive">
-        <td>
-          <b>{{album.Name}}</b>
-        </td>
-        <td>{{album['Album Artist'] ? album['Album Artist'] : album.Artist}}</td>
-        <td>{{album['Track Count']}}</td>
-        <td>{{album['Play Count']}}</td>
-        <td>{{album['Play Count'] / album['Track Count'] | round}}</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-<div class="col-md-12">
-  <h3>Top Played Album (avg. play way)</h3>
-  <table class="table table-striped">
-    <thead>
-      <tr>
-        <th>Album</th>
-        <th>Artist Name</th>
-        <th>Track Count</th>
-        <th>Play Count</th>
-        <th>Average Play</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let album of mostPlayedAlbums">
-        <td>
-          <b>{{album.Name}}</b>
-        </td>
-        <td>{{album['Album Artist'] ? album['Album Artist'] : album.Artist}}</td>
-        <td>{{album['Track Count']}}</td>
-        <td>{{album['Play Count']}}</td>
-        <td>{{album['Play Count'] / album['Track Count'] | round}}</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-<div class="col-md-12">
-  <h3>Top Played Artist (Naive Way)</h3>
-  <!-- <div class="alert alert-info"> -->
-  <!-- <strong>Caution:</strong> In this list, artist with more than 10 artists are ignored. -->
-  <!-- </div> -->
-  <table class="table table-striped">
-    <thead>
-      <tr>
-        <th>Artist</th>
-        <th>Album Count</th>
-        <th>Track Count</th>
-        <th>Play Count</th>
-        <th>Average Play</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let artist of mostPlayedArtistsNaive">
-        <td>
-          <b>{{artist.Name}}</b>
-        </td>
-        <td>{{artist.Album.length}}</td>
-        <td>{{artist['Track Count']}}</td>
-        <td>{{artist['Play Count']}}</td>
-        <td>{{artist['Play Count'] / artist['Track Count'] | round}}</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-<div class="col-md-12">
-  <h3>Top Played Artist (avg. play way)</h3>
-  <table class="table table-striped">
-    <thead>
-      <tr>
-        <th>Artist</th>
-        <th>Album Count</th>
-        <th>Track Count</th>
-        <th>Play Count</th>
-        <th>Average Play</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let artist of mostPlayedArtists">
-        <td>
-          <b>{{artist.Name}}</b>
-        </td>
-        <td>{{artist.Album.length}}</td>
-        <td>{{artist['Track Count']}}</td>
-        <td>{{artist['Play Count']}}</td>
-        <td>{{artist['Play Count'] / artist['Track Count'] | round}}</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-</div>
--- a/dashboard/src/app/top-played/top-played.component.spec.ts
+++ b/dashboard/src/app/top-played/top-played.component.spec.ts
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TopPlayedComponent } from './top-played.component';
-
-describe('TopPlayedComponent', () => {
-  let component: TopPlayedComponent;
-  let fixture: ComponentFixture<TopPlayedComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TopPlayedComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TopPlayedComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/dashboard/src/app/top-played/top-played.component.ts
+++ b/dashboard/src/app/top-played/top-played.component.ts
@@ -1,65 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { TsService } from '../ts-service/ts.service';
-import { Album } from '../model/album';
-import { Artist } from '../model/artist';
-
-@Component({
-  selector: 'app-top-played',
-  templateUrl: './top-played.component.html',
-  styleUrls: ['./top-played.component.css']
-})
-export class TopPlayedComponent implements OnInit {
-  mostPlayedAlbumsNaive: Album[] = [];
-  mostPlayedAlbums: Album[] = [];
-  mostPlayedArtistsNaive: Artist[] = [];
-  mostPlayedArtists: Artist[] = [];
-
-  constructor(private tsService: TsService) { }
-
-  ngOnInit() {
-    this.tsService.getMostPlayedAlbumNaive()
-    .then(result => {
-      result.forEach(album => {
-        if (album.Artist.length <= 10) {
-          this.mostPlayedAlbumsNaive.push(album);
-        }
-      });
-
-      this.mostPlayedAlbumsNaive.sort((a: any, b: any) => this.sortByAveragePlay(a, b)).splice(10);
-    });
-
-    // this.elsService.getMostPlayedAlbum().subscribe(result => {
-    //   this.mostPlayedAlbums = result;
-
-    //   this.mostPlayedAlbums.sort((a: any, b: any) => this.sortByAveragePlay(a, b)).splice(10);
-    //   // TODO Load more! (Use a )
-    // });
-
-    this.tsService.getMostPlayedArtistNaive()
-    .then(result => {
-      this.mostPlayedArtistsNaive = result;
-
-      this.mostPlayedArtistsNaive.sort((a: any, b: any) => this.sortByAveragePlay(a, b)).splice(10);
-    });
-
-    // this.tsService.getMostPlayedArtist().subscribe(result => {
-    //   result.forEach(artist => {
-    //     if (artist['Track Count'] > 10) {
-    //       this.mostPlayedArtists.push(artist);
-    //     }
-    //   });
-
-    //   this.mostPlayedArtists.sort((a: any, b: any) => this.sortByAveragePlay(a, b)).splice(10);
-    // });
-  }
-
-  sortByAveragePlay(a: any, b: any) {
-    if ((a['Play Count'] / a['Track Count']) < (b['Play Count'] / b['Track Count'])) {
-      return 1;
-    } else {
-      return -1;
-    }
-  }
-
-}
--- a/dashboard/src/app/ts-service/ts-album.service.ts
+++ b/dashboard/src/app/ts-service/ts-album.service.ts
@@ -1,101 +0,0 @@
-import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
-
-import { Observable } from "rxjs";
-import { catchError, map } from "rxjs/operators";
-
-import { TsService } from "./ts.service";
-
-import { Album } from "../model/album";
-import { Song } from "../model/song";
-
-@Injectable()
-export class TsAlbumService extends TsService {
-  constructor(protected http: HttpClient) {
-    super(http);
-  }
-
-  getAlbum(albumName: string): Observable<Album> {
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", albumName);
-    queryParams = queryParams.append("query_by", "Name");
-    console.log("coucou");
-
-    return this.http
-      .get(
-        this.tsUrl +
-          TsService.ALBUM_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .pipe(
-        map((res) => this.responseToOneTypedResult<Album>(res, albumName)),
-        catchError((error) =>
-          this.handleError(error, "getAlbum(" + albumName + ")")
-        )
-      );
-  }
-
-  getAlbumSongs(
-    albumName: string,
-    from: number = 0,
-    toSortFilter = false
-  ): Observable<Song[]> {
-    // TODO Move in els-album service
-    console.info(
-      "getAlbumSongs- Album name: " + albumName + " - from: " + from
-    );
-
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", albumName);
-    queryParams = queryParams.append("query_by", "Album");
-    queryParams = queryParams.append("per_page", TsService.DEFAULT_SIZE);
-    queryParams = queryParams.append("offset", from);
-
-    return this.http
-      .get<any>(
-        this.tsUrl +
-          TsService.SONG_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .pipe(
-        map((res) => this.responseToSongs(res)),
-        catchError((error) =>
-          this.handleError(
-            error,
-            "getAlbumSongs(" + albumName + "," + from + ")"
-          )
-        )
-      );
-  }
-
-  public static GET_ALBUMS_DEFAULT_PARAMS(): HttpParams {
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", "*");
-    queryParams = queryParams.append(
-      "sort_by",
-      "Play Count:desc,Avg Bit Rate:desc"
-    );
-    queryParams = queryParams.append("filter_by", "Min Bit Rate:<128");
-    queryParams = queryParams.append("per_page", "100");
-    return queryParams;
-  }
-
-  getAlbums(queryParams: HttpParams): Observable<Album[]> {
-    return this.http
-      .get<any>(
-        this.tsUrl +
-          TsService.ALBUM_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .pipe(
-        map((res) => this.responseToAlbums(res)),
-        catchError((error) => this.handleError(error, "getAlbums"))
-      );
-  }
-}
--- a/dashboard/src/app/ts-service/ts-artist.service.ts
+++ b/dashboard/src/app/ts-service/ts-artist.service.ts
@@ -1,140 +0,0 @@
-import { HttpClient, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
-import { Observable } from "rxjs";
-import { catchError, map } from "rxjs/operators";
-
-import { TsService } from "./ts.service";
-
-import { Artist } from "../model/artist";
-import { Song } from "../model/song";
-
-@Injectable()
-export class TsArtistService extends TsService {
-  constructor(protected http: HttpClient) {
-    super(http);
-  }
-
-  private getQuerySongsWithArtistName(
-    artistName: string,
-    sortFilter: boolean = false,
-    size: number = 0,
-    from: number = 0
-  ) {
-    let query = {
-      query: {
-        bool: {
-          should: [
-            { match_phrase: { "Album Artist": artistName } },
-            { match_phrase: { Artist: artistName } },
-          ],
-          must_not: [],
-        },
-      },
-    };
-
-    if (sortFilter) {
-      console.log("ElsArtistService- TO SORT filter enabled");
-      query = this.addSortFilterToQuery(query);
-    }
-
-    if (size) {
-      query["size"] = size;
-    }
-
-    if (from) {
-      query["from"] = from;
-    }
-    return query;
-  }
-
-  public getArtist(artistName: string): Observable<Artist> {
-    console.log("getArtist");
-
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", artistName);
-    queryParams = queryParams.append("query_by", "Name");
-
-    return this.http
-      .get<any>(
-        this.tsUrl +
-          TsService.ARTIST_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .pipe(
-        map((res) => this.responseToOneTypedResult<Artist>(res, artistName)),
-        catchError((error) =>
-          this.handleError(error, "getArtist(" + artistName + ")")
-        )
-      );
-  }
-
-  public getArtistSongs(
-    artistName: string,
-    from: number = 0,
-    sortFilter = false
-  ): Observable<Song[]> {
-    console.info(
-      "getArtistSongs- Artist name: " + artistName + " - from: " + from
-    );
-
-    let query = this.getQuerySongsWithArtistName(
-      artistName,
-      sortFilter,
-      TsService.DEFAULT_SIZE,
-      from
-    );
-
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", artistName);
-    queryParams = queryParams.append("query_by", "Artist,Album Artist");
-    queryParams = queryParams.append("per_page", TsService.DEFAULT_SIZE);
-    queryParams = queryParams.append("offset", from);
-
-    return this.http
-      .get<any>(
-        this.tsUrl +
-          TsService.SONG_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .pipe(
-        map((res) => this.responseToSongs(res)),
-        catchError((error) =>
-          this.handleError(
-            error,
-            "getArtistSongs(" + artistName + "," + from + ")"
-          )
-        )
-      );
-  }
-
-  public getCountArtistSong(
-    artistName: string,
-    sortFilter = false
-  ): Observable<number> {
-    console.log("artistname: " + artistName);
-    const query = this.getQuerySongsWithArtistName(artistName, sortFilter);
-
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", artistName);
-    queryParams = queryParams.append("query_by", "Artist"); // QUESTION ArtistName?
-
-    return this.http
-      .get<any>(
-        this.tsUrl +
-          TsService.SONG_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .pipe(
-        map((res) => res.found as number),
-        catchError((error) =>
-          this.handleError(error, "getCountArtistSong" + artistName + ")")
-        )
-      );
-  }
-}
--- a/dashboard/src/app/ts-service/ts-sort.service.ts
+++ b/dashboard/src/app/ts-service/ts-sort.service.ts
@@ -1,169 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map, catchError } from 'rxjs/operators';
-import { TsService } from './ts.service';
-import { Album } from '../model/album';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class TsSortService extends TsService {
-
-  constructor(protected http: HttpClient) {
-    super(http);
-  }
-
-  getTime(): Promise<number> {
-    return this.http
-      .post<any>(this.tsUrl + TsService.SONG_INDEX_NAME + TsService.ACTION_SEARCH,
-            JSON.stringify({
-              query: {
-                bool: {
-                  must_not: [
-                    {
-                      term: {
-                        "Location.tree": "/F:/Musique"
-                      }
-                    }
-                  ]
-                }
-              },
-              aggs: {
-                sum_time: {
-                  sum: { field: 'Total Time'}
-                }
-              },
-              'size': 0
-            }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.aggregations.sum_time.value as number)
-      .catch(error => this.handleError(error, 'getTime()'));
-  }
-
-  getSize(): Promise<number> {
-    return this.http
-      .post<any>(this.tsUrl + TsService.SONG_INDEX_NAME + TsService.ACTION_SEARCH,
-            JSON.stringify({
-              query: {
-                bool: {
-                  must_not: [
-                    {
-                      term: {
-                        "Location.tree": "/F:/Musique"
-                      }
-                    }
-                  ]
-                }
-              },
-              aggs: {
-                sum_time: {
-                  sum: { field: 'Size' }
-                }
-              },
-              'size': 0
-            }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.aggregations.sum_time.value as number)
-      .catch(error => this.handleError(error, 'getSize()'));
-  }
-
-  getCountSong(): Promise<number> {
-    return this.http
-      .post<any>(this.tsUrl + TsService.SONG_INDEX_NAME + TsService.ACTION_COUNT,
-        JSON.stringify({
-          query: {
-              bool: {
-                  must_not: [
-                      {
-                          term: {
-                              "Location.tree": "/F:/Musique"
-                          }
-                      }
-                  ]
-              }
-          }
-        }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.count as number)
-      .catch(error => this.handleError(error, 'getCountSong()'));
-  }
-
-  getCountNeverListenSong(): Promise<number> {
-    return this.http
-      .post<any>(this.tsUrl + TsService.SONG_INDEX_NAME + TsService.ACTION_COUNT,
-            JSON.stringify({
-              'query': {
-                'bool': {
-                  'must_not': [
-                    {
-                    'exists': { 'field': 'Play Count'}
-                  }, {
-                  term: {
-                    "Location.tree": "/F:/Musique"
-                  } }
-                ]
-                }
-              }
-            }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.count as number)
-      .catch(error => this.handleError(error, 'getCountNeverListenSong()'));
-  }
-
-  getNbAlbums(): Promise<number> {
-    return this.http
-      .post<any>(this.tsUrl + TsService.ALBUM_INDEX_NAME + TsService.ACTION_SEARCH,
-            JSON.stringify({
-              'query': {
-                'bool': {
-                  'must_not': [
-                  {
-                    term: {
-                      "Location.tree": "/F:/Musique"
-                    }
-                  }
-                ]
-                }
-              },
-              size: 0,
-              "aggs": {
-                "album_count": {
-                  "cardinality": {
-                    "field": "Album.raw"
-                  }
-                }
-              }
-            }), {headers: this.headers})
-      .toPromise()
-      .then(res => res.aggregations.album_count.value as number )
-      .catch(error => this.handleError(error, 'getNbAlbums()'));
-  }
-
-  getAlbums(): Observable<Album[]> {
-    return this.http
-      .post(this.tsUrl + TsService.ALBUM_INDEX_NAME + TsService.ACTION_SEARCH,
-        JSON.stringify({
-          query: {
-            bool: {
-              must_not: [
-                {
-                  term: {
-                    "Location.tree": "/F:/Musique"
-                  }
-                }
-              ]
-            }
-          },
-          'size': 550,
-          "sort": [
-            { "Play Count": "desc"}
-          ]
-        }), {headers: this.headers})
-      .pipe(
-        map(res => this.responseToAlbums(res)),
-        catchError(error => this.handleError(error, 'getAlbums'))
-      );
-  }
-}
--- a/dashboard/src/app/ts-service/ts.service.ts
+++ b/dashboard/src/app/ts-service/ts.service.ts
@@ -1,456 +0,0 @@
-import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";
-import { Injectable } from "@angular/core";
-
-import { Observable } from "rxjs";
-import { catchError, map } from "rxjs/operators";
-
-import { Album } from "../model/album";
-import { Artist } from "../model/artist";
-import { Song } from "../model/song";
-import { Suggested } from "../model/suggested";
-import { TsBucket } from "../model/tsBucket";
-
-@Injectable()
-export class TsService {
-  public static readonly DEFAULT_SIZE: number = 20;
-  public static readonly SONG_INDEX_NAME = "/songs";
-  public static readonly ARTIST_INDEX_NAME = "/artists";
-  public static readonly ALBUM_INDEX_NAME = "/albums";
-  public static readonly SUGGEST_INDEX_NAME = "/suggest";
-
-  protected static readonly ACTION_SEARCH = "/search";
-  protected static readonly ACTION_COUNT = "/_count";
-
-  protected tsUrl = "http://localhost:8108/collections";
-  protected tsUrlPure = "http://localhost:8108/";
-  protected headers = new HttpHeaders({
-    "Content-Type": "application/json",
-    "X-TYPESENSE-API-KEY": "toto",
-  });
-  protected defaultLocation = "/F:/Musique"; // TODO Use conf
-
-  constructor(protected http: HttpClient) {}
-
-  getTime(): Promise<number> {
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", "*");
-    queryParams = queryParams.append("limit", "0");
-    queryParams = queryParams.append(
-      "facet_by",
-      "Total Time(Range:[0,99999999999999999])"
-    );
-
-    return this.http
-      .get<any>(
-        this.tsUrl +
-          TsService.SONG_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .toPromise()
-      .then((res) => res.facet_counts[0].stats.sum as number)
-      .catch((error) => this.handleError(error, "getTime()"));
-  }
-
-  getSize(): Promise<number> {
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", "*");
-    queryParams = queryParams.append("limit", "0");
-    queryParams = queryParams.append(
-      "facet_by",
-      "Size(Range:[0,99999999999999999])"
-    );
-
-    return this.http
-      .get<any>(
-        this.tsUrl +
-          TsService.SONG_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .toPromise()
-      .then((res) => res.facet_counts[0].stats.sum as number)
-      .catch((error) => this.handleError(error, "getSize()"));
-  }
-
-  getCountSong(index: string): Promise<number> {
-    return this.http
-      .get<any>(this.tsUrl + TsService.SONG_INDEX_NAME, {
-        headers: this.headers,
-      })
-      .toPromise()
-      .then((res) => res.num_documents as number)
-      .catch((error) => this.handleError(error, "getCountSong(" + index + ")"));
-  }
-
-  getCountNeverListenSong(): Promise<number> {
-    // TODO Impossible sans valeur par defaut dans Play Count
-    return new Promise((resolve) => {
-      resolve(0);
-    });
-  }
-
-  getMostPlayedTrack(): Observable<Song[]> {
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", "*");
-    queryParams = queryParams.append("sort_by", "Play Count:desc");
-    queryParams = queryParams.append("limit", 5);
-
-    return this.http
-      .get<any>(
-        this.tsUrl +
-          TsService.SONG_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .pipe(
-        map((res) => this.responseToSongs(res)),
-        catchError((error) => this.handleError(error, "getMostPlayedTrack()"))
-      );
-  }
-
-  getMostPlayedArtist(): Observable<Artist[]> {
-    return this.http
-      .post(
-        this.tsUrl + TsService.ARTIST_INDEX_NAME + TsService.ACTION_SEARCH,
-        JSON.stringify({
-          sort: [
-            {
-              _script: {
-                type: "number",
-                script: {
-                  inline: "doc['Play Count'].value / doc['Track Count'].value",
-                },
-                order: "desc",
-              },
-            },
-          ],
-          size: 100,
-        }),
-        { headers: this.headers }
-      )
-      .pipe(
-        map((res) => this.responseToArtists(res)),
-        catchError((error) => this.handleError(error, "getMostPlayedArtist()"))
-      );
-  }
-
-  /**
-   * A basic get of albums ordered by 'Play Count' field.
-   */
-  getMostPlayedAlbumNaive(): Promise<Album[]> {
-    return this.http
-      .get(
-        this.tsUrl +
-          TsService.ALBUM_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH +
-          "?sort_by=Play%20Count%3Adesc,Track%20Count%3Adesc&limit=20&q=*",
-        { headers: this.headers }
-      )
-      .toPromise()
-      .then((res) => this.responseToAlbums(res))
-      .catch((error) => this.handleError(error, "getMostPlayedAlbumNaive"));
-    // TODO Excluse 'Divers' + compilation
-  }
-
-  getMostPlayedArtistNaive(): Promise<Artist[]> {
-    return this.http
-      .get(
-        this.tsUrl +
-          TsService.ARTIST_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH +
-          "?sort_by=Play%20Count%3Adesc&limit=20&q=*",
-        { headers: this.headers }
-      )
-      .toPromise()
-      .then((res) => this.responseToAlbums(res))
-      .catch((error) => this.handleError(error, "getMostPlayedArtistNaive"));
-    // TODO Excluse 'Divers' + compilation
-  }
-
-  getGenreSongs(genreName: string, from: number = 0): Observable<Song[]> {
-    console.info(
-      "getGenreSongs- Genre name: " + genreName + " - from: " + from
-    );
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", genreName);
-    queryParams = queryParams.append("query_by", "Genre");
-    queryParams = queryParams.append("per_page", TsService.DEFAULT_SIZE);
-    queryParams = queryParams.append("offset", from);
-
-    return this.http
-      .get<any>(
-        this.tsUrl +
-          TsService.SONG_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .pipe(
-        map((res) => this.responseToSongs(res)),
-        catchError((error) =>
-          this.handleError(
-            error,
-            "getGenreSongs(" + genreName + "," + from + ")"
-          )
-        )
-      );
-  }
-
-  getGenres(ordering: string = "desc"): Observable<TsBucket[]> {
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", "*");
-    queryParams = queryParams.append("facet_by", "Genre");
-    queryParams = queryParams.append("max_facet_values", "5");
-    queryParams = queryParams.append("limit", "0");
-
-    return this.http
-      .get<any>(
-        this.tsUrl +
-          TsService.SONG_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .pipe(
-        map((res) => this.responseAggregationToBucket(res)),
-        catchError((error) =>
-          this.handleError(error, "getGenres(" + ordering + ")")
-        )
-      );
-  }
-
-  getGenreCount(ordering: string = "desc"): Observable<number> {
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", "*");
-    queryParams = queryParams.append("facet_by", "Genre");
-    queryParams = queryParams.append("max_facet_values", "0");
-    queryParams = queryParams.append("limit", "0");
-
-    return this.http
-      .get<any>(
-        this.tsUrl +
-          TsService.SONG_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .pipe(
-        map((res) => res.facet_counts[0].stats.total_values as number),
-        catchError((error) =>
-          this.handleError(error, "getGenres(" + ordering + ")")
-        )
-      );
-  }
-
-  getLastAddedAlbums(month: number): Observable<TsBucket[]> {
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", "*");
-    queryParams = queryParams.append("sort_by", "Track ID:desc");
-    queryParams = queryParams.append("group_by", "Album");
-
-    // TODO Deal with mounth?
-
-    return this.http
-      .get(
-        this.tsUrl +
-          TsService.SONG_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .pipe(
-        map((res) => this.responseSubAggregationToBucket(res)),
-        catchError((error) =>
-          this.handleError(error, "getLastAddedAlbums(" + month + ")")
-        )
-      );
-  }
-
-  getArtistFromAlbumName(albumname: string): Observable<Album[]> {
-    let queryParams = new HttpParams();
-    queryParams = queryParams.append("q", albumname);
-    queryParams = queryParams.append("query_by", "Name");
-
-    return this.http
-      .get<any>(
-        this.tsUrl +
-          TsService.ALBUM_INDEX_NAME +
-          "/documents" +
-          TsService.ACTION_SEARCH,
-        { headers: this.headers, params: queryParams }
-      )
-      .pipe(
-        map((res) => res.hits),
-        map((hits: Array<any>) => {
-          const result: Array<Album> = [];
-          hits.forEach((hit) => {
-            result.push(hit.document);
-          });
-          return result;
-        }),
-        catchError((error) =>
-          this.handleError(error, "getArtistFromAlbumName(" + albumname + ")")
-        )
-      );
-  }
-
-  getSuggest(text: string): Observable<Suggested[]> {
-    let queryParameters = new HttpParams();
-    queryParameters = queryParameters.append("query_by", "Name");
-    queryParameters = queryParameters.append(
-      "sort_by",
-      "_text_match:desc,Play Count:desc"
-    );
-    queryParameters = queryParameters.append("limit", 5);
-    console.log("search sugget: " + text);
-
-    return this.http
-      .post<any>(
-        this.tsUrlPure + "multi_search",
-        JSON.stringify({
-          searches: [
-            {
-              collection: "albums",
-              q: text,
-            },
-            {
-              collection: "artists",
-              q: text,
-            },
-          ],
-        }),
-        { headers: this.headers, params: queryParameters }
-      )
-      .pipe(
-        map((res) => this.responseSuggesterToSuggested(res)),
-        catchError((error) =>
-          this.handleError(error, "getSuggest(" + text + ")")
-        )
-      );
-  }
-
-  /** Process a result to return just one result.
-   * Used to get an album or an artist.
-   * Take a name to put in console output if no result or more than one result.
-   *
-   * @param res Response to process
-   * @param name The searched name - for console output
-   */
-  protected responseToOneTypedResult<T>(res: any, name: string): T {
-    const hits = res.hits;
-
-    if (hits.length < 1) {
-      console.info('No result found for name: "' + name);
-      return undefined;
-    }
-    if (hits.length > 1) {
-      // TODO Cumul results (for album)
-      console.error(
-        'More than one result for name: "' +
-          name +
-          '". Found (' +
-          hits.length +
-          "), return the first."
-      );
-    }
-    return hits[0].document;
-  }
-
-  /** Process a response to a array of songs.
-   *
-   * @param res Response to process
-   */
-  protected responseToSongs(res: any): Song[] {
-    const result: Array<Song> = [];
-    res.hits.forEach((hit) => {
-      result.push(hit.document);
-    });
-    return result;
-  }
-
-  /** Process a response to a array of songs.
-   *
-   * @param res Response to process
-   */
-  private responseToArtists(res: any): Artist[] {
-    const result: Array<Artist> = [];
-    res.hits.hits.forEach((hit) => {
-      result.push(hit._source);
-    });
-    return result;
-  }
-
-  /** Process an aggregation response to an array of Bucket.
-   *
-   * @param res Response to process
-   * @param name Name of aggregation
-   */
-  protected responseAggregationToBucket(res: any): TsBucket[] {
-    const result: Array<TsBucket> = [];
-    res.facet_counts[0].counts.forEach((bucket) => {
-      result.push(bucket);
-    });
-    return result;
-  }
-
-  private responseSubAggregationToBucket(res: any): TsBucket[] {
-    const result: Array<TsBucket> = [];
-
-    res.grouped_hits.forEach((tmp) => {
-      result.push(tmp);
-    });
-    return result;
-  }
-
-  protected responseSuggesterToSuggested(res: any): Suggested[] {
-    const suggesteds: Array<Suggested> = [];
-
-    res.results.forEach((result) => {
-      let type = result.request_params.collection_name;
-      type = type.slice(0, type.length - 1);
-
-      result.hits.forEach((hit) => {
-        let suggested = new Suggested();
-        suggested.type = type;
-        suggested.name = hit.document.Name;
-        suggesteds.push(suggested);
-      });
-    });
-    return suggesteds;
-  }
-
-  protected handleError(error: any, origin: string): Promise<any> {
-    console.error("An error occurred!");
-    console.error("Origin function: ", origin);
-    console.error("An error occurred!", error); // for demo purposes only
-    console.error(error); // for demo purposes only
-    return Promise.reject(error.message || error);
-  }
-
-  protected addSortFilterToQuery(query) {
-    query.query.bool.must_not.push({
-      term: {
-        "Location.tree": this.defaultLocation,
-      },
-    });
-    return query;
-  }
-
-  /** Process a response to a array of songs.
-   *
-   * @param res Response to process
-   */
-  protected responseToAlbums(res: any): Album[] {
-    const result: Array<Album> = [];
-    res.hits.forEach((hit) => {
-      result.push(hit.document);
-    });
-    return result;
-  }
-}
--- a/dashboard/src/app/utils.spec.ts
+++ b/dashboard/src/app/utils.spec.ts
@@ -1,7 +0,0 @@
-import { Utils } from './utils';
-
-describe('Utils', () => {
-  it('should create an instance', () => {
-    expect(new Utils()).toBeTruthy();
-  });
-});
--- a/dashboard/src/app/utils.ts
+++ b/dashboard/src/app/utils.ts
@@ -1,16 +0,0 @@
-export class Utils {
-
-  /**
-   * Convert a number to an array.
-   * Mainly used for rating: need to convert the number to use a ngFor
-   * @param n number to convert on a array of n cases
-   * @param d if you want to divide number, e.g. by 20 for rating (rating is one value out of one hundred)
-   */
-  public static numberToArray(n: number, d: number = 1): any[] {
-    if (!n) {
-      return Array(0)
-    }
-
-    return Array(n / d);
-  }
-}
--- a/dashboard/src/assets/icons_signal/carre-high/0.png
+++ b/dashboard/src/assets/icons_signal/carre-high/0.png
--- a/dashboard/src/assets/icons_signal/carre-high/0.svg
+++ b/dashboard/src/assets/icons_signal/carre-high/0.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="45" y="5" display="inline" width="10" height="10"></rect><rect x="45" y="45" display="inline" width="10" height="10"></rect><rect x="35" y="35" display="inline" width="10" height="10"></rect><rect x="25" y="25" display="inline" width="10" height="10"></rect><rect x="55" y="35" display="inline" width="10" height="10"></rect><rect x="65" y="15" display="inline" width="10" height="10"></rect><rect x="35" y="5" display="inline" width="10" height="10"></rect><rect x="15" y="15" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="5" y="55" display="inline" width="10" height="10"></rect><rect x="5" y="35" display="inline" width="10" height="10"></rect><rect x="15" y="65" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="85" display="inline" width="10" height="10"></rect><rect x="35" y="85" display="inline" width="10" height="10"></rect><rect x="55" y="85" display="inline" width="10" height="10"></rect><rect x="65" y="75" display="inline" width="10" height="10"></rect><rect x="75" y="65" display="inline" width="10" height="10"></rect><rect x="75" y="75" display="inline" width="10" height="10"></rect><rect x="85" y="45" display="inline" width="10" height="10"></rect><rect x="85" y="55" display="inline" width="10" height="10"></rect><rect x="85" y="35" display="inline" width="10" height="10"></rect><rect x="75" y="25" display="inline" width="10" height="10"></rect><rect x="75" y="15" display="inline" width="10" height="10"></rect><rect x="55" y="5" display="inline" width="10" height="10"></rect></g><g><path d="M5.675,93.515h9V61.651h-9V93.515z M6.675,62.651h7v29.864h-7V62.651z"></path><path d="M18.175,93.515h9V52.803h-9V93.515z M19.175,53.803h7v38.712h-7V53.803z"></path><path d="M30.675,93.515h9v-47.06h-9V93.515z M31.675,47.455h7v45.06h-7V47.455z"></path><path d="M43.175,93.515h9V37.607h-9V93.515z M44.175,38.607h7v53.908h-7V38.607z"></path><path d="M55.675,93.515h9V28.759h-9V93.515z M56.675,29.759h7v62.756h-7V29.759z"></path><path d="M68.175,17.411v76.104h9V17.411H68.175z M76.175,92.515h-7V18.411h7V92.515z"></path></g></svg>
--- a/dashboard/src/assets/icons_signal/carre-high/1.png
+++ b/dashboard/src/assets/icons_signal/carre-high/1.png
--- a/dashboard/src/assets/icons_signal/carre-high/1.svg
+++ b/dashboard/src/assets/icons_signal/carre-high/1.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="25" y="25" display="inline" width="10" height="10"></rect><rect x="75" y="75" display="inline" width="10" height="10"></rect><rect x="85" y="75" display="inline" width="10" height="10"></rect><rect x="35" y="15" display="inline" width="10" height="10"></rect><rect x="45" y="5" display="inline" width="10" height="10"></rect><rect x="55" y="15" display="inline" width="10" height="10"></rect><rect x="5" y="65" display="inline" width="10" height="10"></rect><rect x="15" y="55" display="inline" width="10" height="10"></rect><rect x="15" y="45" display="inline" width="10" height="10"></rect><rect x="25" y="35" display="inline" width="10" height="10"></rect><rect x="65" y="25" display="inline" width="10" height="10"></rect><rect x="65" y="35" display="inline" width="10" height="10"></rect><rect x="75" y="45" display="inline" width="10" height="10"></rect><rect x="75" y="55" display="inline" width="10" height="10"></rect><rect x="85" y="65" display="inline" width="10" height="10"></rect><rect x="65" y="75" display="inline" width="10" height="10"></rect><rect x="55" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="85" display="inline" width="10" height="10"></rect><rect x="35" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="5" y="75" display="inline" width="10" height="10"></rect></g><g><polygon points="5.675,93.515 14.675,93.515 14.675,93.015 14.675,62.152 14.675,61.652 5.675,61.652  "></polygon><path d="M18.175,93.515h9V52.804h-9V93.515z M19.175,53.804h7v38.711h-7V53.804z"></path><path d="M30.675,93.515h9v-47.06h-9V93.515z M31.675,47.456h7v45.06h-7V47.456z"></path><path d="M43.175,93.515h9V37.607h-9V93.515z M44.175,38.607h7v53.908h-7V38.607z"></path><path d="M55.675,93.515h9V28.759h-9V93.515z M56.675,29.759h7v62.756h-7V29.759z"></path><path d="M68.175,93.515h9V17.412h-9V93.515z M69.175,18.412h7v74.104h-7V18.412z"></path></g></svg>
--- a/dashboard/src/assets/icons_signal/carre-high/2.png
+++ b/dashboard/src/assets/icons_signal/carre-high/2.png
--- a/dashboard/src/assets/icons_signal/carre-high/2.svg
+++ b/dashboard/src/assets/icons_signal/carre-high/2.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="85" y="25" display="inline" width="10" height="10"></rect><rect x="65" y="35" display="inline" width="10" height="10"></rect><rect x="75" y="35" display="inline" width="10" height="10"></rect><rect x="55" y="45" display="inline" width="10" height="10"></rect><rect x="45" y="45" display="inline" width="10" height="10"></rect><rect x="35" y="45" display="inline" width="10" height="10"></rect><rect x="35" y="55" display="inline" width="10" height="10"></rect><rect x="35" y="65" display="inline" width="10" height="10"></rect><rect x="35" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="5" y="75" display="inline" width="10" height="10"></rect><rect x="5" y="65" display="inline" width="10" height="10"></rect><rect x="5" y="55" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="15" y="45" display="inline" width="10" height="10"></rect><rect x="25" y="45" display="inline" width="10" height="10"></rect></g><g><polygon points="5.675,93.516 14.675,93.516 14.675,93.016 14.675,62.151 14.675,61.651 5.675,61.651  "></polygon><polygon points="18.175,93.516 27.175,93.516 27.175,93.016 27.175,53.304 27.175,52.804 18.175,52.804  "></polygon><path d="M30.675,93.516h9v-47.06h-9V93.516z M31.675,47.456h7v45.06h-7V47.456z"></path><path d="M43.175,93.516h9V37.607h-9V93.516z M44.175,38.607h7v53.908h-7V38.607z"></path><path d="M55.675,93.516h9V28.76h-9V93.516z M56.675,29.76h7v62.756h-7V29.76z"></path><path d="M68.175,93.516h9V17.412h-9V93.516z M69.175,18.412h7v74.104h-7V18.412z"></path></g></svg>
--- a/dashboard/src/assets/icons_signal/carre-high/3.png
+++ b/dashboard/src/assets/icons_signal/carre-high/3.png
--- a/dashboard/src/assets/icons_signal/carre-high/3.svg
+++ b/dashboard/src/assets/icons_signal/carre-high/3.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="45" y="5" display="inline" width="10" height="10"></rect><rect x="45" y="45" display="inline" width="10" height="10"></rect><rect x="35" y="5" display="inline" width="10" height="10"></rect><rect x="25" y="15" display="inline" width="10" height="10"></rect><rect x="15" y="15" display="inline" width="10" height="10"></rect><rect x="15" y="25" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="5" y="55" display="inline" width="10" height="10"></rect><rect x="5" y="35" display="inline" width="10" height="10"></rect><rect x="15" y="65" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="85" display="inline" width="10" height="10"></rect><rect x="35" y="85" display="inline" width="10" height="10"></rect><rect x="55" y="85" display="inline" width="10" height="10"></rect><rect x="65" y="75" display="inline" width="10" height="10"></rect><rect x="75" y="65" display="inline" width="10" height="10"></rect><rect x="75" y="75" display="inline" width="10" height="10"></rect><rect x="85" y="45" display="inline" width="10" height="10"></rect><rect x="85" y="55" display="inline" width="10" height="10"></rect><rect x="85" y="35" display="inline" width="10" height="10"></rect><rect x="75" y="25" display="inline" width="10" height="10"></rect><rect x="65" y="15" display="inline" width="10" height="10"></rect><rect x="75" y="15" display="inline" width="10" height="10"></rect><rect x="55" y="5" display="inline" width="10" height="10"></rect></g><g><polygon points="5.427,93.516 14.427,93.516 14.427,93.016 14.427,62.151 14.427,61.651 5.427,61.651  "></polygon><polygon points="17.927,93.516 26.927,93.516 26.927,93.016 26.927,53.304 26.927,52.804 17.927,52.804  "></polygon><polygon points="30.427,93.516 39.427,93.516 39.427,93.016 39.427,46.956 39.427,46.456 30.427,46.456  "></polygon><path d="M42.927,93.516h9V37.607h-9V93.516z M43.927,38.607h7v53.908h-7V38.607z"></path><path d="M55.427,93.516h9V28.76h-9V93.516z M56.427,29.76h7v62.756h-7V29.76z"></path><path d="M67.927,93.516h9V17.412h-9V93.516z M68.927,18.412h7v74.104h-7V18.412z"></path></g></svg>
--- a/dashboard/src/assets/icons_signal/carre-high/4.png
+++ b/dashboard/src/assets/icons_signal/carre-high/4.png
--- a/dashboard/src/assets/icons_signal/carre-high/4.svg
+++ b/dashboard/src/assets/icons_signal/carre-high/4.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="15" y="15" display="inline" width="10" height="10"></rect><rect x="25" y="15" display="inline" width="10" height="10"></rect><rect x="35" y="15" display="inline" width="10" height="10"></rect><rect x="45" y="15" display="inline" width="10" height="10"></rect><rect x="55" y="15" display="inline" width="10" height="10"></rect><rect x="65" y="15" display="inline" width="10" height="10"></rect><rect x="75" y="15" display="inline" width="10" height="10"></rect><rect x="85" y="25" display="inline" width="10" height="10"></rect><rect x="85" y="35" display="inline" width="10" height="10"></rect><rect x="85" y="45" display="inline" width="10" height="10"></rect><rect x="85" y="55" display="inline" width="10" height="10"></rect><rect x="85" y="65" display="inline" width="10" height="10"></rect><rect x="75" y="75" display="inline" width="10" height="10"></rect><rect x="65" y="75" display="inline" width="10" height="10"></rect><rect x="55" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="75" display="inline" width="10" height="10"></rect><rect x="35" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="5" y="65" display="inline" width="10" height="10"></rect><rect x="5" y="55" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="5" y="35" display="inline" width="10" height="10"></rect><rect x="5" y="25" display="inline" width="10" height="10"></rect></g><g><polygon points="4,94.5 13,94.5 13,94 13,63.136 13,62.636 4,62.636  "></polygon><polygon points="16.5,94.5 25.5,94.5 25.5,94 25.5,54.288 25.5,53.788 16.5,53.788  "></polygon><polygon points="29,94.5 38,94.5 38,94 38,47.94 38,47.44 29,47.44  "></polygon><polygon points="41.5,94.5 50.5,94.5 50.5,94 50.5,39.092 50.5,38.592 41.5,38.592  "></polygon><path d="M54,94.5h9V29.744h-9V94.5z M55,30.744h7V93.5h-7V30.744z"></path><path d="M66.5,94.5h9V18.396h-9V94.5z M67.5,19.396h7V93.5h-7V19.396z"></path></g></svg>
--- a/dashboard/src/assets/icons_signal/carre-high/5.png
+++ b/dashboard/src/assets/icons_signal/carre-high/5.png
--- a/dashboard/src/assets/icons_signal/carre-high/5.svg
+++ b/dashboard/src/assets/icons_signal/carre-high/5.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><circle display="inline" fill="#000000" cx="50" cy="50" r="45"></circle></g><g display="none"><rect x="45" y="5" display="inline" width="10" height="10"></rect><rect x="35" y="5" display="inline" width="10" height="10"></rect><rect x="25" y="15" display="inline" width="10" height="10"></rect><rect x="15" y="15" display="inline" width="10" height="10"></rect><rect x="15" y="25" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="5" y="55" display="inline" width="10" height="10"></rect><rect x="5" y="35" display="inline" width="10" height="10"></rect><rect x="15" y="65" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="85" display="inline" width="10" height="10"></rect><rect x="35" y="85" display="inline" width="10" height="10"></rect><rect x="55" y="85" display="inline" width="10" height="10"></rect><rect x="65" y="75" display="inline" width="10" height="10"></rect><rect x="75" y="65" display="inline" width="10" height="10"></rect><rect x="75" y="75" display="inline" width="10" height="10"></rect><rect x="85" y="45" display="inline" width="10" height="10"></rect><rect x="85" y="55" display="inline" width="10" height="10"></rect><rect x="85" y="35" display="inline" width="10" height="10"></rect><rect x="75" y="25" display="inline" width="10" height="10"></rect><rect x="65" y="15" display="inline" width="10" height="10"></rect><rect x="75" y="15" display="inline" width="10" height="10"></rect><rect x="55" y="5" display="inline" width="10" height="10"></rect></g><g><polygon points="5.675,94.5 14.675,94.5 14.675,94 14.675,63.136 14.675,62.636 5.675,62.636  "></polygon><polygon points="18.175,94.5 27.175,94.5 27.175,94 27.175,54.288 27.175,53.788 18.175,53.788  "></polygon><polygon points="30.675,94.5 39.675,94.5 39.675,94 39.675,47.94 39.675,47.44 30.675,47.44  "></polygon><polygon points="43.175,94.5 52.175,94.5 52.175,94 52.175,39.092 52.175,38.592 43.175,38.592  "></polygon><polygon points="55.675,94.5 64.675,94.5 64.675,94 64.675,30.244 64.675,29.744 55.675,29.744  "></polygon><path d="M68.175,94.5h9V18.396h-9V94.5z M69.175,19.396h7V93.5h-7V19.396z"></path></g></svg>
--- a/dashboard/src/assets/icons_signal/carre-high/6.png
+++ b/dashboard/src/assets/icons_signal/carre-high/6.png
--- a/dashboard/src/assets/icons_signal/carre-high/6.svg
+++ b/dashboard/src/assets/icons_signal/carre-high/6.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="45" y="25" display="inline" width="10" height="10"></rect><rect x="35" y="15" display="inline" width="10" height="10"></rect><rect x="25" y="15" display="inline" width="10" height="10"></rect><rect x="15" y="25" display="inline" width="10" height="10"></rect><rect x="5" y="35" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="15" y="55" display="inline" width="10" height="10"></rect><rect x="25" y="65" display="inline" width="10" height="10"></rect><rect x="35" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="85" display="inline" width="10" height="10"></rect><rect x="55" y="15" display="inline" width="10" height="10"></rect><rect x="65" y="15" display="inline" width="10" height="10"></rect><rect x="75" y="25" display="inline" width="10" height="10"></rect><rect x="85" y="35" display="inline" width="10" height="10"></rect><rect x="85" y="45" display="inline" width="10" height="10"></rect><rect x="75" y="55" display="inline" width="10" height="10"></rect><rect x="65" y="65" display="inline" width="10" height="10"></rect><rect x="55" y="75" display="inline" width="10" height="10"></rect></g><g><rect x="4.895" y="64.136" width="8" height="30.864"></rect><rect x="17.395" y="55.288" width="8" height="39.712"></rect><rect x="29.895" y="48.94" width="8" height="46.06"></rect><rect x="42.395" y="40.092" width="8" height="54.908"></rect><rect x="54.895" y="31.244" width="8" height="63.756"></rect><rect x="67.395" y="19.896" width="8" height="75.104"></rect></g></svg>
--- a/dashboard/src/assets/icons_signal/carre-little/0.png
+++ b/dashboard/src/assets/icons_signal/carre-little/0.png
--- a/dashboard/src/assets/icons_signal/carre-little/0.svg
+++ b/dashboard/src/assets/icons_signal/carre-little/0.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M18.404,83.511H5V70.106h13.404V83.511z M7,81.511h9.404v-9.404H7V81.511z"></path><path d="M37.553,83.511H24.149V56.702h13.404V83.511z M26.149,81.511h9.404V58.702h-9.404V81.511z"></path><path d="M56.702,83.511H43.298V43.298h13.404V83.511z M45.298,81.511h9.404V45.298h-9.404V81.511z"></path><path d="M75.851,83.511H62.447V29.894h13.403V83.511z M64.447,81.511h9.403V31.894h-9.403V81.511z"></path><path d="M95,83.511H81.596V16.489H95V83.511z M83.596,81.511H93V18.489h-9.404V81.511z"></path></svg>
--- a/dashboard/src/assets/icons_signal/carre-little/1.png
+++ b/dashboard/src/assets/icons_signal/carre-little/1.png
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Maxence G. de Montauzan	0417604587	Els Service: get Artists	2017-10-13 20:32:28 +02:00
Maxence G. de Montauzan	e4aadd72f9	Add link with angular-tag-cloud	2017-10-13 20:00:09 +02:00
Maxence G. de Montauzan	b886577361	It's OK with angular4-word-cloud	2017-10-13 19:59:44 +02:00
Maxence G. de Montauzan	d27732f97e	Try with angular4-word-cloud - update don't run...	2017-10-12 01:19:10 +02:00
Maxence G. de Montauzan	b10c106a5f	Improve observable	2017-10-12 00:31:20 +02:00
Maxence G. de Montauzan	1e6d388596	First try with angular-tag-cloud-module	2017-10-12 00:27:50 +02:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="45" y="5" display="inline" width="10" height="10"></rect><rect x="45" y="45" display="inline" width="10" height="10"></rect><rect x="35" y="35" display="inline" width="10" height="10"></rect><rect x="25" y="25" display="inline" width="10" height="10"></rect><rect x="55" y="35" display="inline" width="10" height="10"></rect><rect x="65" y="15" display="inline" width="10" height="10"></rect><rect x="35" y="5" display="inline" width="10" height="10"></rect><rect x="15" y="15" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="5" y="55" display="inline" width="10" height="10"></rect><rect x="5" y="35" display="inline" width="10" height="10"></rect><rect x="15" y="65" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="85" display="inline" width="10" height="10"></rect><rect x="35" y="85" display="inline" width="10" height="10"></rect><rect x="55" y="85" display="inline" width="10" height="10"></rect><rect x="65" y="75" display="inline" width="10" height="10"></rect><rect x="75" y="65" display="inline" width="10" height="10"></rect><rect x="75" y="75" display="inline" width="10" height="10"></rect><rect x="85" y="45" display="inline" width="10" height="10"></rect><rect x="85" y="55" display="inline" width="10" height="10"></rect><rect x="85" y="35" display="inline" width="10" height="10"></rect><rect x="75" y="25" display="inline" width="10" height="10"></rect><rect x="75" y="15" display="inline" width="10" height="10"></rect><rect x="55" y="5" display="inline" width="10" height="10"></rect></g><g><path d="M5.675,93.515h9V61.651h-9V93.515z M6.675,62.651h7v29.864h-7V62.651z"></path><path d="M18.175,93.515h9V52.803h-9V93.515z M19.175,53.803h7v38.712h-7V53.803z"></path><path d="M30.675,93.515h9v-47.06h-9V93.515z M31.675,47.455h7v45.06h-7V47.455z"></path><path d="M43.175,93.515h9V37.607h-9V93.515z M44.175,38.607h7v53.908h-7V38.607z"></path><path d="M55.675,93.515h9V28.759h-9V93.515z M56.675,29.759h7v62.756h-7V29.759z"></path><path d="M68.175,17.411v76.104h9V17.411H68.175z M76.175,92.515h-7V18.411h7V92.515z"></path></g></svg>