Skip to content

Commit 67e06b5

Browse files
sahilds1sahilds1
committed
Merge branch 'listOfMed' into 345-add-rag-to-the-chatbot
2 parents 6161f5f + 4d2097c commit 67e06b5

File tree

11 files changed

+169
-159
lines changed

11 files changed

+169
-159
lines changed

‎frontend/src/App.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,11 @@ This is the wording logo in the nav bar
130130
@apply bg-gradient-to-r from-blue-600 via-blue-700 to-blue-600 bg-clip-text text-transparent;
131131
}
132132

133+
/* Using logo-like styles outside of the header */
134+
.body_logo {
135+
@apply bg-gradient-to-r from-blue-500 via-blue-700 to-blue-300 bg-clip-text font-quicksand font-bold text-transparent
136+
}
137+
133138
/* Tailwind Styles */
134139

135140
/*

‎frontend/src/components/Footer/Footer.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,14 @@ function Footer() {
107107
</button>
108108
</div>
109109
</div>
110-
<div className="flex justify-center rounded px-4 py-2 ">
111-
© 2025 Balancer. All rights reserved. V1 2-04-2025
110+
<div className="flex justify-center rounded px-4 py-2 ">
111+
<p>© 2025 Balancer. All rights reserved. V1 2-04-2025</p>
112+
</div>
113+
<div className="flex justify-center rounded px-4 py-2 ">
114+
<p className="text-gray-600 text-sm font-light italic">
115+
Balancer is an educational resource designed to support{" "}
116+
—never replace— the judgment of licensed U.S. clinicians. Final prescribing decisions must always be made by the treating clinician.
117+
</p>
112118
</div>
113119
</footer>
114120
</div>

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -475,12 +475,9 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
475475
) : (
476476
<div
477477
onClick={() => setShowChat(true)}
478-
className="fixed bottom-9 left-10 h-16 w-16 inline-block cursor-pointer flex items-center justify-center rounded-full bg-blue-500 object-contain hover:cursor-pointer hover:bg-blue-300 md:bottom-20 md:right-20 no-print"
478+
className="chat_button no-print"
479479
>
480-
<FaComments className="text-white h-10 w-10" />
481-
<div className="absolute bottom-20 mt-2 hidden w-32 rounded bg-gray-700 px-2 py-1 text-sm text-white before:absolute before:-top-2 before:left-1/2 before:-translate-x-1/2 before:transform before:border-8 before:border-transparent before:border-b-gray-700 group-hover:block">
482-
Any questions? Click here to to chat!
483-
</div>
480+
<FaComments className="relative text-white w-10 h-10 z-10" />
484481
</div>
485482
)}
486483
</>

‎frontend/src/components/Header/chat.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
.chat_button {
2+
@apply fixed bottom-9 left-10 h-16 w-16 cursor-pointer rounded-full bg-blue-500 hover:cursor-pointer hover:bg-blue-300 md:bottom-20 md:right-20 flex items-center justify-center animate-pulse-bounce;
3+
}
4+
5+
.chat_button_animations {
6+
@apply flex justify-center items-center;
7+
}
8+
19
.inside_chat {
210
@apply grow px-2 py-2 bg-neutral-100 overflow-y-auto overflow-x-hidden;
311
}
@@ -87,4 +95,15 @@ ul.chat_suggestion_list {
8795

8896
.scroll_down {
8997
@apply z-40 absolute bottom-[90px] left-[45%] text-3xl text-gray-400 hover:text-blue-500 rounded-full border-2 border-white bg-white;
98+
}
99+
100+
@keyframes pulse-bounce {
101+
0%, 100% {
102+
opacity: 1;
103+
transform: translateY(0);
104+
}
105+
50% {
106+
opacity: .5;
107+
transform: translateY(-25%);
108+
}
90109
}

‎frontend/src/pages/About/About.tsx‎

Lines changed: 52 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -6,110 +6,75 @@ import image from "./OIP2.png";
66
function About() {
77
return (
88
<Layout>
9-
<div className=" font_body mt-48 flex w-full flex-col items-center justify-center rounded-md border bg-white p-4 px-8 ring-1 hover:ring-slate-300 md:max-w-6xl">
10-
{/* Top section */}
11-
<div className="flex flex-row">
12-
<div className="top-section mr-10 mt-10 flex max-w-6xl flex-col justify-center md:w-full">
13-
<div className="mt-5 text-3xl font-bold">
14-
A tool that makes it easier to research medications for bipolar
15-
disorder.
16-
</div>
17-
<div className="mt-5 text-lg text-gray-500">
18-
It can take two to 10 years—and three to 30 medications—for people
19-
with bipolar disorder to find the right medication combination.
20-
Balancer is designed to help physicians shorten this journey for
21-
their patients.
22-
</div>
23-
</div>
24-
<img
25-
src={image}
26-
alt="about image"
27-
className="hidden md:mt-10 md:block md:h-64 md:rounded-2xl"
28-
></img>
29-
</div>
30-
31-
{/* Middle section */}
32-
<div className="mission-section flex w-full flex-row justify-center md:mt-28 md:max-w-6xl">
33-
<div>
34-
<div className="text-3xl font-bold">
35-
Get accurate, helpful information on bipolar medications fast
36-
</div>
37-
<div className="mt-5 text-lg text-gray-500">
38-
Powered by innovative AI technology, Balancer is a tool that aids
39-
in providing personalized medication recommendations for patients
40-
with bipolar disorder in any state, including mania, depression,
41-
hypomania and mixed. Our platform utilizes machine learning to
42-
give you the latest, most up-to-date information on medications
43-
and active clinical trials to treat bipolar disorder.{" "}
44-
</div>
45-
<div className="mt-5 text-lg text-gray-500">
46-
Balancer automates medication decision support by offering
47-
tailored medication recommendations and comprehensive risk-benefit
48-
assessments based on a patient's diagnosis, symptom severity,
49-
treatment goals and individual characteristics.{" "}
50-
</div>
51-
<div className="mt-20 text-3xl font-bold">Our mission</div>
52-
<div className="flex w-full flex-col justify-between">
53-
<div className="mt-8 text-lg text-gray-500">
54-
Bipolar disorder affects approximately 5.7 million adult
55-
Americans{" "}
56-
<a
57-
href="https://www.dbsalliance.org/education/bipolar-disorder/bipolar-disorder-statistics/"
58-
className="underline"
59-
target="_blank"
60-
>
61-
every year
62-
</a>
63-
. Delays in the correct diagnosis and proper treatment of
64-
bipolar disorder may result in social, occupational, and
65-
economic burdens, as well as{" "}
66-
<a
67-
href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2796048/"
68-
className="underline"
69-
target="_blank"
70-
>
71-
an increase in completed suicides
72-
</a>
73-
.
9+
<div className="font_body mt-48 flex w-full flex-col items-center justify-center rounded-md border bg-white p-4 px-8 ring-1 hover:ring-slate-300 md:max-w-6xl">
10+
{/* Making it easier to research bipolar medications */}
11+
<div className="flex w-full flex-col justify-center mb-20 md:mb-0">
12+
<div className="flex flex-row">
13+
<div className="flex flex-col justify-center md:w-full mr-10">
14+
<div className="mt-5 text-3xl font-bold">
15+
Making it easier to research bipolar medications
7416
</div>
75-
<div className="mt-5 text-lg text-gray-500">
76-
The team behind Balancer believes that building a searchable,
77-
interactive and user-friendly research tool for bipolar
78-
medications has the potential to improve the health and
79-
well-being of people with bipolar disorder.
17+
<div className="mt-5 text-lg text-gray-600">
18+
It can take two to 10 years—and three to 30 medications—for people with bipolar disorder to find the right medication combination. <span className="body_logo">Balancer</span> is designed to help prescribers speed up that process by making research faster and more accessible.
8019
</div>
8120
</div>
21+
<img src={image} alt="about image" className="hidden md:mt-10 md:block md:h-64 md:rounded-2xl"></img>
8222
</div>
83-
{/* <div className="flex w-full flex-col items-center">
84-
<div>
85-
<div className="mt-8 text-4xl font-bold">44 million</div>
86-
<div className="text-lg">Transactions every 24 hours</div>
87-
<div className="mt-5 text-4xl font-bold">$119 million</div>
88-
<div className="text-lg">Assets under holding</div>
89-
<div className="mt-5 text-4xl font-bold">46,000</div>
90-
<div className="text-lg">New users annually</div>
91-
</div>
92-
</div> */}
9323
</div>
94-
24+
{/* How Balancer works */}
25+
<div className="flex w-full flex-col justify-center md:mt-20 md:max-w-6xl mb-20 md:mb-0">
26+
<div className="mb-5 text-3xl font-bold">
27+
How <span>Balancer</span> works
28+
</div>
29+
<ul className="list-disc pl-5">
30+
<li className="mb-5">
31+
<span className="text-md font-bold">Medication Suggestions (rules-based):</span>
32+
<p className="text-gray-600 mt-2">When you enter patient characteristics, Balancer suggests first-line, second-line, and third-line options. The recommendations follow a consistent framework developed from interviews with psychiatrists, psychiatry residents, nurse practitioners, and other prescribers. This part is not powered by AI.</p>
33+
</li>
34+
<li className="mb-5">
35+
<span className="text-md font-bold">Explanations & Research (AI-assisted):</span>
36+
<p className="text-gray-600 mt-2">For each suggestion, you can click to see supporting journal articles. Here, Balancer uses AI to search our database of medical research and highlight relevant sources for further reading.</p>
37+
</li>
38+
</ul>
39+
<p className="text-gray-600 text-lg">Together, these features help prescribers get reliable starting points quickly—without replacing professional judgment.</p>
40+
</div>
41+
{/* Important disclaimer */}
42+
<div className="flex w-full flex-col justify-center md:mt-20 md:max-w-6xl mb-20 md:mb-0">
43+
<div className="text-3xl font-bold mb-5">
44+
Important disclaimer
45+
</div>
46+
<p className="text-gray-600">Balancer is a free, open-source research tool built by volunteers at Code for Philly. It is for licensed U.S. prescribers and researchers only.</p>
47+
<ul className="list-disc pl-5 mt-2">
48+
<li><p className="mt-2 text-gray-600">Balancer does <em>not</em> provide medical advice.</p></li>
49+
<li><p className="mt-2 text-gray-600">It does <em>not</em> determine treatment or replace clinical judgment.</p></li>
50+
<li><p className="mt-2 text-gray-600">Clinical decisions should always be based on the prescriber's expertise, knowledge of the patient, and official medical guidelines.</p></li>
51+
</ul>
52+
</div>
53+
{/* Our mission */}
54+
<div className="flex w-full flex-col justify-center md:mt-20 md:max-w-6xl mb-20 md:mb-0">
55+
<div className="text-3xl font-bold mb-5">
56+
Our mission
57+
</div>
58+
<p className="text-gray-600">Bipolar disorder affects approximately 5.7 million adult Americans <u>every year</u>. Delays in the correct diagnosis and proper treatment of bipolar disorder may result in social, occupational, and economic burdens, as well as an <u>increase in completed suicides</u>.</p>
59+
<p className="mt-2 text-gray-600">The team behind Balancer believes that building a searchable, interactive and user-friendly research tool for bipolar medications has the potential to improve the health and well-being of people with bipolar disorder.</p>
60+
</div>
9561
{/* Support Us section */}
96-
<div className=" flex w-full flex-col items-center justify-center md:mt-28">
62+
<div className="flex w-full flex-col items-center justify-center md:mt-28 md:max-w-6xl">
9763
<div className="text-3xl font-bold">Support Us</div>
98-
<div className="mt-5 flex flex-col items-center justify-center text-center text-lg text-gray-500 md:pl-48 md:pr-48">
99-
<div className="text-xl font-bold">
100-
Balancer is a not-for-profit, civic-minded, open-source project
64+
<div className="mt-5 flex flex-col items-center justify-center text-center text-lg text-gray-600 md:pl-48 md:pr-48">
65+
<div className="text-xl">
66+
<span className="body_logo">Balancer</span> is a not-for-profit, civic-minded, open-source project
10167
sponsored by{" "}
10268
<a
10369
href="https://codeforphilly.org/"
104-
className="underline"
70+
className="underline hover:text-blue-600 hover:no-underline"
10571
target="_blank"
10672
>
10773
Code for Philly
10874
</a>
10975
.
11076
</div>
11177
</div>
112-
11378
<div className="mb-20 mt-5 flex flex-row flex-wrap justify-center gap-4">
11479
<a href="https://www.flipcause.com/secure/cause_pdetails/MjMyMTIw" target="_blank">
11580
<button className="btnBlue transition-transform focus:outline-none focus:ring focus:ring-blue-200">

‎frontend/src/pages/Files/FileRow.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,18 @@ const FileRow: React.FC<FileRowProps> = ({
8484
setIsEditing(false);
8585
};
8686

87+
const formatUTCDate = (dateStr: string | null) => {
88+
if (!dateStr) return "N/A";
89+
const formatter = new Intl.DateTimeFormat("en-US", {
90+
timeZone: "UTC",
91+
year: "numeric",
92+
month: "numeric",
93+
day: "numeric"
94+
});
95+
const formattedDate = formatter.format(new Date(dateStr));
96+
return formattedDate;
97+
}
98+
8799
return (
88100
<li className="border-b p-4">
89101
{isEditing ? (
@@ -187,7 +199,7 @@ const FileRow: React.FC<FileRowProps> = ({
187199
<div className="w-full">
188200
<p>
189201
<strong>Publication Date:</strong>{" "}
190-
{isEditing ? (
202+
{isEditing ?
191203
<input
192204
type="date"
193205
value={publicationDate || ''}
@@ -196,15 +208,7 @@ const FileRow: React.FC<FileRowProps> = ({
196208
disabled={loading}
197209
placeholder="Publication Date"
198210
/>
199-
) : (
200-
file.publication_date
201-
? new Intl.DateTimeFormat("en-US", {
202-
year: "numeric",
203-
month: "2-digit",
204-
day: "2-digit"
205-
}).format(new Date(file.publication_date))
206-
: "N/A"
207-
)}
211+
: formatUTCDate(file.publication_date)}
208212
</p>
209213
</div>
210214
</div>

‎frontend/src/pages/Files/ListOfFiles.tsx‎

Lines changed: 28 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from "react";
2-
import axios from "axios";
2+
import { api } from "../../api/apiClient";
33
import Layout from "../Layout/Layout";
44
import FileRow from "./FileRow";
55
import Table from "../../components/Table/Table";
@@ -30,17 +30,17 @@ const ListOfFiles: React.FC<{ showTable?: boolean }> = ({
3030
const [downloading, setDownloading] = useState<string | null>(null);
3131
const [opening, setOpening] = useState<string | null>(null);
3232

33+
const baseUrl = import.meta.env.VITE_API_BASE_URL;
34+
3335
useEffect(() => {
3436
const fetchFiles = async () => {
3537
try {
36-
const baseUrl = import.meta.env.VITE_API_BASE_URL;
37-
const response = await axios.get(`${baseUrl}/v1/api/uploadFile`, {
38-
headers: {
39-
Authorization: `JWT ${localStorage.getItem("access")}`,
40-
},
41-
});
42-
if (Array.isArray(response.data)) {
43-
setFiles(response.data);
38+
const url = `${baseUrl}/v1/api/uploadFile`;
39+
40+
const { data } = await api.get(url);
41+
42+
if (Array.isArray(data)) {
43+
setFiles(data);
4444
}
4545
} catch (error) {
4646
console.error("Error fetching files", error);
@@ -50,7 +50,7 @@ const ListOfFiles: React.FC<{ showTable?: boolean }> = ({
5050
};
5151

5252
fetchFiles();
53-
}, []);
53+
}, [baseUrl]);
5454

5555
const updateFileName = (guid: string, updatedFile: Partial<File>) => {
5656
setFiles((prevFiles) =>
@@ -63,15 +63,9 @@ const ListOfFiles: React.FC<{ showTable?: boolean }> = ({
6363
const handleDownload = async (guid: string, fileName: string) => {
6464
try {
6565
setDownloading(guid);
66-
const baseUrl = import.meta.env.VITE_API_BASE_URL;
67-
const response = await axios.get(`${baseUrl}/v1/api/uploadFile/${guid}`, {
68-
headers: {
69-
Authorization: `JWT ${localStorage.getItem("access")}`,
70-
},
71-
responseType: "blob",
72-
});
66+
const { data } = await api.get(`/v1/api/uploadFile/${guid}`, { responseType: 'blob' });
7367

74-
const url = window.URL.createObjectURL(new Blob([response.data]));
68+
const url = window.URL.createObjectURL(new Blob([data]));
7569
const link = document.createElement("a");
7670
link.href = url;
7771
link.setAttribute("download", fileName);
@@ -90,15 +84,9 @@ const ListOfFiles: React.FC<{ showTable?: boolean }> = ({
9084
const handleOpen = async (guid: string) => {
9185
try {
9286
setOpening(guid);
93-
const baseUrl = import.meta.env.VITE_API_BASE_URL;
94-
const response = await axios.get(`${baseUrl}/v1/api/uploadFile/${guid}`, {
95-
headers: {
96-
Authorization: `JWT ${localStorage.getItem("access")}`,
97-
},
98-
responseType: "arraybuffer",
99-
});
87+
const { data } = await api.get(`/v1/api/uploadFile/${guid}`, { responseType: 'arraybuffer' });
10088

101-
const file = new Blob([response.data], { type: 'application/pdf' });
89+
const file = new Blob([data], { type: 'application/pdf' });
10290
const fileURL = window.URL.createObjectURL(file);
10391
window.open(fileURL);
10492
} catch (error) {
@@ -118,17 +106,24 @@ const ListOfFiles: React.FC<{ showTable?: boolean }> = ({
118106
{ Header: 'Date Published', accessor: 'publication_date' },
119107
{ Header: '', accessor: 'file_open' },
120108
];
109+
110+
const formatUTCDate = (dateStr: string | null) => {
111+
if (!dateStr) return "N/A";
112+
const formatter = new Intl.DateTimeFormat("en-US", {
113+
timeZone: "UTC",
114+
year: "numeric",
115+
month: "numeric",
116+
day: "numeric"
117+
});
118+
const formattedDate = formatter.format(new Date(dateStr));
119+
return formattedDate;
120+
}
121+
121122
const data = files.map((file) => (
122123
{
123124
file_name: file?.title || file.file_name.replace(/\.[^/.]+$/, ""),
124125
publication: file?.publication || '',
125-
publication_date: file.publication_date
126-
? new Intl.DateTimeFormat("en-US", {
127-
year: "numeric",
128-
month: "2-digit",
129-
day: "2-digit"
130-
}).format(new Date(file.publication_date))
131-
: "",
126+
publication_date: formatUTCDate(file.publication_date),
132127
file_open:
133128
<a
134129
key={file.guid}

0 commit comments

Comments
 (0)