Post demo cleanup - Annotation page component overhaul and formatting #108

jarmoza · 2022-04-14T20:28:37Z

General

All UI text has been placed in a uiText object in the data of their respective component
Fields from the store are given to annotation components and subcomponents via provide/inject mechanism. Other fields are passed as props.
All props now use the object notation with type and required. If a prop is given to a component but is not used, it is listed but not marked as required: true.
All entries in the script section of Vue template files have been arranged according to the Vue style guide: props, provide/inject, data, computed, Vue lifecycle hooks, methods. Within each group all fields, methods, etc. are alphabetized.
Functional programming solutions (e.g. Object.fromEntries(), entries(), map(), etc.) remain where useful. However, instances of multiple-levels-deep functional programming were reevaluated with two concerns in mind. 1) Readability and 2) efficiency - with the latter taking precedence over the former. Cases where both readability and computational efficiency could be improved were changed to an imperative approach.
Formatting consistency with four space indents and line spacing has been added. A few other bits of tidying - like capitalizing the beginning of comments and the addition of a p_ hungarian notation to distinguish parameters from local variables. Some of this is just for consistency's sake for the time being until we introduce a prettifier - which will be coming up very soon.
All instances of '==' and '!=' have been replaced with '===' and '!==' respectively.

index.js

Corresponding action/mutation functions for the new annotationDetails field have been added to the store. This field contains information for generating the individual annotation tabs. This field holds the same purpose as the former pages field in annotation.vue, but is now moved to the more central place of the store where it can be properly initialized via config (in the future). Each page object also contains a new options field for any specialized parameters needed for any of the tabs. The field is initialized in the nuxtServerInit action just like the categories.
Corresponding action/mutation functions to revert annotation changes if a column unlinked from its category post-annotation has been added to the store,revertColumnToOriginal. This is currently called when a remove button is clicked in the annot-columns component.
New getters have been added to the store to retrieve column and value descriptions from the data dictionary: columnDescription and valueDescription.
Function convertTsvLinesToDict in the store has been renamed to convertTsvLinesToTableData in order to better reflect its purpose. But more importantly, a bug in this function was fixed that was still allowing
blank lines in files to enter the data table.

category-*

category-*.vue files have all been removed. They have been replaced with the more general annot-tab component.

annot-tab

annot-tab contains the annot-explanation and annot-columns components of the previous category-* components but now includes a component representing the data type specialized components for each category on the annotation page. The information to generate these tabs is now found in the store in the annotationDetails field which is initialized in the nuxtServerInit action.
Three computed properties that were previously in the specialized annotation components have been moved up into the annot-tab component: filteredTable (now filteredDataTable), relevantColumns, and uniqueValues

annot-age-values, annot-discrete-choices, and annot-vocabulary

Save annotation buttons remain in the specialized components of the annotation tabs. This is because decoupling them without messy event handling or refs to child methods was not possible. The small redundancy of each component having its own save button is preferable.
Function names and fields not moved to the annot-tab component that remain in the specialized annotation components have been standardized (i.e. saveButtonDisabled, saveButtonColor, applyAnnotation, transformedValue, initializeMapping, updateMapping, etc.)
applyTransformation has been renamed to applyAnnotation and a new helper function has been introduced for the sake of uniformity: transformedValue. This latter function is the place where an annotation component can go to get the new value given a column and raw value. The hope was that applyAnnotation could be raised up to the annot-tab level but given some slight differences, it made sense to keep it here. In the very least, applyAnnotation and transformedValue can give these components consistent function naming.
Similarly, 'mapping' function names have all been standardized - initializeMapping, updateMapping, and uploadMapping (future functionality withstanding).
As the checkAnnotationState functions just have the purpose of setting the disabled status of the save annotation button, that statement has been pulled out of the function. The disabled status is now more explicitly set via the new boolean return value of checkAnnotationState instead.

annot-columns

retrieveColumnDescription has been implemented to display the data dictionary description of the column next to its name in this component. (Can always be dropped if the screen appears to be too cluttered because of it.) This uses the new columnDescription retrieval method in the store
The v-for key warning has been removed by adding the key as columnName

annot-vocabulary

getDescription has been split into two functions and moved to the store since it contained general, reusable data dictionary functionality. These are the new columnDescription and valueDescription functions

…or all pages

surchs

Thanks @jarmoza, this is a really excellent PR! The code got immensely more readable and clear. This is great, and great work!

I made some small comments, the main thing would probably be the eslint config to make sure we have consistent whitespace.

surchs · 2022-04-25T20:45:35Z

.eslintrc.js

+        // "airbnb", // TODO: activate this styleset
+        "eslint:recommended",
+        "plugin:vue/strongly-recommended",
+        // "plugin:prettier/recommended", // TODO: consider activating


I'd say let's get rid of prettier and have eslint handle formatting when called.

Sounds good to me at this point. I'll remove the commented out lines.

surchs · 2022-04-25T20:46:13Z

.eslintrc.js

+
+    rules: {
+
+        "no-unused-vars": [ "error", {


in our discussion we said we'll turn this into a warning instead so that unused variables are flagged.

surchs · 2022-04-25T20:47:10Z

components/annot-age-values.vue

-                  return [colName, value]
+    export default {
+
+        props: { 


cool, I like the consistent ordering!

surchs · 2022-04-25T20:59:59Z

.eslintrc.js

+            // (Currently just used for unused variables in v-for statements)
+            "ignorePattern": "^_"
+        }]
+    }


My only comment here is that I don't think these rules enforce / fix indentation and trailing whitespaces. Apart from the actual code linting, this is one major improvement for us because we will avoid these messy git diffs that are mostly white-space differences.

So I would say let's make sure here that we get rid of trailing whitespace and that there is some opinionated rule about indentation - otherwise we'll continue having whitespace diffs and make our history hard to read.

@surchs I've changed these to warnings and added some specific rules about indent, vue script-indent, comma spacing, and trailing commas.

The idea here is to explicit about the rules we want to enforce even though they might be default in eslint and vue-eslint rules?

Cool. No, my comment was about the fact that when I run eslint with this config locally, I don't get yelled at for trailing whitespace and I can chose what level of indentation I want for each line as I see fit. I think we should pick some indentation style and remove trailing whitespaces so that its consistent in the code and we don't get diffs because one of us accidentally added or removed some whitespace.

surchs · 2022-04-25T21:07:57Z

components/annot-columns.vue

+        overflow-y: scroll;
+    }
+
+</style>


This is excellent! Short, clear purpose, super legible!

surchs · 2022-04-26T03:31:39Z

pages/categorization.vue


-							for ( let index = 0; index < this.columnToCategoryTable.length; index++ ) {
+                // A. Determine if category-column linking or unlinking has occurred
+                const linking = !( this.selectedCategory === this.columnToCategoryMap[p_clickData.column] );


Could this just be

Suggested change

const linking = !( this.selectedCategory === this.columnToCategoryMap[p_clickData.column] );

const linking = this.selectedCategory !== this.columnToCategoryMap[p_clickData.column] ;

? If so, I'd find that easier to read

surchs · 2022-04-26T03:34:02Z

store/index.js

+			{
+				id: 1,
+				category: "Sex",
+                explanation: "This is an explanation for how to annotate sex.",


indent seems off

Somehow tabs remain in this file. Fixed.

Cool. But we should check why your eslint run didn't catch that.

surchs · 2022-04-26T03:34:31Z

store/index.js

+		// 0. This annotation information is default but we can swap out and reinitialize
+		// annotation data structures by calling 'initializeAnnotationDetails' with a new
+		// object containing annotation information for each category
+		const annotationDetails = [


cool, I like this!

surchs · 2022-04-26T03:36:17Z

store/index.js

 	},

 	// Tool navigation
+
+	enablePage(p_context, p_navData) {


how about initializePage? Maybe not quite the right name, but this method seems to do more than just make the link clickable, particularly in the future?

Perfect. 👌

surchs · 2022-04-26T03:37:11Z

store/index.js


 		p_context.commit("removeColumnCategorization", p_linkingData.column);
 	},

 	// Annotation page actions

+	revertColumnToOriginal(p_context, p_columnName) {


Could you add a docstring comment to explain what this method does and when it would be called? I assume this is when someone wants to reset an annotation?

surchs

I think you need to run one more eslint --fix to get the remaining errors (annotation component and some js config files). Otherwise this is good to go 🎉 !

jarmoza · 2022-04-26T23:13:07Z

@surchs Yup! I noticed. Pushed the eslint changes for the pages in a separate commit outside the PR right afterward.

jarmoza added 4 commits April 7, 2022 19:03

Shift of state handling code to store and Vue/JS formatting cleanup f…

a6e6ba1

…or all pages

Small formatting commit

6ecd37f

Component and page formatting pass #2

a3027e2

Overhaul of annotation page components and formatting

032ef98

jarmoza requested a review from surchs April 14, 2022 20:28

jarmoza added 2 commits April 14, 2022 16:50

Removing debug statements and old code

b9980f6

Two remaining files for post demo cleanup overhaul PR

ebb75b3

This was referenced Apr 14, 2022

Should we use provide / inject instead of prop chains #105

Closed

Convert all props in tool to consistently use 'type' and 'required' #70

Closed

Conversion of all '==' and '!=' to '===' and '!==' #71

Closed

Styling improvements #93

Closed

jarmoza added 3 commits April 22, 2022 11:28

Changing all uses of 'let' to 'const' where possible

ced62f6

Corrections after first full eslint pass

b4d2c0a

First take on an eslint config

dd1b67b

surchs approved these changes Apr 26, 2022

View reviewed changes

jarmoza added 2 commits April 26, 2022 15:33

Requested PR edits

cf4d7f2

Adding in PR suggestions for annot-vocabulary

4d244b1

jarmoza merged commit 18ab0aa into master Apr 26, 2022

surchs reviewed Apr 26, 2022

View reviewed changes

surchs deleted the post-demo-cleanup branch April 26, 2022 23:41

This was referenced Apr 29, 2022

Consider bitwise state flag implementation #53

Closed

Suggested commits for state and column to category map setup #73

Closed

configure prettier and eslint #103

Closed

Replace all indentation in code files with 4 spaces #85

Closed

jarmoza mentioned this pull request May 2, 2022

Improve legibility of computed props in the annotation pages #82

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Post demo cleanup - Annotation page component overhaul and formatting #108

Post demo cleanup - Annotation page component overhaul and formatting #108

jarmoza commented Apr 14, 2022 •

edited

surchs left a comment

surchs Apr 25, 2022

jarmoza Apr 26, 2022

surchs Apr 25, 2022

surchs Apr 25, 2022

surchs Apr 25, 2022

jarmoza Apr 26, 2022

surchs Apr 26, 2022

surchs Apr 25, 2022

surchs Apr 26, 2022

surchs Apr 26, 2022

jarmoza Apr 26, 2022

surchs Apr 26, 2022

surchs Apr 26, 2022

surchs Apr 26, 2022

jarmoza Apr 26, 2022

surchs Apr 26, 2022

surchs left a comment

jarmoza commented Apr 26, 2022

	const linking = !( this.selectedCategory === this.columnToCategoryMap[p_clickData.column] );
	const linking = this.selectedCategory !== this.columnToCategoryMap[p_clickData.column] ;

Post demo cleanup - Annotation page component overhaul and formatting #108

Post demo cleanup - Annotation page component overhaul and formatting #108

Conversation

jarmoza commented Apr 14, 2022 • edited

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

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

surchs left a comment

Choose a reason for hiding this comment

jarmoza commented Apr 26, 2022

jarmoza commented Apr 14, 2022 •

edited