Merge pull request #634 from adobe/highlightingRefactor

refactor: add hovered item opacity controls to area

Author: tanugarg04

packages/vega-spec-builder/src/area/areaSpecBuilder.test.ts

@@ -23,6 +23,7 @@ import {
   FILTERED_TABLE,
   HIGHLIGHTED_ITEM,
   HIGHLIGHTED_SERIES,
+  HOVERED_ITEM,
   LINEAR_PADDING,
   MARK_ID,
   SELECTED_GROUP,
@@ -210,22 +211,23 @@ describe('areaSpecBuilder', () => {
 
     test('children: should add signals', () => {
       const signals = addSignals(defaultSignals, { ...defaultAreaOptions, chartTooltips: [{}] });
-      expect(signals).toHaveLength(defaultSignals.length + 1);
+      expect(signals).toHaveLength(defaultSignals.length + 2);
       expect(signals[0]).toHaveProperty('name', HIGHLIGHTED_ITEM);
       expect(signals[2]).toHaveProperty('name', HIGHLIGHTED_SERIES);
       expect(signals[2].on).toHaveLength(2);
       expect(signals[3]).toHaveProperty('name', SELECTED_ITEM);
       expect(signals[4]).toHaveProperty('name', SELECTED_SERIES);
       expect(signals[5]).toHaveProperty('name', SELECTED_GROUP);
-      expect(signals[6]).toHaveProperty('name', 'area0_controlledHoveredId');
+      expect(signals[6]).toHaveProperty('name', `${defaultAreaOptions.name}_${HOVERED_ITEM}`);
+      expect(signals[7]).toHaveProperty('name', `${defaultAreaOptions.name}_controlledHoveredId`);
     });
 
     test('should exclude data with key from update if tooltip has excludeDataKey', () => {
       const signals = addSignals(defaultSignals, {
         ...defaultAreaOptions,
         chartTooltips: [{ excludeDataKeys: ['excludeFromTooltip'] }],
       });
-      expect(signals).toHaveLength(defaultSignals.length + 1);
+      expect(signals).toHaveLength(defaultSignals.length + 2);
       expect(signals[2]).toHaveProperty('name', HIGHLIGHTED_SERIES);
       expect(signals[2].on?.[0]).toHaveProperty('events', '@area0:mouseover');
       expect(signals[2].on?.[0]).toHaveProperty('update', '(datum.excludeFromTooltip) ? null : datum.rscSeriesId');
@@ -237,10 +239,12 @@ describe('areaSpecBuilder', () => {
         chartTooltips: [{}],
         highlightedItem: 'highlightedItem',
       });
-      expect(signals).toHaveLength(defaultSignals.length + 1);
+      expect(signals).toHaveLength(defaultSignals.length + 2);
       expect(signals[0]).toHaveProperty('name', HIGHLIGHTED_ITEM);
       expect(signals[0]).toHaveProperty('on');
       expect(signals[0].on).toHaveLength(1);
+      expect(signals.at(-2)).toHaveProperty('name', `${defaultAreaOptions.name}_${HOVERED_ITEM}`);
+      expect(signals.at(-1)).toHaveProperty('name', `${defaultAreaOptions.name}_controlledHoveredId`);
     });
   });
 

packages/vega-spec-builder/src/area/areaSpecBuilder.ts

@@ -39,6 +39,7 @@ import { hasPopover, hasTooltip, isInteractive } from '../marks/markUtils';
 import { addContinuousDimensionScale, addFieldToFacetScaleDomain, addMetricScale } from '../scale/scaleSpecBuilder';
 import {
   addHighlightedSeriesSignalEvents,
+  addHoveredItemSignal,
   getControlledHoveredGroupSignal,
   getControlledHoveredIdSignal,
 } from '../signal/signalSpecBuilder';
@@ -191,6 +192,7 @@ export const addSignals = produce<Signal[], [AreaSpecOptions]>((signals, areaOpt
   const { chartTooltips, name } = areaOptions;
   if (!isInteractive(areaOptions)) return;
   addHighlightedSeriesSignalEvents(signals, name, 1, chartTooltips[0]?.excludeDataKeys);
+  addHoveredItemSignal(signals, name);
   if (areaOptions.highlightedItem) {
     addHighlightedItemEvents(signals, name);
   }

packages/vega-spec-builder/src/area/areaUtils.ts

@@ -17,6 +17,7 @@ import {
   HIGHLIGHTED_ITEM,
   HIGHLIGHTED_SERIES,
   HIGHLIGHT_CONTRAST_RATIO,
+  HOVERED_ITEM,
   SELECTED_SERIES,
   SERIES_ID,
 } from '@spectrum-charts/constants';
@@ -148,6 +149,10 @@ export function getAreaOpacity(areaOptions: AreaMarkOptions): ProductionRule<Num
 
   return [
     ...opacityRules,
+    {
+      test: `isValid(${name}_${HOVERED_ITEM})`,
+      signal: `${name}_${HOVERED_ITEM}.${SERIES_ID} === datum.${SERIES_ID} ? 1 : ${fadedOpacity}`,
+    },
     {
       test: `isValid(${HIGHLIGHTED_SERIES}) && ${HIGHLIGHTED_SERIES} !== datum.${SERIES_ID}`,
       value: fadedOpacity,