genome/dgi-db

View on GitHub
app/views/interaction_claims/_interaction_search_failed.html.haml

Summary

Maintainability
Test Coverage
- ambiguous_matches = ambiguous_results + ambiguous_no_interactions
%div{style: "float: right; margin-top: -15px; width: 20%"}
  = render partial: 'shared/page_export'
  %div.well{style: "margin-top: 15px;"}
    %h3{style: "margin-top: -5px;"}
      Unmatched Terms
    - failed_terms.each do |term|
      %li
        = term

  %div.well{style: "margin-top: -5px;"}
    %h3{style: "margin-top: -5px; margin-bottom: -5px;"}
      Multiple Matches
    %div{style: "width: 200px; padding: 0", class: "container demo"}
    - if ambiguous_matches.count > 0
      %div(class="panel-group" id="accordion" role="tablist" aria-multiselectable="true")
        - ambiguous_matches.each do |result|
          %ul{class: "tree", style: "margin-left: -15px;"}
            %li
              %input{type: "checkbox", checked: "checked", id: "#{'heading' + result[:term]}"}
              %label{for: "#{'heading' + result[:term]}", class: "tree_label"}
                %span
                  %input{class: "ambiguous search-term", type: "checkbox", name: result[:term], checked: 1}
                    = result[:term]
              %ul
                - result[:identifiers].each do |entity|
                  %li
                    %span{class: "tree_label"}
                      %input{class: "ambiguous sidebar-toggle #{result[:term]}", type: "checkbox", name: "#{entity.name + "-ambiguous"}", checked: 1}
                        = entity.name 
    - else
      %div{style: "margin-top:15px;"}
        %i
          None found.
%div{style: "float: left; width: 78%;"}
  %ul(class="result-list" id="list-results")
    - if ambiguous_matches.count > 0
      - ambiguous_matches.each do |result|
        - result[:identifiers].each do |entity|
          %li{class: "interaction interaction-panel", "data-category" => "interaction", "data-name" => "Interaction", id: entity.name + "-ambiguous", style: "display: list-item; width: 100%;"}
            = render partial: 'interaction_claims/interactions_search_panel', locals: { term: result[:term], entity: entity, filtered_interactions: result[:interactions][entity].to_a, scores: result[:scores], known_drug_partners_per_gene: known_drug_partners_per_gene, known_gene_partners_per_drug: known_gene_partners_per_drug  }
    - else 
      %li{class: "interaction interaction-panel", "data-category" => "interaction", "data-name" => "Interaction", style: "width: 100%; height: 300px;"}
        %h3{style: "margin-left: 20px;"}
          None of your search terms returned 
          %i 
            ambiguous 
          matches.
          
:css
  /* ————————————————————–
    Tree core styles
  */
  .tree { margin: 1em; }

  .tree input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    }

  .tree input ~ ul { display: none; }

  .tree input:checked ~ ul { display: block; }

  /* ————————————————————–
    Tree rows
  */
  .tree li {
    line-height: 1.2;
    position: relative;
    padding: 0 0 1em 1em;
  }

  .tree ul li { padding: 1em 0 0 1em; }

  .tree ul { padding-left: 0; margin: -5px 0 0 -2px; }

  .tree > li:last-child { padding-bottom: 0; }

  /* ————————————————————–
    Tree labels
  */
  .tree_label {
    position: relative;
    display: inline-block;
    }

  label.tree_label { cursor: pointer; }

  label.tree_label:hover { color: #666; }

  /* ————————————————————–
    Tree expanded icon
  */
  label.tree_label:before {
    background: #000;
    color: #fff;
    position: relative;
    z-index: 1;
    float: left;
    margin: 0 1em 0 -2em;
    width: 1em;
    height: 1em;
    border-radius: 1em;
    content: '+';
    text-align: center;
    line-height: .9em;
    }

  :checked ~ label.tree_label:before { content: '–'; }

  /* ————————————————————–
    Tree branches
  */
  .tree li:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -.5em;
    display: block;
    width: 0;
    border-left: 1px solid #777;
    content: "";
    }

  .tree_label:after {
    position: absolute;
    top: 0;
    left: -1.5em;
    display: block;
    height: 0.5em;
    width: 1em;
    border-bottom: 1px solid #777;
    border-left: 1px solid #777;
    border-radius: 0 0 0 .3em;
    content: '';
    }

  label.tree_label:after { border-bottom: 0; }

  :checked ~ label.tree_label:after {
    border-radius: 0 .3em 0 0;
    border-top: 1px solid #777;
    border-right: 1px solid #777;
    border-bottom: 0;
    border-left: 0;
    bottom: 0;
    top: 0.5em;
    height: auto;
    }

  .tree li:last-child:before {
    height: 1em;
    bottom: auto;
    }

  .tree > li:last-child:before { display: none; }

  .tree_custom {
    display: block;
    background: #eee;
    padding: 1em;
    border-radius: 0.3em;
  }

  ul {
    list-style-type:none
  }

  input.ambiguous {
    position: relative;
  }