7033f67074594c3d9cc3487f079456928fdf3260 angie Tue Apr 12 13:46:14 2016 -0700 Major change to hgGateway: the contents are replaced by a new page designed by a graphic artist. It has icons for selecting popular species, an autocomplete input for typing in species or common names, as well as a phylogenetic tree display that shows the relationships of the species that we host. It has a menu for selecting the assembly of the selected species' genome and the usual assembly description. refs #15277 diff --git src/hg/hgGateway/hgGateway.html src/hg/hgGateway/hgGateway.html new file mode 100644 index 0000000..04f3fbf --- /dev/null +++ src/hg/hgGateway/hgGateway.html @@ -0,0 +1,249 @@ + <!-- For determining width of scrollbar (if there is one) --> + <div id="sbTestContainer"> + <div id="sbTestContainerDPlain"></div> + <div id="sbTestContainerDScroll" style="overflow: scroll;"> + <div id="sbTestContainerDInsideScroll"></div> + </div> + </div> + + <div id="pageContent"> + + <div id="selectSpeciesSection" class="jwColumn" style="width: 450px;"> + <div class="jwSectionTitle"> + Browse/Select Species + </div> + <div class="jwSectionContents"> + + <div class="jwSubsectionTitle"> + Model Species + </div> + <div class="jwSubsectionContents"> + <div class="jwIconWrapper"> + <div class="jwIconSprite jwIconSpriteHuman"></div> + <div class="jwIconSpriteLabel">Human</div> + </div> + <div class="jwIconWrapper"> + <div class="jwIconSprite jwIconSpriteMouse"></div> + <div class="jwIconSpriteLabel">Mouse</div> + </div> + <div class="jwIconWrapper"> + <div class="jwIconSprite jwIconSpriteRat"></div> + <div class="jwIconSpriteLabel">Rat</div> + </div> + <div class="jwIconWrapper"> + <div class="jwIconSprite jwIconSpriteFly"></div> + <div class="jwIconSpriteLabel">Fruitfly</div> + </div> + <div class="jwIconWrapper"> + <div class="jwIconSprite jwIconSpriteWorm"></div> + <div class="jwIconSpriteLabel">Worm</div> + </div> + <div class="jwIconWrapper"> + <div class="jwIconSprite jwIconSpriteYeast"></div> + <div class="jwIconSpriteLabel">Yeast</div> + </div> + <div> + <input id="speciesSearch" value="" size=40> + </div> + </div> + + <div class="jwSubsectionTitle"> + Represented Species + </div> + <div id="speciesGraphic" class="jwSubsectionContents"> + <div id="sliderWidgetContainer" class="jwSliderWidget"> + <div id="sliderSvgContainer" class="jwSliderIcon" style="display: none;"> + <svg id="sliderSvg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + version="1.1" + height="53" + width="30"> + <rect id="sliderRectangle" + ry="3" + y="1.5" + x="1.5" + height="50" + width="24" + style="fill: none; stroke: #222222; stroke-width: 3;"></rect> + <path id="sliderTriangle" + d="m 2.5,24 0,6 4,-3 z" + style="fill: #222222; stroke: #222222; stroke-width: 3"></path> + </svg> + </div> <!-- sliderSvgContainer --> + <div class="jwRainbowSlider" id="rainbowSlider"> + <!-- JS will populate this --> + </div> + </div> + <div class="jwSpeciesPicker" id="speciesPicker"> + <div id="speciesTreeContainer" class="jwColumn" style="overflow: visible;"> + <svg id="speciesTree" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <!-- The y coordinates of these will be overwritten by JS. --> + <!-- I tried creating them in JS, but then the image style + url('#clipWhatever') didn't work. --> + <clipPath id="clipHuman"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipMouse"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipFly"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipWorm"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipYeast"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipMonkey"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipHedgehog"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipPig"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipCow"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipOrca"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipHorse"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipDog"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipWalrus"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipBat"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipElephant"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipManatee"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipArmadillo"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipKangaroo"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipBird"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipLizard"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipFrog"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipFish"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + <clipPath id="clipEbola"> + <rect x="2" y="0" width="65" height="65"></rect> + </clipPath> + </defs> + <style> + text { + stroke:none; + fill: black; + font-size: 12px; + text-anchor: end; + letter-spacing: 0.025em; + cursor: pointer; + } + text:hover, text.selected { + fill: #31469A; /* rainbow dark blue: */ + font-weight: bold; + } + text.trackHubsLink { + text-anchor: start; + } + line { + stroke: #4b759d; + stroke-width: 1; + } + line:hover { + stroke-width: 2; + } + </style> + + <!-- Tree inserted here by JS --> + + </svg> + </div> <!-- speciesTreeContainer --> + </div> <!-- speciesPicker --> + + </div> <!-- subsection contents --> + + </div> + </div> + + <div id="findPositionSection" class ="jwColumn"> + <div class="jwSectionTitle"> + Find Position + </div> + <div class="jwSectionContents"> + + <div id="findPosInputContainer" style="display: inline-block;"> + <div id="selectAssemblyLabel" class="jwInputLabel">Assembly</div> + <select id="selectAssembly"> + </select> + + <div class="vertSpacerAbovePosition"></div> + + <div class="jwInputLabel"> + Position: + <span id="positionDisplay" class="jwPosDisplay"></span> + <i id="copyPosition" class="fa fa-copy jwTextBlue" + title="Copy the current position into the input below"></i> + </div> + <input id="positionInput" value="" size="40"> + </div> + + <div class="jwGoButtonContainer" + title="Go to the Genome Browser"> + <div class="jwGoButton"> + GO + </div> + <i class="jwGoIcon fa fa-play fa-2x"></i> + </div> + + <div class="vertSpacerBelowPosition"></div> + + <div id="descriptionTitle" class="jwDescriptionTitle"> + <b><span id="descriptionGenome"></span> Genome Browser</b> - + <span id="descriptionDb"></span> assembly + <div class="jwFloatRight"> + <a id="chromInfoLink" class="jwAnchor" href="hgTracks?chromInfoPage=&hgsid=$hgsid"> + <div class="jwWhiteButton"> + view sequences + </div> + </a> + </div> + </div> + <div id="descriptionTextTop" class="jwDescriptionText"> + </div> + <div id="descriptionAnchors" class="jwDescriptionText"> + </div> + <div style="clear: both;"></div> + <div id="descriptionTextBottom" class="jwDescriptionText"> + </div> + + </div> + </div> + + </div> + + <div style="clear: both;"></div>