Functional Invalid Token Checking Enrichment #813 , #815 #839

CaitlinOCallaghan · 2018-06-20T15:35:19Z

Addresses #813, and is a MVP for #815.

Token input methods are located in file token-input.js
Tokens are submitted through a div --> this will be iterated upon and improved in the future (use of an external library like slate)
Tokens are stored on state in the form of a map where keys are token names and values (true or false) correspond to token validity
Input alterations are allowed and only new tokens are sent for validation
Invalid tokens are currently displayed in a div that updates as invalid tokens are removed from the list --> the mechanism for user feedback will be iterated upon and improved in the future, tied to input box changes

NOTE: code will only run if ComponentDidMount() is commented out in base-network-view.js since the network has not been set up yet

…iv - div expands with text, marks invalid tokens with red and underline

…s, improved readability

… now

…n/app-ui into inputErrorCheck

maxkfranz · 2018-06-20T15:46:12Z

Tokens are submitted through a div

Is there a textarea in the div, or are you using contenteditable? It might be simpler to use a textarea at this point.

CaitlinOCallaghan · 2018-06-20T15:58:44Z

I'm currently using contenteditable, but I can look to change it to a textarea (I agree, textarea will probably be simpler).

jvwong · 2018-06-20T19:18:06Z

src/client/features/enrichment/token-input.js

@@ -0,0 +1,75 @@
+//const React = require('react');


I think if you turned this into it's own React component, complete with all of its own display and logic, this would be much more logical/readable.

To clarify, I was referring to an 'gene input' component.

Yes, this should be using a React component with a render() function.

maxkfranz · 2018-06-20T19:45:37Z

src/client/features/enrichment/token-input.js

+  //seperate div text input into an array, remove all elements that have already been validated
+  //this method will be altered later depending on the type/format of the final input box (slate or some other library)
+  parseTokenList() {
+    this.state.query = document.getElementById('gene-input-box').innerText;


Shouldn't be reading from the DOM. Use a listener in render()

maxkfranz · 2018-06-20T19:46:07Z

src/client/features/enrichment/token-input.js

+
+  //call validation service API to retrieve unrecognized tokens as an array
+  retrieveValidationAPIResult(tokensToValidate){
+    ServerAPI.enrichmentAPI({genes: _.pull(tokensToValidate,"")}, "validation").then((result) => {


Promises are not returned and so can't be chained

I think the ServerAPI.enrichmentAPI calls upon the validation index.js which then returns a promise

…n token-input.js

jvwong · 2018-06-21T19:57:20Z

src/client/features/enrichment/token-input.js

+      h('img', {
+        src: '/img/humanIcon.png'
+        }),
+      h('div.gene-input-container', [


Everything above the gene-input-container should go in parent. Everything below can stay.

…or token-input.js

…l data, improve conciseness in code

jvwong · 2018-06-27T12:27:46Z

src/client/features/enrichment/index.js

-      query: '',
-      titleContainer: []
+      titleContainer: [],
+      invalidTokenContainer: [],


Purpose of invalidTokenContainer and similar array inside of the render function?

It was initially used to hide the toolbar and replace that section with a feedback box. In the latest commit, I changed the structure to be more logical and to make it easier to open and close both the toolbar and feedback box.

CaitlinOCallaghan · 2018-06-29T14:49:40Z

Currently, the input component is in a separate file than the main index.js . I have an alternative version saved on my desktop that has everything in the index file, if that would be preferable, but it's about 175 lines long. In both versions, there aren't any console warnings or errors.

jvwong

In my view, we could keep retrieveValidationAPIResult and remove the others and it would read a lot easier.

jvwong · 2018-06-29T17:35:36Z

src/client/features/enrichment/token-input.js

+          onClick: () => {this.parseTokenList();} },
+          [h('button.submit', 'Submit')]
+        ),
+        h('div.invalid-token-container',[


maybe use the term 'unrecognized' rather than 'invalid'. Same goes for what the UI displays.

jvwong · 2018-06-29T17:36:39Z

src/client/features/enrichment/token-input.js

+        h('div.invalid-token-container',[
+          h(Textarea, {
+            className:'invalid-tokens-feedback',
+            value: "InvalidTokens: \n" + this.state.invalidTokens.join("\n"),


Suggest to use value "Unrecognized: \n" + ...

jvwong · 2018-06-29T18:10:07Z

src/client/features/enrichment/token-input.js

+
+  //call validation service API to retrieve validation result in the form of []
+  //****** NOTE: currently only checking for unrecognized tokens, not duplicates
+  retrieveValidationAPIResult(tokensToValidate){


Suggestion: Keep this function, and remove all the others.

Sounds good. Since each submission will validate every token, regardless if it was already validated, I scraped the token map for now. Once we have a method for visually altering unrecognized input content (underline or change font), a map will be needed, but for now I think arrays that track the recognized and unrecognized tokens fulfill our current needs.

…no need to pass up unrecognized)

…t' entire input will be validated

jvwong · 2018-07-03T12:51:18Z

src/client/features/enrichment/token-input.js

+  retrieveValidationAPIResult(){
+    //reset state values
+    this.state.unrecognizedTokens = [];
+    this.state.validTokens = [];


do not modify state directly (https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly)

jvwong · 2018-07-03T12:54:24Z

src/client/features/enrichment/token-input.js

+  //store validation data on state as arrays [validTokens] and [unrecognizedTokens]
+  //lift [validTokens] to parent file index.js
+  interpretValidationResult(tokenList, unrecognizedTokens){
+    tokenList.forEach((element) => {


Is all of this necessary?
You already have 1. unrecognized 2. recognized tokens. Also I believe you're attempting to set state on each iteration of the loop which is probably slow.

…ed descriptive naming

CaitlinOCallaghan added 23 commits June 11, 2018 11:36

alert boxes indicating validity of response

a6b8041

manually expand text box while rest of toolbar remains stationary

5b45a6e

rephrase alert message

48b56be

take into account that min set size default is 5 and max is 200

443af65

typo fix

465f6a9

naming changes and comments

563579e

iterated name changes, data stored in map, input box is in editable d…

f272f24

…iv - div expands with text, marks invalid tokens with red and underline

alert boxes indicating validity of response

3f9da72

manually expand text box while rest of toolbar remains stationary

62c268b

rephrase alert message

a51ba53

take into account that min set size default is 5 and max is 200

5047253

typo fix

f88efa7

naming changes and comments

99ae78d

iterated name changes, data stored in map, input box is in editable d…

b37ab16

…iv - div expands with text, marks invalid tokens with red and underline

divided large functions into multiple smaller functions, more comment…

7f036f0

…s, improved readability

further organization of functions and variable names

f55237a

improve input status update, return genes in same order as typed

f8c57aa

iterated response update

5da1112

store input data on state as a map, present invalid tokens in div for…

7f342a8

… now

input token methods stored in seperate file

431f6f6

only send new tokens to validation service

1ddd933

Merge branch 'inputErrorCheck' of https://github.com/CaitlinOCallagha…

1918ded

…n/app-ui into inputErrorCheck

comment out console.log and remove unnecessary css

699615b

jvwong reviewed Jun 20, 2018

View reviewed changes

maxkfranz reviewed Jun 20, 2018

View reviewed changes

CaitlinOCallaghan added 3 commits June 21, 2018 14:06

make Token-Input class a react component, render all input elements i…

88d4d54

…n token-input.js

added change

c7f1132

handle trailing spaces

ca4494c

jvwong reviewed Jun 21, 2018

View reviewed changes

CaitlinOCallaghan added 5 commits June 21, 2018 16:34

move elements from InputToken component rendering to parent

bbc6f46

move elements from InputToken component redering to parent, changes f…

e5a7d08

…or token-input.js

use event listener instead of DOM

cc0e06a

combine invalid input and gene input components

32ca5e8

lift state from token-input.js to index.js, use state for tracking al…

e9a1ac9

…l data, improve conciseness in code

jvwong reviewed Jun 27, 2018

View reviewed changes

jvwong added this to the Enrichment Sprint - Input and Visualization milestone Jun 27, 2018

jvwong added the Enrichment label Jun 27, 2018

CaitlinOCallaghan added 6 commits June 27, 2018 11:44

hide and show feedback box, hide toolbar

2684bde

auto expanding textareas

87fb53e

textarea styling, do not allow for manual resize

c305b92

empty graph so /enrichment will load on BaseNetworkView

dd5835f

addressed error warnings, turned token-input rendering into a function

4baf17e

merging development with inputErrorCheck

5cdc483

jvwong requested changes Jun 29, 2018

View reviewed changes

CaitlinOCallaghan added 2 commits June 29, 2018 14:48

change 'invalid' to 'unrecognized', only lift valid tokens to state (…

8bf2341

…no need to pass up unrecognized)

change input-token.js to minimize number of functions, onClick 'submi…

5e67e38

…t' entire input will be validated

jvwong reviewed Jul 3, 2018

View reviewed changes

CaitlinOCallaghan and others added 6 commits July 3, 2018 10:23

send all tokens (valid and invalid) to index file for storage, improv…

193f3de

…ed descriptive naming

improved robustness, added catch

d8dcb1f

use setState()

9781fbf

typo fix

9e72519

remove all instances of this.state = '' outside of constructor

07807db

cleanup; added valid genes

3385bb5

jvwong merged commit 3467111 into PathwayCommons:development Jul 4, 2018

Uh oh!

Functional Invalid Token Checking Enrichment #813 , #815 #839

Functional Invalid Token Checking Enrichment #813 , #815 #839

Uh oh!

Conversation

CaitlinOCallaghan commented Jun 20, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

maxkfranz commented Jun 20, 2018

Uh oh!

CaitlinOCallaghan commented Jun 20, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CaitlinOCallaghan commented Jun 29, 2018

Uh oh!

jvwong left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CaitlinOCallaghan Jun 29, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

CaitlinOCallaghan commented Jun 20, 2018 •

edited

Loading

CaitlinOCallaghan Jun 29, 2018 •

edited

Loading