Better selection of jump bar items

Show first, last and most common items

frontend/src/Components/Page/PageJumpBar.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import dimensions from 'Styles/Variables/dimensions';
@@ -18,7 +17,7 @@ class PageJumpBar extends Component {
 
     this.state = {
       height: 0,
-      visibleItems: props.items
+      visibleItems: props.items.order
     };
   }
 
@@ -52,29 +51,47 @@ class PageJumpBar extends Component {
       minimumItems
     } = this.props;
 
+    if (!items) {
+      return;
+    }
+
+    const {
+      characters,
+      order
+    } = items;
+
     const height = this.state.height;
     const maximumItems = Math.floor(height / ITEM_HEIGHT);
-    const diff = items.length - maximumItems;
+    const diff = order.length - maximumItems;
 
     if (diff < 0) {
-      this.setState({ visibleItems: items });
+      this.setState({ visibleItems: order });
       return;
     }
 
-    if (items.length < minimumItems) {
-      this.setState({ visibleItems: items });
+    if (order.length < minimumItems) {
+      this.setState({ visibleItems: order });
       return;
     }
 
-    const removeDiff = Math.ceil(items.length / maximumItems);
+    // get first, last, and most common in between to make up numbers
+    const visibleItems = [order[0]];
 
-    const visibleItems = _.reduce(items, (acc, item, index) => {
-      if (index % removeDiff === 0) {
-        acc.push(item);
+    const sorted = order.slice(1, -1).map((x) => characters[x]).sort((a, b) => b - a);
+    const minCount = sorted[maximumItems - 3];
+    const greater = sorted.reduce((acc, value) => acc + (value > minCount ? 1 : 0), 0);
+    let minAllowed = maximumItems - 2 - greater;
+
+    for (let i = 1; i < order.length - 1; i++) {
+      if (characters[order[i]] > minCount) {
+        visibleItems.push(order[i]);
+      } else if (characters[order[i]] === minCount && minAllowed > 0) {
+        visibleItems.push(order[i]);
+        minAllowed--;
       }
+    }
 
-      return acc;
-    }, []);
+    visibleItems.push(order[order.length - 1]);
 
     this.setState({ visibleItems });
   }
@@ -129,7 +146,7 @@ class PageJumpBar extends Component {
 }
 
 PageJumpBar.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.string).isRequired,
+  items: PropTypes.object.isRequired,
   minimumItems: PropTypes.number.isRequired,
   onItemPress: PropTypes.func.isRequired
 };

frontend/src/Components/Page/PageJumpBarItem.css

@@ -1,5 +1,5 @@
 .jumpBarItem {
-  flex: 1 0 $jumpBarItemHeight;
+  flex: 1 1 $jumpBarItemHeight;
   border-bottom: 1px solid $borderColor;
   text-align: center;
   font-weight: bold;