Skip to content

Commit 3b233e9

Browse files
taichan03taichan03
committed
re do sources so that it has buttons
1 parent 848c9e1 commit 3b233e9

File tree

2 files changed

+114
-72
lines changed

2 files changed

+114
-72
lines changed

‎frontend/src/components/Header/Header.tsx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -106,21 +106,6 @@ const Header: React.FC<LoginFormProps> = ({ isAuthenticated, isSuperuser }) => {
106106
tools provided herein are intended for general informational purposes
107107
only and should NOT be construed as medical advice, diagnosis, or
108108
treatment.{" "}
109-
<Link
110-
to="/feedback"
111-
className="underline hover:border-blue-600 hover:text-blue-600 hover:no-underline"
112-
>
113-
here
114-
</Link>{" "}
115-
or email{" "}
116-
<a
117-
href="mailto:[email protected]"
118-
className="underline hover:border-blue-600 hover:text-blue-600 hover:no-underline"
119-
target="_blank"
120-
>
121-
[email protected]
122-
</a>
123-
.
124109
</p>
125110
</div>
126111
<div className="flex items-center justify-center border-b border-gray-300 bg-blue-100 p-1 text-center text-sm font-light text-gray-500 lg:hidden ">

‎frontend/src/pages/PatientManager/PatientSummary.tsx‎

Lines changed: 114 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,18 @@ const MedicationItem = ({
4949
isClicked,
5050
riskData,
5151
loading,
52-
onClick,
52+
onSourcesClick,
53+
onBenefitsRisksClick,
54+
activePanel,
5355
}: {
5456
medication: string;
5557
source: string;
5658
isClicked: boolean;
5759
riskData: RiskData | null;
5860
loading: boolean;
59-
onClick: () => void;
61+
onSourcesClick: () => void;
62+
onBenefitsRisksClick: () => void;
63+
activePanel: "sources" | "benefits-risks" | null;
6064
}) => {
6165
if (medication === "None") {
6266
return (
@@ -85,25 +89,29 @@ const MedicationItem = ({
8589
</div>
8690
<div className="flex-shrink-0 ml-4">
8791
<span
88-
className={`font-medium text-indigo-600 hover:text-indigo-500 ${
89-
isClicked ? "bg-indigo-100" : ""
90-
} cursor-pointer`}
91-
onClick={onClick}
92+
className={`font-medium text-indigo-600 hover:text-indigo-500 border border-transparent hover:border-indigo-300 cursor-pointer px-2 py-1 rounded ${
93+
isClicked && activePanel === "sources" ? "bg-indigo-100" : ""
94+
}`}
95+
onClick={onSourcesClick}
9296
>
9397
Sources
9498
</span>
9599
</div>
96100
<div className="flex-shrink-0 ml-4">
97101
<span
98-
className="font-medium text-indigo-600 hover:text-indigo-500"
99-
onClick={onClick}
102+
className={`font-medium text-indigo-600 hover:text-indigo-500 border border-transparent hover:border-indigo-300 cursor-pointer px-2 py-1 rounded ${
103+
isClicked && activePanel === "benefits-risks"
104+
? "bg-indigo-100"
105+
: ""
106+
}`}
107+
onClick={onBenefitsRisksClick}
100108
>
101109
Benefits and risks
102110
</span>
103111
</div>
104112
</li>
105113

106-
{isClicked && riskData && (
114+
{isClicked && riskData && activePanel === "benefits-risks" && (
107115
<div className="px-6 py-4 bg-gray-50">
108116
<div className="flex">
109117
<div className="w-1/2 pr-4">
@@ -131,51 +139,54 @@ const MedicationItem = ({
131139
</ul>
132140
</div>
133141
</div>
142+
</div>
143+
)}
134144

135-
{/* SOURCES */}
136-
{!!riskData.sources?.length && (
137-
<div className="mt-6">
138-
<div className="flex items-center">
139-
<h4 className="text-sm font-medium text-indigo-600">Sources</h4>
140-
</div>
141-
142-
<ul className="mt-3 divide-y divide-gray-200 rounded-md border border-gray-200 bg-white">
143-
{riskData.sources.map((s, idx) => (
144-
<li key={idx} className="px-4 py-3">
145-
<div className="mt-1 text-sm font-medium text-gray-900 flex items-center justify-between">
146-
<span>{s.title || "Untitled source"}</span>
147-
148-
{s.link_url && (
149-
<a
150-
href={s.link_url}
151-
target="_blank"
152-
rel="noopener noreferrer"
153-
className="ml-2 px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors"
154-
>
155-
View PDF
156-
</a>
157-
)}
158-
</div>
145+
{isClicked && riskData && activePanel === "sources" && (
146+
<div className="px-6 py-4 bg-gray-50">
147+
<div className="flex items-center">
148+
<h4 className="text-sm font-medium text-indigo-600">Sources</h4>
149+
</div>
159150

160-
{s.publication && (
161-
<div className="text-xs text-gray-500">
162-
{s.publication}
163-
</div>
151+
{riskData.sources?.length ? (
152+
<ul className="mt-3 divide-y divide-gray-200 rounded-md border border-gray-200 bg-white">
153+
{riskData.sources.map((s, idx) => (
154+
<li key={idx} className="px-4 py-3">
155+
<div className="mt-1 text-sm font-medium text-gray-900 flex items-center justify-between">
156+
<span>{s.title || "Untitled source"}</span>
157+
158+
{s.link_url && (
159+
<a
160+
href={s.link_url}
161+
target="_blank"
162+
rel="noopener noreferrer"
163+
className="ml-2 px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors"
164+
>
165+
View PDF
166+
</a>
164167
)}
168+
</div>
165169

166-
<p className="mt-2 text-sm text-gray-700">
167-
{truncate(s.text)}
168-
</p>
170+
{s.publication && (
171+
<div className="text-xs text-gray-500">{s.publication}</div>
172+
)}
169173

170-
{s.page && (
171-
<div className="mt-1 text-xs text-gray-400">
172-
Page {s.page}
173-
</div>
174-
)}
175-
</li>
176-
))}
177-
</ul>
178-
</div>
174+
<p className="mt-2 text-sm text-gray-700">
175+
{truncate(s.text)}
176+
</p>
177+
178+
{s.page && (
179+
<div className="mt-1 text-xs text-gray-400">
180+
Page {s.page}
181+
</div>
182+
)}
183+
</li>
184+
))}
185+
</ul>
186+
) : (
187+
<p className="mt-3 text-sm text-gray-500">
188+
No sources available for this medication.
189+
</p>
179190
)}
180191
</div>
181192
)}
@@ -190,15 +201,19 @@ const MedicationTier = ({
190201
clickedMedication,
191202
riskData,
192203
loading,
193-
onMedicationClick,
204+
onSourcesClick,
205+
onBenefitsRisksClick,
206+
activePanel,
194207
}: {
195208
title: string;
196209
tier: string;
197210
medications: MedicationWithSource[];
198211
clickedMedication: string | null;
199212
riskData: RiskData | null;
200213
loading: boolean;
201-
onMedicationClick: (medication: MedicationWithSource) => void;
214+
onSourcesClick: (medication: MedicationWithSource) => void;
215+
onBenefitsRisksClick: (medication: MedicationWithSource) => void;
216+
activePanel: "sources" | "benefits-risks" | null;
202217
}) => (
203218
<>
204219
<dt className="flex ml-2 text-sm font-medium leading-6 text-gray-900">
@@ -214,7 +229,9 @@ const MedicationTier = ({
214229
isClicked={medicationObj.name === clickedMedication}
215230
riskData={riskData}
216231
loading={loading}
217-
onClick={() => onMedicationClick(medicationObj)}
232+
onSourcesClick={() => onSourcesClick(medicationObj)}
233+
onBenefitsRisksClick={() => onBenefitsRisksClick(medicationObj)}
234+
activePanel={activePanel}
218235
/>
219236
))}
220237
</ul>
@@ -237,6 +254,9 @@ const PatientSummary = ({
237254
const [clickedMedication, setClickedMedication] = useState<string | null>(
238255
null
239256
);
257+
const [activePanel, setActivePanel] = useState<
258+
"sources" | "benefits-risks" | null
259+
>(null);
240260

241261
const [isModalOpen, setIsModalOpen] = useState({ status: false, id: "" });
242262

@@ -256,27 +276,58 @@ const PatientSummary = ({
256276
setLoading(false);
257277
setRiskData(null);
258278
setClickedMedication(null);
279+
setActivePanel(null);
259280
}
260281
}, [isPatientDeleted, setShowSummary]);
261282

262283
useEffect(() => {
263284
setRiskData(null);
264285
setClickedMedication(null);
286+
setActivePanel(null);
265287
}, [patientInfo]);
266288

267289
const handleClickSummary = () => {
268290
setShowSummary(!showSummary);
269291
};
270-
const handleMedicationClick = async (medicationObj: MedicationWithSource) => {
292+
const handleSourcesClick = async (medicationObj: MedicationWithSource) => {
293+
const { name: medication, source } = medicationObj;
294+
295+
if (clickedMedication === medication && activePanel === "sources") {
296+
setClickedMedication(null);
297+
setActivePanel(null);
298+
setRiskData(null);
299+
return;
300+
}
301+
302+
setClickedMedication(medication);
303+
setActivePanel("sources");
304+
setLoading(true);
305+
306+
try {
307+
const data = await fetchRiskDataWithSources(medication, source);
308+
setRiskData(data as RiskData);
309+
} catch (error) {
310+
console.error("Error fetching risk data: ", error);
311+
setRiskData(null);
312+
} finally {
313+
setLoading(false);
314+
}
315+
};
316+
317+
const handleBenefitsRisksClick = async (
318+
medicationObj: MedicationWithSource
319+
) => {
271320
const { name: medication, source } = medicationObj;
272321

273-
if (clickedMedication === medication) {
322+
if (clickedMedication === medication && activePanel === "benefits-risks") {
274323
setClickedMedication(null);
324+
setActivePanel(null);
275325
setRiskData(null);
276326
return;
277327
}
278328

279329
setClickedMedication(medication);
330+
setActivePanel("benefits-risks");
280331
setLoading(true);
281332

282333
try {
@@ -362,7 +413,9 @@ const PatientSummary = ({
362413
clickedMedication={clickedMedication}
363414
riskData={riskData}
364415
loading={loading}
365-
onMedicationClick={handleMedicationClick}
416+
onSourcesClick={handleSourcesClick}
417+
onBenefitsRisksClick={handleBenefitsRisksClick}
418+
activePanel={activePanel}
366419
/>
367420
<div className="mt-6">
368421
<MedicationTier
@@ -372,7 +425,9 @@ const PatientSummary = ({
372425
clickedMedication={clickedMedication}
373426
riskData={riskData}
374427
loading={loading}
375-
onMedicationClick={handleMedicationClick}
428+
onSourcesClick={handleSourcesClick}
429+
onBenefitsRisksClick={handleBenefitsRisksClick}
430+
activePanel={activePanel}
376431
/>
377432
</div>
378433
<div className="mt-6">
@@ -383,7 +438,9 @@ const PatientSummary = ({
383438
clickedMedication={clickedMedication}
384439
riskData={riskData}
385440
loading={loading}
386-
onMedicationClick={handleMedicationClick}
441+
onSourcesClick={handleSourcesClick}
442+
onBenefitsRisksClick={handleBenefitsRisksClick}
443+
activePanel={activePanel}
387444
/>
388445
</div>
389446
</>

0 commit comments

Comments
 (0)