From e86a9d32c07b2d0f0289031a076b4499fd8a2c47 Mon Sep 17 00:00:00 2001
From: Eike Cochu <eike@cochu.com>
Date: Sat, 12 Mar 2016 02:07:45 +0100
Subject: [PATCH] updated ui

---
 vipra-ui/app/html/about.html                  | 550 +++++++++---------
 vipra-ui/app/html/articles/index.html         |  70 ++-
 vipra-ui/app/html/articles/show.html          | 137 ++---
 vipra-ui/app/html/articles/similar.html       |  16 -
 vipra-ui/app/html/explorer.html               |   2 +-
 vipra-ui/app/html/index.html                  |   2 +-
 vipra-ui/app/html/topics/index.html           |  66 ++-
 vipra-ui/app/html/topics/show.html            |  81 +--
 vipra-ui/app/js/app.js                        |   9 +-
 vipra-ui/app/js/controllers.js                |  53 +-
 vipra-ui/app/js/filters.js                    |  24 -
 vipra-ui/app/js/helpers.js                    |  94 +--
 vipra-ui/app/less/app.less                    |  48 +-
 vipra-ui/bower.json                           |   8 +-
 vipra-ui/gulpfile.js                          |   4 +-
 .../main/java/de/vipra/util/Constants.java    |   2 +-
 16 files changed, 556 insertions(+), 610 deletions(-)
 delete mode 100644 vipra-ui/app/html/articles/similar.html
 delete mode 100644 vipra-ui/app/js/filters.js

diff --git a/vipra-ui/app/html/about.html b/vipra-ui/app/html/about.html
index 83bd3d45..35f097b5 100644
--- a/vipra-ui/app/html/about.html
+++ b/vipra-ui/app/html/about.html
@@ -1,277 +1,281 @@
 <div class="container" ng-cloak ng-hide="$state.current.name !== 'about'">
-  <div class="page-header">
-    <h1>About</h1>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="page-header">
+        <h1>About</h1>
+      </div>
+      <p><strong>Vipra</strong></p>
+      <p>Created by Eike Cochu</p>
+      <h3>Description</h3>
+      <p>The Vipra application is a topic modeling based search system with a frontend web application, a backend REST service and a maintenance tool for data import and modeling. It attempts to leverage automatically discovered topic informations in document collections to ease collection browsing and organization. The search system relies on ElasticSearch and Apache Lucene.</p>
+      <p>This application was created by Eike Cochu for his master's degree thesis in computer science, 2015-2016 at the Freie Universit&auml;t in Berlin, Germany.</p>
+      <h3>License</h3>
+      <p>The MIT License (MIT)</p>
+      <p>Copyright 2016 Eike Cochu</p>
+      <p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
+      <p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
+      <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
+      <hr>
+      <h3>Version</h3>
+      <table class="table table-bordered table-fixed">
+        <tbody>
+          <tr>
+            <th style="width:33%">Git Version</th>
+            <td ng-bind="::info.app.gitsha1"></td>
+          </tr>
+          <tr>
+            <th>Artifact Version</th>
+            <td ng-bind="::info.app.version"></td>
+          </tr>
+          <tr>
+            <th>Build date</th>
+            <td ng-bind="::buildDate"></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Host</h3>
+      <table class="table table-bordered table-fixed">
+        <tbody>
+          <tr>
+            <th style="width:33%">CPU Cores</th>
+            <td ng-bind="::info.host.cores"></td>
+          </tr>
+          <tr>
+            <th>Available memory</th>
+            <td ng-bind="::info.host.memory"></td>
+          </tr>
+          <tr>
+            <th>OS</th>
+            <td ng-bind-template="{{::info.host.os.name}} ({{::info.host.os.arch}}) {{::info.host.os.version}}"></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>VM</h3>
+      <table class="table table-bordered table-fixed">
+        <tbody>
+          <tr>
+            <th style="width:33%">Java</th>
+            <td ng-bind-template="{{::info.vm.java.vendor}} {{::info.vm.java.version}}"></td>
+          </tr>
+          <tr>
+            <th>Start time</th>
+            <td ng-bind-template="{{::startTime}} (up {{::upTime}})"></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Database</h3>
+      <table class="table table-bordered table-fixed">
+        <tbody>
+          <tr>
+            <th style="width:33%"># of articles</th>
+            <td ng-bind-template="{{::info.db.articles}}"></td>
+          </tr>
+          <tr>
+            <th># of topics</th>
+            <td ng-bind-template="{{::info.db.topics}}"></td>
+          </tr>
+          <tr>
+            <th># of words</th>
+            <td ng-bind-template="{{::info.db.words}}"></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Constants</h3>
+      <table class="table table-bordered table-fixed">
+        <tbody>
+          <tr>
+            <th style="width:33%">Analyzer</th>
+            <td ng-bind-template="{{::info.const.analyzer}}"></td>
+          </tr>
+          <tr>
+            <th>Processor</th>
+            <td ng-bind-template="{{::info.const.processor}}"></td>
+          </tr>
+          <tr>
+            <th>Window resolution</th>
+            <td ng-bind-template="{{::info.const.windowres}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              Analyzer, text processor and dynamic window resolution.
+            </td>
+          </tr>
+          <tr>
+            <th>Import buffer</th>
+            <td ng-bind-template="{{::info.const.importbuf}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The number of articles that are imported in one go.
+            </td>
+          </tr>
+          <tr>
+            <th>ES boost topics</th>
+            <td ng-bind-template="{{::info.const.esboosttopics}}"></td>
+          </tr>
+          <tr>
+            <th>ES boost titles</th>
+            <td ng-bind-template="{{::info.const.esboosttitles}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              Boost parameters to modify the importance of search fields. Default is 1, all greater values raise field importance.
+            </td>
+          </tr>
+          <tr>
+            <th>Topic auto naming words</th>
+            <td ng-bind-template="{{::info.const.topicautoname}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The number of topic words to be used to automatically generate a topic name. Words are sorted by descending topic association likeliness.
+            </td>
+          </tr>
+          <tr>
+            <th>K topics</th>
+            <td ng-bind-template="{{::info.const.ktopics}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The number of topics to be generated in the topic modeling process.
+            </td>
+          </tr>
+          <tr>
+            <th>K topic words</th>
+            <td ng-bind-template="{{::info.const.ktopicwords}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The maximum number of words that are associated to a single topic.
+            </td>
+          </tr>
+          <tr>
+            <th>Rising decay weight</th>
+            <td ng-bind-template="{{::info.const.decaylambda}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              A weight to the rising decay caulculation of topic relevances. The higher this value, the more focus is put on later sequences containing more recent documents.
+            </td>
+          </tr>
+          <tr>
+            <th>Minimum relative probability</th>
+            <td ng-bind-template="{{::info.const.minrelprob}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The minimum relative probability of topic words. Words are accepted into a topic, if their probability exceeds
+              <it>maximum_probability * minimum_relative_probability</it>.
+            </td>
+          </tr>
+          <tr>
+            <th>Minimum share</th>
+            <td ng-bind-template="{{::info.const.minshare}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The minimum share of a topic to be accepted for an article. Topic shares are renormalized after rejecting topics below this threshold.
+            </td>
+          </tr>
+          <tr>
+            <th>Maximum similar documents</th>
+            <td ng-bind-template="{{::info.const.maxsimdocs}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              Maximum number of similar documents for each document.
+            </td>
+          </tr>
+          <tr>
+            <th>Maximum divergence</th>
+            <td ng-bind-template="{{::info.const.maxdiv}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              Maximum divergence between a document and similar documents. Lower values mean more similar documents (less divergence).
+            </td>
+          </tr>
+          <tr>
+            <th>Dynamic minimum iterations</th>
+            <td ng-bind-template="{{::info.const.dynminiter}}"></td>
+          </tr>
+          <tr>
+            <th>Dynamic maximum iterations</th>
+            <td ng-bind-template="{{::info.const.dynmaxiter}}"></td>
+          </tr>
+          <tr>
+            <th>Static iterations</th>
+            <td ng-bind-template="{{::info.const.statiter}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              Iteration values for dynamic and static topic modeling.
+            </td>
+          </tr>
+          <tr>
+            <th>Word minimum frequency</th>
+            <td ng-bind-template="{{::info.const.docminfreq}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The minimum word frequency for unique words in an article to be used in the topic modeling process. Unique words with a lower frequency are ignored.
+            </td>
+          </tr>
+          <tr>
+            <th>Document minimum word count</th>
+            <td ng-bind-template="{{::info.const.docminlength}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The minimum article word count. Articles with less words are not included in the topic modeling process.
+            </td>
+          </tr>
+          <tr>
+            <th>Regex disallowed chars</th>
+            <td ng-bind-template="{{::info.const.charsdisallow}}"></td>
+          </tr>
+          <tr>
+            <th>Regex email</th>
+            <td ng-bind-template="{{::info.const.regexemail}}"></td>
+          </tr>
+          <tr>
+            <th>Regex URL</th>
+            <td ng-bind-template="{{::info.const.regexurl}}"></td>
+          </tr>
+          <tr>
+            <th>Regex number</th>
+            <td ng-bind-template="{{::info.const.regexnumber}}"></td>
+          </tr>
+          <tr>
+            <th>Regex single characters</th>
+            <td ng-bind-template="{{::info.const.regexchar}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              Regular expressions used in the article text procession. These regular expressions are used to remove unwanted text passages. Each match is replaced by empty strings.
+            </td>
+          </tr>
+          <tr>
+            <th>Excerpt length</th>
+            <td ng-bind-template="{{::info.const.excerptlength}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The maximum excerpt length that is inserted in the ElasticSearch index for display on the search result page.
+            </td>
+          </tr>
+          <tr>
+            <th>Date time format</th>
+            <td ng-bind-template="{{::info.const.dateformat}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The date and time format for backend-frontend communication. This is not the format used for frontend display, which is based on localization.
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
-  <p><strong>Vipra</strong></p>
-  <p>Created by Eike Cochu</p>
-  <h3>Description</h3>
-  <p>The Vipra application is a topic modeling based search system with a frontend web application, a backend REST service and a maintenance tool for data import and modeling. It attempts to leverage automatically discovered topic informations in document collections to ease collection browsing and organization. The search system relies on ElasticSearch and Apache Lucene.</p>
-  <p>This application was created by Eike Cochu for his master's degree thesis in computer science, 2015-2016 at the Freie Universit&auml;t in Berlin, Germany.</p>
-  <h3>License</h3>
-  <p>The MIT License (MIT)</p>
-  <p>Copyright 2016 Eike Cochu</p>
-  <p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
-  <p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
-  <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
-  <hr>
-  <h3>Version</h3>
-  <table class="table table-bordered table-fixed">
-    <tbody>
-      <tr>
-        <th style="width:33%">Git Version</th>
-        <td ng-bind="::info.app.gitsha1"></td>
-      </tr>
-      <tr>
-        <th>Artifact Version</th>
-        <td ng-bind="::info.app.version"></td>
-      </tr>
-      <tr>
-        <th>Build date</th>
-        <td ng-bind="::buildDate"></td>
-      </tr>
-    </tbody>
-  </table>
-  <h3>Host</h3>
-  <table class="table table-bordered table-fixed">
-    <tbody>
-      <tr>
-        <th style="width:33%">CPU Cores</th>
-        <td ng-bind="::info.host.cores"></td>
-      </tr>
-      <tr>
-        <th>Available memory</th>
-        <td ng-bind="::info.host.memory"></td>
-      </tr>
-      <tr>
-        <th>OS</th>
-        <td ng-bind-template="{{::info.host.os.name}} ({{::info.host.os.arch}}) {{::info.host.os.version}}"></td>
-      </tr>
-    </tbody>
-  </table>
-  <h3>VM</h3>
-  <table class="table table-bordered table-fixed">
-    <tbody>
-      <tr>
-        <th style="width:33%">Java</th>
-        <td ng-bind-template="{{::info.vm.java.vendor}} {{::info.vm.java.version}}"></td>
-      </tr>
-      <tr>
-        <th>Start time</th>
-        <td ng-bind-template="{{::startTime}} (up {{::upTime}})"></td>
-      </tr>
-    </tbody>
-  </table>
-  <h3>Database</h3>
-  <table class="table table-bordered table-fixed">
-    <tbody>
-      <tr>
-        <th style="width:33%"># of articles</th>
-        <td ng-bind-template="{{::info.db.articles}}"></td>
-      </tr>
-      <tr>
-        <th># of topics</th>
-        <td ng-bind-template="{{::info.db.topics}}"></td>
-      </tr>
-      <tr>
-        <th># of words</th>
-        <td ng-bind-template="{{::info.db.words}}"></td>
-      </tr>
-    </tbody>
-  </table>
-  <h3>Constants</h3>
-  <table class="table table-bordered table-fixed">
-    <tbody>
-      <tr>
-        <th style="width:33%">Analyzer</th>
-        <td ng-bind-template="{{::info.const.analyzer}}"></td>
-      </tr>
-      <tr>
-        <th>Processor</th>
-        <td ng-bind-template="{{::info.const.processor}}"></td>
-      </tr>
-      <tr>
-        <th>Window resolution</th>
-        <td ng-bind-template="{{::info.const.windowres}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          Analyzer, text processor and dynamic window resolution.
-        </td>
-      </tr>
-      <tr>
-        <th>Import buffer</th>
-        <td ng-bind-template="{{::info.const.importbuf}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The number of articles that are imported in one go.
-        </td>
-      </tr>
-      <tr>
-        <th>ES boost topics</th>
-        <td ng-bind-template="{{::info.const.esboosttopics}}"></td>
-      </tr>
-      <tr>
-        <th>ES boost titles</th>
-        <td ng-bind-template="{{::info.const.esboosttitles}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          Boost parameters to modify the importance of search fields. Default is 1, all greater values raise field importance.
-        </td>
-      </tr>
-      <tr>
-        <th>Topic auto naming words</th>
-        <td ng-bind-template="{{::info.const.topicautoname}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The number of topic words to be used to automatically generate a topic name. Words are sorted by descending topic association likeliness.
-        </td>
-      </tr>
-      <tr>
-        <th>K topics</th>
-        <td ng-bind-template="{{::info.const.ktopics}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The number of topics to be generated in the topic modeling process.
-        </td>
-      </tr>
-      <tr>
-        <th>K topic words</th>
-        <td ng-bind-template="{{::info.const.ktopicwords}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The maximum number of words that are associated to a single topic.
-        </td>
-      </tr>
-      <tr>
-        <th>Rising decay weight</th>
-        <td ng-bind-template="{{::info.const.decaylambda}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          A weight to the rising decay caulculation of topic relevances. The higher this value, the more focus is put on later sequences containing more recent documents.
-        </td>
-      </tr>
-      <tr>
-        <th>Minimum relative probability</th>
-        <td ng-bind-template="{{::info.const.minrelprob}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The minimum relative probability of topic words. Words are accepted into a topic, if their probability exceeds
-          <it>maximum_probability * minimum_relative_probability</it>.
-        </td>
-      </tr>
-      <tr>
-        <th>Minimum share</th>
-        <td ng-bind-template="{{::info.const.minshare}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The minimum share of a topic to be accepted for an article. Topic shares are renormalized after rejecting topics below this threshold.
-        </td>
-      </tr>
-      <tr>
-        <th>Maximum similar documents</th>
-        <td ng-bind-template="{{::info.const.maxsimdocs}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          Maximum number of similar documents for each document.
-        </td>
-      </tr>
-      <tr>
-        <th>Maximum divergence</th>
-        <td ng-bind-template="{{::info.const.maxdiv}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          Maximum divergence between a document and similar documents. Lower values mean more similar documents (less divergence).
-        </td>
-      </tr>
-      <tr>
-        <th>Dynamic minimum iterations</th>
-        <td ng-bind-template="{{::info.const.dynminiter}}"></td>
-      </tr>
-      <tr>
-        <th>Dynamic maximum iterations</th>
-        <td ng-bind-template="{{::info.const.dynmaxiter}}"></td>
-      </tr>
-      <tr>
-        <th>Static iterations</th>
-        <td ng-bind-template="{{::info.const.statiter}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          Iteration values for dynamic and static topic modeling.
-        </td>
-      </tr>
-      <tr>
-        <th>Word minimum frequency</th>
-        <td ng-bind-template="{{::info.const.docminfreq}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The minimum word frequency for unique words in an article to be used in the topic modeling process. Unique words with a lower frequency are ignored.
-        </td>
-      </tr>
-      <tr>
-        <th>Document minimum word count</th>
-        <td ng-bind-template="{{::info.const.docminlength}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The minimum article word count. Articles with less words are not included in the topic modeling process.
-        </td>
-      </tr>
-      <tr>
-        <th>Regex disallowed chars</th>
-        <td ng-bind-template="{{::info.const.charsdisallow}}"></td>
-      </tr>
-      <tr>
-        <th>Regex email</th>
-        <td ng-bind-template="{{::info.const.regexemail}}"></td>
-      </tr>
-      <tr>
-        <th>Regex URL</th>
-        <td ng-bind-template="{{::info.const.regexurl}}"></td>
-      </tr>
-      <tr>
-        <th>Regex number</th>
-        <td ng-bind-template="{{::info.const.regexnumber}}"></td>
-      </tr>
-      <tr>
-        <th>Regex single characters</th>
-        <td ng-bind-template="{{::info.const.regexchar}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          Regular expressions used in the article text procession. These regular expressions are used to remove unwanted text passages. Each match is replaced by empty strings.
-        </td>
-      </tr>
-      <tr>
-        <th>Excerpt length</th>
-        <td ng-bind-template="{{::info.const.excerptlength}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The maximum excerpt length that is inserted in the ElasticSearch index for display on the search result page.
-        </td>
-      </tr>
-      <tr>
-        <th>Date time format</th>
-        <td ng-bind-template="{{::info.const.dateformat}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The date and time format for backend-frontend communication. This is not the format used for frontend display, which is based on localization.
-        </td>
-      </tr>
-    </tbody>
-  </table>
 </div>
 <div ng-cloak ui-view></div>
diff --git a/vipra-ui/app/html/articles/index.html b/vipra-ui/app/html/articles/index.html
index f07ba3a8..49ab0bc9 100644
--- a/vipra-ui/app/html/articles/index.html
+++ b/vipra-ui/app/html/articles/index.html
@@ -1,28 +1,50 @@
 <div class="container" ng-cloak ng-hide="$state.current.name !== 'articles'">
-  <div class="text-muted">
-    Found
-    <ng-pluralize count="articlesTotal||0" when="{0:'no articles',1:'1 article',other:'{} articles'}"></ng-pluralize> in the database.
-    <span ng-show="articlesTotal">
-      Sort by
-      <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.sort">
-        <li value="title" class="nya-bs-option"><a>Title</a></li>
-        <li value="date" class="nya-bs-option"><a>Date</a></li>
-        <li value="created" class="nya-bs-option"><a>Added</a></li>
-      </ol>
-      Direction
-      <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.order">
-        <li value="+" class="nya-bs-option"><a>Ascending</a></li>
-        <li value="-" class="nya-bs-option"><a>Descending</a></li>
-      </ol>
-    </span>
-    <br> Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>.
+  <div class="row">
+    <div class="col-md-12">
+      <div class="text-muted">
+        Found
+        <ng-pluralize count="articlesTotal||0" when="{0:'no articles',1:'1 article',other:'{} articles'}"></ng-pluralize> in the database.
+        <span ng-show="articlesTotal">
+          Sort by
+          <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.sort">
+            <li value="title" class="nya-bs-option"><a>Title</a></li>
+            <li value="date" class="nya-bs-option"><a>Date</a></li>
+            <li value="created" class="nya-bs-option"><a>Added</a></li>
+          </ol>
+          Direction
+          <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.order">
+            <li value="+" class="nya-bs-option"><a>Ascending</a></li>
+            <li value="-" class="nya-bs-option"><a>Descending</a></li>
+          </ol>
+        </span>
+        <br> Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>.
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <table class="table table-hover table-condensed">
+        <tbody>
+          <tr ng-repeat="article in articles">
+            <td>
+              <a ui-sref="articles.show({id: article.id})" ng-bind="::article.title"></a>
+              &nbsp;
+              <small class="text-muted" ng-bind-template="[{{::Vipra.formatDate(article.date)}}]"></small>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <pagination total="articlesTotal" page="page" limit="limit" />
+    </div>
   </div>
-  <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
-  <ol ng-attr-start="{{(page-1)*limit+1}}">
-    <li ng-repeat="article in articles">
-      <a ui-sref="articles.show({id: article.id})" ng-bind="::article.title"></a>
-    </li>
-  </ol>
-  <pagination total="articlesTotal" page="page" limit="limit" />
 </div>
 <div ng-cloak ui-view></div>
diff --git a/vipra-ui/app/html/articles/show.html b/vipra-ui/app/html/articles/show.html
index 748b9853..3f335dee 100644
--- a/vipra-ui/app/html/articles/show.html
+++ b/vipra-ui/app/html/articles/show.html
@@ -1,85 +1,92 @@
 <div class="container" ng-cloak ng-hide="$state.current.name !== 'articles.show'">
-  <div class="page-header">
-    <h1 ng-bind="::article.title"></h1>
-    <table class="item-actions">
-      <tr>
-        <td>
-          <a class="btn btn-default" ui-sref="network({type:'articles', id:article.id})">
-            Network graph
-          </a>
-        </td>
-        <td>
-          <a class="btn btn-default" ui-sref="articles.show.similar({id:article.id})">
-            Similar
-          </a>
-        </td>
-      </tr>
-    </table>
-  </div>
-  <h3>Info</h3>
   <div class="row">
     <div class="col-md-12">
-      <table class="table table-bordered table-condensed table-fixed table-infos">
-        <tbody>
-          <tr>
-            <th>ID</th>
-            <td ng-bind="::article.id"></td>
-          </tr>
-          <tr>
-            <th>Date</th>
-            <td ng-bind="::articleDate"></td>
-          </tr>
+      <div class="page-header">
+        <h1 ng-bind="::article.title"></h1>
+        <table class="item-actions">
           <tr>
-            <th>URL</th>
             <td>
-              <a ng-href="{{::article.url}}" target="_blank">
-                <span class="glyphicon glyphicon-link"></span>
-                <span ng-bind="::article.url"></span>
+              <a class="btn btn-default" ui-sref="network({type:'articles', id:article.id})">
+                Network graph
               </a>
             </td>
           </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-8">
+      <div class="row">
+        <div class="col-md-12">
+          <h3>Info</h3>
+          <table class="table table-bordered table-condensed table-infos">
+            <tbody>
+              <tr>
+                <th>ID</th>
+                <td ng-bind="::article.id"></td>
+              </tr>
+              <tr>
+                <th>Date</th>
+                <td ng-bind="::articleDate"></td>
+              </tr>
+              <tr>
+                <th>URL</th>
+                <td>
+                  <a ng-href="{{::article.url}}" target="_blank">
+                    <span class="glyphicon glyphicon-link"></span>
+                    <span ng-bind="::article.url"></span>
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <th>Word count</th>
+                <td ng-bind="::article.stats.wordCount"></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <h3>Similar articles</h3>
+          <ul class="list-unstyled" ng-attr-start="{{(page-1)*limit+1}}">
+            <li ng-repeat="simArticle in article.similarArticles" class="ellipsize">
+              <small class="text-muted percent-align" ng-bind-template="({{((1-simArticle.divergence)*100).toFixed(0)}}%)"></small>
+              <a ui-sref="articles.show({id: simArticle.article.id})" ng-attr-title="{{::simArticle.article.title}}" ng-bind="::simArticle.article.title"></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-4">
+      <h3>Topics</h3>
+      <table class="table table-bordered table-condensed table-nomargin" ng-show="article.topics.length > 0">
+        <tbody>
           <tr>
-            <th>Created</th>
-            <td ng-bind="::articleCreated"></td>
-          </tr>
-          <tr>
-            <th>Last modified</th>
-            <td ng-bind="::articleModified"></td>
+            <th>
+              Name
+            </th>
+            <th class="topic-share text-right">
+              Share
+            </th>
           </tr>
-          <tr>
-            <th>Word count</th>
-            <td ng-bind="::article.stats.wordCount"></td>
+          <tr ng-repeat="topic in article.topics | orderBy:topicSort:topicSortRev">
+            <td>
+              <topic-link topic="topic.topic" />
+              <span class="colorbox" style="background:{{::topic.color}}"></span>
+            </td>
+            <td class="text-right" ng-bind-template="{{(topic.share*100).toFixed(1)}}%"></td>
           </tr>
         </tbody>
       </table>
-    </div>
-  </div>
-  <h3>Topics</h3>
-  <div class="row">
-    <div class="col-md-5">
-      <table class="table table-morecondensed" ng-show="article.topics.length > 0">
-        <tr>
-          <th>
-            Name
-          </th>
-          <th class="topic-share">
-            Share
-          </th>
-        </tr>
-        <tr ng-repeat="topic in article.topics | orderBy:topicSort:topicSortRev">
-          <td>
-            <topic-link topic="topic.topic" />
-          </td>
-          <td class="text-right" ng-bind-template="{{(topic.share*100).toFixed(1)}}%"></td>
-        </tr>
-      </table>
       <span class="text-muted" ng-hide="article.topics.length > 0">No topics</span>
-    </div>
-    <div class="col-md-7">
       <div class="pie-chart" id="topic-share" highcharts="topicShare"></div>
     </div>
   </div>
   <hr>
-  <p ng-bind-html="::article.text" class="text-justify"></p>
+  <div class="row">
+    <div class="col-md-12 text-justify" ng-bind-html="::article.text"></div>
+  </div>
 </div>
 <div ng-cloak ui-view></div>
diff --git a/vipra-ui/app/html/articles/similar.html b/vipra-ui/app/html/articles/similar.html
deleted file mode 100644
index a8d167b5..00000000
--- a/vipra-ui/app/html/articles/similar.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="container" ng-cloak ng-hide="$state.current.name !== 'articles.show.similar'">
-  <div class="page-header">
-    <h1 ng-bind="::article.title"></h1>
-    <table class="item-actions">
-      <tr>
-        <td>
-          <a class="btn btn-default" ui-sref="^">Back</a>
-        </td>
-      </tr>
-    </table>
-  </div>
-  <h3>Similar articles</h3>
-  <div class="row">
-
-  </div>
-</div>
\ No newline at end of file
diff --git a/vipra-ui/app/html/explorer.html b/vipra-ui/app/html/explorer.html
index dca997dd..8734f3db 100644
--- a/vipra-ui/app/html/explorer.html
+++ b/vipra-ui/app/html/explorer.html
@@ -24,7 +24,7 @@
           <label class="check" ng-attr-for="{{::topic.id}}">
             <span class="ellipsis" ng-bind="::topic.name"></span>
           </label>
-          <span class="colorbox" style="background:rgb({{::topic.color.join()}})"></span>
+          <span class="colorbox" style="background:{{::topic.color}}"></span>
         </div>
       </li>
     </ul>
diff --git a/vipra-ui/app/html/index.html b/vipra-ui/app/html/index.html
index e672fa4c..060ae53d 100644
--- a/vipra-ui/app/html/index.html
+++ b/vipra-ui/app/html/index.html
@@ -47,7 +47,7 @@
           <p>
             <span class="text" ng-bind="article.text"></span>
             <br>
-            <small class="text-muted" ng-bind-template="{{article.meta.score | toPercent}}% &ndash; {{article.date | formatDate}}"></small>
+            <small class="text-muted" ng-bind-template="{{::Vipra.toPercent(article.meta.score)}}% &ndash; {{::Vipra.formatDate(article.date)}}"></small>
           </p>
         </li>
       </ul>
diff --git a/vipra-ui/app/html/topics/index.html b/vipra-ui/app/html/topics/index.html
index 9e831c83..9cb3bc81 100644
--- a/vipra-ui/app/html/topics/index.html
+++ b/vipra-ui/app/html/topics/index.html
@@ -1,27 +1,47 @@
 <div class="container" ng-cloak ng-hide="$state.current.name !== 'topics'">
-  <div class="text-muted">
-    Found
-    <ng-pluralize count="topicsTotal||0" when="{0:'no topics',1:'1 topic',other:'{} topics'}"></ng-pluralize> in the database.
-    <span ng-show="topicsTotal">
-      Sort by
-      <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.sort">
-        <li value="name" class="nya-bs-option"><a>Name</a></li>
-        <li value="created" class="nya-bs-option"><a>Added</a></li>
-      </ol>
-      Direction
-      <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.order">
-        <li value="+" class="nya-bs-option"><a>Ascending</a></li>
-        <li value="-" class="nya-bs-option"><a>Descending</a></li>
-      </ol>
-    </span>
-    <br> Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>.
+  <div class="row">
+    <div class="col-md-12">
+      <div class="text-muted">
+        Found
+        <ng-pluralize count="topicsTotal||0" when="{0:'no topics',1:'1 topic',other:'{} topics'}"></ng-pluralize> in the database.
+        <span ng-show="topicsTotal">
+          Sort by
+          <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.sort">
+            <li value="name" class="nya-bs-option"><a>Name</a></li>
+            <li value="created" class="nya-bs-option"><a>Added</a></li>
+          </ol>
+          Direction
+          <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.order">
+            <li value="+" class="nya-bs-option"><a>Ascending</a></li>
+            <li value="-" class="nya-bs-option"><a>Descending</a></li>
+          </ol>
+        </span>
+        <br> Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>.
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <pagination total="topicsTotal" page="page" limit="limit" change="changePage" />
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <table class="table table-hover table-condensed">
+        <tbody>
+          <tr ng-repeat="topic in topics">
+            <td>
+              <a ui-sref="topics.show({id: topic.id})" ng-bind="::topic.name"></a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <pagination total="topicsTotal" page="page" limit="limit" />
+    </div>
   </div>
-  <pagination total="topicsTotal" page="page" limit="limit" change="changePage" />
-  <ol ng-attr-start="{{(page-1)*limit+1}}">
-    <li ng-repeat="topic in topics">
-      <a ui-sref="topics.show({id: topic.id})">{{topic.name}}</a>
-    </li>
-  </ol>
-  <pagination total="topicsTotal" page="page" limit="limit" />
 </div>
 <div ng-cloak ui-view></div>
diff --git a/vipra-ui/app/html/topics/show.html b/vipra-ui/app/html/topics/show.html
index 9a1e5f06..0f3b21d5 100644
--- a/vipra-ui/app/html/topics/show.html
+++ b/vipra-ui/app/html/topics/show.html
@@ -1,44 +1,48 @@
 <div class="container" ng-cloak ng-hide="$state.current.name !== 'topics.show'">
-  <div class="page-header">
-    <h1>
-      <div ng-bind="topic.name" ng-hide="isRename"></div>
-      <div class="input-group input-group-lg" ng-show="isRename">
-        <input type="text" class="form-control" ng-model="topic.name" id="topicName" ng-keyup="keyup($event)">
-        <div class="input-group-btn">
-          <button class="btn btn-success" ng-click="endRename(true)">
-            <span class="glyphicon glyphicon-ok"></span>
-          </button>
-          <button class="btn btn-danger" ng-click="endRename(false)">
-            <span class="glyphicon glyphicon-remove"></span>
-          </button>
-        </div>
-      </div>
-    </h1>
-    <table class="item-actions">
-      <tr>
-        <td>
-          <div class="dropdown">
-            <button class="btn btn-default dropdown-toggle" type="button" id="actionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-              Actions
-              <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu" aria-labelledby="actionsDropdown">
-              <li><a ng-click="startRename()">Rename</a></li>
-            </ul>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="page-header">
+        <h1>
+          <div ng-bind="topic.name" ng-hide="isRename"></div>
+          <div class="input-group input-group-lg" ng-show="isRename">
+            <input type="text" class="form-control" ng-model="topic.name" id="topicName" ng-keyup="keyup($event)">
+            <div class="input-group-btn">
+              <button class="btn btn-success" ng-click="endRename(true)">
+                <span class="glyphicon glyphicon-ok"></span>
+              </button>
+              <button class="btn btn-danger" ng-click="endRename(false)">
+                <span class="glyphicon glyphicon-remove"></span>
+              </button>
+            </div>
           </div>
-        </td>
-        <td>
-          <a class="btn btn-default" ui-sref="network({type:'topics', id:topic.id})">Network graph</a>
-        </td>
-        <td>
-          <a class="btn btn-default" ui-sref="topics.show.articles({id:topic.id})">Articles</a>
-        </td>
-      </tr>
-    </table>
+        </h1>
+        <table class="item-actions">
+          <tr>
+            <td>
+              <div class="dropdown">
+                <button class="btn btn-default dropdown-toggle" type="button" id="actionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                  Actions
+                  <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="actionsDropdown">
+                  <li><a ng-click="startRename()">Rename</a></li>
+                </ul>
+              </div>
+            </td>
+            <td>
+              <a class="btn btn-default" ui-sref="network({type:'topics', id:topic.id})">Network graph</a>
+            </td>
+            <td>
+              <a class="btn btn-default" ui-sref="topics.show.articles({id:topic.id})">Articles</a>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
   </div>
-  <h3>Info</h3>
   <div class="row">
     <div class="col-md-12">
+      <h3>Info</h3>
       <table class="table table-bordered table-condensed table-fixed table-infos">
         <tbody>
           <tr>
@@ -57,9 +61,9 @@
       </table>
     </div>
   </div>
-  <h3>Relevance over time</h3>
   <div class="row">
     <div class="col-md-12">
+      <h3>Relevance over time</h3>
       <div class="well well-sm">
         <div class="radio radio-inline">
           <input type="radio" id="seqAbsolute" ng-model="opts.seqstyle" value="absolute">
@@ -72,8 +76,7 @@
       </div>
     </div>
   </div>
-  <br>
-  <div class="row">
+  <div class="row row-spaced">
     <div class="col-md-12">
       <div class="area-chart" id="topic-seq" highcharts="topicSeq"></div>
     </div>
diff --git a/vipra-ui/app/js/app.js b/vipra-ui/app/js/app.js
index cfa37ff3..35b6b0e1 100644
--- a/vipra-ui/app/js/app.js
+++ b/vipra-ui/app/js/app.js
@@ -16,7 +16,6 @@
     'vipra.controllers',
     'vipra.directives',
     'vipra.factories',
-    'vipra.filters',
     'vipra.templates'
   ]);
 
@@ -64,12 +63,6 @@
       controller: 'ArticlesShowController'
     });
 
-    $stateProvider.state('articles.show.similar', {
-      url: '/similar',
-      templateUrl: 'html/articles/similar.html',
-      controller: 'ArticlesSimilarController'
-    });
-
     // states: topics
 
     $stateProvider.state('topics', {
@@ -136,6 +129,8 @@
 
     $rootScope.loading = {};
 
+    $rootScope.Vipra = window.Vipra;
+
   }]);
 
 })();
diff --git a/vipra-ui/app/js/controllers.js b/vipra-ui/app/js/controllers.js
index 4b791524..e5067fb8 100644
--- a/vipra-ui/app/js/controllers.js
+++ b/vipra-ui/app/js/controllers.js
@@ -2,7 +2,7 @@
  * Vipra Application
  * Controllers
  ******************************************************************************/
-/* globals angular, Vipra, moment, vis, console, $, prompt */
+/* globals angular, Vipra, moment, vis, console, $, prompt, randomColor */
 (function() {
 
   "use strict";
@@ -309,7 +309,7 @@
         fields: 'name,sequences,avgRelevance,varRelevance,risingRelevance,fallingRelevance,risingDecayRelevance'
       }, function(data) {
         $scope.topics = data;
-        var colors = Vipra.generateColors($scope.topics.length);
+        var colors = randomColor({ count: $scope.topics.length, seed: 1 });
         for (var i = 0; i < $scope.topics.length; i++)
           $scope.topics[i].color = colors[i];
       }, function(err) {
@@ -353,7 +353,7 @@
             series.push({
               name: topic.name,
               data: relevances,
-              color: 'rgb(' + topic.color.join() + ')'
+              color: topic.color
             });
           }
         }
@@ -430,11 +430,26 @@
         // calculate percentage share
         if ($scope.article.topics) {
           var topicShareSeries = [],
-            topics = $scope.article.topics;
-          for (var i = 0; i < topics.length; i++) {
-            topicShareSeries.push({ name: topics[i].topic.name.ellipsize(20), y: topics[i].share });
+            topics = $scope.article.topics,
+            maximum = { y: 0 },
+            colors = randomColor({ count: $scope.article.topics.length });
+          for (var i = 0, d; i < topics.length; i++) {
+            d = {
+              name: topics[i].topic.name,
+              y: topics[i].share,
+              color: colors[i]
+            };
+
+            topicShareSeries.push(d);
+            if(d.y > maximum.y)
+              maximum = d;
+
+            $scope.article.topics[i].color = colors[i];
           }
 
+          // preselect biggest value
+          maximum.selected = maximum.sliced = true;
+
           // highcharts data
           $scope.topicShare = topicShareChart([{
             name: 'Topic Share',
@@ -452,16 +467,8 @@
   /**
    * Article Similar route
    */
-  app.controller('ArticlesSimilarController', ['$scope', '$stateParams', 'ArticleFactory',
-    function($scope, $stateParams, ArticleFactory) {
-
-      ArticleFactory.get({
-        id: $stateParams.id
-      }, function(data) {
-        $scope.articles = data;
-      }, function(err) {
-        $scope.errors = err;
-      });
+  app.controller('ArticlesSimilarController', [
+    function() {
 
     }
   ]);
@@ -696,10 +703,20 @@
 
   function topicShareChart(series) {
     return {
-      chart: { type: 'pie' },
+      chart: {
+        type: 'pie',
+        spacingBottom: 0,
+        spacingTop: 0,
+        spacingLeft: 20,
+        spacingRight: 20,
+      },
       credits: { enabled: false },
       plotOptions: {
-        pie: { allowPointSelect: true }
+        pie: {
+          size: '100%',
+          dataLabels: { enabled: false },
+          allowPointSelect: true
+        }
       },
       title: { text: '' },
       tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
diff --git a/vipra-ui/app/js/filters.js b/vipra-ui/app/js/filters.js
deleted file mode 100644
index ecf60ee7..00000000
--- a/vipra-ui/app/js/filters.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/******************************************************************************
- * Vipra Application
- * Filters
- ******************************************************************************/
-/* globals angular, Vipra */
-(function() {
-
-  "use strict";
-
-  var app = angular.module('vipra.filters', []);
-
-  app.filter('toPercent', function() {
-    return Vipra.toPercent;
-  });
-
-  app.filter('formatDate', function() {
-    return Vipra.formatDate;
-  });
-
-  app.filter('formatDateTime', function() {
-    return Vipra.formatDateTime;
-  });
-
-})();
diff --git a/vipra-ui/app/js/helpers.js b/vipra-ui/app/js/helpers.js
index 0898a924..27d36b43 100644
--- a/vipra-ui/app/js/helpers.js
+++ b/vipra-ui/app/js/helpers.js
@@ -9,6 +9,8 @@
 
   window.Vipra = window.Vipra || {};
 
+  Vipra.momo = 'hi';
+
   /**
    * Helpers
    */
@@ -36,98 +38,6 @@
     return 'id' + Math.random().toString(36).substring(7);
   };
 
-  /**
-   * taken from
-   * https://jsfiddle.net/aldass/9f0yadfy/
-   */
-  Vipra.generateColors = function(t) {
-    t = parseInt(t);
-    if (t < 2)
-      throw new Error("'t' must be greater than 1.");
-
-    // distribute the colors evenly on
-    // the hue range (the 'H' in HSV)
-    var i = 360 / (t - 1);
-
-    // hold the generated colors
-    var r = [];
-    var sv = 70;
-    for (var x = 0; x < t; x++) {
-      // alternate the s, v for more
-      // contrast between the colors.
-      sv = sv > 90 ? 70 : sv + 10;
-      r.push(Vipra.hsvToRgb(i * x, sv, sv));
-    }
-    return r;
-  };
-
-  /**
-   * HSV to RGB color conversion
-   *
-   * H runs from 0 to 360 degrees
-   * S and V run from 0 to 100
-   * 
-   * Ported from the excellent java algorithm by Eugene Vishnevsky at:
-   * http://www.cs.rit.edu/~ncs/color/t_convert.html
-   */
-  Vipra.hsvToRgb = function(h, s, v) {
-    var r, g, b;
-    var i;
-    var f, p, q, t;
-
-    h = Math.max(0, Math.min(360, h));
-    s = Math.max(0, Math.min(100, s));
-    v = Math.max(0, Math.min(100, v));
-    s /= 100;
-    v /= 100;
-
-    if (s === 0) {
-      r = g = b = v;
-      return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
-    }
-
-    h /= 60;
-    i = Math.floor(h);
-    f = h - i;
-    p = v * (1 - s);
-    q = v * (1 - s * f);
-    t = v * (1 - s * (1 - f));
-
-    switch (i) {
-      case 0:
-        r = v;
-        g = t;
-        b = p;
-        break;
-      case 1:
-        r = q;
-        g = v;
-        b = p;
-        break;
-      case 2:
-        r = p;
-        g = v;
-        b = t;
-        break;
-      case 3:
-        r = p;
-        g = q;
-        b = v;
-        break;
-      case 4:
-        r = t;
-        g = p;
-        b = v;
-        break;
-      default:
-        r = v;
-        g = p;
-        b = q;
-    }
-
-    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
-  };
-
   /**
    * Polyfills
    */
diff --git a/vipra-ui/app/less/app.less b/vipra-ui/app/less/app.less
index 1afc146e..59964cbc 100644
--- a/vipra-ui/app/less/app.less
+++ b/vipra-ui/app/less/app.less
@@ -181,13 +181,6 @@ ul.dashed {
   }
 }
 
-.row {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
 .caret.caret-up {
   content: "";
   border-top: 0;
@@ -198,18 +191,16 @@ ul.dashed {
   padding: 0;
 }
 
-.page-header h1 {
-  min-height: 48px;
-}
-
 .table-fixed {
   table-layout: fixed;
 }
 
-.table-infos {
-  tr > *:first-child {
-    width: 200px;
-  }
+.table-nomargin {
+  margin: 0;
+}
+
+.page-header h1 {
+  min-height: 48px;
 }
 
 .nya-bs-condensed {
@@ -288,6 +279,14 @@ revolve-select, [revolve-select] {
   vertical-align: middle;
 }
 
+.colorbox {
+  display: inline-block;
+  width: 10px;
+  height: 20px;
+  vertical-align: middle;
+  float: right;
+}
+
 .explorer {
   @sidebar-width: 300px;
 
@@ -338,14 +337,10 @@ revolve-select, [revolve-select] {
   }
 
   .colorbox {
-    display: inline-block;
-    visibility: hidden;
-    width: 10px;
-    height: 20px;
-    vertical-align: middle;
     position: absolute;
     right: 0;
     top: 0;
+    visibility: hidden;
   }
 
   .checkbox:hover .colorbox,
@@ -415,6 +410,19 @@ input[type=checkbox],
   }
 }
 
+.table-infos {
+  th {
+    white-space: nowrap;
+  }
+}
+
+.percent-align {
+  width: 45px;
+  text-align: right;
+  display: inline-block;
+  vertical-align: text-top;
+}
+
 @-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); } }
 @-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } }
 @keyframes spin { 100% { -webkit-transform: rotateY(360deg); transform:rotateY(360deg); } }
diff --git a/vipra-ui/bower.json b/vipra-ui/bower.json
index f45e1e27..e227cf74 100644
--- a/vipra-ui/bower.json
+++ b/vipra-ui/bower.json
@@ -21,15 +21,15 @@
     "jquery": "^2.x",
     "angular": "^1.x",
     "angular-resource": "^1.x",
-    "angular-ui-router": "^0.2.17",
+    "angular-ui-router": "^0.x",
     "angular-sanitize": "^1.x",
     "highcharts": "^4.x",
     "vis": "^4.x",
     "moment": "^2.x",
     "nya-bootstrap-select": "^2.x",
     "font-awesome": "^4.x",
-    "awesome-bootstrap-checkbox": "^0.3.7",
-    "angular-bootstrap": "^1.x",
-    "angular-animate": "^1.5.0"
+    "awesome-bootstrap-checkbox": "^0.x",
+    "angular-animate": "^1.x",
+    "randomcolor": "randomColor#^0.x"
   }
 }
diff --git a/vipra-ui/gulpfile.js b/vipra-ui/gulpfile.js
index e520fc61..a6d5e5c8 100644
--- a/vipra-ui/gulpfile.js
+++ b/vipra-ui/gulpfile.js
@@ -19,11 +19,11 @@ var assets = {
     'bower_components/angular-sanitize/angular-sanitize.min.js',
     'bower_components/angular-ui-router/release/angular-ui-router.min.js',
     'bower_components/bootstrap/dist/js/bootstrap.min.js',
-    //'bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
     'bower_components/highcharts/highcharts.js',
     'bower_components/vis/dist/vis.min.js',
     'bower_components/moment/min/moment.min.js',
-    'bower_components/nya-bootstrap-select/dist/js/nya-bs-select.min.js'
+    'bower_components/nya-bootstrap-select/dist/js/nya-bs-select.min.js',
+    'bower_components/randomcolor/randomColor.js'
   ],
   css: [
     'bower_components/bootstrap/dist/css/bootstrap.min.css',
diff --git a/vipra-util/src/main/java/de/vipra/util/Constants.java b/vipra-util/src/main/java/de/vipra/util/Constants.java
index d479aca5..4c03608c 100644
--- a/vipra-util/src/main/java/de/vipra/util/Constants.java
+++ b/vipra-util/src/main/java/de/vipra/util/Constants.java
@@ -106,7 +106,7 @@ public class Constants {
 	 * Maximum divergence between a document and similar documents. Lower values
 	 * mean more similar documents (less divergence). Default 1.0.
 	 */
-	public static final double MAX_DIVERGENCE = 1.0;
+	public static final double MAX_DIVERGENCE = 0.25;
 
 	/**
 	 * Dynamic minimum iterations. Used for dynamic topic modeling. Default 100.
-- 
GitLab