Refactor text metrics handling and improve state management

client/src/index.html

@@ -68,7 +68,7 @@
                                     <span id="metric_tokens">0 tokens</span>
                                 </div>
                                 <div id="metric_total_surprisal" class="text-metrics-secondary">总surprisal = 0 bits</div>
-                                <div id="metric_model" class="text-metrics-secondary is-hidden">model: </div>
+                                <div id="metric_model" class="text-metrics-secondary">model: </div>
                             </div>
                             <div class="button-right">
                                 <button id="save_demo_btn" class="primary-btn inactive">Upload</button>

client/src/ts/appInitializer.ts

@@ -16,7 +16,7 @@ export interface CommonAppContext {
     api: TextAnalysisAPI;
     surprisalColorScale: (value: number) => string;
     textEncoder: TextEncoder;
-    totalSurprisalFormat: (n: number) => string;
+    totalSurprisalFormat: (n: number | null) => string;
 }
 
 /**
@@ -29,12 +29,13 @@ export function initializeCommonApp(apiPrefix: string = '', element?: Element):
     // 使用传入的元素或默认 body 元素
     const targetElement = element || document.body;
     
+    const format = d3.format('.2f');
     return {
         eventHandler: new SimpleEventHandler(targetElement),
         api: new TextAnalysisAPI(apiPrefix),
         surprisalColorScale: createSurprisalColorScale(),
         textEncoder: new TextEncoder(),
-        totalSurprisalFormat: d3.format('.2f')
+        totalSurprisalFormat: (n: number | null) => n !== null && Number.isFinite(n) ? format(n) : String(n)
     };
 }
 

client/src/ts/controllers/textInputController.ts

@@ -25,7 +25,7 @@ export type TextInputControllerOptions = {
     saveBtn: d3.Selection<any, unknown, any, any>;
     pasteBtn: d3.Selection<any, unknown, any, any>;
     textEncoder: TextEncoder | null;
-    totalSurprisalFormat: (value: number) => string;
+    totalSurprisalFormat: (value: number | null) => string;
     showAlertDialog: (title: string, message: string) => void;
 };
 
@@ -83,74 +83,42 @@ export class TextInputController {
     }
 
     /**
-     * 隐藏文本指标
-     */
-    public hideTextMetrics(): void {
-        if (!this.options.textMetrics.empty()) {
-            this.options.textMetrics.classed('is-hidden', true);
-        }
-        // 同时隐藏模型显示
-        this.updateModelDisplay(null);
-    }
-
-    /**
-     * 更新文本指标显示
+     * 更新文本指标内容（包括模型显示，不控制显示/隐藏，显示/隐藏由 AppStateManager 统一管理）
+     * @param stats 统计数据，为 null 时不更新统计内容
+     * @param modelName 模型名称，始终显示以反映原始情况
      */
-    public updateTextMetrics(stats: TextStats | null): void {
+    public updateTextMetrics(stats: TextStats | null, modelName?: string | null | undefined): void {
         const {
-            textMetrics,
             metricBytes,
             metricChars,
             metricTokens,
             metricTotalSurprisal,
+            metricModel,
             totalSurprisalFormat
         } = this.options;
 
         // 检查必要的元素是否存在
         if (
-            textMetrics.empty() ||
             metricBytes.empty() ||
             metricChars.empty() ||
             metricTokens.empty() ||
-            metricTotalSurprisal.empty()
+            metricTotalSurprisal.empty() ||
+            metricModel.empty()
         ) {
             return;
         }
 
-        // 如果没有统计数据，隐藏整个指标容器
-        if (!stats) {
-            this.hideTextMetrics();
-            return;
-        }
-
-        // 更新各个指标的内容
-        metricBytes.text(`${stats.byteCount} B`);
-        metricChars.text(`${stats.charCount} 字`);
-        metricTokens.text(`${stats.tokenCount} tokens`);
-        if (stats.totalSurprisal !== null && Number.isFinite(stats.totalSurprisal)) {
+        // 更新统计指标内容（如果有统计数据）
+        if (stats) {
+            metricBytes.text(`${stats.byteCount} B`);
+            metricChars.text(`${stats.charCount} 字`);
+            metricTokens.text(`${stats.tokenCount} tokens`);
             metricTotalSurprisal.text(`总surprisal = ${totalSurprisalFormat(stats.totalSurprisal)} bits`);
-        } else {
-            metricTotalSurprisal.text(`总surprisal = -- bits`);
-        }
-
-        // 显示指标容器
-        textMetrics.classed('is-hidden', false);
-    }
-
-    /**
-     * 更新模型显示
-     * @param modelName 模型名称，始终显示以反映原始情况
-     */
-    public updateModelDisplay(modelName: string | null | undefined): void {
-        const { metricModel } = this.options;
-        
-        // 检查元素是否存在
-        if (metricModel.empty()) {
-            return;
         }
 
-        // 始终显示模型信息，反映原始情况
-        metricModel.text(`model: ${modelName}`).classed('is-hidden', false);
+        // 更新模型显示（始终显示以反映原始情况）
+        // 显示/隐藏由 AppStateManager 通过 textMetrics 容器统一管理
+        metricModel.text(`model: ${modelName}`);
     }
 
     /**

client/src/ts/start.ts

@@ -130,7 +130,8 @@ window.onload = () => {
         submitBtn: submitBtn as d3.Selection<HTMLElement, unknown, HTMLElement, unknown>,
         saveBtn: saveBtn as d3.Selection<HTMLElement, unknown, HTMLElement, unknown>,
         saveLocalBtn: saveLocalBtn as d3.Selection<HTMLElement, unknown, HTMLElement, unknown>,
-        textField: textField as d3.Selection<HTMLElement, unknown, HTMLElement, unknown>
+        textField: textField as d3.Selection<HTMLElement, unknown, HTMLElement, unknown>,
+        textMetrics: textMetrics as d3.Selection<HTMLElement, unknown, HTMLElement, unknown>
     });
 
     // 创建GLTR文本可视化实例
@@ -394,9 +395,7 @@ window.onload = () => {
             },
             onDemoLoading: (loading) => {
                 // loading 状态已经通过 setGlobalLoading 更新，会自动触发按钮状态更新
-                if (loading) {
-                    textInputController.hideTextMetrics();
-                }
+                // 注意：TextMetrics 的显示/隐藏由 AppStateManager 统一管理，不需要手动调用 hideTextMetrics
                 // Clear按钮状态由TextInputController内部自动管理，不需要手动更新
                 appStateManager.setGlobalLoading(loading);
             },
@@ -480,6 +479,7 @@ window.onload = () => {
             
             if (!isMatchingAnalysis) {
                 // 单方面的文本修改（用户输入、预填充等），清除数据标记并重置状态（视为新的分析阶段）
+                // AppStateManager 会自动隐藏 TextMetrics（因为 hasValidData = false），包括模型显示
                 appStateManager.updateState({ 
                     hasValidData: false,
                     dataSource: null,
@@ -488,9 +488,8 @@ window.onload = () => {
                 });
             }
             // 如果是匹配分析结果的文本填入，不清除hasValidData（因为updateFromRequest已经重新设置了）
+            // 也不隐藏统计信息（因为updateFromRequest已经显示了统计信息）
             
-            // 隐藏文本指标
-            textInputController.hideTextMetrics();
             // 清除文件名显示（如果是程序加载，会在 setTextValue 后立即恢复）
             updateFileNameDisplay(null);
         });

client/src/ts/utils/analyzeFlow.ts

@@ -140,10 +140,9 @@ export class AnalyzeFlowManager {
             // 完善错误恢复：恢复所有状态
             this.deps.appStateManager.setIsAnalyzing(false);
             this.deps.appStateManager.setGlobalLoading(false);
-            // 分析失败，清除数据标记（数据无效）
+            // 分析失败，清除数据标记（AppStateManager 会自动隐藏 TextMetrics，包括模型显示）
             // updateState 内部会自动调用 updateButtonStatesFromAppState，不需要额外调用
             this.deps.appStateManager.updateState({ hasValidData: false });
-            this.deps.textInputController.hideTextMetrics();
             const message = error instanceof Error ? error.message : '分析失败';
             showAlertDialog('错误', `分析失败：${message}`);
             return null;

client/src/ts/utils/appStateManager.ts

@@ -27,6 +27,7 @@ export interface ButtonStateDependencies {
     saveBtn: d3.Selection<HTMLElement, unknown, HTMLElement, unknown>;
     saveLocalBtn: d3.Selection<HTMLElement, unknown, HTMLElement, unknown>;
     textField: d3.Selection<HTMLElement, unknown, HTMLElement, unknown>;
+    textMetrics: d3.Selection<HTMLElement, unknown, HTMLElement, unknown>;
 }
 
 /**
@@ -78,7 +79,7 @@ export class AppStateManager {
     }
 
     /**
-     * 根据应用状态计算并更新所有按钮状态
+     * 根据应用状态计算并更新所有按钮状态和UI元素状态
      */
     private updateButtonStatesFromAppState(): void {
         const hasText = (this.deps.textField.property('value') || '').trim().length > 0;
@@ -102,6 +103,11 @@ export class AppStateManager {
             this.state.dataSource === 'local' || 
             this.state.isSavedToLocal
         );
+
+        // TextMetrics显示：有有效数据（hasValidData = true 时，stats 一定不为 null）
+        if (!this.deps.textMetrics.empty()) {
+            this.deps.textMetrics.classed('is-hidden', !this.state.hasValidData);
+        }
     }
 
     /**

client/src/ts/utils/visualizationUpdater.ts

@@ -99,17 +99,10 @@ export class VisualizationUpdater {
     }
 
     /**
-     * 隐藏文本指标
+     * 更新文本指标（包括模型显示）
      */
-    private hideTextMetrics(): void {
-        this.deps.textInputController.hideTextMetrics();
-    }
-
-    /**
-     * 更新文本指标
-     */
-    private updateTextMetrics(stats: TextStats | null): void {
-        this.deps.textInputController.updateTextMetrics(stats);
+    private updateTextMetrics(stats: TextStats | null, modelName?: string | null | undefined): void {
+        this.deps.textInputController.updateTextMetrics(stats, modelName);
     }
 
     /**
@@ -172,9 +165,8 @@ export class VisualizationUpdater {
         const abortDueToInvalidResponse = (message: string) => {
             console.error(message);
             showAlertDialog('错误', message);
-            // 数据无效，清除数据标记
+            // 数据无效，清除数据标记（AppStateManager 会自动隐藏 TextMetrics，包括模型显示）
             this.deps.appStateManager.updateState({ hasValidData: false });
-            this.hideTextMetrics();
         };
 
         try {
@@ -262,11 +254,9 @@ export class VisualizationUpdater {
             this.currentState.currentTokenAvg = textStats.tokenAverage;
             this.currentState.currentTotalSurprisal = textStats.totalSurprisal;
 
-            this.updateTextMetrics(textStats);
-
-            // 更新模型显示（从分析结果中获取实际使用的模型）
+            // 更新文本指标和模型显示（从分析结果中获取实际使用的模型）
             const resultModel = data.request?.model || null;
-            this.deps.textInputController.updateModelDisplay(resultModel);
+            this.updateTextMetrics(textStats, resultModel);
 
             // Analyze 渲染完成后关闭动画，避免拖拽等二次渲染再次播放
             if (!disableAnimation) {
@@ -284,9 +274,8 @@ export class VisualizationUpdater {
             console.error('Error updating visualization:', error);
             this.deps.appStateManager.setIsAnalyzing(false);
             this.deps.appStateManager.setGlobalLoading(false);
-            // analyze失败时，清除数据标记（数据无效）
+            // analyze失败时，清除数据标记（AppStateManager 会自动隐藏 TextMetrics，包括模型显示）
             this.deps.appStateManager.updateState({ hasValidData: false });
-            this.hideTextMetrics();
             showAlertDialog('错误', 'Error rendering visualization. Check console for details.');
             return;
         }