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

Design the user interface for Track Hubs converter website

    Details

    • Type: Task
    • Status: Closed (View Workflow)
    • Priority: Major
    • Resolution: Done
    • Affects Version/s: None
    • Fix Version/s: None
    • Labels:
      None
    • Story Points:
      3
    • Sprint:
      Spring 4 2021 May 3 - May 14, Spring 5 2021 May 17 - May 28, Spring 6 2021 May 31 - June 11, Summer 1 2021 Jun 14 - Jun 25, Summer 2 2021 Jun 28 - Jul 9

      Description

      Design and then test some UI designs.

        Attachments

          Issue Links

            Activity

            rweidenh Logan Weidenhammer (Inactive) created issue -
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Field Original Value New Value
            Epic Link IGBF-2831 [ 19524 ]
            ann.loraine Ann Loraine made changes -
            Sprint Spring 4 2021 May 3 - May 14 [ 120 ] Spring 4 2021 May 3 - May 14, Spring 5 2021 May 17 - May 28 [ 120, 121 ]
            ann.loraine Ann Loraine made changes -
            Rank Ranked higher
            ann.loraine Ann Loraine made changes -
            Assignee Rachel Weidenhammer [ rweidenh ] Ann Loraine [ aloraine ]
            ann.loraine Ann Loraine made changes -
            Status To-Do [ 10305 ] In Progress [ 3 ]
            Hide
            ann.loraine Ann Loraine added a comment - - edited

            Track hub functionality and workflow:

            A user visits the site. The home page shows a succinct overview and summary of what the site does, via the interface.

            The landing page should make it blindingly obvious what the site is for, and for whom. The landing page (the home page) should display a headline or tagline that succinctly explains what the site does. Examples of possible headlines include:

            • Use this site to view Track Hub data in Integrated Genome Browser.
            • Convert a UCSC Track Hub to a Quickload site for visualization in Integrated Genome Browser.
            • This site lets you view your track hub data in Integrated Genome Browser.
            • Transform a Track Hub into a Quickload data source for Integrated Genome Browser.

            The home page should summarize and explain the purpose of the site using simple, accessible language and easy-to-understand graphics.

            For example, the graphic could show a researcher sitting at a desk in the lab, looking at their computer. They see hundreds of Track Hub sites they normally would have to view using the UCSC Genome Browser, which is super-slow. Also, it only lets them view their own data if they set up a Track Hub of their own, which is hard. Thanks to the track hub converter, they can use IGB, which is faster and lets them look at their own data files without having to upload them to a server. Also, IGB lets them apply lots of different algorithms to their data, which helps them catch errors in data processing or discover new aspects of their data that purely numerical methods can't detect.

            Either on the landing page or on linked page, there will be an interface where a user can enter a Track Hub URL, click a button, and then get back another URL corresponding to a Quickload site the user can then enter into IGB and use to visualize the data.

            In addition, the interface will provide a way for a user to download the newly converted Quickload site as a folder package they can then open up and inspect on their local computer.

            The inspiration for the site comes from YouTube-to-mp3/mp4 converters that lets users download video an audio files from YouTube.

            Examples of youtube converters:

            Show
            ann.loraine Ann Loraine added a comment - - edited Track hub functionality and workflow: A user visits the site. The home page shows a succinct overview and summary of what the site does, via the interface. The landing page should make it blindingly obvious what the site is for, and for whom. The landing page (the home page) should display a headline or tagline that succinctly explains what the site does. Examples of possible headlines include: Use this site to view Track Hub data in Integrated Genome Browser. Convert a UCSC Track Hub to a Quickload site for visualization in Integrated Genome Browser. This site lets you view your track hub data in Integrated Genome Browser. Transform a Track Hub into a Quickload data source for Integrated Genome Browser. The home page should summarize and explain the purpose of the site using simple, accessible language and easy-to-understand graphics. For example, the graphic could show a researcher sitting at a desk in the lab, looking at their computer. They see hundreds of Track Hub sites they normally would have to view using the UCSC Genome Browser, which is super-slow. Also, it only lets them view their own data if they set up a Track Hub of their own, which is hard. Thanks to the track hub converter, they can use IGB, which is faster and lets them look at their own data files without having to upload them to a server. Also, IGB lets them apply lots of different algorithms to their data, which helps them catch errors in data processing or discover new aspects of their data that purely numerical methods can't detect. Either on the landing page or on linked page, there will be an interface where a user can enter a Track Hub URL, click a button, and then get back another URL corresponding to a Quickload site the user can then enter into IGB and use to visualize the data. In addition, the interface will provide a way for a user to download the newly converted Quickload site as a folder package they can then open up and inspect on their local computer. The inspiration for the site comes from YouTube-to-mp3/mp4 converters that lets users download video an audio files from YouTube. Examples of youtube converters: https://yt1s.com/en5 https://ytmp3.cc/youtube-to-mp3/
            ann.loraine Ann Loraine made changes -
            Status In Progress [ 3 ] To-Do [ 10305 ]
            ann.loraine Ann Loraine made changes -
            Assignee Ann Loraine [ aloraine ] Rachel Weidenhammer [ rweidenh ]
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Status To-Do [ 10305 ] In Progress [ 3 ]
            Hide
            rweidenh Logan Weidenhammer (Inactive) added a comment -

            I would like to include these:
            "Convert a UCSC Track Hub to a Quickload site for visualization in Integrated Genome Browser.
            This site lets you view your track hub data in Integrated Genome Browser."

            The site will be one page:
            Link input box, > "processing" icon, > "download quickload here" button

            Can we have an 'Open in IGB' button on the site that launches the quickload like our remote quickloads can?

            Else include instructions for adding local quickload from IGB.

            Can this be on one page or does it need to be three, one for each step.

            Show
            rweidenh Logan Weidenhammer (Inactive) added a comment - I would like to include these: "Convert a UCSC Track Hub to a Quickload site for visualization in Integrated Genome Browser. This site lets you view your track hub data in Integrated Genome Browser." The site will be one page: Link input box, > "processing" icon, > "download quickload here" button Can we have an 'Open in IGB' button on the site that launches the quickload like our remote quickloads can? Else include instructions for adding local quickload from IGB. Can this be on one page or does it need to be three, one for each step.
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Status In Progress [ 3 ] To-Do [ 10305 ]
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Assignee Rachel Weidenhammer [ rweidenh ]
            ann.loraine Ann Loraine made changes -
            Sprint Spring 4 2021 May 3 - May 14, Spring 5 2021 May 17 - May 28 [ 120, 121 ] Spring 4 2021 May 3 - May 14, Spring 5 2021 May 17 - May 28, Spring 6 2021 May 31 - June 11 [ 120, 121, 122 ]
            ann.loraine Ann Loraine made changes -
            Rank Ranked higher
            inaylor Irvin Naylor (Inactive) made changes -
            Assignee Irvin Naylor [ inaylor ]
            inaylor Irvin Naylor (Inactive) made changes -
            Assignee Irvin Naylor [ inaylor ]
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Assignee Rachel Weidenhammer [ rweidenh ]
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Status To-Do [ 10305 ] In Progress [ 3 ]
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Status In Progress [ 3 ] To-Do [ 10305 ]
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Status To-Do [ 10305 ] In Progress [ 3 ]
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Attachment TrackHub0.pptx [ 16559 ]
            Hide
            rweidenh Logan Weidenhammer (Inactive) added a comment - - edited

            TrackHub0.pptx file attached.
            Link to blurrier version on google slides: https://drive.google.com/file/d/1dCdsZV9AX2CFTH8pVnYh_uuFuelmuTZQ/view?usp=sharing

            This is the first draft mockup of the converter website.
            I will be asking around for feedback next.

            Show
            rweidenh Logan Weidenhammer (Inactive) added a comment - - edited TrackHub0.pptx file attached. Link to blurrier version on google slides: https://drive.google.com/file/d/1dCdsZV9AX2CFTH8pVnYh_uuFuelmuTZQ/view?usp=sharing This is the first draft mockup of the converter website. I will be asking around for feedback next.
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Attachment TrackHub0.pptx [ 16559 ]
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Attachment TrackHub0.pptx [ 16560 ]
            Hide
            ann.loraine Ann Loraine added a comment -

            Request for screen #3:

            • Add a copy icon (looks like two pages on top of each other) to be displayed next to the link
            • When user clicks the icon, the text of the link gets copied to the user's clipboard
            • The link itself since it is user-facing should be user-friendly and easy to share
            Show
            ann.loraine Ann Loraine added a comment - Request for screen #3: Add a copy icon (looks like two pages on top of each other) to be displayed next to the link When user clicks the icon, the text of the link gets copied to the user's clipboard The link itself since it is user-facing should be user-friendly and easy to share
            Hide
            ann.loraine Ann Loraine added a comment -

            Here is a screen shot from tinyurl, which converts large urls to tiny ones. This is very similar to what we are doing with the track hub converter.

            Show
            ann.loraine Ann Loraine added a comment - Here is a screen shot from tinyurl, which converts large urls to tiny ones. This is very similar to what we are doing with the track hub converter.
            ann.loraine Ann Loraine made changes -
            Attachment tinyurl.png [ 16561 ]
            Hide
            ann.loraine Ann Loraine added a comment -

            Here is another example application from the link shortening space. Notice here the user has logged in to their account and information is available about how often a given converted URL has been clicked.

            Show
            ann.loraine Ann Loraine added a comment - Here is another example application from the link shortening space. Notice here the user has logged in to their account and information is available about how often a given converted URL has been clicked.
            ann.loraine Ann Loraine made changes -
            Attachment BitlyLinkConverter.png [ 16562 ]
            Hide
            rweidenh Logan Weidenhammer (Inactive) added a comment -

            Updated version with 'copy' button: https://drive.google.com/file/d/1dCdsZV9AX2CFTH8pVnYh_uuFuelmuTZQ/view?usp=sharing

            Omkar Marne, Could you give this a look and provide some feedback?
            Is there anything missing or that needs modification?

            Show
            rweidenh Logan Weidenhammer (Inactive) added a comment - Updated version with 'copy' button: https://drive.google.com/file/d/1dCdsZV9AX2CFTH8pVnYh_uuFuelmuTZQ/view?usp=sharing Omkar Marne , Could you give this a look and provide some feedback? Is there anything missing or that needs modification?
            Hide
            omarne Omkar Marne (Inactive) added a comment - - edited

            Logan Weidenhammer The UI looks pretty good. I think this should be fine.
            Also please share the code for this. I just need to take a look.

            Show
            omarne Omkar Marne (Inactive) added a comment - - edited Logan Weidenhammer The UI looks pretty good. I think this should be fine. Also please share the code for this. I just need to take a look.
            ann.loraine Ann Loraine made changes -
            Sprint Spring 4 2021 May 3 - May 14, Spring 5 2021 May 17 - May 28, Spring 6 2021 May 31 - June 11 [ 120, 121, 122 ] Spring 4 2021 May 3 - May 14, Spring 5 2021 May 17 - May 28, Spring 6 2021 May 31 - June 11, Summer 1 2021 Jun 14 - Jun 25 [ 120, 121, 122, 123 ]
            ann.loraine Ann Loraine made changes -
            Rank Ranked higher
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Link This issue relates to IGBF-2879 [ IGBF-2879 ]
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Status In Progress [ 3 ] To-Do [ 10305 ]
            Hide
            rweidenh Logan Weidenhammer (Inactive) added a comment -

            Now writing code for web page based on mockup. IGBF-2879

            Show
            rweidenh Logan Weidenhammer (Inactive) added a comment - Now writing code for web page based on mockup. IGBF-2879
            Hide
            rweidenh Logan Weidenhammer (Inactive) added a comment -

            No longer working on this design.
            There is potential for additional versions of the Track Hub site design in the future.

            Otherwise this issue can be closed.

            Show
            rweidenh Logan Weidenhammer (Inactive) added a comment - No longer working on this design. There is potential for additional versions of the Track Hub site design in the future. Otherwise this issue can be closed.
            rweidenh Logan Weidenhammer (Inactive) made changes -
            Assignee Rachel Weidenhammer [ rweidenh ]
            ann.loraine Ann Loraine made changes -
            Sprint Spring 4 2021 May 3 - May 14, Spring 5 2021 May 17 - May 28, Spring 6 2021 May 31 - June 11, Summer 1 2021 Jun 14 - Jun 25 [ 120, 121, 122, 123 ] Spring 4 2021 May 3 - May 14, Spring 5 2021 May 17 - May 28, Spring 6 2021 May 31 - June 11, Summer 1 2021 Jun 14 - Jun 25, Summer 2 2021 Jun 28 - Jul 9 [ 120, 121, 122, 123, 124 ]
            ann.loraine Ann Loraine made changes -
            Rank Ranked higher
            ann.loraine Ann Loraine made changes -
            Status To-Do [ 10305 ] In Progress [ 3 ]
            ann.loraine Ann Loraine made changes -
            Status In Progress [ 3 ] Needs 1st Level Review [ 10005 ]
            ann.loraine Ann Loraine made changes -
            Status Needs 1st Level Review [ 10005 ] First Level Review in Progress [ 10301 ]
            ann.loraine Ann Loraine made changes -
            Status First Level Review in Progress [ 10301 ] Ready for Pull Request [ 10304 ]
            ann.loraine Ann Loraine made changes -
            Status Ready for Pull Request [ 10304 ] Pull Request Submitted [ 10101 ]
            ann.loraine Ann Loraine made changes -
            Status Pull Request Submitted [ 10101 ] Reviewing Pull Request [ 10303 ]
            ann.loraine Ann Loraine made changes -
            Status Reviewing Pull Request [ 10303 ] Merged Needs Testing [ 10002 ]
            ann.loraine Ann Loraine made changes -
            Status Merged Needs Testing [ 10002 ] Post-merge Testing In Progress [ 10003 ]
            ann.loraine Ann Loraine made changes -
            Resolution Done [ 10000 ]
            Status Post-merge Testing In Progress [ 10003 ] Closed [ 6 ]
            ann.loraine Ann Loraine made changes -
            Assignee Ann Loraine [ aloraine ]
            ann.loraine Ann Loraine made changes -
            Link This issue relates to IGBF-2886 [ IGBF-2886 ]

              People

              • Assignee:
                ann.loraine Ann Loraine
                Reporter:
                rweidenh Logan Weidenhammer (Inactive)
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: