Uploaded image for project: 'IGB'
  1. IGB
  2. IGBF-2274

Create genome dashboard showing genome pictures for quickly going to a genome

    Details

    • Type: Task
    • Status: Closed (View Workflow)
    • Priority: Major
    • Resolution: Done
    • Affects Version/s: None
    • Fix Version/s: None
    • Labels:
      None
    • Story Points:
      2
    • Sprint:
      Spring 3 : 17 Feb to 28 Feb, Spring 4 : 2 Mar to 13 Mar, Spring 5 : 16 Mar to 27 Mar, Spring 6 : 30 Mar to Apr 10, Spring 7 : 13 Apr to 24 Apr, Spring 8 : 24 Apr to 8 May, Spring 8 : 11 May to 25 May

      Description

      Let's create a single page app (or even simpler) that shows images representing genomes.

      When a user clicks on an image, IGB (if it is running) will load the genome.

      See:

      https://wiki.transvar.org/display/igbman/Controlling+IGB+using+IGB+Links

      Example link:

      http://localhost:7085/UnibrowControl?version=A_thaliana_Jun_2009

      Valid versions are available in the first first column from:
      http://igbquickload.org/quickload/contents.txt

      Please add to the BioViz code base.

      Note that if you want to use other versions of javascript or bootstrap libraries than are used elsewhere on the site, that's fine.

      Also, more than one person is welcome to work on this.

      Karthik Raveendran
      Sameer Shanbhag

        Attachments

          Activity

          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -

          Currently working on the Genome Dashboard Design:
          https://bitbucket.org/sshanbh1/presentation-ui/src/master/

          Working live demo:
          http://54.164.191.150:3000/

          P.S. Prof. [~aloraine]

          I am currently working on making the image clickable and adding a popover king of notification to notify users to start IGB before they click on any links.

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - Currently working on the Genome Dashboard Design: https://bitbucket.org/sshanbh1/presentation-ui/src/master/ Working live demo: http://54.164.191.150:3000/ P.S. Prof. [~aloraine] I am currently working on making the image clickable and adding a popover king of notification to notify users to start IGB before they click on any links.
          Hide
          ann.loraine Ann Loraine added a comment -

          Thank you Sameer Shanbhag for the update.

          Please change the permissions of https://bitbucket.org/sshanbh1/presentation-ui/src/master/. I am not able to see it.

          If for some reason you do not want to make it publicly visible, you can add my email account ann.loraine@uncc.edu.

          Show
          ann.loraine Ann Loraine added a comment - Thank you Sameer Shanbhag for the update. Please change the permissions of https://bitbucket.org/sshanbh1/presentation-ui/src/master/ . I am not able to see it. If for some reason you do not want to make it publicly visible, you can add my email account ann.loraine@uncc.edu.
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment - - edited

          Hi Prof. [~aloraine]

          The repository is now Public. I have used Express and Node JS for this project.

          P.S. Please check the live demo for the recent changes.

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - - edited Hi Prof. [~aloraine] The repository is now Public. I have used Express and Node JS for this project. P.S. Please check the live demo for the recent changes.
          Hide
          ann.loraine Ann Loraine added a comment -

          OK thanks!

          Tomorrow, please describe your thoughts on how to deploy into production.

          For example, does it make sense for it to be deployed as part of the bioviz static content? Should we deploy to an EC2 similar to your current configuration?

          Show
          ann.loraine Ann Loraine added a comment - OK thanks! Tomorrow, please describe your thoughts on how to deploy into production. For example, does it make sense for it to be deployed as part of the bioviz static content? Should we deploy to an EC2 similar to your current configuration?
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -

          Change Log for Today:
          Added Readme.md
          Added support to the website so that it can now check if IGB is running or not. If IGB is not running it shows a Toast.

          The changes mentioned above are currently live: http://54.164.191.150:3000/

          Future Worklog:
          Check how to hook Apache with Node to run this app and Document it
          Make the Card clickable so that it loads the latest genome in IGB

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - Change Log for Today: Added Readme.md Added support to the website so that it can now check if IGB is running or not. If IGB is not running it shows a Toast. The changes mentioned above are currently live: http://54.164.191.150:3000/ Future Worklog: Check how to hook Apache with Node to run this app and Document it Make the Card clickable so that it loads the latest genome in IGB
          Hide
          ann.loraine Ann Loraine added a comment - - edited

          Looking better and better!

          Can you make these improvements?

          • The name of the genome should use the proper IGB name – e.g., A_lyrata_Apr_2011. Note this needs to include the underscores matching exactly what is seen in the genome menu in IGB itself. If at all possible, add a clickable "?" icon that states:

          "This genome version is also called: [insert comma-separated list of genome version synonyms normally shown when the user mouses over a genome version selection in the IGB genome version menu]"

          • Remove the link to NCBI taxonomy database. That database is for the species, not the genome. Also, the latest version of the genome present in NCBI is not always the version visible in IGB.
          • Make the image itself a hyperlink to open up the latest genome in IGB. Somehow signal that it is clickable when the user hovers over it – maybe it can change color or something?
          • Please change the text to: "Open in IGB" not "Open on IGB".
          • If a user clicks the genome but is not yet running IGB, can you display some kind of popup that links the IGB download page? (This is in addition to the toast message in the top right)
          Show
          ann.loraine Ann Loraine added a comment - - edited Looking better and better! Can you make these improvements? The name of the genome should use the proper IGB name – e.g., A_lyrata_Apr_2011. Note this needs to include the underscores matching exactly what is seen in the genome menu in IGB itself. If at all possible, add a clickable "?" icon that states: "This genome version is also called: [insert comma-separated list of genome version synonyms normally shown when the user mouses over a genome version selection in the IGB genome version menu] " Remove the link to NCBI taxonomy database. That database is for the species, not the genome. Also, the latest version of the genome present in NCBI is not always the version visible in IGB. Make the image itself a hyperlink to open up the latest genome in IGB. Somehow signal that it is clickable when the user hovers over it – maybe it can change color or something? Please change the text to: "Open in IGB" not "Open on IGB". If a user clicks the genome but is not yet running IGB, can you display some kind of popup that links the IGB download page? (This is in addition to the toast message in the top right)
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -

          Question:
          Where can I get this information: "This genome version is also called: [insert comma-separated list of genome version synonyms normally shown when the user mouses over a genome version selection in the IGB genome version menu]"

          Change Log:
          Remove NCBI Link
          Changed text from: "View on IGB" to "View in IGB"

          Current task:
          On Clicking on a genome if IGB is not running Display some kind of popup that links the IGB download page.

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - Question: Where can I get this information: "This genome version is also called: [insert comma-separated list of genome version synonyms normally shown when the user mouses over a genome version selection in the IGB genome version menu] " Change Log: Remove NCBI Link Changed text from: "View on IGB" to "View in IGB" Current task: On Clicking on a genome if IGB is not running Display some kind of popup that links the IGB download page.
          Hide
          ann.loraine Ann Loraine added a comment -

          Noor Zahara - are you available for a quick task?

          Sameer Shanbhag needs to know where the IGB codebase is getting the tooltips that are displayed when a user hovers the mouse over items in the Genome Version menu of Current Genome tab? I think it is coming from one of the ".txt" files in the code base – possibly species.txt. Can you check?

          (I have a meeting in a half hour I have to get ready for, but I don't want Sameer to be blocked because he is waiting for me to do a thing

          Show
          ann.loraine Ann Loraine added a comment - Noor Zahara - are you available for a quick task? Sameer Shanbhag needs to know where the IGB codebase is getting the tooltips that are displayed when a user hovers the mouse over items in the Genome Version menu of Current Genome tab? I think it is coming from one of the ".txt" files in the code base – possibly species.txt. Can you check? (I have a meeting in a half hour I have to get ready for, but I don't want Sameer to be blocked because he is waiting for me to do a thing
          Hide
          noor91zahara Noor Zahara (Inactive) added a comment - - edited

          Sure. I will check and confirm.

          I think it is mostly from igb.properties file.

          Sameer Shanbhag - Kindly confirm if that is what is required.

          Show
          noor91zahara Noor Zahara (Inactive) added a comment - - edited Sure. I will check and confirm. I think it is mostly from igb.properties file. Sameer Shanbhag - Kindly confirm if that is what is required.
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -

          Link to Species.txt: https://wiki.transvar.org/download/attachments/19955940/species.txt?api=v2
          Link to content.txt: http://quickload.bioviz.org/quickload/contents.txt

          I just wanted to know exactly what is to be added to the tooltip. An example would be helpful.

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - Link to Species.txt: https://wiki.transvar.org/download/attachments/19955940/species.txt?api=v2 Link to content.txt: http://quickload.bioviz.org/quickload/contents.txt I just wanted to know exactly what is to be added to the tooltip. An example would be helpful.
          Hide
          ann.loraine Ann Loraine added a comment -

          Sorry, I guess species.txt is not the file that contains the genome version synonyms. Maybe it is synonyms.txt?

          Noor Zahara hopefully can find it!

          Show
          ann.loraine Ann Loraine added a comment - Sorry, I guess species.txt is not the file that contains the genome version synonyms. Maybe it is synonyms.txt? Noor Zahara hopefully can find it!
          Hide
          ann.loraine Ann Loraine added a comment -

          When you find it, the various synonyms are listed after the proper IGB genome version name. There can be different numbers of synonyms so watch out for that!

          Show
          ann.loraine Ann Loraine added a comment - When you find it, the various synonyms are listed after the proper IGB genome version name. There can be different numbers of synonyms so watch out for that!
          Hide
          noor91zahara Noor Zahara (Inactive) added a comment - - edited
          Show
          noor91zahara Noor Zahara (Inactive) added a comment - - edited synonyms.txt is the file that contains genome version details- https://bitbucket.org/lorainelab/integrated-genome-browser/src/master/core/synonym-lookup/src/main/resources/
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -

          Added Deployment to EC2 Steps in Readme File:
          https://bitbucket.org/sshanbh1/presentation-ui/src/master/

          The procedure has been implemented on dev-appstore-1. The Website is available at http://dev-appstore-1.bioviz.org/
          Currently supports https.

          Next Steps:
          1. Configure default-ssl.conf file in Apache to support nodejs implementation
          2. Fix minor bugs on UI
          3. Change the way the modal looks.

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - Added Deployment to EC2 Steps in Readme File: https://bitbucket.org/sshanbh1/presentation-ui/src/master/ The procedure has been implemented on dev-appstore-1. The Website is available at http://dev-appstore-1.bioviz.org/ Currently supports https. Next Steps: 1. Configure default-ssl.conf file in Apache to support nodejs implementation 2. Fix minor bugs on UI 3. Change the way the modal looks.
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -

          Pushed the changes having steps to publish the dashboard using https

          Please follow the steps:
          https://bitbucket.org/sshanbh1/presentation-ui/src/master/README.md

          Current Status:
          1. Configure default-ssl.conf - Completed
          2. Name not found bug - Fixed
          3. Improve Modal Popup - In Progress
          4. Fix UI bugs - In Progress

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - Pushed the changes having steps to publish the dashboard using https Please follow the steps: https://bitbucket.org/sshanbh1/presentation-ui/src/master/README.md Current Status: 1. Configure default-ssl.conf - Completed 2. Name not found bug - Fixed 3. Improve Modal Popup - In Progress 4. Fix UI bugs - In Progress
          Hide
          ann.loraine Ann Loraine added a comment -

          Deployment info:

          Let's run the site on a separate "micro-instance" of an AWS EC2.
          The production site will be:

          or

          and etc....

          Note:

          https protocol for security and safety.

          Also note:

          We need to avoid hard-coding the domain. So the Apache configuration instructions need to account for different domain names.

          Show
          ann.loraine Ann Loraine added a comment - Deployment info: Let's run the site on a separate "micro-instance" of an AWS EC2. The production site will be: https://genomes.bioviz.org The genome dashboard should be what people see when they open this URL - the equivalent of "index.html". For testing and demo purposes, we'll stand up other instances, also on VMs. For those, we'll call it other things – e.g., https://sameers-genome-dashboard.bioviz.org or https://testing-the-genome-dashboard.bioviz.org and etc.... Note: https protocol for security and safety. Also note: We need to avoid hard-coding the domain. So the Apache configuration instructions need to account for different domain names.
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -

          Prof. [~aloraine]
          I have updated the README.md with the final changes and pushed the changes: https://bitbucket.org/sshanbh1/presentation-ui/src/master/

          The website is live: http://sameer.bioviz.org/

          All the above-mentioned requirements are taken care of. Please let me know if there are any required changes to be done.

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - Prof. [~aloraine] I have updated the README.md with the final changes and pushed the changes: https://bitbucket.org/sshanbh1/presentation-ui/src/master/ The website is live: http://sameer.bioviz.org/ All the above-mentioned requirements are taken care of. Please let me know if there are any required changes to be done.
          Hide
          ann.loraine Ann Loraine added a comment - - edited

          Change requests:

          • http://quickload.bioviz.org/quickload/contents.txt' - why use this instead of contents.txt from the main igbquickload site – igbquickload.org/quickload/contents.txt? They are supposed to be mirrors of each other, but quickload.bioviz.org is the backup site for igquickload.org. Please use igbquickloard.org instead.
          • The main quickload site often changes. I add new species and genome assemblies frequently. The genome dashboard code needs to be able to handle this. What happens if a genome and species show up that don't have an image?
          • Is it possible to get the images directly from the IGB code base? The names of the files all follow the same pattern, so you could link to them some of them from the dashboard.

          As an example, here is the path to Arabidopsis lyrata:

          https://bitbucket.org/lorainelab/integrated-genome-browser/src/master/core/common/src/main/resources/images/A_lyrata.png

          Show
          ann.loraine Ann Loraine added a comment - - edited Change requests: utility/util.js uses this URL: https://wiki.transvar.org/download/attachments/19955940/species.txt?api=v2 ' It is extremely likely this link will break. Instead, link to synonyms.txt which is version controlled and maintained in the IGB code base itself. http://quickload.bioviz.org/quickload/contents.txt ' - why use this instead of contents.txt from the main igbquickload site – igbquickload.org/quickload/contents.txt? They are supposed to be mirrors of each other, but quickload.bioviz.org is the backup site for igquickload.org. Please use igbquickloard.org instead. The main quickload site often changes. I add new species and genome assemblies frequently. The genome dashboard code needs to be able to handle this. What happens if a genome and species show up that don't have an image? Is it possible to get the images directly from the IGB code base? The names of the files all follow the same pattern, so you could link to them some of them from the dashboard. As an example, here is the path to Arabidopsis lyrata: https://bitbucket.org/lorainelab/integrated-genome-browser/src/master/core/common/src/main/resources/images/A_lyrata.png
          Hide
          ann.loraine Ann Loraine added a comment -

          A question:

          • Also, can the dashboard allow use of png format files instead of jpg? It would be nice if this were somewhat flexible to allow images of any format.
          Show
          ann.loraine Ann Loraine added a comment - A question: Also, can the dashboard allow use of png format files instead of jpg? It would be nice if this were somewhat flexible to allow images of any format.
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -

          Changelog:

          • Updated all the links to use IGB Codebase for Species and Synonyms file.
          • Update contents.txt tile URL from quickload.bioviz.org to igbquickload.org

          Regarding Images:

          • We can get the images from IGB codebase, but I am not sure how the images will look with our design. I can try doing that if required.

          Changes can be found:

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - Changelog: Updated all the links to use IGB Codebase for Species and Synonyms file. Update contents.txt tile URL from quickload.bioviz.org to igbquickload.org Regarding Images: We can get the images from IGB codebase, but I am not sure how the images will look with our design. I can try doing that if required. Changes can be found: https://bitbucket.org/sshanbh1/genome-dashboard/commits/1871339abfddd9cae7009c4316d4726821b64c52
          Hide
          ann.loraine Ann Loraine added a comment -

          The above URLs are good.
          Regarding images: Please stick with the current images if they look better than corresponding images in IGB itself. On second thought, since this an entirely different application with its own look, we should not blindly use the images in the git repository.

          Show
          ann.loraine Ann Loraine added a comment - The above URLs are good. Regarding images: Please stick with the current images if they look better than corresponding images in IGB itself. On second thought, since this an entirely different application with its own look, we should not blindly use the images in the git repository.
          Hide
          sameer Sameer Shanbhag (Inactive) added a comment -

          Change Log:

          • Implemented a dynamic approach for images.

          Requirement:

          • Image file must start with a common name eg. A_gambiae

          Changes can be found at:

          Show
          sameer Sameer Shanbhag (Inactive) added a comment - Change Log: Implemented a dynamic approach for images. Requirement: Image file must start with a common name eg. A_gambiae Changes can be found at: https://bitbucket.org/sshanbh1/genome-dashboard/commits/8145e77c141eedae4ee23a24a9ac9812cb8c1fe2

            People

            • Assignee:
              sameer Sameer Shanbhag (Inactive)
              Reporter:
              ann.loraine Ann Loraine
            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: