refactor: Decentralize data fetching and add axis initialization

Refactor data fetching architecture from centralized App state to component-local data management for improved maintainability and data freshness guarantees. Changes: - SettingsModal: Fetch config data on modal open - RecipePanel: Fetch recipe list on panel open - IOMonitorPage: Fetch IO list on page mount with real-time updates - Remove unnecessary props drilling through component hierarchy - Simplify App.tsx by removing centralized config/recipes state New feature: - Add InitializeModal for sequential axis initialization (X, Y, Z) - Each axis initializes with 3-second staggered start - Progress bar animation for each axis - Auto-close on completion 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 01:35:32 +09:00
parent 27cc2507cf
commit 362263ab05
10 changed files with 631 additions and 201 deletions
--- a/frontend/components/InitializeModal.tsx
+++ b/frontend/components/InitializeModal.tsx
@@ -0,0 +1,181 @@
+import React, { useState, useEffect } from 'react';
+import { Target, CheckCircle2, Loader2 } from 'lucide-react';
+import { TechButton } from './common/TechButton';
+
+interface InitializeModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+type AxisStatus = 'pending' | 'initializing' | 'completed';
+
+interface AxisState {
+    name: string;
+    status: AxisStatus;
+    progress: number;
+}
+
+export const InitializeModal: React.FC<InitializeModalProps> = ({ isOpen, onClose }) => {
+    const [axes, setAxes] = useState<AxisState[]>([
+        { name: 'X-Axis', status: 'pending', progress: 0 },
+        { name: 'Y-Axis', status: 'pending', progress: 0 },
+        { name: 'Z-Axis', status: 'pending', progress: 0 },
+    ]);
+    const [isInitializing, setIsInitializing] = useState(false);
+
+    // Reset state when modal closes
+    useEffect(() => {
+        if (!isOpen) {
+            setAxes([
+                { name: 'X-Axis', status: 'pending', progress: 0 },
+                { name: 'Y-Axis', status: 'pending', progress: 0 },
+                { name: 'Z-Axis', status: 'pending', progress: 0 },
+            ]);
+            setIsInitializing(false);
+        }
+    }, [isOpen]);
+
+    const startInitialization = () => {
+        setIsInitializing(true);
+
+        // Initialize each axis with 3 second delay between them
+        axes.forEach((axis, index) => {
+            const delay = index * 3000; // 0s, 3s, 6s
+
+            // Start initialization after delay
+            setTimeout(() => {
+                setAxes(prev => {
+                    const next = [...prev];
+                    next[index] = { ...next[index], status: 'initializing', progress: 0 };
+                    return next;
+                });
+
+                // Progress animation (3 seconds)
+                const startTime = Date.now();
+                const duration = 3000;
+                const interval = setInterval(() => {
+                    const elapsed = Date.now() - startTime;
+                    const progress = Math.min((elapsed / duration) * 100, 100);
+
+                    setAxes(prev => {
+                        const next = [...prev];
+                        next[index] = { ...next[index], progress };
+                        return next;
+                    });
+
+                    if (progress >= 100) {
+                        clearInterval(interval);
+                        setAxes(prev => {
+                            const next = [...prev];
+                            next[index] = { ...next[index], status: 'completed', progress: 100 };
+                            return next;
+                        });
+
+                        // Check if all axes are completed
+                        setAxes(prev => {
+                            if (prev.every(a => a.status === 'completed')) {
+                                // Auto close after 500ms
+                                setTimeout(() => {
+                                    onClose();
+                                }, 500);
+                            }
+                            return prev;
+                        });
+                    }
+                }, 50);
+            }, delay);
+        });
+    };
+
+    if (!isOpen) return null;
+
+    const allCompleted = axes.every(a => a.status === 'completed');
+
+    return (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+            <div className="w-[600px] glass-holo p-8 border border-neon-blue shadow-glow-blue relative flex flex-col">
+                <button
+                    onClick={onClose}
+                    disabled={isInitializing}
+                    className="absolute top-4 right-4 text-slate-400 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
+                >
+                    ✕
+                </button>
+
+                <h2 className="text-2xl font-tech font-bold text-neon-blue mb-8 border-b border-white/10 pb-4 flex items-center gap-3">
+                    <Target className="animate-pulse" /> AXIS INITIALIZATION
+                </h2>
+
+                <div className="space-y-6 mb-8">
+                    {axes.map((axis, index) => (
+                        <div key={axis.name} className="space-y-2">
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-3">
+                                    {axis.status === 'completed' ? (
+                                        <CheckCircle2 className="w-5 h-5 text-neon-green" />
+                                    ) : axis.status === 'initializing' ? (
+                                        <Loader2 className="w-5 h-5 text-neon-blue animate-spin" />
+                                    ) : (
+                                        <div className="w-5 h-5 border-2 border-slate-600 rounded-full" />
+                                    )}
+                                    <span className="font-tech font-bold text-lg text-white tracking-wider">
+                                        {axis.name}
+                                    </span>
+                                </div>
+                                <span
+                                    className={`font-mono text-sm font-bold ${
+                                        axis.status === 'completed'
+                                            ? 'text-neon-green'
+                                            : axis.status === 'initializing'
+                                            ? 'text-neon-blue'
+                                            : 'text-slate-500'
+                                    }`}
+                                >
+                                    {axis.status === 'completed'
+                                        ? 'COMPLETED'
+                                        : axis.status === 'initializing'
+                                        ? `${Math.round(axis.progress)}%`
+                                        : 'WAITING'}
+                                </span>
+                            </div>
+
+                            {/* Progress Bar */}
+                            <div className="h-3 bg-black/50 border border-slate-700 overflow-hidden">
+                                <div
+                                    className={`h-full transition-all duration-100 ${
+                                        axis.status === 'completed'
+                                            ? 'bg-neon-green shadow-[0_0_10px_rgba(10,255,0,0.5)]'
+                                            : 'bg-neon-blue shadow-[0_0_10px_rgba(0,243,255,0.5)]'
+                                    }`}
+                                    style={{ width: `${axis.progress}%` }}
+                                />
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                {allCompleted && (
+                    <div className="mb-6 p-4 bg-neon-green/10 border border-neon-green rounded text-center">
+                        <span className="font-tech font-bold text-neon-green tracking-wider">
+                            ✓ ALL AXES INITIALIZED SUCCESSFULLY
+                        </span>
+                    </div>
+                )}
+
+                <div className="flex justify-end gap-4">
+                    <TechButton onClick={onClose} disabled={isInitializing}>
+                        CANCEL
+                    </TechButton>
+                    <TechButton
+                        variant="blue"
+                        active
+                        onClick={startInitialization}
+                        disabled={isInitializing || allCompleted}
+                    >
+                        {isInitializing ? 'INITIALIZING...' : 'START INITIALIZATION'}
+                    </TechButton>
+                </div>
+            </div>
+        </div>
+    );
+};
--- a/frontend/components/RecipePanel.tsx
+++ b/frontend/components/RecipePanel.tsx
@@ -1,20 +1,46 @@
-import React, { useState } from 'react';
-import { Layers, Check, Settings, X } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { Layers, Check, Settings, X, RotateCw } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { Recipe } from '../types';
 import { TechButton } from './common/TechButton';
+import { comms } from '../communication';

 interface RecipePanelProps {
-    recipes: Recipe[];
+    isOpen: boolean;
    currentRecipe: Recipe;
    onSelectRecipe: (r: Recipe) => void;
    onClose: () => void;
 }

-export const RecipePanel: React.FC<RecipePanelProps> = ({ recipes, currentRecipe, onSelectRecipe, onClose }) => {
+export const RecipePanel: React.FC<RecipePanelProps> = ({ isOpen, currentRecipe, onSelectRecipe, onClose }) => {
    const navigate = useNavigate();
+    const [recipes, setRecipes] = useState<Recipe[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
    const [selectedId, setSelectedId] = useState<string>(currentRecipe.id);

+    // Fetch recipes when panel opens
+    useEffect(() => {
+        if (isOpen) {
+            const fetchRecipes = async () => {
+                setIsLoading(true);
+                try {
+                    const recipeStr = await comms.getRecipeList();
+                    const recipeData: Recipe[] = JSON.parse(recipeStr);
+                    setRecipes(recipeData);
+                } catch (e) {
+                    console.error('Failed to fetch recipes:', e);
+                }
+                setIsLoading(false);
+            };
+            fetchRecipes();
+        }
+    }, [isOpen]);
+
+    // Update selected ID when currentRecipe changes
+    useEffect(() => {
+        setSelectedId(currentRecipe.id);
+    }, [currentRecipe.id]);
+
    const handleConfirm = () => {
        const selected = recipes.find(r => r.id === selectedId);
        if (selected) {
@@ -23,6 +49,8 @@ export const RecipePanel: React.FC<RecipePanelProps> = ({ recipes, currentRecipe
        }
    };

+    if (!isOpen) return null;
+
    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
            <div className="w-[500px] bg-slate-950/90 border border-neon-blue/30 rounded-lg shadow-2xl flex flex-col overflow-hidden">
@@ -38,26 +66,33 @@ export const RecipePanel: React.FC<RecipePanelProps> = ({ recipes, currentRecipe

                {/* List (Max height for ~5 items) */}
                <div className="p-4 max-h-[320px] overflow-y-auto custom-scrollbar">
-                    <div className="space-y-2">
-                        {recipes.map(recipe => (
-                            <div
-                                key={recipe.id}
-                                onClick={() => setSelectedId(recipe.id)}
-                                className={`
-                                    p-3 rounded border cursor-pointer transition-all flex items-center justify-between
-                                    ${selectedId === recipe.id
-                                        ? 'bg-neon-blue/20 border-neon-blue text-white shadow-[0_0_10px_rgba(0,243,255,0.2)]'
-                                        : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:border-white/20'}
-                                `}
-                            >
-                                <div>
-                                    <div className="font-bold tracking-wide">{recipe.name}</div>
-                                    <div className="text-[10px] font-mono opacity-70">ID: {recipe.id} | MOD: {recipe.lastModified}</div>
+                    {isLoading ? (
+                        <div className="h-64 flex flex-col items-center justify-center gap-4 animate-pulse">
+                            <RotateCw className="w-12 h-12 text-neon-blue animate-spin" />
+                            <div className="text-lg font-tech text-neon-blue tracking-widest">LOADING RECIPES...</div>
+                        </div>
+                    ) : (
+                        <div className="space-y-2">
+                            {recipes.map(recipe => (
+                                <div
+                                    key={recipe.id}
+                                    onClick={() => setSelectedId(recipe.id)}
+                                    className={`
+                                        p-3 rounded border cursor-pointer transition-all flex items-center justify-between
+                                        ${selectedId === recipe.id
+                                            ? 'bg-neon-blue/20 border-neon-blue text-white shadow-[0_0_10px_rgba(0,243,255,0.2)]'
+                                            : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:border-white/20'}
+                                    `}
+                                >
+                                    <div>
+                                        <div className="font-bold tracking-wide">{recipe.name}</div>
+                                        <div className="text-[10px] font-mono opacity-70">ID: {recipe.id} | MOD: {recipe.lastModified}</div>
+                                    </div>
+                                    {selectedId === recipe.id && <Check className="w-4 h-4 text-neon-blue" />}
                                </div>
-                                {selectedId === recipe.id && <Check className="w-4 h-4 text-neon-blue" />}
-                            </div>
-                        ))}
-                    </div>
+                            ))}
+                        </div>
+                    )}
                </div>

                {/* Footer Actions */}
--- a/frontend/components/SettingsModal.tsx
+++ b/frontend/components/SettingsModal.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 import { Settings, RotateCw, ChevronDown, ChevronRight } from 'lucide-react';
 import { ConfigItem } from '../types';
+import { comms } from '../communication';

 interface SettingsModalProps {
    isOpen: boolean;
    onClose: () => void;
-    config: ConfigItem[] | null;
-    isRefreshing: boolean;
    onSave: (config: ConfigItem[]) => void;
 }

@@ -34,18 +33,31 @@ const TechButton = ({ children, onClick, active = false, variant = 'blue', class
    );
 };

-export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, config, isRefreshing, onSave }) => {
+export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, onSave }) => {
    const [localConfig, setLocalConfig] = React.useState<ConfigItem[]>([]);
    const [expandedGroups, setExpandedGroups] = React.useState<Set<string>>(new Set());
+    const [isRefreshing, setIsRefreshing] = React.useState(false);

+    // Fetch config data when modal opens
    React.useEffect(() => {
-        if (config) {
-            setLocalConfig(config);
-            // Auto-expand all groups initially
-            const groups = new Set(config.map(c => c.Group));
-            setExpandedGroups(groups);
+        if (isOpen) {
+            const fetchConfig = async () => {
+                setIsRefreshing(true);
+                try {
+                    const configStr = await comms.getConfig();
+                    const config: ConfigItem[] = JSON.parse(configStr);
+                    setLocalConfig(config);
+                    // Auto-expand all groups initially
+                    const groups = new Set<string>(config.map(c => c.Group));
+                    setExpandedGroups(groups);
+                } catch (e) {
+                    console.error('Failed to fetch config:', e);
+                }
+                setIsRefreshing(false);
+            };
+            fetchConfig();
        }
-    }, [config]);
+    }, [isOpen]);

    const handleChange = (idx: number, newValue: string) => {
        setLocalConfig(prev => {
--- a/frontend/components/layout/Header.tsx
+++ b/frontend/components/layout/Header.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { Activity, Settings, Move, Camera, Layers, Cpu } from 'lucide-react';
+import { Activity, Settings, Move, Camera, Layers, Cpu, Target } from 'lucide-react';

 interface HeaderProps {
    currentTime: Date;
-    onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | null) => void;
-    activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | null;
+    onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null) => void;
+    activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null;

 }

@@ -53,7 +53,8 @@ export const Header: React.FC<HeaderProps> = ({ currentTime, onTabChange, active
                        { id: 'io', icon: Activity, label: 'I/O MONITOR', path: '/io-monitor' },
                        { id: 'motion', icon: Move, label: 'MOTION', path: '/' },
                        { id: 'camera', icon: Camera, label: 'VISION', path: '/' },
-                        { id: 'setting', icon: Settings, label: 'CONFIG', path: '/' }
+                        { id: 'setting', icon: Settings, label: 'CONFIG', path: '/' },
+                        { id: 'initialize', icon: Target, label: 'INITIALIZE', path: '/' }
                    ].map(item => {
                        const isActive = item.id === 'io'
                            ? location.pathname === '/io-monitor'
--- a/frontend/components/layout/Layout.tsx
+++ b/frontend/components/layout/Layout.tsx
@@ -8,8 +8,8 @@ interface LayoutProps {
    currentTime: Date;
    isHostConnected: boolean;
    robotTarget: RobotTarget;
-    onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | null) => void;
-    activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | null;
+    onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null) => void;
+    activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null;
    isLoading: boolean;
 }