MXS-3681 Remove active_tree_node from localStorage

`active_tree_node` is used to automatically query preview data when user refreshes the browser. Though this brings convenience but querying preview data with large number of rows causes slow response effect on user interface. In addition, user can always set max rows to any number, so on inital rendering, pre-query should be avoided. This keeps `active_tree_node` in memory. i.e. to store it in `db_tree_map` and release when browser refreshes.
mariadb-corporation · Aug 23, 2021 · d07a814 · d07a814
1 parent 46a1415
commit d07a814
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 31 deletions.
diff --git a/maxgui/src/pages/QueryPage/DbListTree.vue b/maxgui/src/pages/QueryPage/DbListTree.vue
@@ -131,11 +131,12 @@ export default {
     },
     computed: {
         ...mapState({
-            active_tree_node: state => state.query.active_tree_node,
             expanded_nodes: state => state.query.expanded_nodes,
+            active_wke_id: state => state.query.active_wke_id,
         }),
         ...mapGetters({
             getDbTreeData: 'query/getDbTreeData',
+            getActiveTreeNode: 'query/getActiveTreeNode',
         }),
         filter() {
             return (item, search, textKey) => item[textKey].indexOf(search) > -1
@@ -145,11 +146,18 @@ export default {
         },
         activeNodes: {
             get() {
-                return [this.active_tree_node]
+                return [this.getActiveTreeNode]
             },
             set(v) {
                 const activeNodes = this.minimizeNodes(v)
-                if (activeNodes.length) this.SET_ACTIVE_TREE_NODE(activeNodes[0])
+                if (activeNodes.length) {
+                    this.UPDATE_DB_TREE_MAP({
+                        id: this.active_wke_id,
+                        payload: {
+                            active_tree_node: activeNodes[0],
+                        },
+                    })
+                }
             },
         },
     },
@@ -167,7 +175,7 @@ export default {
     },
     methods: {
         ...mapMutations({
-            SET_ACTIVE_TREE_NODE: 'query/SET_ACTIVE_TREE_NODE',
+            UPDATE_DB_TREE_MAP: 'query/UPDATE_DB_TREE_MAP',
             SET_EXPANDED_NODES: 'query/SET_EXPANDED_NODES',
         }),
         addExpandedNodesWatcher() {

diff --git a/maxgui/src/pages/QueryPage/PreviewDataTab.vue b/maxgui/src/pages/QueryPage/PreviewDataTab.vue
@@ -7,7 +7,7 @@
                     <truncate-string
                         :maxWidth="260"
                         :nudgeLeft="16"
-                        :text="$typy(active_tree_node, 'id').safeObject"
+                        :text="$typy(getActiveTreeNode, 'id').safeObject"
                     />
                 </div>
                 <v-tabs
@@ -130,21 +130,20 @@ export default {
     },
     computed: {
         ...mapState({
-            active_tree_node: state => state.query.active_tree_node,
             SQL_QUERY_MODES: state => state.app_config.SQL_QUERY_MODES,
             curr_query_mode: state => state.query.curr_query_mode,
             curr_cnct_resource: state => state.query.curr_cnct_resource,
-            active_wke_id: state => state.query.active_wke_id,
         }),
         ...mapGetters({
             getPrvwDataRes: 'query/getPrvwDataRes',
             getPrvwSentTime: 'query/getPrvwSentTime',
             getPrvwExeTime: 'query/getPrvwExeTime',
             getPrvwTotalDuration: 'query/getPrvwTotalDuration',
             getLoadingPrvw: 'query/getLoadingPrvw',
+            getActiveTreeNode: 'query/getActiveTreeNode',
         }),
         validConn() {
-            return Boolean(this.active_tree_node.id && this.curr_cnct_resource.id)
+            return Boolean(this.getActiveTreeNode.id && this.curr_cnct_resource.id)
         },
         isPrwDataLoading() {
             return (
@@ -168,9 +167,8 @@ export default {
             if (!this.isPrwDataLoading && this.validConn) await this.handleFetch(activeView)
         },
     },
-    async activated() {
+    activated() {
         this.setHeaderHeight()
-        await this.autoFetchActiveNode()
     },
     methods: {
         ...mapMutations({
@@ -183,21 +181,7 @@ export default {
             if (!this.$refs.header) return
             this.headerHeight = this.$refs.header.clientHeight
         },
-        async autoFetchActiveNode() {
-            if (this.curr_cnct_resource.id)
-                switch (this.activeView) {
-                    // Auto fetch preview data if there is active_tree_node in localStorage
-                    case this.SQL_QUERY_MODES.PRVW_DATA_DETAILS:
-                    case this.SQL_QUERY_MODES.PRVW_DATA: {
-                        const hasActiveNode = this.$typy(this.active_tree_node, 'id').safeObject
-                        const isFetchingAlready = this.getLoadingPrvw(this.activeView)
-                        const isDataEmpty = this.$typy(this.getPrvwDataRes(this.activeView))
-                            .isEmptyObject
-                        if (hasActiveNode && !isFetchingAlready && isDataEmpty)
-                            await this.fetchActiveNodeData(this.activeView)
-                    }
-                }
-        },
+
         /**
          * This function checks if there is no preview data or details data
          * before dispatching action to fetch either preview data or details
@@ -219,7 +203,7 @@ export default {
          */
         async fetchActiveNodeData(SQL_QUERY_MODE) {
             await this.fetchPrvw({
-                tblId: this.$typy(this.active_tree_node, 'id').safeObject,
+                tblId: this.$typy(this.getActiveTreeNode, 'id').safeObject,
                 prvwMode: SQL_QUERY_MODE,
             })
         },

diff --git a/maxgui/src/store/query.js b/maxgui/src/store/query.js
@@ -30,7 +30,6 @@ function sidebarStates() {
         is_sidebar_collapsed: false,
         search_schema: '',
         active_db: '',
-        active_tree_node: {},
         expanded_nodes: [],
     }
 }
@@ -120,7 +119,7 @@ export default {
         is_fullscreen: false,
         rc_target_names_map: {},
         // sidebar states
-        db_tree_map: [],
+        db_tree_map: {},
         // results states
         prvw_data_map: {},
         prvw_data_details_map: {},
@@ -165,9 +164,6 @@ export default {
                     ...{ [id]: { ...state.db_tree_map[id], ...payload } },
                 }
         },
-        SET_ACTIVE_TREE_NODE(state, payload) {
-            patch_wke_property(state, { obj: { active_tree_node: payload }, scope: this })
-        },
         SET_EXPANDED_NODES(state, payload) {
             patch_wke_property(state, { obj: { expanded_nodes: payload }, scope: this })
         },
@@ -947,6 +943,9 @@ export default {
         },
         // sidebar getters
         getCurrDbTree: state => state.db_tree_map[state.active_wke_id] || {},
+        getActiveTreeNode: (state, getters) => {
+            return getters.getCurrDbTree.active_tree_node || {}
+        },
         getDbTreeData: (state, getters) => {
             return getters.getCurrDbTree.data || []
         },