Skip to content

Commit

Permalink
Add better layout, tooltips
Browse files Browse the repository at this point in the history
  • Loading branch information
@amrit110
amrit110 committed Jun 25, 2024
1 parent 3e7c72f commit 3cb6de7
Show file tree
Hide file tree
Showing 7 changed files with 297 additions and 451 deletions.
4 changes: 2 additions & 2 deletions api/predict.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,9 @@ def categorize_risk(risk_score: float) -> tuple[str, str]:
tuple
A tuple containing the risk category and recommendation.
"""
if risk_score < 0.3:
if risk_score < 0.5:
return "Low", "Continue routine monitoring"
if risk_score < 0.6:
if risk_score < 0.75:
return "Moderate", "Implement preventive measures"

return "High", "Urgent intervention required"
1 change: 1 addition & 0 deletions api/xgboost_model.json
View file

Large diffs are not rendered by default.

33 changes: 33 additions & 0 deletions components/InputForm.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.custom-tooltip {
background-color: #3498db;
color: #fff;
border-radius: 6px;
padding: 10px 15px;
font-size: 14px;
max-width: 250px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.custom-tooltip.place-right:after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #3498db transparent transparent;
}

/* Add a subtle gradient to the tooltip */
.custom-tooltip::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
border-radius: 6px;
pointer-events: none;
}
228 changes: 75 additions & 153 deletions components/InputForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,32 @@
import React, { useState } from 'react'
import { Tooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'
import './InputForm.css'

function InputForm({ onSubmit }) {
const [formData, setFormData] = useState({
interface FormData {
ground_Ambulance: boolean
diag_Other_specified_status: boolean
diag_Hepatic_failure: boolean
diag_Nervous_system_signs_and_symptoms: boolean
diag_Other_aftercare_encounter: boolean
diag_Parkinsons_disease: boolean
diag_Alcohol_related_disorders: boolean
diag_Other_specified_and_unspecified_liver_disease: boolean
diag_Septicemia: boolean
diag_Schizophrenia_spectrum_and_other_psychotic_disorders: boolean
diag_Symptoms_of_mental_and_substance_use_conditions: boolean
lab_numeric_only_max_Albumin_in_Urine: string
diag_Respiratory_failure_insufficiency_arrest: boolean
diag_Pressure_ulcer_of_skin: boolean
diag_Genitourinary_signs_and_symptoms: boolean
}

interface InputFormProps {
onSubmit: (formData: FormData) => void
}

function InputForm({ onSubmit }: InputFormProps) {
const [formData, setFormData] = useState<FormData>({
ground_Ambulance: false,
diag_Other_specified_status: false,
diag_Hepatic_failure: false,
Expand All @@ -19,171 +44,67 @@ function InputForm({ onSubmit }) {
diag_Genitourinary_signs_and_symptoms: false,
})

const handleChange = (e) => {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value, type, checked } = e.target
setFormData((prevData) => ({
...prevData,
[name]: type === 'checkbox' ? checked : value,
}))
}

const handleSubmit = (e) => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
onSubmit(formData)
}

const renderCheckbox = (name: keyof FormData, label: string, description: string) => (
<label className="flex items-center">
<input
type="checkbox"
name={name}
checked={formData[name] as boolean}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
<span data-tooltip-id={`tooltip-${name}`} data-tooltip-content={description}>{label}</span>
<Tooltip
id={`tooltip-${name}`}
className="custom-tooltip"
place="right"
effect="solid"
/>
</label>
)

return (
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<label className="flex items-center">
<input
type="checkbox"
name="ground_Ambulance"
checked={formData.ground_Ambulance}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Ground Ambulance
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Other_specified_status"
checked={formData.diag_Other_specified_status}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Other specified status
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Hepatic_failure"
checked={formData.diag_Hepatic_failure}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Hepatic failure
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Nervous_system_signs_and_symptoms"
checked={formData.diag_Nervous_system_signs_and_symptoms}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Nervous system signs and symptoms
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Other_aftercare_encounter"
checked={formData.diag_Other_aftercare_encounter}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Other aftercare encounter
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Parkinsons_disease"
checked={formData.diag_Parkinsons_disease}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Parkinson&apos;s disease
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Alcohol_related_disorders"
checked={formData.diag_Alcohol_related_disorders}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Alcohol-related disorders
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Other_specified_and_unspecified_liver_disease"
checked={
formData.diag_Other_specified_and_unspecified_liver_disease
}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Other specified and unspecified liver disease
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Septicemia"
checked={formData.diag_Septicemia}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Septicemia
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Schizophrenia_spectrum_and_other_psychotic_disorders"
checked={
formData.diag_Schizophrenia_spectrum_and_other_psychotic_disorders
}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Schizophrenia spectrum and other psychotic disorders
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Symptoms_of_mental_and_substance_use_conditions"
checked={
formData.diag_Symptoms_of_mental_and_substance_use_conditions
}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Symptoms of mental and substance use conditions
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Respiratory_failure_insufficiency_arrest"
checked={formData.diag_Respiratory_failure_insufficiency_arrest}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Respiratory failure; insufficiency; arrest
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Pressure_ulcer_of_skin"
checked={formData.diag_Pressure_ulcer_of_skin}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Pressure ulcer of skin
</label>
<label className="flex items-center">
<input
type="checkbox"
name="diag_Genitourinary_signs_and_symptoms"
checked={formData.diag_Genitourinary_signs_and_symptoms}
onChange={handleChange}
className="mr-2 focus:ring-[#7abaff]"
/>
Genitourinary signs and symptoms
</label>
<div className="space-y-4">
<h3 className="text-lg font-semibold">Admission Information</h3>
{renderCheckbox("ground_Ambulance", "Ground Ambulance", "Patient arrived via ground ambulance transport")}
</div>
<div>
<label className="block mb-2">

<div className="space-y-4">
<h3 className="text-lg font-semibold">Diagnosis Codes</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
{renderCheckbox("diag_Other_specified_status", "Other specified status", "Patient has other specified status")}
{renderCheckbox("diag_Hepatic_failure", "Hepatic failure", "Patient diagnosed with hepatic failure")}
{renderCheckbox("diag_Nervous_system_signs_and_symptoms", "Nervous system signs and symptoms", "Patient shows signs and symptoms related to the nervous system")}
{renderCheckbox("diag_Other_aftercare_encounter", "Other aftercare encounter", "Patient admitted for other aftercare")}
{renderCheckbox("diag_Parkinsons_disease", "Parkinson's disease", "Patient diagnosed with Parkinson's disease")}
{renderCheckbox("diag_Alcohol_related_disorders", "Alcohol-related disorders", "Patient has alcohol-related disorders")}
{renderCheckbox("diag_Other_specified_and_unspecified_liver_disease", "Other specified and unspecified liver disease", "Patient has other specified or unspecified liver disease")}
{renderCheckbox("diag_Septicemia", "Septicemia", "Patient diagnosed with septicemia")}
{renderCheckbox("diag_Schizophrenia_spectrum_and_other_psychotic_disorders", "Schizophrenia spectrum and other psychotic disorders", "Patient has schizophrenia spectrum or other psychotic disorders")}
{renderCheckbox("diag_Symptoms_of_mental_and_substance_use_conditions", "Symptoms of mental and substance use conditions", "Patient shows symptoms of mental and substance use conditions")}
{renderCheckbox("diag_Respiratory_failure_insufficiency_arrest", "Respiratory failure; insufficiency; arrest", "Patient has respiratory failure, insufficiency, or arrest")}
{renderCheckbox("diag_Pressure_ulcer_of_skin", "Pressure ulcer of skin", "Patient has pressure ulcer of skin")}
{renderCheckbox("diag_Genitourinary_signs_and_symptoms", "Genitourinary signs and symptoms", "Patient shows genitourinary signs and symptoms")}
</div>
</div>

<div className="space-y-4">
<h3 className="text-lg font-semibold">Lab Values</h3>
<label className="block">
Albumin [Mass/volume] in Urine (max):
<input
type="number"
Expand All @@ -195,6 +116,7 @@ function InputForm({ onSubmit }) {
/>
</label>
</div>

<button
type="submit"
className="w-full p-2 bg-[#7abaff] text-white rounded hover:bg-[#5a9adf] transition duration-300"
Expand Down
20 changes: 19 additions & 1 deletion components/ResultsDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,21 @@ const ResultsDisplay: React.FC<Props> = ({ results }) => {
const formattedRiskScore =
typeof results.riskScore === 'number' ? results.riskScore.toFixed(2) : 'N/A'

const getRiskColor = (category: string): string => {
switch (category.toLowerCase()) {
case 'low':
return 'text-green-600'
case 'moderate':
return 'text-yellow-600'
case 'high':
return 'text-red-600'
default:
return 'text-gray-600'
}
}

const riskColor = getRiskColor(results.riskCategory)

return (
<div className="results mt-8 p-4 border rounded bg-[#f0f8ff] border-[#7abaff]">
<h2 className="text-2xl font-bold mb-4 text-[#7abaff]">
Expand All @@ -27,7 +42,10 @@ const ResultsDisplay: React.FC<Props> = ({ results }) => {
<strong>Risk Score:</strong> {formattedRiskScore}
</p>
<p>
<strong>Risk Category:</strong> {results.riskCategory || 'N/A'}
<strong>Risk Category:</strong>{' '}
<span className={`font-bold ${riskColor}`}>
{results.riskCategory || 'N/A'}
</span>
</p>
<p>
<strong>Recommendation:</strong> {results.recommendation || 'N/A'}
Expand Down
Loading

0 comments on commit 3cb6de7

Please sign in to comment.