fix(automl): fix feature summary infinite loading for regression runs (#7234)

* fix(automl): fix feature summary infinite loading for regression runs

Co-Authored-By: Claude <noreply@anthropic.com>

* test(automl): add regression test for evaluation artifacts loading state

Covers the isPending vs isLoading bug in useModelEvaluationArtifactsQuery
where disabled queries (e.g. confusion matrix for regression runs) caused
isLoading to be stuck at true indefinitely.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(automl): prevent "-0.00%" display for near-zero feature importance values

Clamp near-zero importance percentages to 0 before formatting, so values
like -1.7e-06 display as "0.00%" instead of "-0.00%".

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* test(automl): assert fetch call counts in evaluation artifacts tests

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(automl): don't style near-zero importance bars as negative

Apply the same near-zero threshold to the bar's m-negative class so it
doesn't appear red when the value displays as 0.00%.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Nicholas Mazzitelli <nickmazz@ca.ibm.com>

Author: 3 people

packages/automl/frontend/src/app/components/run-results/AutomlModelDetailsModal/tabs/FeatureSummaryTab.tsx

@@ -137,10 +137,13 @@ const FeatureSummaryTab: React.FC<TabContentProps> = ({
             entries.map(([name, importance]) => (
               <Tr key={name}>
                 <Td dataLabel="Feature name">{name}</Td>
-                <Td dataLabel="Importance">{(importance * 100).toFixed(2)}%</Td>
+                {/* Clamp near-zero values to 0 to avoid displaying "-0.00%" */}
+                <Td dataLabel="Importance">
+                  {(Math.abs(importance * 100) < 0.005 ? 0 : importance * 100).toFixed(2)}%
+                </Td>
                 <Td>
                   <div
-                    className={`automl-feature-importance-bar${importance !== 0 ? ' m-has-value' : ''}${importance < 0 ? ' m-negative' : ''}`}
+                    className={`automl-feature-importance-bar${importance !== 0 ? ' m-has-value' : ''}${importance < 0 && Math.abs(importance * 100) >= 0.005 ? ' m-negative' : ''}`}
                     data-testid={`feature-importance-bar-${name}`}
                     style={{
                       width: `${maxImportance > 0 ? (Math.abs(importance) / maxImportance) * 100 : 0}%`,

packages/automl/frontend/src/app/components/run-results/AutomlModelDetailsModal/tabs/__tests__/FeatureSummaryTab.spec.tsx

@@ -195,6 +195,29 @@ describe('FeatureSummaryTab', () => {
     expect(featureNames).toEqual(['feat_a', 'feat_c', 'feat_b', 'feat_d']);
   });
 
+  it('should display near-zero negative values as 0.00% instead of -0.00%', () => {
+    const nearZeroImportance: FeatureImportanceData = {
+      importance: {
+        large_positive: 0.75,
+        tiny_negative: -1.7133e-6,
+        tiny_positive: 4.066e-7,
+      },
+    };
+
+    render(<FeatureSummaryTab {...defaultProps} featureImportance={nearZeroImportance} />);
+
+    expect(screen.getByText('75.00%')).toBeInTheDocument();
+    // Near-zero values should show as 0.00%, not -0.00%
+    const rows = screen.getAllByRole('row').slice(1);
+    const percentages = rows.map((row) => within(row).getAllByRole('cell')[1].textContent);
+    expect(percentages).toEqual(['75.00%', '0.00%', '0.00%']);
+    expect(screen.queryByText('-0.00%')).not.toBeInTheDocument();
+
+    // Near-zero negative bar should not be styled as negative
+    const tinyNegativeBar = screen.getByTestId('feature-importance-bar-tiny_negative');
+    expect(tinyNegativeBar).not.toHaveClass('m-negative');
+  });
+
   it('should handle a single feature with only negative importance', () => {
     const singleNegative: FeatureImportanceData = {
       importance: { only_feature: -1.0 },

packages/automl/frontend/src/app/hooks/__tests__/queries.spec.tsx

@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 import {
   useS3GetFileSchemaQuery,
+  useModelEvaluationArtifactsQuery,
   fetchS3File,
   AutomlModelSchema,
   isRawTimeseriesModel,
@@ -512,3 +513,93 @@ describe('isRawTimeseriesModel', () => {
   });
 });
 /* eslint-enable camelcase */
+
+/* eslint-disable camelcase */
+describe('useModelEvaluationArtifactsQuery', () => {
+  const mockFeatureImportance = {
+    importance: { feature_a: 0.8, feature_b: 0.2 },
+  };
+
+  const mockConfusionMatrix = {
+    cat: { cat: 10, dog: 2 },
+    dog: { cat: 1, dog: 15 },
+  };
+
+  /**
+   * Creates a mock fetch response that returns JSON parsed from a Blob,
+   * matching the fetchS3Json → fetchS3File → fetch call chain.
+   */
+  const mockBlobJsonResponse = (data: unknown) => {
+    const json = JSON.stringify(data);
+    return {
+      ok: true,
+      blob: async () => ({ text: async () => json }),
+    };
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should not get stuck loading for regression runs (isClassification=false)', async () => {
+    // The confusion matrix query is disabled for regression. Previously, using
+    // isPending (which is true for disabled queries) caused isLoading to be
+    // stuck at true. The fix uses isLoading instead.
+    (global.fetch as jest.Mock).mockResolvedValueOnce(mockBlobJsonResponse(mockFeatureImportance));
+
+    const { result } = renderHook(
+      () => useModelEvaluationArtifactsQuery('test-ns', 'models/best/', false),
+      { wrapper: createWrapper() },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.featureImportance).toEqual(mockFeatureImportance);
+    expect(result.current.confusionMatrix).toBeUndefined();
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+  });
+
+  it('should load both artifacts for classification runs (isClassification=true)', async () => {
+    (global.fetch as jest.Mock)
+      .mockResolvedValueOnce(mockBlobJsonResponse(mockFeatureImportance))
+      .mockResolvedValueOnce(mockBlobJsonResponse(mockConfusionMatrix));
+
+    const { result } = renderHook(
+      () => useModelEvaluationArtifactsQuery('test-ns', 'models/best/', true),
+      { wrapper: createWrapper() },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.featureImportance).toEqual(mockFeatureImportance);
+    expect(result.current.confusionMatrix).toEqual(mockConfusionMatrix);
+    expect(global.fetch).toHaveBeenCalledTimes(2);
+  });
+
+  it('should be disabled when namespace is missing', () => {
+    const { result } = renderHook(
+      () => useModelEvaluationArtifactsQuery(undefined, 'models/best/', true),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.featureImportance).toBeUndefined();
+    expect(result.current.confusionMatrix).toBeUndefined();
+  });
+
+  it('should be disabled when modelDirectory is missing', () => {
+    const { result } = renderHook(
+      () => useModelEvaluationArtifactsQuery('test-ns', undefined, true),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.featureImportance).toBeUndefined();
+    expect(result.current.confusionMatrix).toBeUndefined();
+  });
+});
+/* eslint-enable camelcase */

packages/automl/frontend/src/app/hooks/queries.ts

@@ -370,7 +370,7 @@ export function useModelEvaluationArtifactsQuery(
     combine: (results) => ({
       featureImportance: results[0].data,
       confusionMatrix: results[1].data,
-      isLoading: results.some((r) => r.isPending),
+      isLoading: results.some((r) => r.isLoading),
     }),
   });
 }