diff --git a/src/browser/modules/DatabaseInfo/DatabaseInfo.jsx b/src/browser/modules/DatabaseInfo/DatabaseInfo.jsx
index b005e4134cf..b110fea9c5b 100644
--- a/src/browser/modules/DatabaseInfo/DatabaseInfo.jsx
+++ b/src/browser/modules/DatabaseInfo/DatabaseInfo.jsx
@@ -18,6 +18,7 @@
* along with this program. If not, see .
*/
+import { Component } from 'preact'
import { connect } from 'preact-redux'
import { withBus } from 'preact-suber'
import { executeCommand } from 'shared/modules/commands/commandsDuck'
@@ -26,19 +27,62 @@ import UserDetails from './UserDetails'
import DatabaseKernelInfo from './DatabaseKernelInfo'
import {Drawer, DrawerBody, DrawerHeader} from 'browser-components/drawer'
-export const DatabaseInfo = ({ labels = [], relationshipTypes = [], properties = [], userDetails, databaseKernelInfo, onItemClick }) => {
- return (
-
- Database Information
-
- l.val)} onItemClick={onItemClick} />
- l.val)} onItemClick={onItemClick} />
- l.val)} onItemClick={onItemClick} />
-
-
-
-
- )
+export class DatabaseInfo extends Component {
+ constructor (props) {
+ super(props)
+ this.state = {
+ moreStep: 50,
+ labelsMax: 50,
+ relationshipsMax: 50,
+ propertiesMax: 50
+ }
+ }
+ onMoreClick (type) {
+ return (num) => {
+ this.setState({ [type + 'Max']: this.state[type + 'Max'] + num })
+ }
+ }
+ render () {
+ const {
+ labels = [],
+ relationshipTypes = [],
+ properties = [],
+ userDetails,
+ databaseKernelInfo,
+ onItemClick
+ } = this.props
+
+ return (
+
+ Database Information
+
+ l.val)}
+ totalNumItems={labels.length}
+ onItemClick={onItemClick}
+ onMoreClick={this.onMoreClick.bind(this)('labels')}
+ moreStep={this.state.moreStep}
+ />
+ l.val)}
+ onItemClick={onItemClick}
+ totalNumItems={relationshipTypes.length}
+ onMoreClick={this.onMoreClick.bind(this)('relationships')}
+ moreStep={this.state.moreStep}
+ />
+ l.val)}
+ onItemClick={onItemClick}
+ totalNumItems={properties.length}
+ onMoreClick={this.onMoreClick.bind(this)('properties')}
+ moreStep={this.state.moreStep}
+ />
+
+
+
+
+ )
+ }
}
const mapStateToProps = (state) => {
diff --git a/src/browser/modules/DatabaseInfo/MetaItems.jsx b/src/browser/modules/DatabaseInfo/MetaItems.jsx
index c1ac0b15baa..20a8622c62f 100644
--- a/src/browser/modules/DatabaseInfo/MetaItems.jsx
+++ b/src/browser/modules/DatabaseInfo/MetaItems.jsx
@@ -22,7 +22,21 @@ import { ecsapeCypherMetaItem } from 'services/utils'
import classNames from 'classnames'
import styles from './style_meta.css'
import {DrawerSubHeader, DrawerSection, DrawerSectionBody} from 'browser-components/drawer'
-import {StyledLabel, StyledRelationship, StyledProperty} from './styled'
+import { StyledLabel, StyledRelationship, StyledProperty, StyledShowMoreContainer, StyledShowMoreLink } from './styled'
+import Visible from 'browser-components/Visible'
+
+const ShowMore = ({ total, shown, moreStep, onMore }) => {
+ const numMore = total - shown > moreStep ? moreStep : total - shown
+ return (
+
+
+ onMore(numMore)}>Show {numMore} more
+ |
+ onMore(total)}>Show all
+
+
+ )
+}
const createItems = (originalList, onItemClick, RenderType, editorCommandTemplate, showStar = true) => {
let items = [...originalList]
@@ -40,9 +54,9 @@ const createItems = (originalList, onItemClick, RenderType, editorCommandTemplat
)
})
}
-const LabelItems = ({labels, onItemClick}) => {
+const LabelItems = ({labels, totalNumItems, onItemClick, moreStep, onMoreClick}) => {
let labelItems =
There are no labels in database
- if (labels.length > 0) {
+ if (labels.length) {
const editorCommandTemplate = (text) => {
if (text === '*') {
return 'MATCH (n) RETURN n LIMIT 25'
@@ -59,10 +73,11 @@ const LabelItems = ({labels, onItemClick}) => {
})}>
{labelItems}
+
)
}
-const RelationshipItems = ({relationshipTypes, onItemClick}) => {
+const RelationshipItems = ({relationshipTypes, totalNumItems, onItemClick, moreStep, onMoreClick}) => {
let relationshipItems = No relationships in database
if (relationshipTypes.length > 0) {
const editorCommandTemplate = (text) => {
@@ -81,10 +96,11 @@ const RelationshipItems = ({relationshipTypes, onItemClick}) => {
})}>
{relationshipItems}
+
)
}
-const PropertyItems = ({properties, onItemClick}) => {
+const PropertyItems = ({properties, totalNumItems, onItemClick, moreStep, onMoreClick}) => {
let propertyItems = There are no properties in database
if (properties.length > 0) {
const editorCommandTemplate = (text) => {
@@ -100,6 +116,7 @@ const PropertyItems = ({properties, onItemClick}) => {
})}>
{propertyItems}
+
)
}
diff --git a/src/browser/modules/DatabaseInfo/styled.jsx b/src/browser/modules/DatabaseInfo/styled.jsx
index c351e7643c5..4453f9118b6 100644
--- a/src/browser/modules/DatabaseInfo/styled.jsx
+++ b/src/browser/modules/DatabaseInfo/styled.jsx
@@ -93,3 +93,12 @@ export const Link = (props) => {
const {children, ...rest} = props
return {children}
}
+
+export const StyledShowMoreContainer = styled.div`
+ margin-top: 10px;
+`
+
+export const StyledShowMoreLink = styled.span`
+ cursor: pointer;
+ color: ${props => props.theme.link};
+`