Skip to content

Commit 5856832

Browse files
MaanasAroraMaanasArora
committed
STYLE: Standardize quotation marks and improve code formatting in ConversationAnalysisPage
1 parent 5a35bb9 commit 5856832

1 file changed

Lines changed: 65 additions & 63 deletions

File tree

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

Lines changed: 65 additions & 63 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-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>
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,7 +118,8 @@ export default function ConversationAnalysisPage() {
118118
<tr>
119119
<td
120120
colSpan={2}
121-
className='border border-gray-300 px-4 py-2 text-center'>
121+
className="border border-gray-300 px-4 py-2 text-center"
122+
>
122123
No groups identified.
123124
</td>
124125
</tr>
@@ -127,22 +128,22 @@ export default function ConversationAnalysisPage() {
127128
</table>
128129
</div>
129130
<div>
130-
<h2 className='text-xl font-semibold mb-2'>Consensus</h2>
131-
<p className='mb-4'>
131+
<h2 className="text-xl font-semibold mb-2">Consensus</h2>
132+
<p className="mb-4">
132133
Below are the comments in the conversation ranked by their consensus
133134
scores. Higher scores indicate greater agreement across groups,
134135
while lower scores suggest the comment is more divisive.
135136
</p>
136-
<table className='min-w-full border border-gray-300'>
137+
<table className="min-w-full border border-gray-300">
137138
<thead>
138-
<tr className='bg-gray-200'>
139-
<th className='border border-gray-300 px-4 py-2 text-left w-1/12'>
139+
<tr className="bg-gray-200">
140+
<th className="border border-gray-300 px-4 py-2 text-left w-1/12">
140141
Rank
141142
</th>
142-
<th className='border border-gray-300 px-4 py-2 text-left w-2/3'>
143+
<th className="border border-gray-300 px-4 py-2 text-left w-2/3">
143144
Comment
144145
</th>
145-
<th className='border border-gray-300 px-4 py-2 text-left w-1/4'>
146+
<th className="border border-gray-300 px-4 py-2 text-left w-1/4">
146147
Consensus Score
147148
</th>
148149
</tr>
@@ -151,86 +152,87 @@ export default function ConversationAnalysisPage() {
151152
{conversationAnalysis.comments_by_consensus.map(
152153
(comment, index) => (
153154
<tr key={comment.id}>
154-
<td className='border border-gray-300 px-4 py-2'>
155+
<td className="border border-gray-300 px-4 py-2">
155156
{index + 1}
156157
</td>
157-
<td className='border border-gray-300 px-4 py-2'>
158+
<td className="border border-gray-300 px-4 py-2">
158159
{comment.content}
159160
</td>
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'>
161+
<td className="border border-gray-300 px-4 py-2">
162+
<div className="flex items-center">
163+
<div className="relative w-48 h-4 bg-gray-200 rounded">
163164
<div
164165
className={
165-
'absolute top-0 left-0 h-full rounded bg-green-500'
166+
"absolute top-0 left-0 h-full rounded bg-green-500"
166167
}
167168
style={{ width: `${comment.consensus * 100}%` }}
168169
/>
169170
</div>
170-
<span className='ml-2 text-sm'>
171+
<span className="ml-2 text-sm">
171172
{` (${comment.consensus.toFixed(2)})`}
172173
</span>
173174
</div>
174175
</td>
175176
</tr>
176-
)
177+
),
177178
)}
178179
{conversationAnalysis.comments_by_consensus.length === 0 && (
179180
<tr>
180181
<td
181182
colSpan={2}
182-
className='border border-gray-300 px-4 py-2 text-center'>
183+
className="border border-gray-300 px-4 py-2 text-center"
184+
>
183185
No comments available for analysis.
184186
</td>
185187
</tr>
186188
)}
187189
</tbody>
188190
</table>
189191
</div>
190-
<div className='mt-8'>
191-
<h2 className='text-xl font-semibold mb-2'>Representation</h2>
192-
<p className='mb-4'>
192+
<div className="mt-8">
193+
<h2 className="text-xl font-semibold mb-2">Representation</h2>
194+
<p className="mb-4">
193195
In each of the identified groups, the following comments best
194196
represent the views of that group.
195197
</p>
196198
{conversationAnalysis.groups.map((group) => (
197-
<div key={group.group_id} className='mb-6'>
198-
<h3 className='text-lg font-semibold mb-2'>
199+
<div key={group.group_id} className="mb-6">
200+
<h3 className="text-lg font-semibold mb-2">
199201
Group {group.group_id} (Members: {group.users.length})
200202
</h3>
201203
{group.representative_comments.length === 0 && (
202204
<p>No representative comments for this group.</p>
203205
)}
204206
{group.representative_comments.length > 0 && (
205-
<table className='min-w-full border border-gray-300'>
207+
<table className="min-w-full border border-gray-300">
206208
<thead>
207-
<tr className='bg-gray-200'>
208-
<th className='border border-gray-300 px-4 py-2 text-left w-1/2'>
209+
<tr className="bg-gray-200">
210+
<th className="border border-gray-300 px-4 py-2 text-left w-1/2">
209211
Comment
210212
</th>
211-
<th className='border border-gray-300 px-4 py-2 text-left w-1/4'>
213+
<th className="border border-gray-300 px-4 py-2 text-left w-1/4">
212214
Percentage of Group Agreeing
213215
</th>
214-
<th className='border border-gray-300 px-4 py-2 text-left w-1/4'>
216+
<th className="border border-gray-300 px-4 py-2 text-left w-1/4">
215217
Representation Score
216218
</th>
217219
</tr>
218220
</thead>
219221
<tbody>
220222
{group.representative_comments.map((comment) => (
221223
<tr key={comment.id}>
222-
<td className='border border-gray-300 px-4 py-2'>
224+
<td className="border border-gray-300 px-4 py-2">
223225
{comment.content}
224226
</td>
225-
<td className='border border-gray-300 px-4 py-2'>
227+
<td className="border border-gray-300 px-4 py-2">
226228
{`${(comment.agree_percentage * 100).toFixed(0)}%`}
227229
</td>
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'>
230+
<td className="border border-gray-300 px-4 py-2">
231+
<div className="flex items-center">
232+
<div className="relative w-48 h-4 bg-gray-200 rounded">
231233
<div
232234
className={
233-
'absolute top-0 left-0 h-full rounded bg-blue-500'
235+
"absolute top-0 left-0 h-full rounded bg-blue-500"
234236
}
235237
style={{
236238
width: `${
@@ -239,7 +241,7 @@ export default function ConversationAnalysisPage() {
239241
}}
240242
/>
241243
</div>
242-
<span className='ml-2 text-sm'>
244+
<span className="ml-2 text-sm">
243245
{` (${comment.representativeness.toFixed(2)})`}
244246
</span>
245247
</div>

0 commit comments

Comments
 (0)