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>