ScottKolo/suitesparse-matrix-collection-website

View on GitHub
app/views/collection_matrices/index.html.haml

Summary

Maintainability
Test Coverage
=provide(:title, "Index")
=provide(:description, "SuiteSparse Matrix Collection Index")

.alert.alert-info.alert-dismissible.about-alert
  %button.btn-close.about-close{type: "button", 'data-bs-dismiss': "alert", 'aria-label': "Close"}
    %span{:'aria-hidden' => "true"}
  The SuiteSparse Matrix Collection (formerly the University of Florida Sparse Matrix Collection) is a widely used set of sparse matrix benchmarks collected from a wide range of applications. See the
  = link_to "about page", about_path, class: "alert-link"
  for more information.

.card.card-body.bg-light
  .row
    .col-lg-2
      .text-center.filter-column
        .dropdown
          %button.btn.btn-outline-dark.btn-md.dropdown-toggle.mb-2{type: "button", id: "filter-dropdown", 'data-bs-toggle': "dropdown", 'aria-haspopup': "true", 'aria-expanded': "true" }
            %span.fa.fa-filter{'aria-hidden': "true"}
            Filters
          %ul.dropdown-menu{'aria-labelledby': 'filter-dropdown', 'data-no-turbolink': 'true'}
            %li
              .dropdown-item.small{'data-target': ".size-checkbox", tabIndex: "-1"}
                = check_box_tag :size_checkbox, 'enable', @checked[:size], class: "filter-checkbox size-checkbox", 'data-target': "#size-filter"
                = label_tag :size_checkbox, "Size and Shape"
            %li
              .dropdown-item.small{'data-target': ".structure-checkbox", tabIndex: "-1"}
                = check_box_tag :structure_checkbox, 'enable', @checked[:structure], class: "filter-checkbox structure-checkbox", 'data-target': "#structure-filter"
                = label_tag :structure_checkbox, "Structure and Entry Types"
            %li
              .dropdown-item.small{'data-target': ".metadata-checkbox", tabIndex: "-1"}
                = check_box_tag :metadata_checkbox, 'enable', @checked[:metadata], class: "filter-checkbox metadata-checkbox", 'data-target': "#metadata-filter"
                = label_tag :metadata_checkbox, "Metadata"
      .filterrific_spinner{style: "display:none; margin: 30px 40%;"}
        = image_tag('ajax-loader.gif')
    <!-- Set up the filter form -->
    .col-lg-10.text-center{style: "margin-left: -1px; border-left: 1px solid #e3e3e3;"}
      = form_for_filterrific @filterrific do |f|
        .row.filter
          .col-md-6
            #search.card
              %legend.card-header
                = f.label :search_query, "Keyword Search"
              .card-body
                = f.text_field :search_query, class: 'filterrific-periodically-observed'
          .col-md-6
            .card
              %legend.card-header
                = f.label :sorted_by, "Sorted by"
              .card-body
                = f.select :sorted_by, @filterrific.select_options[:sorted_by]
        #size-filter.filter.filter-hidden
          %h2.py-2
            Filter by Matrix Size and Shape
          .row
            .col-md-4
              .card
                %legend.card-header
                  Rows
                .card-body.d-flex.justify-content-between.py-1
                  .input-with-label.p-1
                    = f.text_field :min_rows, class: 'filterrific-periodically-observed', id: "filter-input-rows-min"
                    = label_tag 'filter-input-rows-min', "Min"
                  .input-with-label.p-1
                    = f.text_field :max_rows, class: 'filterrific-periodically-observed', id: "filter-input-rows-max"
                    = label_tag 'filter-input-rows-max', "Max"
            .col-md-4
              .card
                %legend.card-header
                  Columns
                .card-body.d-flex.justify-content-between.py-1
                  .input-with-label.p-1
                    = f.text_field :min_cols, class: 'filterrific-periodically-observed', id: 'filter-input-columns-min'
                    = label_tag 'filter-input-columns-min', "Min"
                  .input-with-label.p-1
                    = f.text_field :max_cols, class: 'filterrific-periodically-observed', id: 'filter-input-columns-max'
                    = label_tag 'filter-input-columns-max', "Max"
            .col-md-4
              .card
                %legend.card-header
                  Nonzeros
                .card-body.d-flex.justify-content-between.py-1
                  .input-with-label.p-1
                    = f.text_field :min_nonzeros, class: 'filterrific-periodically-observed', id: 'filter-input-nonzeros-min'
                    = label_tag 'filter-input-nonzeros-min', "Min"
                  .input-with-label.p-1
                    = f.text_field :max_nonzeros, class: 'filterrific-periodically-observed', id: 'filter-input-nonzeros-max'
                    = label_tag 'filter-input-nonzeros-max', "Max"
        #structure-filter.filter.filter-hidden
          %h2.py-2
            Filter by Matrix Structure and Entry Type
          .row
            .col-md-4.column
              .card
                %legend.card-header
                  Pattern Symmetry
                .card-body.d-flex.justify-content-between.py-1
                  .input-with-label.p-1
                    = f.text_field :min_pattern_symmetry, class: 'filterrific-periodically-observed', id: 'filter-input-pattern_symmetry-min'
                    = label_tag 'filter-input-pattern_symmetry-min', "Min (%)"
                  .input-with-label.p-1
                    = f.text_field :max_pattern_symmetry, class: 'filterrific-periodically-observed', id: 'filter-input-pattern_symmetry-max'
                    = label_tag 'filter-input-pattern_symmetry-max', "Max (%)"
            .col-md-4.column
              .card
                %legend.card-header
                  Numerical Symmetry
                .card-body.d-flex.justify-content-between.py-1
                  .input-with-label.p-1
                    = f.text_field :min_numerical_symmetry, class: 'filterrific-periodically-observed', id: 'filter-input-numerical_symmetry-min'
                    = label_tag 'filter-input-numerical_symmetry-min', "Min (%)"
                  .input-with-label.p-1
                    = f.text_field :max_numerical_symmetry, class: 'filterrific-periodically-observed', id: 'filter-input-numerical_symmetry-max'
                    = label_tag 'filter-input-numerical_symmetry-max', "Max (%)"
            .col-md-4.column
              .card
                %legend.card-header
                  Strongly Connected Components
                .card-body.d-flex.justify-content-between.py-1
                  .input-with-label.p-1
                    = f.text_field :min_strongly_connected_components, class: 'filterrific-periodically-observed', id: 'filter-input-strongly_connected_components-min'
                    = label_tag 'filter-input-strongly_connected_components-min', "Min"
                  .input-with-label.p-1
                    = f.text_field :max_strongly_connected_components, class: 'filterrific-periodically-observed', id: 'filter-input-strongly_connected_components-max'
                    = label_tag 'filter-input-strongly_connected_components-max', "Max"
          .row
            .col-md-4.column
              .card
                %legend.card-header
                  %label{for: 'filter-input-rb_type'}
                    Rutherford-Boeing Type
                .card-body
                  = f.select :rb_type, @filterrific.select_options[:rutherford_boeing_options], { include_blank: 'Any', selected: 'Any' }, id: 'filter-input-rb_type'
            .col-md-4.column
              .card
                %legend.card-header
                  %label{for: 'filter-input-structure'}
                    Special Structure
                .card-body
                  = f.select :structure, @filterrific.select_options[:structure_options], { include_blank: 'Any', selected: 'Any' }, id: 'filter-input-structure'
            .col-md-4.column
              .card
                %legend.card-header
                  %label{for: 'filter-input-positive_definite'}
                    Positive Definite
                .card-body
                  = f.select :positive_definite, @filterrific.select_options[:positive_definite_options], { include_blank: 'Any', selected: 'Any'}, id: 'filter-input-positive_definite'
        #metadata-filter.filter.filter-hidden
          %h2.py-2
            Filter by Matrix Metadata
          .row
            .col-md-3.col-6.column
              .card
                %label.card-header{for: 'filter-input-name'}
                  Matrix Name
                .card-body
                  = f.text_field :name_query, class: 'filterrific-periodically-observed', id: 'filter-input-name', style: 'width: 80%;'
            .col-md-3.col-6.column
              .card
                %label.card-header{for: 'filter-input-group'}
                  Group Name
                .card-body
                  = f.text_field :group_query, class: 'filterrific-periodically-observed', id: 'filter-input-group', style: 'width: 80%;'
            .col-md-3.col-6.column
              .card
                %legend.card-header
                  Matrix ID
                .card-body.d-flex.justify-content-between.py-1
                  .input-with-label.p-1
                    = f.text_field :min_id, class: 'filterrific-periodically-observed', id: 'filter-input-id-min'
                    %label{for: 'filter-input-id-min'}
                      Min
                  .input-with-label.p-1
                    = f.text_field :max_id, class: 'filterrific-periodically-observed', id: 'filter-input-id-max'
                    %label{for: 'filter-input-id-max'}
                      Max
            .col-md-3.col-6.column
              .card
                %legend.card-header
                  Year
                .card-body.d-flex.justify-content-between.py-1
                  .input-with-label.p-1
                    = f.text_field :min_year, class: 'filterrific-periodically-observed', id: 'filter-input-year-min'
                    = label_tag 'filter-input-year-min', "Min"
                  .input-with-label.p-1
                    = f.text_field :max_year, class: 'filterrific-periodically-observed', id: 'filter-input-year-max'
                    = label_tag 'filter-input-year-max', "Max"

#filterrific_results
  = render partial: 'collection_matrices/list', locals: { matrices: @matrices }

:javascript
  $(function() {
      // Check if alert has been closed
      if( Cookies.get('about-box') === 'closed' ){
          $('.about-alert').hide();
      }
      $('.about-close').click(function( e ){
          // Do not perform default action when button is clicked
          e.preventDefault();
          Cookies.set('about-box', 'closed');
      });
  });

:javascript
  $(function() {
    $(".filter-checkbox").change(function() {
      if(this.checked) {
        $($(this).data("target")).removeClass('filter-hidden');
      } else {
        $($(this).data("target")).addClass('filter-hidden');
        $($(this).data("target")).find("input").each(function() {
          $(this).val('');
        });
        $($(this).data("target")).find("select").each(function() {
          $(this)[0].selectedIndex = 0;
          $(this).trigger('change');
        });
      }
    });
  });

:javascript
  $( document ).on('turbolinks:load', function() {
    $(".filter-checkbox").each(function() {
      if(this.checked) {
        $($(this).data("target")).removeClass('filter-hidden');
      }
    });
  });

:javascript
  $(function() {
    $('.dropdown-menu').find('.small').click(function(e) {
      if(e.target.type !== 'checkbox' && e.target.nodeName !== 'LABEL') {
        // If the click is on the checkbox or label, no need to click twice
        $($(this).data("target")).trigger('click');
      }
      // Keep the dropdown menu open until we click elsewhere
      e.stopPropagation();
    });
  });