Please see the changes at my branch below:
https://bitbucket.org/pbadzuh/genome-dashboard_pbdev/branch/IGBF-2414#diff

Could you add a "png" image?

It seems that although there is a way to access the help.html by making an additional express.js route to it, many of the references in that file are specific to the bioviz resource space.

Modifying these hrefs to be absolute urls e.g. bioviz.org/resource.html would mean that test.bioviz.org would not be rendering its own pages, but rather those from bioviz.org, which doesn't make much sense.

So, I don't see a way of programmatically pulling in the navbar to the genome dashboard in a way that would honor the specific resources of all bioviz subdomains.

Please advise, [~aloraine]

I think I see the problem.

The menu.html file contains nothing but implied relative links that look like location.html. That is, their location on the network is implied to be the same place (directory) as the file that contains the link.

So I expect that if a user were to click a link "location.html" when viewing domainname/genome-dashboard, then their client Web browser will ask for domainname/genome-dashboard/location.html.

That's wrong of course

I can think of a work-around. There may be others that are better.

Possible work-around: Whatever code in app.js that grabs menu.html could parse all the links (all "a href=TEXT.html" tags) where "TEXT" never starts with http or https. It could then prepend the link with the server name and a slash, whatever the server name happens to be. Of course, the node application can't know in advance what the servername is. Only apache knows that, and even apache only knows what the server name because the playbooks add this information to its configuration file. The node app won't be able to read that file, but it might be able to get access to it from environment variables set up by apache when it runs. But I am skeptical that node would even be able to access the environment variables because node runs in a separate process from apache.

However, when we deploy the node app onto a bioviz host, we could configure the playbooks to edit or create some kind of configuration file that the app could read, find out what the server name is, and then add the server name prefix as needed to the menu.html links.

If you want to try out these ideas on test.bioviz.org, go for it.

I'll try to work on making a parser that modifies the href urls based on domain name. Node.js can access environment variables, so I think it would be easiest to configure ansible playbook to set one for the domain name.

Another option could be to add the domain name in the deployment step.

How this could work:

• In your app.js, you could reference a file called menu.html but don't actually add it to the codebase
• In your code, you could add some kind of if-then statement that tries to load menu.html if it's available, but doesn't try to load it if not
• In the ansible playbooks, we'll write a "play" that literally copies the menu.html from the bioviz codebase, edits it so that all local links contain the ServerName, and then copy the file to the expected location in the deployed genome-dashboard codebase.

In theory, the links contained in menu.html will all work because they will contain the correct address - e.g., https://foo.com/whatever.html instead of just whatever.html.

It's super easy to get ansible to do this type of thing and it might be easier than trying to get the javascript to do it. If I understand the stack correctly, the javascript would have to be running in the client. That means that thousands (we hope !) of web browsers would run a bit of code that our server could do literally once per deployment. Doing the processing in the client a bunch of times uses up way more electricity than doing it only once when we deploy.

Note: Because the scope changed a lot, I updated the title to "Investigate." The goal now is to try out some ideas and see if we can get one or some of them to work.

ansible playbooks: https://bitbucket.org/lorainelab/bioviz-playbooks

Please see the changes at my branch:
https://bitbucket.org/pbadzuh/genome-dashboard_pbdev/branch/IGBF-2414#diff

These changes add the bioviz top menu to genome dashboard.

In order to do this in a way that responds to changes made to bioviz, ansible can be used to:

• copy the menu file from repo/menu.html
• modify that file to not import scripts (currently imported in genome dashboard) and to have links point to domain/resource
• copy the css file from repo/less/style.css
• use the less css preprocessor to modify that file, making it only target the TopNav div, which contains the menu on genome dashboard

These steps were done manually and can be automated using ansible

This would mean that
public/html/menu.html
and
public/stylesheets/topnav.bioviz.css
can be omitted from the current commit, once ansible is set up to pull and modify them. They are currently included to show proof of concept.

For the next steps, edit the above comment describing manual steps to make them more clear so that we can translate into a shell script.

• what is "repo" ? (instruction 1)
• which file is "that file" ? (instruction 2)
• which lines the "that file" should the file be modified to not import scripts (instruction 2)?
• are we supposed to copy style.css from directory repo/less ? (instruction 3)
• what is the "less css processor" and which file is supposed to be modified? (instruction 4)

Please see my changes at the branch below:
https://bitbucket.org/pbadzuh/bioviz-playbooks_pbdev/branch/IGBF-2414#diff

I was able to accomplish the end goal using only ansible modules. I tested running the install, clone, and menu (new) roles for the bioviz host for simplicity. Please see the attached screenshots of the net effect of the changes. I added comments and verbose task names to make what I did as clear as possible and also updated the README file to help anyone else trying to run ansible. Please let me know what you think.

Note: If you try to run this, it will likely fail until you first merge in the recent changes to genome dashboard - one of which creates an html folder, which is required for the file copying steps.

I have a quick change request before I look more carefully at the new bioviz-playbook code.

Can you put the new role into a directory just for it within the directory named "roles", following the convention?

For example, see how there is a role named "ec2" which resides in a directory named "ec2" within the directory "roles."

Then you can add it to the setup.yml file.

Fixed. I must have accidentally copied the folder contents of the menu role instead of the folder itself to the roles directory

As per discussion with PB and AL, make uaparser.js link refer to a CDN instead of Bioviz.org if possible. Otherwise, add uaparse.js to genome dashboard repo?

When done, move back to First Level Review.

Please see my GD branch below:
https://bitbucket.org/pbadzuh/genome-dashboard_pbdev/branch/IGBF-2414#diff

Once the changes above are merged into GD master, it should be safe to merge the changes at the below branch into bioviz playbooks master
https://bitbucket.org/pbadzuh/bioviz-playbooks_pbdev/branch/IGBF-2414#diff

Please proceed with PRs.

Please see PRs here:
https://bitbucket.org/lorainelab/genome-dashboard/pull-requests/17/igbf-2414/diff

https://bitbucket.org/lorainelab/bioviz-playbooks/pull-requests/1/igbf-2414-create-an-ansible-role-for/diff

Merged to respective main branches.

Error when running bioviz-playbooks:

"TASK [menu : Copy bioviz menu content to genome dashboard] *********************
fatal: [18.209.116.108]: FAILED! => changed=false
msg: Destination directory /var/www/genome-dashboard/public/html does not exist"

The following commit should probably be reverted:

• 24bc45c IGBF-2414: Delete bioviz nav files to be generated by an ansible role

First, removing the files in public/html also removes the directory.
Second, not having these files available for checkout will likely break genome-dashboard when deployed locally unless some clever "if" style statements are included that prevent the application from rendering the menu if the menu and its style sheet are not available.

Adding "html" directory with "README.md" file containing documentation.

Adding the README.md file to the above directory fixed the playbook and I was able to view the dashboard with bioviz menu at https://test.bioviz.org.

The new genome dashboard application shows the menu, which is good, but there is also a lot of vertical white space separating the menu from the genome dashboard title. To achieve proper visual balance, the whitespace above and below the title should be the same.

Fixed layout of title using in-line css.
Previously, the element class was configured to use the same styling as the tiles, which was not good because it was impossible to change the styling of the title without affecting the tiles.

Deployed to test.bioviz.org but links are not working.

Fixed links. Problem was that ServerName was getting inserted into the links without "https://".

Deployed to bioviz main.

Moving to needs testing.

To test:

• Check links and basic functionality on Safari, Chrome, Firefox using https://bioviz.org
• Deploy genome-dashboard on your local host and confirm that genome dashboard can run and that the menu is rendered.

Please see my branch below:
https://bitbucket.org/pbadzuh/genome-dashboard_pbdev/branch/IGBF-2414#diff

Changes

• Remove 24bc45c IGBF-2414: Delete bioviz nav files to be generated by an ansible role
• The nav bar is now present when developing locally
• Update readme
• Move styling to css file

I had to reset and cherry-pick in order to make these changes, and there may be conflicts with your master branch. It may be easiest to reset your master to the commit below and then do another merge:

45eddae Merged in IGBF-2407 (pull request #16) IGBF-2407: Fix safari button background color

Please let me know what you think.

Change request:

For simplicity, do please make a new branch from the latest master and commit the new code to the new branch.

Sure, please see the changes at the new branch:
https://bitbucket.org/pbadzuh/genome-dashboard_pbdev/branch/IGBF-2414-2#diff

Please submit PR.

Please see PR here:
https://bitbucket.org/lorainelab/genome-dashboard/pull-requests/18/igbf-2414-2/diff

Merged and deployed to test and main.

Post merge test:

Results:

• Menu bar appears in the Genome Dashboard and every link in the menu bar works as intended.

Steps I took to test this.
1. Visited https://www.bioviz.org/genome-dashboard
2. Confirmed the presence of the menu bar, and that it's the same as the one on the home page of BioViz
3. Confirmed that every link in the menu bar works

• Moving this issue to Done and re-assigning it to Philip Badzuh