Skip to content

Commit 04d445d

Browse files
MrPeterJinMrPeterJin
committed
Icon and Colorcode Update
1 parent a01d0d0 commit 04d445d

File tree

3 files changed

+73
-37
lines changed

3 files changed

+73
-37
lines changed

‎public/build-meta.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"buildDate": "2025-05-28",
3-
"buildTime": "09:12:39",
4-
"buildTimestamp": "2025-05-28 09:12:39",
3+
"buildTime": "10:10:10",
4+
"buildTimestamp": "2025-05-28 10:10:10",
55
"lastUpdatedBy": "MrPeterJin"
66
}

‎src/components/tables/DatasetInfoTable.tsx‎

Lines changed: 69 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import React, { useState } from "react";
44
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
55
import { Button } from "@/components/ui/button";
66
import { FaEye, FaEyeSlash } from "react-icons/fa";
7+
import { Users, FileText, Cross, Heart } from "lucide-react";
8+
import { getOrganColor } from "@/utils/organColors";
79

810
// Dataset information based on the supplementary table
911
const datasetInfo = [
@@ -21,14 +23,7 @@ const datasetInfo = [
2123
{ organ: "Brain", source: "H1", cohort: "Glioma-Cohort", caseNumber: 677, slidesNumber: 1362 },
2224
];
2325

24-
// Color mapping for organs
25-
const organColors: Record<string, string> = {
26-
"Lung": "#3B82F6", // Blue
27-
"Stomach": "#10B981", // Green
28-
"Colorectal": "#F59E0B", // Orange
29-
"Breast": "#EF4444", // Red
30-
"Brain": "#8B5CF6", // Purple
31-
};
26+
3227

3328
export function DatasetInfoTable() {
3429
const [isVisible, setIsVisible] = useState(false);
@@ -46,14 +41,30 @@ export function DatasetInfoTable() {
4641
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
4742
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 min-w-0">
4843
<h3 className="text-lg font-semibold text-gray-900">Dataset Information</h3>
49-
<div className="text-sm text-gray-500 break-words">
50-
<span className="inline-block">{totalCases.toLocaleString()} cases</span>
51-
<span className="mx-1">•</span>
52-
<span className="inline-block">{totalSlides.toLocaleString()} slides</span>
53-
<span className="mx-1">•</span>
54-
<span className="inline-block">{totalHospitals} hospitals</span>
55-
<span className="mx-1 hidden sm:inline">•</span>
56-
<span className="inline-block hidden sm:inline">{totalOrgans} organs</span>
44+
<div className="text-sm text-gray-500 break-words flex flex-wrap items-center gap-1">
45+
<div className="inline-flex items-center gap-1">
46+
<Users className="w-3.5 h-3.5 text-blue-500" />
47+
<span className="font-semibold text-gray-700">{totalCases.toLocaleString()}</span>
48+
<span className="text-gray-500">cases</span>
49+
</div>
50+
<span className="text-gray-300">•</span>
51+
<div className="inline-flex items-center gap-1">
52+
<FileText className="w-3.5 h-3.5 text-green-500" />
53+
<span className="text-gray-600">{totalSlides.toLocaleString()}</span>
54+
<span className="text-gray-500">slides</span>
55+
</div>
56+
<span className="text-gray-300">•</span>
57+
<div className="inline-flex items-center gap-1">
58+
<Cross className="w-3.5 h-3.5 text-purple-500" />
59+
<span className="text-gray-600">{totalHospitals}</span>
60+
<span className="text-gray-500">hospitals</span>
61+
</div>
62+
<span className="text-gray-300 hidden sm:inline">•</span>
63+
<div className="inline-flex items-center gap-1 hidden sm:flex">
64+
<Heart className="w-3.5 h-3.5 text-orange-500" />
65+
<span className="text-gray-600">{totalOrgans}</span>
66+
<span className="text-gray-500">organs</span>
67+
</div>
5768
</div>
5869
</div>
5970
<Button
@@ -103,20 +114,32 @@ export function DatasetInfoTable() {
103114
<h4 className="text-base sm:text-lg font-semibold text-gray-900 mb-2 sm:mb-3">Dataset Overview</h4>
104115
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-4">
105116
<div className="bg-white rounded-lg p-2 sm:p-3 shadow-sm">
106-
<div className="text-lg sm:text-2xl font-bold text-blue-600">{totalCases.toLocaleString()}</div>
107-
<div className="text-xs sm:text-sm text-gray-600">Total Cases</div>
117+
<div className="flex items-center justify-center gap-2 mb-1">
118+
<Users className="w-4 h-4 sm:w-5 sm:h-5 text-blue-500" />
119+
<div className="text-lg sm:text-2xl font-bold text-blue-600">{totalCases.toLocaleString()}</div>
120+
</div>
121+
<div className="text-xs sm:text-sm text-gray-600 text-center">Total Cases</div>
108122
</div>
109123
<div className="bg-white rounded-lg p-2 sm:p-3 shadow-sm">
110-
<div className="text-lg sm:text-2xl font-bold text-green-600">{totalSlides.toLocaleString()}</div>
111-
<div className="text-xs sm:text-sm text-gray-600">Total Slides</div>
124+
<div className="flex items-center justify-center gap-2 mb-1">
125+
<FileText className="w-4 h-4 sm:w-5 sm:h-5 text-green-500" />
126+
<div className="text-lg sm:text-2xl font-bold text-green-600">{totalSlides.toLocaleString()}</div>
127+
</div>
128+
<div className="text-xs sm:text-sm text-gray-600 text-center">Total Slides</div>
112129
</div>
113130
<div className="bg-white rounded-lg p-2 sm:p-3 shadow-sm">
114-
<div className="text-lg sm:text-2xl font-bold text-purple-600">{totalHospitals}</div>
115-
<div className="text-xs sm:text-sm text-gray-600">Hospitals</div>
131+
<div className="flex items-center justify-center gap-2 mb-1">
132+
<Cross className="w-4 h-4 sm:w-5 sm:h-5 text-purple-500" />
133+
<div className="text-lg sm:text-2xl font-bold text-purple-600">{totalHospitals}</div>
134+
</div>
135+
<div className="text-xs sm:text-sm text-gray-600 text-center">Hospitals</div>
116136
</div>
117137
<div className="bg-white rounded-lg p-2 sm:p-3 shadow-sm">
118-
<div className="text-lg sm:text-2xl font-bold text-orange-600">{totalOrgans}</div>
119-
<div className="text-xs sm:text-sm text-gray-600">Organs</div>
138+
<div className="flex items-center justify-center gap-2 mb-1">
139+
<Heart className="w-4 h-4 sm:w-5 sm:h-5 text-orange-500" />
140+
<div className="text-lg sm:text-2xl font-bold text-orange-600">{totalOrgans}</div>
141+
</div>
142+
<div className="text-xs sm:text-sm text-gray-600 text-center">Organs</div>
120143
</div>
121144
</div>
122145
</div>
@@ -140,13 +163,13 @@ export function DatasetInfoTable() {
140163
<div
141164
key={organ}
142165
className="bg-white border border-gray-200 rounded-lg overflow-hidden"
143-
style={{ borderTopColor: organColors[organ], borderTopWidth: '3px' }}
166+
style={{ borderTopColor: getOrganColor(organ), borderTopWidth: '3px' }}
144167
>
145168
<div className="p-2 sm:p-3 bg-gray-50 border-b border-gray-200">
146169
<div className="flex items-center gap-2">
147170
<div
148171
className="w-3 h-3 rounded-full shrink-0"
149-
style={{ backgroundColor: organColors[organ] }}
172+
style={{ backgroundColor: getOrganColor(organ) }}
150173
/>
151174
<h4 className="font-semibold text-gray-900 text-sm truncate">{organ}</h4>
152175
</div>
@@ -162,19 +185,31 @@ export function DatasetInfoTable() {
162185
<div className="font-medium text-gray-900 truncate">{item.source}</div>
163186
<div className="text-gray-500 truncate text-xs">{item.cohort.replace('-Cohort', '')}</div>
164187
</div>
165-
<div className="text-right shrink-0">
166-
<div className="font-medium text-gray-900 text-xs">{item.caseNumber.toLocaleString()}</div>
167-
<div className="text-gray-500 text-xs">{item.slidesNumber.toLocaleString()}</div>
188+
<div className="text-right shrink-0 space-y-1">
189+
<div className="flex items-center justify-end gap-1">
190+
<Users className="w-3 h-3 text-blue-500" />
191+
<span className="font-semibold text-gray-900 text-xs">{item.caseNumber.toLocaleString()}</span>
192+
</div>
193+
<div className="flex items-center justify-end gap-1">
194+
<FileText className="w-3 h-3 text-green-500" />
195+
<span className="text-gray-600 text-xs">{item.slidesNumber.toLocaleString()}</span>
196+
</div>
168197
</div>
169198
</div>
170199
))}
171200

172201
<div className="border-t border-gray-200 pt-2 mt-2">
173-
<div className="flex justify-between items-center text-xs font-semibold">
174-
<span className="text-gray-900">Total</span>
175-
<div className="text-right">
176-
<div className="text-gray-900">{totalCasesForOrgan.toLocaleString()}</div>
177-
<div className="text-gray-600">{totalSlidesForOrgan.toLocaleString()}</div>
202+
<div className="flex justify-between items-center text-xs">
203+
<span className="text-gray-900 font-semibold">Total</span>
204+
<div className="text-right space-y-1">
205+
<div className="flex items-center justify-end gap-1">
206+
<Users className="w-3 h-3 text-blue-500" />
207+
<span className="font-bold text-gray-900 text-xs">{totalCasesForOrgan.toLocaleString()}</span>
208+
</div>
209+
<div className="flex items-center justify-end gap-1">
210+
<FileText className="w-3 h-3 text-green-500" />
211+
<span className="font-semibold text-gray-700 text-xs">{totalSlidesForOrgan.toLocaleString()}</span>
212+
</div>
178213
</div>
179214
</div>
180215
</div>

‎src/utils/organColors.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
// Organ color mapping
1+
// Organ color mapping
22
const organColorMap: Record<string, string> = {
33
'Breast': '#5470c6', // Blue
44
'Lung': '#91cc75', // Green
55
'Colon': '#fac858', // Yellow
6+
'Colorectal': '#fac858', // Yellow (same as Colon)
67
'Brain': '#ee6666', // Red
78
'Stomach': '#73c0de', // Light Blue
89
};

0 commit comments

Comments
 (0)