From 6d988bf3b06cf7bb206329a9d89db511cebc0e22 Mon Sep 17 00:00:00 2001
From: sosguns2002 <sospioneer2002@gmail.com>
Date: Mon, 19 Mar 2018 14:44:18 +0200
Subject: [PATCH] 1st Color Theme

---
 .../package.json                              |   7 +-
 .../configuration.component.html              |   2 +-
 .../resultspreview.component.html             |  12 +-
 .../settings/settings.component.html          |   7 +-
 .../settings/settings.component.ts            |   2 +-
 .../src/app/contents/contents.component.html  |   2 +-
 .../contentstable.component.html              |   6 +-
 .../contentstable/contentstable.component.ts  |  11 +-
 .../interactive-mining.component.ts           |   2 +-
 .../manageprofiles.component.html             |  14 +-
 .../manageprofiles.component.ts               |   8 +-
 .../saveprofile/saveprofile.component.html    |   8 +-
 .../app/saveprofile/saveprofile.component.ts  |   2 +-
 .../stepsnvabar/stepsnvabar.component.html    |   6 +-
 .../app/stepsnvabar/stepsnvabar.component.ts  |   9 +-
 .../src/assets/css/interactive-mining.css     | 174 +++++++++++-------
 16 files changed, 162 insertions(+), 110 deletions(-)

diff --git a/interactive-mining-angular-frontend/package.json b/interactive-mining-angular-frontend/package.json
index 17aa887..ffff7ab 100644
--- a/interactive-mining-angular-frontend/package.json
+++ b/interactive-mining-angular-frontend/package.json
@@ -23,12 +23,13 @@
     "@angular/platform-browser-dynamic": "^4.2.4",
     "@angular/router": "^4.2.4",
     "core-js": "^2.4.1",
-    "rxjs": "^5.5.6",
-    "zone.js": "^0.8.19",
     "file-saver": "^1.3.3",
     "jquery": "^3.2.1",
+    "ng-focus-if": "^1.0.7",
     "ngx-pagination": "^3.1.0",
-    "uikit": "^3.0.0-beta.38"
+    "rxjs": "^5.5.6",
+    "uikit": "^3.0.0-beta.38",
+    "zone.js": "^0.8.19"
   },
   "devDependencies": {
     "@angular/cli": "^1.3.0",
diff --git a/interactive-mining-angular-frontend/src/app/configuration/configuration.component.html b/interactive-mining-angular-frontend/src/app/configuration/configuration.component.html
index 5f813f1..fd9228d 100644
--- a/interactive-mining-angular-frontend/src/app/configuration/configuration.component.html
+++ b/interactive-mining-angular-frontend/src/app/configuration/configuration.component.html
@@ -1,6 +1,6 @@
 <app-stepsnvabar></app-stepsnvabar>
 <div id="parent">
   <app-settings  id="child1" class="cm-config-settings-section uk-margin-small-top"></app-settings>
-  <app-resultspreview id="child2" class="uk-margin-medium-top"></app-resultspreview>
+  <app-resultspreview id="child2" class="uk-margin-medium-top cm-margin-medium-left"></app-resultspreview>
   <div style="clear: both;"></div>
 </div>
diff --git a/interactive-mining-angular-frontend/src/app/configuration/resultspreview/resultspreview.component.html b/interactive-mining-angular-frontend/src/app/configuration/resultspreview/resultspreview.component.html
index c9dcc47..8e5f5e0 100644
--- a/interactive-mining-angular-frontend/src/app/configuration/resultspreview/resultspreview.component.html
+++ b/interactive-mining-angular-frontend/src/app/configuration/resultspreview/resultspreview.component.html
@@ -1,9 +1,9 @@
+<h4 class="cm-margin-medium-left">Test area <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
 <div class="cm-results-section">
   <header id="cm-results-section-header" class="uk-container uk-container-expand">
     <div class="cm-results-controls">
       <div class="uk-margin">
-        <h4>Test area <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
-        <p>Choose a document sample to test your matchin results!</p>
+        <p>Choose a document sample to test your matching results</p>
         <div class="uk-grid-collapse uk-child-width-expand" uk-grid>
           <!--<form class="uk-search uk-search-default uk-width-1-5@m">-->
             <!--<span class="uk-search-icon-flip" uk-search-icon></span>-->
@@ -15,7 +15,7 @@
               <div class="uk-slider-container">
                 <ul class="uk-slider-items uk-grid-small">
                   <li *ngFor="let doc of docSamples">
-                    <button class="uk-button uk-button-primary" (click)="chooseSample(doc.name)">{{doc.name}}</button>
+                    <button class="uk-button cm-button-examples" (click)="chooseSample(doc.name)">{{doc.name}}</button>
                   </li>
                 </ul>
               </div>
@@ -42,10 +42,10 @@
     </div>
   </header>
   <div id="cm-run-test-section">
-    <h4>Test results <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
+    <p>Test your rules to the selected documents <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></p>
     <div class="uk-display-inline">
-      <button id="run-mining-btn" class="uk-button uk-button-primary" [disabled]="documentsLoaded<1" (click)="runMining()">Test rules on the selected documents</button>
-      <span *ngIf="matches_number>0" id="results-number" class="uk-text-primary uk-margin-left uk-text-bottom">{{matches_number}} matche{{matches_number===1?'':'s'}} found</span>
+      <button id="run-mining-btn" class="uk-button cm-run-test-button" [disabled]="documentsLoaded<1" (click)="runMining()">Run rules test</button>
+      <span *ngIf="matches_number>0" id="results-number" class="cm-coloured-text uk-margin-left uk-text-bottom">{{matches_number}} matche{{matches_number===1?'':'s'}} found</span>
       <span *ngIf="prev_matches_number>0" id="results-number-previous" class="cm-text-muted uk-text-bottom">, {{prev_matches_number}} matche{{prev_matches_number===1?'':'s'}} found previously</span>
     </div>
   </div>
diff --git a/interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.html b/interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.html
index ac54d1d..0821a55 100644
--- a/interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.html
+++ b/interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.html
@@ -50,7 +50,6 @@
       </ul>
     </div>
   </div>
-  <hr>
   <div class="cm-advanced-tools-section">
     <label class="uk-form-label cm-advaned-tools-label" for="advaned-tools-label">
       <input [checked]="precision===4" (click)="advancedCheckboxChange()"  id="advaned-tools-label" class="uk-checkbox" type="checkbox"> Customized rules <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span>
@@ -158,7 +157,7 @@
           <div class="uk-accordion-content">
             <p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
             <form class="uk-form-horizontal">
-              <div>
+              <div class="cm-margin-medium-bottom">
                 <label class="uk-form-label" for="word-split">Length of N-grams <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
                 <div class="uk-form-controls">
                   <input class="uk-input" type="number" name="word-split" min="0" max="10" id="word-split" placeholder="Word pairs" value="2" [value]="settings.wordssplitnum" (change)="wordssplitnumChange($event.target.value)"/>
@@ -182,7 +181,7 @@
                   <input class="uk-input" type="number" name="context-prev-words" min="0" max="20" id="context-prev-words" placeholder="Prev words number" value="10" [value]="settings.contextprev" (change)="contextprevChange($event.target.value)"/>
                 </div>
               </div>
-              <div class="cm-match-area right">
+              <div class="cm-match-area right cm-margin-medium-bottom">
                 <label class="uk-form-label" for="context-next-words">Words right of the match <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
                 <div class="uk-form-controls">
                   <input class="uk-input" type="number" name="context-next-words" min="0" max="20" id="context-next-words" placeholder="Next words number" value="5" [value]="settings.contextnext" (change)="contextnextChange($event.target.value)"/>
@@ -230,5 +229,5 @@
     </div>
   </div>
   <hr>
-  <button id="next-button" class="uk-button uk-button-primary uk-margin-small-left" (click)="saveProfile()">Save this profile</button>
+  <button id="next-button" class="uk-button uk-button-primary uk-margin-small-top" (click)="saveProfile()">Save this profile</button>
 </div>
diff --git a/interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.ts b/interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.ts
index 2915a9d..7a649aa 100644
--- a/interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.ts
+++ b/interactive-mining-angular-frontend/src/app/configuration/settings/settings.component.ts
@@ -245,7 +245,7 @@ export class SettingsComponent implements OnInit {
 
   saveProfile(): void {
     this.configurationService.saveProfileParameters(this.getSettingsFromLocalStorage())
-      .subscribe(() => this.router.navigate(['../save-profile'], {relativeTo: this.route}));
+      .subscribe(() => this.router.navigate(['../save-profile'], {relativeTo: this.route, queryParamsHandling: 'preserve'}));
   }
 
 }
diff --git a/interactive-mining-angular-frontend/src/app/contents/contents.component.html b/interactive-mining-angular-frontend/src/app/contents/contents.component.html
index 3cb123c..3e4751c 100644
--- a/interactive-mining-angular-frontend/src/app/contents/contents.component.html
+++ b/interactive-mining-angular-frontend/src/app/contents/contents.component.html
@@ -2,7 +2,7 @@
 <div class="uk-section uk-section-default uk-margin-medium-top uk-padding-remove-top">
   <div class="uk-container">
     <!--<h4>Content to match</h4>-->
-    <p class="uk-text-small">Fill the table below, with your content you want to match!</p>
+    <p class="uk-margin-small-left">Fill the table below, with your content you want to match!</p>
   <app-contentstable></app-contentstable>
   </div>
 </div>
diff --git a/interactive-mining-angular-frontend/src/app/contents/contentstable/contentstable.component.html b/interactive-mining-angular-frontend/src/app/contents/contentstable/contentstable.component.html
index 863721f..702e1a1 100644
--- a/interactive-mining-angular-frontend/src/app/contents/contentstable/contentstable.component.html
+++ b/interactive-mining-angular-frontend/src/app/contents/contentstable/contentstable.component.html
@@ -4,7 +4,7 @@
     <!-- <th class="uk-table-shrink cm-table-number">#</th> -->
     <th class="uk-width-small">Keyword</th>
     <th class="uk-table-expand">Context</th>
-    <th class="uk-table-shrink"></th>
+    <th class="uk-table-shrink"><a class="uk-icon-link uk-icon" uk-icon="icon: trash" contenteditable="false" (click)="deleteAllFields()"></a></th>
   </tr>
   </thead>
   <tbody>
@@ -41,7 +41,7 @@
             </div>
             <div>
               <span class="cm-label">TSV</span>
-              <span class="uk-text uk-text-small">file type, maximum 50kB</span>
+              <span class="uk-text uk-text-small cm-coloured-text-meta">file type, maximum 50kB</span>
               <span class="cm-tooltip" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom" uk-icon="icon: info"></span>
             </div>
           </div>
@@ -57,4 +57,4 @@
   </tfoot>
 </table>
 
-<button id="next-button" class="uk-button uk-button-primary uk-margin-small-top" [disabled]="!isAnyContent()" (click)="saveAndContinue()">Continue</button>
+<button id="next-button" class="uk-button uk-button-primary cm-margin-medium-top" [disabled]="!isAnyContent()" (click)="saveAndContinue()">Continue</button>
diff --git a/interactive-mining-angular-frontend/src/app/contents/contentstable/contentstable.component.ts b/interactive-mining-angular-frontend/src/app/contents/contentstable/contentstable.component.ts
index c3ace3d..06fb5ea 100644
--- a/interactive-mining-angular-frontend/src/app/contents/contentstable/contentstable.component.ts
+++ b/interactive-mining-angular-frontend/src/app/contents/contentstable/contentstable.component.ts
@@ -1,4 +1,5 @@
 import {Component, OnInit, ViewChildren} from '@angular/core';
+import UIkit from 'uikit';
 import { Content } from '../content';
 import {ContentsService} from '../contents.service';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -69,6 +70,14 @@ export class ContentstableComponent implements OnInit {
     }
   }
 
+  deleteAllFields() {
+    UIkit.modal.confirm('<span class="uk-text-bold">' +
+      'Are you sure you want to delete all your content?</span>', {escClose: true}).then(() => {
+      this.contentArray.length = 0;
+      this.addRow();
+    });
+  }
+
   onFilesChange(file: File) {
     if (file !== null && file !== undefined) {
       console.log(file);
@@ -98,7 +107,7 @@ export class ContentstableComponent implements OnInit {
     this.contentsService.updateContent(this.contentArray)
       .subscribe(value => {
         localStorage.setItem('concepts', value);
-        this.router.navigate(['../configure-profile'], {relativeTo: this.route});
+        this.router.navigate(['../configure-profile'], {relativeTo: this.route, queryParamsHandling: 'preserve'});
       });
   }
 
diff --git a/interactive-mining-angular-frontend/src/app/interactivemining/interactive-mining.component.ts b/interactive-mining-angular-frontend/src/app/interactivemining/interactive-mining.component.ts
index 9c01837..fd1f06b 100644
--- a/interactive-mining-angular-frontend/src/app/interactivemining/interactive-mining.component.ts
+++ b/interactive-mining-angular-frontend/src/app/interactivemining/interactive-mining.component.ts
@@ -11,7 +11,7 @@ export class InteractiveMiningComponent implements OnInit {
   constructor(private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit() {
-    this.router.navigate(['manage-profiles'], {relativeTo: this.route});
+    this.router.navigate(['manage-profiles'], {relativeTo: this.route, queryParamsHandling: 'preserve' });
   }
 
 }
diff --git a/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.html b/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.html
index cac9f3a..9f388d5 100644
--- a/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.html
+++ b/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.html
@@ -63,7 +63,7 @@
         </div>
       </div>
       <div class="uk-width-1-3@m">
-        <a class="test-upload uk-button uk-button-default uk-width-1-1 uk-text-center uk-margin-small-bottom cm-main-button" (click)="createNewProfile()">
+        <a class="test-upload uk-button uk-button-primary uk-width-1-1 uk-text-center uk-margin-small-bottom" (click)="createNewProfile()">
           <span class="uk-text-middle">Create a new mining profile</span>
         </a>
         <div class="test-upload uk-button uk-button-link uk-width-1-1 uk-text-center uk-margin-small-top">
@@ -78,21 +78,21 @@
     </div>
   </div>
 </div>
-<div class="uk-section uk-section-secondary">
+<h4>Start with a ready example <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
+<div class="uk-section uk-section-secondary cm-section-examples">
   <div class="uk-container uk-container-small">
-    <h4>Start with a ready example <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
     <div uk-slider="autoplay: true">
       <div class="uk-position-relative">
         <div class="uk-slider-container uk-light">
-          <ul class="uk-slider-items uk-child-width-1-3 uk-grid">
+          <ul class="uk-slider-items cm-child-width-examples-cards uk-grid">
             <li *ngFor="let profile of exampleProfiles">
               <a (click)="loadExampleProfile(profile.name)">
                 <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-text-center uk-margin-medium-top uk-margin-medium-bottom">
-                  <h3 class="uk-card-title">{{profile.name | uppercase}}</h3>
+                  <h3 class="uk-card-title uk-text-bold">{{profile.name | uppercase}}</h3>
                   <h4 class="uk-card-title uk-margin-remove-bottom">{{profile.contents}}</h4>
-                  <p class="uk-text-meta uk-margin-remove-top">contents</p>
+                  <p class="uk-text-small uk-margin-remove-top">contents</p>
                   <h4 class="uk-card-title uk-margin-remove-bottom">{{profile.documents}}</h4>
-                  <p class="uk-text-meta uk-margin-remove-top">documents</p>
+                  <p class="uk-text-small uk-margin-remove-top">documents</p>
                 </div>
               </a>
             </li>
diff --git a/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.ts b/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.ts
index 81978a0..a6a4241 100644
--- a/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.ts
+++ b/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.ts
@@ -71,7 +71,7 @@ export class ManageprofilesComponent implements OnInit {
         localStorage.setItem('punctuation', res.punctuation);
         localStorage.setItem('stopwords', res.stopwords);
         localStorage.setItem('lettercase', res.lettercase);
-        this.router.navigate(['../upload-content'], {relativeTo: this.route});
+        this.router.navigate(['../upload-content'], {relativeTo: this.route, queryParamsHandling: 'preserve'});
       });
   }
 
@@ -94,7 +94,7 @@ export class ManageprofilesComponent implements OnInit {
     // clear localstorage values
     this.clearLocalStorage();
     this.manageProfilesService.createNewProfile()
-      .subscribe(() => this.router.navigate(['../upload-content'], {relativeTo: this.route}));
+      .subscribe(() => this.router.navigate(['../upload-content'], {relativeTo: this.route, queryParamsHandling: 'preserve'}));
   }
 
   fileChangeUpload(event): void {
@@ -118,7 +118,7 @@ export class ManageprofilesComponent implements OnInit {
           localStorage.setItem('punctuation', res.punctuation);
           localStorage.setItem('stopwords', res.stopwords);
           localStorage.setItem('lettercase', res.lettercase);
-          this.router.navigate(['../upload-content'], {relativeTo: this.route});
+          this.router.navigate(['../upload-content'], {relativeTo: this.route, queryParamsHandling: 'preserve'});
         });
     }
   }
@@ -148,7 +148,7 @@ export class ManageprofilesComponent implements OnInit {
         localStorage.setItem('punctuation', res.punctuation);
         localStorage.setItem('stopwords', res.stopwords);
         localStorage.setItem('lettercase', res.lettercase);
-        this.router.navigate(['../upload-content'], {relativeTo: this.route});
+        this.router.navigate(['../upload-content'], {relativeTo: this.route, queryParamsHandling: 'preserve'});
       });
   }
 
diff --git a/interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.html b/interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.html
index cc3e07a..a0248bc 100644
--- a/interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.html
+++ b/interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.html
@@ -1,9 +1,9 @@
 <app-stepsnvabar></app-stepsnvabar>
 <div class="uk-section uk-section-default uk-margin-medium-top uk-padding-remove-top">
-  <div class="uk-container uk-container-small">
-    <label for="profile-name" [ngClass]="{'uk-text-danger':!profileName}">Current name:</label>
-    <input [(ngModel)]="profileName" class="uk-input" [ngClass]="{'uk-form-danger':!profileName}" id="profile-name" type="text" autofocus="">
+  <div class="uk-container uk-width-1-2 uk-align-left">
+    <label for="profile-name" [ngClass]="{'uk-text-danger':!profileName}">Profile's name:</label>
+    <input [(ngModel)]="profileName" class="uk-input" [ngClass]="{'uk-form-danger':!profileName}" id="profile-name" type="text" autofocus>
     <span *ngIf="!profileName" class="uk-text-danger">Profile name cannot be empty!</span>
-    <button class="uk-button uk-button-default uk-margin-medium-top uk-width-1-1 uk-button-medium uk-text-center cm-main-button" [disabled]="!profileName" (click)="saveProfile()">Save profile to your account</button>
+    <button class="uk-button uk-button-primary uk-margin-medium-top uk-width-1-1 uk-button-medium uk-text-center" [disabled]="!profileName" (click)="saveProfile()">Save profile to your account</button>
   </div>
 </div>
diff --git a/interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.ts b/interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.ts
index 4952d07..45d2662 100644
--- a/interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.ts
+++ b/interactive-mining-angular-frontend/src/app/saveprofile/saveprofile.component.ts
@@ -39,7 +39,7 @@ export class SaveprofileComponent implements OnInit {
       return;
     } else {
       this.saveprofileService.saveProfile(this.profileName, localStorage.getItem('profileid'), this.docnName, this.docsNumber)
-        .subscribe(() => this.router.navigate(['../manage-profiles'], {relativeTo: this.route}));
+        .subscribe(() => this.router.navigate(['../manage-profiles'], {relativeTo: this.route, queryParamsHandling: 'preserve'}));
     }
   }
 
diff --git a/interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.html b/interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.html
index ec803bb..5a7bc0b 100644
--- a/interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.html
+++ b/interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.html
@@ -30,9 +30,9 @@
 
 <div *ngIf="proccessStep>0" class="uk-grid-collapse uk-child-width-expand" uk-grid>
   <div class="cm-nav2 uk-width-expand">
-    <a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===1, 'cm-nav2-step-disabled':proccessStep<1}" [routerLink]="proccessStep>1 ? ['upload-content'] : []">Matching context definition</a>
-    <a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===2, 'cm-nav2-step-disabled':proccessStep<2}" [routerLink]="proccessStep>2 ? ['configure-profile'] : []">Matching proccess configuration</a>
-    <a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===3, 'cm-nav2-step-disabled':proccessStep<3}" [routerLink]="proccessStep>3 ? ['save-profile'] : []">Save your matching profile</a>
+    <a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===1, 'cm-nav2-step-disabled':proccessStep<1}" [routerLink]="proccessStep>1 ? ['../upload-content'] : []" queryParamsHandling="preserve">Matching context definition</a>
+    <a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===2, 'cm-nav2-step-disabled':proccessStep<2}" [routerLink]="proccessStep>2 ? ['../configure-profile'] : []" queryParamsHandling="preserve">Matching proccess configuration</a>
+    <a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===3, 'cm-nav2-step-disabled':proccessStep<3}" [routerLink]="proccessStep>3 ? ['../save-profile'] : []" queryParamsHandling="preserve">Save your matching profile</a>
   </div>
   <a class="uk-width-auto uk-float-right uk-link-muted" (click)="cancelHandle()" style="line-height: 52px;">
     <span class="uk-icon uk-margin-small-right" uk-icon="icon: close"></span>
diff --git a/interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.ts b/interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.ts
index 60baf8b..a6649ee 100644
--- a/interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.ts
+++ b/interactive-mining-angular-frontend/src/app/stepsnvabar/stepsnvabar.component.ts
@@ -23,11 +23,12 @@ export class StepsnvabarComponent implements OnInit {
 
   changeStep(url: string): void {
     console.log(url);
-    if (url.endsWith('upload-content')) {
+    console.log(this.router.routerState.snapshot.toString());
+    if (url.indexOf('mining/upload-content') >= 0) {
       this.proccessStep = 1;
-    } else if (url.endsWith('configure-profile')) {
+    } else if (url.indexOf('mining/configure-profile') >= 0) {
       this.proccessStep = 2;
-    } else if (url.endsWith('save-profile')) {
+    } else if (url.indexOf('mining/save-profile') >= 0) {
       this.proccessStep = 3;
     } else {
       this.proccessStep = 0;
@@ -35,7 +36,7 @@ export class StepsnvabarComponent implements OnInit {
   }
 
   cancelHandle(): void {
-    this.router.navigate(['../manage-profiles'], {relativeTo: this.route});
+    this.router.navigate(['../manage-profiles'], {relativeTo: this.route, queryParamsHandling: 'preserve'});
   }
 
 }
diff --git a/interactive-mining-angular-frontend/src/assets/css/interactive-mining.css b/interactive-mining-angular-frontend/src/assets/css/interactive-mining.css
index 378ba21..2d7e91e 100644
--- a/interactive-mining-angular-frontend/src/assets/css/interactive-mining.css
+++ b/interactive-mining-angular-frontend/src/assets/css/interactive-mining.css
@@ -1,3 +1,18 @@
+/* COLOR PALETTE */
+:root {
+  --cm-theme-1: #333333;
+  --cm-theme-2: #5B5B5B;
+  --cm-theme-3: #999999;
+  --cm-theme-4: #CBCBCB;
+  --cm-theme-5: #0093CC;
+  --cm-theme-6: #00A0DE;
+  --cm-theme-7: #7AC2DE;
+  --cm-theme-8: #FFDC59;
+  --cm-theme-9: #FFE480;
+  --cm-theme-10: #FFF7D9;
+  --cm-theme-11: #FFFAE6;
+  --cm-theme-12: #FFFFFF;
+}
 /* Custom controls
  ========================================================================== */
 /*
@@ -76,14 +91,13 @@
 /* Custom Buttons
  ========================================================================== */
 .cm-main-button {
-  background-color: #ffc800;
-  color: #2c2b5d;
+  background-color: var(--cm-theme-8);
+  color: var(--cm-theme-1);
   box-shadow: 0 3px 12px rgba(0,0,0,0.12);
 }
-
 .cm-main-button:hover:not([disabled]) {
-  background-color: #f7c200;
-  color: #2c2b5d;
+  background-color: var(--cm-theme-8);
+  color: var(--cm-theme-1);
   box-shadow: 0 6px 50px rgba(0,0,0,0.08);
 }
 .cm-phrases-button {
@@ -93,16 +107,28 @@
   width: 70px;
   line-height: inherit;
 }
-.cm-white-button {
-  background-color: #ffffff;
-  width: 103px;
-  margin: 0;
+.cm-button-examples {
+  background-color: var(--cm-theme-7);
+  color: var(--cm-theme-12);
 }
-.cm-close-btn {
-  color: #ffffffaa;
+.cm-run-test-button {
+  background-color: var(--cm-theme-1);
+  color: var(--cm-theme-12);
 }
-.cm-close-btn:hover, .cm-close-btn:focus {
-  color: #ffffff;
+.cm-run-test-button:hover:not([disabled]) {
+  background-color: #222;
+  color: var(--cm-theme-12);
+  box-shadow: 0 6px 50px rgba(0,0,0,0.08);
+}
+/* Custom Examples Section
+ ========================================================================== */
+.cm-section-examples {
+  background-color: var(--cm-theme-7);
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+.cm-child-width-examples-cards>* {
+  width: 220px;
 }
 /* Custom Navigation
  ========================================================================== */
@@ -276,13 +302,6 @@
 
 /* Custom Navigation V2
  ========================================================================== */
-:root {
-  --cm-nav2-theme-1: #245bcc;
-  --cm-nav2-theme-2: #fff;
-  --cm-nav2-theme-3: #ffc800;
-  --cm-nav2-theme-4: #cbcbcb;
-  --cm-nav2-theme-5: #537fdf;
-}
 .cm-nav2 {
   text-align: center;
   display: inline-block;
@@ -294,15 +313,14 @@
   outline: none;
   display: block;
   float: left;
-  font-family: Roboto;
   font-size: 15px;
   line-height: 50px;
   padding: 0 16px 0 60px;
   position: relative;
-  background: var(--cm-nav2-theme-2);
-  color: var(--cm-nav2-theme-1);
+  background: var(--cm-theme-12);
+  color: var(--cm-theme-5);
   transition: background 0.3s;
-  border: 2px solid var(--cm-nav2-theme-1);
+  border: 2px solid var(--cm-theme-5);
 }
 .cm-nav2-step:first-child {
   padding-left: 46px;
@@ -319,11 +337,12 @@
   content: none;
 }
 .cm-nav2-step::before {
+  font-family: Roboto;
   content: counter(flag);
   counter-increment: flag;
   width: 20px;
   height: auto;
-  line-height: 32px;
+  line-height: 35px;
   margin: 8px 0;
   position: absolute;
   top: 0;
@@ -341,42 +360,42 @@
   transform: scale(0.707) rotate(45deg);
   z-index: 1;
   border-radius: 0 5px 0 50px;
-  background: var(--cm-nav2-theme-2);
+  background: var(--cm-theme-12);
   transition: background 0.3s;
-  box-shadow: 2px -2px 0 1px var(--cm-nav2-theme-1);
+  box-shadow: 2px -2px 0 1px var(--cm-theme-5);
 }
 .cm-nav2-step:hover,
 .cm-nav2-step-active,
 .cm-nav2-step:hover::after,
 .cm-nav2-step-active::after{
-  background: var(--cm-nav2-theme-5);
-  color: var(--cm-nav2-theme-2);
+  background: var(--cm-theme-6);
+  color: var(--cm-theme-12);
 }
 .cm-nav2-step:hover::before,
 .cm-nav2-step-active::before {
-  color: var(--cm-nav2-theme-2);
+  color: var(--cm-theme-12);
 }
 .cm-nav2-step-disabled,
 .cm-nav2-step-disabled:hover {
-  border: 2px solid var(--cm-nav2-theme-4);
+  border: 2px solid var(--cm-theme-4);
 }
 .cm-nav2-step-disabled::after {
-  box-shadow: 2px -2px 0 1px var(--cm-nav2-theme-4);
+  box-shadow: 2px -2px 0 1px var(--cm-theme-4);
 }
 .cm-nav2-step-disabled,
 .cm-nav2-step-disabled:hover,
 .cm-nav2-step-disabled:hover::before,
 .cm-nav2-step-disabled:hover::after {
-  background: var(--cm-nav2-theme-2);
-  color: var(--cm-nav2-theme-4);
+  background: var(--cm-theme-12);
+  color: var(--cm-theme-4);
   cursor: default;
 }
 
 /* Custom File drop Area Upload
  ========================================================================== */
 .cm-file-drop-area {
-  background-color: #fef4d7;
-  border: 1px dashed #f9c735;
+  background-color: var(--cm-theme-10);
+  border: 1px dashed var(--cm-theme-8);
   font-weight: 500;
 }
 /* Custom Inputs
@@ -410,7 +429,7 @@
   transition: color .1s linear;
 }
 .cm-table tbody tr, .cm-table tfoot tr {
-  border: 1px solid #cbcbcb;
+  border: 1px solid var(--cm-theme-4);
 }
 .cm-table td {
   padding: 0px;
@@ -421,24 +440,27 @@
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
 }
+.cm-table tbody tr:hover {
+  background-color: var(--cm-theme-11);
+}
 .cm-table td.keyword:hover, .cm-table td.context:hover {
-  background-color: #fdfcc3;
+  background-color: var(--cm-theme-10);
 }
 .cm-table td.delete {
   padding: 14px;
 }
 .cm-table td.keyword, .cm-table td.context, .cm-table td.delete, .cm-table td.edit, .cm-table-footer {
-  border-top: 1px solid #cbcbcb;
+  border-top: 1px solid var(--cm-theme-4);
   font-weight: 400;
 }
 .cm-table td.keyword, .cm-table td.context {
-  border-right: 1px solid #cbcbcb;
+  border-right: 1px solid var(--cm-theme-4);
 }
 .cm-table tr.editing td.keyword, .cm-table tr.editing td.context {
-  background-color: #ffd149 !important;
+  background-color: var(--cm-theme-9) !important;
 }
 .cm-table tr.editing td.keyword.editing, .cm-table tr.editing td.context.editing {
-  background-color: #ffc800 !important;
+  background-color: var(--cm-theme-8) !important;
 }
 .cm-table td.keyword input, .cm-table td.keyword input:focus {
   background: transparent;
@@ -464,14 +486,14 @@
 /*.cm-table td.keyword:hover, .cm-table td.context:hover, .cm-table td.edit:hover a {*/
 /*color: #55546d;*/
 /*}*/
-.cm-table tr th {
-  color: #5b6065;
-  font-weight: bold;
-}
-.cm-table-number {
-  background-color: #fbe39a;
-  border-right: 1px solid #f7c800;
-}
+/*.cm-table tr th {*/
+  /*color: #5b6065;*/
+  /*font-weight: bold;*/
+/*}*/
+/*.cm-table-number {*/
+  /*background-color: #fbe39a;*/
+  /*border-right: 1px solid #f7c800;*/
+/*}*/
 .empty:before {
   content: "Empty field";
   color: #ccc;
@@ -494,7 +516,7 @@
 
 }
 .cm-easy-config-section {
-  padding: 30px 20px 20px 20px;
+  padding: 30px 0px 40px 0px;
 }
 .cm-config-options-container {
   display: block;
@@ -604,9 +626,24 @@
 .cm-config-option.active .cm-config-option-check {
   display: block;
 }
+.cm-margin-medium {
+  margin: 20px;
+}
+.cm-margin-medium-top {
+  margin-top: 20px;
+}
+.cm-margin-medium-right {
+  margin-right: 20px;
+}
+.cm-margin-medium-bottom {
+  margin-bottom: 20px;
+}
+.cm-margin-medium-left {
+  margin-left: 20px;
+}
 .cm-advanced-tools-section {
-  padding: 0px 20px 20px 20px;
-  min-height: 160px;
+  padding: 0px 0px 20px 0px;
+  min-height: 180px;
 }
 .cm-advanced-tools-section .uk-accordion-title {
   font-size: 16px;
@@ -626,6 +663,7 @@
   border-radius: 3px;
   border-style: hidden; /* hide standard table (collapsed) border */
   box-shadow: 0 0 0 1px #f7c800; /* this draws the table border  */
+  margin-bottom: 20px !important;
 }
 .cm-phrases-container header {
   background-color: #fafafa;
@@ -736,8 +774,9 @@
   background-color: #f5f5f5;
   min-height: 686px;
   position: relative;
-  border: 1px dashed #cbcbcb;
+  border: 1px dashed var(--cm-theme-4);
   margin-left: 20px;
+  border-radius: 5px;
 }
 .cm-results-section header {
   padding: 0;
@@ -770,9 +809,6 @@ header.uk-sticky-fixed .cm-results-count-section {
   background-color: rgba(245, 245, 245, 0.9) !important;
   box-shadow: rgba(0, 0, 0, 0.07) 0px 3px 0px;
 }
-.cm-text-muted {
-  color: #737373 !important;
-}
 .cm-results-rows {
   /*overflow: auto;
   -webkit-overflow-scrolling: touch;
@@ -850,17 +886,17 @@ header.uk-sticky-fixed .cm-results-count-section {
   cursor: default;
   position: relative;
   padding: 0px 35px 0px 25px;
-  color: #000;
-  background-color: #FFFFFF;
-  border: 2px solid #54c0ff;
+  color: var(--cm-theme-1);
+  background-color: var(--cm-theme-12);
+  border: 2px solid var(--cm-theme-7);
   margin: -2px 0px 0px 0px;
 }
 .cm-doc-selected span {
   position: absolute;
   bottom: 0px;
   right: 0px;
-  background-color: #54c0ff;
-  color: #FFFFFF;
+  background-color: var(--cm-theme-7);
+  color: var(--cm-theme-12);
   border-radius: 15px 0px 0px 0px;
   padding: 3px 0px 0px 4px;
 }
@@ -883,10 +919,10 @@ header.uk-sticky-fixed .cm-results-count-section {
 .cm-label {
   display: inline-block;
   padding: 1px 7px;
-  background: #8688a5;
+  background: var(--cm-theme-3);
   line-height: 1.625;
   font-size: 12px;
-  color: #fff;
+  color: var(--cm-theme-12);
   vertical-align: middle;
   white-space: nowrap;
   font-family: Roboto;
@@ -897,8 +933,14 @@ header.uk-sticky-fixed .cm-results-count-section {
 }
 /* Custom text
  ========================================================================== */
+.cm-text-muted {
+  color: var(--cm-theme-3) !important;
+}
 .cm-coloured-text {
-  color: #64667f;
+  color: var(--cm-theme-2);
+}
+.cm-coloured-text-meta {
+  color: var(--cm-theme-3);
 }
 
 #parent {
@@ -926,7 +968,7 @@ header.uk-sticky-fixed .cm-results-count-section {
   will-change: position, transform;
   padding-bottom: 20px;
   /*border: 1px solid #f7c800;*/
-  /*padding-top: 20px;*/
+  padding-left: 20px;
   min-height: 667px;
 }
 #child2 {