From 448ac6721531754c5e4a39ae7c0f3ffb35d53bc1 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Fri, 21 Feb 2025 11:28:08 -0800
Subject: [PATCH 1/7] DEV: make include subcategories checkbox operational

---
 lib/sentiment/sentiment_analysis_report.rb | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/lib/sentiment/sentiment_analysis_report.rb b/lib/sentiment/sentiment_analysis_report.rb
index 17ad72cb8..8d1f73538 100644
--- a/lib/sentiment/sentiment_analysis_report.rb
+++ b/lib/sentiment/sentiment_analysis_report.rb
@@ -31,7 +31,8 @@ def self.register!(plugin)
             auto_insert_none_item: false,
           )
 
-          report.add_category_filter(disabled: group_by_filter.to_sym == :tag)
+          category_id, include_subcategories =
+            report.add_category_filter(disabled: group_by_filter.to_sym == :tag)
 
           tag_filter = report.filters.dig(:tag) || "any"
           tag_choices =
@@ -49,7 +50,8 @@ def self.register!(plugin)
             disabled: group_by_filter.to_sym == :category,
           )
 
-          sentiment_data = DiscourseAi::Sentiment::SentimentAnalysisReport.fetch_data(report)
+          opts = { category_id: category_id, include_subcategories: include_subcategories }
+          sentiment_data = DiscourseAi::Sentiment::SentimentAnalysisReport.fetch_data(report, opts)
 
           report.data = sentiment_data
           report.labels = [
@@ -60,12 +62,13 @@ def self.register!(plugin)
         end
       end
 
-      def self.fetch_data(report)
+      def self.fetch_data(report, opts)
         threshold = SENTIMENT_THRESHOLD
 
         grouping = (report.filters.dig(:group_by) || GROUP_BY_FILTER_DEFAULT).to_sym
         sorting = (report.filters.dig(:sort_by) || SORT_BY_FILTER_DEFAULT).to_sym
         category_filter = report.filters.dig(:category)
+        pp "========================== category_filter ===================================== #{category_filter} include subcategories?: #{opts[:include_subcategories]}"
         tag_filter = report.filters.dig(:tag)
 
         sentiment_count_sql = Proc.new { |sentiment| <<~SQL }
@@ -118,6 +121,10 @@ def self.fetch_data(report)
           when :category
             if category_filter.nil?
               ""
+            elsif opts[:include_subcategories]
+              <<~SQL
+                AND (c.id = :category_filter OR c.parent_category_id = :category_filter)
+              SQL
             else
               "AND c.id = :category_filter"
             end

From 3066dff71dfc38f127ac1fc76cbb28c2e74e8a8d Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Fri, 21 Feb 2025 12:53:49 -0800
Subject: [PATCH 2/7] DEV: add pagination for post requests

---
 .../sentiment/sentiment_controller.rb         | 33 +++++++++---
 .../admin-report-sentiment-analysis.gjs       | 50 +++++++++++++++----
 lib/sentiment/sentiment_analysis_report.rb    |  1 -
 3 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/app/controllers/discourse_ai/sentiment/sentiment_controller.rb b/app/controllers/discourse_ai/sentiment/sentiment_controller.rb
index 6fbe3fd2f..c45d2780a 100644
--- a/app/controllers/discourse_ai/sentiment/sentiment_controller.rb
+++ b/app/controllers/discourse_ai/sentiment/sentiment_controller.rb
@@ -6,6 +6,11 @@ class SentimentController < ::Admin::StaffController
       include Constants
       requires_plugin ::DiscourseAi::PLUGIN_NAME
 
+      # DEFAULT_POSTS_LIMIT = 50
+      # MAX_POSTS_LIMIT = 100
+      DEFAULT_POSTS_LIMIT = 3
+      MAX_POSTS_LIMIT = 3
+
       def posts
         group_by = params.required(:group_by)&.to_sym
         group_value = params.required(:group_value).presence
@@ -15,6 +20,9 @@ def posts
 
         raise Discourse::InvalidParameters if %i[category tag].exclude?(group_by)
 
+        limit = fetch_limit_from_params(default: DEFAULT_POSTS_LIMIT, max: MAX_POSTS_LIMIT)
+        offset = params[:offset].to_i || 0
+
         case group_by
         when :category
           grouping_clause = "c.name"
@@ -56,22 +64,31 @@ def posts
             ((: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
+          LIMIT :limit OFFSET :offset
         SQL
             group_value: group_value,
             start_date: start_date,
             end_date: end_date,
             threshold: threshold,
+            limit: limit + 1,
+            offset: offset,
           )
 
+        has_more = posts.length > limit
+        posts.pop if has_more
+
         render_json_dump(
-          serialize_data(
-            posts,
-            AiSentimentPostSerializer,
-            scope: guardian,
-            add_raw: true,
-            add_excerpt: true,
-            add_title: true,
-          ),
+          posts:
+            serialize_data(
+              posts,
+              AiSentimentPostSerializer,
+              scope: guardian,
+              add_raw: true,
+              add_excerpt: true,
+              add_title: true,
+            ),
+          has_more: has_more,
+          next_offset: has_more ? offset + limit : nil,
         )
       end
     end
diff --git a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs b/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
index 77e29a9b1..a3ebdc65f 100644
--- a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
+++ b/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
@@ -15,6 +15,8 @@ import DoughnutChart from "discourse/plugins/discourse-ai/discourse/components/d
 export default class AdminReportSentimentAnalysis extends Component {
   @tracked selectedChart = null;
   @tracked posts = null;
+  @tracked hasMorePosts = false;
+  @tracked nextOffset = 0;
 
   get colors() {
     return ["#2ecc71", "#95a5a6", "#e74c3c"];
@@ -50,20 +52,45 @@ export default class AdminReportSentimentAnalysis extends Component {
     });
   }
 
+  async postRequest() {
+    return await ajax("/discourse-ai/sentiment/posts", {
+      data: {
+        group_by: this.currentGroupFilter,
+        group_value: this.selectedChart?.title,
+        start_date: this.args.model.start_date,
+        end_date: this.args.model.end_date,
+        offset: this.nextOffset,
+      },
+    });
+  }
+
   @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));
+      const response = await this.postRequest();
+
+      this.posts = response.posts.map((post) => Post.create(post));
+      this.hasMorePosts = response.has_more;
+      this.nextOffset = response.next_offset;
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+
+  @action
+  async fetchMorePosts() {
+    if (!this.hasMorePosts || this.selectedChart === null) {
+      return [];
+    }
+
+    try {
+      const response = await this.postRequest();
+
+      this.hasMorePosts = response.has_more;
+      this.nextOffset = response.next_offset;
+      return response.posts.map((post) => Post.create(post));
     } catch (e) {
       popupAjaxError(e);
     }
@@ -139,7 +166,7 @@ export default class AdminReportSentimentAnalysis extends Component {
 
         <ul class="admin-report-sentiment-analysis-details__scores">
           <li>
-            {{dIcon "face-smile" style="color: #2ecc71"}}
+            {{dIcon "face-smile"}}
             {{i18n
               "discourse_ai.sentiments.sentiment_analysis.score_types.positive"
             }}:
@@ -164,6 +191,7 @@ export default class AdminReportSentimentAnalysis extends Component {
           @idPath="post_id"
           @titlePath="topic_title"
           @usernamePath="username"
+          @fetchMorePosts={{this.fetchMorePosts}}
           class="admin-report-sentiment-analysis-details__post-list"
         >
           <:abovePostItemExcerpt as |post|>
diff --git a/lib/sentiment/sentiment_analysis_report.rb b/lib/sentiment/sentiment_analysis_report.rb
index 8d1f73538..5584582ea 100644
--- a/lib/sentiment/sentiment_analysis_report.rb
+++ b/lib/sentiment/sentiment_analysis_report.rb
@@ -68,7 +68,6 @@ def self.fetch_data(report, opts)
         grouping = (report.filters.dig(:group_by) || GROUP_BY_FILTER_DEFAULT).to_sym
         sorting = (report.filters.dig(:sort_by) || SORT_BY_FILTER_DEFAULT).to_sym
         category_filter = report.filters.dig(:category)
-        pp "========================== category_filter ===================================== #{category_filter} include subcategories?: #{opts[:include_subcategories]}"
         tag_filter = report.filters.dig(:tag)
 
         sentiment_count_sql = Proc.new { |sentiment| <<~SQL }

From a8d4d0fdd35a5eb0673fce89acf051da8dbe450f Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Fri, 21 Feb 2025 14:15:09 -0800
Subject: [PATCH 3/7] WIP: selected chart UX improvements

---
 .../sentiment/sentiment_controller.rb         |   6 +-
 .../admin-report-sentiment-analysis.gjs       | 174 ++++++++++++------
 .../modules/sentiment/common/dashboard.scss   |  18 ++
 config/locales/client.en.yml                  |   3 +-
 4 files changed, 142 insertions(+), 59 deletions(-)

diff --git a/app/controllers/discourse_ai/sentiment/sentiment_controller.rb b/app/controllers/discourse_ai/sentiment/sentiment_controller.rb
index c45d2780a..705de0f06 100644
--- a/app/controllers/discourse_ai/sentiment/sentiment_controller.rb
+++ b/app/controllers/discourse_ai/sentiment/sentiment_controller.rb
@@ -6,10 +6,8 @@ class SentimentController < ::Admin::StaffController
       include Constants
       requires_plugin ::DiscourseAi::PLUGIN_NAME
 
-      # DEFAULT_POSTS_LIMIT = 50
-      # MAX_POSTS_LIMIT = 100
-      DEFAULT_POSTS_LIMIT = 3
-      MAX_POSTS_LIMIT = 3
+      DEFAULT_POSTS_LIMIT = 50
+      MAX_POSTS_LIMIT = 100
 
       def posts
         group_by = params.required(:group_by)&.to_sym
diff --git a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs b/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
index a3ebdc65f..f7a0d564e 100644
--- a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
+++ b/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
@@ -3,6 +3,8 @@ import { tracked } from "@glimmer/tracking";
 import { fn, hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action, get } from "@ember/object";
+import { and } from "truth-helpers";
+import DButton from "discourse/components/d-button";
 import PostList from "discourse/components/post-list";
 import dIcon from "discourse/helpers/d-icon";
 import { ajax } from "discourse/lib/ajax";
@@ -11,12 +13,14 @@ 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";
+import HorizontalOverflowNav from "discourse/components/horizontal-overflow-nav";
 
 export default class AdminReportSentimentAnalysis extends Component {
   @tracked selectedChart = null;
   @tracked posts = null;
   @tracked hasMorePosts = false;
   @tracked nextOffset = 0;
+  @tracked showingSelectedChart = false;
 
   get colors() {
     return ["#2ecc71", "#95a5a6", "#e74c3c"];
@@ -66,11 +70,17 @@ export default class AdminReportSentimentAnalysis extends Component {
 
   @action
   async showDetails(data) {
+    if (this.selectedChart === data) {
+      console.log("already selected bro!");
+      // Don't do anything if the same chart is clicked again
+      return;
+    }
+
     this.selectedChart = data;
+    this.showingSelectedChart = true;
 
     try {
       const response = await this.postRequest();
-
       this.posts = response.posts.map((post) => Post.create(post));
       this.hasMorePosts = response.has_more;
       this.nextOffset = response.next_offset;
@@ -102,7 +112,7 @@ export default class AdminReportSentimentAnalysis extends Component {
         return {
           id: "positive",
           text: i18n(
-            "discourse_ai.sentiments.sentiment_analysis.score_types.positive"
+            "discourse_ai.sentiments.sentiment_analysis.filter_types.positive"
           ),
           icon: "face-smile",
         };
@@ -110,7 +120,7 @@ export default class AdminReportSentimentAnalysis extends Component {
         return {
           id: "neutral",
           text: i18n(
-            "discourse_ai.sentiments.sentiment_analysis.score_types.neutral"
+            "discourse_ai.sentiments.sentiment_analysis.filter_types.neutral"
           ),
           icon: "face-meh",
         };
@@ -118,7 +128,7 @@ export default class AdminReportSentimentAnalysis extends Component {
         return {
           id: "negative",
           text: i18n(
-            "discourse_ai.sentiments.sentiment_analysis.score_types.negative"
+            "discourse_ai.sentiments.sentiment_analysis.filter_types.negative"
           ),
           icon: "face-angry",
         };
@@ -126,64 +136,120 @@ export default class AdminReportSentimentAnalysis extends Component {
   }
 
   doughnutTitle(data) {
-    if (data?.total_score) {
-      return `${data.title} (${data.total_score})`;
-    } else {
-      return data.title;
+    const MAX_TITLE_LENGTH = 18;
+    const title = data?.title || "";
+    const score = data?.total_score ? ` (${data.total_score})` : "";
+
+    if (title.length + score.length > MAX_TITLE_LENGTH) {
+      return (
+        title.substring(0, MAX_TITLE_LENGTH - score.length) + "..." + score
+      );
     }
+
+    return title + score;
+  }
+
+  @action
+  backToAllCharts() {
+    this.showingSelectedChart = false;
+    this.selectedChart = null;
+  }
+
+  get postFilters() {
+    return [
+      {
+        id: "all",
+        text: `${i18n(
+          "discourse_ai.sentiments.sentiment_analysis.filter_types.all"
+        )} (${this.selectedChart.total_score})`,
+        icon: "bars-staggered",
+        active: true,
+      },
+      {
+        id: "positive",
+        text: `${i18n(
+          "discourse_ai.sentiments.sentiment_analysis.filter_types.positive"
+        )} (${this.selectedChart.scores[0]})`,
+        icon: "face-smile",
+        active: false,
+      },
+      {
+        id: "neutral",
+        text: `${i18n(
+          "discourse_ai.sentiments.sentiment_analysis.filter_types.neutral"
+        )} (${this.selectedChart.scores[1]})`,
+        icon: "face-meh",
+        active: false,
+      },
+      {
+        id: "negative",
+        text: `${i18n(
+          "discourse_ai.sentiments.sentiment_analysis.filter_types.negative"
+        )} (${this.selectedChart.scores[2]})`,
+        icon: "face-angry",
+        active: false,
+      },
+    ];
   }
 
   <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">
+    {{#unless this.showingSelectedChart}}
+      <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>
+    {{/unless}}
+
+    {{#if (and this.selectedChart this.showingSelectedChart)}}
+      <div class="admin-report-sentiment-analysis__selected-chart">
+        <DButton
+          @label="back_button"
+          @icon="chevron-left"
+          class="btn-flat"
+          @action={{this.backToAllCharts}}
+        />
         <h3 class="admin-report-sentiment-analysis-details__title">
           {{this.selectedChart.title}}
         </h3>
 
-        <ul class="admin-report-sentiment-analysis-details__scores">
-          <li>
-            {{dIcon "face-smile"}}
-            {{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>
+        <DoughnutChart
+          @labels={{@model.labels}}
+          @colors={{this.colors}}
+          @data={{this.selectedChart.scores}}
+          @doughnutTitle={{this.doughnutTitle this.selectedChart}}
+        />
+      </div>
+      <div class="admin-report-sentiment-analysis-details">
+        <HorizontalOverflowNav>
+          {{#each this.postFilters as |filter|}}
+            <li>
+              <DButton
+                @icon={{filter.icon}}
+                @translatedLabel={{filter.text}}
+                class="btn-flat {{if filter.active 'active'}}"
+              />
+            </li>
+          {{/each}}
+        </HorizontalOverflowNav>
 
         <PostList
           @posts={{this.posts}}
diff --git a/assets/stylesheets/modules/sentiment/common/dashboard.scss b/assets/stylesheets/modules/sentiment/common/dashboard.scss
index 1b217b868..8d29ebb23 100644
--- a/assets/stylesheets/modules/sentiment/common/dashboard.scss
+++ b/assets/stylesheets/modules/sentiment/common/dashboard.scss
@@ -83,6 +83,12 @@
       cursor: pointer;
     }
   }
+
+  &__selected-chart {
+    border: 1px solid var(--primary-low);
+    border-radius: var(--d-border-radius);
+    padding: 1rem;
+  }
 }
 
 :root {
@@ -99,8 +105,20 @@
   overflow-y: auto;
   height: 100%;
 
+  .horizontal-overflow-nav {
+    border-bottom: 1px solid var(--primary-low);
+    margin-bottom: 1rem;
+  }
+
   &__title {
     font-size: var(--font-up-2);
+    margin: 0 auto;
+    text-align: center;
+    margin-bottom: 1rem;
+    margin-top: 0.3rem;
+    padding-top: 2rem;
+    padding-bottom: 1rem;
+    border-top: 1px solid var(--primary-low);
   }
 
   &__scores {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index d34e528ab..eb4675235 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -651,7 +651,8 @@ en:
         dashboard:
           title: "Sentiment"
         sentiment_analysis:
-          score_types:
+          filter_types:
+            all: "All"
             positive: "Positive"
             neutral: "Neutral"
             negative: "Negative"

From 6717c6b81504ea1cf788f8e38ac6384d3d251e8d Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Fri, 21 Feb 2025 16:02:59 -0800
Subject: [PATCH 4/7] DEV: Functional sentiment filters

---
 .../admin-report-sentiment-analysis.gjs       | 63 +++++++++++++++----
 .../modules/sentiment/common/dashboard.scss   |  2 +-
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs b/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
index f7a0d564e..646543bc8 100644
--- a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
+++ b/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
@@ -2,9 +2,11 @@ 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 { action } from "@ember/object";
+import { modifier } from "ember-modifier";
 import { and } from "truth-helpers";
 import DButton from "discourse/components/d-button";
+import HorizontalOverflowNav from "discourse/components/horizontal-overflow-nav";
 import PostList from "discourse/components/post-list";
 import dIcon from "discourse/helpers/d-icon";
 import { ajax } from "discourse/lib/ajax";
@@ -13,7 +15,6 @@ 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";
-import HorizontalOverflowNav from "discourse/components/horizontal-overflow-nav";
 
 export default class AdminReportSentimentAnalysis extends Component {
   @tracked selectedChart = null;
@@ -21,6 +22,21 @@ export default class AdminReportSentimentAnalysis extends Component {
   @tracked hasMorePosts = false;
   @tracked nextOffset = 0;
   @tracked showingSelectedChart = false;
+  @tracked activeFilter = "all";
+
+  setActiveFilter = modifier((element) => {
+    this.clearActiveFilters(element);
+    element
+      .querySelector(`li[data-filter-type="${this.activeFilter}"] button`)
+      .classList.add("active");
+  });
+
+  clearActiveFilters(element) {
+    const filterButtons = element.querySelectorAll("li button");
+    for (let button of filterButtons) {
+      button.classList.remove("active");
+    }
+  }
 
   get colors() {
     return ["#2ecc71", "#95a5a6", "#e74c3c"];
@@ -56,6 +72,20 @@ export default class AdminReportSentimentAnalysis extends Component {
     });
   }
 
+  get filteredPosts() {
+    if (!this.posts || !this.posts.length) {
+      return [];
+    }
+
+    return this.posts.filter((post) => {
+      if (this.activeFilter === "all") {
+        return true;
+      }
+
+      return post.sentiment === this.activeFilter;
+    });
+  }
+
   async postRequest() {
     return await ajax("/discourse-ai/sentiment/posts", {
       data: {
@@ -71,7 +101,6 @@ export default class AdminReportSentimentAnalysis extends Component {
   @action
   async showDetails(data) {
     if (this.selectedChart === data) {
-      console.log("already selected bro!");
       // Don't do anything if the same chart is clicked again
       return;
     }
@@ -163,7 +192,9 @@ export default class AdminReportSentimentAnalysis extends Component {
           "discourse_ai.sentiments.sentiment_analysis.filter_types.all"
         )} (${this.selectedChart.total_score})`,
         icon: "bars-staggered",
-        active: true,
+        action: () => {
+          this.activeFilter = "all";
+        },
       },
       {
         id: "positive",
@@ -171,7 +202,9 @@ export default class AdminReportSentimentAnalysis extends Component {
           "discourse_ai.sentiments.sentiment_analysis.filter_types.positive"
         )} (${this.selectedChart.scores[0]})`,
         icon: "face-smile",
-        active: false,
+        action: () => {
+          this.activeFilter = "positive";
+        },
       },
       {
         id: "neutral",
@@ -179,7 +212,9 @@ export default class AdminReportSentimentAnalysis extends Component {
           "discourse_ai.sentiments.sentiment_analysis.filter_types.neutral"
         )} (${this.selectedChart.scores[1]})`,
         icon: "face-meh",
-        active: false,
+        action: () => {
+          this.activeFilter = "neutral";
+        },
       },
       {
         id: "negative",
@@ -187,7 +222,9 @@ export default class AdminReportSentimentAnalysis extends Component {
           "discourse_ai.sentiments.sentiment_analysis.filter_types.negative"
         )} (${this.selectedChart.scores[2]})`,
         icon: "face-angry",
-        active: false,
+        action: () => {
+          this.activeFilter = "negative";
+        },
       },
     ];
   }
@@ -239,20 +276,24 @@ export default class AdminReportSentimentAnalysis extends Component {
         />
       </div>
       <div class="admin-report-sentiment-analysis-details">
-        <HorizontalOverflowNav>
+        <HorizontalOverflowNav
+          {{this.setActiveFilter}}
+          class="admin-report-sentiment-analysis-details__filters"
+        >
           {{#each this.postFilters as |filter|}}
-            <li>
+            <li data-filter-type={{filter.id}}>
               <DButton
                 @icon={{filter.icon}}
                 @translatedLabel={{filter.text}}
-                class="btn-flat {{if filter.active 'active'}}"
+                @action={{filter.action}}
+                class="btn-transparent"
               />
             </li>
           {{/each}}
         </HorizontalOverflowNav>
 
         <PostList
-          @posts={{this.posts}}
+          @posts={{this.filteredPosts}}
           @urlPath="url"
           @idPath="post_id"
           @titlePath="topic_title"
diff --git a/assets/stylesheets/modules/sentiment/common/dashboard.scss b/assets/stylesheets/modules/sentiment/common/dashboard.scss
index 8d29ebb23..60e386d48 100644
--- a/assets/stylesheets/modules/sentiment/common/dashboard.scss
+++ b/assets/stylesheets/modules/sentiment/common/dashboard.scss
@@ -105,7 +105,7 @@
   overflow-y: auto;
   height: 100%;
 
-  .horizontal-overflow-nav {
+  &__filters {
     border-bottom: 1px solid var(--primary-low);
     margin-bottom: 1rem;
   }

From 900a15b5c216189e20b6c6356bc35567fb0231d6 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Fri, 21 Feb 2025 16:05:08 -0800
Subject: [PATCH 5/7] DEV: Reset filters after going back

---
 .../discourse/components/admin-report-sentiment-analysis.gjs     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs b/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
index 646543bc8..52a2574c9 100644
--- a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
+++ b/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
@@ -182,6 +182,7 @@ export default class AdminReportSentimentAnalysis extends Component {
   backToAllCharts() {
     this.showingSelectedChart = false;
     this.selectedChart = null;
+    this.activeFilter = "all";
   }
 
   get postFilters() {

From de5ba2ade676714c2194685226b4d440dfaeaa3a Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Fri, 21 Feb 2025 16:36:34 -0800
Subject: [PATCH 6/7] DEV: Add category colors, improve UX

---
 .../sentiment/sentiment_controller.rb         |   8 +-
 .../ai_sentiment_post_serializer.rb           |  13 +-
 .../admin-report-sentiment-analysis.gjs       | 196 +++++++++---------
 .../modules/sentiment/common/dashboard.scss   |  12 +-
 4 files changed, 128 insertions(+), 101 deletions(-)

diff --git a/app/controllers/discourse_ai/sentiment/sentiment_controller.rb b/app/controllers/discourse_ai/sentiment/sentiment_controller.rb
index 705de0f06..5173c0070 100644
--- a/app/controllers/discourse_ai/sentiment/sentiment_controller.rb
+++ b/app/controllers/discourse_ai/sentiment/sentiment_controller.rb
@@ -24,7 +24,7 @@ def posts
         case group_by
         when :category
           grouping_clause = "c.name"
-          grouping_join = "INNER JOIN categories c ON c.id = t.category_id"
+          grouping_join = "" # categories already joined
         when :tag
           grouping_clause = "tags.name"
           grouping_join =
@@ -44,6 +44,11 @@ def posts
             u.username,
             u.name,
             u.uploaded_avatar_id,
+            c.id AS category_id,
+            c.name AS category_name,
+            c.color AS category_color,
+            c.slug AS category_slug,
+            c.description AS category_description,
             (CASE 
               WHEN (cr.classification::jsonb->'positive')::float > :threshold THEN 'positive'
               WHEN (cr.classification::jsonb->'negative')::float > :threshold THEN 'negative'
@@ -53,6 +58,7 @@ def posts
           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
+          LEFT JOIN categories c ON c.id = t.category_id
           #{grouping_join}
           WHERE
             #{grouping_clause} = :group_value AND
diff --git a/app/serializers/ai_sentiment_post_serializer.rb b/app/serializers/ai_sentiment_post_serializer.rb
index 264f6df28..f64203528 100644
--- a/app/serializers/ai_sentiment_post_serializer.rb
+++ b/app/serializers/ai_sentiment_post_serializer.rb
@@ -10,7 +10,8 @@ class AiSentimentPostSerializer < ApplicationSerializer
              :avatar_template,
              :excerpt,
              :sentiment,
-             :truncated
+             :truncated,
+             :category
 
   def avatar_template
     User.avatar_template(object.username, object.uploaded_avatar_id)
@@ -23,4 +24,14 @@ def excerpt
   def truncated
     true
   end
+
+  def category
+    {
+      id: object.category_id,
+      name: object.category_name,
+      color: object.category_color,
+      slug: object.category_slug,
+      description: object.category_description,
+    }
+  end
 end
diff --git a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs b/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
index 52a2574c9..7dcda1ae6 100644
--- a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
+++ b/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
@@ -38,103 +38,10 @@ export default class AdminReportSentimentAnalysis extends Component {
     }
   }
 
-  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,
-      };
-    });
-  }
-
-  get filteredPosts() {
-    if (!this.posts || !this.posts.length) {
-      return [];
-    }
-
-    return this.posts.filter((post) => {
-      if (this.activeFilter === "all") {
-        return true;
-      }
-
-      return post.sentiment === this.activeFilter;
-    });
-  }
-
-  async postRequest() {
-    return await ajax("/discourse-ai/sentiment/posts", {
-      data: {
-        group_by: this.currentGroupFilter,
-        group_value: this.selectedChart?.title,
-        start_date: this.args.model.start_date,
-        end_date: this.args.model.end_date,
-        offset: this.nextOffset,
-      },
-    });
-  }
-
-  @action
-  async showDetails(data) {
-    if (this.selectedChart === data) {
-      // Don't do anything if the same chart is clicked again
-      return;
-    }
-
-    this.selectedChart = data;
-    this.showingSelectedChart = true;
-
-    try {
-      const response = await this.postRequest();
-      this.posts = response.posts.map((post) => Post.create(post));
-      this.hasMorePosts = response.has_more;
-      this.nextOffset = response.next_offset;
-    } catch (e) {
-      popupAjaxError(e);
-    }
-  }
-
-  @action
-  async fetchMorePosts() {
-    if (!this.hasMorePosts || this.selectedChart === null) {
-      return [];
-    }
-
-    try {
-      const response = await this.postRequest();
-
-      this.hasMorePosts = response.has_more;
-      this.nextOffset = response.next_offset;
-      return response.posts.map((post) => Post.create(post));
-    } catch (e) {
-      popupAjaxError(e);
-    }
-  }
-
   sentimentMapping(sentiment) {
     switch (sentiment) {
       case "positive":
@@ -178,11 +85,60 @@ export default class AdminReportSentimentAnalysis extends Component {
     return title + score;
   }
 
-  @action
-  backToAllCharts() {
-    this.showingSelectedChart = false;
-    this.selectedChart = null;
-    this.activeFilter = "all";
+  async postRequest() {
+    return await ajax("/discourse-ai/sentiment/posts", {
+      data: {
+        group_by: this.currentGroupFilter,
+        group_value: this.selectedChart?.title,
+        start_date: this.args.model.start_date,
+        end_date: this.args.model.end_date,
+        offset: this.nextOffset,
+      },
+    });
+  }
+
+  get colors() {
+    return ["#2ecc71", "#95a5a6", "#e74c3c"];
+  }
+
+  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,
+      };
+    });
+  }
+
+  get filteredPosts() {
+    if (!this.posts || !this.posts.length) {
+      return [];
+    }
+
+    return this.posts.filter((post) => {
+      if (this.activeFilter === "all") {
+        return true;
+      }
+
+      return post.sentiment === this.activeFilter;
+    });
   }
 
   get postFilters() {
@@ -230,6 +186,50 @@ export default class AdminReportSentimentAnalysis extends Component {
     ];
   }
 
+  @action
+  async showDetails(data) {
+    if (this.selectedChart === data) {
+      // Don't do anything if the same chart is clicked again
+      return;
+    }
+
+    this.selectedChart = data;
+    this.showingSelectedChart = true;
+
+    try {
+      const response = await this.postRequest();
+      this.posts = response.posts.map((post) => Post.create(post));
+      this.hasMorePosts = response.has_more;
+      this.nextOffset = response.next_offset;
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+
+  @action
+  async fetchMorePosts() {
+    if (!this.hasMorePosts || this.selectedChart === null) {
+      return [];
+    }
+
+    try {
+      const response = await this.postRequest();
+
+      this.hasMorePosts = response.has_more;
+      this.nextOffset = response.next_offset;
+      return response.posts.map((post) => Post.create(post));
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+
+  @action
+  backToAllCharts() {
+    this.showingSelectedChart = false;
+    this.selectedChart = null;
+    this.activeFilter = "all";
+  }
+
   <template>
     {{#unless this.showingSelectedChart}}
       <div class="admin-report-sentiment-analysis">
diff --git a/assets/stylesheets/modules/sentiment/common/dashboard.scss b/assets/stylesheets/modules/sentiment/common/dashboard.scss
index 60e386d48..5e3747fe3 100644
--- a/assets/stylesheets/modules/sentiment/common/dashboard.scss
+++ b/assets/stylesheets/modules/sentiment/common/dashboard.scss
@@ -53,6 +53,7 @@
   .main {
     flex: 100%;
     display: flex;
+    flex-flow: row wrap;
     order: 2;
     gap: 1rem;
     align-items: flex-start;
@@ -99,7 +100,9 @@
 
 .admin-report-sentiment-analysis-details {
   @include report-container-box();
-  flex: 1;
+  flex: 1 1 300px;
+  min-width: 300px;
+
   display: flex;
   flex-flow: column nowrap;
   overflow-y: auto;
@@ -108,6 +111,12 @@
   &__filters {
     border-bottom: 1px solid var(--primary-low);
     margin-bottom: 1rem;
+
+    @include breakpoint("mobile-extra-large") {
+      .d-button-label {
+        display: none;
+      }
+    }
   }
 
   &__title {
@@ -170,6 +179,7 @@
   }
 
   &__post-list {
+    margin-top: 1rem;
     .avatar-wrapper,
     .avatar-link {
       width: calc(48px * 0.75);

From 7eaa6dd889194a2af5e96e409aa360260f555280 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Fri, 21 Feb 2025 16:43:31 -0800
Subject: [PATCH 7/7] DEV: Update spec

---
 spec/requests/sentiment/sentiment_controller_spec.rb | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/spec/requests/sentiment/sentiment_controller_spec.rb b/spec/requests/sentiment/sentiment_controller_spec.rb
index a875e84d2..6d6a2225e 100644
--- a/spec/requests/sentiment/sentiment_controller_spec.rb
+++ b/spec/requests/sentiment/sentiment_controller_spec.rb
@@ -27,7 +27,8 @@
 
       expect(response).to be_successful
 
-      posts = JSON.parse(response.body)
+      post_response = JSON.parse(response.body)
+      posts = post_response["posts"]
       posts.each do |post|
         expect(post).to have_key("sentiment")
         expect(post["sentiment"]).to match(/positive|negative|neutral/)