Separate metadata count query (#1840)

* Seperate metadata count query

* Update styles

* update snapshots

* Update src/browser/modules/DBMSInfo/DBMSInfo.tsx

Co-authored-by: Oskar Damkjaer <[email protected]>

* Update src/shared/modules/dbMeta/dbMetaDuck.ts

Co-authored-by: Oskar Damkjaer <[email protected]>

* remove console.log

* change name of function

* fix spelling

Co-authored-by: Oskar Damkjaer <[email protected]>

Author: noahmay

src/browser/components/TabNavigation/Navigation.tsx

@@ -66,13 +66,15 @@ interface NavigationState {
   transitionState: DrawerTransitionState
   closingDrawerName: string | null
   guideWidth: number
+  isResizing: boolean
 }
 
 class Navigation extends Component<NavigationProps, NavigationState> {
   state: NavigationState = {
     transitionState: this.props.selectedDrawerName ? Open : Closed,
     closingDrawerName: null,
-    guideWidth: LARGE_DRAWER_WIDTH
+    guideWidth: LARGE_DRAWER_WIDTH,
+    isResizing: false
   }
 
   componentDidUpdate(
@@ -180,10 +182,10 @@ class Navigation extends Component<NavigationProps, NavigationState> {
     const drawerWidth = guideDrawerSelected
       ? this.state.guideWidth
       : STANDARD_DRAWER_WIDTH
-    const useFullWidth =
+    const isOpenOrOpening =
       this.state.transitionState === Open ||
       this.state.transitionState === Opening
-    const width = useFullWidth ? drawerWidth : 0
+    const width = isOpenOrOpening ? drawerWidth : 0
 
     return (
       <StyledSidebar>
@@ -192,32 +194,43 @@ class Navigation extends Component<NavigationProps, NavigationState> {
           <StyledBottomNav>{bottomNavItemsList}</StyledBottomNav>
         </StyledTabsWrapper>
 
-        <Resizable
-          minWidth={guideDrawerSelected ? STANDARD_DRAWER_WIDTH : 0}
-          maxWidth={'70vw'}
-          size={{ width: width, height: '100%' }}
-          onResizeStop={(_e, _direction, _ref, d) => {
-            this.setState({ guideWidth: this.state.guideWidth + d.width })
+        <StyledDrawer
+          onTransitionEnd={this.onTransitionEnd}
+          style={{
+            width: this.state.isResizing ? 'unset' : width
           }}
-          enable={{
-            top: false,
-            right: guideDrawerSelected,
-            bottom: false,
-            left: false,
-            topRight: false,
-            bottomRight: false,
-            bottomLeft: false,
-            topLeft: false
-          }}
-          style={{ zIndex: 100 }}
         >
-          <StyledDrawer onTransitionEnd={this.onTransitionEnd}>
+          <Resizable
+            minWidth={guideDrawerSelected ? STANDARD_DRAWER_WIDTH : 0}
+            maxWidth={'70vw'}
+            size={{ width: width, height: '100%' }}
+            onResizeStart={() => {
+              this.setState({ isResizing: true })
+            }}
+            onResizeStop={(_e, _direction, _ref, d) => {
+              this.setState({
+                guideWidth: this.state.guideWidth + d.width,
+                isResizing: false
+              })
+            }}
+            enable={{
+              top: false,
+              right: guideDrawerSelected,
+              bottom: false,
+              left: false,
+              topRight: false,
+              bottomRight: false,
+              bottomLeft: false,
+              topLeft: false
+            }}
+            style={{ zIndex: 100 }}
+          >
             {drawerIsVisible &&
               getContentToShow(
                 this.props.selectedDrawerName || this.state.closingDrawerName
               )}
-          </StyledDrawer>
-        </Resizable>
+          </Resizable>
+        </StyledDrawer>
       </StyledSidebar>
     )
   }

src/browser/modules/DBMSInfo/DBMSInfo.tsx

@@ -28,6 +28,7 @@ import { UserDetails } from './UserDetails'
 import {
   Drawer,
   DrawerBody,
+  DrawerExternalLink,
   DrawerHeader
 } from 'browser-components/drawer/drawer-styled'
 import {
@@ -37,8 +38,14 @@ import {
 } from 'shared/modules/commands/commandsDuck'
 import { getUseDb } from 'shared/modules/connections/connectionsDuck'
 import { getCurrentUser } from 'shared/modules/currentUser/currentUserDuck'
-import { getDatabases } from 'shared/modules/dbMeta/dbMetaDuck'
+import {
+  forceCount,
+  getCountAutomaticRefreshLoading,
+  getCountAutomaticRefreshEnabled,
+  getDatabases
+} from 'shared/modules/dbMeta/dbMetaDuck'
 import { getGraphStyleData } from 'shared/modules/grass/grassDuck'
+import { Button } from '@neo4j-ndl/react'
 
 export function DBMSInfo(props: any): JSX.Element {
   const moreStep = 50
@@ -77,6 +84,23 @@ export function DBMSInfo(props: any): JSX.Element {
           selectedDb={useDb}
           onChange={onDbSelect}
         />
+        {!props.countAutoRefreshing && (
+          <>
+            <p>
+              Automatic updates of node and relationship counts have been
+              disabled for performance reasons, likely due to{' '}
+              <DrawerExternalLink href="https://neo4j.com/docs/cypher-manual/current/access-control/limitations/#access-control-limitations-db-operations">
+                RBAC configuration.
+              </DrawerExternalLink>
+            </p>
+            <Button
+              loading={props.countLoading}
+              onClick={() => props.forceCount()}
+            >
+              Refresh counts
+            </Button>
+          </>
+        )}
         <LabelItems
           count={nodes}
           labels={labels.slice(0, maxLabelsCount)}
@@ -115,12 +139,16 @@ export function DBMSInfo(props: any): JSX.Element {
 const mapStateToProps = (state: any) => {
   const useDb = getUseDb(state)
   const databases = getDatabases(state)
+  const countAutoRefreshing = getCountAutomaticRefreshEnabled(state)
+  const countLoading = getCountAutomaticRefreshLoading(state)
   return {
     graphStyleData: getGraphStyleData(state),
     meta: state.meta,
     user: getCurrentUser(state),
     useDb,
-    databases
+    databases,
+    countAutoRefreshing,
+    countLoading
   }
 }
 const mapDispatchToProps = (dispatch: any, ownProps: any) => {
@@ -129,6 +157,9 @@ const mapDispatchToProps = (dispatch: any, ownProps: any) => {
       const action = executeCommand(cmd, { source: commandSources.button })
       ownProps.bus.send(action.type, action)
     },
+    forceCount: () => {
+      dispatch(forceCount())
+    },
     onDbSelect: (dbName: any) =>
       dispatch(executeCommand(`:${useDbCommand} ${dbName || ''}`), {
         source: commandSources.button

src/shared/modules/dbMeta/__snapshots__/dbMetaDuck.test.ts.snap

@@ -2,6 +2,10 @@
 
 exports[`hydrating state can CLEAR to reset state 1`] = `
 Object {
+  "countAutomaticRefresh": Object {
+    "enabled": true,
+    "loading": false,
+  },
   "databases": Array [],
   "functions": Array [],
   "labels": Array [],
@@ -62,6 +66,10 @@ Object {
 
 exports[`hydrating state should merge inital state and state on load 1`] = `
 Object {
+  "countAutomaticRefresh": Object {
+    "enabled": true,
+    "loading": false,
+  },
   "databases": Array [],
   "foo": "bar",
   "functions": Array [],

src/shared/modules/dbMeta/dbMetaDuck.ts

@@ -31,12 +31,16 @@ export const UPDATE_SETTINGS = 'meta/UPDATE_SETTINGS'
 export const CLEAR_META = 'meta/CLEAR'
 export const FORCE_FETCH = 'meta/FORCE_FETCH'
 export const DB_META_DONE = 'meta/DB_META_DONE'
+export const DB_META_COUNT_DONE = 'meta/DB_META_COUNT_DONE'
+export const DB_META_FORCE_COUNT = 'meta/DB_FORCE_COUNT'
+export const UPDATE_COUNT_AUTOMATIC_REFRESH =
+  'meta/UPDATE_COUNT_AUTOMATIC_REFRESH'
 
 export const SYSTEM_DB = 'system'
 export const VERSION_FOR_EDITOR_HISTORY_SETTING = '4.3.0'
 export const VERSION_FOR_CLUSTER_ROLE_IN_SHOW_DB = '4.3.0'
 
-export const metaQuery = `
+export const metaTypesQuery = `
 CALL db.labels() YIELD label
 RETURN {name:'labels', data:COLLECT(label)[..1000]} AS result
 UNION ALL
@@ -45,7 +49,9 @@ RETURN {name:'relationshipTypes', data:COLLECT(relationshipType)[..1000]} AS res
 UNION ALL
 CALL db.propertyKeys() YIELD propertyKey
 RETURN {name:'propertyKeys', data:COLLECT(propertyKey)[..1000]} AS result
-UNION ALL
+`
+
+export const metaCountQuery = `
 MATCH () RETURN { name:'nodes', data:count(*) } AS result
 UNION ALL
 MATCH ()-[]->() RETURN { name:'relationships', data: count(*)} AS result
@@ -60,6 +66,12 @@ export function fetchMetaData() {
   }
 }
 
+export function forceCount() {
+  return {
+    type: DB_META_FORCE_COUNT
+  }
+}
+
 export const update = (obj: any) => {
   return {
     type: UPDATE_META,
@@ -82,6 +94,16 @@ export const updateServerInfo = (res: any) => {
   }
 }
 
+export const updateCountAutomaticRefresh = (countAutomaticRefresh: {
+  enabled?: boolean
+  loading?: boolean
+}) => {
+  return {
+    type: UPDATE_COUNT_AUTOMATIC_REFRESH,
+    countAutomaticRefresh
+  }
+}
+
 export type Procedure = {
   name: string
   description: string
@@ -136,7 +158,11 @@ export const initialState = {
   },
   databases: [],
   serverConfigDone: false,
-  settings: initialClientSettings
+  settings: initialClientSettings,
+  countAutomaticRefresh: {
+    enabled: true,
+    loading: false
+  }
 }
 
 export type Database = {
@@ -263,6 +289,18 @@ export const getClusterRoleForDb = (state: GlobalState, activeDb: string) => {
   }
 }
 
+export const getCountAutomaticRefreshEnabled = (
+  state: GlobalState
+): boolean => {
+  return state[NAME].countAutomaticRefresh.enabled
+}
+
+export const getCountAutomaticRefreshLoading = (
+  state: GlobalState
+): boolean => {
+  return state[NAME].countAutomaticRefresh.loading
+}
+
 // Reducers
 const dbMetaReducer = (
   state = initialState,
@@ -274,6 +312,14 @@ const dbMetaReducer = (
     case UPDATE_META:
       const { type, ...rest } = action
       return { ...state, ...rest }
+    case UPDATE_COUNT_AUTOMATIC_REFRESH:
+      return {
+        ...state,
+        countAutomaticRefresh: {
+          ...state.countAutomaticRefresh,
+          ...action.countAutomaticRefresh
+        }
+      }
     case UPDATE_SERVER:
       const { type: serverType, ...serverRest } = action
       const serverState: any = {}