Feature Request: Implement Pagination in Stores with Database Counter

[berntpopp]

Summary

Introduce pagination functionality in the Gene-Curator web app's data stores. This enhancement requires implementing a counter file or mechanism in the database for each collection, to effectively manage large datasets.

Description

Currently, our data stores in the Gene-Curator app lack pagination, leading to potential performance issues when handling large datasets. To address this, we propose adding pagination capabilities. This will involve computing and maintaining a counter for each database collection, allowing for efficient data retrieval and display.

Acceptance Criteria

• [ ] Develop and integrate a counter mechanism for each collection in the database to track the total number of records.
• [ ] Implement pagination in the application's data stores, leveraging the counter data.
• [ ] Ensure pagination functionality is efficient, reliable, and consistent across different views and components.
• [ ] Validate that the pagination implementation does not introduce any new performance bottlenecks.
• [ ] Test the functionality thoroughly to ensure accuracy and reliability in the record count and data retrieval process.

User Stories

• As a user, I want to navigate through large datasets easily, so that I can find relevant information without performance issues.
• As a developer, I need an efficient pagination system in the data stores to enhance the application’s scalability and user experience.
• As an administrator, I expect the application to handle large volumes of data efficiently, ensuring quick and accurate access to records.

Implementation Details

• Create a mechanism to compute and update a record counter for each database collection, possibly through database triggers or a scheduled script.
• Update the store logic in the app to fetch data in paginated segments, using the counter to inform page sizes and navigation.
• Implement UI components for pagination controls, ensuring they are user-friendly and consistent with the app's design.
• Optimize database queries to support efficient data fetching for pagination.

Potential Challenges

• Ensuring real-time accuracy of the counter, especially in scenarios with frequent data additions, updates, or deletions.
• Balancing performance and accuracy in the pagination mechanism, particularly for large and actively changing datasets.

Code Snippet

// Vuex store example for fetching paginated data
export default new Vuex.Store({
  state: {
    items: [],
    totalItemCount: 0,
    currentPage: 1,
    itemsPerPage: 10
  },
  actions: {
    async fetchItems({ commit, state }) {
      const { currentPage, itemsPerPage } = state;
      const data = await getPaginatedItems(currentPage, itemsPerPage); // Implement this function
      commit('setItems', data.items);
      commit('setTotalItemCount', data.totalCount);
    },
  },
  mutations: {
    setItems(state, items) {
      state.items = items;
    },
    setTotalItemCount(state, count) {
      state.totalItemCount = count;
},
setCurrentPage(state, page) {
state.currentPage = page;
},
setItemsPerPage(state, number) {
state.itemsPerPage = number;
}
}
});