Skip to content

Commit 76792db

Browse files
atonixdevatonixdev
committed
commit lab page cleanup
1 parent 77d73d1 commit 76792db

File tree

11 files changed

+21393
-7
lines changed

11 files changed

+21393
-7
lines changed

‎frontend/package-lock.json‎

Lines changed: 20654 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@
4444
"devDependencies": {
4545
"autoprefixer": "^10.4.16",
4646
"postcss": "^8.4.32",
47-
"tailwindcss": "^3.3.6"
47+
"tailwindcss": "^3.3.6",
48+
"typescript": "4.9.5"
4849
},
4950
"resolutions": {
5051
"ajv": "6.12.6",

‎frontend/src/App.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@ import LabHistory from './pages/Lab/History';
2626
import LabCompare from './pages/Lab/Compare';
2727
import LabModelsArtifacts from './pages/Lab/ModelsArtifacts';
2828
import LabSettings from './pages/Lab/Settings';
29+
import SpaceLabOverview from './pages/Lab/SpaceLabOverview';
30+
import SelfLabOverview from './pages/Lab/SelfLabOverview';
31+
import AILabOverview from './pages/Lab/AILabOverview';
32+
import IoTLabOverview from './pages/Lab/IoTLabOverview';
33+
import PlaceholderPage from './pages/Lab/PlaceholderPage';
2934
import AdminLogin from './pages/Admin/Login';
3035
import AdminDashboard from './pages/Admin/Dashboard';
3136
import AdminProjects from './pages/Admin/Projects';
@@ -72,12 +77,45 @@ function App() {
7277
{/* Protected Lab Route (requires registration) */}
7378
<Route element={<ProtectedRoute redirectTo="/register" />}>
7479
<Route path="lab" element={<LabLayout />}>
80+
{/* Experimentation Lab */}
7581
<Route index element={<LabOverview />} />
7682
<Route path="run" element={<LabRunExperiment />} />
7783
<Route path="history" element={<LabHistory />} />
7884
<Route path="compare" element={<LabCompare />} />
7985
<Route path="models" element={<LabModelsArtifacts />} />
8086
<Route path="settings" element={<LabSettings />} />
87+
88+
{/* Space Lab */}
89+
<Route path="space" element={<SpaceLabOverview />} />
90+
<Route path="space/simulations" element={<PlaceholderPage title="Orbital Simulations" description="Run gravitational and trajectory models" domain="Space Lab" />} />
91+
<Route path="space/telemetry" element={<PlaceholderPage title="Satellite Telemetry" description="Monitor real-time satellite data" domain="Space Lab" />} />
92+
<Route path="space/models" element={<PlaceholderPage title="Cosmic Event Models" description="Analyze supernovae, black holes, and more" domain="Space Lab" />} />
93+
<Route path="space/datasets" element={<PlaceholderPage title="Datasets" description="Browse astrophysics research data" domain="Space Lab" />} />
94+
<Route path="space/settings" element={<LabSettings />} />
95+
96+
{/* Self Lab */}
97+
<Route path="self" element={<SelfLabOverview />} />
98+
<Route path="self/biometrics" element={<PlaceholderPage title="Biometrics" description="Track heart rate, sleep, and vitals" domain="Self Lab" />} />
99+
<Route path="self/cognitive" element={<PlaceholderPage title="Cognitive Experiments" description="Run memory, focus, and cognition tests" domain="Self Lab" />} />
100+
<Route path="self/evolution" element={<PlaceholderPage title="Personal Evolution" description="Analyze growth metrics over time" domain="Self Lab" />} />
101+
<Route path="self/journals" element={<PlaceholderPage title="Journals & Logs" description="Review daily entries and reflections" domain="Self Lab" />} />
102+
<Route path="self/settings" element={<LabSettings />} />
103+
104+
{/* AI Lab */}
105+
<Route path="ai" element={<AILabOverview />} />
106+
<Route path="ai/training" element={<PlaceholderPage title="Model Training" description="Train neural networks and ML models" domain="AI Lab" />} />
107+
<Route path="ai/datasets" element={<PlaceholderPage title="Dataset Manager" description="Upload and manage training data" domain="AI Lab" />} />
108+
<Route path="ai/experiments" element={<PlaceholderPage title="Hyperparameter Tuning" description="Optimize model parameters" domain="AI Lab" />} />
109+
<Route path="ai/registry" element={<PlaceholderPage title="Model Registry" description="Browse and deploy trained models" domain="AI Lab" />} />
110+
<Route path="ai/settings" element={<LabSettings />} />
111+
112+
{/* IoT Lab */}
113+
<Route path="iot" element={<IoTLabOverview />} />
114+
<Route path="iot/devices" element={<PlaceholderPage title="Device Manager" description="Configure and monitor IoT devices" domain="IoT Lab" />} />
115+
<Route path="iot/telemetry" element={<PlaceholderPage title="Sensor Telemetry" description="View real-time sensor data streams" domain="IoT Lab" />} />
116+
<Route path="iot/automation" element={<PlaceholderPage title="Automation Experiments" description="Build and test automation workflows" domain="IoT Lab" />} />
117+
<Route path="iot/network" element={<PlaceholderPage title="Network Health" description="Monitor network status and connectivity" domain="IoT Lab" />} />
118+
<Route path="iot/settings" element={<LabSettings />} />
81119
</Route>
82120
</Route>
83121
</Route>

‎frontend/src/components/Lab/DomainSidebar.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React from 'react';
2+
import { NavLink } from 'react-router-dom';
3+
import {
4+
FiActivity, FiPlayCircle, FiClock, FiBarChart2, FiSliders, FiSettings,
5+
FiGlobe, FiCrosshair, FiTarget, FiDatabase,
6+
FiHeart, FiUser, FiTrendingUp, FiBook,
7+
FiCpu, FiLayers, FiGitBranch, FiBox,
8+
FiRadio, FiHardDrive, FiZap, FiWifi
9+
} from 'react-icons/fi';
10+
11+
const domainConfigs = {
12+
experimentation: {
13+
title: 'Experimentation Lab',
14+
subtitle: 'A/B Testing & Research Engine',
15+
items: [
16+
{ to: '/lab', label: 'Dashboard Overview', icon: FiActivity, end: true },
17+
{ to: '/lab/run', label: 'Run Experiment', icon: FiPlayCircle },
18+
{ to: '/lab/history', label: 'Experiment History', icon: FiClock },
19+
{ to: '/lab/compare', label: 'Compare Experiments', icon: FiBarChart2 },
20+
{ to: '/lab/models', label: 'Models & Artifacts', icon: FiSliders },
21+
{ to: '/lab/settings', label: 'Settings', icon: FiSettings },
22+
],
23+
},
24+
space: {
25+
title: 'Space Lab',
26+
subtitle: 'Astrophysics & Orbital Mechanics',
27+
items: [
28+
{ to: '/lab/space', label: 'Dashboard Overview', icon: FiActivity, end: true },
29+
{ to: '/lab/space/simulations', label: 'Orbital Simulations', icon: FiCrosshair },
30+
{ to: '/lab/space/telemetry', label: 'Satellite Telemetry', icon: FiTarget },
31+
{ to: '/lab/space/models', label: 'Cosmic Event Models', icon: FiGlobe },
32+
{ to: '/lab/space/datasets', label: 'Datasets', icon: FiDatabase },
33+
{ to: '/lab/space/settings', label: 'Settings', icon: FiSettings },
34+
],
35+
},
36+
self: {
37+
title: 'Self Lab',
38+
subtitle: 'Biometrics & Personal Evolution',
39+
items: [
40+
{ to: '/lab/self', label: 'Dashboard Overview', icon: FiActivity, end: true },
41+
{ to: '/lab/self/biometrics', label: 'Biometrics', icon: FiHeart },
42+
{ to: '/lab/self/cognitive', label: 'Cognitive Experiments', icon: FiUser },
43+
{ to: '/lab/self/evolution', label: 'Personal Evolution', icon: FiTrendingUp },
44+
{ to: '/lab/self/journals', label: 'Journals & Logs', icon: FiBook },
45+
{ to: '/lab/self/settings', label: 'Settings', icon: FiSettings },
46+
],
47+
},
48+
ai: {
49+
title: 'AI Lab',
50+
subtitle: 'Machine Learning & Model Training',
51+
items: [
52+
{ to: '/lab/ai', label: 'Dashboard Overview', icon: FiActivity, end: true },
53+
{ to: '/lab/ai/training', label: 'Model Training', icon: FiCpu },
54+
{ to: '/lab/ai/datasets', label: 'Dataset Manager', icon: FiLayers },
55+
{ to: '/lab/ai/experiments', label: 'Hyperparameter Tuning', icon: FiGitBranch },
56+
{ to: '/lab/ai/registry', label: 'Model Registry', icon: FiBox },
57+
{ to: '/lab/ai/settings', label: 'Settings', icon: FiSettings },
58+
],
59+
},
60+
iot: {
61+
title: 'IoT Lab',
62+
subtitle: 'Devices & Sensor Networks',
63+
items: [
64+
{ to: '/lab/iot', label: 'Dashboard Overview', icon: FiActivity, end: true },
65+
{ to: '/lab/iot/devices', label: 'Device Manager', icon: FiHardDrive },
66+
{ to: '/lab/iot/telemetry', label: 'Sensor Telemetry', icon: FiRadio },
67+
{ to: '/lab/iot/automation', label: 'Automation Experiments', icon: FiZap },
68+
{ to: '/lab/iot/network', label: 'Network Health', icon: FiWifi },
69+
{ to: '/lab/iot/settings', label: 'Settings', icon: FiSettings },
70+
],
71+
},
72+
};
73+
74+
const DomainSidebar = ({ domain = 'experimentation' }) => {
75+
const config = domainConfigs[domain] || domainConfigs.experimentation;
76+
77+
return (
78+
<aside className="w-full md:w-72 bg-gradient-to-b from-[#0A0F1F] to-[#0D1425] border-r border-[#1A4FFF]/20">
79+
<div className="px-6 py-5 border-b border-[#1A4FFF]/20">
80+
<div className="text-lg font-bold text-white font-['Poppins']">
81+
{config.title}
82+
</div>
83+
<div className="text-xs text-gray-400 mt-1">{config.subtitle}</div>
84+
</div>
85+
86+
<nav className="p-3 space-y-1">
87+
{config.items.map((item) => {
88+
const Icon = item.icon;
89+
return (
90+
<NavLink
91+
key={item.to}
92+
to={item.to}
93+
end={item.end}
94+
className={({ isActive }) =>
95+
[
96+
'flex items-center gap-3 px-3 py-2.5 rounded-lg font-semibold transition-all duration-200',
97+
isActive
98+
? 'bg-[#1A4FFF]/20 text-[#00E0FF] shadow-lg shadow-[#1A4FFF]/25'
99+
: 'text-gray-400 hover:bg-white/5 hover:text-white',
100+
].join(' ')
101+
}
102+
>
103+
<Icon className="text-lg" />
104+
<span className="text-sm">{item.label}</span>
105+
</NavLink>
106+
);
107+
})}
108+
</nav>
109+
</aside>
110+
);
111+
};
112+
113+
export default DomainSidebar;

‎frontend/src/components/Lab/LabLayout.js‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React, { useMemo, useState } from 'react';
2-
import { Outlet } from 'react-router-dom';
3-
import LabSidebar from './LabSidebar';
2+
import { Outlet, useLocation } from 'react-router-dom';
3+
import DomainSidebar from './DomainSidebar';
44
import LabTopBar from './LabTopBar';
5+
import ResearchDomainNav from './ResearchDomainNav';
56

67
const LabLayout = () => {
8+
const location = useLocation();
79
const [search, setSearch] = useState('');
8-
const [theme, setTheme] = useState(() => localStorage.getItem('lab_theme') || 'light');
10+
const [theme, setTheme] = useState(() => localStorage.getItem('lab_theme') || 'dark');
911
const [settings, setSettings] = useState(() => {
1012
const defaults = {
1113
compareCap: 5,
@@ -40,16 +42,27 @@ const LabLayout = () => {
4042
});
4143
};
4244

45+
const currentDomain = useMemo(() => {
46+
const path = location.pathname;
47+
if (path.startsWith('/lab/space')) return 'space';
48+
if (path.startsWith('/lab/self')) return 'self';
49+
if (path.startsWith('/lab/ai')) return 'ai';
50+
if (path.startsWith('/lab/iot')) return 'iot';
51+
return 'experimentation';
52+
}, [location.pathname]);
53+
4354
const themeClasses = useMemo(() => {
4455
return theme === 'dark'
45-
? 'bg-gray-900 text-gray-100'
56+
? 'bg-[#0A0F1F] text-gray-100'
4657
: 'bg-gray-50 text-gray-900';
4758
}, [theme]);
4859

4960
return (
5061
<div className={`min-h-[calc(100vh-64px)] ${themeClasses}`}>
62+
<ResearchDomainNav />
63+
5164
<div className="flex flex-col md:flex-row">
52-
<LabSidebar />
65+
<DomainSidebar domain={currentDomain} />
5366

5467
<div className="flex-1 min-w-0">
5568
<LabTopBar
@@ -60,7 +73,7 @@ const LabLayout = () => {
6073
/>
6174

6275
<div className="px-4 md:px-6 py-6">
63-
<Outlet context={{ search, theme, settings, setSettings: updateSettings }} />
76+
<Outlet context={{ search, theme, settings, setSettings: updateSettings, domain: currentDomain }} />
6477
</div>
6578
</div>
6679
</div>

‎frontend/src/components/Lab/ResearchDomainNav.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import React from 'react';
2+
import { NavLink } from 'react-router-dom';
3+
import { FiZap, FiActivity, FiCpu, FiRadio, FiBarChart } from 'react-icons/fi';
4+
5+
const domains = [
6+
{
7+
id: 'space',
8+
label: 'Space Lab',
9+
icon: FiZap,
10+
path: '/lab/space',
11+
description: 'Astrophysics & Orbital Mechanics'
12+
},
13+
{
14+
id: 'self',
15+
label: 'Self Lab',
16+
icon: FiActivity,
17+
path: '/lab/self',
18+
description: 'Biometrics & Personal Evolution'
19+
},
20+
{
21+
id: 'ai',
22+
label: 'AI Lab',
23+
icon: FiCpu,
24+
path: '/lab/ai',
25+
description: 'Machine Learning & Model Training'
26+
},
27+
{
28+
id: 'iot',
29+
label: 'IoT Lab',
30+
icon: FiRadio,
31+
path: '/lab/iot',
32+
description: 'Devices & Sensor Networks'
33+
},
34+
{
35+
id: 'experimentation',
36+
label: 'Experimentation Lab',
37+
icon: FiBarChart,
38+
path: '/lab',
39+
description: 'A/B Testing & Research Engine',
40+
exact: true
41+
},
42+
];
43+
44+
const ResearchDomainNav = () => {
45+
return (
46+
<div className="bg-gradient-to-r from-[#0A0F1F] via-[#0D1425] to-[#0A0F1F] border-b border-[#1A4FFF]/20 shadow-xl">
47+
<div className="max-w-[1800px] mx-auto px-6 py-4">
48+
<div className="flex items-center justify-between mb-4">
49+
<div>
50+
<h1 className="text-2xl font-bold text-white font-['Poppins']">
51+
Atonix Research Lab
52+
</h1>
53+
<p className="text-xs text-gray-400 mt-1">
54+
Unified Command Center for Multi-Domain Research
55+
</p>
56+
</div>
57+
<div className="text-xs text-[#00E0FF] font-semibold tracking-wider">
58+
v2.0.0
59+
</div>
60+
</div>
61+
62+
<div className="flex gap-3 overflow-x-auto scrollbar-thin scrollbar-thumb-[#1A4FFF] scrollbar-track-transparent">
63+
{domains.map((domain) => {
64+
const Icon = domain.icon;
65+
return (
66+
<NavLink
67+
key={domain.id}
68+
to={domain.path}
69+
end={domain.exact}
70+
className={({ isActive }) =>
71+
[
72+
'group flex items-center gap-3 px-5 py-3 rounded-lg transition-all duration-300',
73+
'border backdrop-blur-md min-w-fit',
74+
isActive
75+
? 'bg-[#1A4FFF]/20 border-[#1A4FFF] shadow-lg shadow-[#1A4FFF]/25'
76+
: 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-[#00E0FF]/50',
77+
].join(' ')
78+
}
79+
>
80+
{({ isActive }) => (
81+
<>
82+
<Icon
83+
className={`text-xl transition-colors ${
84+
isActive ? 'text-[#00E0FF]' : 'text-gray-400 group-hover:text-[#00E0FF]'
85+
}`}
86+
/>
87+
<div className="flex flex-col">
88+
<span
89+
className={`text-sm font-semibold transition-colors ${
90+
isActive ? 'text-white' : 'text-gray-300 group-hover:text-white'
91+
}`}
92+
>
93+
{domain.label}
94+
</span>
95+
<span className="text-xs text-gray-500">
96+
{domain.description}
97+
</span>
98+
</div>
99+
</>
100+
)}
101+
</NavLink>
102+
);
103+
})}
104+
</div>
105+
</div>
106+
</div>
107+
);
108+
};
109+
110+
export default ResearchDomainNav;

0 commit comments

Comments
 (0)