Merge 54dc897 into 1b93a4f

app/assets/javascripts/about/index.js

@@ -0,0 +1,24 @@
+function loadProgressStats(){
+  stats = window.progressData[window.activeProjectID]
+  $('#num_vulns').html(stats["num_vulns"])
+  $('#perc_curated').html(stats["perc_curated"])
+}
+
+$( document ).ready( function() {
+
+  $.ajax({
+    url: "/api/about/progress",
+    dataType: 'json'
+  }).done(function(jsonData){
+    window.progressData = jsonData;
+    window.activeProjectID = 0; // all projects
+    loadProgressStats();
+  });
+
+  $('.project-select-pane button').click((e) => {
+    $('button.project-select-button').html(e.target.innerHTML);
+    $('#progress-project-select').foundation('close');
+    window.activeProjectID = e.target.dataset.project;
+    loadProgressStats();
+  })
+});

app/assets/javascripts/application.js

@@ -15,6 +15,12 @@
 //= require d3
 //= require modernizr
 //= require_tree ./global
+//= require plugins/foundation.core
+//= require plugins/foundation.dropdown
+//= require plugins/foundation.util.keyboard
+//= require plugins/foundation.util.box
+//= require plugins/foundation.util.touch
+//= require plugins/foundation.util.triggers
 //= require foundation
 //= require moment/moment
 //= require datatables.net/js/jquery.dataTables

app/assets/javascripts/curate.js

@@ -0,0 +1,13 @@
+function loadProgressStats(projectID){
+
+}
+
+$( document ).ready( function() {
+
+
+
+  $('.project-select-pane button').click((e) => {
+    let projectID = e.target.dataset.project;
+
+  })
+});

app/assets/stylesheets/_settings.scss

@@ -396,7 +396,7 @@ $dropdownmenu-arrows: true;
 $dropdownmenu-arrow-color: $anchor-color;
 $dropdownmenu-arrow-size: 6px;
 $dropdownmenu-arrow-padding: 1.5rem;
-$dropdownmenu-min-width: 200px;
+$dropdownmenu-min-width: 150px;
 $dropdownmenu-background: $white;
 $dropdownmenu-submenu-background: $dropdownmenu-background;
 $dropdownmenu-padding: $global-menu-padding;

app/assets/stylesheets/common/icons.scss

@@ -96,6 +96,7 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 .vhp-icon-cloud         { @extend .fi-cloud; }
 .vhp-icon-cogs          { @extend .fas; @extend .fa-cogs; }
 .vhp-icon-contest       { @extend .fas; @extend .fa-trophy; }
+.vhp-icon-curate        { @extend .fas; @extend .fa-comment-medical; }
 .vhp-icon-default       { @extend .fas; @extend .fa-clipboard-check; }
 .vhp-icon-dependency    { @include vhp-material-icon('device_hub') }
 .vhp-icon-distrust-input{ @extend .fas; @extend .fa-door-closed; }

app/assets/stylesheets/common/vhp.scss

@@ -90,11 +90,11 @@ hr {
   }
 
   .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
-    border-top-color: white;
+    border-top-color: white; // down arrow
   }
 
   .dropdown.menu > li.is-dropdown-submenu-parent > a:hover:after{
-    border-top-color: $vhp-color;
+    border-top-color: $vhp-color; // down arrow
   }
 
   .top-bar-title {
@@ -111,6 +111,38 @@ hr {
   top: 120%;
 }
 
+.project-select-button {
+  background-color: $light-gray;
+  color: $body-font-color;
+  font-weight: $global-weight-bold;
+
+}
+
+.project-select-pane {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  flex-flow: row;
+  border: 1pt solid $medium-gray;
+  justify-content: center;
+  width: 12em;
+
+
+  button {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    padding: 1em;
+    margin: 0.25em;
+    width: 100%;
+    text-align: center;
+    border: 1pt solid $medium-gray;
+    background-color: $light-gray;
+    color: $body-font-color;
+    font-weight: $global-weight-bold;
+  }
+}
+
 .subheader {
   font-size: 2vh;
 }

app/assets/stylesheets/foundation_and_overrides.scss

@@ -19,7 +19,7 @@
 // @include foundation-flex-classes;
 @include foundation-typography;
 @include foundation-forms;
-// @include foundation-button;
+@include foundation-button;
 // @include foundation-accordion;
 // @include foundation-accordion-menu;
 // @include foundation-badge;
@@ -31,7 +31,7 @@
 @include foundation-menu;
 @include foundation-menu-icon;
 // @include foundation-drilldown-menu;
-// @include foundation-dropdown;
+@include foundation-dropdown;
 @include foundation-dropdown-menu;
 @include foundation-responsive-embed;
 // @include foundation-label;

app/controllers/about_controller.rb

@@ -0,0 +1,8 @@
+class AboutController < ApplicationController
+
+  # GET /about
+  def index
+  end
+
+
+end

app/controllers/curate_controller.rb

@@ -1,6 +1,7 @@
 class CurateController < ApplicationController
 
   def index
+    @projects = Project.all
     num_vulns = Vulnerability.count
     @num_vulns_report = ActiveSupport::NumberHelper.
                          number_to_delimited(num_vulns, :delimiter => ',')

app/controllers/progress_controller.rb

@@ -0,0 +1,42 @@
+class ProgressController < ApplicationController
+
+  # GET /about
+  def index
+    @projects = Project.all
+  end
+
+  # GET /api/about/progress
+  def progress
+    stats = {}
+    Project.all.each do |p|
+      p_stats = {}
+      num_vulns = Vulnerability.where(project: p).count
+      p_stats[:num_vulns] = num_vulns
+      p_stats[:num_vulns_report] = ActiveSupport::NumberHelper.number_to_delimited(num_vulns, :delimiter => ',')
+      num_curated = Vulnerability.curated.where(project: p).count
+      p_stats[:num_curated] = num_curated
+      p_stats[:perc_curated] = 100.0 * num_curated / num_vulns.to_f
+      p_stats[:perc_report] = "%.1f%%" % p_stats[:perc_curated]
+      num_w_fixes = Fix.select(:vulnerability_id).distinct.count
+      p_stats[:perc_fixes] = (100.0 * num_w_fixes / num_vulns.to_f)
+      # @fix_report = "%.1f%%" % @perc_fixes
+      # @num_vccs = Vcc.count
+      # @num_w_vccs = Vcc.select(:vulnerability_id).distinct.count
+      # @perc_vccs = (100.0 * @num_w_vccs / num_vulns.to_f)
+      # @vcc_report = "%.1f%%" % @perc_vccs
+      stats[p.id] = p_stats
+    end
+    stats[0] = all_project_stats()
+    render_json_for_api stats
+  end
+
+  private
+
+  def all_project_stats
+    {
+      num_vulns: Vulnerability.count
+    }
+  end
+
+
+end

app/controllers/projects_controller.rb

@@ -19,7 +19,7 @@ def releases
   private
     # Use callbacks to share common setup or constraints between actions.
     def set_project
-      @project = Project.find(params[:project_id])
+       @project = Project.find(params[:project_id])
     end
 
     # Never trust parameters from the scary internet, only allow the white list through.

app/views/about/index.html.erb

@@ -0,0 +1,3 @@
+<h1>About Us</h1>
+
+<p>Stuff about us.</p>

app/views/curate/_howto.html.erb

@@ -0,0 +1,15 @@
+<%= render('shared/grid', size: 8) do %>
+
+  <h2>About Our Curators</h2>
+
+  <p>Most of our curators are undergraduate software engineering students at Rochester Institute of Technology. Students are required to complete a vulnerability history study, and are allowed to volunteer their submissions to this project.</p>
+
+<% end %>
+
+
+<%= render('shared/grid', size: 8) do %>
+  <h2>How to Curate</h2>
+
+  <p>To be written.</p>
+
+<% end %>

app/views/curate/_progress.html.erb

@@ -1,6 +1,24 @@
+
 <%= render('shared/grid', size: 8) do %>
 
-  <h2>Chromium Curation Progress</h2>
+<button class="button project-select-button" type="button"
+        data-toggle="progress-project-select">
+  All Projects
+</button>
+
+<div class="project-select-pane dropdown-pane" id="progress-project-select"
+     data-dropdown data-close-on-click="true">
+     <button class="button" data-project="0" >
+       All Projects
+     </button>
+    <% @projects.each do |p| %>
+      <button class="button"
+              data-project="<%= p.id %>" >
+            <img class="<%= p.subdomain %>-inline-logo" title="<%= p.name %>">
+            <%= p.name%>
+      </button>
+    <% end %>
+</div>
 
   <p>
     The data set for this project is usable at any time, and has been used in academic literature.

app/views/curate/index.html.erb

@@ -3,21 +3,39 @@
 <% end %>
 
 <%= render('shared/grid', size: 8) do %>
-  <p>
-    This project relies upon a massive effort to collect, correct, and annotate vulnerability history data. We call this process <b>curating</b>.
-  </p>
-
-  <h2>About Our Curators</h2>
-
-  <p>Most of our curators are undergraduate software engineering students at Rochester Institute of Technology. Students are required to complete a vulnerability history study, and are allowed to volunteer their submissions to this project.</p>
-
+<p>
+  This project relies upon a massive effort to collect, correct, and annotate vulnerability history data. We call this process <b>curating</b>.
+</p>
+
+<ul class="tabs"
+    id="curate-tabs"
+    data-tabs
+    data-deep-link="true"
+    data-update-history="true"
+    data-deep-link-smudge="true"
+    data-deep-link-smudge-delay="500">
+  <li class="tabs-title is-active">
+    <a href="#howto" draggable="false">
+      <i class="vhp-icon-curate"></i>
+      How to Curate
+    </a>
+  </li>
+  <li class="tabs-title">
+    <a href="#progress" aria-selected="true" draggable="false">
+      <i class="vhp-icon-graph-pie"></i>
+      Progress
+    </a>
+  </li>
+</ul>
 <% end %>
 
-<%= render 'progress' %>
+<div data-tabs-content="curate-tabs">
+  <div class="tabs-panel is-active" id="howto">
+    <%= render 'howto' %>
+  </div>
+  <div class="tabs-panel" id="progress">
+    <%= render 'progress' %>
+  </div>
+</div>
 
-<%= render('shared/grid', size: 8) do %>
-  <h2>How to Curate</h2>
-
-  <p>To be written.</p>
-
-<% end %>
+<%= javascript_include_tag "curate" %>

app/views/layouts/application.html.erb

@@ -44,19 +44,27 @@
           <li class="right"><%= link_to "Vulnerabilities", :controller =>"vulnerabilities" %></li>
           <li class="right"><%= link_to "Code", :controller =>"filepaths" %></li>
           <li class="right"><%= link_to "Articles", :controller =>"articles" %></li>
-          <li class="has-submenu">
+          <li class="has-submenu is-dropdown-submenu-parent">
             <a href="#">Tags</a>
             <ul class="submenu menu" data-submenu>
-              <li><a href="/tags">All</a></li>
-              <li><a href="/tags?search=Project:">Projects</a></li>
-              <li><a href="/tags?search=CWE">CWEs</a></li>
-              <li><a href="/tags?search=Language">Languages</a></li>
-              <li><a href="/tags?search=Lesson">Lessons</a></li>
-              <li><a href="/tags?search=Severity:">Severities</a></li>
-              <li><a href="/tags?search=Subsystem">Subsystems</a></li>
+              <li class="center"><a href="/tags">All</a></li>
+              <li class="center"><a href="/tags?search=Project:">Projects</a></li>
+              <li class="center"><a href="/tags?search=CWE">CWEs</a></li>
+              <li class="center"><a href="/tags?search=Language">Languages</a></li>
+              <li class="center"><a href="/tags?search=Lesson">Lessons</a></li>
+              <li class="center"><a href="/tags?search=Severity:">Severities</a></li>
+              <li class="center"><a href="/tags?search=Subsystem">Subsystems</a></li>
+            </ul>
+          </li>
+          <li class="has-submenu is-dropdown-submenu-parent">
+            <a href="#">More</a>
+            <ul class="submenu menu" data-submenu>
+              <li><a href="/projects">Case Studies</a></li>
+              <li><a href="/progress">Progress</a></li>
+              <li><a href="/curate">How to Curate</a></li>
+              <li><a href="/about">About Us</a></li>
             </ul>
           </li>
-          <li class="right"><%= link_to "Curate", :controller =>'curate' %></li>
         </ul>
       </div>
     </div>