feat: visualizers

src/visualizers/base_visualizer.py

@@ -0,0 +1,254 @@
+# src/visualizers/base_visualizer.py
+from abc import ABC, abstractmethod
+from pathlib import Path
+from typing import Dict, Type, Any, Optional, Callable, List
+import streamlit as st
+
+# --- Component Registry ---
+VISUALIZER_REGISTRY: Dict[str, Type["VisualizationComponent"]] = {}
+
+def register_visualizer(name: str):
+    """
+    一个装饰器，用于将可视化组件类注册到全局注册表。
+    A decorator to register a visualization component class to the global registry.
+    """
+    def decorator(cls: Type["VisualizationComponent"]):
+        if name in VISUALIZER_REGISTRY:
+            # 在调试或开发模式下可能是警告，生产模式下可能是错误
+            # In debug/dev mode this might be a warning, in production an error
+            print(f"警告: 可视化组件 '{name}' 已被注册，将被覆盖。Visualizer '{name}' already registered. Will be overridden.")
+        VISUALIZER_REGISTRY[name] = cls
+        return cls
+    return decorator
+
+def get_visualizer_class(type_name: str) -> Optional[Type["VisualizationComponent"]]:
+    """
+    从注册表中获取组件类。
+    Gets a component class from the registry.
+    """
+    return VISUALIZER_REGISTRY.get(type_name)
+
+# --- Abstract Base Class for Visualization Components ---
+class VisualizationComponent(ABC):
+    """
+    可视化组件的抽象基类。
+    Abstract base class for all visualization components.
+    """
+    def __init__(self,
+                 component_instance_id: str,
+                 trial_root_path: Path,
+                 # data_asset_info: Dict[str, Any], # 描述此组件主要关联的数据资产信息 (来自清单)
+                                                  # Describes the data asset this component is primarily associated with (from manifest)
+                 # ^ 将被更通用的 data_sources_map 替代
+                 data_sources_map: Dict[str, Dict[str, Any]], # Key: 逻辑数据源名称, Value: 数据资产信息字典
+                                                              # Key: logical data source name, Value: data asset info dict
+                                                              # e.g., {"main_scalar_data": asset_info_for_loss, "reference_images": asset_info_for_images}
+                 component_specific_config: Dict[str, Any] = None
+                ):
+        """
+        初始化可视化组件。
+        Initializes the visualization component.
+
+        Args:
+            component_instance_id (str): 此组件在仪表盘上的唯一实例ID。
+                                         Unique instance ID for this component on the dashboard.
+            trial_root_path (Path): 此组件所属的Trial的根目录路径。
+                                    Root directory path of the Trial this component belongs to.
+            data_sources_map (Dict[str, Dict[str, Any]]):
+                一个字典，映射逻辑数据源名称到具体的数据资产信息。
+                数据资产信息字典通常包含 'asset_id', 'display_name', 'data_type', 'path', 
+                以及其他从 _trial_manifest.toml 中解析得到的元数据。
+                A dictionary mapping logical data source names to specific data asset information.
+                The data asset info dict typically contains 'asset_id', 'display_name', 'data_type', 'path',
+                and other metadata parsed from _trial_manifest.toml.
+            component_specific_config (Dict[str, Any], optional):
+                特定于此组件实例的配置 (例如，图表标题、颜色等)。
+                Configuration specific to this component instance (e.g., chart title, color, etc.).
+        """
+        self.component_instance_id = component_instance_id
+        self.trial_root_path = trial_root_path
+        self.data_sources_map = data_sources_map
+        self.config = component_specific_config if component_specific_config is not None else {}
+
+        # 组件自身持久化配置或小型数据的路径
+        # Path for the component to persist its own configuration or small data
+        self.component_private_storage_path = self.trial_root_path / "visualizers_data" / self.component_instance_id
+        self.component_private_storage_path.mkdir(parents=True, exist_ok=True)
+
+        self._current_global_step: Optional[int] = None
+        self._on_global_step_change_request: Optional[Callable[[int], None]] = None
+        self._all_available_steps: Optional[List[int]] = None # 由主应用或数据加载器填充
+
+    def _get_data_asset_info(self, logical_name: str = "default") -> Optional[Dict[str, Any]]:
+        """
+        辅助方法，获取指定逻辑名称的数据资产信息。
+        Helper method to get data asset info for a given logical name.
+        如果组件只处理一个主要数据源，可以使用 "default" 或在初始化时指定。
+        If a component handles one primary data source, "default" or a specific name can be used.
+        """
+        return self.data_sources_map.get(logical_name)
+
+    def _get_data_asset_path(self, logical_name: str = "default") -> Optional[Path]:
+        """获取指定逻辑数据源的绝对路径。Gets the absolute path for a given logical data source."""
+        asset_info = self._get_data_asset_info(logical_name)
+        if asset_info and "path" in asset_info:
+            # 路径在清单中是相对于trial_root_path的
+            # Path in manifest is relative to trial_root_path
+            return (self.trial_root_path / asset_info["path"]).resolve()
+        return None
+
+    def configure_global_step_interaction(self,
+                                        current_step: Optional[int],
+                                        all_available_steps: Optional[List[int]],
+                                        on_step_change_request_callback: Optional[Callable[[int], None]]):
+        """
+        由主应用调用，以配置与全局步骤相关的交互。
+        Called by the main application to configure global step related interactions.
+
+        Args:
+            current_step (Optional[int]): 当前选中的全局步骤。
+                                          The currently selected global step.
+            all_available_steps (Optional[List[int]]): 此Trial中所有可用的全局步骤列表 (已排序)。
+                                                       A sorted list of all available global steps in this Trial.
+            on_step_change_request_callback (Optional[Callable[[int], None]]):
+                当组件希望更改全局步骤时调用的回调函数。
+                Callback function to be called when the component wishes to change the global step.
+        """
+        self._current_global_step = current_step
+        self._all_available_steps = sorted(list(set(all_available_steps))) if all_available_steps else []
+        self._on_global_step_change_request = on_step_change_request_callback
+
+    def _request_global_step_change(self, new_step: int) -> None:
+        """
+        组件内部调用此方法来请求更改全局共享的global_step。
+        Component calls this internally to request a change to the shared global_step.
+        """
+        if self._on_global_step_change_request:
+            if self._all_available_steps and new_step not in self._all_available_steps:
+                # 如果请求的步骤无效，可以选择寻找最近的有效步骤或忽略
+                # If requested step is invalid, can choose to find nearest valid step or ignore
+                # For now, let's assume the interaction (e.g., chart click) provides a valid step from its data
+                print(f"警告: 组件 {self.component_instance_id} 请求了一个无效的全局步骤 {new_step}。")
+                # Potentially find closest:
+                # if self._all_available_steps:
+                #     new_step = min(self._all_available_steps, key=lambda x: abs(x - new_step))
+
+            self._on_global_step_change_request(new_step)
+        else:
+            st.warning(f"组件 {self.component_instance_id}: 尝试更改全局步骤，但未设置回调。")
+
+    def _get_closest_available_step(self, target_step: Optional[int]) -> Optional[int]:
+        """
+        如果目标步骤无效或数据在该步骤不可用，则查找最近的可用步骤。
+        Finds the closest available step if the target step is invalid or data isn't available at that step.
+        组件的子类可以覆盖此逻辑以适应其特定的数据可用性。
+        Subclasses can override this logic for their specific data availability.
+        """
+        if target_step is None:
+            return None
+        if not self._all_available_steps:
+            return None
+        if target_step in self._all_available_steps:
+            return target_step
+        
+        # 寻找最接近的步骤 (简单的实现)
+        # Find the closest step (simple implementation)
+        try:
+            closest = min(self._all_available_steps, key=lambda x: abs(x - target_step))
+            return closest
+        except ValueError: # _all_available_steps为空
+            return None
+
+
+    @abstractmethod
+    def load_data(self) -> None:
+        """
+        加载此组件渲染所需的数据。
+        Load data required by this component for rendering.
+        实现者应使用 self._get_data_asset_path() 来获取数据文件路径。
+        Implementers should use self._get_data_asset_path() to get data file paths.
+        数据加载后通常存储在实例变量中。
+        Loaded data is typically stored in instance variables.
+        """
+        pass
+
+    @abstractmethod
+    def render(self) -> None:
+        """
+        将组件渲染为Streamlit UI元素。
+        Renders the component as Streamlit UI elements.
+        应使用 self._current_global_step (可能通过 self._get_closest_available_step 调整) 来显示对应步骤的数据。
+        Should use self._current_global_step (possibly adjusted by self._get_closest_available_step)
+        to display data for the corresponding step.
+        任何可以触发全局步骤更改的交互都应调用 self._request_global_step_change()。
+        Any interaction that can trigger a global step change should call self._request_global_step_change().
+        """
+        pass
+
+    @classmethod
+    @abstractmethod
+    def can_handle_data_types(cls, data_type_names: List[str]) -> bool:
+        """
+        类方法：判断此组件类型是否能处理清单中声明的一个或多个数据类型。
+        Class method: Determines if this component type can handle one or more data types
+        declared in the manifest.
+
+        Args:
+            data_type_names (List[str]): 从数据资产清单中获取的数据类型名称列表。
+                                         A list of data type names from a data asset manifest.
+                                         (通常，主应用会为每个数据资产调用此方法，列表只包含一个元素)
+                                         (Usually, the main app calls this for each data asset, so the list has one element)
+
+        Returns:
+            bool: True 如果此组件可以处理至少一种给定的数据类型。
+                  True if this component can handle at least one of the given data types.
+        """
+        pass
+
+    @classmethod
+    def get_display_name(cls) -> str:
+        """
+        类方法：返回此组件类型的用户友好显示名称。
+        Class method: Returns a user-friendly display name for this component type.
+        """
+        # 简单的实现：将类名从CamelCase转换为带空格的标题
+        # Simple implementation: Convert CamelCase class name to space-separated title
+        name = cls.__name__
+        if name.endswith("Visualizer"):
+            name = name[:-len("Visualizer")]
+        s1 = VISUALIZER_REGISTRY.get(name, name) # Fallback to class name if not in registry (should not happen with decorator)
+        # Add spaces before capital letters (simple version)
+        import re
+        return re.sub(r'(?<!^)(?=[A-Z])', ' ', s1)
+
+
+    def save_component_config(self) -> None:
+        """
+        将当前组件的特定配置 (self.config) 保存到其私有存储路径。
+        Saves the current component-specific configuration (self.config) to its private storage path.
+        """
+        config_file = self.component_private_storage_path / "_component_config.toml"
+        try:
+            import tomli_w # 确保已安装 Ensure tomli_w is installed
+            with open(config_file, "wb") as f:
+                tomli_w.dump(self.config, f)
+            # st.toast(f"组件 '{self.component_instance_id}' 配置已保存。")
+        except Exception as e:
+            st.error(f"保存组件 '{self.component_instance_id}' 配置失败: {e}")
+
+    def load_component_config(self) -> None:
+        """
+        从其私有存储路径加载组件的特定配置，并更新 self.config。
+        Loads the component-specific configuration from its private storage path and updates self.config.
+        """
+        config_file = self.component_private_storage_path / "_component_config.toml"
+        if config_file.exists():
+            try:
+                import tomli # 确保已安装 Ensure tomli is installed
+                with open(config_file, "rb") as f:
+                    loaded_config = tomli.load(f)
+                self.config.update(loaded_config) # 合并加载的配置 Merge loaded config
+                # st.toast(f"组件 '{self.component_instance_id}' 配置已加载。")
+            except Exception as e:
+                st.error(f"加载组件 '{self.component_instance_id}' 配置失败: {e}")
+

src/visualizers/ide_app.py

@@ -0,0 +1,303 @@
+# src/debugger/ide_app.py
+import streamlit as st
+from pathlib import Path
+import tempfile
+import json
+import shutil
+from typing import Dict, Any, Optional, Type, List
+import tomli # 确保导入 tomli Ensure tomli is imported
+
+# 动态确定根目录，以便能够导入src下的模块
+# Dynamically determine root directory to import modules from src
+try:
+    current_file_path = Path(__file__).resolve()
+    # 假设 ide_app.py 在 src/debugger/ 目录下
+    # Assumes ide_app.py is in src/debugger/
+    # src_path = current_file_path.parent.parent 
+    # import sys
+    # if str(src_path) not in sys.path:
+    #    sys.path.insert(0, str(src_path))
+except NameError:
+    # project_root = Path(".") # 默认为当前工作目录
+    pass # 在某些环境中 __file__ 可能未定义 In some environments __file__ might be undefined
+
+try:
+    from visualizers.base_visualizer import (
+        VISUALIZER_REGISTRY,
+        get_visualizer_class,
+        VisualizationComponent
+    )
+    # 确保所有组件都被导入和注册
+    # Ensure all components are imported and registered
+    import visualizers.scalar_dashboard_visualizer 
+
+except ImportError as e:
+    st.error(
+        "错误：无法导入可视化组件模块。请确保此IDE应用位于正确的项目结构中，"
+        f"并且 `visualizers` 目录及其内容可访问。\n详细信息: {e}"
+        "Error: Could not import visualization component modules. Ensure this IDE app is in the correct "
+        f"project structure and the `visualizers` directory and its contents are accessible.\nDetails: {e}"
+    )
+    st.stop()
+
+# --- 应用标题和配置 ---
+st.set_page_config(layout="wide", page_title="Flowillower - 组件IDE (Component IDE)")
+st.title("🔬 Flowillower - 可视化组件IDE (Visualization Component IDE)")
+st.markdown("在此环境中独立测试、调试和预览您的可视化组件。")
+
+# --- 会话状态初始化 ---
+if "selected_visualizer_type_name" not in st.session_state:
+    st.session_state.selected_visualizer_type_name = None
+if "component_instance_id" not in st.session_state:
+    st.session_state.component_instance_id = "test_instance_001"
+if "trial_root_path_str" not in st.session_state:
+    st.session_state.trial_root_path_str = tempfile.mkdtemp(prefix="flowillower_ide_trial_")
+if "component_specific_config_str" not in st.session_state:
+    st.session_state.component_specific_config_str = "{}" 
+if "active_visualizer_instance" not in st.session_state:
+    st.session_state.active_visualizer_instance = None
+if "generated_data_sources_map" not in st.session_state: 
+    st.session_state.generated_data_sources_map = None
+if "current_simulated_global_step" not in st.session_state:
+    st.session_state.current_simulated_global_step = 0 # 默认值 Default value
+if "all_simulated_steps" not in st.session_state: 
+    st.session_state.all_simulated_steps = []
+
+
+def cleanup_temp_dir(path_str):
+    try:
+        if path_str and Path(path_str).exists() and "flowillower_ide_trial_" in path_str: 
+            shutil.rmtree(path_str)
+            st.toast(f"临时目录已清理: {path_str}")
+    except Exception as e:
+        st.warning(f"清理临时目录失败 {path_str}: {e}")
+
+with st.sidebar:
+    st.header("组件选择与配置")
+
+    registered_type_names = list(VISUALIZER_REGISTRY.keys())
+    if not registered_type_names:
+        st.error("错误：没有已注册的可视化组件类型。")
+        st.stop()
+
+    if st.session_state.selected_visualizer_type_name is None and registered_type_names:
+        st.session_state.selected_visualizer_type_name = registered_type_names[0]
+
+    st.session_state.selected_visualizer_type_name = st.selectbox(
+        "选择可视化组件类型",
+        options=registered_type_names,
+        index=registered_type_names.index(st.session_state.selected_visualizer_type_name)
+              if st.session_state.selected_visualizer_type_name in registered_type_names else 0,
+        help="选择您想要测试的可视化组件。"
+    )
+
+    SelectedVisualizerClass: Optional[Type[VisualizationComponent]] = get_visualizer_class(st.session_state.selected_visualizer_type_name)
+
+    if SelectedVisualizerClass:
+        st.caption(f"显示名称: `{SelectedVisualizerClass.get_display_name()}`")
+    else:
+        st.error(f"无法加载组件类 '{st.session_state.selected_visualizer_type_name}'。")
+        st.stop()
+
+    st.session_state.component_instance_id = st.text_input(
+        "组件实例ID", value=st.session_state.component_instance_id
+    )
+    st.markdown(f"**临时Trial根路径:** `{st.session_state.trial_root_path_str}`")
+    
+    example_data_target_dir = Path(st.session_state.trial_root_path_str) / "example_assets_for_ide"
+    
+    if st.button("生成示例数据"):
+        if SelectedVisualizerClass:
+            try:
+                if example_data_target_dir.exists():
+                    shutil.rmtree(example_data_target_dir)
+                example_data_target_dir.mkdir(parents=True, exist_ok=True)
+
+                st.session_state.generated_data_sources_map = SelectedVisualizerClass.generate_example_data(
+                    example_data_path=example_data_target_dir
+                )
+                st.success(f"'{SelectedVisualizerClass.get_display_name()}' 的示例数据已生成。")
+                
+                temp_all_steps = set()
+                if st.session_state.generated_data_sources_map:
+                    for ds_name, ds_info in st.session_state.generated_data_sources_map.items():
+                        if "path" in ds_info:
+                            try:
+                                # 路径是相对于 trial_root_path 的
+                                # Path is relative to trial_root_path
+                                full_path = Path(st.session_state.trial_root_path_str) / ds_info["path"]
+                                if full_path.exists() and full_path.suffix == ".toml":
+                                    with open(full_path, "rb") as f:
+                                        d = tomli.load(f)
+                                    if "metrics" in d and isinstance(d["metrics"], list):
+                                        for point in d["metrics"]:
+                                            if "global_step" in point:
+                                                temp_all_steps.add(int(point["global_step"]))
+                            except Exception as e_load:
+                                st.warning(f"解析示例数据中的步骤时出错 ({ds_info['path']}): {e_load}")
+                
+                st.session_state.all_simulated_steps = sorted(list(temp_all_steps))
+                if not st.session_state.all_simulated_steps: # 如果没有解析到步骤，至少放一个0
+                     st.session_state.all_simulated_steps = [0]
+                
+                # 更新 current_simulated_global_step 为有效值
+                # Update current_simulated_global_step to a valid value
+                if st.session_state.all_simulated_steps:
+                     st.session_state.current_simulated_global_step = st.session_state.all_simulated_steps[0]
+                else: # 理论上不会到这里，因为上面保证了至少有[0] Theoretically won't reach here as [0] is guaranteed above
+                     st.session_state.current_simulated_global_step = 0
+                st.rerun() # 重新运行以更新UI中的步骤滑块 Rerun to update step slider in UI
+
+            except Exception as e:
+                st.error(f"生成示例数据失败: {e}")
+                st.exception(e)
+                st.session_state.generated_data_sources_map = None
+        else:
+            st.warning("请先选择一个组件类型。")
+
+    st.session_state.component_specific_config_str = st.text_area(
+        "组件特定配置 (JSON)", value=st.session_state.component_specific_config_str, height=100
+    )
+
+    if st.button("🚀 实例化组件", type="primary"):
+        if SelectedVisualizerClass and st.session_state.component_instance_id and st.session_state.generated_data_sources_map:
+            try:
+                specific_config = json.loads(st.session_state.component_specific_config_str)
+                st.session_state.active_visualizer_instance = SelectedVisualizerClass(
+                    component_instance_id=st.session_state.component_instance_id,
+                    trial_root_path=Path(st.session_state.trial_root_path_str),
+                    data_sources_map=st.session_state.generated_data_sources_map,
+                    component_specific_config=specific_config
+                )
+                st.success(f"组件 '{st.session_state.component_instance_id}' 已实例化。")
+                active_viz_instance_for_load = st.session_state.active_visualizer_instance
+                active_viz_instance_for_load.load_data()
+                
+                # 从组件加载数据后获取实际的all_available_steps
+                # Get actual all_available_steps after component loads data
+                if hasattr(active_viz_instance_for_load, '_all_available_steps') and active_viz_instance_for_load._all_available_steps:
+                    st.session_state.all_simulated_steps = active_viz_instance_for_load._all_available_steps
+                    if st.session_state.current_simulated_global_step not in st.session_state.all_simulated_steps:
+                        st.session_state.current_simulated_global_step = st.session_state.all_simulated_steps[0]
+
+                active_viz_instance_for_load.configure_global_step_interaction(
+                    current_step=st.session_state.current_simulated_global_step,
+                    all_available_steps=st.session_state.all_simulated_steps,
+                    on_step_change_request_callback=lambda step: st.session_state.update({"current_simulated_global_step": step})
+                )
+                st.rerun() # 确保UI更新 Ensure UI updates
+
+            except Exception as e:
+                st.error(f"实例化组件失败: {e}")
+                st.exception(e)
+                st.session_state.active_visualizer_instance = None
+        else:
+            st.warning("请先选择组件类型，输入实例ID，并生成示例数据。")
+
+st.header("组件预览与交互")
+active_viz_instance: Optional[VisualizationComponent] = st.session_state.active_visualizer_instance
+
+if active_viz_instance:
+    st.markdown(f"**当前活动组件:** `{active_viz_instance.component_instance_id}` "
+                f"(类型: `{SelectedVisualizerClass.get_display_name() if SelectedVisualizerClass else 'N/A'}`)")
+    st.markdown(f"**Trial根路径:** `{active_viz_instance.trial_root_path}`")
+    
+    st.markdown("---")
+    st.subheader("全局步骤模拟")
+    col_step1, col_step2 = st.columns([3,1])
+    
+    # --- 全局步骤模拟 (FIXED RangeError) ---
+    # --- Global Step Simulation (FIXED RangeError) ---
+    current_step_for_ui = st.session_state.current_simulated_global_step
+    all_steps_for_ui = st.session_state.all_simulated_steps
+
+    # 确保 current_step_for_ui 在 all_steps_for_ui 中 (如果 all_steps_for_ui 非空)
+    # Ensure current_step_for_ui is in all_steps_for_ui (if all_steps_for_ui is not empty)
+    if all_steps_for_ui and current_step_for_ui not in all_steps_for_ui:
+        # 尝试寻找最近的，或者直接用第一个/最后一个
+        # Try to find the closest, or just use the first/last
+        current_step_for_ui = min(all_steps_for_ui, key=lambda x:abs(x-current_step_for_ui)) if all_steps_for_ui else 0
+        # st.session_state.current_simulated_global_step = current_step_for_ui # 避免在渲染中直接修改会话状态 Avoid direct session state modification in render path
+
+    with col_step1:
+        if all_steps_for_ui:
+            if len(all_steps_for_ui) == 1:
+                st.markdown(f"当前模拟全局步骤: **{all_steps_for_ui[0]}** (只有一步可用)")
+                # 如果只有一步，确保会话状态也正确
+                # If only one step, ensure session state is also correct
+                if st.session_state.current_simulated_global_step != all_steps_for_ui[0]:
+                    st.session_state.current_simulated_global_step = all_steps_for_ui[0]
+                    # st.rerun() # 可能会导致循环，让 configure_global_step_interaction 处理 Might cause loop, let configure_global_step_interaction handle
+                new_sim_step = all_steps_for_ui[0] # 保持一致 Keep consistent
+            else: # 多于一个步骤 More than one step
+                new_sim_step = st.select_slider(
+                    "当前模拟全局步骤",
+                    options=all_steps_for_ui,
+                    value=current_step_for_ui, # 使用已验证的值 Use validated value
+                    key="sim_step_slider_corrected"
+                )
+        else: # 没有从数据中解析到步骤 No steps parsed from data
+            new_sim_step = st.number_input(
+                "当前模拟全局步骤 (无可用步骤)",
+                value=current_step_for_ui, 
+                key="sim_step_input_empty_corrected"
+            )
+    
+    # 如果用户通过UI更改了步骤，则更新会话状态
+    # If user changed step via UI, update session state
+    if new_sim_step != st.session_state.current_simulated_global_step:
+        st.session_state.current_simulated_global_step = new_sim_step
+        # st.rerun() # select_slider/number_input 通常会在值变化时自动 rerun
+
+    # 每次渲染都更新组件的步骤信息
+    # Update component's step info on every render
+    active_viz_instance.configure_global_step_interaction(
+        current_step=st.session_state.current_simulated_global_step,
+        all_available_steps=all_steps_for_ui, # 使用从数据加载的步骤 Use steps loaded from data
+        on_step_change_request_callback=lambda step: st.session_state.update({"current_simulated_global_step": step}) # 更新会话状态，Streamlit会自动rerun
+    )
+    
+    with col_step2:
+        if st.button("🔄 重新加载数据"):
+            try:
+                active_viz_instance.load_data()
+                st.toast("组件数据已重新加载。")
+                # 重新加载数据后，可能需要更新 all_simulated_steps
+                # After reloading data, all_simulated_steps might need an update
+                if hasattr(active_viz_instance, '_all_available_steps') and active_viz_instance._all_available_steps:
+                     st.session_state.all_simulated_steps = active_viz_instance._all_available_steps
+                     # 确保当前步骤仍然有效
+                     # Ensure current step is still valid
+                     if st.session_state.current_simulated_global_step not in st.session_state.all_simulated_steps:
+                         st.session_state.current_simulated_global_step = st.session_state.all_simulated_steps[0] if st.session_state.all_simulated_steps else 0
+                
+                active_viz_instance.configure_global_step_interaction( # 再次配置以防步骤列表变化 Reconfigure in case step list changed
+                    current_step=st.session_state.current_simulated_global_step,
+                    all_available_steps=st.session_state.all_simulated_steps,
+                    on_step_change_request_callback=lambda step: st.session_state.update({"current_simulated_global_step": step})
+                )
+                st.rerun() # 强制刷新UI Force UI refresh
+            except Exception as e:
+                st.error(f"重新加载数据失败: {e}")
+
+    st.markdown("---")
+    st.subheader("渲染输出")
+    try:
+        with st.container(border=True):
+            active_viz_instance.render()
+    except Exception as e:
+        st.error(f"渲染组件 '{active_viz_instance.component_instance_id}' 时出错: {e}")
+        st.exception(e)
+else:
+    st.info("请在侧边栏中选择一个组件类型，生成示例数据，然后点击“实例化组件”以开始调试。")
+
+st.sidebar.markdown("---")
+st.sidebar.caption(f"IDE 会话临时路径: {st.session_state.trial_root_path_str}")
+if st.sidebar.button("清理当前会话的临时Trial目录"):
+    cleanup_temp_dir(st.session_state.trial_root_path_str)
+    st.session_state.trial_root_path_str = tempfile.mkdtemp(prefix="flowillower_ide_trial_")
+    st.session_state.active_visualizer_instance = None
+    st.session_state.generated_data_sources_map = None
+    st.session_state.all_simulated_steps = []
+    st.session_state.current_simulated_global_step = 0
+    st.rerun()

src/visualizers/scalar_dashboard_visualizer.py

@@ -0,0 +1,333 @@
+# src/visualizers/scalar_dashboard_visualizer.py
+import streamlit as st
+import pandas as pd
+import plotly.graph_objects as go
+import plotly.express as px
+import tomli
+import tomli_w
+from pathlib import Path
+from typing import Dict, Any, Optional, List, Tuple
+
+from .base_visualizer import VisualizationComponent, register_visualizer
+
+@register_visualizer(name="scalar_metrics_dashboard")
+class ScalarMetricsDashboardVisualizer(VisualizationComponent):
+    """
+    一个用于显示多个标量指标（每个指标可能包含多个track）的仪表盘组件。
+    它会为每个指标在选定的global_step显示st.metric摘要，并绘制一个Plotly折线图。
+    A dashboard component to display multiple scalar metrics, each potentially with multiple tracks.
+    It shows st.metric summaries for the selected global_step and a Plotly line chart for each metric.
+    """
+
+    _raw_data: Optional[pd.DataFrame] = None
+    _processed_metrics_data: Dict[str, pd.DataFrame] = None 
+
+    DEFAULT_CHARTS_PER_ROW = 2
+
+    def __init__(self,
+                 component_instance_id: str,
+                 trial_root_path: Path,
+                 data_sources_map: Dict[str, Dict[str, Any]],
+                 component_specific_config: Dict[str, Any] = None):
+        super().__init__(component_instance_id, trial_root_path, data_sources_map, component_specific_config)
+        self._raw_data = None
+        self._processed_metrics_data = {}
+        self.load_component_config() 
+
+        self.charts_per_row = self.config.get("charts_per_row", self.DEFAULT_CHARTS_PER_ROW)
+        self.chart_height = self.config.get("chart_height", 400)
+
+    @classmethod
+    def can_handle_data_types(cls, data_type_names: List[str]) -> bool:
+        return "multi_metric_multi_track_scalars" in data_type_names
+
+    @classmethod
+    def generate_example_data(cls, example_data_path: Path, # This path is like .../trial_root/example_assets_for_ide
+                              data_sources_config: Optional[Dict[str, Dict[str, Any]]] = None
+                             ) -> Dict[str, Dict[str, Any]]:
+        example_data_path.mkdir(parents=True, exist_ok=True)
+        metrics_file_name = "example_scalar_metrics.toml"
+        # 文件实际写入位置: example_data_path / metrics_file_name
+        # Actual file write location: example_data_path / metrics_file_name
+        metrics_file_full_path = example_data_path / metrics_file_name
+
+        data_points = []
+        for step in range(20):
+            data_points.append({"global_step": step, "track": "train", "loss": 1.0 / (step + 1) + 0.1, "accuracy": 0.6 + step * 0.015})
+            data_points.append({"global_step": step, "track": "validation", "loss": 1.0 / (step + 1) + 0.2, "accuracy": 0.55 + step * 0.01})
+            if step % 5 == 0:
+                 data_points.append({"global_step": step, "track": "system", "learning_rate": 0.001 * (0.9**step)})
+
+        try:
+            with open(metrics_file_full_path, "wb") as f:
+                tomli_w.dump({"metrics": data_points}, f)
+        except Exception as e:
+            st.error(f"生成示例数据失败: {e}")
+            raise
+        
+        # *** 修正点 (FIXED POINT) ***
+        # 返回的路径应该是相对于 trial_root_path 的。
+        # The returned path should be relative to trial_root_path.
+        # example_data_path 的父目录是 trial_root_path。
+        # The parent of example_data_path is trial_root_path in the IDE's context.
+        # 所以，相对路径是 example_data_path 的名称（即 "example_assets_for_ide"）加上文件名。
+        # So, the relative path is the name of example_data_path (i.e., "example_assets_for_ide") plus the filename.
+        # path_relative_to_trial_root = example_data_path.name / metrics_file_name
+        # 更稳健的方式是，如果 example_data_path 是绝对路径，而我们需要相对于 trial_root_path 的路径，
+        # 并且我们知道 trial_root_path 是 example_data_path 的父目录（或更早的祖先）。
+        # A more robust way, if example_data_path is absolute, and we need path relative to trial_root_path,
+        # and we know trial_root_path is a parent (or earlier ancestor) of example_data_path.
+        # 在IDE的上下文中，example_data_path = trial_root_path / "example_assets_for_ide"
+        # In the IDE's context, example_data_path = trial_root_path / "example_assets_for_ide"
+        # 所以，相对于 trial_root_path 的路径就是 "example_assets_for_ide" / metrics_file_name
+        # So, path relative to trial_root_path is "example_assets_for_ide" / metrics_file_name
+        
+        path_for_manifest = Path(example_data_path.name) / metrics_file_name
+
+        return {
+            "main_metrics_source": { 
+                "asset_id": "example_metrics_dashboard_data",
+                "data_type": "multi_metric_multi_track_scalars", 
+                "path": str(path_for_manifest), # 使用修正后的相对路径 Use the corrected relative path
+                "display_name": "示例综合指标数据 (Example Comprehensive Metrics)"
+            }
+        }
+
+    def load_data(self) -> None:
+        data_asset_path = self._get_data_asset_path("main_metrics_source")
+        if data_asset_path is None or not data_asset_path.exists():
+            st.warning(f"组件 {self.component_instance_id}: 未找到数据源 'main_metrics_source' 或路径无效: {data_asset_path}")
+            self._raw_data = pd.DataFrame() 
+            self._processed_metrics_data = {}
+            return
+
+        try:
+            with open(data_asset_path, "rb") as f:
+                data = tomli.load(f)
+            
+            metrics_list = data.get("metrics", [])
+            if not metrics_list:
+                self._raw_data = pd.DataFrame()
+            else:
+                self._raw_data = pd.DataFrame(metrics_list)
+            
+            self._process_raw_data()
+
+        except Exception as e:
+            st.error(f"组件 {self.component_instance_id}: 加载数据 '{data_asset_path}' 失败: {e}")
+            self._raw_data = pd.DataFrame()
+            self._processed_metrics_data = {}
+
+    def _process_raw_data(self) -> None:
+        self._processed_metrics_data = {}
+        if self._raw_data is None or self._raw_data.empty:
+            return
+
+        if "global_step" not in self._raw_data.columns:
+            st.warning(f"组件 {self.component_instance_id}: 数据缺少 'global_step' 列。")
+            return
+
+        potential_metric_cols = [
+            col for col in self._raw_data.columns if col not in ["global_step", "track"]
+        ]
+
+        for metric_col_name in potential_metric_cols:
+            metric_df_cols = ["global_step", metric_col_name]
+            if "track" in self._raw_data.columns:
+                 metric_df_cols.append("track")
+            
+            # 确保所有需要的列都存在于self._raw_data中
+            # Ensure all needed columns exist in self._raw_data
+            if not all(col in self._raw_data.columns for col in metric_df_cols):
+                # st.warning(f"组件 {self.component_instance_id}: 指标 '{metric_col_name}' 的原始数据缺少某些列: {metric_df_cols}")
+                continue
+
+            metric_df = self._raw_data[metric_df_cols].copy()
+            
+            if "track" not in metric_df.columns: # 如果原始数据就没有track列
+                metric_df["track"] = "default" 
+            
+            metric_df.rename(columns={metric_col_name: "value"}, inplace=True)
+            metric_df["value"] = pd.to_numeric(metric_df["value"], errors='coerce')
+            metric_df["global_step"] = pd.to_numeric(metric_df["global_step"], errors='coerce')
+            metric_df.dropna(subset=["value", "global_step"], inplace=True) 
+            
+            if not metric_df.empty:
+                metric_df = metric_df.sort_values(by=["track", "global_step"]).reset_index(drop=True)
+                self._processed_metrics_data[metric_col_name] = metric_df
+        
+        if self._all_available_steps is None and not self._raw_data.empty and "global_step" in self._raw_data.columns:
+            valid_steps = pd.to_numeric(self._raw_data["global_step"], errors='coerce').dropna().astype(int).unique()
+            self._all_available_steps = sorted(list(valid_steps))
+
+
+    def _render_metric_summary(self, metric_name: str, metric_df: pd.DataFrame, target_step: Optional[int]):
+        if target_step is None and self._all_available_steps: # 如果target_step是None，默认用最后一个step
+            target_step = self._all_available_steps[-1]
+        elif target_step is None or not self._all_available_steps:
+            st.metric(label=f"{metric_name}", value="无可用步骤", delta=None)
+            return
+
+        actual_display_step = self._get_closest_available_step(target_step)
+        if actual_display_step is None: 
+             st.metric(label=f"{metric_name}", value="无数据", delta=None)
+             return
+
+        all_tracks = sorted(list(metric_df["track"].unique()))
+        num_tracks = len(all_tracks)
+        if num_tracks == 0: return 
+
+        cols = st.columns(num_tracks) if num_tracks > 1 else [st.container()] 
+
+        for idx, track_name in enumerate(all_tracks):
+            with cols[idx if num_tracks > 1 else 0]:
+                track_data = metric_df[metric_df["track"] == track_name]
+                if track_data.empty:
+                    st.metric(label=f"{metric_name} ({track_name})", value="无数据", delta=None)
+                    continue
+
+                current_value = None
+                delta_value = None
+                step_for_current_value = actual_display_step 
+
+                current_step_data = track_data[track_data["global_step"] == step_for_current_value]
+                if current_step_data.empty:
+                    prev_steps_for_track = track_data[track_data["global_step"] <= step_for_current_value]["global_step"]
+                    if not prev_steps_for_track.empty:
+                        step_for_current_value = prev_steps_for_track.max()
+                        current_step_data = track_data[track_data["global_step"] == step_for_current_value]
+                
+                if not current_step_data.empty:
+                    current_value = current_step_data["value"].iloc[0]
+                    prev_steps_for_delta = track_data[track_data["global_step"] < step_for_current_value]["global_step"]
+                    if not prev_steps_for_delta.empty:
+                        step_for_prev_value = prev_steps_for_delta.max()
+                        prev_value_data = track_data[track_data["global_step"] == step_for_prev_value]
+                        if not prev_value_data.empty:
+                            prev_value = prev_value_data["value"].iloc[0]
+                            delta_value = current_value - prev_value
+                
+                metric_label = f"{metric_name} ({track_name})"
+                if step_for_current_value != target_step and current_value is not None: # 仅当找到的值的步骤与目标步骤不同时才显示
+                    metric_label += f" @S{int(step_for_current_value)}"
+
+                st.metric(
+                    label=metric_label,
+                    value=f"{current_value:.4f}" if current_value is not None else "无数据",
+                    delta=f"{delta_value:.4f}" if delta_value is not None and current_value is not None else None,
+                )
+
+    def _render_plotly_chart(self, metric_name: str, metric_df: pd.DataFrame, chart_key: str):
+        fig = go.Figure()
+        all_tracks = sorted(list(metric_df["track"].unique()))
+        colors = px.colors.qualitative.Plotly 
+
+        for i, track_name in enumerate(all_tracks):
+            track_data = metric_df[metric_df["track"] == track_name]
+            fig.add_trace(go.Scatter(
+                x=track_data["global_step"],
+                y=track_data["value"],
+                mode="lines+markers",
+                name=track_name,
+                line=dict(color=colors[i % len(colors)]),
+                marker=dict(size=6, color=colors[i % len(colors)], line=dict(width=1, color="white")),
+                customdata=track_data[["global_step", "value", "track"]], 
+                hovertemplate="<b>%{customdata[2]}</b><br>Step: %{customdata[0]}<br>Value: %{customdata[1]:.4f}<extra></extra>"
+            ))
+
+        current_step_to_highlight = self._get_closest_available_step(self._current_global_step)
+        if current_step_to_highlight is not None:
+            fig.add_vline(
+                x=current_step_to_highlight,
+                line_width=1.5, line_dash="solid", line_color="firebrick", opacity=0.7
+            )
+
+        fig.update_layout(
+            xaxis_title="Global Step",
+            yaxis_title=metric_name, 
+            height=self.chart_height,
+            margin=dict(l=10, r=10, t=30, b=10), 
+            showlegend=len(all_tracks) > 1,
+            hovermode="closest",
+        )
+        
+        event_data = st.plotly_chart(
+            fig,
+            use_container_width=True,
+            key=chart_key, 
+            on_select="rerun" 
+        )
+        
+        current_selection = st.session_state.get(chart_key, {}).get("selection")
+        if current_selection and current_selection.get("points"):
+            clicked_point = current_selection["points"][0]
+            if "customdata" in clicked_point and isinstance(clicked_point["customdata"], list):
+                clicked_global_step = int(clicked_point["customdata"][0])
+                last_clicked_step_key = f"{chart_key}_last_clicked_step"
+                if st.session_state.get(last_clicked_step_key) != clicked_global_step:
+                    st.session_state[last_clicked_step_key] = clicked_global_step
+                    self._request_global_step_change(clicked_global_step)
+        elif current_selection and not current_selection.get("points"): 
+            st.session_state[f"{chart_key}_last_clicked_step"] = None
+
+
+    def render_settings_ui(self):
+        st.markdown("##### 组件设置 (Component Settings)")
+        new_charts_per_row = st.slider(
+            "每行图表数 (Charts per row)", 1, 4, self.charts_per_row,
+            key=f"{self.component_instance_id}_charts_per_row"
+        )
+        if new_charts_per_row != self.charts_per_row:
+            self.charts_per_row = new_charts_per_row
+            self.config["charts_per_row"] = new_charts_per_row
+            self.save_component_config() 
+            st.rerun() 
+        
+        new_chart_height = st.number_input(
+            "图表高度 (Chart Height)", min_value=200, max_value=1000, step=50,
+            value=self.chart_height,
+            key=f"{self.component_instance_id}_chart_height"
+        )
+        if new_chart_height != self.chart_height:
+            self.chart_height = new_chart_height
+            self.config["chart_height"] = new_chart_height
+            self.save_component_config()
+            st.rerun()
+
+
+    def render(self) -> None:
+        if self._processed_metrics_data is None or not self._processed_metrics_data:
+            if self._raw_data is None: # 尝试加载一次
+                self.load_data()
+            # 再次检查
+            if self._processed_metrics_data is None or not self._processed_metrics_data:
+                st.info(f"组件 {self.component_instance_id}: 没有处理好的指标数据可供显示。请先加载数据或生成示例数据。")
+                st.caption("如果已生成示例数据但仍看到此消息，请检查数据路径和格式是否正确。If example data was generated but you still see this, check data paths and format.")
+                return
+        
+        with st.expander("图表显示设置 (Chart Display Settings)", expanded=False):
+            self.render_settings_ui()
+
+        metric_names_to_display = sorted(list(self._processed_metrics_data.keys()))
+        if not metric_names_to_display:
+            st.caption("没有可显示的指标。No metrics to display.")
+            return
+
+        num_metrics = len(metric_names_to_display)
+        cols_per_row = self.charts_per_row
+
+        for i in range(0, num_metrics, cols_per_row):
+            metric_chunk = metric_names_to_display[i : i + cols_per_row]
+            actual_cols_for_this_row = len(metric_chunk)
+            chart_cols = st.columns(actual_cols_for_this_row)
+            
+            for j, metric_name in enumerate(metric_chunk):
+                with chart_cols[j]:
+                    metric_df = self._processed_metrics_data[metric_name]
+                    
+                    with st.container(border=True, height=self.chart_height + 200): # 增加容器高度以容纳metric和图表
+                        st.subheader(metric_name)
+                        self._render_metric_summary(metric_name, metric_df, self._current_global_step)
+                        st.markdown("---") 
+                        chart_key = f"plotly_{self.component_instance_id}_{metric_name}"
+                        self._render_plotly_chart(metric_name, metric_df, chart_key)