Address review comments and add TPS column corresponding percentile

Signed-off-by: manaswinidas <[email protected]>

Author: manaswinidas

clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelCatalog/modelCatalogTabs.cy.ts

@@ -404,7 +404,7 @@ describe('Model Catalog Details Tabs', () => {
     });
 
     describe('With Latency Filter Applied', () => {
-      it('should show only the selected latency column when TTFT P90 filter is applied', () => {
+      it('should show only the selected latency column and matching TPS column when TTFT P90 filter is applied', () => {
         modelCatalog.findModelCatalogDetailLink().first().click();
         modelCatalog.clickPerformanceInsightsTab();
 
@@ -414,28 +414,22 @@ describe('Model Catalog Details Tabs', () => {
         // Apply the default TTFT P90 filter
         modelCatalog.clickApplyFilter();
 
-        // Only TTFT P90 column should be visible
+        // TTFT P90 column should be visible
         modelCatalog
           .findHardwareConfigurationTableHeaders()
           .should('contain.text', `TTFT${NBSP}Latency P90`);
 
-        // Other TTFT latency columns should be hidden
+        // TPS P90 column should be visible (matching percentile)
         modelCatalog
           .findHardwareConfigurationTableHeaders()
-          .should('not.contain.text', 'Latency Mean');
-        modelCatalog
-          .findHardwareConfigurationTableHeaders()
-          .should('not.contain.text', 'Latency P95');
-        modelCatalog
-          .findHardwareConfigurationTableHeaders()
-          .should('not.contain.text', 'Latency P99');
+          .should('contain.text', `TPS${NBSP}Latency P90`);
 
         // E2E and ITL columns should be hidden
         modelCatalog.findHardwareConfigurationTableHeaders().should('not.contain.text', 'E2E');
         modelCatalog.findHardwareConfigurationTableHeaders().should('not.contain.text', 'ITL');
       });
 
-      it('should show only E2E mean column when E2E mean filter is applied', () => {
+      it('should show only E2E mean column and TPS mean column when E2E mean filter is applied', () => {
         modelCatalog.findModelCatalogDetailLink().first().click();
         modelCatalog.clickPerformanceInsightsTab();
 
@@ -451,25 +445,19 @@ describe('Model Catalog Details Tabs', () => {
         // Apply filter
         modelCatalog.clickApplyFilter();
 
-        // Only E2E mean column should be visible
+        // E2E mean column should be visible
         modelCatalog
           .findHardwareConfigurationTableHeaders()
           .should('contain.text', `E2E${NBSP}Latency Mean`);
 
+        // TPS Mean column should be visible (matching percentile)
+        modelCatalog
+          .findHardwareConfigurationTableHeaders()
+          .should('contain.text', `TPS${NBSP}Latency Mean`);
+
         // TTFT and ITL columns should be hidden
         modelCatalog.findHardwareConfigurationTableHeaders().should('not.contain.text', 'TTFT');
         modelCatalog.findHardwareConfigurationTableHeaders().should('not.contain.text', 'ITL');
-
-        // Other E2E percentile columns should be hidden
-        modelCatalog
-          .findHardwareConfigurationTableHeaders()
-          .should('not.contain.text', 'Latency P90');
-        modelCatalog
-          .findHardwareConfigurationTableHeaders()
-          .should('not.contain.text', 'Latency P95');
-        modelCatalog
-          .findHardwareConfigurationTableHeaders()
-          .should('not.contain.text', 'Latency P99');
       });
 
       it('should restore all latency columns when filter is reset', () => {
@@ -480,10 +468,13 @@ describe('Model Catalog Details Tabs', () => {
         modelCatalog.openLatencyFilter();
         modelCatalog.clickApplyFilter();
 
-        // Verify only TTFT P90 latency column is shown
+        // Verify TTFT P90 and TPS P90 latency columns are shown
         modelCatalog
           .findHardwareConfigurationTableHeaders()
           .should('contain.text', `TTFT${NBSP}Latency P90`);
+        modelCatalog
+          .findHardwareConfigurationTableHeaders()
+          .should('contain.text', `TPS${NBSP}Latency P90`);
         modelCatalog.findHardwareConfigurationTableHeaders().should('not.contain.text', 'E2E');
 
         // Open filter and reset
@@ -497,6 +488,7 @@ describe('Model Catalog Details Tabs', () => {
         modelCatalog.findHardwareConfigurationTableHeaders().should('contain.text', 'TTFT');
         modelCatalog.findHardwareConfigurationTableHeaders().should('contain.text', 'E2E');
         modelCatalog.findHardwareConfigurationTableHeaders().should('contain.text', 'ITL');
+        modelCatalog.findHardwareConfigurationTableHeaders().should('contain.text', 'TPS');
       });
 
       it('should keep non-latency columns visible when latency filter is applied', () => {

clients/ui/frontend/src/app/pages/modelCatalog/components/HardwareConfigurationTable.tsx

@@ -6,7 +6,7 @@ import { CatalogPerformanceMetricsArtifact } from '~/app/modelCatalogTypes';
 import { ModelCatalogContext } from '~/app/context/modelCatalog/ModelCatalogContext';
 import { clearAllFilters } from '~/app/pages/modelCatalog/utils/hardwareConfigurationFilterUtils';
 import { getActiveLatencyFieldName } from '~/app/pages/modelCatalog/utils/modelCatalogUtils';
-import { ALL_LATENCY_FIELD_NAMES } from '~/concepts/modelCatalog/const';
+import { ALL_LATENCY_FIELD_NAMES, LatencyMetric } from '~/concepts/modelCatalog/const';
 import { hardwareConfigColumns, HardwareConfigColumn } from './HardwareConfigurationTableColumns';
 import HardwareConfigurationTableRow from './HardwareConfigurationTableRow';
 import HardwareConfigurationFilterToolbar from './HardwareConfigurationFilterToolbar';
@@ -28,13 +28,21 @@ const HardwareConfigurationTable: React.FC<HardwareConfigurationTableProps> = ({
   // Get the active latency filter field name (if any)
   const activeLatencyField = getActiveLatencyFieldName(filterData);
 
+  const tpsPrefix = LatencyMetric.TPS.toLowerCase();
+
   // When a latency filter is selected, show only that column and hide other latency columns
+  // Also show the TPS column with the matching percentile (e.g., TTFT P90 filter shows TPS P90)
   const filteredColumns = React.useMemo((): HardwareConfigColumn[] => {
     if (!activeLatencyField) {
       // No latency filter selected, show all columns
       return hardwareConfigColumns;
     }
 
+    // Extract the percentile suffix from the active filter (e.g., 'ttft_p90' -> 'p90', 'e2e_mean' -> 'mean')
+    const percentileSuffix = activeLatencyField.split('_').pop();
+    // Build the matching TPS field name (e.g., 'tps_p90', 'tps_mean')
+    const matchingTpsField = `${tpsPrefix}_${percentileSuffix}`;
+
     // Filter out latency columns that don't match the active filter
     return hardwareConfigColumns.filter((column) => {
       // Check if this column is a latency column
@@ -47,10 +55,15 @@ const HardwareConfigurationTable: React.FC<HardwareConfigurationTableProps> = ({
         return true;
       }
 
-      // If it's a latency column, only keep it if it matches the active filter
+      // Show TPS column with matching percentile (they measure throughput, not latency delay)
+      if (column.field === matchingTpsField) {
+        return true;
+      }
+
+      // If it's a latency column (not TPS), only keep it if it matches the active filter
       return column.field === activeLatencyField;
     });
-  }, [activeLatencyField]);
+  }, [activeLatencyField, tpsPrefix]);
 
   if (isLoading) {
     return <Spinner size="lg" />;

clients/ui/frontend/src/app/pages/modelCatalog/components/ModelCatalogCardBody.tsx

@@ -14,6 +14,7 @@ import {
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { HelpIcon, AngleLeftIcon, AngleRightIcon, ArrowRightIcon } from '@patternfly/react-icons';
+import { TruncatedText } from 'mod-arch-shared';
 import {
   CatalogModel,
   CatalogSource,
@@ -39,14 +40,6 @@ type ModelCatalogCardBodyProps = {
   source: CatalogSource | undefined;
 };
 
-const descriptionStyle: React.CSSProperties = {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  WebkitLineClamp: 4,
-  WebkitBoxOrient: 'vertical',
-  display: '-webkit-box',
-};
-
 const ModelCatalogCardBody: React.FC<ModelCatalogCardBodyProps> = ({
   model,
   isValidated,
@@ -80,7 +73,7 @@ const ModelCatalogCardBody: React.FC<ModelCatalogCardBodyProps> = ({
       },
       filterData,
       filterOptions,
-      isValidated, // Only fetch if validated
+      isValidated && performanceViewEnabled, // Only fetch if validated AND toggle is ON
     );
 
   const performanceMetrics = filterArtifactsByType<CatalogPerformanceMetricsArtifact>(
@@ -95,13 +88,13 @@ const ModelCatalogCardBody: React.FC<ModelCatalogCardBodyProps> = ({
     MetricsType.accuracyMetrics,
   );
 
-  const isLoading = isValidated && !performanceArtifactsLoaded;
+  const isLoading = isValidated && performanceViewEnabled && !performanceArtifactsLoaded;
 
   if (isLoading) {
     return <Spinner />;
   }
 
-  if (performanceArtifactsError && isValidated) {
+  if (performanceArtifactsError && isValidated && performanceViewEnabled) {
     return (
       <Alert variant="danger" isInline title={performanceArtifactsError.name}>
         {performanceArtifactsError.message}
@@ -115,9 +108,11 @@ const ModelCatalogCardBody: React.FC<ModelCatalogCardBodyProps> = ({
       return (
         <Stack hasGutter>
           <StackItem>
-            <div data-testid="model-catalog-card-description" style={descriptionStyle}>
-              {model.description}
-            </div>
+            <TruncatedText
+              content={model.description || ''}
+              maxLines={4}
+              data-testid="model-catalog-card-description"
+            />
           </StackItem>
           <StackItem>
             <Link
@@ -265,9 +260,11 @@ const ModelCatalogCardBody: React.FC<ModelCatalogCardBodyProps> = ({
 
   // Standard card body for non-validated models
   return (
-    <div data-testid="model-catalog-card-description" style={descriptionStyle}>
-      {model.description}
-    </div>
+    <TruncatedText
+      content={model.description || ''}
+      maxLines={4}
+      data-testid="model-catalog-card-description"
+    />
   );
 };