gramene-search 1.2.95 → 1.3.0

package/dist/index.css

@@ -1,6 +1,6 @@
 .gramene-sidebar {
-  max-width: 16.67%;
   background-color: #557b74;
+  width: 250px;
   padding-bottom: 8px;
   padding-left: 8px;
   padding-right: 8px;
@@ -8,16 +8,16 @@
 }
 
 .sorghumbase-sidebar {
-  max-width: 16.67%;
   background-color: #a03e34;
+  width: 250px;
   padding-bottom: 8px;
   padding-left: 8px;
   padding-right: 8px;
   position: fixed;
 }
 
-.gramene-filter-container {
-  background-color: #9bbf6d;
+.gramene-filter-container, .sorghumbase-filter-container {
+  background-color: #fff3a9;
   padding-bottom: 4px;
   padding-left: 4px;
 }
@@ -73,12 +73,12 @@
 }
 
 .gramene-view-header {
-  width: 100%;
   color: #a03e34;
   background-color: #fff3a96e;
   border-top: solid #557b74;
   flex-wrap: nowrap;
   justify-content: space-evenly;
+  width: 100%;
   font-size: larger;
   font-weight: bold;
   display: flex;
@@ -106,6 +106,7 @@
 }
 
 .gramene-view-span-off {
+  cursor: pointer;
   vertical-align: text-bottom;
   color: #a9a9a9;
   padding-left: 5px;
@@ -147,443 +148,264 @@
   border-color: #6c757d;
 }
 
-.accordion-button {
-  padding: .4rem !important;
+.visible-detail {
+  border: 1px solid #557b74;
+  padding: 6px 12px;
 }
 
-.accordion-button:hover {
-  background-color: #dbe8f3;
+.detail {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
-.taxogenomic-vis .gramene-search-vis {
-  -webkit-user-select: none;
-  cursor: pointer;
+.table {
+  width: 100%;
+  max-width: 100%;
 }
 
-.taxogenomic-vis .gramene-search-vis canvas {
-  position: absolute;
+.xrefs {
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: fixed;
+  border-color: gray;
 }
 
-.taxogenomic-vis .gramene-search-vis > * {
-  display: inline;
+.xref-name-col {
+  width: 20%;
 }
 
-.taxogenomic-vis .gramene-search-vis text {
-  fill: gray;
-  stroke: #557b74;
-  stroke-opacity: 0;
-  stroke-width: .5px;
-  -webkit-user-select: none;
-  user-select: none;
-  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-  font-size: 12px;
+.xref-value-col, .xref-80-col {
+  width: 80%;
 }
 
-.taxogenomic-vis .gramene-search-vis text::selection {
-  background: none;
+.xref-70-col {
+  width: 70%;
 }
 
-.taxogenomic-vis .gramene-search-vis .taxonomy * {
-  transition: fill .2s ease-in-out, stroke-opacity .2s ease-in-out;
+.xref-10-col {
+  width: 10%;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .results-count {
-  font-size: 10px;
+.xref-id-list {
+  padding-left: 0;
+  list-style: none;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .node circle {
-  stroke: #557b74;
-  stroke-width: 1px;
-  fill: #f6f6f6;
+.result-gene {
+  border: 5px solid #fff;
+  padding: .2em;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .edge rect {
-  fill: #ccc;
+.result-gene:hover {
+  border-color: #faebd7;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .node > circle, .taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .edge > rect {
-  fill: #f0b866;
+.gene-id {
+  color: #000;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .node-label text {
-  fill: #557b74;
-  stroke-opacity: 1;
+.gene-name {
+  color: #557b74;
+  margin-bottom: 0;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .node:hover > circle, .taxogenomic-vis .gramene-search-vis .clade .edge:hover > circle, .taxogenomic-vis .gramene-search-vis .clade .node:hover > rect, .taxogenomic-vis .gramene-search-vis .clade .edge:hover > rect, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .node > circle, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .node > circle, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade .edge > rect, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade .edge > rect, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade .node > circle, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade .node > circle {
-  fill: #f0b866;
+.gene-description {
+  margin-bottom: 0;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .node-label text, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .node-label text, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade text, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade text, .taxogenomic-vis .gramene-search-vis .clade .node-label:hover text {
-  fill: #557b74;
-  stroke-opacity: 1;
+.gene-species {
+  white-space: nowrap;
+  font-size: small;
+  font-style: italic;
+  font-weight: bold;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .bin, .taxogenomic-vis .gramene-search-vis .clade .full-region {
-  stroke: #557b74;
-  stroke-width: 0;
-  shape-rendering: crispedges;
-  transition: none;
+.gene-synonyms {
+  font-size: small;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .bin.selected {
-  fill: #ea8e75;
+.gene-extras {
+  float: right;
+  border: 1px dashed #00f;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .bin:hover {
-  fill: #557b74;
+.gene-panlink {
+  float: right;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .full-region.selected {
-  stroke-width: 1px;
-  stroke: #ea8e75;
+.gene-panlink img {
+  vertical-align: top;
+  width: auto;
+  height: 60px;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .full-region:hover {
-  stroke-width: 1px;
-  stroke: #557b74;
+.gene-detail-tabs {
+  white-space: nowrap;
+  flex-wrap: wrap;
+  width: 80em;
+  display: flex;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .species-background {
-  fill: none;
+.gene-detail-tab-closed {
+  color: #006400;
+  cursor: pointer;
 }
 
-.taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .species-background, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .species-background, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade .species-background, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade .species-background, .taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .species-background {
-  fill: #f9e3c3;
+.gene-detail-tab-disabled {
+  color: #d3d3d3;
+  cursor: not-allowed;
 }
 
-.fasta-container {
-  background-color: #fcfffd;
-  border-style: dashed;
-  border-color: #557b74;
-  padding: 2ch;
-  line-height: .925em;
-  position: relative;
+.gene-detail-tab-empty {
+  color: #006400;
+  cursor: pointer;
+  font-style: oblique;
 }
 
-.styled-span {
-  text-align: center;
-  align-items: center;
-  display: flex;
+.gene-detail-tab-empty:before {
+  content: "Add ";
 }
 
-.vertical-line {
-  height: 20px;
-  background-color: #000;
-  flex-grow: 1;
+.gene-detail-tab-expanded {
+  color: #fff;
+  cursor: pointer;
+  background-color: #557b74;
 }
 
-.horizontal-line {
-  width: 57px;
-  height: 3px;
-  background-color: #000;
-  margin: 0;
+.result-gene-summary {
+  flex-flow: row;
+  justify-content: flex-start;
+  display: flex;
 }
 
-code.fasta {
-  white-space: pre-wrap;
-  color: #595959;
+.result-gene-summary .species-name {
+  white-space: nowrap;
+  font-style: italic;
 }
 
-.header {
-  color: #000;
+.result-gene-title-body {
+  flex: auto;
+  width: 1036px;
 }
 
-.upstream, .downstream {
-  color: #80a0a0;
+.model-ortholog, .closest-ortholog, .gene-summary-tair {
+  cursor: pointer;
+  border: 1px solid #ff8c00;
+  flex: auto;
+  width: 500px;
+  margin-top: 10px;
+  margin-left: 1rem;
+  padding: 0 1rem;
+  font-size: smaller;
 }
 
-.intron {
-  color: #aaa;
+.model-ortholog {
+  border: 1px dotted #ff8c00;
 }
 
-.utr5 {
-  background-color: #aaccaf;
+.closest-ortholog {
+  border: 1px dotted #006400;
 }
 
-.utr5-other {
-  background-color: #cfe1d2;
+.gene-summary-tair {
+  border: 1px dotted #00008b;
 }
 
-.cds {
-  background-color: #a7b4d3;
+.gene-summary-tair .rest {
+  display: none;
 }
 
-.cds-other {
-  background-color: #d0d8e6;
+.gene-summary-tair:hover .rest, .gene-summary-tair:focus .rest {
+  display: inline;
 }
 
-.utr3 {
-  background-color: #c5a3bf;
+.gene-summary-tair:hover .ellipsis, .gene-summary-tair:focus .ellipsis {
+  display: none;
 }
 
-.utr3-other {
-  background-color: #dcc9d9;
+.closest-ortholog:before, .model-ortholog:before, .gene-summary-tair:before {
+  float: right;
+  background: #fff;
+  border: 1px dotted;
+  margin-top: -12px;
+  margin-right: 6px;
+  padding: 0 1rem;
+  position: relative;
 }
 
-.square-utr5 {
-  width: 20px;
-  height: 20px;
-  background: linear-gradient(to bottom right, #aaccaf 0% 50%, #cfe1d2 50% 100%);
+.model-ortholog:before {
+  content: "Model Species Homolog";
+  color: orange;
 }
 
-.square-cds {
-  width: 20px;
-  height: 20px;
-  background: linear-gradient(to bottom right, #a7b4d3 0% 50%, #d0d8e6 50% 100%);
+.closest-ortholog:before {
+  content: "Closest Annotated Homolog";
+  color: #006400;
 }
 
-.square-utr3 {
-  width: 20px;
-  height: 20px;
-  background: linear-gradient(to bottom right, #c5a3bf 0% 50%, #dcc9d9 50% 100%);
+.gene-summary-tair:before {
+  content: "TAIR Curated Description";
+  color: #00008b;
 }
 
-.reverse-slide {
-  direction: rtl;
+.rep-identity {
+  float: right;
+  padding-top: 5px;
+  padding-right: 10px;
+  font-style: italic;
 }
 
-.fasta-key {
-  cursor: default;
-  color: #555;
-  background: none;
-  border: none;
-  font-family: monospace;
-  font-size: 11pt;
-  position: absolute;
-  top: 9px;
-  right: 40px;
+.rep-identity:after {
+  content: "% identity";
 }
 
-.copy-button {
-  cursor: pointer;
-  color: #555;
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  position: absolute;
-  top: 3px;
-  right: -5px;
+.eFP:before {
+  content: url("BAR-logo.fb7d0f73.png");
+  padding-right: 5px;
+  position: relative;
+  top: 5px;
 }
 
-.notification {
-  color: #fff;
-  z-index: 999;
-  background-color: #050505;
-  padding: 5px;
-  font-size: smaller;
+.eFP:after {
+  content: "New!";
+  color: red;
+  vertical-align: super;
+  padding-left: 2px;
+  font-size: x-small;
   font-style: italic;
   font-weight: bold;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.tree-view-node {
-  margin-left: 10px;
-}
-
-.tree-view-node-collapse-toggle.collapse-spacer {
-  width: 14px;
-  display: inline-block;
-}
-
-.tree-view-node-collapse-toggle {
-  width: 14px;
-  margin-right: 3px;
-}
-
-.tree-view-node-label {
-  border: 1px solid #fff;
-  margin-left: 3px;
-  padding: 1px;
-  font-size: smaller;
-}
-
-.tree-view-node-label.selected {
-  background-color: gray;
-  border: 1px solid #003f81;
-  border-radius: 3px;
-}
-
-.rstm-toggle-icon {
-  display: inline-block;
-}
-
-.rstm-toggle-icon-symbol {
-  width: 2rem;
-  height: 2rem;
-  text-align: center;
-  line-height: 2rem;
-}
-
-.rstm-tree-item-group {
-  text-align: left;
-  width: 100%;
-  border-top: 1px solid #ccc;
-  padding-left: 0;
-  list-style-type: none;
+  line-height: normal;
 }
 
-.rstm-tree-item {
-  cursor: pointer;
-  color: #333;
-  box-shadow: none;
-  z-index: unset;
-  background: none;
-  border-bottom: 1px solid #ccc;
-  padding: .75rem 1rem;
+.gxa:before {
+  content: url("expression-atlas-logo.87d25571.png");
+  padding-right: 5px;
   position: relative;
+  top: 5px;
 }
 
-.rstm-tree-item--active {
-  color: #fff;
-  background: #179ed3;
-  border-bottom: none;
-}
-
-.rstm-tree-item--focused {
-  z-index: 999;
-  box-shadow: 0 0 5px #222;
-}
-
-.rstm-search {
+.gene-search-pic-sugg {
+  background: url("suggestions.7b2830b6.png") 0 0 / contain no-repeat;
   width: 100%;
-  border: none;
-  padding: 1rem 1.5rem;
-}
-
-.display-mode .btn-toolbar {
-  padding-left: 10px;
-  position: absolute;
-}
-
-.tooltip-inner {
-  max-width: 400px;
-}
-
-.genetree-vis .node, .genetree-vis .edge {
-  cursor: pointer;
-}
-
-.genetree-vis .tree-wrapper * {
-  transition: all 20ms ease-in-out;
-}
-
-.genetree-vis .tree-wrapper .clade {
-  transition: transform 20ms ease-in-out;
-}
-
-.genetree-vis .tree-wrapper .clade .edge-rect {
-  transition: scaleY 20ms ease-in-out, scaleX 20ms ease-in-out, transform 20ms ease-in-out;
-}
-
-.genetree-vis .interaction-helper {
-  opacity: 0;
-}
-
-.genetree-vis .node circle {
-  stroke: #777;
-  fill: #fff;
-}
-
-.genetree-vis .speciation rect {
-  fill: navy;
-}
-
-.genetree-vis .duplication rect {
-  fill: #cd0000;
-}
-
-.genetree-vis .node:hover .internal, .genetree-vis .edge:hover .internal, .genetree-vis .node:hover .gene circle, .genetree-vis .edge:hover .gene circle, .genetree-vis .node:hover ~ .clade .node rect, .genetree-vis .edge:hover ~ .clade .node rect, .genetree-vis .node:hover + .node rect, .genetree-vis .edge:hover + .node rect {
-  transform: scale(2);
-}
-
-.genetree-vis .node:hover ~ .clade .interaction-rect, .genetree-vis .edge:hover ~ .clade .interaction-rect {
-  opacity: 1;
-  fill-opacity: 1;
-}
-
-.genetree-vis .node:hover ~ .clade circle, .genetree-vis .edge:hover ~ .clade circle, .genetree-vis .node:hover + .node circle, .genetree-vis .edge:hover + .node circle, .genetree-vis .node:hover .collapsed path, .genetree-vis .edge:hover .collapsed path, .genetree-vis .node:hover ~ .clade .collapsed path, .genetree-vis .edge:hover ~ .clade .collapsed path, .genetree-vis .node:hover + .node .collapsed path, .genetree-vis .edge:hover + .node .collapsed path {
-  stroke-width: 2px;
-}
-
-.genetree-vis .node:hover ~ .clade text, .genetree-vis .edge:hover ~ .clade text, .genetree-vis .node:hover text, .genetree-vis .edge:hover text {
-  font-weight: bolder;
-}
-
-.genetree-vis .node .gene.ortholog_one2one circle, .genetree-vis .node .gene.ortholog_one2many circle, .genetree-vis .node .gene.ortholog_many2many circle {
-  stroke: orange;
-}
-
-.genetree-vis .node .gene.within_species_paralog circle {
-  stroke: green;
-}
-
-.genetree-vis .node .gene.self circle {
-  stroke: red;
-  fill: red;
-}
-
-.genetree-vis .node .gene.self text {
-  font-weight: bolder;
-}
-
-.genetree-vis .node .gene.representative circle {
-  stroke: orange;
-  fill: orange;
-}
-
-.genetree-vis .node text {
-  fill-opacity: 1;
-  text-anchor: start;
-  font-size: 11px;
-}
-
-.genetree-vis .collapsed path {
-  stroke-width: 1px;
-}
-
-.genetree-vis .domains rect {
-  cursor: pointer;
-  stroke-opacity: 0;
-}
-
-.genetree-vis .domains rect:hover {
-  cursor: pointer;
-  stroke-opacity: 1;
-}
-
-.popover-title .tooltip-title-button {
-  margin-top: -4px !important;
-  margin-right: 4px !important;
-}
-
-.msa-slider {
-  margin-bottom: -10px;
-  padding-top: 10px;
-  padding-bottom: 0;
-  position: relative;
+  height: 200px;
 }
 
-.resize-drag {
-  color: red;
-  box-sizing: border-box;
-  background: none;
-  border: 4px solid #7c8383;
-  border-radius: 8px;
-  font-family: sans-serif;
-  font-size: 1px;
+.gene-search-pic-results {
+  background: url("results.e437a98f.png") 0 0 / contain no-repeat;
+  width: 100%;
+  height: 200px;
 }
 
-.resize-container {
+.gene-search-pic-genetree {
+  background: url("genetree.145467e3.png") 0 0 / contain no-repeat;
   width: 100%;
-  height: 100%;
+  height: 200px;
 }
 
 .MSAlignments-wrapper {
-  overflow-x: scroll;
-  overflow-y: hidden;
+  overflow: scroll hidden;
 }
 
 .clustal {
@@ -784,8 +606,8 @@ code.fasta {
 
 .hydrophobicity {
   white-space: nowrap;
-  height: 18px;
   color: #fcff89;
+  height: 18px;
   font-family: monospace;
   font-size: 12px;
 }
@@ -1266,261 +1088,437 @@ code.fasta {
   color: #fcff89;
 }
 
-.visible-detail {
-  border: 1px solid #557b74;
-  padding: 6px 12px;
+.display-mode .btn-toolbar {
+  padding-left: 10px;
+  position: absolute;
 }
 
-.detail {
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 15px;
-  padding-right: 15px;
+.tooltip-inner {
+  max-width: 400px;
 }
 
-.table {
-  width: 100%;
-  max-width: 100%;
+.genetree-vis .node, .genetree-vis .edge {
+  cursor: pointer;
 }
 
-.xrefs {
-  border-collapse: collapse;
-  border-spacing: 0;
-  table-layout: fixed;
-  border-color: gray;
+.genetree-vis .tree-wrapper * {
+  transition: all 20ms ease-in-out;
 }
 
-.xref-name-col {
-  width: 20%;
+.genetree-vis .tree-wrapper .clade {
+  transition: transform 20ms ease-in-out;
 }
 
-.xref-value-col, .xref-80-col {
-  width: 80%;
+.genetree-vis .tree-wrapper .clade .edge-rect {
+  transition: scaleY 20ms ease-in-out, scaleX 20ms ease-in-out, transform 20ms ease-in-out;
 }
 
-.xref-70-col {
-  width: 70%;
+.genetree-vis .interaction-helper {
+  opacity: 0;
 }
 
-.xref-10-col {
-  width: 10%;
+.genetree-vis .node circle {
+  stroke: #777;
+  fill: #fff;
 }
 
-.xref-id-list {
-  padding-left: 0;
-  list-style: none;
+.genetree-vis .speciation rect {
+  fill: navy;
 }
 
-.result-gene {
-  border: 5px solid #fff;
-  padding: .2em;
+.genetree-vis .duplication rect {
+  fill: #cd0000;
 }
 
-.result-gene:hover {
-  border-color: #faebd7;
+.genetree-vis .node:hover .internal, .genetree-vis .edge:hover .internal, .genetree-vis .node:hover .gene circle, .genetree-vis .edge:hover .gene circle, .genetree-vis .node:hover ~ .clade .node rect, .genetree-vis .edge:hover ~ .clade .node rect, .genetree-vis .node:hover + .node rect, .genetree-vis .edge:hover + .node rect {
+  transform: scale(2);
 }
 
-.gene-id {
-  white-space: nowrap;
-  color: #000;
+.genetree-vis .node:hover ~ .clade .interaction-rect, .genetree-vis .edge:hover ~ .clade .interaction-rect {
+  opacity: 1;
+  fill-opacity: 1;
 }
 
-.gene-name {
-  color: #557b74;
-  margin-bottom: 0;
+.genetree-vis .node:hover ~ .clade circle, .genetree-vis .edge:hover ~ .clade circle, .genetree-vis .node:hover + .node circle, .genetree-vis .edge:hover + .node circle, .genetree-vis .node:hover .collapsed path, .genetree-vis .edge:hover .collapsed path, .genetree-vis .node:hover ~ .clade .collapsed path, .genetree-vis .edge:hover ~ .clade .collapsed path, .genetree-vis .node:hover + .node .collapsed path, .genetree-vis .edge:hover + .node .collapsed path {
+  stroke-width: 2px;
 }
 
-.gene-description {
-  margin-bottom: 0;
+.genetree-vis .node:hover ~ .clade text, .genetree-vis .edge:hover ~ .clade text, .genetree-vis .node:hover text, .genetree-vis .edge:hover text {
+  font-weight: bolder;
 }
 
-.gene-species {
-  white-space: nowrap;
-  font-size: small;
-  font-style: italic;
-  font-weight: bold;
+.genetree-vis .node .gene.ortholog_one2one circle, .genetree-vis .node .gene.ortholog_one2many circle, .genetree-vis .node .gene.ortholog_many2many circle {
+  stroke: orange;
 }
 
-.gene-synonyms {
-  font-size: small;
+.genetree-vis .node .gene.within_species_paralog circle {
+  stroke: green;
 }
 
-.gene-extras {
-  float: right;
-  border: 1px dashed #00f;
+.genetree-vis .node .gene.self circle {
+  stroke: red;
+  fill: red;
 }
 
-.gene-panlink {
-  float: right;
+.genetree-vis .node .gene.self text {
+  font-weight: bolder;
 }
 
-.gene-panlink img {
-  height: 60px;
-  width: auto;
-  vertical-align: top;
+.genetree-vis .node .gene.representative circle {
+  stroke: orange;
+  fill: orange;
 }
 
-.gene-detail-tabs {
-  white-space: nowrap;
-  width: 80em;
-  flex-wrap: wrap;
-  display: flex;
+.genetree-vis .node text {
+  fill-opacity: 1;
+  text-anchor: start;
+  font-size: 11px;
 }
 
-.gene-detail-tab-closed {
-  color: #006400;
-  cursor: pointer;
+.genetree-vis .collapsed path {
+  stroke-width: 1px;
 }
 
-.gene-detail-tab-disabled {
-  color: #d3d3d3;
-  cursor: not-allowed;
+.genetree-vis .domains rect {
+  cursor: pointer;
+  stroke-opacity: 0;
 }
 
-.gene-detail-tab-empty {
-  color: #006400;
+.genetree-vis .domains rect:hover {
   cursor: pointer;
-  font-style: oblique;
+  stroke-opacity: 1;
 }
 
-.gene-detail-tab-empty:before {
-  content: "Add ";
+.popover-title .tooltip-title-button {
+  margin-top: -4px !important;
+  margin-right: 4px !important;
 }
 
-.gene-detail-tab-expanded {
-  color: #fff;
-  cursor: pointer;
-  background-color: #557b74;
+.msa-slider {
+  margin-bottom: -10px;
+  padding-top: 10px;
+  padding-bottom: 0;
+  position: relative;
 }
 
-.result-gene-summary {
-  flex-flow: row;
-  justify-content: flex-start;
-  display: flex;
+.resize-drag {
+  color: red;
+  box-sizing: border-box;
+  background: none;
+  border: 4px solid #7c8383;
+  border-radius: 8px;
+  font-family: sans-serif;
+  font-size: 1px;
 }
 
-.result-gene-summary .species-name {
-  white-space: nowrap;
-  font-style: italic;
+.resize-container {
+  width: 100%;
+  height: 100%;
 }
 
-.result-gene-title-body {
-  width: 1036px;
-  flex: auto;
+.rstm-toggle-icon {
+  display: inline-block;
 }
 
-.model-ortholog, .closest-ortholog, .gene-summary-tair {
+.rstm-toggle-icon-symbol {
+  text-align: center;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
+}
+
+.rstm-tree-item-group {
+  text-align: left;
+  border-top: 1px solid #ccc;
+  width: 100%;
+  padding-left: 0;
+  list-style-type: none;
+}
+
+.rstm-tree-item {
   cursor: pointer;
-  width: 500px;
-  border: 1px solid #ff8c00;
-  flex: auto;
-  margin-top: 10px;
-  margin-left: 1rem;
-  padding: 0 1rem;
-  font-size: smaller;
+  color: #333;
+  box-shadow: none;
+  z-index: unset;
+  background: none;
+  border-bottom: 1px solid #ccc;
+  padding: .75rem 1rem;
+  position: relative;
 }
 
-.model-ortholog {
-  border: 1px dotted #ff8c00;
+.rstm-tree-item--active {
+  color: #fff;
+  background: #179ed3;
+  border-bottom: none;
 }
 
-.closest-ortholog {
-  border: 1px dotted #006400;
+.rstm-tree-item--focused {
+  z-index: 999;
+  box-shadow: 0 0 5px #222;
 }
 
-.gene-summary-tair {
-  border: 1px dotted #00008b;
+.rstm-search {
+  border: none;
+  width: 100%;
+  padding: 1rem 1.5rem;
 }
 
-.gene-summary-tair .rest {
-  display: none;
+.tree-view-node {
+  margin-left: 10px;
 }
 
-.gene-summary-tair:hover .rest, .gene-summary-tair:focus .rest {
-  display: inline;
+.tree-view-node-collapse-toggle.collapse-spacer {
+  width: 14px;
+  display: inline-block;
 }
 
-.gene-summary-tair:hover .ellipsis, .gene-summary-tair:focus .ellipsis {
-  display: none;
+.tree-view-node-collapse-toggle {
+  width: 14px;
+  margin-right: 3px;
 }
 
-.closest-ortholog:before, .model-ortholog:before, .gene-summary-tair:before {
-  float: right;
-  background: #fff;
-  border: 1px dotted;
-  margin-top: -12px;
-  margin-right: 6px;
-  padding: 0 1rem;
+.tree-view-node-label {
+  border: 1px solid #fff;
+  margin-left: 3px;
+  padding: 1px;
+  font-size: smaller;
+}
+
+.tree-view-node-label.selected {
+  background-color: gray;
+  border: 1px solid #003f81;
+  border-radius: 3px;
+}
+
+.fasta-container {
+  background-color: #fcfffd;
+  border-style: dashed;
+  border-color: #557b74;
+  padding: 2ch;
+  line-height: .925em;
   position: relative;
 }
 
-.model-ortholog:before {
-  content: "Model Species Homolog";
-  color: orange;
+.styled-span {
+  text-align: center;
+  align-items: center;
+  display: flex;
 }
 
-.closest-ortholog:before {
-  content: "Closest Annotated Homolog";
-  color: #006400;
+.vertical-line {
+  background-color: #000;
+  flex-grow: 1;
+  height: 20px;
 }
 
-.gene-summary-tair:before {
-  content: "TAIR Curated Description";
-  color: #00008b;
+.horizontal-line {
+  background-color: #000;
+  width: 57px;
+  height: 3px;
+  margin: 0;
 }
 
-.rep-identity {
-  float: right;
-  padding-top: 5px;
-  padding-right: 10px;
-  font-style: italic;
+code.fasta {
+  white-space: pre-wrap;
+  color: #595959;
 }
 
-.rep-identity:after {
-  content: "% identity";
+.header {
+  color: #000;
 }
 
-.eFP:before {
-  content: url("BAR-logo.fb7d0f73.png");
-  padding-right: 5px;
-  position: relative;
-  top: 5px;
+.upstream, .downstream {
+  color: #80a0a0;
 }
 
-.eFP:after {
-  content: "New!";
-  color: red;
-  vertical-align: super;
-  padding-left: 2px;
-  font-size: x-small;
+.intron {
+  color: #aaa;
+}
+
+.utr5 {
+  background-color: #aaccaf;
+}
+
+.utr5-other {
+  background-color: #cfe1d2;
+}
+
+.cds {
+  background-color: #a7b4d3;
+}
+
+.cds-other {
+  background-color: #d0d8e6;
+}
+
+.utr3 {
+  background-color: #c5a3bf;
+}
+
+.utr3-other {
+  background-color: #dcc9d9;
+}
+
+.square-utr5 {
+  background: linear-gradient(to bottom right, #aaccaf 0% 50%, #cfe1d2 50% 100%);
+  width: 20px;
+  height: 20px;
+}
+
+.square-cds {
+  background: linear-gradient(to bottom right, #a7b4d3 0% 50%, #d0d8e6 50% 100%);
+  width: 20px;
+  height: 20px;
+}
+
+.square-utr3 {
+  background: linear-gradient(to bottom right, #c5a3bf 0% 50%, #dcc9d9 50% 100%);
+  width: 20px;
+  height: 20px;
+}
+
+.reverse-slide {
+  direction: rtl;
+}
+
+.fasta-key {
+  cursor: default;
+  color: #555;
+  background: none;
+  border: none;
+  font-family: monospace;
+  font-size: 11pt;
+  position: absolute;
+  top: 9px;
+  right: 40px;
+}
+
+.copy-button {
+  cursor: pointer;
+  color: #555;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  position: absolute;
+  top: 3px;
+  right: -5px;
+}
+
+.notification {
+  color: #fff;
+  z-index: 999;
+  background-color: #050505;
+  padding: 5px;
+  font-size: smaller;
   font-style: italic;
   font-weight: bold;
-  line-height: normal;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
-.gxa:before {
-  content: url("expression-atlas-logo.87d25571.png");
-  padding-right: 5px;
-  position: relative;
-  top: 5px;
+.taxogenomic-vis .gramene-search-vis {
+  -webkit-user-select: none;
+  cursor: pointer;
 }
 
-.gene-search-pic-sugg {
-  width: 100%;
-  height: 200px;
-  background: url("suggestions.7b2830b6.png") 0 0 / contain no-repeat;
+.taxogenomic-vis .gramene-search-vis canvas {
+  position: absolute;
 }
 
-.gene-search-pic-results {
-  width: 100%;
-  height: 200px;
-  background: url("results.e437a98f.png") 0 0 / contain no-repeat;
+.taxogenomic-vis .gramene-search-vis > * {
+  display: inline;
 }
 
-.gene-search-pic-genetree {
-  width: 100%;
-  height: 200px;
-  background: url("genetree.145467e3.png") 0 0 / contain no-repeat;
+.taxogenomic-vis .gramene-search-vis text {
+  fill: gray;
+  stroke: #557b74;
+  stroke-opacity: 0;
+  stroke-width: .5px;
+  -webkit-user-select: none;
+  user-select: none;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+.taxogenomic-vis .gramene-search-vis text::selection {
+  background: none;
+}
+
+.taxogenomic-vis .gramene-search-vis .taxonomy * {
+  transition: fill .2s ease-in-out, stroke-opacity .2s ease-in-out;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .results-count {
+  font-size: 10px;
 }
 
+.taxogenomic-vis .gramene-search-vis .clade .node circle {
+  stroke: #557b74;
+  stroke-width: 1px;
+  fill: #f6f6f6;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .edge rect {
+  fill: #ccc;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .node > circle, .taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .edge > rect {
+  fill: #f0b866;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .node-label text {
+  fill: #557b74;
+  stroke-opacity: 1;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .node:hover > circle, .taxogenomic-vis .gramene-search-vis .clade .edge:hover > circle, .taxogenomic-vis .gramene-search-vis .clade .node:hover > rect, .taxogenomic-vis .gramene-search-vis .clade .edge:hover > rect, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .node > circle, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .node > circle, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade .edge > rect, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade .edge > rect, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade .node > circle, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade .node > circle {
+  fill: #f0b866;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .node-label text, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .node-label text, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade text, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade text, .taxogenomic-vis .gramene-search-vis .clade .node-label:hover text {
+  fill: #557b74;
+  stroke-opacity: 1;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .bin, .taxogenomic-vis .gramene-search-vis .clade .full-region {
+  stroke: #557b74;
+  stroke-width: 0;
+  shape-rendering: crispedges;
+  transition: none;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .bin.selected {
+  fill: #ea8e75;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .bin:hover {
+  fill: #557b74;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .full-region.selected {
+  stroke-width: 1px;
+  stroke: #ea8e75;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .full-region:hover {
+  stroke-width: 1px;
+  stroke: #557b74;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .species-background {
+  fill: none;
+}
+
+.taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .species-background, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .species-background, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade .species-background, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade .species-background, .taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .species-background {
+  fill: #f9e3c3;
+}
+
+.accordion-button {
+  padding: .4rem !important;
+}
+
+.accordion-button:hover {
+  background-color: #dbe8f3;
+}
 /*# sourceMappingURL=index.css.map */