Skip to content

Commit 5231b96

Browse files
Copiloteurunuela
Copilot
and
eurunuela
committed
Add warning popup for folders with manual classifications
Co-authored-by: eurunuela <13706448+eurunuela@users.noreply.github.com>
1 parent 3141106 commit 5231b96

3 files changed

Lines changed: 227 additions & 0 deletions

File tree

‎src/PopUps/IntroPopUp.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,7 @@ function IntroPopup({ onDataLoad, onLoadingStart, closePopup, isLoading, isDark
324324
crossComponentMetrics,
325325
qcNiftiBuffers,
326326
externalRegressorsFigure,
327+
hasManualClassifications: manualClassificationData && manualClassificationData.length > 0,
327328
});
328329
},
329330
[onDataLoad, onLoadingStart]
@@ -540,6 +541,7 @@ function IntroPopup({ onDataLoad, onLoadingStart, closePopup, isLoading, isDark
540541
crossComponentMetrics,
541542
qcNiftiBuffers,
542543
externalRegressorsFigure,
544+
hasManualClassifications: manualClassificationData && manualClassificationData.length > 0,
543545
});
544546
},
545547
[onDataLoad, onLoadingStart]

‎src/PopUps/ManualClassificationWarningPopUp.js‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
import React from "react";
2+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3+
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
4+
import { LOGO_DATA_URL } from "../constants/logo";
5+
6+
function ManualClassificationWarningPopUp({ closePopup, isDark }) {
7+
return (
8+
<div
9+
style={{
10+
position: "fixed",
11+
inset: 0,
12+
zIndex: 50,
13+
display: "flex",
14+
alignItems: "center",
15+
justifyContent: "center",
16+
backgroundColor: isDark ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.4)",
17+
backdropFilter: "blur(4px)",
18+
}}
19+
onClick={closePopup}
20+
>
21+
<div
22+
style={{
23+
position: "relative",
24+
width: "100%",
25+
maxWidth: "480px",
26+
margin: "0 24px",
27+
backgroundColor: "var(--bg-elevated)",
28+
borderRadius: "16px",
29+
border: "1px solid var(--border-default)",
30+
boxShadow: "var(--shadow-lg)",
31+
}}
32+
onClick={(e) => e.stopPropagation()}
33+
>
34+
{/* Close button */}
35+
<button
36+
onClick={closePopup}
37+
type="button"
38+
style={{
39+
position: "absolute",
40+
top: "16px",
41+
right: "16px",
42+
width: "32px",
43+
height: "32px",
44+
display: "flex",
45+
alignItems: "center",
46+
justifyContent: "center",
47+
borderRadius: "8px",
48+
border: "none",
49+
backgroundColor: "transparent",
50+
color: "var(--text-tertiary)",
51+
cursor: "pointer",
52+
transition: "all 0.15s ease",
53+
}}
54+
onMouseEnter={(e) => {
55+
e.currentTarget.style.backgroundColor = "var(--bg-tertiary)";
56+
e.currentTarget.style.color = "var(--text-primary)";
57+
}}
58+
onMouseLeave={(e) => {
59+
e.currentTarget.style.backgroundColor = "transparent";
60+
e.currentTarget.style.color = "var(--text-tertiary)";
61+
}}
62+
>
63+
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
64+
<path d="M13.7 0.3c-0.4-0.4-1-0.4-1.4 0L7 5.6 1.7 0.3c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4L5.6 7l-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3L7 8.4l5.3 5.3c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4L8.4 7l5.3-5.3c0.4-0.4 0.4-1 0-1.4z" />
65+
</svg>
66+
</button>
67+
68+
<div style={{ padding: "32px" }}>
69+
{/* Header with logo */}
70+
<div
71+
style={{
72+
display: "flex",
73+
alignItems: "center",
74+
gap: "12px",
75+
marginBottom: "20px",
76+
}}
77+
>
78+
<img
79+
src={LOGO_DATA_URL}
80+
alt="Rica"
81+
style={{ width: "36px", height: "36px" }}
82+
/>
83+
<div>
84+
<h1
85+
style={{
86+
fontSize: "20px",
87+
fontWeight: 600,
88+
color: "var(--text-primary)",
89+
margin: 0,
90+
letterSpacing: "-0.02em",
91+
}}
92+
>
93+
Manual Classifications Detected
94+
</h1>
95+
</div>
96+
</div>
97+
98+
{/* Info box */}
99+
<div
100+
style={{
101+
display: "flex",
102+
alignItems: "flex-start",
103+
gap: "12px",
104+
padding: "14px 16px",
105+
backgroundColor: isDark ? "rgba(59, 130, 246, 0.1)" : "rgba(59, 130, 246, 0.08)",
106+
borderRadius: "10px",
107+
marginBottom: "20px",
108+
border: `1px solid ${isDark ? "rgba(59, 130, 246, 0.3)" : "rgba(59, 130, 246, 0.2)"}`,
109+
}}
110+
>
111+
<FontAwesomeIcon
112+
icon={faInfoCircle}
113+
style={{
114+
fontSize: "18px",
115+
color: isDark ? "#60a5fa" : "#3b82f6",
116+
marginTop: "2px",
117+
flexShrink: 0,
118+
}}
119+
/>
120+
<div style={{ flex: 1 }}>
121+
<p
122+
style={{
123+
fontSize: "14px",
124+
color: "var(--text-primary)",
125+
lineHeight: 1.6,
126+
margin: 0,
127+
marginBottom: "8px",
128+
}}
129+
>
130+
This folder contains a <strong>manual_classification.tsv</strong> file with previously saved classifications.
131+
</p>
132+
<p
133+
style={{
134+
fontSize: "14px",
135+
color: "var(--text-secondary)",
136+
lineHeight: 1.6,
137+
margin: 0,
138+
}}
139+
>
140+
Your previous manual classifications have been loaded and are displayed in the component table.
141+
</p>
142+
</div>
143+
</div>
144+
145+
<p
146+
style={{
147+
fontSize: "14px",
148+
color: "var(--text-secondary)",
149+
lineHeight: 1.6,
150+
marginBottom: "16px",
151+
}}
152+
>
153+
<strong>To start fresh:</strong>
154+
</p>
155+
156+
<ul
157+
style={{
158+
fontSize: "14px",
159+
color: "var(--text-secondary)",
160+
lineHeight: 1.8,
161+
marginBottom: "24px",
162+
paddingLeft: "20px",
163+
}}
164+
>
165+
<li>
166+
Delete <code style={{
167+
backgroundColor: "var(--bg-tertiary)",
168+
padding: "2px 6px",
169+
borderRadius: "4px",
170+
fontFamily: "monospace",
171+
fontSize: "13px"
172+
}}>manual_classification.tsv</code> from your tedana folder, or
173+
</li>
174+
<li>
175+
Use the <strong>Reset</strong> button in Rica to revert to the original tedana classifications
176+
</li>
177+
</ul>
178+
179+
{/* Action button */}
180+
<button
181+
onClick={closePopup}
182+
style={{
183+
width: "100%",
184+
display: "flex",
185+
alignItems: "center",
186+
justifyContent: "center",
187+
height: "44px",
188+
fontSize: "14px",
189+
fontWeight: 500,
190+
color: isDark ? "#0a0a0b" : "#ffffff",
191+
backgroundColor: isDark ? "#fafafa" : "#111827",
192+
border: "none",
193+
borderRadius: "10px",
194+
cursor: "pointer",
195+
transition: "all 0.15s ease",
196+
}}
197+
onMouseEnter={(e) => (e.currentTarget.style.opacity = "0.9")}
198+
onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
199+
>
200+
Got it
201+
</button>
202+
</div>
203+
</div>
204+
</div>
205+
);
206+
}
207+
208+
export default ManualClassificationWarningPopUp;

‎src/index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { HelmetProvider, Helmet } from "react-helmet-async";
55
import IntroPopup from "./PopUps/IntroPopUp";
66
import AboutPopup from "./PopUps/AboutPopUp";
77
import ChangelogPopup from "./PopUps/ChangelogPopUp";
8+
import ManualClassificationWarningPopUp from "./PopUps/ManualClassificationWarningPopUp";
89
import MobileMain from "./Mobile";
910

1011
import "./styles/output.css";
@@ -52,6 +53,7 @@ function App() {
5253
const [showIntroPopup, setShowIntroPopup] = useState(true);
5354
const [showAboutPopup, setShowAboutPopup] = useState(false);
5455
const [showChangelogPopup, setShowChangelogPopup] = useState(false);
56+
const [showManualClassificationWarning, setShowManualClassificationWarning] = useState(false);
5557
const [showTabs, setShowTabs] = useState(false);
5658
const [originalData, setOriginalData] = useState([]);
5759
const [isLoading, setIsLoading] = useState(false);
@@ -132,6 +134,10 @@ function App() {
132134
setShowChangelogPopup((prev) => !prev);
133135
}, []);
134136

137+
const toggleManualClassificationWarning = useCallback(() => {
138+
setShowManualClassificationWarning((prev) => !prev);
139+
}, []);
140+
135141
// Mark version as seen in localStorage
136142
const handleVersionSeen = useCallback((version) => {
137143
localStorage.setItem("rica-last-seen-version", version);
@@ -172,6 +178,11 @@ function App() {
172178
setExternalRegressorsFigure(data.externalRegressorsFigure);
173179
setIsLoading(false);
174180
toggleIntroPopup();
181+
182+
// Show manual classification warning if applicable
183+
if (data.hasManualClassifications) {
184+
setShowManualClassificationWarning(true);
185+
}
175186
},
176187
[toggleIntroPopup]
177188
);
@@ -201,6 +212,12 @@ function App() {
201212
/>
202213
)}
203214
{showAboutPopup && <AboutPopup closePopup={toggleAboutPopup} isDark={isDark} />}
215+
{showManualClassificationWarning && (
216+
<ManualClassificationWarningPopUp
217+
closePopup={toggleManualClassificationWarning}
218+
isDark={isDark}
219+
/>
220+
)}
204221
{showChangelogPopup && (
205222
<ChangelogPopup
206223
closePopup={toggleChangelogPopup}

0 commit comments

Comments
 (0)