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}; +`