added popover directive, removed unused css rules

added bsPopover directive
added popover to explorer topics
removed unused css rules
merged ellipsis and ellipsize
removed unused helpers
added scrollbar to topics list in explorer

vipra-ui/app/html/articles/index.html

@@ -23,7 +23,7 @@
   </div>
   <div class="row">
     <div class="col-md-12">
-      <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
+      <pagination total="articlesTotal" page="page" limit="limit" />
     </div>
   </div>
   <div class="row">

vipra-ui/app/html/articles/show.html

@@ -51,7 +51,7 @@
         <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">
+            <li ng-repeat="simArticle in article.similarArticles" class="ellipsis">
               <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>

vipra-ui/app/html/explorer.html

@@ -19,7 +19,7 @@
     </div>
     <ul class="list-unstyled topic-choice">
       <li ng-repeat="topic in topics | orderBy:opts.sorttopics | filter:search">
-        <div class="checkbox checkbox-condensed" ng-attr-title="{{::topic.name}}" ng-class="{selected:opts.selectedTopics[topic.id]}">
+        <div class="checkbox checkbox-condensed" ng-class="{selected:opts.selectedTopics[topic.id]}" bs-popover popover-title="{{::topic.name}}" popover-html="{{::topicPopover(topic)}}">
           <input type="checkbox" ng-model="opts.selectedTopics[topic.id]" ng-attr-id="{{::topic.id}}">
           <label class="check" ng-attr-for="{{::topic.id}}">
             <span class="ellipsis" ng-bind="::topic.name"></span>
@@ -30,6 +30,7 @@
     </ul>
   </div>
   <div class="center message-container">
+    <div class="wrapper">
       <div class="topbar">
         <small>Values:</small>
         <div class="btn-group">
@@ -54,3 +55,4 @@
       <div class="message text-muted" ng-show="!topicsSelected">No topic selected</div>
     </div>
   </div>
+</div>
\ No newline at end of file

vipra-ui/app/html/index.html

@@ -13,7 +13,7 @@
     <div class="col-md-8 text-center">
       <h4>Latest articles</h4>
       <ul class="list-unstyled">
-        <li class="ellipsize" ng-repeat="article in latestArticles">
+        <li class="ellipsis" ng-repeat="article in latestArticles">
           <a ui-sref="articles.show({id:article.id})" ng-bind="article.title"></a>
         </li>
       </ul>
@@ -21,7 +21,7 @@
     <div class="col-md-4 text-center">
       <h4>Latest topics</h4>
       <ul class="list-unstyled">
-        <li class="ellipsize" ng-repeat="topic in latestTopics">
+        <li class="ellipsis" ng-repeat="topic in latestTopics">
           <a ui-sref="topics.show({id:topic.id})" ng-bind="topic.name"></a>
         </li>
       </ul>

vipra-ui/app/html/topics/articles.html

 <div class="container" ng-cloak ng-hide="$state.current.name !== 'topics.show.articles'">
+  <div class="row">
+    <div class="col-md-12">
       <div class="page-header">
         <h1 ng-bind-template="Articles for topic '{{::topic.name}}'"></h1>
         <table class="item-actions">
@@ -9,6 +11,10 @@
           </tr>
         </table>
       </div>
+    </div>
+  </div>
+  <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.
@@ -27,12 +33,30 @@
         </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" />
-  <ol ng-attr-start="{{(page-1)*limit+1}}">
-    <li ng-repeat="article in articles">
+    </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>
-    </li>
-  </ol>
-  <pagination total="articlesTotal" page="page" limit="limit" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
+    </div>
+  </div>
 </div>
 <div ng-cloak ui-view></div>

vipra-ui/app/html/topics/index.html

@@ -22,7 +22,7 @@
   </div>
   <div class="row">
     <div class="col-md-12">
-      <pagination total="topicsTotal" page="page" limit="limit" change="changePage" />
+      <pagination total="topicsTotal" page="page" limit="limit" />
     </div>
   </div>
   <div class="row">

vipra-ui/app/html/topics/show.html

@@ -49,14 +49,6 @@
             <th>ID</th>
             <td ng-bind="::topic.id"></td>
           </tr>
-          <tr>
-            <th>Created</th>
-            <td ng-bind="::topicCreated"></td>
-          </tr>
-          <tr>
-            <th>Last modified</th>
-            <td ng-bind="::topicModified"></td>
-          </tr>
         </tbody>
       </table>
     </div>

vipra-ui/app/js/controllers.js

@@ -2,7 +2,7 @@
  * Vipra Application
  * Controllers
  ******************************************************************************/
-/* globals angular, Vipra, moment, vis, console, $, prompt, randomColor */
+/* globals angular, Vipra, moment, vis, console, $, prompt, randomColor, Highcharts */
 (function() {
 
   "use strict";
@@ -353,22 +353,33 @@
             series.push({
               name: topic.name,
               data: relevances,
-              color: topic.color
+              color: topic.color,
+              topic: topic
             });
           }
         }
 
         // highcharts configuration
-        $scope.topicSeq = areaRelevanceChart(series, $scope.selectSequence, $scope.opts.chartstyle, $scope.opts.chartstack);
+        $scope.topicSeq = areaRelevanceChart(series, $scope.selectNode, $scope.opts.chartstyle,
+          $scope.opts.chartstack);
         $scope.topicsSelected = series.length;
       };
 
-      $scope.selectSequence = function(node) {
+      $scope.selectNode = function(node) {
         $scope.$apply(function() {
 
         });
       };
 
+      $scope.topicPopover = function(topic) {
+        return "<table class=\"table table-bordered table-condensed table-nomargin\"><tbody><tr><td>&#956;</td><td>&#963;</td><td>&#8600;</td><td>&#8599;</td><td>&#8605;</td></tr><tr><td>" +
+          topic.avgRelevance.toFixed(2) + "</td><td>" +
+          topic.varRelevance.toFixed(2) + "</td><td>" +
+          topic.fallingRelevance.toFixed(2) + "</td><td>" +
+          topic.risingRelevance.toFixed(2) + "</td><td>" +
+          topic.risingDecayRelevance.toFixed(2) + "</td></tr></tbody></table>";
+      };
+
       $scope.$watchCollection('opts.selectedTopics', $scope.redrawGraph);
       $scope.$watchGroup(['opts.seqstyle', 'opts.chartstyle', 'opts.chartstack'], $scope.redrawGraph);
     }
@@ -583,7 +594,7 @@
     function($scope, $stateParams, $location, TopicFactory) {
 
       $scope.opts = {
-        sort: 'name',
+        sort: 'title',
         order: '+'
       };
 
@@ -667,18 +678,30 @@
         spacingLeft: 0,
         spacingRight: 0
       },
-      title: { text: '' },
+      title: {
+        text: ''
+      },
       xAxis: {
         type: 'datetime',
-        title: { text: '' }
+        title: {
+          text: ''
+        }
+      },
+      yAxis: {
+        title: {
+          text: 'Relevance'
+        }
       },
-      yAxis: { title: { text: 'Relevance' } },
       tooltip: {
         headerFormat: '',
         pointFormat: '{point.x:%Y}: {point.y:.4f}'
       },
-      legend: { enabled: false },
-      credits: { enabled: false },
+      legend: {
+        enabled: false
+      },
+      credits: {
+        enabled: false
+      },
       plotOptions: {
         areaspline: {
           fillOpacity: 0.5,
@@ -694,6 +717,18 @@
                 clickCallback(e.point);
               }
             }
+          },
+          states: {
+            hover: {
+              halo: {
+                size: 9,
+                attributes: {
+                  fill: Highcharts.getOptions().colors[2],
+                  'stroke-width': 2,
+                  stroke: Highcharts.getOptions().colors[1]
+                }
+              }
+            }
           }
         }
       },
@@ -710,16 +745,24 @@
         spacingLeft: 20,
         spacingRight: 20,
       },
-      credits: { enabled: false },
+      credits: {
+        enabled: false
+      },
       plotOptions: {
         pie: {
           size: '100%',
-          dataLabels: { enabled: false },
+          dataLabels: {
+            enabled: false
+          },
           allowPointSelect: true
         }
       },
-      title: { text: '' },
-      tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
+      title: {
+        text: ''
+      },
+      tooltip: {
+        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+      },
       series: series
     };
   }

vipra-ui/app/js/directives.js

@@ -2,7 +2,7 @@
  * Vipra Application
  * Directives
  ******************************************************************************/
-/* globals angular, console */
+/* globals angular, console, $ */
 (function() {
 
   "use strict";
@@ -120,4 +120,23 @@
     };
   });
 
+  app.directive('bsPopover', function () {
+    return {
+      restrict: 'A',
+      link: function ($scope, $elem, $attrs) {
+        $scope.label = $attrs.popoverLabel;
+        $($elem).popover({
+          animation: ($attrs.popoverAnimation === 'true') || true,
+          container: $attrs.popoverContainer || 'body',
+          content: $attrs.popoverHtml,
+          delay: parseInt($attrs.popoverDelay || 1000, 10),
+          html: $attrs.popoverHtml || true,
+          placement: $attrs.popoverPlacement || 'right',
+          title: $attrs.popoverTitle,
+          trigger: $attrs.popoverTrigger || 'hover'
+        });
+      }
+    };
+  });
+
 })();

vipra-ui/app/js/helpers.js

@@ -42,15 +42,6 @@
    * Polyfills
    */
 
-  if (typeof String.prototype.ellipsize === 'undefined')
-    String.prototype.ellipsize = function(max) {
-      max = max || 20;
-      if (this.length > max) {
-        return this.substring(0, max) + '...';
-      }
-      return this;
-    };
-
   if (typeof String.prototype.multiline === 'undefined')
     String.prototype.multiline = function(max) {
       return this.split(new RegExp("((?:\\w+ ){" + max + "})", "g")).filter(Boolean).join("\n");

vipra-ui/app/less/app.less

@@ -13,16 +13,6 @@ a:hover {
   cursor:pointer;
 }
 
-ul.dashed {
-  list-style: none;
-  padding: 0;
-
-  li:before {
-    content: "–";
-    padding-right: 5px;
-  }
-}
-
 .heading {
   height: 125px;
   margin: 25px 0;
@@ -42,12 +32,6 @@ ul.dashed {
   }
 }
 
-.ellipsize {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .navbar-default {
   .collapse:not(.in) {
     .navbar-nav > .active {
@@ -75,27 +59,6 @@ ul.dashed {
   margin-bottom: 15px;
 }
 
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  /* Set the fixed height of the footer here */
-  height: 50px;
-  border-top-width: 1px;
-  border-top-style: solid;
-}
-
-.loading:before {
-  .overlay;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.1);
-  content: " ";
-}
-
 .graph {
   position: absolute;
   top: 50px;
@@ -181,16 +144,6 @@ ul.dashed {
   }
 }
 
-.caret.caret-up {
-  content: "";
-  border-top: 0;
-  border-bottom: 4px dashed;
-}
-
-.table.table-morecondensed > tbody > tr > td {
-  padding: 0;
-}
-
 .table-fixed {
   table-layout: fixed;
 }
@@ -216,24 +169,10 @@ ul.dashed {
   }
 }
 
-.btn-condensed {
-  padding: 0px 12px;
-  margin-top: -2px;
-}
-
 .topic-share {
   width: 75px;
 }
 
-revolve-select, [revolve-select] {
-  .noselect;
-  cursor: pointer;
-}
-
-#nprogress .spinner {
-  display: none;
-}
-
 .logo {
   &.hover {
     .logo-shape {
@@ -257,14 +196,6 @@ revolve-select, [revolve-select] {
   outline: none;
 }
 
-.fullheight {
-  height: 100%;
-
-  .row > * {
-    height: 100%;
-  }
-}
-
 .checkbox-condensed {
   margin-top: 0;
   margin-bottom: 0;
@@ -330,6 +261,9 @@ revolve-select, [revolve-select] {
 
   .topic-choice {
     position: absolute;
+    top: 110px;
+    bottom: 0;
+    overflow-y: auto;
 
     label {
       padding-right: 15px;
@@ -358,22 +292,6 @@ input[type=checkbox],
   vertical-align: bottom;
 }
 
-.btn-groups {
-  .btn-group:not(:first-child) {
-    .btn {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
-
-  .btn-group:not(:last-child) {
-    .btn {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-}
-
 .message-container {
   position: relative;
 }
@@ -401,15 +319,6 @@ input[type=checkbox],
   width: 100% !important;
 }
 
-.btn-default-none {
-  &, &:focus, &:hover, &:active {
-    .noselect;
-    background: transparent;
-    cursor: default;
-    box-shadow: none;
-  }
-}
-
 .table-infos {
   th {
     white-space: nowrap;
@@ -423,6 +332,12 @@ input[type=checkbox],
   vertical-align: text-top;
 }
 
+.wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
 @-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); } }