gramene-search 1.2.86 → 1.2.88

package/.parcel-cache/2126881b633272fa.txt

@@ -1,2 +1,2 @@
-248900716
-1704819222968880000
+287650791
+1704951606436374000

package/dist/index.css

@@ -283,6 +283,18 @@ code.fasta {
   direction: rtl;
 }
 
+.fasta-key {
+  cursor: default;
+  color: #555;
+  background: none;
+  border: none;
+  font-family: monospace;
+  font-size: 10pt;
+  position: absolute;
+  top: 9px;
+  right: 30px;
+}
+
 .copy-button {
   cursor: pointer;
   color: #555;

package/dist/index.css.map

@@ -1 +1 @@
-{"mappings":"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","sources":["src/components/styles.css","node_modules/gramene-search-vis/styles/main.less","node_modules/gramene-search-vis/styles/taxonomy.less","src/components/results/details/sequences.css","src/components/results/details/tree-view.css","node_modules/react-simple-tree-menu/dist/main.css","node_modules/react-simple-tree-menu/src/sass/main.scss","node_modules/gramene-genetree-vis/src/styles/tree.less","node_modules/gramene-genetree-vis/src/styles/msa.less","src/components/results/genes.css"],"sourcesContent":[".gramene-sidebar {\n    position: fixed;\n    background-color: dimgray;\n    padding-left: 8px;\n    padding-right: 8px;\n    padding-bottom: 8px;\n    max-width: 16.67%;\n}\n.gramene-filter-container {\n    background-color: #cfb5e6;\n    padding-left: 4px;\n    padding-bottom: 4px;\n}\n.gramene-filter {\n    padding-left: 4px;\n    padding-right: 4px;\n    padding-bottom: 4px;\n    background-color: white;\n    font-size: small;\n}\n.gramene-filter span:hover {\n    font-weight:bolder;\n}\n.gramene-filter-AND {\n    background-color: #ffcd82;\n}\n.gramene-filter-OR {\n    background-color: #c5eeb9;\n}\n.gramene-filter-NOT {\n    border-left-color: #ff5354;\n    border-left-style: inset;\n    border-left-width: 4px;\n    padding-left: 4px;\n}\n.gramene-filter-operation {\n    text-align: center;\n    font-style: italic;\n}\n.gramene-filter-marked {\n    font-weight: bolder;\n    /*background-color: #feff96;*/\n}\n.gramene-filter-menu ul {\n    border-top-style: solid;\n    border-top-width: 2px;\n    padding-left: 0;\n}\n.gramene-filter-menu li {\n    display: block;\n    cursor: pointer;\n    padding-left: 15px;\n}\n.gramene-filter-menu li:hover {\n    background-color: #feff96;\n}\n\n.gramene-view-container {\n    background-color: lightblue;\n    padding-left: 4px;\n    padding-right: 4px;\n    padding-bottom: 4px;\n}\n.gramene-view {\n    padding-left: 0px;\n    padding-right: 10px;\n    margin-bottom: 0;\n    background-color: white;\n}\n.gramene-view li {\n    display: block;\n    cursor: pointer;\n    padding-left: 5px;\n    border-left-style: inset;\n    border-left-width: 8px;\n    margin-bottom: 2px;\n}\n\n.gramene-view-on {\n    border-left-color: #40a0ff;\n    font-weight: bold;\n}\n.gramene-view-off {\n    border-left-color: #ff6d68;\n    color: grey;\n}\n.gramene-view-disabled {\n    color: darkgray;\n    border-left-color: #efefef;\n    cursor: default!important;\n}\n#gramene-suggestion button {\n    border-radius: .6rem;\n    line-height: 1;\n}\n#gramene-suggestion button:focus {\n    color: #fff;\n    background-color: #6c757d;\n    border-color: #6c757d;\n}\n\n",".taxogenomic-vis {\n  @import 'taxonomy';\n}","@import 'colors';\n\n.gramene-search-vis {\n  -webkit-user-select: none;\n  cursor: pointer;\n\n  canvas {\n    position: absolute;\n  }\n\n  > * {\n    display: inline;\n  }\n\n  text {\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 12px;\n    fill: gray;\n\n    /* since font weight transition is not smooth, emulate\n    bold font with text stroke, and transition opacity. */\n    stroke: @gramene-darkgreen;\n    stroke-opacity: 0;\n    stroke-width: 0.5px;\n    user-select: none;\n  }\n\n  text::selection {\n    background: none;\n  }\n\n  .taxonomy * {\n    transition: fill 200ms ease-in-out,\n    stroke-opacity 200ms ease-in-out; /*,\n    transform 200ms ease-in-out;*/\n  }\n\n  .clade {\n    .results-count {\n      font-size: 10px;\n    }\n\n    .node circle {\n      stroke: @gramene-darkgreen;\n      stroke-width: 1px; // This is referenced in Edge.js\n      fill: @gramene-offwhite;\n    }\n\n    .edge rect {\n      fill: #cccccc;\n    }\n\n    //\n    //.genome .interaction-helper {\n    //  stroke-opacity: 0;\n    //  fill-opacity: 0;\n    //  stroke: @gramene-darkgreen;\n    //  stroke-width: 1.5px;\n    //}\n\n    // color the nodes above the hovered node\n    // (the highlight class is added dynamically\n    // in code)\n    .clade.highlight {\n      > .node > circle,\n      > .edge > rect {\n        fill: @gramene-orange;\n      }\n      > .node-label text {\n        fill: @gramene-darkgreen;\n        stroke-opacity: 1;\n      }\n\n    }\n\n    // color the clade underneath the hovered node.\n    .node:hover,\n    .edge:hover {\n      > circle,\n      > rect,\n      ~ .node > circle,\n      ~ .clade .edge > rect,\n      ~ .clade .node > circle {\n        fill: @gramene-orange;\n      }\n    }\n\n    .node:hover,\n    .edge:hover {\n      ~ .node-label text,\n      ~ .clade text {\n        fill: @gramene-darkgreen;\n        stroke-opacity: 1;\n      }\n    }\n\n    .node-label:hover text {\n      fill: @gramene-darkgreen;\n      stroke-opacity: 1;\n    }\n\n    .bin, .full-region {\n      transition: none;\n      stroke: @gramene-darkgreen;\n      stroke-width: 0;\n      shape-rendering: crispEdges;\n    }\n\n    .bin.selected {\n      fill: @gramene-red;\n    }\n\n    .bin:hover {\n      fill: @gramene-darkgreen;\n    }\n\n    .full-region.selected {\n      stroke-width: 1px;\n      stroke: @gramene-red;\n    }\n\n    .full-region:hover {\n      stroke-width: 1px;\n      stroke: @gramene-darkgreen;\n    }\n\n    .species-background {\n      fill: none;\n    }\n\n    .node:hover ~ .species-background,\n    .edge:hover ~ .species-background,\n    .node:hover ~ .clade .species-background,\n    .edge:hover ~ .clade .species-background,\n    .clade.highlight > .species-background {\n      fill: lighten(@gramene-orange, 20%);\n    }\n\n  }\n}\n","/* styles.css */\n.fasta-container {\n    position: relative;\n    padding: 2ch;\n    background-color: #fcfffd;\n    border-color: #557b74;\n    border-style: dashed;\n    line-height: 0.925em;\n    /*margin: auto; !* Center the container *!*/\n}\n.styled-span {\n    display: flex;\n    align-items: center;\n    text-align: center;\n}\n.vertical-line {\n    flex-grow: 1;\n    height: 20px;\n    background-color: black;\n}\n.horizontal-line {\n    width: 57px;\n    height: 3px;\n    background-color: black;\n    margin: 0 0px;\n}\ncode.fasta {\n    white-space: pre-wrap;\n    color: #595959;\n}\n.header {\n    color: black;\n}\n.upstream {\n    color: #80a0a0;\n}\n.downstream {\n    color: #80a0a0;\n}\n.intron {\n    color: #aaaaaa;\n}\n.utr5 {\n    background-color: #aaccaf;\n}\n.utr5-other {\n    background-color: #cfe1d2;\n}\n.cds {\n    background-color: #a7b4d3;\n}\n.cds-other {\n    background-color: #d0d8e6;\n}\n.utr3 {\n    background-color: #c5a3bf;\n}\n.utr3-other {\n    background-color: #dcc9d9;\n}\n.reverse-slide {\n    direction: rtl;\n}\n.copy-button {\n    position: absolute;\n    top: 3px;\n    right: -5px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    font-size: 1.5rem;\n    color: #555;\n}\n.notification {\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: #050505;\n    color: #fff;\n    padding: 5px;\n    z-index: 999;\n    font-weight: bold;\n    font-style: italic;\n    font-size: smaller;\n}","/*\n\n<classNamePrefix>-root\n\nThe outer container\n\n*/\n.tree-view-root {\n}\n\n/*\n\n<classNamePrefix>-root\n\nThe outer container for a single node\n\n*/\n.tree-view-node {\n    margin-left: 10px;\n}\n\n\n/*\n\n<classNamePrefix>-node-collapse-toggle.collapse-spacer\n\nUsed to provide spacing when a parent node has no children\n\n*/\n.tree-view-node-collapse-toggle.collapse-spacer {\n    width: 14px;\n    display: inline-block;\n}\n\n/*\n<classNamePrefix>-node-collapse-toggle.<expandIconClass>\n\nThe class to use for the icon that expands a collapsed parent node\n\n*/\n\n\n/*\n\n<classNamePrefix>-node-collapse-toggle.<collapseIconClass>\n\nThe class to use for the icon that collapses an expanded parent node\n\n*/\n\n.tree-view-node-collapse-toggle {\n    margin-right: 3px;\n    width: 14px;\n}\n\n/*\n\n<classNamePrefix>-node-label\n\n*/\n.tree-view-node-label {\n    font-size: smaller;\n    margin-left: 3px;\n    padding: 1px;\n    border: 1px solid #fff;\n}\n\n/*\n\n<classNamePrefix>-node-label.selected\n\n*/\n.tree-view-node-label.selected {\n    border: 1px solid #003f81;\n    border-radius: 3px;\n    background-color: #808080;\n}\n\n/*\n\n<classNamePrefix>-node-checkbox\n\nThe class for a node checkbox\n\n*/\n\n.tree-view-node-checkbox {}\n\n/*\n\n<classNamePrefix>-node-children\n\nThe class for the element that wraps a nodes children (if any exist)\n\n*/\n\n.tree-view-node-children {}\n\n",".rstm-toggle-icon {\n  display: inline-block; }\n  .rstm-toggle-icon-symbol {\n    width: 2rem;\n    height: 2rem;\n    text-align: center;\n    line-height: 2rem; }\n\n.rstm-tree-item-group {\n  list-style-type: none;\n  padding-left: 0;\n  border-top: 1px solid #ccc;\n  text-align: left;\n  width: 100%; }\n\n.rstm-tree-item {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  color: #333;\n  background: none;\n  border-bottom: 1px solid #ccc;\n  box-shadow: none;\n  z-index: unset;\n  position: relative; }\n  .rstm-tree-item--active {\n    color: white;\n    background: #179ed3;\n    border-bottom: none; }\n  .rstm-tree-item--focused {\n    box-shadow: 0 0 5px 0 #222;\n    z-index: 999; }\n\n.rstm-search {\n  padding: 1rem 1.5rem;\n  border: none;\n  width: 100%; }\n",null,"@transition_time: 20ms;\n\n/* see src/components/Edge.js#HOVER_SCALE_FACTOR (currently line 8) */\n@hover_scale_factor: 2;\n@hover_stroke_width: 2;\n@collapsed_node_stroke_width: 1;\n\n@default_node_fill: #fff;\n@default_node_stroke: #777;\n\n@ortholog_stroke_color: orange;\n@paralog_stroke_color: green;\n@representative_fill_color: @ortholog_stroke_color;\n@self_color: red;\n\n@speciation_color: #000080;\n@duplication_color: #cd0000;\n\n@font_size: 11px;\n@font_weight_highlight: bolder;\n\n@invisible: 0;\n@visible: 1;\n\n.display-mode {\n  .btn-toolbar {\n    position: absolute;\n    padding-left: 10px\n  }\n}\n.tooltip-inner {\n  max-width : 400px;\n}\n.genetree-vis {\n  .node, .edge {\n    cursor: pointer;\n  }\n\n  .tree-wrapper {\n    /* transitions for mouse hover, etc, interactions */\n    * {\n      transition: all @transition_time ease-in-out;\n    }\n\n    /* transitions for expanding/contracting clades */\n    .clade {\n      transition: transform @transition_time ease-in-out;\n\n      .edge-rect {\n        transition: scaleY @transition_time ease-in-out, scaleX @transition_time ease-in-out, transform @transition_time ease-in-out;\n      }\n    }\n  }\n\n  .interaction-helper {\n    opacity: @invisible;\n  }\n\n  .node circle {\n    stroke: @default_node_stroke;\n    fill: @default_node_fill;\n  }\n\n  .speciation rect {\n    fill: @speciation_color;\n  }\n\n  .duplication rect {\n    fill: @duplication_color;\n  }\n\n  .node:hover, .edge:hover {\n    .internal,\n    .gene circle,\n    ~ .clade .node rect,\n    + .node rect {\n      transform: scale(@hover_scale_factor);\n    }\n\n    ~ .clade .interaction-rect {\n      opacity: @visible;\n      fill-opacity: @visible;\n    }\n\n    ~ .clade circle,\n    + .node circle,\n    .collapsed path,\n    ~ .clade .collapsed path,\n    + .node .collapsed path {\n      stroke-width: @hover_stroke_width;\n    }\n\n    ~ .clade text, text {\n      font-weight: @font_weight_highlight;\n    }\n  }\n\n  .node {\n    .gene.ortholog_one2one circle,\n    .gene.ortholog_one2many circle,\n    .gene.ortholog_many2many circle {\n      stroke: @ortholog_stroke_color;\n    }\n\n    .gene.within_species_paralog circle {\n      stroke: @paralog_stroke_color;\n    }\n\n    .gene.self {\n      circle {\n        stroke: @self_color;\n        fill: @self_color;\n      }\n      text {\n        font-weight: @font_weight_highlight;\n      }\n    }\n\n    .gene.representative circle {\n      stroke: @ortholog_stroke_color;\n      fill: @representative_fill_color;\n    }\n\n    text {\n      font-size: @font_size;\n      fill-opacity: @visible;\n      text-anchor: start;\n    }\n  }\n\n  .collapsed {\n    path {\n      stroke-width: @collapsed_node_stroke_width;\n    }\n  }\n\n  .domains rect {\n    cursor: pointer;\n    stroke-opacity: 0\n  }\n\n  .domains rect:hover {\n    cursor: pointer;\n    stroke-opacity: 1.0\n  }\n  @transition_time: 20ms;\n\n  /* see src/components/Edge.js#HOVER_SCALE_FACTOR (currently line 8) */\n  @hover_scale_factor: 2;\n  @hover_stroke_width: 2;\n  @collapsed_node_stroke_width: 1;\n\n  @default_node_fill: #fff;\n  @default_node_stroke: #777;\n\n  @ortholog_stroke_color: orange;\n  @paralog_stroke_color: green;\n  @representative_fill_color: @ortholog_stroke_color;\n  @self_color: red;\n\n  @speciation_color: #000080;\n  @duplication_color: #cd0000;\n\n  @font_size: 11px;\n  @font_weight_highlight: bolder;\n\n  @invisible: 0;\n  @visible: 1;\n\n}\n\n.popover-title .tooltip-title-button {\n  margin-top: -4px !important;\n  margin-right: 4px !important;\n}\n\n.msa-slider {\n  position: relative;\n  padding-top: 10px;\n  padding-bottom: 0px;\n  margin-bottom: -10px;\n}\n\n.resize-drag {\n  background: rgba(0, 0, 0, 0.0);\n  border: 4px solid #7c8383;\n  color: red;\n  font-size: 1px;\n  font-family: sans-serif;\n  border-radius: 8px;\n\n  /* This makes things *much* easier */\n  box-sizing: border-box;\n}\n\n.resize-container {\n  width: 100%;\n  height: 100%;\n}\n",".MSAlignments-wrapper {\n  overflow-x: scroll;\n  overflow-y: hidden;\n}\n.clustal {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.clustal .A,\n.clustal .I,\n.clustal .L,\n.clustal .M,\n.clustal .F,\n.clustal .W,\n.clustal .V {\n  background-color: #80a0f0;\n}\n.clustal .R,\n.clustal .K {\n  background-color: #f01505;\n  color: #fcff89;\n}\n.clustal .N,\n.clustal .Q,\n.clustal .S,\n.clustal .T {\n  background-color: #00ff00;\n}\n.clustal .D,\n.clustal .E {\n  background-color: #c048c0;\n  color: #fcff89;\n}\n.clustal .C {\n  background-color: #f08080;\n}\n.clustal .G {\n  background-color: #f09048;\n}\n.clustal .Y\n.clustal .H {\n  background-color: #15a4a4;\n}\n.clustal .P {\n  background-color: #ffff00;\n}\n.clustal .B,\n.clustal .X,\n.clustal .Z {\n  background-color: #ffffff;\n}\n.clustal .gap {\n  color: #ccc;\n}\n.zappo {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.zappo .A,\n.zappo .I,\n.zappo .L,\n.zappo .M,\n.zappo .V {\n  background-color: #ffafaf;\n}\n.zappo .R,\n.zappo .H,\n.zappo .K {\n  background-color: #6464ff;\n  color: #fcff89;\n}\n.zappo .N,\n.zappo .Q,\n.zappo .S,\n.zappo .T {\n  background-color: #00ff00;\n}\n.zappo .D,\n.zappo .E {\n  background-color: #ff0000;\n}\n.zappo .C {\n  background-color: #ffff00;\n}\n.zappo .G,\n.zappo .P {\n  background-color: #ff00ff;\n  color: #fcff89;\n}\n.zappo .F,\n.zappo .W,\n.zappo .Y {\n  background-color: #ffc800;\n}\n.zappo .B,\n.zappo .X,\n.zappo .Z {\n  background-color: #ffffff;\n}\n.zappo .gap {\n  color: #ccc;\n}\n.taylor {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.taylor .A {\n  background-color: #ccff00;\n}\n.taylor .R {\n  background-color: #0000ff;\n  color: #fcff89;\n}\n.taylor .N {\n  background-color: #cc00ff;\n  color: #fcff89;\n}\n.taylor .D {\n  background-color: #ff0000;\n  color: #fcff89;\n}\n.taylor .C {\n  background-color: #ffff00;\n}\n.taylor .Q {\n  background-color: #ff00cc;\n}\n.taylor .E {\n  background-color: #ff0066;\n  color: #fcff89;\n}\n.taylor .G {\n  background-color: #ff9900;\n}\n.taylor .H {\n  background-color: #0066ff;\n  color: #fcff89;\n}\n.taylor .I {\n  background-color: #66ff00;\n}\n.taylor .L {\n  background-color: #33ff00;\n}\n.taylor .K {\n  background-color: #6600ff;\n  color: #fcff89;\n}\n.taylor .M {\n  background-color: #00ff00;\n}\n.taylor .F {\n  background-color: #00ff66;\n}\n.taylor .P {\n  background-color: #ffcc00;\n}\n.taylor .S {\n  background-color: #ff3300;\n  color: #fcff89;\n}\n.taylor .T {\n  background-color: #ff6600;\n}\n.taylor .W {\n  background-color: #00ccff;\n}\n.taylor .Y {\n  background-color: #00ffcc;\n}\n.taylor .V {\n  background-color: #99ff00;\n}\n.taylor .B,\n.taylor .X,\n.taylor .Z {\n  background-color: #ffffff;\n}\n.taylor .gap {\n  color: #ccc;\n}\n.hydrophobicity {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n  color: #fcff89;\n}\n.hydrophobicity .A {\n  background-color: #ad0052;\n}\n.hydrophobicity .R,\n.hydrophobicity .K {\n  background-color: #0000ff;\n}\n.hydrophobicity .N,\n.hydrophobicity .D,\n.hydrophobicity .Q,\n.hydrophobicity .E,\n.hydrophobicity .B,\n.hydrophobicity .Z {\n  background-color: #0c00f3;\n}\n.hydrophobicity .C {\n  background-color: #c2003d;\n}\n.hydrophobicity .G {\n  background-color: #6a0095;\n}\n.hydrophobicity .H {\n  background-color: #1500ea;\n}\n.hydrophobicity .L {\n  background-color: #ea0015;\n}\n.hydrophobicity .M {\n  background-color: #b0004f;\n}\n.hydrophobicity .F {\n  background-color: #cb0034;\n}\n.hydrophobicity .P {\n  background-color: #4600b9;\n}\n.hydrophobicity .S {\n  background-color: #5e00a1;\n}\n.hydrophobicity .T {\n  background-color: #61009e;\n}\n.hydrophobicity .W {\n  background-color: #5b00a4;\n}\n.hydrophobicity .Y {\n  background-color: #4f00b0;\n}\n.hydrophobicity .V {\n  background-color: #f60009;\n}\n.hydrophobicity .X {\n  background-color: #680097;\n}\n.hydrophobicity .gap {\n  color: #ccc;\n}\n.helix_propensity {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.helix_propensity .A {\n  background-color: #e718e7;\n}\n.helix_propensity .R {\n  background-color: #6f906f;\n}\n.helix_propensity .N {\n  background-color: #1be41b;\n}\n.helix_propensity .D {\n  background-color: #778877;\n}\n.helix_propensity .C {\n  background-color: #23dc23;\n}\n.helix_propensity .Q {\n  background-color: #926d92;\n}\n.helix_propensity .E {\n  background-color: #ff00ff;\n}\n.helix_propensity .G {\n  background-color: #00ff00;\n}\n.helix_propensity .H {\n  background-color: #758a75;\n}\n.helix_propensity .I {\n  background-color: #8a758a;\n}\n.helix_propensity .L {\n  background-color: #ae51ae;\n}\n.helix_propensity .K {\n  background-color: #a05fa0;\n}\n.helix_propensity .M {\n  background-color: #ef10ef;\n}\n.helix_propensity .F {\n  background-color: #986798;\n}\n.helix_propensity .P {\n  background-color: #00ff00;\n}\n.helix_propensity .S {\n  background-color: #36c936;\n}\n.helix_propensity .T {\n  background-color: #47b847;\n}\n.helix_propensity .W {\n  background-color: #8a758a;\n}\n.helix_propensity .Y {\n  background-color: #21de21;\n}\n.helix_propensity .V {\n  background-color: #857a85;\n}\n.helix_propensity .B {\n  background-color: #49b649;\n}\n.helix_propensity .X {\n  background-color: #758a75;\n}\n.helix_propensity .Z {\n  background-color: #c936c9;\n}\n.helix_propensity .gap {\n  color: #ccc;\n}\n.strand_propensity {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.strand_propensity .A {\n  background-color: #5858a7;\n}\n.strand_propensity .R {\n  background-color: #6b6b94;\n}\n.strand_propensity .N {\n  background-color: #64649b;\n}\n.strand_propensity .D {\n  background-color: #2121de;\n}\n.strand_propensity .C {\n  background-color: #9d9d62;\n}\n.strand_propensity .Q {\n  background-color: #8c8c73;\n}\n.strand_propensity .E {\n  background-color: #0000ff;\n}\n.strand_propensity .G {\n  background-color: #4949b6;\n}\n.strand_propensity .H {\n  background-color: #60609f;\n}\n.strand_propensity .I {\n  background-color: #ecec13;\n}\n.strand_propensity .L {\n  background-color: #b2b24d;\n}\n.strand_propensity .K {\n  background-color: #4747b8;\n}\n.strand_propensity .M {\n  background-color: #82827d;\n}\n.strand_propensity .F {\n  background-color: #c2c23d;\n}\n.strand_propensity .P {\n  background-color: #2323dc;\n}\n.strand_propensity .S {\n  background-color: #4949b6;\n}\n.strand_propensity .T {\n  background-color: #9d9d62;\n}\n.strand_propensity .W {\n  background-color: #c0c03f;\n}\n.strand_propensity .Y {\n  background-color: #d3d32c;\n}\n.strand_propensity .V {\n  background-color: #ffff00;\n}\n.strand_propensity .B {\n  background-color: #4343bc;\n}\n.strand_propensity .X {\n  background-color: #797986;\n}\n.strand_propensity .Z {\n  background-color: #4747b8;\n}\n.strand_propensity .A,\n.strand_propensity .R,\n.strand_propensity .N,\n.strand_propensity .D,\n.strand_propensity .E,\n.strand_propensity .G,\n.strand_propensity .H,\n.strand_propensity .K,\n.strand_propensity .P,\n.strand_propensity .S,\n.strand_propensity .B,\n.strand_propensity .Z {\n  color: #fcff89;\n}\n.strand_propensity .gap {\n  color: #ccc;\n}\n.turn_propensity {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.turn_propensity .gap {\n  color: #ccc;\n}\n.turn_propensity .A {\n  background-color: #2cd3d3;\n}\n.turn_propensity .R {\n  background-color: #708f8f;\n}\n.turn_propensity .N {\n  background-color: #ff0000;\n}\n.turn_propensity .D {\n  background-color: #e81717;\n}\n.turn_propensity .C {\n  background-color: #a85757;\n}\n.turn_propensity .Q {\n  background-color: #3fc0c0;\n}\n.turn_propensity .E {\n  background-color: #778888;\n}\n.turn_propensity .G {\n  background-color: #ff0000;\n}\n.turn_propensity .H {\n  background-color: #708f8f;\n}\n.turn_propensity .I {\n  background-color: #00ffff;\n}\n.turn_propensity .L {\n  background-color: #1ce3e3;\n}\n.turn_propensity .K {\n  background-color: #7e8181;\n}\n.turn_propensity .M {\n  background-color: #1ee1e1;\n}\n.turn_propensity .F {\n  background-color: #1ee1e1;\n}\n.turn_propensity .P {\n  background-color: #f60909;\n}\n.turn_propensity .S {\n  background-color: #e11e1e;\n}\n.turn_propensity .T {\n  background-color: #738c8c;\n}\n.turn_propensity .W {\n  background-color: #738c8c;\n}\n.turn_propensity .Y {\n  background-color: #9d6262;\n}\n.turn_propensity .V {\n  background-color: #07f8f8;\n}\n.turn_propensity .B {\n  background-color: #f30c0c;\n}\n.turn_propensity .X {\n  background-color: #7c8383;\n}\n.turn_propensity .Z {\n  background-color: #5ba4a4;\n}\n.turn_propensity .N,\n.turn_propensity .D,\n.turn_propensity .G,\n.turn_propensity .P,\n.turn_propensity .S,\n.turn_propensity .B {\n  color: #fcff89;\n}\n.buried_index {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.buried_index .gap {\n  color: #ccc;\n}\n.buried_index .A {\n  background-color: #00a35c;\n}\n.buried_index .R {\n  background-color: #00fc03;\n}\n.buried_index .N {\n  background-color: #00eb14;\n}\n.buried_index .D {\n  background-color: #00eb14;\n}\n.buried_index .C {\n  background-color: #0000ff;\n}\n.buried_index .Q {\n  background-color: #00f10e;\n}\n.buried_index .E {\n  background-color: #00f10e;\n}\n.buried_index .G {\n  background-color: #009d62;\n}\n.buried_index .H {\n  background-color: #00d52a;\n}\n.buried_index .I {\n  background-color: #0054ab;\n}\n.buried_index .L {\n  background-color: #007b84;\n}\n.buried_index .K {\n  background-color: #00ff00;\n}\n.buried_index .M {\n  background-color: #009768;\n}\n.buried_index .F {\n  background-color: #008778;\n}\n.buried_index .P {\n  background-color: #00e01f;\n}\n.buried_index .S {\n  background-color: #00d52a;\n}\n.buried_index .T {\n  background-color: #00db24;\n}\n.buried_index .W {\n  background-color: #00a857;\n}\n.buried_index .Y {\n  background-color: #00e619;\n}\n.buried_index .V {\n  background-color: #005fa0;\n}\n.buried_index .B {\n  background-color: #00eb14;\n}\n.buried_index .X {\n  background-color: #00b649;\n}\n.buried_index .Z {\n  background-color: #00f10e;\n}\n.buried_index .C,\n.buried_index .I,\n.buried_index .V {\n  color: #fcff89;\n}\n",".visible-detail {\n    border: 1px solid #557B74;\n    padding: 6px 12px;\n}\n.detail {\n    margin-right: auto;\n    margin-left: auto;\n    padding-left: 15px;\n    padding-right: 15px;\n}\n.table {\n    width: 100%;\n    max-width: 100%;\n}\n.xrefs {\n    border-collapse: collapse;\n    border-spacing: 0;\n    border-color: grey;\n    table-layout: fixed;\n}\n.xref-name-col {\n    width: 20%;\n}\n.xref-value-col {\n    width: 80%;\n}\n.xref-80-col {\n    width: 80%;\n}\n.xref-70-col {\n    width: 70%;\n}\n.xref-10-col {\n    width: 10%;\n}\n.xref-id-list {\n    padding-left: 0;\n    list-style: none;\n}\n.result-gene {\n    padding: 0.2em;\n    border: 5px solid white;\n}\n.result-gene:hover {\n    border-color: antiquewhite;\n}\n.gene-title {\n    /*padding-top:0.5em;*/\n}\n.gene-id {\n    white-space: nowrap;\n    color: black;\n}\n.gene-name {\n    color: #557B74;\n    margin-bottom: 0;\n}\n.gene-description {\n    margin-bottom: 0;\n}\n.gene-species {\n    white-space: nowrap;\n    font-style: italic;\n    font-size:small;\n    font-weight: bold;\n}\n.gene-synonyms {\n    font-size: small;\n}\n.gene-extras {\n    float: right;\n    border: dashed 1px blue;\n}\n.gene-panlink {\n    float:right;\n}\n.gene-panlink img {\n    height: 60px;\n    width: auto;\n    vertical-align: top;\n}\n.gene-detail-tabs {\n    display: flex;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    width: 80em;\n}\n.gene-detail-tab-closed {\n    color: darkgreen;\n    cursor: pointer;\n    /*background-color: lightgray;*/\n}\n.gene-detail-tab-disabled {\n    /*color: white;*/\n    /*background-color: lightgray;*/\n    color: lightgray;\n    cursor: not-allowed;\n}\n.gene-detail-tab-empty {\n    color: darkgreen;\n    cursor: pointer;\n    font-style: oblique;\n    /*background-color: lightgray;*/\n}\n.gene-detail-tab-empty::before {\n    content: \"Add \";\n}\n.gene-detail-tab-expanded {\n    color: white;\n    background-color: #557B74;\n    cursor: pointer;\n}\n.result-gene-summary {\n    display: flex;\n    flex-flow: row nowrap;\n    justify-content: flex-start;\n}\n.result-gene-summary .species-name {\n    white-space: nowrap;\n    font-style: italic;\n}\n.result-gene-title-body {\n    flex: 1 1 auto;\n    width: 1036px;\n}\n.model-ortholog, .closest-ortholog, .gene-summary-tair {\n    cursor: pointer;\n    flex: 1 1 auto;\n    width: 500px;\n    font-size: smaller;\n    margin-top: 10px;\n    padding: 0 1rem;\n    margin-left: 1rem;\n    border: 1px solid darkorange;\n}\n\n.model-ortholog {\n    border: 1px dotted darkorange;\n}\n.closest-ortholog {\n    border: 1px dotted darkgreen;\n}\n\n.gene-summary-tair {\n    border: 1px dotted darkblue;\n}\n.gene-summary-tair .rest {\n    display: none;\n}\n\n.gene-summary-tair:hover .rest {\n    display: inline;\n}\n.gene-summary-tair:focus .rest {\n    display: inline;\n}\n.gene-summary-tair:hover .ellipsis {\n    display: none;\n}\n.gene-summary-tair:focus .ellipsis {\n    display: none;\n}\n\n/* this is the \"title\" of the closest ortholog box */\n.closest-ortholog::before,\n.model-ortholog::before,\n.gene-summary-tair::before {\n    position: relative;\n    float: right;\n    margin-top: -12px;\n    margin-right: 6px;\n    border: dotted 1px;\n    padding: 0 1rem;\n    background: #fff;\n}\n\n.model-ortholog::before {\n    content: \"Model Species Homolog\";\n    color: orange;\n}\n.closest-ortholog::before {\n    content: \"Closest Annotated Homolog\";\n    color: darkgreen;\n}\n\n/* this is the \"title\" of the closest ortholog box */\n.gene-summary-tair::before {\n    content: \"TAIR Curated Description\";\n    color: darkblue;\n}\n\n.rep-identity {\n    float: right;\n    padding-right: 10px;\n    padding-top: 5px;\n    font-style: italic;\n}\n.rep-identity::after {\n    content: \"% identity\";\n}\n.eFP::before {\n    content: url(\"../../static/images/BAR-logo.png\");\n    padding-right:5px;\n    position: relative;\n    top: 5px;\n}\n.eFP::after {\n    content: 'New!';\n    color: red;\n    padding-left:2px;\n    font-weight: bold;\n    font-style: italic;\n    font-size: x-small;\n    line-height: normal;\n    vertical-align: super;\n}\n.gxa::before {\n    content: url(\"../../static/images/expression-atlas-logo.png\");\n    padding-right:5px;\n    position: relative;\n    top: 5px;\n}\n.gene-search-pic-sugg {\n    width: 100%;\n    height: 200px;\n    background: url(\"../../static/images/suggestions.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n}\n.gene-search-pic-results {\n    width: 100%;\n    height: 200px;\n    background: url(\"../../static/images/results.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n}\n.gene-search-pic-genetree {\n    width: 100%;\n    height: 200px;\n    background: url(\"../../static/images/genetree.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n}"],"names":[],"version":3,"file":"index.css.map"}
+{"mappings":"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","sources":["src/components/styles.css","node_modules/gramene-search-vis/styles/main.less","node_modules/gramene-search-vis/styles/taxonomy.less","src/components/results/details/sequences.css","src/components/results/details/tree-view.css","node_modules/react-simple-tree-menu/dist/main.css","node_modules/react-simple-tree-menu/src/sass/main.scss","node_modules/gramene-genetree-vis/src/styles/tree.less","node_modules/gramene-genetree-vis/src/styles/msa.less","src/components/results/genes.css"],"sourcesContent":[".gramene-sidebar {\n    position: fixed;\n    background-color: dimgray;\n    padding-left: 8px;\n    padding-right: 8px;\n    padding-bottom: 8px;\n    max-width: 16.67%;\n}\n.gramene-filter-container {\n    background-color: #cfb5e6;\n    padding-left: 4px;\n    padding-bottom: 4px;\n}\n.gramene-filter {\n    padding-left: 4px;\n    padding-right: 4px;\n    padding-bottom: 4px;\n    background-color: white;\n    font-size: small;\n}\n.gramene-filter span:hover {\n    font-weight:bolder;\n}\n.gramene-filter-AND {\n    background-color: #ffcd82;\n}\n.gramene-filter-OR {\n    background-color: #c5eeb9;\n}\n.gramene-filter-NOT {\n    border-left-color: #ff5354;\n    border-left-style: inset;\n    border-left-width: 4px;\n    padding-left: 4px;\n}\n.gramene-filter-operation {\n    text-align: center;\n    font-style: italic;\n}\n.gramene-filter-marked {\n    font-weight: bolder;\n    /*background-color: #feff96;*/\n}\n.gramene-filter-menu ul {\n    border-top-style: solid;\n    border-top-width: 2px;\n    padding-left: 0;\n}\n.gramene-filter-menu li {\n    display: block;\n    cursor: pointer;\n    padding-left: 15px;\n}\n.gramene-filter-menu li:hover {\n    background-color: #feff96;\n}\n\n.gramene-view-container {\n    background-color: lightblue;\n    padding-left: 4px;\n    padding-right: 4px;\n    padding-bottom: 4px;\n}\n.gramene-view {\n    padding-left: 0px;\n    padding-right: 10px;\n    margin-bottom: 0;\n    background-color: white;\n}\n.gramene-view li {\n    display: block;\n    cursor: pointer;\n    padding-left: 5px;\n    border-left-style: inset;\n    border-left-width: 8px;\n    margin-bottom: 2px;\n}\n\n.gramene-view-on {\n    border-left-color: #40a0ff;\n    font-weight: bold;\n}\n.gramene-view-off {\n    border-left-color: #ff6d68;\n    color: grey;\n}\n.gramene-view-disabled {\n    color: darkgray;\n    border-left-color: #efefef;\n    cursor: default!important;\n}\n#gramene-suggestion button {\n    border-radius: .6rem;\n    line-height: 1;\n}\n#gramene-suggestion button:focus {\n    color: #fff;\n    background-color: #6c757d;\n    border-color: #6c757d;\n}\n\n",".taxogenomic-vis {\n  @import 'taxonomy';\n}","@import 'colors';\n\n.gramene-search-vis {\n  -webkit-user-select: none;\n  cursor: pointer;\n\n  canvas {\n    position: absolute;\n  }\n\n  > * {\n    display: inline;\n  }\n\n  text {\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 12px;\n    fill: gray;\n\n    /* since font weight transition is not smooth, emulate\n    bold font with text stroke, and transition opacity. */\n    stroke: @gramene-darkgreen;\n    stroke-opacity: 0;\n    stroke-width: 0.5px;\n    user-select: none;\n  }\n\n  text::selection {\n    background: none;\n  }\n\n  .taxonomy * {\n    transition: fill 200ms ease-in-out,\n    stroke-opacity 200ms ease-in-out; /*,\n    transform 200ms ease-in-out;*/\n  }\n\n  .clade {\n    .results-count {\n      font-size: 10px;\n    }\n\n    .node circle {\n      stroke: @gramene-darkgreen;\n      stroke-width: 1px; // This is referenced in Edge.js\n      fill: @gramene-offwhite;\n    }\n\n    .edge rect {\n      fill: #cccccc;\n    }\n\n    //\n    //.genome .interaction-helper {\n    //  stroke-opacity: 0;\n    //  fill-opacity: 0;\n    //  stroke: @gramene-darkgreen;\n    //  stroke-width: 1.5px;\n    //}\n\n    // color the nodes above the hovered node\n    // (the highlight class is added dynamically\n    // in code)\n    .clade.highlight {\n      > .node > circle,\n      > .edge > rect {\n        fill: @gramene-orange;\n      }\n      > .node-label text {\n        fill: @gramene-darkgreen;\n        stroke-opacity: 1;\n      }\n\n    }\n\n    // color the clade underneath the hovered node.\n    .node:hover,\n    .edge:hover {\n      > circle,\n      > rect,\n      ~ .node > circle,\n      ~ .clade .edge > rect,\n      ~ .clade .node > circle {\n        fill: @gramene-orange;\n      }\n    }\n\n    .node:hover,\n    .edge:hover {\n      ~ .node-label text,\n      ~ .clade text {\n        fill: @gramene-darkgreen;\n        stroke-opacity: 1;\n      }\n    }\n\n    .node-label:hover text {\n      fill: @gramene-darkgreen;\n      stroke-opacity: 1;\n    }\n\n    .bin, .full-region {\n      transition: none;\n      stroke: @gramene-darkgreen;\n      stroke-width: 0;\n      shape-rendering: crispEdges;\n    }\n\n    .bin.selected {\n      fill: @gramene-red;\n    }\n\n    .bin:hover {\n      fill: @gramene-darkgreen;\n    }\n\n    .full-region.selected {\n      stroke-width: 1px;\n      stroke: @gramene-red;\n    }\n\n    .full-region:hover {\n      stroke-width: 1px;\n      stroke: @gramene-darkgreen;\n    }\n\n    .species-background {\n      fill: none;\n    }\n\n    .node:hover ~ .species-background,\n    .edge:hover ~ .species-background,\n    .node:hover ~ .clade .species-background,\n    .edge:hover ~ .clade .species-background,\n    .clade.highlight > .species-background {\n      fill: lighten(@gramene-orange, 20%);\n    }\n\n  }\n}\n","/* styles.css */\n.fasta-container {\n    position: relative;\n    padding: 2ch;\n    background-color: #fcfffd;\n    border-color: #557b74;\n    border-style: dashed;\n    line-height: 0.925em;\n    /*margin: auto; !* Center the container *!*/\n}\n.styled-span {\n    display: flex;\n    align-items: center;\n    text-align: center;\n}\n.vertical-line {\n    flex-grow: 1;\n    height: 20px;\n    background-color: black;\n}\n.horizontal-line {\n    width: 57px;\n    height: 3px;\n    background-color: black;\n    margin: 0 0px;\n}\ncode.fasta {\n    white-space: pre-wrap;\n    color: #595959;\n}\n.header {\n    color: black;\n}\n.upstream {\n    color: #80a0a0;\n}\n.downstream {\n    color: #80a0a0;\n}\n.intron {\n    color: #aaaaaa;\n}\n.utr5 {\n    background-color: #aaccaf;\n}\n.utr5-other {\n    background-color: #cfe1d2;\n}\n.cds {\n    background-color: #a7b4d3;\n}\n.cds-other {\n    background-color: #d0d8e6;\n}\n.utr3 {\n    background-color: #c5a3bf;\n}\n.utr3-other {\n    background-color: #dcc9d9;\n}\n.reverse-slide {\n    direction: rtl;\n}\n.fasta-key {\n    position: absolute;\n    top: 9px;\n    right: 30px;\n    background: none;\n    border: none;\n    cursor: default;\n    font-family: monospace;\n    font-size: 10pt;\n    color: #555;\n}\n.copy-button {\n    position: absolute;\n    top: 3px;\n    right: -5px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    font-size: 1.5rem;\n    color: #555;\n}\n.notification {\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: #050505;\n    color: #fff;\n    padding: 5px;\n    z-index: 999;\n    font-weight: bold;\n    font-style: italic;\n    font-size: smaller;\n}","/*\n\n<classNamePrefix>-root\n\nThe outer container\n\n*/\n.tree-view-root {\n}\n\n/*\n\n<classNamePrefix>-root\n\nThe outer container for a single node\n\n*/\n.tree-view-node {\n    margin-left: 10px;\n}\n\n\n/*\n\n<classNamePrefix>-node-collapse-toggle.collapse-spacer\n\nUsed to provide spacing when a parent node has no children\n\n*/\n.tree-view-node-collapse-toggle.collapse-spacer {\n    width: 14px;\n    display: inline-block;\n}\n\n/*\n<classNamePrefix>-node-collapse-toggle.<expandIconClass>\n\nThe class to use for the icon that expands a collapsed parent node\n\n*/\n\n\n/*\n\n<classNamePrefix>-node-collapse-toggle.<collapseIconClass>\n\nThe class to use for the icon that collapses an expanded parent node\n\n*/\n\n.tree-view-node-collapse-toggle {\n    margin-right: 3px;\n    width: 14px;\n}\n\n/*\n\n<classNamePrefix>-node-label\n\n*/\n.tree-view-node-label {\n    font-size: smaller;\n    margin-left: 3px;\n    padding: 1px;\n    border: 1px solid #fff;\n}\n\n/*\n\n<classNamePrefix>-node-label.selected\n\n*/\n.tree-view-node-label.selected {\n    border: 1px solid #003f81;\n    border-radius: 3px;\n    background-color: #808080;\n}\n\n/*\n\n<classNamePrefix>-node-checkbox\n\nThe class for a node checkbox\n\n*/\n\n.tree-view-node-checkbox {}\n\n/*\n\n<classNamePrefix>-node-children\n\nThe class for the element that wraps a nodes children (if any exist)\n\n*/\n\n.tree-view-node-children {}\n\n",".rstm-toggle-icon {\n  display: inline-block; }\n  .rstm-toggle-icon-symbol {\n    width: 2rem;\n    height: 2rem;\n    text-align: center;\n    line-height: 2rem; }\n\n.rstm-tree-item-group {\n  list-style-type: none;\n  padding-left: 0;\n  border-top: 1px solid #ccc;\n  text-align: left;\n  width: 100%; }\n\n.rstm-tree-item {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  color: #333;\n  background: none;\n  border-bottom: 1px solid #ccc;\n  box-shadow: none;\n  z-index: unset;\n  position: relative; }\n  .rstm-tree-item--active {\n    color: white;\n    background: #179ed3;\n    border-bottom: none; }\n  .rstm-tree-item--focused {\n    box-shadow: 0 0 5px 0 #222;\n    z-index: 999; }\n\n.rstm-search {\n  padding: 1rem 1.5rem;\n  border: none;\n  width: 100%; }\n",null,"@transition_time: 20ms;\n\n/* see src/components/Edge.js#HOVER_SCALE_FACTOR (currently line 8) */\n@hover_scale_factor: 2;\n@hover_stroke_width: 2;\n@collapsed_node_stroke_width: 1;\n\n@default_node_fill: #fff;\n@default_node_stroke: #777;\n\n@ortholog_stroke_color: orange;\n@paralog_stroke_color: green;\n@representative_fill_color: @ortholog_stroke_color;\n@self_color: red;\n\n@speciation_color: #000080;\n@duplication_color: #cd0000;\n\n@font_size: 11px;\n@font_weight_highlight: bolder;\n\n@invisible: 0;\n@visible: 1;\n\n.display-mode {\n  .btn-toolbar {\n    position: absolute;\n    padding-left: 10px\n  }\n}\n.tooltip-inner {\n  max-width : 400px;\n}\n.genetree-vis {\n  .node, .edge {\n    cursor: pointer;\n  }\n\n  .tree-wrapper {\n    /* transitions for mouse hover, etc, interactions */\n    * {\n      transition: all @transition_time ease-in-out;\n    }\n\n    /* transitions for expanding/contracting clades */\n    .clade {\n      transition: transform @transition_time ease-in-out;\n\n      .edge-rect {\n        transition: scaleY @transition_time ease-in-out, scaleX @transition_time ease-in-out, transform @transition_time ease-in-out;\n      }\n    }\n  }\n\n  .interaction-helper {\n    opacity: @invisible;\n  }\n\n  .node circle {\n    stroke: @default_node_stroke;\n    fill: @default_node_fill;\n  }\n\n  .speciation rect {\n    fill: @speciation_color;\n  }\n\n  .duplication rect {\n    fill: @duplication_color;\n  }\n\n  .node:hover, .edge:hover {\n    .internal,\n    .gene circle,\n    ~ .clade .node rect,\n    + .node rect {\n      transform: scale(@hover_scale_factor);\n    }\n\n    ~ .clade .interaction-rect {\n      opacity: @visible;\n      fill-opacity: @visible;\n    }\n\n    ~ .clade circle,\n    + .node circle,\n    .collapsed path,\n    ~ .clade .collapsed path,\n    + .node .collapsed path {\n      stroke-width: @hover_stroke_width;\n    }\n\n    ~ .clade text, text {\n      font-weight: @font_weight_highlight;\n    }\n  }\n\n  .node {\n    .gene.ortholog_one2one circle,\n    .gene.ortholog_one2many circle,\n    .gene.ortholog_many2many circle {\n      stroke: @ortholog_stroke_color;\n    }\n\n    .gene.within_species_paralog circle {\n      stroke: @paralog_stroke_color;\n    }\n\n    .gene.self {\n      circle {\n        stroke: @self_color;\n        fill: @self_color;\n      }\n      text {\n        font-weight: @font_weight_highlight;\n      }\n    }\n\n    .gene.representative circle {\n      stroke: @ortholog_stroke_color;\n      fill: @representative_fill_color;\n    }\n\n    text {\n      font-size: @font_size;\n      fill-opacity: @visible;\n      text-anchor: start;\n    }\n  }\n\n  .collapsed {\n    path {\n      stroke-width: @collapsed_node_stroke_width;\n    }\n  }\n\n  .domains rect {\n    cursor: pointer;\n    stroke-opacity: 0\n  }\n\n  .domains rect:hover {\n    cursor: pointer;\n    stroke-opacity: 1.0\n  }\n  @transition_time: 20ms;\n\n  /* see src/components/Edge.js#HOVER_SCALE_FACTOR (currently line 8) */\n  @hover_scale_factor: 2;\n  @hover_stroke_width: 2;\n  @collapsed_node_stroke_width: 1;\n\n  @default_node_fill: #fff;\n  @default_node_stroke: #777;\n\n  @ortholog_stroke_color: orange;\n  @paralog_stroke_color: green;\n  @representative_fill_color: @ortholog_stroke_color;\n  @self_color: red;\n\n  @speciation_color: #000080;\n  @duplication_color: #cd0000;\n\n  @font_size: 11px;\n  @font_weight_highlight: bolder;\n\n  @invisible: 0;\n  @visible: 1;\n\n}\n\n.popover-title .tooltip-title-button {\n  margin-top: -4px !important;\n  margin-right: 4px !important;\n}\n\n.msa-slider {\n  position: relative;\n  padding-top: 10px;\n  padding-bottom: 0px;\n  margin-bottom: -10px;\n}\n\n.resize-drag {\n  background: rgba(0, 0, 0, 0.0);\n  border: 4px solid #7c8383;\n  color: red;\n  font-size: 1px;\n  font-family: sans-serif;\n  border-radius: 8px;\n\n  /* This makes things *much* easier */\n  box-sizing: border-box;\n}\n\n.resize-container {\n  width: 100%;\n  height: 100%;\n}\n",".MSAlignments-wrapper {\n  overflow-x: scroll;\n  overflow-y: hidden;\n}\n.clustal {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.clustal .A,\n.clustal .I,\n.clustal .L,\n.clustal .M,\n.clustal .F,\n.clustal .W,\n.clustal .V {\n  background-color: #80a0f0;\n}\n.clustal .R,\n.clustal .K {\n  background-color: #f01505;\n  color: #fcff89;\n}\n.clustal .N,\n.clustal .Q,\n.clustal .S,\n.clustal .T {\n  background-color: #00ff00;\n}\n.clustal .D,\n.clustal .E {\n  background-color: #c048c0;\n  color: #fcff89;\n}\n.clustal .C {\n  background-color: #f08080;\n}\n.clustal .G {\n  background-color: #f09048;\n}\n.clustal .Y\n.clustal .H {\n  background-color: #15a4a4;\n}\n.clustal .P {\n  background-color: #ffff00;\n}\n.clustal .B,\n.clustal .X,\n.clustal .Z {\n  background-color: #ffffff;\n}\n.clustal .gap {\n  color: #ccc;\n}\n.zappo {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.zappo .A,\n.zappo .I,\n.zappo .L,\n.zappo .M,\n.zappo .V {\n  background-color: #ffafaf;\n}\n.zappo .R,\n.zappo .H,\n.zappo .K {\n  background-color: #6464ff;\n  color: #fcff89;\n}\n.zappo .N,\n.zappo .Q,\n.zappo .S,\n.zappo .T {\n  background-color: #00ff00;\n}\n.zappo .D,\n.zappo .E {\n  background-color: #ff0000;\n}\n.zappo .C {\n  background-color: #ffff00;\n}\n.zappo .G,\n.zappo .P {\n  background-color: #ff00ff;\n  color: #fcff89;\n}\n.zappo .F,\n.zappo .W,\n.zappo .Y {\n  background-color: #ffc800;\n}\n.zappo .B,\n.zappo .X,\n.zappo .Z {\n  background-color: #ffffff;\n}\n.zappo .gap {\n  color: #ccc;\n}\n.taylor {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.taylor .A {\n  background-color: #ccff00;\n}\n.taylor .R {\n  background-color: #0000ff;\n  color: #fcff89;\n}\n.taylor .N {\n  background-color: #cc00ff;\n  color: #fcff89;\n}\n.taylor .D {\n  background-color: #ff0000;\n  color: #fcff89;\n}\n.taylor .C {\n  background-color: #ffff00;\n}\n.taylor .Q {\n  background-color: #ff00cc;\n}\n.taylor .E {\n  background-color: #ff0066;\n  color: #fcff89;\n}\n.taylor .G {\n  background-color: #ff9900;\n}\n.taylor .H {\n  background-color: #0066ff;\n  color: #fcff89;\n}\n.taylor .I {\n  background-color: #66ff00;\n}\n.taylor .L {\n  background-color: #33ff00;\n}\n.taylor .K {\n  background-color: #6600ff;\n  color: #fcff89;\n}\n.taylor .M {\n  background-color: #00ff00;\n}\n.taylor .F {\n  background-color: #00ff66;\n}\n.taylor .P {\n  background-color: #ffcc00;\n}\n.taylor .S {\n  background-color: #ff3300;\n  color: #fcff89;\n}\n.taylor .T {\n  background-color: #ff6600;\n}\n.taylor .W {\n  background-color: #00ccff;\n}\n.taylor .Y {\n  background-color: #00ffcc;\n}\n.taylor .V {\n  background-color: #99ff00;\n}\n.taylor .B,\n.taylor .X,\n.taylor .Z {\n  background-color: #ffffff;\n}\n.taylor .gap {\n  color: #ccc;\n}\n.hydrophobicity {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n  color: #fcff89;\n}\n.hydrophobicity .A {\n  background-color: #ad0052;\n}\n.hydrophobicity .R,\n.hydrophobicity .K {\n  background-color: #0000ff;\n}\n.hydrophobicity .N,\n.hydrophobicity .D,\n.hydrophobicity .Q,\n.hydrophobicity .E,\n.hydrophobicity .B,\n.hydrophobicity .Z {\n  background-color: #0c00f3;\n}\n.hydrophobicity .C {\n  background-color: #c2003d;\n}\n.hydrophobicity .G {\n  background-color: #6a0095;\n}\n.hydrophobicity .H {\n  background-color: #1500ea;\n}\n.hydrophobicity .L {\n  background-color: #ea0015;\n}\n.hydrophobicity .M {\n  background-color: #b0004f;\n}\n.hydrophobicity .F {\n  background-color: #cb0034;\n}\n.hydrophobicity .P {\n  background-color: #4600b9;\n}\n.hydrophobicity .S {\n  background-color: #5e00a1;\n}\n.hydrophobicity .T {\n  background-color: #61009e;\n}\n.hydrophobicity .W {\n  background-color: #5b00a4;\n}\n.hydrophobicity .Y {\n  background-color: #4f00b0;\n}\n.hydrophobicity .V {\n  background-color: #f60009;\n}\n.hydrophobicity .X {\n  background-color: #680097;\n}\n.hydrophobicity .gap {\n  color: #ccc;\n}\n.helix_propensity {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.helix_propensity .A {\n  background-color: #e718e7;\n}\n.helix_propensity .R {\n  background-color: #6f906f;\n}\n.helix_propensity .N {\n  background-color: #1be41b;\n}\n.helix_propensity .D {\n  background-color: #778877;\n}\n.helix_propensity .C {\n  background-color: #23dc23;\n}\n.helix_propensity .Q {\n  background-color: #926d92;\n}\n.helix_propensity .E {\n  background-color: #ff00ff;\n}\n.helix_propensity .G {\n  background-color: #00ff00;\n}\n.helix_propensity .H {\n  background-color: #758a75;\n}\n.helix_propensity .I {\n  background-color: #8a758a;\n}\n.helix_propensity .L {\n  background-color: #ae51ae;\n}\n.helix_propensity .K {\n  background-color: #a05fa0;\n}\n.helix_propensity .M {\n  background-color: #ef10ef;\n}\n.helix_propensity .F {\n  background-color: #986798;\n}\n.helix_propensity .P {\n  background-color: #00ff00;\n}\n.helix_propensity .S {\n  background-color: #36c936;\n}\n.helix_propensity .T {\n  background-color: #47b847;\n}\n.helix_propensity .W {\n  background-color: #8a758a;\n}\n.helix_propensity .Y {\n  background-color: #21de21;\n}\n.helix_propensity .V {\n  background-color: #857a85;\n}\n.helix_propensity .B {\n  background-color: #49b649;\n}\n.helix_propensity .X {\n  background-color: #758a75;\n}\n.helix_propensity .Z {\n  background-color: #c936c9;\n}\n.helix_propensity .gap {\n  color: #ccc;\n}\n.strand_propensity {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.strand_propensity .A {\n  background-color: #5858a7;\n}\n.strand_propensity .R {\n  background-color: #6b6b94;\n}\n.strand_propensity .N {\n  background-color: #64649b;\n}\n.strand_propensity .D {\n  background-color: #2121de;\n}\n.strand_propensity .C {\n  background-color: #9d9d62;\n}\n.strand_propensity .Q {\n  background-color: #8c8c73;\n}\n.strand_propensity .E {\n  background-color: #0000ff;\n}\n.strand_propensity .G {\n  background-color: #4949b6;\n}\n.strand_propensity .H {\n  background-color: #60609f;\n}\n.strand_propensity .I {\n  background-color: #ecec13;\n}\n.strand_propensity .L {\n  background-color: #b2b24d;\n}\n.strand_propensity .K {\n  background-color: #4747b8;\n}\n.strand_propensity .M {\n  background-color: #82827d;\n}\n.strand_propensity .F {\n  background-color: #c2c23d;\n}\n.strand_propensity .P {\n  background-color: #2323dc;\n}\n.strand_propensity .S {\n  background-color: #4949b6;\n}\n.strand_propensity .T {\n  background-color: #9d9d62;\n}\n.strand_propensity .W {\n  background-color: #c0c03f;\n}\n.strand_propensity .Y {\n  background-color: #d3d32c;\n}\n.strand_propensity .V {\n  background-color: #ffff00;\n}\n.strand_propensity .B {\n  background-color: #4343bc;\n}\n.strand_propensity .X {\n  background-color: #797986;\n}\n.strand_propensity .Z {\n  background-color: #4747b8;\n}\n.strand_propensity .A,\n.strand_propensity .R,\n.strand_propensity .N,\n.strand_propensity .D,\n.strand_propensity .E,\n.strand_propensity .G,\n.strand_propensity .H,\n.strand_propensity .K,\n.strand_propensity .P,\n.strand_propensity .S,\n.strand_propensity .B,\n.strand_propensity .Z {\n  color: #fcff89;\n}\n.strand_propensity .gap {\n  color: #ccc;\n}\n.turn_propensity {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.turn_propensity .gap {\n  color: #ccc;\n}\n.turn_propensity .A {\n  background-color: #2cd3d3;\n}\n.turn_propensity .R {\n  background-color: #708f8f;\n}\n.turn_propensity .N {\n  background-color: #ff0000;\n}\n.turn_propensity .D {\n  background-color: #e81717;\n}\n.turn_propensity .C {\n  background-color: #a85757;\n}\n.turn_propensity .Q {\n  background-color: #3fc0c0;\n}\n.turn_propensity .E {\n  background-color: #778888;\n}\n.turn_propensity .G {\n  background-color: #ff0000;\n}\n.turn_propensity .H {\n  background-color: #708f8f;\n}\n.turn_propensity .I {\n  background-color: #00ffff;\n}\n.turn_propensity .L {\n  background-color: #1ce3e3;\n}\n.turn_propensity .K {\n  background-color: #7e8181;\n}\n.turn_propensity .M {\n  background-color: #1ee1e1;\n}\n.turn_propensity .F {\n  background-color: #1ee1e1;\n}\n.turn_propensity .P {\n  background-color: #f60909;\n}\n.turn_propensity .S {\n  background-color: #e11e1e;\n}\n.turn_propensity .T {\n  background-color: #738c8c;\n}\n.turn_propensity .W {\n  background-color: #738c8c;\n}\n.turn_propensity .Y {\n  background-color: #9d6262;\n}\n.turn_propensity .V {\n  background-color: #07f8f8;\n}\n.turn_propensity .B {\n  background-color: #f30c0c;\n}\n.turn_propensity .X {\n  background-color: #7c8383;\n}\n.turn_propensity .Z {\n  background-color: #5ba4a4;\n}\n.turn_propensity .N,\n.turn_propensity .D,\n.turn_propensity .G,\n.turn_propensity .P,\n.turn_propensity .S,\n.turn_propensity .B {\n  color: #fcff89;\n}\n.buried_index {\n  white-space: nowrap;\n  font-family: monospace;\n  height: 18px;\n  font-size: 12px;\n}\n.buried_index .gap {\n  color: #ccc;\n}\n.buried_index .A {\n  background-color: #00a35c;\n}\n.buried_index .R {\n  background-color: #00fc03;\n}\n.buried_index .N {\n  background-color: #00eb14;\n}\n.buried_index .D {\n  background-color: #00eb14;\n}\n.buried_index .C {\n  background-color: #0000ff;\n}\n.buried_index .Q {\n  background-color: #00f10e;\n}\n.buried_index .E {\n  background-color: #00f10e;\n}\n.buried_index .G {\n  background-color: #009d62;\n}\n.buried_index .H {\n  background-color: #00d52a;\n}\n.buried_index .I {\n  background-color: #0054ab;\n}\n.buried_index .L {\n  background-color: #007b84;\n}\n.buried_index .K {\n  background-color: #00ff00;\n}\n.buried_index .M {\n  background-color: #009768;\n}\n.buried_index .F {\n  background-color: #008778;\n}\n.buried_index .P {\n  background-color: #00e01f;\n}\n.buried_index .S {\n  background-color: #00d52a;\n}\n.buried_index .T {\n  background-color: #00db24;\n}\n.buried_index .W {\n  background-color: #00a857;\n}\n.buried_index .Y {\n  background-color: #00e619;\n}\n.buried_index .V {\n  background-color: #005fa0;\n}\n.buried_index .B {\n  background-color: #00eb14;\n}\n.buried_index .X {\n  background-color: #00b649;\n}\n.buried_index .Z {\n  background-color: #00f10e;\n}\n.buried_index .C,\n.buried_index .I,\n.buried_index .V {\n  color: #fcff89;\n}\n",".visible-detail {\n    border: 1px solid #557B74;\n    padding: 6px 12px;\n}\n.detail {\n    margin-right: auto;\n    margin-left: auto;\n    padding-left: 15px;\n    padding-right: 15px;\n}\n.table {\n    width: 100%;\n    max-width: 100%;\n}\n.xrefs {\n    border-collapse: collapse;\n    border-spacing: 0;\n    border-color: grey;\n    table-layout: fixed;\n}\n.xref-name-col {\n    width: 20%;\n}\n.xref-value-col {\n    width: 80%;\n}\n.xref-80-col {\n    width: 80%;\n}\n.xref-70-col {\n    width: 70%;\n}\n.xref-10-col {\n    width: 10%;\n}\n.xref-id-list {\n    padding-left: 0;\n    list-style: none;\n}\n.result-gene {\n    padding: 0.2em;\n    border: 5px solid white;\n}\n.result-gene:hover {\n    border-color: antiquewhite;\n}\n.gene-title {\n    /*padding-top:0.5em;*/\n}\n.gene-id {\n    white-space: nowrap;\n    color: black;\n}\n.gene-name {\n    color: #557B74;\n    margin-bottom: 0;\n}\n.gene-description {\n    margin-bottom: 0;\n}\n.gene-species {\n    white-space: nowrap;\n    font-style: italic;\n    font-size:small;\n    font-weight: bold;\n}\n.gene-synonyms {\n    font-size: small;\n}\n.gene-extras {\n    float: right;\n    border: dashed 1px blue;\n}\n.gene-panlink {\n    float:right;\n}\n.gene-panlink img {\n    height: 60px;\n    width: auto;\n    vertical-align: top;\n}\n.gene-detail-tabs {\n    display: flex;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    width: 80em;\n}\n.gene-detail-tab-closed {\n    color: darkgreen;\n    cursor: pointer;\n    /*background-color: lightgray;*/\n}\n.gene-detail-tab-disabled {\n    /*color: white;*/\n    /*background-color: lightgray;*/\n    color: lightgray;\n    cursor: not-allowed;\n}\n.gene-detail-tab-empty {\n    color: darkgreen;\n    cursor: pointer;\n    font-style: oblique;\n    /*background-color: lightgray;*/\n}\n.gene-detail-tab-empty::before {\n    content: \"Add \";\n}\n.gene-detail-tab-expanded {\n    color: white;\n    background-color: #557B74;\n    cursor: pointer;\n}\n.result-gene-summary {\n    display: flex;\n    flex-flow: row nowrap;\n    justify-content: flex-start;\n}\n.result-gene-summary .species-name {\n    white-space: nowrap;\n    font-style: italic;\n}\n.result-gene-title-body {\n    flex: 1 1 auto;\n    width: 1036px;\n}\n.model-ortholog, .closest-ortholog, .gene-summary-tair {\n    cursor: pointer;\n    flex: 1 1 auto;\n    width: 500px;\n    font-size: smaller;\n    margin-top: 10px;\n    padding: 0 1rem;\n    margin-left: 1rem;\n    border: 1px solid darkorange;\n}\n\n.model-ortholog {\n    border: 1px dotted darkorange;\n}\n.closest-ortholog {\n    border: 1px dotted darkgreen;\n}\n\n.gene-summary-tair {\n    border: 1px dotted darkblue;\n}\n.gene-summary-tair .rest {\n    display: none;\n}\n\n.gene-summary-tair:hover .rest {\n    display: inline;\n}\n.gene-summary-tair:focus .rest {\n    display: inline;\n}\n.gene-summary-tair:hover .ellipsis {\n    display: none;\n}\n.gene-summary-tair:focus .ellipsis {\n    display: none;\n}\n\n/* this is the \"title\" of the closest ortholog box */\n.closest-ortholog::before,\n.model-ortholog::before,\n.gene-summary-tair::before {\n    position: relative;\n    float: right;\n    margin-top: -12px;\n    margin-right: 6px;\n    border: dotted 1px;\n    padding: 0 1rem;\n    background: #fff;\n}\n\n.model-ortholog::before {\n    content: \"Model Species Homolog\";\n    color: orange;\n}\n.closest-ortholog::before {\n    content: \"Closest Annotated Homolog\";\n    color: darkgreen;\n}\n\n/* this is the \"title\" of the closest ortholog box */\n.gene-summary-tair::before {\n    content: \"TAIR Curated Description\";\n    color: darkblue;\n}\n\n.rep-identity {\n    float: right;\n    padding-right: 10px;\n    padding-top: 5px;\n    font-style: italic;\n}\n.rep-identity::after {\n    content: \"% identity\";\n}\n.eFP::before {\n    content: url(\"../../static/images/BAR-logo.png\");\n    padding-right:5px;\n    position: relative;\n    top: 5px;\n}\n.eFP::after {\n    content: 'New!';\n    color: red;\n    padding-left:2px;\n    font-weight: bold;\n    font-style: italic;\n    font-size: x-small;\n    line-height: normal;\n    vertical-align: super;\n}\n.gxa::before {\n    content: url(\"../../static/images/expression-atlas-logo.png\");\n    padding-right:5px;\n    position: relative;\n    top: 5px;\n}\n.gene-search-pic-sugg {\n    width: 100%;\n    height: 200px;\n    background: url(\"../../static/images/suggestions.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n}\n.gene-search-pic-results {\n    width: 100%;\n    height: 200px;\n    background: url(\"../../static/images/results.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n}\n.gene-search-pic-genetree {\n    width: 100%;\n    height: 200px;\n    background: url(\"../../static/images/genetree.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n}"],"names":[],"version":3,"file":"index.css.map"}

package/dist/index.js

@@ -1208,6 +1208,8 @@ const $671312b287158a8a$var$grameneDocs = {
             pathways: {},
             expression: {},
             sequences: {},
+            rnaSequences: {},
+            pepSequences: {},
             studies: {}
         };
         return (state = initialState, { type: type , payload: payload  })=>{
@@ -1269,11 +1271,35 @@ const $671312b287158a8a$var$grameneDocs = {
                         return newState;
                     }
                     break;
+                case "RNA_SEQUENCE_REQUESTED":
+                    if (!state.rnaSequences.hasOwnProperty(payload)) {
+                        newState = Object.assign({}, state);
+                        newState.rnaSequences[payload] = {};
+                        return newState;
+                    }
+                    break;
+                case "PEP_SEQUENCE_REQUESTED":
+                    if (!state.rnaSequences.hasOwnProperty(payload)) {
+                        newState = Object.assign({}, state);
+                        newState.pepSequences[payload] = {};
+                        return newState;
+                    }
+                    break;
                 case "GENE_SEQUENCE_RECEIVED":
                     newState = Object.assign({}, state);
                     newState.sequences = Object.assign({}, state.sequences);
                     newState.sequences[payload.id] = payload.geneSeq;
                     return newState;
+                case "RNA_SEQUENCE_RECEIVED":
+                    newState = Object.assign({}, state);
+                    newState.rnaSequences = Object.assign({}, state.rnaSequences);
+                    newState.rnaSequences[payload.id] = payload.RnaSeq;
+                    return newState;
+                case "PEP_SEQUENCE_RECEIVED":
+                    newState = Object.assign({}, state);
+                    newState.pepSequences = Object.assign({}, state.pepSequences);
+                    newState.pepSequences[payload.id] = payload.PepSeq;
+                    return newState;
                 case "PARALOG_EXPRESSION_REQUESTED":
                     if (!state.expression.hasOwnProperty(payload)) {
                         newState = Object.assign({}, state);
@@ -1418,6 +1444,42 @@ const $671312b287158a8a$var$grameneDocs = {
                 });
             }
         },
+    doRequestRnaSequence: (id, gene)=>({ dispatch: dispatch , store: store  })=>{
+            const seqs = store.selectRnaSequences();
+            if (!seqs.hasOwnProperty(id)) {
+                dispatch({
+                    type: "RNA_SEQUENCE_REQUESTED",
+                    payload: id
+                });
+                fetch(`${store.selectEnsemblAPI()}/sequence/id/${id}?species=${gene.system_name}&type=cdna&content-type=application/json`).then((res)=>res.json()).then((RnaSeq)=>{
+                    dispatch({
+                        type: "RNA_SEQUENCE_RECEIVED",
+                        payload: {
+                            id: id,
+                            RnaSeq: RnaSeq
+                        }
+                    });
+                });
+            }
+        },
+    doRequestPepSequence: (id, gene)=>({ dispatch: dispatch , store: store  })=>{
+            const seqs = store.selectPepSequences();
+            if (!seqs.hasOwnProperty(id)) {
+                dispatch({
+                    type: "PEP_SEQUENCE_REQUESTED",
+                    payload: id
+                });
+                fetch(`${store.selectEnsemblAPI()}/sequence/id/${id}?species=${gene.system_name}&type=protein&content-type=application/json`).then((res)=>res.json()).then((PepSeq)=>{
+                    dispatch({
+                        type: "PEP_SEQUENCE_RECEIVED",
+                        payload: {
+                            id: id,
+                            PepSeq: PepSeq
+                        }
+                    });
+                });
+            }
+        },
     doRequestParalogExpression: (id)=>({ dispatch: dispatch , store: store  })=>{
             const expr = store.selectParalogExpression();
             if (!expr.hasOwnProperty(id)) {
@@ -1471,6 +1533,8 @@ const $671312b287158a8a$var$grameneDocs = {
     selectGramenePathways: (state)=>state.grameneDocs.pathways,
     selectParalogExpression: (state)=>state.grameneDocs.expression,
     selectGeneSequences: (state)=>state.grameneDocs.sequences,
+    selectRnaSequences: (state)=>state.grameneDocs.rnaSequences,
+    selectPepSequences: (state)=>state.grameneDocs.pepSequences,
     selectAtlasStudies: (state)=>state.grameneDocs.studies
 };
 var $671312b287158a8a$export$2e2bcd8739ae039 = $671312b287158a8a$var$grameneDocs;
@@ -3314,57 +3378,54 @@ const $527ebc19dc92444d$var$CodeBlock = (props)=>{
         children: [
             /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)("code", {
                 className: "fasta",
+                children: [
+                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)("span", {
+                        className: "header",
+                        children: [
+                            ">",
+                            props.id
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("br", {}),
+                    props.blocks.map((block, idx)=>/*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
+                            className: block.kind,
+                            children: block.seq
+                        }, idx))
+                ]
+            }),
+            /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)("p", {
+                className: "fasta-key",
                 children: [
                     /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("b", {
                         children: "Key:"
                     }),
-                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
-                        className: "upstream",
-                        children: "--upstream--"
-                    }),
+                    "\xa05'UTR\xa0",
                     /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
                         className: "utr5",
-                        children: "--5'UTR--"
+                        children: "\xa0\xa0"
                     }),
                     /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
-                        className: "cds",
-                        children: "--Coding exon--"
+                        className: "utr5-other",
+                        children: "\xa0\xa0"
                     }),
+                    "\xa0CDS\xa0",
                     /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
-                        className: "intron",
-                        children: "--intron--"
+                        className: "cds",
+                        children: "\xa0\xa0"
                     }),
                     /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
-                        className: "cds",
-                        children: "--Coding exon--"
+                        className: "cds-other",
+                        children: "\xa0\xa0"
                     }),
+                    "\xa03'UTR\xa0",
                     /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
                         className: "utr3",
-                        children: "--3'UTR--"
+                        children: "\xa0\xa0"
                     }),
                     /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
-                        className: "downstream",
-                        children: "--downstream--"
-                    }),
-                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("br", {}),
-                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("br", {})
-                ]
-            }),
-            /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)("code", {
-                className: "fasta",
-                children: [
-                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)("span", {
-                        className: "header",
-                        children: [
-                            ">",
-                            props.id
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("br", {}),
-                    props.blocks.map((block, idx)=>/*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
-                            className: block.kind,
-                            children: block.seq
-                        }, idx))
+                        className: "utr3-other",
+                        children: "\xa0\xa0"
+                    })
                 ]
             }),
             /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("button", {
@@ -3379,7 +3440,34 @@ const $527ebc19dc92444d$var$CodeBlock = (props)=>{
         ]
     });
 };
-const $527ebc19dc92444d$var$decorateDNA = (geneSeq, gene, up, down, tid)=>{
+const $527ebc19dc92444d$var$decoratePeptide = (seq, transcript)=>{
+    let junctions = [];
+    transcript.exon_junctions.forEach((ej, idx)=>{
+        if (ej > transcript.cds.start && ej <= transcript.cds.end) junctions.push(Math.floor((ej - transcript.cds.start) / 3));
+    });
+    if (junctions.length === 0) return [
+        {
+            kind: "cds",
+            seq: seq
+        }
+    ];
+    let offset = 0;
+    let blocks = [];
+    junctions.forEach((j, idx)=>{
+        let kind = idx % 2 === 0 ? "cds" : "cds-other";
+        blocks.push({
+            kind: kind,
+            seq: seq.substring(offset, j)
+        });
+        offset = j;
+    });
+    blocks.push({
+        kind: junctions.length % 2 === 0 ? "cds" : "cds-other",
+        seq: seq.substring(junctions.pop())
+    });
+    return blocks;
+};
+const $527ebc19dc92444d$var$decorateSeq = (geneSeq, gene, up, down, tid, mode)=>{
     // return a list of blocks with kind and seq properties
     let blocks = [];
     const transcript = gene.gene_structure.transcripts.find((tr)=>tr.id === tid);
@@ -3395,23 +3483,24 @@ const $527ebc19dc92444d$var$decorateDNA = (geneSeq, gene, up, down, tid)=>{
     let pos_in_transcript = 0;
     let pos_in_gene = 0;
     let blockType = "utr5";
+    let extra = "";
     transcript.exons.forEach((eid, e_idx)=>{
         const exon = gene.gene_structure.exons.find((exon)=>exon.id === eid);
-        if (exon.start > 1) {
-            let intronBlock = {
+        if (e_idx > 0 && mode === "dna") {
+            blocks.push({
                 kind: "intron",
                 seq: geneSeq.seq.substring(offset + pos_in_gene, offset + exon.start - 1).toLowerCase()
-            };
-            // actually, don't do this blocks.push(intronBlock);
+            });
             pos_in_gene = exon.start - 1;
         }
+        if (mode === "rna") extra = e_idx % 2 === 1 ? "-other" : "";
         let exon_length = exon.end - exon.start + 1;
         if (transcript.cds && pos_in_transcript < transcript.cds.start && pos_in_transcript + exon_length >= transcript.cds.start) {
             // CDS starts in this exon
             const utr5_len = transcript.cds.start - pos_in_transcript - 1;
             if (utr5_len > 0) {
                 blocks.push({
-                    kind: blockType,
+                    kind: blockType + extra,
                     seq: geneSeq.seq.substring(offset + pos_in_gene, offset + pos_in_gene + utr5_len)
                 });
                 exon_length -= utr5_len;
@@ -3425,7 +3514,7 @@ const $527ebc19dc92444d$var$decorateDNA = (geneSeq, gene, up, down, tid)=>{
             const cds_len = transcript.cds.end - pos_in_transcript;
             if (cds_len > 0) {
                 blocks.push({
-                    kind: blockType,
+                    kind: blockType + extra,
                     seq: geneSeq.seq.substring(offset + pos_in_gene, offset + pos_in_gene + cds_len)
                 });
                 exon_length -= cds_len;
@@ -3435,7 +3524,7 @@ const $527ebc19dc92444d$var$decorateDNA = (geneSeq, gene, up, down, tid)=>{
             blockType = "utr3";
         }
         if (exon_length > 0) blocks.push({
-            kind: blockType,
+            kind: blockType + extra,
             seq: geneSeq.seq.substring(offset + pos_in_gene, offset + pos_in_gene + exon_length)
         });
         pos_in_gene = exon.end;
@@ -3460,7 +3549,13 @@ const $527ebc19dc92444d$var$buildId = (gene, geneSeq, up, down)=>{
 };
 const $527ebc19dc92444d$var$Detail = (props)=>{
     const gene = props.geneDocs[props.searchResult.id];
+    const [tab, setTab] = (0, $gXNCa$react.useState)("dna");
+    const [upstream, setUpstream] = (0, $gXNCa$react.useState)(0);
+    const [downstream, setDownstream] = (0, $gXNCa$react.useState)(0);
+    const [tid, setTid] = (0, $gXNCa$react.useState)(gene.gene_structure.canonical_transcript);
     let geneSeq;
+    let rnaSeq;
+    let pepSeq;
     if (props.geneSequences && props.geneSequences[gene._id]) geneSeq = props.geneSequences[gene._id];
     else {
         props.doRequestGeneSequence(gene);
@@ -3468,12 +3563,30 @@ const $527ebc19dc92444d$var$Detail = (props)=>{
             children: "loading"
         });
     }
+    if (props.rnaSequences && props.rnaSequences[tid]) rnaSeq = props.rnaSequences[tid];
+    else {
+        props.doRequestRnaSequence(tid, gene);
+        return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("pre", {
+            children: "loading"
+        });
+    }
     const maxUp = gene.location.strand === 1 ? gene.location.start - geneSeq.start : geneSeq.end - gene.location.end;
     const maxDown = gene.location.strand === -1 ? gene.location.start - geneSeq.start : geneSeq.end - gene.location.end;
-    const [upstream, setUpstream] = (0, $gXNCa$react.useState)(0);
-    const [downstream, setDownstream] = (0, $gXNCa$react.useState)(0);
-    const [tid, setTid] = (0, $gXNCa$react.useState)(gene.gene_structure.canonical_transcript);
+    const transcript = gene.gene_structure.transcripts.find((tr)=>tr.id === tid);
+    let tl_id;
+    if (transcript.translation) {
+        tl_id = transcript.translation.id;
+        if (props.pepSequences && props.pepSequences[tl_id]) pepSeq = props.pepSequences[tl_id];
+        else {
+            props.doRequestPepSequence(tl_id, gene);
+            return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("pre", {
+                children: "loading"
+            });
+        }
+    }
     return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)((0, $gXNCa$reactbootstrap.Tabs), {
+        activeKey: tab,
+        onSelect: (k)=>setTab(k),
         children: [
             /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)((0, $gXNCa$reactbootstrap.Tab), {
                 tabClassName: "dna",
@@ -3612,24 +3725,106 @@ const $527ebc19dc92444d$var$Detail = (props)=>{
                     geneSeq && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)($527ebc19dc92444d$var$CodeBlock, {
                         id: $527ebc19dc92444d$var$buildId(gene, geneSeq, +upstream, +downstream),
                         seq: geneSeq.seq.substring(maxUp - +upstream, maxUp + gene.location.end - gene.location.start + 1 + +downstream),
-                        blocks: $527ebc19dc92444d$var$decorateDNA(geneSeq, gene, +upstream, +downstream, tid)
+                        blocks: $527ebc19dc92444d$var$decorateSeq(geneSeq, gene, +upstream, +downstream, tid, "dna")
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.Tab), {
-                tabClassName: "cdna",
-                eventKey: "cdna",
-                title: "Transcript sequence"
+            /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)((0, $gXNCa$reactbootstrap.Tab), {
+                tabClassName: "rna",
+                eventKey: "rna",
+                title: "Transcript sequence",
+                children: [
+                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.Container), {
+                        style: {
+                            width: "100ch",
+                            marginLeft: 0
+                        },
+                        children: gene.gene_structure.transcripts.length > 1 && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.Row), {
+                            children: /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)((0, $gXNCa$reactbootstrap.Col), {
+                                children: [
+                                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("b", {
+                                        children: /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("i", {
+                                            children: "Select transcript"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("br", {}),
+                                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.ButtonGroup), {
+                                        children: gene.gene_structure.transcripts.sort((a, b)=>a.id.localeCompare(b.id)).map((tr, idx)=>{
+                                            let v = tr.id === gene.gene_structure.canonical_transcript ? "primary" : "secondary";
+                                            if (tr.id !== tid) v = `outline-${v}`;
+                                            return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.ToggleButton), {
+                                                variant: v,
+                                                id: `radio-${idx}`,
+                                                type: "radio",
+                                                name: tr.id,
+                                                value: tr.id,
+                                                checked: tr.id === tid,
+                                                onChange: (e)=>setTid(e.currentTarget.value),
+                                                children: tr.id
+                                            }, idx);
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    geneSeq && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)($527ebc19dc92444d$var$CodeBlock, {
+                        id: tid,
+                        seq: rnaSeq.seq,
+                        blocks: $527ebc19dc92444d$var$decorateSeq(geneSeq, gene, 0, 0, tid, "rna")
+                    })
+                ]
             }),
-            gene.biotype === "protein_coding" && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.Tab), {
+            gene.biotype === "protein_coding" && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)((0, $gXNCa$reactbootstrap.Tab), {
                 tabClassName: "pep",
                 eventKey: "pep",
-                title: "Peptide sequence"
+                title: "Peptide sequence",
+                children: [
+                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.Container), {
+                        style: {
+                            width: "100ch",
+                            marginLeft: 0
+                        },
+                        children: gene.gene_structure.transcripts.length > 1 && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.Row), {
+                            children: /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)((0, $gXNCa$reactbootstrap.Col), {
+                                children: [
+                                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("b", {
+                                        children: /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("i", {
+                                            children: "Select transcript"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("br", {}),
+                                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.ButtonGroup), {
+                                        children: gene.gene_structure.transcripts.sort((a, b)=>a.id.localeCompare(b.id)).map((tr, idx)=>{
+                                            let v = tr.id === gene.gene_structure.canonical_transcript ? "primary" : "secondary";
+                                            if (tr.id !== tid) v = `outline-${v}`;
+                                            return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.ToggleButton), {
+                                                variant: v,
+                                                id: `radio-${idx}`,
+                                                type: "radio",
+                                                name: tr.id,
+                                                value: tr.id,
+                                                checked: tr.id === tid,
+                                                onChange: (e)=>setTid(e.currentTarget.value),
+                                                children: tr.id
+                                            }, idx);
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    geneSeq && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)($527ebc19dc92444d$var$CodeBlock, {
+                        id: tl_id,
+                        seq: pepSeq.seq,
+                        blocks: $527ebc19dc92444d$var$decoratePeptide(pepSeq.seq, transcript)
+                    })
+                ]
             })
         ]
     });
 };
-var $527ebc19dc92444d$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.connect)("selectConfiguration", "selectGeneSequences", "doRequestGeneSequence", $527ebc19dc92444d$var$Detail);
+var $527ebc19dc92444d$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.connect)("selectConfiguration", "selectGeneSequences", "selectRnaSequences", "selectPepSequences", "doRequestGeneSequence", "doRequestRnaSequence", "doRequestPepSequence", $527ebc19dc92444d$var$Detail);