Next page accessibility/navbar/layout refactor + All page refactor #233

jarmoza · 2022-11-25T19:06:57Z

This PR represents changes that we have planned for I/O refactor for the annotation tool's pages but also our refactor next page accessibility/the navbar and default layout.

Since most of these changes are interlinked, it made sense to include them in one PR. This is also a "in the dark" PR given that we have no good means of testing the following changes throughout the app because of the ongoing refactor. This ties together issues #232, #218, #214, #215, #216, and #217.

So the code review for this will be more of a visual inspection of the changes made. (I will leave it as a draft for now as @surchs may continue this work next week while I am away.)

Below is a summary of the changes made thus far.

Next page and Layout

This is a new component that sits on the bottom right of the layout. It is chiefly a next page button whose state is reactive to that of the app's (see new function nextPageAccessible in the store).

The layout has been slimmed down considerably as well given our I/O refactor specifications.

Tool navbar

I/O refactor changes have been made in addition to incorporation of new page accessibility/store functionality.

Store

Wrapper actions have been removed in favor of direct calls to mutations
Getters are now solely for complex gets of store data. If a page or component needs read access to a store field, it uses the mapState syntax.
Page accessibility is now handled in a reactive manner via pageAccessibility and nextPageAccessibility.
Some general spacing/naming cleanup
Actions are for more complex mutations of the store, and/or when store logic is required before doing so.

All pages

I/O refactor has been incorporated throughout. This includes the removal of most of prop passing and provide/injects. See store summary above for specifics about component/page use of the map* syntax.
Since the only page "initialization" that was happening was related to the creation of the columnToCategoryMap, this has been moved to the index page and there is no longer any initializePage calls. Each page's mounted call just sets the currentPage. As such, all tool navigation is chiefly reactive via pageAccessibility (in the tool bar and next page button components).
Removal/adjustment of functions

e2e test files

Adjustments for above store/refactor changes have been made.

jarmoza · 2022-12-12T16:16:20Z

@surchs I believe this is ready for review actually. Possible I just hadn't converted it back from draft after the last commit.

surchs

Thanks for the PR @jarmoza. Very exciting to see how much slimmer the codebase is getting here! 🎉 I have reviewed this mostly as the two updated nav-bar components (next-page and tool-navbar) and have left some comments. Take a look, but I think this is good to go with the context that we're going to finish the whole refactoring with a major store overhaul.

surchs · 2022-12-13T03:31:20Z

components/next-page.vue

+<script>
+
+    // Allows for reference to store data by creating simple, implicit getters
+    import { mapGetters } from "vuex";


You could handle all three map... imports here inside the curly braces (e.g. import { mapGetters, mapMutations, ... }). Is there a reason you prefer to have them each on one line?

Yes, agreed. This is leftover from when we had wanted to explicitly state what the map imports were for. So I had just taken to copy pasting the single line with the comment. At this point, this import list can be extended throughout the codebase sans comments.

surchs · 2022-12-13T03:37:45Z

components/next-page.vue

+        <b-col class="text-right" cols="4">
+
+            <!-- Optional instructions to remind user of criteria to proceed to the next page -->
+            <p class="instructions-text" v-if="!pageAccessible(currentPage)">


What do you think about using the vue-bootstrap tooltip component here: https://bootstrap-vue.org/docs/components/tooltip ?

I think we're better off being visually explicit about the steps needed to gain next page access. The tooltip is visually cleaner but it's not an obvious UI affordance - it would turn into something the user accidentally discovered.

surchs · 2022-12-13T03:41:21Z

components/tool-navbar.vue

@@ -42,13 +43,16 @@

 <script>

-    export default {
+    // Allows for reference to store data by creating simple, implicit getters
+    import { mapGetters } from "vuex";


Same question as with next-page.vue: could you import them all in one line? I also think the comments explaining how we use vuex may be better placed in a README or in our self- or dev-facing docs.

Yes. See my comment.

surchs · 2022-12-13T03:45:00Z

pages/categorization.vue

+                    <p class="instructions-text">
+                        {{ uiText.categorySelectInstructions }}
+                    </p>
+                </b-row>


I can't mount this and check directly, but wouldn't that repeat the issue with the category-select-table being shifted downward compared to the column-linking-table here? I thought the goal was for both components to be aligned with their upper edge here.

Yes, but given the likely discrepant heights of the tables (column linking will usually be larger, I think it's better to slightly center the category select component.

To more directly answer your question though, the reason this change is made here is that the categorization page now acts more like a layout, removing that functionality from the component itself.

surchs · 2022-12-13T03:45:51Z

pages/categorization.vue

-                    :title="uiText.categorySelectTitle"
-                    @category-select="setSelectedCategory($event)" />
+                    :selected-category="selectedCategory"
+                    @category-select="setSelectedCategory($event.category)" />


just making a note here that I'm ignoring the events and props because I expect them to be replaced in an upcoming refactor of the store.

surchs · 2022-12-13T03:49:02Z

store/index.js

@@ -9,6 +9,8 @@ export const state = () => ({

    currentPage: "home",

+    columns: [],
+


just another note here that I'm not going through this in detail because I expect the store to be fundamentally re-implemented following our component refactoring.

jarmoza added 10 commits November 25, 2022 11:28

New next-page component for tool layout

d795238

Navbar refactor

cd0db93

Layout refactor for next-page component and navbar

5bff68a

Store changes - refactor/cleanup Pt. 1

ba5f3ff

e2e test cleanup from store changes

05e091e

Index page refactor

2a707f9

Download page refactor

5d20377

Categorization page refactor

75cff0e

Annot page refactor (not working with components)

b43f686

Store refactor #2 + misc. cleanup

5fe395a

jarmoza added categorization page download page annotation page landing page data store refactor labels Nov 25, 2022

jarmoza requested a review from surchs November 25, 2022 19:06

jarmoza changed the base branch from master to dev_components_talk_to_store_directly November 25, 2022 19:07

jarmoza marked this pull request as draft November 25, 2022 19:08

jarmoza assigned surchs and jarmoza Nov 25, 2022

jarmoza added 2 commits November 25, 2022 17:28

Currpage now init'd in store & set by nav/next-btn

e411a60

Removing mounted from download page

fbef6b5

surchs added feat:improve Incremental, user facing improvements of an existing feature. maint:refactor Simplifying or restructuring existing code or documentation. and removed improvement labels Nov 28, 2022

This was referenced Nov 28, 2022

Decouple page load from app state and initial page state loading #179

Closed

Initial page state loading enhancement - direct page access/single page setup function in store #180

Closed

jarmoza marked this pull request as ready for review December 12, 2022 16:15

surchs approved these changes Dec 13, 2022

View reviewed changes

jarmoza merged commit 68c6167 into dev_components_talk_to_store_directly Dec 13, 2022

jarmoza deleted the nextandpages-datadict-refactor branch December 13, 2022 19:04

This was referenced Dec 13, 2022

specify upload page (index) #214

Closed

specify tool-navbar #218

Closed

specify categorization page #215

Closed

Next Page Accessibility moves to layout/store #232

Closed

specify annotation page #216

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next page accessibility/navbar/layout refactor + All page refactor #233

Next page accessibility/navbar/layout refactor + All page refactor #233

jarmoza commented Nov 25, 2022 •

edited

Loading

jarmoza commented Dec 12, 2022

surchs left a comment

surchs Dec 13, 2022

jarmoza Dec 13, 2022

surchs Dec 13, 2022

jarmoza Dec 13, 2022

surchs Dec 13, 2022

jarmoza Dec 13, 2022

surchs Dec 13, 2022

jarmoza Dec 13, 2022

surchs Dec 13, 2022

surchs Dec 13, 2022

		@@ -9,6 +9,8 @@ export const state = () => ({

		currentPage: "home",

		columns: [],

Next page accessibility/navbar/layout refactor + All page refactor #233

Next page accessibility/navbar/layout refactor + All page refactor #233

Conversation

jarmoza commented Nov 25, 2022 • edited Loading

jarmoza commented Dec 12, 2022

surchs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jarmoza commented Nov 25, 2022 •

edited

Loading