remove leftover shuffle colors action (#122)

adibarra · web-flow · commit 137fd77cc025 · 2026-03-29T16:42:05.000-05:00
* feat: remove shuffle colors button and all related plumbing

* feat: add high contrast toggle to TCO calculator legend

* remove shuffle tests
diff --git a/packages/app/cypress/e2e/high-contrast.cy.ts b/packages/app/cypress/e2e/high-contrast.cy.ts
@@ -11,36 +11,12 @@ describe('High Contrast Mode', () => {
     cy.get('#scatter-high-contrast').first().should('have.attr', 'data-state', 'unchecked');
   });
 
-  it('shuffle colors button is hidden when high contrast is off', () => {
-    cy.get('[data-testid="scatter-shuffle-colors"]').should('not.exist');
-  });
-
   it('visiting with i_hc=1 applies high contrast on load', () => {
     cy.visit('/inference?i_hc=1');
     cy.get('[data-testid="scatter-graph"]').should('exist');
     cy.get('#scatter-high-contrast').first().should('have.attr', 'data-state', 'checked');
   });
 
-  it('shuffle colors button appears when high contrast is enabled', () => {
-    // Still on /?i_hc=1 from previous test
-    cy.get('[data-testid="scatter-shuffle-colors"]').should('exist');
-    cy.get('[data-testid="scatter-shuffle-colors"]').should('contain.text', 'Shuffle Colors');
-  });
-
-  it('clicking shuffle colors changes the point colors', () => {
-    // Still on /?i_hc=1 from previous test
-    cy.get('[data-testid="scatter-graph"] .visible-shape')
-      .first()
-      .invoke('attr', 'fill')
-      .then((colorBefore) => {
-        cy.get('[data-testid="scatter-shuffle-colors"]').first().click();
-        cy.get('[data-testid="scatter-graph"] .visible-shape')
-          .first()
-          .invoke('attr', 'fill')
-          .should('not.equal', colorBefore);
-      });
-  });
-
   it('multiple high contrast params can coexist in URL', () => {
     cy.visit('/inference?i_hc=1&r_hc=1&e_hc=1');
     cy.get('[data-testid="scatter-graph"]').should('exist');
@@ -65,17 +41,9 @@ describe('High Contrast Mode', () => {
     cy.get('#historical-high-contrast').first().should('have.attr', 'data-state', 'unchecked');
   });
 
-  it('historical trends high contrast toggle enables HC and shows shuffle button', () => {
+  it('historical trends high contrast toggle enables HC via URL', () => {
     cy.visit('/historical?i_hc=1');
     cy.get('[data-testid="historical-trends-display"]').should('exist');
     cy.get('#historical-high-contrast').first().should('have.attr', 'data-state', 'checked');
-    cy.get('[data-testid="historical-shuffle-colors"]').should('exist');
-    cy.get('[data-testid="historical-shuffle-colors"]').should('contain.text', 'Shuffle Colors');
-  });
-
-  it('historical trends shuffle button is hidden when high contrast is off', () => {
-    cy.visit('/historical');
-    cy.get('[data-testid="historical-trends-display"]').should('exist');
-    cy.get('[data-testid="historical-shuffle-colors"]').should('not.exist');
   });
 });
diff --git a/packages/app/cypress/support/mock-data.ts b/packages/app/cypress/support/mock-data.ts
@@ -203,8 +203,6 @@ export function createMockInferenceContext(
     setHidePointLabels: namedStub('setHidePointLabels'),
     highContrast: false,
     setHighContrast: namedStub('setHighContrast'),
-    colorShuffleSeed: 0,
-    shuffleColors: namedStub('shuffleColors'),
     logScale: false,
     setLogScale: namedStub('setLogScale'),
     useAdvancedLabels: false,
diff --git a/packages/app/src/components/calculator/ThroughputBarChart.tsx b/packages/app/src/components/calculator/ThroughputBarChart.tsx
@@ -451,7 +451,7 @@ export default function ThroughputBarChart({
     };
 
     return [barLayer, labelLayer];
-  }, [sortedResults, barMetric, costType, hardwareConfig, mode]);
+  }, [sortedResults, barMetric, costType, hardwareConfig, mode, colorResolver]);
 
   // ── Tooltip ──
 
diff --git a/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx b/packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx
@@ -224,6 +224,7 @@ export default function ThroughputCalculatorDisplay() {
   const [visibleHwKeys, setVisibleHwKeys] = useState<Set<string>>(new Set());
   const [selectedBars, setSelectedBars] = useState<Set<string>>(new Set());
   const [isLegendExpanded, setIsLegendExpanded] = useState(true);
+  const [highContrast, setHighContrast] = useState(false);
   const [viewMode, setViewMode] = useState<'chart' | 'table'>('chart');
 
   const { hardwareConfig, ranges, getResults, loading, error, hasData, availableHwKeys } =
@@ -232,7 +233,7 @@ export default function ThroughputCalculatorDisplay() {
   // Dynamic vendor-aware colors for visible GPUs
   const visibleKeysArray = useMemo(() => [...visibleHwKeys], [visibleHwKeys]);
   const { resolveColor } = useThemeColors({
-    highContrast: false,
+    highContrast,
     activeKeys: visibleKeysArray,
   });
 
@@ -884,6 +885,17 @@ export default function ThroughputCalculatorDisplay() {
                               setIsLegendExpanded(expanded);
                               track('calculator_legend_expanded', { expanded });
                             }}
+                            switches={[
+                              {
+                                id: 'calc-high-contrast',
+                                label: 'High Contrast',
+                                checked: highContrast,
+                                onCheckedChange: (checked: boolean) => {
+                                  setHighContrast(checked);
+                                  track('calculator_high_contrast_toggled', { enabled: checked });
+                                },
+                              },
+                            ]}
                             actions={
                               visibleHwKeys.size < availableHwKeys.length
                                 ? [
diff --git a/packages/app/src/components/inference/InferenceContext.tsx b/packages/app/src/components/inference/InferenceContext.tsx
@@ -117,10 +117,6 @@ export function InferenceProvider({
   const { highContrast, setHighContrast, isLegendExpanded, setIsLegendExpanded } = useChartUIState({
     urlPrefix: 'i_',
   });
-  const [colorShuffleSeed, setColorShuffleSeed] = useState(0);
-  const shuffleColors = useCallback(() => {
-    setColorShuffleSeed((prev) => prev + 1);
-  }, []);
 
   const [hideNonOptimal, setHideNonOptimal] = useState(() => getUrlParam('i_optimal') !== '0');
   const [hidePointLabels, setHidePointLabels] = useState(() => getUrlParam('i_nolabel') === '1');
@@ -772,8 +768,6 @@ export function InferenceProvider({
       setHidePointLabels,
       highContrast,
       setHighContrast,
-      colorShuffleSeed,
-      shuffleColors,
       logScale,
       setLogScale,
       selectedXAxisMetric,
@@ -865,7 +859,6 @@ export function InferenceProvider({
       hideNonOptimal,
       hidePointLabels,
       highContrast,
-      colorShuffleSeed,
       logScale,
       isLegendExpanded,
       useAdvancedLabels,
diff --git a/packages/app/src/components/inference/types.ts b/packages/app/src/components/inference/types.ts
@@ -485,8 +485,6 @@ export interface InferenceChartContextType {
   setHidePointLabels: (hide: boolean) => void;
   highContrast: boolean;
   setHighContrast: (highContrast: boolean) => void;
-  colorShuffleSeed: number;
-  shuffleColors: () => void;
   logScale: boolean;
   setLogScale: (logScale: boolean) => void;
   useAdvancedLabels: boolean;
diff --git a/packages/app/src/components/inference/ui/GPUGraph.tsx b/packages/app/src/components/inference/ui/GPUGraph.tsx
@@ -57,8 +57,6 @@ const GPUGraph = React.memo(
       setUseAdvancedLabels,
       highContrast,
       setHighContrast,
-      colorShuffleSeed,
-      shuffleColors,
       selectAllActiveDates,
     } = useInference();
     const { resolvedTheme } = useTheme();
@@ -89,7 +87,6 @@ const GPUGraph = React.memo(
     const { resolveColor, getCssColor } = useThemeColors({
       highContrast,
       identifiers: graphIdentifiers,
-      colorShuffleSeed,
     });
 
     // Dynamic GPU×date color map
@@ -480,18 +477,6 @@ const GPUGraph = React.memo(
               },
             ]}
             actions={[
-              ...(highContrast
-                ? [
-                    {
-                      id: 'gpu-shuffle-colors',
-                      label: 'Shuffle Colors',
-                      onClick: () => {
-                        shuffleColors();
-                        track('interactivity_shuffle_colors');
-                      },
-                    },
-                  ]
-                : []),
               {
                 id: 'gpu-reset-filter',
                 label: 'Reset filter',
diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -100,8 +100,6 @@ const ScatterGraph = React.memo(
       selectAllHwTypes,
       highContrast,
       setHighContrast,
-      colorShuffleSeed,
-      shuffleColors,
       logScale,
       setLogScale,
       scaleType,
@@ -184,7 +182,6 @@ const ScatterGraph = React.memo(
     const { resolveColor, getCssColor } = useThemeColors({
       highContrast,
       identifiers: activeHwKeys,
-      colorShuffleSeed,
       activeKeys: activeOfficialKeys,
     });
 
@@ -1493,20 +1490,8 @@ const ScatterGraph = React.memo(
                 },
               },
             ]}
-            actions={[
-              ...(highContrast
-                ? [
-                    {
-                      id: 'scatter-shuffle-colors',
-                      label: 'Shuffle Colors',
-                      onClick: () => {
-                        shuffleColors();
-                        track(`${eventPrefix}_shuffle_colors`);
-                      },
-                    },
-                  ]
-                : []),
-              ...(effectiveOfficialHwTypes.size < hwTypesWithData.size ||
+            actions={
+              effectiveOfficialHwTypes.size < hwTypesWithData.size ||
               activeOverlayHwTypes.size < allOverlayHwTypes.size
                 ? [
                     {
@@ -1520,8 +1505,8 @@ const ScatterGraph = React.memo(
                       },
                     },
                   ]
-                : []),
-            ]}
+                : []
+            }
             showFpShapeIndicators={selectedPrecisions.length > 1}
             enableTooltips={true}
           />
diff --git a/packages/app/src/components/trends/HistoricalTrendsDisplay.tsx b/packages/app/src/components/trends/HistoricalTrendsDisplay.tsx
@@ -57,8 +57,6 @@ export default function HistoricalTrendsDisplay() {
     workflowInfo,
     highContrast,
     setHighContrast,
-    colorShuffleSeed,
-    shuffleColors,
   } = useInference();
 
   // Check if interactivity chart data exists
@@ -132,7 +130,6 @@ export default function HistoricalTrendsDisplay() {
   const { resolveColor } = useThemeColors({
     highContrast,
     identifiers: activeHwKeys,
-    colorShuffleSeed,
     activeKeys: activeHwKeys,
   });
 
@@ -576,20 +573,8 @@ export default function HistoricalTrendsDisplay() {
                         },
                       },
                     ]}
-                    actions={[
-                      ...(highContrast
-                        ? [
-                            {
-                              id: 'historical-shuffle-colors',
-                              label: 'Shuffle Colors',
-                              onClick: () => {
-                                shuffleColors();
-                                track('historical_shuffle_colors');
-                              },
-                            },
-                          ]
-                        : []),
-                      ...(activeHwTypes.size < hwTypesWithData.size
+                    actions={
+                      activeHwTypes.size < hwTypesWithData.size
                         ? [
                             {
                               id: 'historical-reset-filter',
@@ -600,8 +585,8 @@ export default function HistoricalTrendsDisplay() {
                               },
                             },
                           ]
-                        : []),
-                    ]}
+                        : []
+                    }
                     enableTooltips={true}
                     showFpShapeIndicators={true}
                   />
diff --git a/packages/app/src/hooks/useThemeColors.ts b/packages/app/src/hooks/useThemeColors.ts
@@ -16,12 +16,6 @@ export interface UseThemeColorsOptions {
    */
   identifiers?: string[];
 
-  /**
-   * Seed for shuffling high contrast color assignments.
-   * 0 (default) means no shuffle; any other value produces a deterministic shuffle.
-   */
-  colorShuffleSeed?: number;
-
   /**
    * Hardware keys that are currently checked / active in the legend.
    * When provided, dynamic vendor-aware colors are generated for these keys
@@ -71,7 +65,7 @@ export interface UseThemeColorsResult {
  * Consolidates common theme color patterns across all D3 charts
  */
 export function useThemeColors(options: UseThemeColorsOptions): UseThemeColorsResult {
-  const { highContrast, identifiers = [], colorShuffleSeed = 0, activeKeys } = options;
+  const { highContrast, identifiers = [], activeKeys } = options;
   const { resolvedTheme } = useTheme();
 
   // get base theme colors
@@ -91,8 +85,8 @@ export function useThemeColors(options: UseThemeColorsOptions): UseThemeColorsRe
     if (!highContrast) return null;
     const keysForHc = activeKeys && activeKeys.length > 0 ? activeKeys : identifiers;
     if (keysForHc.length === 0) return null;
-    return generateHighContrastColors(keysForHc, resolvedTheme || 'light', colorShuffleSeed);
-  }, [highContrast, activeKeys, identifiers, resolvedTheme, colorShuffleSeed]);
+    return generateHighContrastColors(keysForHc, resolvedTheme || 'light');
+  }, [highContrast, activeKeys, identifiers, resolvedTheme]);
 
   // generate dynamic vendor-aware colors for active keys
   const vendorColorMap = useMemo(() => {
diff --git a/packages/app/src/lib/chart-utils.test.ts b/packages/app/src/lib/chart-utils.test.ts
diff --git a/packages/app/src/lib/chart-utils.ts b/packages/app/src/lib/chart-utils.ts
