Paginate the table row data (#100)

To prevent excessive network calls, this commit caches the retrieved
table rows into a `Map` of pages. It will fetch the total cache factor,
which is the amount of pages a user wishes to retrieve per request.

The cache is not currently limited to a max size, and is busted with
every new query.

The user now has 3 options for navigating the table forwards or backwards.

1. next/previous page
2. first/last page
3. direct page number input

The page navigation click events are debounced. This prevents having the user
wait on the results of fetching new results when they reach a page that
is not cached.

Closes: #99

Squashed commits:
* Display row count information
* Start a cache from the initial table row results
* Navigate forward if page exists in the cache
* Navigate backwards if page exists in the cache
* Fetch next set of rows when navigating forward and page not cached
* Reset the page number when updating the query
* Enable changing pages by inputting a number
* Display total number of pages
* Add buttons to skip to 1st and last page
* Fetch next set of rows when navigating backward and page not cached
* Bust the cache when fetching new queries
* Debounce successive page navigation click events

Author: JM-Mendez

.babelrc

@@ -1,5 +1,15 @@
 // This file is only used from the command line for packages that require it
 // like stylelint. It must be kept in sync with craco's modifications of create-react-app
 {
-	"presets": ["react-app"]
+	"presets": ["react-app"],
+	"plugins": [
+		[
+			"import",
+			{
+				"libraryName": "react-use",
+				"libraryDirectory": "lib",
+				"camel2DashComponentName": false
+			}
+		]
+	]
 }

craco.config.js

@@ -14,7 +14,17 @@ const emotionBabelPreset = require('@emotion/babel-preset-css-prop').default(
 
 module.exports = {
 	babel: {
-		plugins: [...emotionBabelPreset.plugins],
+		plugins: [
+			...emotionBabelPreset.plugins,
+			[
+				'import',
+				{
+					libraryName: 'react-use',
+					libraryDirectory: 'lib',
+					camel2DashComponentName: false,
+				},
+			],
+		],
 	},
 	typescript: {
 		enableTypeChecking: false,

package.json

@@ -49,6 +49,7 @@
 		"nanoid-dictionary": "^3.0.0",
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",
+		"react-use": "^15.3.2",
 		"react-window": "^1.8.5",
 		"recharts": "^1.8.5",
 		"underscore.string": "^3.3.5",
@@ -73,6 +74,7 @@
 		"@typescript-eslint/parser": "2.x",
 		"@xstate/test": "^0.4.0",
 		"babel-eslint": "10.x",
+		"babel-plugin-import": "^1.13.0",
 		"babel-preset-react-app": "^9.1.2",
 		"concurrently": "^5.2.0",
 		"cross-env": "^7.0.2",

src/actionConstants.js

@@ -38,3 +38,8 @@ export const SET_INITIAL_ORGANISMS = 'pieChart/fetch/initial'
  */
 export const CHANGE_MINE = 'supervisor/mine/change'
 export const CHANGE_CLASS = 'supervisor/class/change'
+
+/**
+ * Table
+ */
+export const CHANGE_PAGE = 'table/page/change'

src/blueprintIcons.js

@@ -16,6 +16,8 @@ exports.usedIcons = [
 	IconNames.ARCHIVE,
 	IconNames.CHEVRON_BACKWARD,
 	IconNames.CHEVRON_FORWARD,
+	IconNames.CHEVRON_LEFT,
+	IconNames.CHEVRON_RIGHT,
 	IconNames.WARNING_SIGN,
 	IconNames.REMOVE,
 	IconNames.DELETE,

src/components/App.jsx

@@ -2,6 +2,7 @@
 import '@emotion/core'
 
 import { assign } from '@xstate/immer'
+import { enableMapSet } from 'immer'
 import React, { useEffect } from 'react'
 import { CHANGE_CLASS, CHANGE_MINE, FETCH_INITIAL_SUMMARY } from 'src/actionConstants'
 import { fetchClasses, fetchInstances } from 'src/fetchSummary'
@@ -12,6 +13,10 @@ import { ConstraintSection } from './Layout/ConstraintSection'
 import { ChartSection, TableSection } from './Layout/DataVizSection'
 import { Header } from './Layout/Header'
 
+enableMapSet()
+
+const isProduction = process.env.NODE_ENV === 'production'
+
 const supervisorMachine = Machine(
 	{
 		id: 'Supervisor',
@@ -21,8 +26,10 @@ const supervisorMachine = Machine(
 			intermines: [],
 			modelClasses: [],
 			selectedMine: {
-				rootUrl: 'https://www.humanmine.org/humanmine',
-				name: 'HumanMine',
+				name: isProduction ? 'HumanMine' : 'biotestmine',
+				rootUrl: isProduction
+					? 'https://www.humanmine.org/humanmine'
+					: 'http://localhost:9999/biotestmine',
 			},
 		},
 		states: {

src/components/DataViz/DataViz.story.jsx

@@ -65,7 +65,9 @@ PieChart.parameters = {
 	},
 }
 
+// @ts-ignore
 const tableMockMachine = TableChartMachine.withContext({
+	// @ts-ignore
 	rows: humanMine25,
 	mineUrl,
 })