Adding download page and hooking it into annotation tool workflow #91
Conversation
|
@jarmoza: Thanks for this PR! I only have one comment: why do we need to force-navigate to the download page every time we update the dataTable? With the demo in mind, that'd make you jump back and forth a lot (e.g. look at age -> "upload/confirm" -> be brought to download page -> navigate back to annotation -> ...). I think it should be enough to just enable the download page once we have made one dataTable update emit and then let the user navigate to the download page on their own. |
Well, we don't need to do that. It's a UI choice. Ideally, we'd want some sort of feedback from the upload button. The most immediate choice was to have the user move along in the annotation process (e.g. to the download page). Currently, there is no feedback as to what's happened otherwise. Another possibility is to mimic the UI of the previous pages and to enable a 'Next' button once the user clicks the 'Confirm and Upload' button. |
|
Yeah, I think I'd prefer if we just make the download page accessible conditional on dataTable.annotated not being null / the annotation page having received at least one dataTable update event |
|
Okay. I'll add the button then. |
|
@surchs Okay. Take a look and see what you think. |
|
Additional note: I had tried to put the top part of the annotation page in a row - thus the indented top part, but row styling made it shrink in width. So the download page button is just in its own row beneath the annotation UI. |
pages/annotation.vue
Outdated
| :disabled="!pageData.download.accessible" | ||
| :to="'/' + pageData.download.location" | ||
| :variant="nextPageButtonColor"> | ||
| Next step: Categorize columns |
There was a problem hiding this comment.
| Next step: Categorize columns | |
| Next step: Review and download the harmonized data |
There was a problem hiding this comment.
suggestion: let's call the button "Download" (I suggested inline)
Oops! Left over from my copy-paste from the landing page. Will replace.
comment: let's remve the pageData props (see comment)
Good catch! Use of pageData here is leftover from a previous implementation where it was necessary as a prop for components since the 'Confirm and Upload' button(s) reside inside them – and was being used to proceed to the download page. Passing it through the annotation components is no longer necessary.
components/annot-age-values.vue
Outdated
| @@ -194,7 +194,11 @@ export default { | |||
| }, | |||
| columns: { | |||
| type: Object | |||
| } | |||
| }, | |||
| pageData: { | |||
There was a problem hiding this comment.
Now that we are handling the button from the annotation page, can we remove the pageData props? It seems that they are not used inside the components they are being passed to. And we have the navigation component to handle the shared nav-state in one place for us.
components/category-age.vue
Outdated
| @@ -12,6 +12,7 @@ | |||
| :active-category="activeCategoryName" | |||
| :columns="columns" | |||
| :data-table="dataTable" | |||
| :pageData="pageData" | |||
OK, let's squash the PR then so we don't get confused by all the styling commits |
…f pageData as a prop for annotation page components
This PR adds a basic download page that follows the annotation page.
Currently it is always accessible from the annotation page (not unlocked upon completion of annotation - like the other pages). This is just for demo purposes. Going to the download page while in the annotation page without having 'annotated' any data merely produces a blank page with "download" button.
However, once an annotation has occurred, going to the download page produces a table of the "annotated" data.
NOTE: Some other aspects of this implementation should be revisited after the demo tomorrow - including how/when annotation status is saved in the store. This will include moving replicated functionality like the 'Confirm and Upload' button upwards out of the annotation page's components.