Implement virtualized view for data grid

appbaseio · Jan 10, 2019 · 8303355 · 8303355
1 parent be25f17
commit 8303355
Show file tree

Hide file tree

Showing 16 changed files with 597 additions and 456 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -3,7 +3,6 @@
 		"dbaeumer.vscode-eslint",
 		"EditorConfig.EditorConfig",
 		"esbenp.prettier-vscode",
-		"wix.vscode-import-cost",
 		"Orta.vscode-jest",
 		"msjsdiag.debugger-for-chrome",
 		"jpoissonnier.vscode-styled-components",

diff --git a/app/src/components/CommonStyles/idField.js b/app/src/components/CommonStyles/idField.js
diff --git a/app/src/components/ConnectApp/ConnectApp.js b/app/src/components/ConnectApp/ConnectApp.js
@@ -265,7 +265,7 @@ class ConnectApp extends Component<Props, State> {
 				url: '',
 			});
 			this.props.history.push({ search: searchQuery });
-			window.location.reload();
+			window.location.reload(true);
 		} else if (appname && url) {
 			if (shouldConnect(pathname, appname)) {
 				this.props.connectApp(appname, url);
@@ -658,26 +658,25 @@ http.cors.allow-credentials: true`}
 										<p>
 											If you are running ElasticSearch via
 											Docker, use the following command:
-											<br />
-											<div
-												style={{
-													background: '#fefefe',
-													padding: '8px',
-												}}
-											>
-												<code>
-													docker run --name es -d -p
-													9200:9200 -e http.port=9200
-													-e http.cors.enabled=true -e
-													http.cors.allow-origin=http://localhost:1358,http://127.0.0.1:1358
-													-e
-													http.cors.allow-headers=X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization
-													-e
-													http.cors.allow-credentials=true
-													docker.elastic.co/elasticsearch/elasticsearch-oss:6.5.2
-												</code>
-											</div>
 										</p>
+										<div
+											style={{
+												background: '#fefefe',
+												padding: '8px',
+											}}
+										>
+											<code>
+												docker run --name es -d -p
+												9200:9200 -e http.port=9200 -e
+												http.cors.enabled=true -e
+												http.cors.allow-origin=http://localhost:1358,http://127.0.0.1:1358
+												-e
+												http.cors.allow-headers=X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization
+												-e
+												http.cors.allow-credentials=true
+												docker.elastic.co/elasticsearch/elasticsearch-oss:6.5.2
+											</code>
+										</div>
 									</div>
 								</React.Fragment>
 							}

diff --git a/app/src/components/DataBrowser/DataBrowser.js b/app/src/components/DataBrowser/DataBrowser.js
@@ -1,16 +1,17 @@
 // @flow
 
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import { ReactiveBase } from '@appbaseio/reactivesearch';
 import { connect } from 'react-redux';
 import { Skeleton } from 'antd';
 import { mediaMin } from '@divyanshu013/media';
+import { AutoSizer } from 'react-virtualized';
 
 import Flex from '../Flex';
 import Actions from './Actions';
 import AddRowModal from './AddRowModal';
 import AddFieldModal from './AddFieldModal';
-import DataTableHeader from './DataTableHeader';
+import DataTableHeader from '../DataTable/DataTableHeader';
 import NestedColumnToggle from './NestedColumnToggle';
 import GlobalSearch from './GlobalSearch';
 import ResultList from './ResultSet';
@@ -40,6 +41,8 @@ type Props = {
 };
 
 class DataBrowser extends Component<Props> {
+	headerRef = createRef();
+
 	componentDidMount() {
 		this.props.fetchMappings();
 	}
@@ -90,29 +93,39 @@ class DataBrowser extends Component<Props> {
 									<GlobalSearch />
 								</div>
 								<div
+									id="result-list"
 									css={{
-										position: 'relative',
+										marginTop: '20px',
+										border: `1px solid ${
+											colors.tableBorderColor
+										}`,
+										borderRadius: 3,
+										width: '100%',
+										height:
+											window.innerHeight -
+											(hideAppSwitcher ? 250 : 350),
+										overflow: 'visible',
 									}}
 								>
-									<div
-										id="result-list"
+									<AutoSizer
 										css={{
-											marginTop: '20px',
-											border: `1px solid ${
-												colors.tableBorderColor
-											}`,
-											borderRadius: 3,
-											widht: '100%',
-											maxHeight:
-												window.innerHeight -
-												(hideAppSwitcher ? 250 : 350),
-											minHeight: 200,
-											overflowX: 'auto',
+											height: '100% !important',
+											width: '100% !important',
 										}}
 									>
-										<DataTableHeader />
-										<ResultList />
-									</div>
+										{({ height, width }) => (
+											<>
+												<DataTableHeader
+													ref={this.headerRef}
+												/>
+												<ResultList
+													height={height}
+													width={width}
+													headerRef={this.headerRef}
+												/>
+											</>
+										)}
+									</AutoSizer>
 								</div>
 							</ReactiveBase>
 						</div>

diff --git a/app/src/components/DataBrowser/ResultSet.js b/app/src/components/DataBrowser/ResultSet.js
@@ -32,6 +32,9 @@ type Props = {
 	onSetUpdatingRow: any => void,
 	mappings: any,
 	appname: string,
+	height: number,
+	width: number,
+	headerRef: any,
 };
 
 const ResultSet = ({
@@ -44,10 +47,12 @@ const ResultSet = ({
 	onSetUpdatingRow,
 	mappings,
 	appname,
+	height,
+	width,
+	headerRef,
 }: Props) => {
 	const { results } = getUrlParams(window.location.search);
 	const currentPage = parseInt(results || 1, 10);
-
 	return (
 		<ReactiveList
 			key={String(reactiveListKey)}
@@ -67,22 +72,21 @@ const ResultSet = ({
 					'typeField',
 				],
 			}}
+			style={{
+				position: 'relative',
+				overflow: 'visible',
+			}}
 			innerClass={{
-				poweredBy: css`
-					display: none;
-				`,
+				poweredBy: css({
+					display: 'none',
+				}),
 				pagination: css({
-					position: 'absolute',
-					bottom: '-100px',
-					right: 0,
+					position: 'fixed',
+					right: 40,
 					zIndex: 105,
 					'.active': {
 						backgroundColor: `${colors.primary} !important`,
 					},
-
-					[mediaMin.medium]: {
-						bottom: '-50px',
-					},
 				}),
 			}}
 			loader={
@@ -113,6 +117,9 @@ const ResultSet = ({
 						key={data.length ? data[0]._id : '0'}
 						data={data}
 						mappings={mappings[appname]}
+						height={height}
+						width={width}
+						headerRef={headerRef}
 					/>
 				) : null
 			}
@@ -125,13 +132,13 @@ const ResultSet = ({
 						[mediaMin.medium]: {
 							display: 'block',
 							position: 'absolute',
-							bottom: '-45px',
-							right: '330px',
+							right: '390px',
 							height: '32px',
 							fontSize: '14px',
 							padding: '0 15px',
 							lineHeight: '1.5',
 							textAlign: 'center',
+							bottom: -45,
 						},
 					}}
 				>

diff --git a/...omponents/DataBrowser/DataColumnHeader.js → app/src/components/DataTable/ColumnHeader.js b/...omponents/DataBrowser/DataColumnHeader.js → app/src/components/DataTable/ColumnHeader.js
@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Popover } from 'antd';
 
-import StyledCell from '../DataTable/StyledCell';
+import StyledCell from './StyledCell';
 import MappingsDropdown from '../MappingsDropdown';
 import TermFilter from './TermFilter';
 import Flex from '../Flex';
@@ -20,6 +20,7 @@ import { getIsShowingNestedColumns } from '../../reducers/nestedColumns';
 import { setSort } from '../../actions';
 import overflowStyles from '../CommonStyles/overflowText';
 import filterIconStyles from '../CommonStyles/filterIcons';
+import colors from '../theme/colors';
 
 type Props = {
 	mappings: any,
@@ -95,7 +96,9 @@ class DataColumnHeader extends Component<Props> {
 		);
 		if (mappings) {
 			return (
-				<StyledCell>
+				<StyledCell
+					css={{ background: colors.tableHead, fontWeight: 'bold' }}
+				>
 					<Flex
 						justifyContent="space-between"
 						alignItems="center"