Skip to content

Commit 5a35bb9

Browse files
MaanasAroraMaanasArora
committed
STYLE: Refactor ConversationAnalysisPage for consistency and readability
1 parent f4d1780 commit 5a35bb9

1 file changed

Lines changed: 63 additions & 65 deletions

File tree

‎client/src/app/core/ConversationAnalysisPage.tsx‎

Lines changed: 63 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { useParams } from "react-router";
2-
import CoreBase from "./base";
3-
import { useQuery } from "@tanstack/react-query";
4-
import { getApi } from "../../components/api/base";
5-
import dayjs from "dayjs";
6-
import { Conversation } from "./dashboard";
1+
import { useParams } from 'react-router';
2+
import CoreBase from './base';
3+
import { useQuery } from '@tanstack/react-query';
4+
import { getApi } from '../../components/api/base';
5+
import dayjs from 'dayjs';
6+
import { Conversation } from './dashboard';
77

88
interface CommentAnalysis {
99
id: string;
@@ -32,14 +32,14 @@ export default function ConversationAnalysisPage() {
3232
const conversationId = params.conversationId;
3333

3434
const conversationResponse = useQuery({
35-
queryKey: ["conversation", conversationId],
35+
queryKey: ['conversation', conversationId],
3636
queryFn: () => getApi(`/conversations/${conversationId}`),
3737
enabled: !!conversationId,
3838
});
3939
const conversation = conversationResponse.data as Conversation;
4040

4141
const conversationAnalysisResponse = useQuery({
42-
queryKey: ["conversation-analysis", conversationId],
42+
queryKey: ['conversation-analysis', conversationId],
4343
queryFn: () => getApi(`/analysis/conversation/${conversationId}`),
4444
enabled: !!conversationId,
4545
});
@@ -52,64 +52,64 @@ export default function ConversationAnalysisPage() {
5252
) {
5353
return (
5454
<CoreBase requiresLogin={true}>
55-
<div className="flex justify-center items-center h-64">
56-
<div className="text-gray-500">Loading analysis...</div>
55+
<div className='flex justify-center items-center h-64'>
56+
<div className='text-gray-500'>Loading analysis...</div>
5757
</div>
5858
</CoreBase>
5959
);
6060
}
6161

6262
return (
6363
<CoreBase requiresLogin={true}>
64-
<section className="xl:w-[90%] w-full mx-auto p-5">
65-
<h1 className="text-3xl font-bold mb-2">{conversation.name}</h1>
66-
<h2 className="text-xl font-semibold mb-8">Conversation Analysis</h2>
67-
<div className="mb-4">
68-
<h2 className="text-xl font-semibold mb-2">Summary</h2>
64+
<section className='xl:w-[90%] w-full mx-auto p-5'>
65+
<h1 className='text-3xl font-bold mb-4'>{conversation.name}</h1>
66+
<h2 className='text-2xl font-bold mb-8'>Conversation Analysis</h2>
67+
<div className='mb-4'>
68+
<h2 className='text-xl font-semibold mb-2'>Summary</h2>
6969
<p>
7070
<strong>Description:</strong> {conversation.description}
7171
</p>
7272
<p>
7373
<strong>Created By:</strong> {conversation.author.username}
7474
</p>
7575
<p>
76-
<strong>Created At:</strong>{" "}
77-
{dayjs(conversation.date_created).format("MMMM D, YYYY h:mm A")}
76+
<strong>Created At:</strong>{' '}
77+
{dayjs(conversation.date_created).format('MMMM D, YYYY h:mm A')}
7878
</p>
7979
<p>
80-
<strong>Total Participants:</strong>{" "}
80+
<strong>Total Participants:</strong>{' '}
8181
{conversationAnalysis.user_ids.length || 0}
8282
</p>
8383
<p>
84-
<strong>Total Comments:</strong>{" "}
84+
<strong>Total Comments:</strong>{' '}
8585
{conversationAnalysis.comment_ids.length || 0}
8686
</p>
8787
</div>
88-
<div className="mb-8">
89-
<h2 className="text-xl font-semibold mb-2">Groups</h2>
90-
<p className="mb-4">
91-
From the participants in this conversation,{" "}
88+
<div className='mb-8'>
89+
<h2 className='text-xl font-semibold mb-2'>Groups</h2>
90+
<p className='mb-4'>
91+
From the participants in this conversation,{' '}
9292
<strong>{conversationAnalysis.groups.length}</strong> groups emerged
9393
based on their response patterns.
9494
</p>
95-
<table className="min-w-full border border-gray-300">
95+
<table className='min-w-full border border-gray-300'>
9696
<thead>
97-
<tr className="bg-gray-200">
98-
<th className="border border-gray-300 px-4 py-2 text-left">
97+
<tr className='bg-gray-200'>
98+
<th className='border border-gray-300 px-4 py-2 text-left'>
9999
Group ID
100100
</th>
101-
<th className="border border-gray-300 px-4 py-2 text-left">
101+
<th className='border border-gray-300 px-4 py-2 text-left'>
102102
Number of Members
103103
</th>
104104
</tr>
105105
</thead>
106106
<tbody>
107107
{conversationAnalysis.groups.map((group) => (
108108
<tr key={group.group_id}>
109-
<td className="border border-gray-300 px-4 py-2">
109+
<td className='border border-gray-300 px-4 py-2'>
110110
Group {group.group_id}
111111
</td>
112-
<td className="border border-gray-300 px-4 py-2">
112+
<td className='border border-gray-300 px-4 py-2'>
113113
{group.users.length}
114114
</td>
115115
</tr>
@@ -118,8 +118,7 @@ export default function ConversationAnalysisPage() {
118118
<tr>
119119
<td
120120
colSpan={2}
121-
className="border border-gray-300 px-4 py-2 text-center"
122-
>
121+
className='border border-gray-300 px-4 py-2 text-center'>
123122
No groups identified.
124123
</td>
125124
</tr>
@@ -128,22 +127,22 @@ export default function ConversationAnalysisPage() {
128127
</table>
129128
</div>
130129
<div>
131-
<h2 className="text-xl font-semibold mb-2">Consensus</h2>
132-
<p className="mb-4">
130+
<h2 className='text-xl font-semibold mb-2'>Consensus</h2>
131+
<p className='mb-4'>
133132
Below are the comments in the conversation ranked by their consensus
134133
scores. Higher scores indicate greater agreement across groups,
135134
while lower scores suggest the comment is more divisive.
136135
</p>
137-
<table className="min-w-full border border-gray-300">
136+
<table className='min-w-full border border-gray-300'>
138137
<thead>
139-
<tr className="bg-gray-200">
140-
<th className="border border-gray-300 px-4 py-2 text-left w-1/12">
138+
<tr className='bg-gray-200'>
139+
<th className='border border-gray-300 px-4 py-2 text-left w-1/12'>
141140
Rank
142141
</th>
143-
<th className="border border-gray-300 px-4 py-2 text-left w-1/2">
142+
<th className='border border-gray-300 px-4 py-2 text-left w-2/3'>
144143
Comment
145144
</th>
146-
<th className="border border-gray-300 px-4 py-2 text-left w-5/12">
145+
<th className='border border-gray-300 px-4 py-2 text-left w-1/4'>
147146
Consensus Score
148147
</th>
149148
</tr>
@@ -152,87 +151,86 @@ export default function ConversationAnalysisPage() {
152151
{conversationAnalysis.comments_by_consensus.map(
153152
(comment, index) => (
154153
<tr key={comment.id}>
155-
<td className="border border-gray-300 px-4 py-2">
154+
<td className='border border-gray-300 px-4 py-2'>
156155
{index + 1}
157156
</td>
158-
<td className="border border-gray-300 px-4 py-2">
157+
<td className='border border-gray-300 px-4 py-2'>
159158
{comment.content}
160159
</td>
161-
<td className="border border-gray-300 px-4 py-2">
162-
<div className="flex items-center">
163-
<div className="relative w-64 h-4 bg-gray-200 rounded">
160+
<td className='border border-gray-300 px-4 py-2'>
161+
<div className='flex items-center'>
162+
<div className='relative w-48 h-4 bg-gray-200 rounded'>
164163
<div
165164
className={
166-
"absolute top-0 left-0 h-full rounded bg-green-500"
165+
'absolute top-0 left-0 h-full rounded bg-green-500'
167166
}
168167
style={{ width: `${comment.consensus * 100}%` }}
169168
/>
170169
</div>
171-
<span className="ml-2 text-sm">
170+
<span className='ml-2 text-sm'>
172171
{` (${comment.consensus.toFixed(2)})`}
173172
</span>
174173
</div>
175174
</td>
176175
</tr>
177-
),
176+
)
178177
)}
179178
{conversationAnalysis.comments_by_consensus.length === 0 && (
180179
<tr>
181180
<td
182181
colSpan={2}
183-
className="border border-gray-300 px-4 py-2 text-center"
184-
>
182+
className='border border-gray-300 px-4 py-2 text-center'>
185183
No comments available for analysis.
186184
</td>
187185
</tr>
188186
)}
189187
</tbody>
190188
</table>
191189
</div>
192-
<div className="mt-8">
193-
<h2 className="text-xl font-semibold mb-2">Representation</h2>
194-
<p className="mb-4">
190+
<div className='mt-8'>
191+
<h2 className='text-xl font-semibold mb-2'>Representation</h2>
192+
<p className='mb-4'>
195193
In each of the identified groups, the following comments best
196194
represent the views of that group.
197195
</p>
198196
{conversationAnalysis.groups.map((group) => (
199-
<div key={group.group_id} className="mb-6">
200-
<h3 className="text-lg font-semibold mb-2">
197+
<div key={group.group_id} className='mb-6'>
198+
<h3 className='text-lg font-semibold mb-2'>
201199
Group {group.group_id} (Members: {group.users.length})
202200
</h3>
203201
{group.representative_comments.length === 0 && (
204202
<p>No representative comments for this group.</p>
205203
)}
206204
{group.representative_comments.length > 0 && (
207-
<table className="min-w-full border border-gray-300">
205+
<table className='min-w-full border border-gray-300'>
208206
<thead>
209-
<tr className="bg-gray-200">
210-
<th className="border border-gray-300 px-4 py-2 text-left w-1/2">
207+
<tr className='bg-gray-200'>
208+
<th className='border border-gray-300 px-4 py-2 text-left w-1/2'>
211209
Comment
212210
</th>
213-
<th className="border border-gray-300 px-4 py-2 text-left w-1/4">
211+
<th className='border border-gray-300 px-4 py-2 text-left w-1/4'>
214212
Percentage of Group Agreeing
215213
</th>
216-
<th className="border border-gray-300 px-4 py-2 text-left w-1/4">
214+
<th className='border border-gray-300 px-4 py-2 text-left w-1/4'>
217215
Representation Score
218216
</th>
219217
</tr>
220218
</thead>
221219
<tbody>
222220
{group.representative_comments.map((comment) => (
223221
<tr key={comment.id}>
224-
<td className="border border-gray-300 px-4 py-2">
222+
<td className='border border-gray-300 px-4 py-2'>
225223
{comment.content}
226224
</td>
227-
<td className="border border-gray-300 px-4 py-2">
225+
<td className='border border-gray-300 px-4 py-2'>
228226
{`${(comment.agree_percentage * 100).toFixed(0)}%`}
229227
</td>
230-
<td className="border border-gray-300 px-4 py-2">
231-
<div className="flex items-center">
232-
<div className="relative w-32 h-4 bg-gray-200 rounded">
228+
<td className='border border-gray-300 px-4 py-2'>
229+
<div className='flex items-center'>
230+
<div className='relative w-48 h-4 bg-gray-200 rounded'>
233231
<div
234232
className={
235-
"absolute top-0 left-0 h-full rounded bg-blue-500"
233+
'absolute top-0 left-0 h-full rounded bg-blue-500'
236234
}
237235
style={{
238236
width: `${
@@ -241,7 +239,7 @@ export default function ConversationAnalysisPage() {
241239
}}
242240
/>
243241
</div>
244-
<span className="ml-2 text-sm">
242+
<span className='ml-2 text-sm'>
245243
{` (${comment.representativeness.toFixed(2)})`}
246244
</span>
247245
</div>

0 commit comments

Comments
 (0)