The code changes are present below:

https://bitbucket.org/skulka2710/bioviz/branch/IGBF-1477#diff

cc: Prof. [~aloraine]

Please let me know if any changes are required.

If possible, could you please help me set-up the test.bioviz.org to test the changes?

New EC2 set up for use by Shamika Gajanan Kulkarni. Login details to be sent via separate email.

Thank you Prof. [~aloraine]

Deployed Shamika's fork and branch on new EC2 using https://bitbucket.org/lorainelab/bioviz-playbooks with the following settings:

bioviz_repo: https://bitbucket.org/skulka2710/bioviz.git
bioviz_version: IGBF-1477
ec2_name: ShamikaBioviz
server_name: shamika.bioviz.org
igb_version: 9.1.4
genoviz_version: 1.1.9

Added a new "a name" record linking shamika.bioviz.org to new EC2's IP address. This will take a few hours to propagate.

To test:

• Modify your localhost to use above bioviz site in place of the main BioViz site so that when you click "View in IGB" links in Galaxy main, the links will resolve to the test site above.
• View release testing site (wiki.transvar.org.) for details on how to test that Galaxy connectivity is working.

Shamika Gajanan Kulkarni - please check your new branch using the above site.

Thank you so much! I shall comment on the ticket after testing

I have tested the code changes based on instructions above.
After modifying the localhost to redirect main bioviz site to shamika.bioviz.org, the code changes are visible and Galaxy connectivity is working properly.

Prof. [~aloraine], I have attached a screenshot for the page displayed when version is null in URL. Please let me know if the font size and style is okay as it is or should we modify that too for consistency?

Good question!

Could you make an appointment with Logan Weidenhammer to show her the UI, walk her through the functionality, and get some feedback?

attn: Logan Weidenhammer and Shamika Gajanan Kulkarni

Yes sure! Thank you

Me and Logan Weidenhammer met online today to discuss the UI and get her feedback. The suggestions were as follows:
The block can be red and smaller in size to look consistent.
I worked on it and will attach screenshots soon for Logan Weidenhammer and Prof. [~aloraine] to check.

Quick question:

• Is it going to be red to signal a problem or error? If yes, does the UI let the user know how they can recover from the error?

It will suggest that the version of genome is not present or is null in URL. The UI suggests the user to go back to Galaxy page and try again. The message displayed on the UI is as follows.
"The file you are trying to view does not have a genome version associated with it. Please return to Galaxy and associate a genome version with the file and try again."
I have attached an updated UI sample to this ticket. If this looks fine, I shall make the changes in the code and submit it for first level review.

cc: Prof. [~aloraine], Logan Weidenhammer

Suggestion for change to UI shown when there is no genome version associated with the file the user has clicked in Galaxy:

• Let's shorten the message somehow. Can we communicate the idea in fewer words?
• Can we change the Salutation to make it friendly and not use the term "user" (it's a little jargony.) How about: "Welcome from [referrer domain]" We could use javascript to detect this. It would be good to somehow give the user some feedback letting them know how they arrived at this page.
• Instead of just telling the user to go back and attach a genome version to their file, we should tell them how to do this. We ought to make a super-short video (30 sec?) that the user could click on to see how this works.

Logan Weidenhammer & Shamika Gajanan Kulkarni - please read the above and let us know what you think about it

Based on the flowchart created by Shamika Gajanan Kulkarni, it looks like we have 2 main scenarios. The user will take actions which will land them on either the IGB Error Page (where the data cannot be launched by IGB), or the Success Page (where the genome loads in IGB but may or may not be associated with the correct genome version). We drafted a rough outline of what each of these pages might say to the user, giving them steps for troubleshooting their error.

UI wording for the Error Page
Error. Genome failed to launch in IGB. Check file attributes for correct genome version.
Steps:
Go to usegalaxy.org/datasets/edit
Select "edit attributes" icon for the file
Go to the "Database/Build" dropdown
Select the correct genome version (similar to species name)
Click save at the top
Now the uploaded file with update in the history section on the right of the page
Now click View in IGB
(See the Success Page)

UI Wording in the Success Page
(current) "Thank You. Your data will appear in IGB..."
(below)
Warning: If your genome appears as “Custom Genome” in the Species window and Genome Version at the top right, the genome version you selected in Galaxy may not be correct, or may not be supported by IGB.
Please go back to usegalaxy.org/datasets/edit and edit the attributes of the file so that the Database/Build is the correct genome version (usually similar to the species name)
Steps:
Go to usegalaxy.org/datasets/edit
Select "edit attributes" icon for the file
Go to the "Database/Build" dropdown
Select the correct genome version (similar to species name)
Click save at the top
Now the uploaded file with update in the history section on the right of the page
Now click View in IGB
(See the Success Page)

I have created 2 rough drafts of the possible user view of the Error and Success Pages.
From these we can critique the layout, color shading, as well as text content.

Error Page Draft Mockup https://www.figma.com/file/PWYmiX9Ikl4czuAJm3XhdR/Error?node-id=1%3A2
Success Page Draft Mockup https://www.figma.com/file/INUfHNqM1zcvOatw7xjcGC/Success?node-id=0%3A1

Added the flowchart giving a rough idea about our plan of action.
Please let me know if something needs to be corrected.

cc: Prof. [~aloraine], Logan Weidenhammer

Please edit wording in Error page proposed re-wording:

• "Now the uploaded file with update in the history section on the right of the page

attn: Logan Weidenhammer

Error page mockup: The usegalaxy link shown will not be correct for Galaxy users visiting from any site other than usegalaxy.org. Logan Weidenhammer could you please comment?

Shamika Gajanan Kulkarni - notes on the code:

• Some of the same functionality exists in bar.js as well. Please compare the two .js files. Can you take a careful look and move functionality into a new file that will be imported by both.

The two files bar.js and galaxy.js ought to be mainly concerned with translating the links coming from the external sites into REST calls for IGB itself running on the localhost.

In addition, we need some new code that will deal with Safari users. Specifically, the user needs to become aware that they cannot use Safari to send data to IGB.

Yes Prof. [~aloraine] I shall do it.
Question:
So should we display some message for Safari users to use some other browser?

Yes. Pleaes make it generic - "to open data in IGB, you need to use Firefox or Chrome browser."

[~aloraine], Are we able to determine from the site where the user is coming from? In the interest of giving the user as much help as possible it would be nice if we could give them all instructions. Alternatively we could make it generic like above and tell all users to check that they have the correct genome version selected in their file upload.

Sure! Javascript code can get the referrer from the HTTP header.
Check out this example:

https://stackoverflow.com/questions/2031362/checking-the-referrer

Mockup for the Generic Error Page for all non-galaxy users: https://www.figma.com/file/wjOlGpiKVF7YXUMb96bkk1/Error-Generic?node-id=0%3A1

Mockup for the Generic Success Page for all non-galaxy users: https://www.figma.com/file/d5GK4S686WJOqgZ7PCtvXH/Success-Generic?node-id=0%3A1

Shamika Gajanan Kulkarni - please finalize your branch and post the link here. Then please move to Done.

Yes. Thank you.

The code changes are present here:
https://bitbucket.org/skulka2710/bioviz/branch/IGBF-1477#diff

The changes implemented are as follows:
1) Added utils.js file to contain common code snippets for bar.js and galaxy.js
2) Changed the success page and error page appearances as per the mockups provided by Logan Weidenhammer
3) Added a message page for Galaxy users on Safari to use Chrome or Firefox instead.