Fix: Aphrodite UI enhancements

* New: Display UI before movies have loaded

* Revised webpack bundling

* New: Option for production build with profiling

* Fixed: Faster hasDifferentItems and specialized OrOrder version

* Fixed: Faster movie selector

* Fixed: Speed up release processing, add indices (migration 161)

* Fixed: Use a worker for UI fuzzy search

* Fixed: Don't loop over all movies if we know none selected

* Fixed: Strip UrlBase from UI events before sending to sentry

Should mean that source maps are picked up correctly.

* Better selection of jump bar items

Show first, last and most common items

* Fixed: Don't repeatedly re-render cells

* Rework Movie Index and virtualTable

* Corresponding improvements for AddListMovie and ImportMovie

frontend/src/Components/Page/Header/MovieSearchInput.js

@@ -1,29 +1,18 @@
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Autosuggest from 'react-autosuggest';
-import Fuse from 'fuse.js';
 import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import keyboardShortcuts, { shortcuts } from 'Components/keyboardShortcuts';
 import MovieSearchResult from './MovieSearchResult';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FuseWorker from './fuse.worker';
 import styles from './MovieSearchInput.css';
 
+const LOADING_TYPE = 'suggestionsLoading';
 const ADD_NEW_TYPE = 'addNew';
-
-const fuseOptions = {
-  shouldSort: true,
-  includeMatches: true,
-  threshold: 0.3,
-  location: 0,
-  distance: 100,
-  maxPatternLength: 32,
-  minMatchCharLength: 1,
-  keys: [
-    'title',
-    'alternateTitles.title',
-    'tags.label'
-  ]
-};
+const workerInstance = new FuseWorker();
 
 class MovieSearchInput extends Component {
 
@@ -43,6 +32,7 @@ class MovieSearchInput extends Component {
 
   componentDidMount() {
     this.props.bindShortcut(shortcuts.MOVIE_SEARCH_INPUT.key, this.focusInput);
+    workerInstance.addEventListener('message', this.onSuggestionsReceived, false);
   }
 
   //
@@ -82,6 +72,12 @@ class MovieSearchInput extends Component {
       );
     }
 
+    if (item.type === LOADING_TYPE) {
+      return (
+        <LoadingIndicator />
+      );
+    }
+
     return (
       <MovieSearchResult
         {...item.item}
@@ -128,7 +124,7 @@ class MovieSearchInput extends Component {
       highlightedSuggestionIndex
     } = this._autosuggest.state;
 
-    if (!suggestions.length || highlightedSectionIndex) {
+    if (!suggestions.length || suggestions[0].type === LOADING_TYPE || highlightedSectionIndex) {
       this.props.onGoToAddNewMovie(value);
       this._autosuggest.input.blur();
       this.reset();
@@ -154,35 +150,30 @@ class MovieSearchInput extends Component {
   }
 
   onSuggestionsFetchRequested = ({ value }) => {
-    const { movies } = this.props;
-    let suggestions = [];
-
-    if (value.length === 1) {
-      suggestions = movies.reduce((acc, s) => {
-        if (s.firstCharacter === value.toLowerCase()) {
-          acc.push({
-            item: s,
-            indices: [
-              [0, 0]
-            ],
-            matches: [
-              {
-                value: s.title,
-                key: 'title'
-              }
-            ],
-            arrayIndex: 0
-          });
+    this.setState({
+      suggestions: [
+        {
+          type: LOADING_TYPE,
+          title: value
         }
+      ]
+    });
+    this.requestSuggestions(value);
+  };
 
-        return acc;
-      }, []);
-    } else {
-      const fuse = new Fuse(movies, fuseOptions);
-      suggestions = fuse.search(value);
-    }
+  requestSuggestions = _.debounce((value) => {
+    const payload = {
+      value,
+      movies: this.props.movies
+    };
 
-    this.setState({ suggestions });
+    workerInstance.postMessage(payload);
+  }, 250);
+
+  onSuggestionsReceived = (message) => {
+    this.setState({
+      suggestions: message.data
+    });
   }
 
   onSuggestionsClearRequested = () => {

frontend/src/Components/Page/Header/fuse.worker.js

@@ -0,0 +1,63 @@
+import Fuse from 'fuse.js';
+
+const fuseOptions = {
+  shouldSort: true,
+  includeMatches: true,
+  threshold: 0.3,
+  location: 0,
+  distance: 100,
+  maxPatternLength: 32,
+  minMatchCharLength: 1,
+  keys: [
+    'title',
+    'alternateTitles.title',
+    'tags.label'
+  ]
+};
+
+function getSuggestions(movies, value) {
+  const limit = 10;
+  let suggestions = [];
+
+  if (value.length === 1) {
+    for (let i = 0; i < movies.length; i++) {
+      const s = movies[i];
+      if (s.firstCharacter === value.toLowerCase()) {
+        suggestions.push({
+          item: movies[i],
+          indices: [
+            [0, 0]
+          ],
+          matches: [
+            {
+              value: s.title,
+              key: 'title'
+            }
+          ],
+          arrayIndex: 0
+        });
+        if (suggestions.length > limit) {
+          break;
+        }
+      }
+    }
+  } else {
+    const fuse = new Fuse(movies, fuseOptions);
+    suggestions = fuse.search(value, { limit });
+  }
+
+  return suggestions;
+}
+
+self.addEventListener('message', (e) => {
+  if (!e) {
+    return;
+  }
+
+  const {
+    movies,
+    value
+  } = e.data;
+
+  self.postMessage(getSuggestions(movies, value));
+});

frontend/src/Components/Page/PageConnector.js

@@ -43,7 +43,6 @@ const selectAppProps = createSelector(
 );
 
 const selectIsPopulated = createSelector(
-  (state) => state.movies.isPopulated,
   (state) => state.customFilters.isPopulated,
   (state) => state.tags.isPopulated,
   (state) => state.settings.ui.isPopulated,
@@ -51,7 +50,6 @@ const selectIsPopulated = createSelector(
   (state) => state.settings.languages.isPopulated,
   (state) => state.system.status.isPopulated,
   (
-    moviesIsPopulated,
     customFiltersIsPopulated,
     tagsIsPopulated,
     uiSettingsIsPopulated,
@@ -60,7 +58,6 @@ const selectIsPopulated = createSelector(
     systemStatusIsPopulated
   ) => {
     return (
-      moviesIsPopulated &&
       customFiltersIsPopulated &&
       tagsIsPopulated &&
       uiSettingsIsPopulated &&
@@ -72,7 +69,6 @@ const selectIsPopulated = createSelector(
 );
 
 const selectErrors = createSelector(
-  (state) => state.movies.error,
   (state) => state.customFilters.error,
   (state) => state.tags.error,
   (state) => state.settings.ui.error,
@@ -80,7 +76,6 @@ const selectErrors = createSelector(
   (state) => state.settings.languages.error,
   (state) => state.system.status.error,
   (
-    moviesError,
     customFiltersError,
     tagsError,
     uiSettingsError,
@@ -89,7 +84,6 @@ const selectErrors = createSelector(
     systemStatusError
   ) => {
     const hasError = !!(
-      moviesError ||
       customFiltersError ||
       tagsError ||
       uiSettingsError ||
@@ -100,7 +94,6 @@ const selectErrors = createSelector(
 
     return {
       hasError,
-      moviesError,
       customFiltersError,
       tagsError,
       uiSettingsError,

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;

frontend/src/Components/Scroller/OverlayScroller.js

@@ -37,6 +37,10 @@ class OverlayScroller extends Component {
 
   _setScrollRef = (ref) => {
     this._scroller = ref;
+
+    if (ref) {
+      this.props.registerScroller(ref.view);
+    }
   }
 
   _renderThumb = (props) => {
@@ -157,7 +161,8 @@ OverlayScroller.propTypes = {
   autoHide: PropTypes.bool.isRequired,
   autoScroll: PropTypes.bool.isRequired,
   children: PropTypes.node,
-  onScroll: PropTypes.func
+  onScroll: PropTypes.func,
+  registerScroller: PropTypes.func
 };
 
 OverlayScroller.defaultProps = {
@@ -165,7 +170,8 @@ OverlayScroller.defaultProps = {
   trackClassName: styles.thumb,
   scrollDirection: scrollDirections.VERTICAL,
   autoHide: false,
-  autoScroll: true
+  autoScroll: true,
+  registerScroller: () => {}
 };
 
 export default OverlayScroller;

frontend/src/Components/Scroller/Scroller.js

@@ -30,6 +30,8 @@ class Scroller extends Component {
 
   _setScrollerRef = (ref) => {
     this._scroller = ref;
+
+    this.props.registerScroller(ref);
   }
 
   //
@@ -43,6 +45,7 @@ class Scroller extends Component {
       children,
       scrollTop,
       onScroll,
+      registerScroller,
       ...otherProps
     } = this.props;
 
@@ -70,12 +73,14 @@ Scroller.propTypes = {
   autoScroll: PropTypes.bool.isRequired,
   scrollTop: PropTypes.number,
   children: PropTypes.node,
-  onScroll: PropTypes.func
+  onScroll: PropTypes.func,
+  registerScroller: PropTypes.func
 };
 
 Scroller.defaultProps = {
   scrollDirection: scrollDirections.VERTICAL,
-  autoScroll: true
+  autoScroll: true,
+  registerScroller: () => {}
 };
 
 export default Scroller;

frontend/src/Components/Table/VirtualTable.css

@@ -1,3 +1,7 @@
 .tableContainer {
   width: 100%;
 }
+
+.tableBodyContainer {
+  position: relative;
+}

frontend/src/Components/Table/VirtualTable.js

@@ -1,12 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { WindowScroller } from 'react-virtualized';
-import { isLocked } from 'Utilities/scrollLock';
 import { scrollDirections } from 'Helpers/Props';
 import Measure from 'Components/Measure';
 import Scroller from 'Components/Scroller/Scroller';
-import VirtualTableBody from './VirtualTableBody';
+import { WindowScroller, Grid } from 'react-virtualized';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import styles from './VirtualTable.css';
 
 const ROW_HEIGHT = 38;
@@ -44,28 +42,39 @@ class VirtualTable extends Component {
       width: 0
     };
 
-    this._isInitialized = false;
+    this._grid = null;
   }
 
-  componentDidMount() {
-    this._contentBodyNode = ReactDOM.findDOMNode(this.props.contentBody);
-  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      items,
+      scrollIndex
+    } = this.props;
 
-  componentDidUpdate(prevProps, preState) {
-    const scrollIndex = this.props.scrollIndex;
+    const {
+      width
+    } = this.state;
+
+    if (this._grid &&
+        (prevState.width !== width ||
+            hasDifferentItemsOrOrder(prevProps.items, items))) {
+      // recomputeGridSize also forces Grid to discard its cache of rendered cells
+      this._grid.recomputeGridSize();
+    }
 
     if (scrollIndex != null && scrollIndex !== prevProps.scrollIndex) {
-      const scrollTop = (scrollIndex + 1) * ROW_HEIGHT + 20;
-
-      this.props.onScroll({ scrollTop });
+      this._grid.scrollToCell({
+        rowIndex: scrollIndex,
+        columnIndex: 0
+      });
     }
   }
 
   //
   // Control
 
-  rowGetter = ({ index }) => {
-    return this.props.items[index];
+  setGridRef = (ref) => {
+    this._grid = ref;
   }
 
   //
@@ -77,36 +86,18 @@ class VirtualTable extends Component {
     });
   }
 
-  onSectionRendered = () => {
-    if (!this._isInitialized && this._contentBodyNode) {
-      this.props.onRender();
-      this._isInitialized = true;
-    }
-  }
-
-  onScroll = (props) => {
-    if (isLocked()) {
-      return;
-    }
-
-    const { onScroll } = this.props;
-
-    onScroll(props);
-  }
-
   //
   // Render
 
   render() {
     const {
+      isSmallScreen,
       className,
       items,
-      isSmallScreen,
+      scroller,
       header,
       headerHeight,
-      scrollTop,
       rowRenderer,
-      onScroll,
       ...otherProps
     } = this.props;
 
@@ -114,65 +105,88 @@ class VirtualTable extends Component {
       width
     } = this.state;
 
+    const gridStyle = {
+      boxSizing: undefined,
+      direction: undefined,
+      height: undefined,
+      position: undefined,
+      willChange: undefined,
+      overflow: undefined,
+      width: undefined
+    };
+
+    const containerStyle = {
+      position: undefined
+    };
+
     return (
-      <Measure onMeasure={this.onMeasure}>
-        <WindowScroller
-          scrollElement={isSmallScreen ? undefined : this._contentBodyNode}
-          onScroll={this.onScroll}
-        >
-          {({ height, isScrolling }) => {
-            return (
+      <WindowScroller
+        scrollElement={isSmallScreen ? undefined : scroller}
+      >
+        {({ height, registerChild, onChildScroll, scrollTop }) => {
+          if (!height) {
+            return null;
+          }
+          return (
+            <Measure
+              whitelist={['width']}
+              onMeasure={this.onMeasure}
+            >
               <Scroller
                 className={className}
                 scrollDirection={scrollDirections.HORIZONTAL}
               >
                 {header}
-
-                <VirtualTableBody
-                  autoContainerWidth={true}
-                  width={width}
-                  height={height}
-                  headerHeight={height - headerHeight}
-                  rowHeight={ROW_HEIGHT}
-                  rowCount={items.length}
-                  columnCount={1}
-                  scrollTop={scrollTop}
-                  autoHeight={true}
-                  overscanRowCount={2}
-                  cellRenderer={rowRenderer}
-                  columnWidth={width}
-                  overscanIndicesGetter={overscanIndicesGetter}
-                  onSectionRendered={this.onSectionRendered}
-                  {...otherProps}
-                />
+                <div ref={registerChild}>
+                  <Grid
+                    ref={this.setGridRef}
+                    autoContainerWidth={true}
+                    autoHeight={true}
+                    autoWidth={true}
+                    width={width}
+                    height={height}
+                    headerHeight={height - headerHeight}
+                    rowHeight={ROW_HEIGHT}
+                    rowCount={items.length}
+                    columnCount={1}
+                    columnWidth={width}
+                    scrollTop={scrollTop}
+                    onScroll={onChildScroll}
+                    overscanRowCount={2}
+                    cellRenderer={rowRenderer}
+                    overscanIndicesGetter={overscanIndicesGetter}
+                    scrollToAlignment={'start'}
+                    isScrollingOptout={true}
+                    className={styles.tableBodyContainer}
+                    style={gridStyle}
+                    containerStyle={containerStyle}
+                    {...otherProps}
+                  />
+                </div>
               </Scroller>
-            );
-          }
-          }
-        </WindowScroller>
-      </Measure>
+            </Measure>
+          );
+        }
+        }
+      </WindowScroller>
     );
   }
 }
 
 VirtualTable.propTypes = {
+  isSmallScreen: PropTypes.bool.isRequired,
   className: PropTypes.string.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  scrollTop: PropTypes.number.isRequired,
   scrollIndex: PropTypes.number,
-  contentBody: PropTypes.object.isRequired,
-  isSmallScreen: PropTypes.bool.isRequired,
+  scroller: PropTypes.instanceOf(Element).isRequired,
   header: PropTypes.node.isRequired,
   headerHeight: PropTypes.number.isRequired,
-  rowRenderer: PropTypes.func.isRequired,
-  onRender: PropTypes.func.isRequired,
-  onScroll: PropTypes.func.isRequired
+  rowRenderer: PropTypes.func.isRequired
 };
 
 VirtualTable.defaultProps = {
   className: styles.tableContainer,
-  headerHeight: 38,
-  onRender: () => {}
+  headerHeight: 38
 };
 
 export default VirtualTable;

frontend/src/Components/Table/VirtualTableBody.css

@@ -1,3 +0,0 @@
-.tableBodyContainer {
-  position: relative;
-}

frontend/src/Components/Table/VirtualTableBody.js

@@ -1,40 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { Grid } from 'react-virtualized';
-import styles from './VirtualTableBody.css';
-
-class VirtualTableBody extends Component {
-
-  //
-  // Render
-
-  render() {
-    return (
-      <Grid
-        {...this.props}
-        style={{
-          boxSizing: undefined,
-          direction: undefined,
-          height: undefined,
-          position: undefined,
-          willChange: undefined,
-          overflow: undefined,
-          width: undefined
-        }}
-        containerStyle={{
-          position: undefined
-        }}
-      />
-    );
-  }
-}
-
-VirtualTableBody.propTypes = {
-  className: PropTypes.string.isRequired
-};
-
-VirtualTableBody.defaultProps = {
-  className: styles.tableBodyContainer
-};
-
-export default VirtualTableBody;