I have removed the pages:

• https://www.bioviz.org/contact.html
• seems to be an older copy of https://www.bioviz.org/help.html

• https://www.bioviz.org/appStore.html
• the original and no longer used prototype

Some pages are not currently linked to from within the site, but I have left in the project. Please let me know, [~aloraine], if any are no longer needed.

• https://www.bioviz.org/bar.html
• https://www.bioviz.org/galaxy.html
• https://www.bioviz.org/support.html

Please see the changes at the commit below:
https://bitbucket.org/pbadzuh/bioviz_pbdev/commits/2a06ccd22f810c6c9b2d971207adc9929510999a?at=IGBF-2442

These:

• modify html files to source CSS and JS from CDNs
• remove local JS, CSS, CSS source, and other resource files that are unneeded
• reorganize directory structure and update references accordingly - html files left at root of htdocs so as not to break apache config

All changes were tested locally. Please let me know what you think.

Apologies for the late reply:

https://www.bioviz.org/bar.html
https://www.bioviz.org/galaxy.html
https://www.bioviz.org/support.html

Are all needed.

I just now attempted to deploy the branch onto test.bioviz.org using bioviz-playbooks and got this error:

TASK [menu : Copy bioviz menu styling to genome dashboard] *****************************************
fatal: [18.209.116.108]: FAILED! => changed=false
msg: Source /var/www/bioviz/htdocs/less/style.css not found

Apart from the deployment error (see previous comment) every thing else looks fine – all the Web site pages (that I tested) were functional.
Once the above problem is fixed, it is ready for a PR.
cc: Philip Badzuh

Thanks for noticing that. I have updated the ansible reference to the css file. I also checked for any other possible ansible issues related to my directory restructuring of bioviz, and there shouldn't be any.

Please review:
https://bitbucket.org/pbadzuh/bioviz-playbooks_pbdev/branch/IGBF-2442#diff

Everything should work after that change is merged. Hopefully

Testing now.

Do please submit PR with change to playbook.
cc: Philip Badzuh

Please see PR below:
https://bitbucket.org/lorainelab/bioviz-playbooks/pull-requests/2/igbf-2442-update-link-to-bioviz-css/diff

Merged.
I used the revised bioviz-playbook code to re-deploy your IGBF-2442 Bioviz branch to test.bioviz.org.
I see no problems, so do please submit a PR from your IGBF-2442 Bioviz branch to the team repo main branch.
cc: Philip Badzuh

Great. Please see the bioviz pull request below:
https://bitbucket.org/lorainelab/bioviz/pull-requests/41/igbf-2442-migrate-to-use-of-cdns-and/diff

Sorry for the delay Philip Badzuh.
Merged to main branch on the team repo.

Notes on discussion that happened off-line w/ PB, AL, and NF:

• PB noted there are many copies of CSS-related files that do not appear to be used anywhere
• AppStore prototype page has its own collection of CSS and bootstrap related stuff
• We decided that step one of this project is: get rid of all this extra stuff that is not being used
• Merge the changes into the main branch
• Next, start trying to use bootstrap 4

Please note: I removed "Investigate" from the title since we are moving forward with the effort to upgrade to bootstrap 4, with the caveat that we might discover it's not possible with our current design. If so, that's OK – we got rid of a lot of technical debt along the way.

Please see the changes at the new branch below:
https://bitbucket.org/pbadzuh/bioviz_pbdev/branch/IGBF-2242-2#diff

These:

• migrate to the use of bootstrap 4, updating class references and custom styling as needed
• fix previous issues with mobile styling
• move menu styling to separate file, to ease ansible integration
• move repetitive JS to dedicated files
• remove several unused libraries
• prettify formatting

Please let me know what you think or if you have any questions.

Deployed above branch (https://bitbucket.org/pbadzuh/bioviz_pbdev/branch/IGBF-2242-2#diff) to https://test.bioviz.org for testing.

Please check appearance in Safari. The Install IGB button (top right) is white instead of pale red. Genome Dashboard menu was also disrupted, but I guess that's because it is still configured to use bootstrap 3?

Thank you for noticing that; I forgot to test browsers outside of chrome. Yes, genome dashboard will need to be reverted to bootstrap 4.

Please see the same branch below:
https://bitbucket.org/pbadzuh/bioviz_pbdev/branch/IGBF-2242-2#diff

• I have fixed the button appearance on safari and squashed several commits for a cleaner history.

Button fixed in Safari. Please submit PR.

Please see PR below:
https://bitbucket.org/lorainelab/bioviz/pull-requests/42/igbf-2242-2/diff

Deployed on test.bioviz.org

To test:

Examine all the pages. Compare to https://bioviz.org ("bioviz main") to determine if what you see is new bug.

Post merge testing:
All links and features are working with no issues on test.bioviz.org

Steps:
1. Visited test.bioviz.org
2. Confirmed all menu links, in page links, and download links are working, and that no issues or bugs are present on BioViz and Genome Dashboard
3. Confirmed that no bugs or issues occur when trying to load genome versions on IGB using the Genome Dashboard on https://test.bioviz.org/genome-dashboard

Moving this ticket to "Done" and re-assigning it to Philip Badzuh

Jay Chamma - please check appearance of search box in Genome Dashboard after entering a search string. Please compare to bioviz.org ("bioviz main").
Looks like there could be a problem.
Move back to To-Do and assigning to Jay Chamma to take a look.

[~aloraine] Thank you for noticing that. Here is what I found:

• The search box on https://test.bioviz.org/genome-dashboard is slightly smaller than the main Genome Dashboard, which is causing a very long string that reaches the end of search box to be hidden underneath the "X" symbol.
  The main Genome Dashboard does not have this issue, since it is slightly larger and cuts off the long string before it reaches the "X" symbol.
• The font on the test Genome Dashboard top menu looks different than the main version and causes the top menu to extend further down than the main version.
• The same font issue appears on the top bar of homepage of test.BioViz.org and on test version of BioViz Connect
• The sentence "Integrated Genome Browser Visualization for genome-scale data" on the homepage of test.BioViz.org has extra spacing between the words compared to the main BioViz.org
• The window that contains the slides on the hompage test.BioViz.org is slightly taller and narrower compared to the main bioViz.org homepage, which is causing Chrome to have a vertical scroll bar that is not present on the main BioViz.org
• https://test.bioviz.org/download.html has a different download button symbol and font than the main version, https://www.bioviz.org/download.html
  The same thing can be seen on https://test.bioviz.org/otherDownloads.html
• Font on the Credits page (https://test.bioviz.org/credits.html) is different than the main BioViz.org Credits page, and the white part of the page on the test version appears narrower and taller than the main version.
• Same font and page layout issues can be seen on the Help page, "How to cite IGB" page, and "Overview" page.
• The test version of BioViz Connect has the text underneath the photo extending out, where it is supposed to start and end at the photo's borders
• The "Sign in with your CyVerse ID" button is different on the test version on Connect, but it looks a lot better in my opinion.

Overall there are no issues regarding the links of buttons and text. However, the font, button symbols, and dimensions of some pages are different compared to the main BioViz.org

Re-assigning this ticket to the original developer: Philip Badzuh

Thanks for starting work on this Philip Badzuh! If you get this email, please reply to [~aloraine]

I got your email [~aloraine], and no problem. I have updated the branch below with the following changes:

https://bitbucket.org/pbadzuh/bioviz_pbdev/branch/IGBF-2442#diff

• Make font styling and sizing resemble bioviz on all pages.
• Update menu bar spacing.
• Keep the most similar-looking download icon from font awesome, since glyphicons were discontinued in bootstrap. Please let me know if you have another preference.
• Keep default bootstrap 4 paragraph spacing, to improve readability.

And at the genome dashboard branch:

https://bitbucket.org/pbadzuh/genome-dashboard_pbdev/branch/IGBF-2442#diff

• Prevent search query text from trailing behind 'X' symbol.

Please let me know your thoughts.

Did you intend to commit more changes to IGBF-2442?
I only see one change to style.css:

.searchbar .search_input {
  max-width: 100%;
  padding-right: 50px;
}

Yes, I believe that is the only change required for genome dashboard. All the other changes that were mentioned were made to bioviz.

OK thanks! Please submit PR when convenient.

Please see the PRs below:
https://bitbucket.org/lorainelab/bioviz/pull-requests/45/igbf-2442-update-font-size-and-style-to/diff

https://bitbucket.org/lorainelab/genome-dashboard/pull-requests/25/igbf-2442-update-search-input-styling-to/diff

[~aloraine]
https://test.bioviz.org cannot be reached

https://test.bioviz.org is now available. Sorry for the inconvenience Jay Chamma

The search input and the font on https://test.bioviz.org and https://www.bioviz.org/ are in sync now.
Moving the ticket to Done.