Implemented Bed file selection

[YangQi007]

1, Added a file picker component 2, Dispatched different events for bedfile buttons 3, Handle the buttons selection logic

This is the first version for review, please let me know if they're what you expect.

[anderspitman]

@YangQi007 solid first steps. A few points:

• I think I was ambiguous when I said we should create a file picker component. I was referring to something like the input form on the landing page for bam1. I can explain in more detail if you start working on the landing page. I don't think you'll need that for this PR. I think the builtin <input type='file'> should work. Let me know if not. You can save the file you made in case it's useful later though.
• I think we should extract the top controls into a separate component. It doesn't really make sense to have them part of the read coverage chart anymore, since they now affect other parts of the app as well. Let's call this new component <iobio-bam-controls> and put it in bam_controls.js. Eventually that will probably move to the new bam2 repo since it's pretty bam-specific.
• I'm seeing some visual artifacts with the new layout:

The button is outside the border on Firefox and Chromium on Linux

[anderspitman]

Actually I see that you also have some functionality in index.html for handling bam/cram, so it seems your intention is to be working on that functionality as well. I still think that's probably better for a separate PR. We'll most likely use different logic to input the bed files and bam/cram files.

[YangQi007]

@YangQi007 solid first steps. A few points:

• I think I was ambiguous when I said we should create a file picker component. I was referring to something like the input form on the landing page for bam1. I can explain in more detail if you start working on the landing page. I don't think you'll need that for this PR. I think the builtin <input type='file'> should work. Let me know if not. You can save the file you made in case it's useful later though.
• I think we should extract the top controls into a separate component. It doesn't really make sense to have them part of the read coverage chart anymore, since they now affect other parts of the app as well. Let's call this new component <iobio-bam-controls> and put it in bam_controls.js. Eventually that will probably move to the new bam2 repo since it's pretty bam-specific.
• I'm seeing some visual artifacts with the new layout:

The button is outside the border on Firefox and Chromium on Linux

I thought that you wanted a general file picker component, then it can be reused by bed file selection and Bam file selection. Actually I used the<input type='file'> in the file picker component. It's pretty simple. So I can make bed file seletion and Bam file selection separate.

I agree that we can decouple the top controls.

The UI looks ok in Chrome on my machine. I'll try to reproduce it in Firefox.

[YangQi007]

Actually I see that you also have some functionality in index.html for handling bam/cram, so it seems your intention is to be working on that functionality as well. I still think that's probably better for a separate PR. We'll most likely use different logic to input the bed files and bam/cram files.

Yes, like I mentioned above. My first intention is to make a general file picker component for both the bed file selection and bam file selection. So I wrote the validation code to handle these two cases.

I can put it in another PR.

[anderspitman]

I think the confusion is that I used the wrong terminology. Sorry about that. I said "file picker", but what I really meant is "file input form". We need something like bam1, where there are text input boxes for bam/cram/bai/crai URLs and an option to use local files. The component you made is a button that launches the native browser file picker.

[anderspitman]

It would be nice if we could create a generic iobio file input component where you can tell it the filetypes you want (ie .bam, .cram, etc), and it lets the user input URLs or select local files. If local files are selected, it uses waygate to create a tunnel and provide URLs. Then the component outputs the URLs. This would be a pretty nice interface because the app developer doesn't need to know anything other that file types in, URLs out. No need to worry about how waygate works.

I'm not sure this is the right API, but worth thinking about.

[anderspitman]

Fortunately it looks like there's only one commit, so I think you can just do this:

git reset HEAD~1
rm -rf files/
git commit -a
git push -f yang....