Refactoring the store to use the data dictionary: Phase 1

[surchs]

This Epic tracks progress on implementing the required store methods (getters, actions, mutations, etc) to complete the ongoing store refactor.

We will do this in two phases:

1. Addressing all changes required by components on the index and categorization page. Once complete, we will confirm success by creating / running an integration test across the two pages (this issue)
2. Addressing all remaining changes. Once complete, we will confirm success by running additional integration and complete end to end tests (Refactoring the store to use the data dictionary: Phase 2 #305)

Resources:

Here is a great blog post by one of the cypress maintainers on how to unit-test, mock, stub, etc Vuex methods.

There are also some examples for these unit tests in our wiki now: https://github.com/neurobagel/documentation/wiki/Cypress-Test-Snippets

Completion checklist

Every implemented method should have:

1. the method implemented in the correct section (getter, mutation, ...) in the store
2. all necessary state variables that the method relies on are initialized in the state (i.e. defined, not assigned real data)
3. unit test(s) that test the core functionality of the method (required state variables in the store and any other needed inputs should be mocked)
4. any component that depends on this method existing (check miro board and codebase) is checked to make sure it is calling the new method by the correct name and is refactored (including its component tests) where necessary to do so

Phase 1 - up to Categorization page

• create mutation to create column to category map #259
• create mutation to change column to category mapping #252
• create mutation to set the current page #265
• create getter to get column description #253
• create getter to get description for column values #281
• create getter to get existing category names #254
• create getter to get existing column names #255
• create getter to get next page in annotation tool #260
• create getter to determine if a page is accessible #261
• create action to save the uploaded dataTable to the store #256
• create action to save the uploaded dataDictionary to the store #257
• Transition refactored store to Vuex syntax #300
• Refactor store mutations to follow deconstruction syntax #324
• remove old tool-group functionality from the categorization page #306
• Make sure all components and pages for index/categorization nominally fit with the refactor store #322
• switch over to the refactored store #307

With that done, to wrap up we need to do

• can we launch a partially complete app #308
• refactor page test setup #309
• adjust index page tests #310
• adjust categorization page tests #311
• Store fields/methods and initialization missing from initial refactor work #313
• Adapt data dictionary and data table upload/store functionality for refactor on Index page #314
• Adapt navbar/next button and page accessibility status for initial refactor work #315

This phase will be done when

• our app launches
• e2e page tests for index and categorization pass (with some adjustments)

[jarmoza]

Here's a list of the actions/getters/mutations currently listed in our Miro diagram:

actions:

• create action to save the uploaded dataDictionary to the store #257
• create action to save the uploaded dataTable to the store #256

getters:

• create a getter for the active heuristic for a column #266
• create getter for specialized vue component of a category #267
• create getter to get existing category names #254
• create getter to get existing column names #255
• create getter for json version of data dictionary #268
• create getter to get column description #253
• create getter for category explanation #271
• create getter for preview of value after heuristic transformation #272
• create getter for columns of the category being annotated #273
• create getter for value options of a column (categorical or continuous) #276
• create getter for unique values of a category #277
• create getter for missing values of a category #278
• create getter to get next page in annotation tool #260
• create getter to determine if a page is accessible #261

mutations:

• create mutation to change column to category mapping #252
• create mutation to change 'missing' status of a column's value #275
• create mutation to create column to category map #259
• create mutation that reverts column values in data dictionary to original table values #269
• create a mutation to select an option for the value of a categorical column(s) #274
• create mutation to set the current page #265
• create mutation for setting current heuristic of continuous values column #270
• create mutation to initialize annotation component details (one per category) #263
• create getter to determine if a page is accessible #261

[jarmoza]

Linking discussion from UI should always reflect internal annotation state as our refactor of the store will move us toward being able to better keep track of annotations being made to the original data table/data dictionary.

Likely we will want to spin off a subtask for the UI portions of this enhancement.

[jarmoza]

Closing this as done as of #330. Moving on to phase 2 work in #305.