Landing page file loading, Clickable columns on Categorization Page, and Vuex Store

[jarmoza]

Landing page and Categorization page now have initial functionality working

1. Landing page allows for tsv and json file loading. At least the tsv file must be loaded to proceed to the categorization page.
2. Categorization page allows for the selection of categories in the listbox on the left and the subsequent "painting" of tsv columns in the table on the right. JSON description data is joined with the tsv column names in the table if available and semi-exact match is established between the category and column name.
3. Behind all of the above is a working Vuex store (index.js) which is communicated to from the pages (not components)

Supporting components include:

a. the file-selector (landing page)
b. coloring-listgroup (listbox on categorization page), and
c. the filedata-table (table on categorization page).

Issues addressed:

• Show the columns of a tsv file Show the columns of a tsv file #2
• Make column headers clickable Make column headers clickable #3
• Palette for painting of column headers and data dictionary fields Palette for painting of column headers and data dictionary fields #4
• Have required categories selectable on the categorization screen Have required categories selectable on the categorization screen #8
• Store the classification of columns in the global store Store the classification of columns in the global store #18

[surchs]

awesome! Thanks @jarmoza for this PR!
I tried running the app and got it to load a .tsv and then I was able to paint the columns. Very nice!
The only odd thing is that when I am loading the .tsv, it seems to be only including the first column and discards all the rest. Any idea why that is / can you replicate that?

[jarmoza]

@surchs Can you attach here the tsv file you were using?

[surchs]

@jarmoza I used this example file but I think you can use any .tsv file with more than one column to reproduce.

I merged master into this branch to make these files available for testing for you.

[jarmoza]

@surchs Okay! I had to look in reverse in order to see what the issue was. There's nothing wrong with your file. There was something wrong with my test file(s) – which were apparently using spaces instead of tabs. The JS library I'm using to parse the file is apparently primarily built for csv files. So I'll have to figure out another solution for these tsv files. Stay tuned...

[surchs]

d3 seems to have things for this:

• https://github.com/d3/d3-dsv/tree/v3.0.1
• https://github.com/d3/d3/blob/main/API.md#delimiter-separated-values-d3-dsv

[jarmoza]

@surchs Thanks. I considered that. In fact, the current solution with papaparse produces correct data from the tsv file. There's actually just a processing error occurring in my file selector and store code. Fixing that now.

[surchs]

Alright, confirmed this works. That's great stuff @jarmoza! We're getting there!

[surchs]

Thanks @jarmoza, I think this looks very good. I vote to merge this.

[surchs]

I'm not familiar with these indices for comments. Do they have a structure or meaning? Are they reflecting some flow-control hierarchy?

[jarmoza]

My bulleting system for commenting steps and substeps of a piece of code.

0 - I use for setup
1-n Primary steps
A-Z Substeps for primary steps
I, II, III, etc. for Subsubsteps
a-z for subsubsubsteps
i, ii, iii, etc. subsubsubsubsteps (if we ever really get that low)

[surchs]

Is there a reason to set a global colormap somewhere else in case we end up reusing colors on other pages?
e.g. if we decided to color each section of the annotation page based on the color applied here (e.g. age as purple)?

[jarmoza]

Yes, we could list that in the store.

[surchs]

Let's call this Data dictionary for now. Later we'll add some explanations.

[jarmoza]

This change will be added in the a forthcoming PR.