From d07a814c990fe38595453fb6604dee2664591e2a Mon Sep 17 00:00:00 2001 From: Thien Ly Date: Thu, 19 Aug 2021 15:36:24 +0300 Subject: [PATCH] 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. --- maxgui/src/pages/QueryPage/DbListTree.vue | 16 ++++++++--- maxgui/src/pages/QueryPage/PreviewDataTab.vue | 28 ++++--------------- maxgui/src/store/query.js | 9 +++--- 3 files changed, 22 insertions(+), 31 deletions(-) diff --git a/maxgui/src/pages/QueryPage/DbListTree.vue b/maxgui/src/pages/QueryPage/DbListTree.vue index 92250aea242..c3398c35c32 100644 --- 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 index dfb2b18671f..6abbf86a908 100644 --- a/maxgui/src/pages/QueryPage/PreviewDataTab.vue +++ b/maxgui/src/pages/QueryPage/PreviewDataTab.vue @@ -7,7 +7,7 @@ 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', @@ -142,9 +140,10 @@ export default { 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 index 40ded9cdee1..c50ad119a2a 100644 --- 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 || [] },