FEATURE: New sentiment analysis visualization report (#1109)

## 🔍 Overview
This update adds a new report page at `admin/reports/sentiment_analysis` where admins can see a sentiment analysis report for the forum grouped by either category or tags. 

## ➕ More details
The report can breakdown either category or tags into positive/negative/neutral sentiments based on the grouping (category/tag). Clicking on the doughnut visualization will bring up a post list of all the posts that were involved in that classification with further sentiment classifications by post. 

The report can additionally be sorted in alphabetical order or by size, as well as be filtered by either category/tag based on the grouping.

## 👨🏽‍💻 Technical Details
The new admin report is registered via the pluginAPi with `api.registerReportModeComponent` to register the custom sentiment doughnut report. However, when each doughnut visualization is clicked, a new endpoint found at: `/discourse-ai/sentiment/posts` is fetched to showcase posts classified by sentiments based on the respective params.


## 📸 Screenshots
![Screenshot 2025-02-14 at 11 11 35](https://github.com/user-attachments/assets/a63b5ab8-4fb2-477d-bd29-92545f44ff09)

Author: keegangeorge

app/controllers/discourse_ai/sentiment/sentiment_controller.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module DiscourseAi
+  module Sentiment
+    class SentimentController < ::Admin::StaffController
+      include Constants
+      requires_plugin ::DiscourseAi::PLUGIN_NAME
+
+      def posts
+        group_by = params.required(:group_by)&.to_sym
+        group_value = params.required(:group_value).presence
+        start_date = params[:start_date].presence
+        end_date = params[:end_date]
+        threshold = SENTIMENT_THRESHOLD
+
+        raise Discourse::InvalidParameters if %i[category tag].exclude?(group_by)
+
+        case group_by
+        when :category
+          grouping_clause = "c.name"
+          grouping_join = "INNER JOIN categories c ON c.id = t.category_id"
+        when :tag
+          grouping_clause = "tags.name"
+          grouping_join =
+            "INNER JOIN topic_tags tt ON tt.topic_id = p.topic_id INNER JOIN tags ON tags.id = tt.tag_id"
+        end
+
+        posts =
+          DB.query(
+            <<~SQL,
+          SELECT
+            p.id AS post_id,
+            p.topic_id,
+            t.title AS topic_title,
+            p.cooked as post_cooked,
+            p.user_id,
+            p.post_number,
+            u.username,
+            u.name,
+            u.uploaded_avatar_id,
+            (CASE 
+              WHEN (cr.classification::jsonb->'positive')::float > :threshold THEN 'positive'
+              WHEN (cr.classification::jsonb->'negative')::float > :threshold THEN 'negative'
+              ELSE 'neutral'
+            END) AS sentiment
+          FROM posts p
+          INNER JOIN topics t ON t.id = p.topic_id
+          INNER JOIN classification_results cr ON cr.target_id = p.id AND cr.target_type = 'Post'
+          LEFT JOIN users u ON u.id = p.user_id
+          #{grouping_join}
+          WHERE
+            #{grouping_clause} = :group_value AND
+            t.archetype = 'regular' AND
+            p.user_id > 0 AND
+            cr.model_used = 'cardiffnlp/twitter-roberta-base-sentiment-latest' AND
+            ((:start_date IS NULL OR p.created_at > :start_date) AND (:end_date IS NULL OR p.created_at < :end_date))
+            AND p.deleted_at IS NULL
+          ORDER BY p.created_at DESC
+        SQL
+            group_value: group_value,
+            start_date: start_date,
+            end_date: end_date,
+            threshold: threshold,
+          )
+
+        render_json_dump(
+          serialize_data(
+            posts,
+            AiSentimentPostSerializer,
+            scope: guardian,
+            add_raw: true,
+            add_excerpt: true,
+            add_title: true,
+          ),
+        )
+      end
+    end
+  end
+end

app/serializers/ai_sentiment_post_serializer.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class AiSentimentPostSerializer < ApplicationSerializer
+  attributes :post_id,
+             :topic_id,
+             :topic_title,
+             :post_number,
+             :username,
+             :name,
+             :avatar_template,
+             :excerpt,
+             :sentiment,
+             :truncated
+
+  def avatar_template
+    User.avatar_template(object.username, object.uploaded_avatar_id)
+  end
+
+  def excerpt
+    Post.excerpt(object.post_cooked)
+  end
+
+  def truncated
+    true
+  end
+end

assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs

@@ -0,0 +1,184 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { fn, hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action, get } from "@ember/object";
+import PostList from "discourse/components/post-list";
+import dIcon from "discourse/helpers/d-icon";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+import Post from "discourse/models/post";
+import closeOnClickOutside from "discourse/modifiers/close-on-click-outside";
+import { i18n } from "discourse-i18n";
+import DoughnutChart from "discourse/plugins/discourse-ai/discourse/components/doughnut-chart";
+
+export default class AdminReportSentimentAnalysis extends Component {
+  @tracked selectedChart = null;
+  @tracked posts = null;
+
+  get colors() {
+    return ["#2ecc71", "#95a5a6", "#e74c3c"];
+  }
+
+  calculateNeutralScore(data) {
+    return data.total_count - (data.positive_count + data.negative_count);
+  }
+
+  get currentGroupFilter() {
+    return this.args.model.available_filters.find(
+      (filter) => filter.id === "group_by"
+    ).default;
+  }
+
+  get currentSortFilter() {
+    return this.args.model.available_filters.find(
+      (filter) => filter.id === "sort_by"
+    ).default;
+  }
+
+  get transformedData() {
+    return this.args.model.data.map((data) => {
+      return {
+        title: data.category_name || data.tag_name,
+        scores: [
+          data.positive_count,
+          this.calculateNeutralScore(data),
+          data.negative_count,
+        ],
+        total_score: data.total_count,
+      };
+    });
+  }
+
+  @action
+  async showDetails(data) {
+    this.selectedChart = data;
+    try {
+      const posts = await ajax(`/discourse-ai/sentiment/posts`, {
+        data: {
+          group_by: this.currentGroupFilter,
+          group_value: data.title,
+          start_date: this.args.model.start_date,
+          end_date: this.args.model.end_date,
+        },
+      });
+
+      this.posts = posts.map((post) => Post.create(post));
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+
+  sentimentMapping(sentiment) {
+    switch (sentiment) {
+      case "positive":
+        return {
+          id: "positive",
+          text: i18n(
+            "discourse_ai.sentiments.sentiment_analysis.score_types.positive"
+          ),
+          icon: "face-smile",
+        };
+      case "neutral":
+        return {
+          id: "neutral",
+          text: i18n(
+            "discourse_ai.sentiments.sentiment_analysis.score_types.neutral"
+          ),
+          icon: "face-meh",
+        };
+      case "negative":
+        return {
+          id: "negative",
+          text: i18n(
+            "discourse_ai.sentiments.sentiment_analysis.score_types.negative"
+          ),
+          icon: "face-angry",
+        };
+    }
+  }
+
+  doughnutTitle(data) {
+    if (data?.total_score) {
+      return `${data.title} (${data.total_score})`;
+    } else {
+      return data.title;
+    }
+  }
+
+  <template>
+    <div class="admin-report-sentiment-analysis">
+      {{#each this.transformedData as |data|}}
+        <div
+          class="admin-report-sentiment-analysis__chart-wrapper"
+          role="button"
+          {{on "click" (fn this.showDetails data)}}
+          {{closeOnClickOutside
+            (fn (mut this.selectedChart) null)
+            (hash
+              targetSelector=".admin-report-sentiment-analysis-details"
+              secondaryTargetSelector=".admin-report-sentiment-analysis"
+            )
+          }}
+        >
+          <DoughnutChart
+            @labels={{@model.labels}}
+            @colors={{this.colors}}
+            @data={{data.scores}}
+            @doughnutTitle={{this.doughnutTitle data}}
+          />
+        </div>
+      {{/each}}
+    </div>
+
+    {{#if this.selectedChart}}
+      <div class="admin-report-sentiment-analysis-details">
+        <h3 class="admin-report-sentiment-analysis-details__title">
+          {{this.selectedChart.title}}
+        </h3>
+
+        <ul class="admin-report-sentiment-analysis-details__scores">
+          <li>
+            {{dIcon "face-smile" style="color: #2ecc71"}}
+            {{i18n
+              "discourse_ai.sentiments.sentiment_analysis.score_types.positive"
+            }}:
+            {{get this.selectedChart.scores 0}}</li>
+          <li>
+            {{dIcon "face-meh"}}
+            {{i18n
+              "discourse_ai.sentiments.sentiment_analysis.score_types.neutral"
+            }}:
+            {{get this.selectedChart.scores 1}}</li>
+          <li>
+            {{dIcon "face-angry"}}
+            {{i18n
+              "discourse_ai.sentiments.sentiment_analysis.score_types.negative"
+            }}:
+            {{get this.selectedChart.scores 2}}</li>
+        </ul>
+
+        <PostList
+          @posts={{this.posts}}
+          @urlPath="url"
+          @idPath="post_id"
+          @titlePath="topic_title"
+          @usernamePath="username"
+          class="admin-report-sentiment-analysis-details__post-list"
+        >
+          <:abovePostItemExcerpt as |post|>
+            {{#let (this.sentimentMapping post.sentiment) as |sentiment|}}
+              <span
+                class="admin-report-sentiment-analysis-details__post-score"
+                data-sentiment-score={{sentiment.id}}
+              >
+                {{dIcon sentiment.icon}}
+                {{sentiment.text}}
+              </span>
+            {{/let}}
+          </:abovePostItemExcerpt>
+        </PostList>
+      </div>
+    {{/if}}
+  </template>
+}

assets/javascripts/discourse/components/doughnut-chart.gjs

@@ -0,0 +1,67 @@
+import Component from "@glimmer/component";
+import Chart from "admin/components/chart";
+
+export default class DoughnutChart extends Component {
+  get config() {
+    const doughnutTitle = this.args.doughnutTitle || "";
+
+    return {
+      type: "doughnut",
+      data: {
+        labels: this.args.labels,
+        datasets: [
+          {
+            data: this.args.data,
+            backgroundColor: this.args.colors,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            position: this.args.legendPosition || "bottom",
+          },
+        },
+      },
+      plugins: [
+        {
+          id: "centerText",
+          afterDraw: function (chart) {
+            const cssVarColor =
+              getComputedStyle(document.documentElement).getPropertyValue(
+                "--primary"
+              ) || "#000";
+            const cssFontSize =
+              getComputedStyle(document.documentElement).getPropertyValue(
+                "--font-down-2"
+              ) || "1.3em";
+            const cssFontFamily =
+              getComputedStyle(document.documentElement).getPropertyValue(
+                "--font-family"
+              ) || "sans-serif";
+
+            const { ctx, chartArea } = chart;
+            const centerX = (chartArea.left + chartArea.right) / 2;
+            const centerY = (chartArea.top + chartArea.bottom) / 2;
+
+            ctx.restore();
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillStyle = cssVarColor.trim();
+            ctx.font = `${cssFontSize.trim()} ${cssFontFamily.trim()}`;
+
+            ctx.fillText(doughnutTitle, centerX, centerY);
+            ctx.save();
+          },
+        },
+      ],
+    };
+  }
+
+  <template>
+    {{#if this.config}}
+      <Chart @chartConfig={{this.config}} class="admin-report-doughnut" />
+    {{/if}}
+  </template>
+}

assets/javascripts/initializers/admin-reports.js

@@ -10,8 +10,18 @@ export default {
       return;
     }
 
-    withPluginApi("2.0.1", (api) => {
+    // We need to import dynamically with CommonJS require because
+    // using ESM import in an initializer would cause the component to be imported globally
+    // and cause errors for non-admin users since the component is only available to admins
+    const AdminReportSentimentAnalysis =
+      require("discourse/plugins/discourse-ai/discourse/components/admin-report-sentiment-analysis").default;
+
+    withPluginApi((api) => {
       api.registerReportModeComponent("emotion", AdminReportEmotion);
+      api.registerReportModeComponent(
+        "sentiment_analysis",
+        AdminReportSentimentAnalysis
+      );
     });
   },
 };