notebook/app/views/document_analyses/sentiment.html.erb

<h5 class="grey-text">Sentiment</h5>
<div class="row">
  <div class="col s12 m6">
    <div class="card">
      <div class="card-content <%= @document_sentiment_color %> lighten-4">
        <div class="card-title black-text">
          Overall <%= @analysis.sentiment_label %>
        </div>
        <span style="font-size: 32px; margin-right: 10px;" class="<%= @document_sentiment_color %>-text left center">
          <i class="material-icons large">face</i><br />
          <span style="position: relative; top: -25px;">
            <%= (@analysis.sentiment_score * 100).round.abs %>
          </span>
        </span>
        <p class="black-text">
          <% 
            modifier = case @analysis.sentiment_score.abs * 100
            when 0..25
              'somewhat'
            when 26..50
              'mostly'
            when 51..100
              'very'
            else
              'generally'
            end
          %>
          This document expresses a <%= modifier %> <strong><%= @analysis.sentiment_label %></strong> sentiment throughout. 
        </p>
        <br />
        <p class="black-text">
          The emotion's intensity is scored on a scale from 1 to 100, where 100 is most intense.
        </p>
        <div class="progress teal lighten-5">
          <div class="determinate <%= @document_sentiment_color %>" style="width: <%= @analysis.sentiment_score.abs * 100 %>%"></div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>

  <% if @analysis.has_sentiment_scores? %>
    <div class="col s12 m12 l12">
      <div class="card">
        <div class="card-content" style="overflow: hidden;">
          <div class="card-title">
            Dominant emotions:
            <span class="<%= emotion_color(@document_dominant_emotion) %>-text">
              <%= @document_dominant_emotion %>
            </span>
            &
            <span class="<%= emotion_color(@document_secondary_emotion) %>-text">
              <%= @document_secondary_emotion %>
            </span>
          </div>

          <div class="row">
            <div class="col s12 m12 l6">
              The primary emotion evoked in this document is
              <strong class="<%= emotion_color(@document_dominant_emotion) %>-text">
                <%= @document_dominant_emotion %>.
              </strong>

              <blockquote>
                <%= render partial: 'document_analyses/sentiment/emotion_explanation', locals: { emotion: @document_dominant_emotion } %>
              </blockquote>

              The secondary emotion evoked in this document is
              <strong class="<%= emotion_color(@document_secondary_emotion) %>-text">
                <%= @document_secondary_emotion %>.
              </strong>

              <blockquote>
                <%= render partial: 'document_analyses/sentiment/emotion_explanation', locals: { emotion: @document_secondary_emotion } %>
              </blockquote>

            </div>
            <div class="col s12 m12 l6">
              <div class="center">Evoked emotion intensities</div>
              <%= bar_chart(@document_emotion_data, colors: [Document.color], min: 0, max: 100) %>
            </div>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</div>

<h5 class="grey-text">
  <%= link_to '#', class: "white-text js-link-entity right hoverable btn #{Document.color}", data: { id: -1 } do %>
      <i class="material-icons left">add</i>
      Link another page
  <% end %>
  Entities
</h5>

<script type="text/javascript">
  var color = d3.scalePoint().range(["#EDC951","#CC333F","#00A0B0"]);
  var radarChartOptions = {
    h: 300,
    margin: {
      top: 10, 
      right: 0, 
      bottom: 10, 
      left: 0
    },
    levels: 4,
    maxValue: 100,
    roundStrokes: true,
    color: color,
    dotRadius: 2
  };
</script>

<div class="row">
  <% @analysis.document_entities.includes(:entity, entity: [:image_uploads]).order('entity_type asc, relevance desc').each do |entity| %>
    <% entity_class = content_class_from_name(entity.entity_type) %>
    <div class="col s12">
      <div class="card">
        <div class="card-content">
          <div class="card-title <%= entity_class.text_color %>">
            <i class="material-icons left"><%= entity_class.icon %></i>
            <%= entity.text %>
          </div>

          <p class="right">
            Document relevance score: <%= entity.relevance.present? ? (entity.relevance * 100).round(1) : 'Calculating...' %>%
            <div class="progress <%= entity_class.color %> lighten-5">
              <div class="determinate <%= entity_class.color %>" style="width: <%= entity.relevance.present? ? (entity.relevance * 100).round(1) : 0 %>%"></div>
            </div>
          </p>
          <div class="row">
            <div class="col s12 m12 l6">
              <div class="center">Emotion intensities</div>
              <ul class="help-text">
                <% [:joy, :sadness, :fear, :disgust, :anger].each do |emotion| %>
                  <% emotion_score = entity.send("#{emotion}_score") %>
                  <li>
                    <%= emotion.to_s.titleize %>: <%= emotion_score.present? ? (100 * emotion_score).round(1) : 'Calculating...' %>
                    <div class="progress">
                      <div class="determinate <%= EmotionService.color_for_emotion(emotion) %>" style="width: <%= emotion_score.present? ? (100 * emotion_score).round(1) : 0 %>%"></div>
                    </div>
                  </li>
                <% end %>
                <li>
                  Overall sentiment: <%= entity.sentiment_label %> (<%= (entity.sentiment_score.present? ? (100 * entity.sentiment_score).round(1) : 'Calculating...') %>)
                </li>
              </ul>
            </div>
            <div class="col s12 m12 l6">
              <div class="center">Emotional range</div>
              <div id="graph-character-emotions-<%= entity.id %>"></div>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
        <div class="card-action">
          <% if entity.entity_id %>
            <% linked_entity_class = entity.entity.class %>
            <%= link_to polymorphic_path(linked_entity_class.name.downcase, id: entity.entity_id), class: 'blue-text left' do %>
              <i class="material-icons left"><%= linked_entity_class.icon %></i>
              View page
            <% end %>
            <%= link_to edit_polymorphic_path(linked_entity_class.name.downcase, id: entity.entity_id), class: 'green-text left' do %>
              <i class="material-icons left"><%= linked_entity_class.icon %></i>
              Edit page
            <% end %>
            <%= link_to "Unlink page", destroy_entity_document_path(entity), class: "#{entity_class.text_color} right" %>
            <div class="clearfix"></div>
          <% else %>
            <%= link_to new_polymorphic_path(entity_class, document_entity: entity.id), class: entity_class.color + '-text' do %>
              <i class="material-icons left">add</i>
              New <%= entity_class.name %>
            <% end %>
            <%= link_to '#', class: entity_class.color + '-text right js-link-entity', data: { id: entity.id } do %>
              <i class="material-icons left">link</i>
              Link existing
            <% end %>
          <% end %>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      $(document).ready(function () {
        var data = [
          [
            { axis: "Joy",     value: <%= (100 * (entity.joy_score.presence || 0)).round(1) %> },
            { axis: "Sadness", value: <%= (100 * (entity.sadness_score.presence || 0)).round(1) %> },
            { axis: "Fear",    value: <%= (100 * (entity.fear_score.presence || 0)).round(1) %> },
            { axis: "Disgust", value: <%= (100 * (entity.disgust_score.presence || 0)).round(1) %> },
            { axis: "Anger",   value: <%= (100 * (entity.anger_score.presence || 0)).round(1) %> }
          ]
        ];

        RadarChart("#graph-character-emotions-<%= entity.id %>", data, radarChartOptions);
      });
    </script>
  <% end %>
</div>

<div class="row">
  <%
    entities_in_table = @analysis.document_entities
      .order('relevance desc')
      .where(entity_type: 'Character')
      .reject { |e| e.dominant_emotion.first.second.nil? }
      .reject { |e| e.recessive_emotion.first.second.nil? }
  %>
  <% if entities_in_table.any? %>
    <div class="col s12">
      <div class="card">
        <div class="card-content">
          <div class="card-title">Character emotions</div>
            <table class="highlight">
              <tr>
                <th>Character</th>
                <th>Dominant emotion</th>
                <th>Recessive emotion</th>
              </tr>
              <% entities_in_table.each do |character| %>
                <tr>
                  <td><%= character.text %></td>
                  <td>
                    <div class="chip <%= EmotionService.color_for_emotion(character.dominant_emotion.first.first) %> lighten-3">
                      <%= character.dominant_emotion.first.first.to_s.titleize %>
                      (<%= (character.dominant_emotion.first.second * 100).round %>%)
                    </div>
                  </td>
                  <td>
                    <div class="chip <%= EmotionService.color_for_emotion(character.recessive_emotion.first.first) %> lighten-3">
                      <%= character.recessive_emotion.first.first.to_s.titleize %>
                      (<%= (character.recessive_emotion.first.second * 100).round %>%)
                    </div>
                  </td>
                </tr>
              <% end %>
            </table>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</div>

<div id="entity-link-modal" class="modal">
  <div class="modal-content">
    <h4>Link an existing page you've created</h4>
    <p>
      You can link a detected entity to one of your already-created pages by selecting it below.
    </p>
    <%= form_with url: link_entity_documents_path do |f| %>
      <%= f.hidden_field :document_id,          value: @analysis.document_id %>
      <%= f.hidden_field :document_analysis_id, value: @analysis.id %>
      <%= f.hidden_field :entity_type,          value: nil %>
      <%= f.hidden_field :entity_id,            value: nil %>
      <%= f.hidden_field :document_entity_id,   value: nil %>

      <% @current_user_content.each do |content_type, content_list| %>
        <% content_type_class = content_class_from_name(content_type) %>
        <% next if content_type == 'Document' %>
        <h5><%= content_type.pluralize %></h5>
        <ul class="collection">
          <% content_list.each do |content| %>
            <a href="#" 
               class="<%= content_type_class.text_color %> js-link-entity-selection" 
               data-id="<%= content.id %>"
               data-type="<%= content_type %>">
              <li class="collection-item">
                <i class="material-icons left"><%= content_type_class.icon %></i>
                <%= content.name %>
                <span class="secondary-content">
                  <i class="material-icons">link</i>
                </span>
              </li>
            </a>
          <% end %>
        </ul>
      <% end %>
    <% end %>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cancel</a>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function () {

    $('.js-link-entity').click(function () {
      $('#entity-link-modal').find('input[name=document_entity_id]').val($(this).data('id'));

      $('#entity-link-modal').modal('open');

      return false;
    });

    $('.js-link-entity-selection').click(function () {
      var entity = $(this);
      var form   = $(this).closest('form');

      form.find('input[name=entity_id]').val(entity.data('id'));
      form.find('input[name=entity_type]').val(entity.data('type'));
      
      form.submit();
      return false;
    });
  });

</script>


<style>
.bar {
  fill: <%= Document.hex_color %>;
}

.axis {
  font-size: 13px;
}
.label {
  font-size: 11px;
}

.axis path,
.axis line {
  fill: none;
  display: none;
}
</style>