Limit number of meta items shown in db drawer

src/browser/modules/DatabaseInfo/DatabaseInfo.jsx

@@ -18,6 +18,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+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 (
-    <Drawer id='db-drawer'>
-      <DrawerHeader>Database Information</DrawerHeader>
-      <DrawerBody>
-        <LabelItems labels={labels.map((l) => l.val)} onItemClick={onItemClick} />
-        <RelationshipItems relationshipTypes={relationshipTypes.map((l) => l.val)} onItemClick={onItemClick} />
-        <PropertyItems properties={properties.map((l) => l.val)} onItemClick={onItemClick} />
-        <UserDetails userDetails={userDetails} onItemClick={onItemClick} />
-        <DatabaseKernelInfo databaseKernelInfo={databaseKernelInfo} onItemClick={onItemClick} />
-      </DrawerBody>
-    </Drawer>
-  )
+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 (
+      <Drawer id='db-drawer'>
+        <DrawerHeader>Database Information</DrawerHeader>
+        <DrawerBody>
+          <LabelItems
+            labels={labels.slice(0, this.state.labelsMax).map((l) => l.val)}
+            totalNumItems={labels.length}
+            onItemClick={onItemClick}
+            onMoreClick={this.onMoreClick.bind(this)('labels')}
+            moreStep={this.state.moreStep}
+          />
+          <RelationshipItems
+            relationshipTypes={relationshipTypes.slice(0, this.state.relationshipsMax).map((l) => l.val)}
+            onItemClick={onItemClick}
+            totalNumItems={relationshipTypes.length}
+            onMoreClick={this.onMoreClick.bind(this)('relationships')}
+            moreStep={this.state.moreStep}
+          />
+          <PropertyItems
+            properties={properties.slice(0, this.state.propertiesMax).map((l) => l.val)}
+            onItemClick={onItemClick}
+            totalNumItems={properties.length}
+            onMoreClick={this.onMoreClick.bind(this)('properties')}
+            moreStep={this.state.moreStep}
+          />
+          <UserDetails userDetails={userDetails} onItemClick={onItemClick} />
+          <DatabaseKernelInfo databaseKernelInfo={databaseKernelInfo} onItemClick={onItemClick} />
+        </DrawerBody>
+      </Drawer>
+    )
+  }
 }
 
 const mapStateToProps = (state) => {

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 (
+    <Visible if={shown < total}>
+      <StyledShowMoreContainer>
+        <StyledShowMoreLink onClick={() => onMore(numMore)}>Show {numMore} more</StyledShowMoreLink>
+        &nbsp;|&nbsp;
+        <StyledShowMoreLink onClick={() => onMore(total)}>Show all</StyledShowMoreLink>
+      </StyledShowMoreContainer>
+    </Visible>
+  )
+}
 
 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 = <p>There are no labels in database</p>
-  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}
       </DrawerSectionBody>
+      <ShowMore total={totalNumItems} shown={labels.length} moreStep={moreStep} onMore={onMoreClick} />
     </DrawerSection>
   )
 }
-const RelationshipItems = ({relationshipTypes, onItemClick}) => {
+const RelationshipItems = ({relationshipTypes, totalNumItems, onItemClick, moreStep, onMoreClick}) => {
   let relationshipItems = <p>No relationships in database</p>
   if (relationshipTypes.length > 0) {
     const editorCommandTemplate = (text) => {
@@ -81,10 +96,11 @@ const RelationshipItems = ({relationshipTypes, onItemClick}) => {
       })}>
         {relationshipItems}
       </DrawerSectionBody>
+      <ShowMore total={totalNumItems} shown={relationshipTypes.length} moreStep={moreStep} onMore={onMoreClick} />
     </DrawerSection>
   )
 }
-const PropertyItems = ({properties, onItemClick}) => {
+const PropertyItems = ({properties, totalNumItems, onItemClick, moreStep, onMoreClick}) => {
   let propertyItems = <p>There are no properties in database</p>
   if (properties.length > 0) {
     const editorCommandTemplate = (text) => {
@@ -100,6 +116,7 @@ const PropertyItems = ({properties, onItemClick}) => {
       })}>
         {propertyItems}
       </DrawerSectionBody>
+      <ShowMore total={totalNumItems} shown={properties.length} moreStep={moreStep} onMore={onMoreClick} />
     </DrawerSection>
   )
 }

src/browser/modules/DatabaseInfo/styled.jsx

@@ -93,3 +93,12 @@ export const Link = (props) => {
   const {children, ...rest} = props
   return <StyledLink {...rest}><PlainPlayIcon />&nbsp;{children}</StyledLink>
 }
+
+export const StyledShowMoreContainer = styled.div`
+  margin-top: 10px;
+`
+
+export const StyledShowMoreLink = styled.span`
+  cursor: pointer;
+  color: ${props => props.theme.link};
+`