@oanda/labs-crowd-view-widget 1.0.54 → 1.0.56

package/test/components/Chart/utils/handleLabelUpdate.test.ts

@@ -0,0 +1,435 @@
+import type { EChartsType } from 'echarts';
+
+import { formatXAxisAdditionalLabel } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisAdditionalLabel';
+import { formatXAxisLabel } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisLabel';
+import { getLabelData } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/getLabelData';
+import { handleLabelUpdate } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/handleLabelUpdate';
+import { isDifferenceGreaterThanTwoWeeks } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/isDifferenceGreaterThanTwoWeeks';
+import type { ChartProps } from '../../../../src/CrowdViewWidget/components/Chart/types';
+
+// Mock dependencies
+jest.mock(
+  '../../../../src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisAdditionalLabel'
+);
+jest.mock(
+  '../../../../src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisLabel'
+);
+jest.mock(
+  '../../../../src/CrowdViewWidget/components/Chart/chartUtils/getLabelData'
+);
+jest.mock(
+  '../../../../src/CrowdViewWidget/components/Chart/chartUtils/isDifferenceGreaterThanTwoWeeks'
+);
+
+const mockFormatXAxisLabel = formatXAxisLabel as jest.MockedFunction<
+  typeof formatXAxisLabel
+>;
+const mockFormatXAxisAdditionalLabel =
+  formatXAxisAdditionalLabel as jest.MockedFunction<
+    typeof formatXAxisAdditionalLabel
+  >;
+const mockGetLabelData = getLabelData as jest.MockedFunction<
+  typeof getLabelData
+>;
+const mockIsDifferenceGreaterThanTwoWeeks =
+  isDifferenceGreaterThanTwoWeeks as jest.MockedFunction<
+    typeof isDifferenceGreaterThanTwoWeeks
+  >;
+
+describe('handleLabelUpdate', () => {
+  let mockInstance: jest.Mocked<EChartsType>;
+  let labelTimerRef: { current: NodeJS.Timeout | null };
+  let isGreaterThanTwoWeeksRef: { current: boolean | null };
+  let mainData: ChartProps['mainData'];
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.clearAllMocks();
+
+    mockInstance = {
+      getOption: jest.fn(),
+      setOption: jest.fn(),
+    } as unknown as jest.Mocked<EChartsType>;
+
+    labelTimerRef = { current: null };
+    isGreaterThanTwoWeeksRef = { current: null };
+
+    mainData = {
+      dates: [
+        '2025-01-01T00:00:00Z',
+        '2025-01-02T00:00:00Z',
+        '2025-01-03T00:00:00Z',
+        '2025-01-04T00:00:00Z',
+        '2025-01-05T00:00:00Z',
+      ],
+      candlesOpen: [1.1, 1.2, 1.3, 1.4, 1.5],
+      candlesClose: [1.15, 1.25, 1.35, 1.45, 1.55],
+      candlesLow: [1.05, 1.15, 1.25, 1.35, 1.45],
+      candlesHigh: [1.2, 1.3, 1.4, 1.5, 1.6],
+      sentimentShorts: [10, 20, 30, 40, 50],
+      sentimentLongs: [90, 80, 70, 60, 50],
+    };
+
+    mockFormatXAxisLabel.mockReturnValue('formatted-label');
+    mockFormatXAxisAdditionalLabel.mockReturnValue('formatted-additional');
+    mockGetLabelData.mockReturnValue([
+      '2025-01-02T00:00:00Z',
+      '2025-01-04T00:00:00Z',
+    ]);
+    mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  describe('when dataZoom is invalid', () => {
+    it('should return early if dataZoom is not an array', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: null,
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+
+    it('should return early if dataZoom array is empty', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+
+    it('should return early if dataZoom[0] is null', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [null],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+
+    it('should return early if startValue is not a number', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 'invalid', endValue: 3 }],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+
+    it('should return early if endValue is not a number', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 'invalid' }],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when dates are invalid', () => {
+    it('should return early if startValue date is missing', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 10, endValue: 3 }],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+
+    it('should return early if endValue date is missing', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 10 }],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when state changes', () => {
+    it('should update xAxis when isGreaterThanTwoWeeks changes from null to true', () => {
+      isGreaterThanTwoWeeksRef.current = null;
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+      mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(true);
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).toHaveBeenCalledWith({
+        xAxis: [
+          {
+            id: 'main-xAxis',
+            axisLabel: {
+              formatter: expect.any(Function),
+            },
+          },
+          {
+            id: 'additional-xAxis',
+            axisLabel: {
+              customValues: ['2025-01-02T00:00:00Z', '2025-01-04T00:00:00Z'],
+              formatter: expect.any(Function),
+            },
+          },
+        ],
+      });
+      expect(isGreaterThanTwoWeeksRef.current).toBe(true);
+    });
+
+    it('should update xAxis when isGreaterThanTwoWeeks changes from false to true', () => {
+      isGreaterThanTwoWeeksRef.current = false;
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+      mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(true);
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).toHaveBeenCalled();
+      expect(isGreaterThanTwoWeeksRef.current).toBe(true);
+    });
+
+    it('should not update xAxis when isGreaterThanTwoWeeks does not change', () => {
+      isGreaterThanTwoWeeksRef.current = false;
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+      mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(false);
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+      expect(isGreaterThanTwoWeeksRef.current).toBe(false);
+    });
+  });
+
+  describe('timer management', () => {
+    it('should clear existing timeout before setting new one', () => {
+      const existingTimeout = setTimeout(() => {}, 1000);
+      labelTimerRef.current = existingTimeout;
+      const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      expect(clearTimeoutSpy).toHaveBeenCalledWith(existingTimeout);
+      clearTimeoutSpy.mockRestore();
+    });
+
+    it('should delay execution by 50ms', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+      mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(true);
+      isGreaterThanTwoWeeksRef.current = false;
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      // Should not be called before timeout
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+
+      // Fast-forward 49ms
+      jest.advanceTimersByTime(49);
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+
+      // Fast-forward 1ms more
+      jest.advanceTimersByTime(1);
+      expect(mockInstance.setOption).toHaveBeenCalled();
+    });
+  });
+
+  describe('formatter functions', () => {
+    it('should call formatXAxisLabel with correct parameters', () => {
+      isGreaterThanTwoWeeksRef.current = false;
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+      mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(true);
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      jest.advanceTimersByTime(50);
+
+      const setOptionCall = mockInstance.setOption.mock.calls[0][0] as {
+        xAxis: Array<{
+          id: string;
+          axisLabel: {
+            formatter: (value: string) => string;
+          };
+        }>;
+      };
+      const mainAxisFormatter = setOptionCall.xAxis[0].axisLabel.formatter;
+      mainAxisFormatter('2025-01-01T00:00:00Z');
+
+      expect(mockFormatXAxisLabel).toHaveBeenCalledWith(
+        '2025-01-01T00:00:00Z',
+        true,
+        'en-US'
+      );
+    });
+
+    it('should call formatXAxisAdditionalLabel with correct parameters', () => {
+      isGreaterThanTwoWeeksRef.current = false;
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+      mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(true);
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef,
+        'en-US'
+      );
+
+      jest.advanceTimersByTime(50);
+
+      const setOptionCall = mockInstance.setOption.mock.calls[0][0] as {
+        xAxis: Array<{
+          id: string;
+          axisLabel: {
+            formatter: (value: unknown) => string;
+            customValues?: string[];
+          };
+        }>;
+      };
+      const additionalAxisFormatter =
+        setOptionCall.xAxis[1].axisLabel.formatter;
+      additionalAxisFormatter('2025-01-02T00:00:00Z');
+
+      expect(mockFormatXAxisAdditionalLabel).toHaveBeenCalledWith(
+        '2025-01-02T00:00:00Z',
+        true,
+        'en-US'
+      );
+    });
+  });
+});

package/test/components/Chart/utils/handleTooltipUpdate.test.ts

@@ -0,0 +1,140 @@
+import type { EChartsType } from 'echarts';
+
+import { handleTooltipUpdate } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/handleTooltipUpdate';
+
+describe('handleTooltipUpdate', () => {
+  let mockInstance: jest.Mocked<EChartsType>;
+  let zoomTimerRef: { current: NodeJS.Timeout | null };
+  let tooltipVisibleRef: { current: boolean };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.clearAllMocks();
+
+    mockInstance = {
+      setOption: jest.fn(),
+    } as unknown as jest.Mocked<EChartsType>;
+
+    zoomTimerRef = { current: null };
+    tooltipVisibleRef = { current: true };
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  describe('when canHover is false', () => {
+    it('should not hide tooltip on touch devices', () => {
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, false);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+      expect(tooltipVisibleRef.current).toBe(true);
+    });
+  });
+
+  describe('when canHover is true', () => {
+    it('should hide tooltip immediately when visible', () => {
+      tooltipVisibleRef.current = true;
+
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+
+      expect(mockInstance.setOption).toHaveBeenCalledWith({
+        tooltip: {
+          show: false,
+        },
+      });
+      expect(tooltipVisibleRef.current).toBe(false);
+    });
+
+    it('should not call setOption when tooltip is already hidden', () => {
+      tooltipVisibleRef.current = false;
+
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+
+    it('should clear existing timeout before setting new one', () => {
+      const existingTimeout = setTimeout(() => {}, 1000);
+      zoomTimerRef.current = existingTimeout;
+      const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+
+      expect(clearTimeoutSpy).toHaveBeenCalledWith(existingTimeout);
+      clearTimeoutSpy.mockRestore();
+    });
+
+    it('should show tooltip after 100ms delay', () => {
+      tooltipVisibleRef.current = true;
+
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+
+      // Tooltip should be hidden immediately
+      expect(tooltipVisibleRef.current).toBe(false);
+      expect(mockInstance.setOption).toHaveBeenCalledWith({
+        tooltip: {
+          show: false,
+        },
+      });
+
+      // Fast-forward time
+      jest.advanceTimersByTime(100);
+
+      // Tooltip should be shown again
+      expect(mockInstance.setOption).toHaveBeenCalledWith({
+        tooltip: {
+          show: true,
+        },
+      });
+      expect(tooltipVisibleRef.current).toBe(true);
+    });
+
+    it('should not show tooltip if it was already shown during timeout', () => {
+      tooltipVisibleRef.current = true;
+
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+
+      // Manually set tooltip to visible before timeout
+      tooltipVisibleRef.current = true;
+
+      jest.advanceTimersByTime(100);
+
+      // Should not call setOption to show tooltip since it's already visible
+      const { calls } = mockInstance.setOption.mock;
+      expect(calls.length).toBe(1); // Only the hide call
+      expect(calls[0][0]).toEqual({
+        tooltip: {
+          show: false,
+        },
+      });
+    });
+
+    it('should reset timeout on subsequent calls', () => {
+      tooltipVisibleRef.current = true;
+
+      // First call
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+      const firstTimeout = zoomTimerRef.current;
+
+      // Second call before timeout
+      jest.advanceTimersByTime(50);
+      handleTooltipUpdate(mockInstance, zoomTimerRef, tooltipVisibleRef, true);
+      const secondTimeout = zoomTimerRef.current;
+
+      // Timeouts should be different
+      expect(firstTimeout).not.toBe(secondTimeout);
+
+      // Fast-forward 100ms from second call (150ms total)
+      jest.advanceTimersByTime(100);
+
+      // Should only show tooltip once (from second call)
+      const showCalls = mockInstance.setOption.mock.calls.filter(
+        (call) =>
+          (call[0] as { tooltip?: { show: boolean } }).tooltip?.show === true
+      );
+      expect(showCalls.length).toBe(1);
+    });
+  });
+});

package/test/components/Legend.test.tsx

@@ -21,7 +21,7 @@ describe('Crowd View Widget', () => {
         );
 
         const segments = getAllByTestId('legend-bar-segment');
-        expect(segments.length).toBe(2);
+        expect(segments.length).toBe(4);
       });
 
       it('passes isDark prop to LegendBar components in light mode', () => {
@@ -31,7 +31,7 @@ describe('Crowd View Widget', () => {
           </MockLayoutProvider>
         );
         const segments = getAllByTestId('legend-bar-segment');
-        expect(segments.length).toBe(2);
+        expect(segments.length).toBe(4);
         // Check that segments use light mode colors (either long or short)
         const styles = segments.map((segment) => segment.getAttribute('style'));
         const hasLightColors = styles.some(
@@ -49,7 +49,7 @@ describe('Crowd View Widget', () => {
           </MockLayoutProvider>
         );
         const segments = getAllByTestId('legend-bar-segment');
-        expect(segments.length).toBe(2);
+        expect(segments.length).toBe(4);
         // Check that segments use dark mode colors (either long or short)
         const styles = segments.map((segment) => segment.getAttribute('style'));
         const hasDarkColors = styles.some(

package/test/components/LegendBar.test.tsx

@@ -11,58 +11,60 @@ import { COLOR_MAP } from '../../src/CrowdViewWidget/constants';
 describe('Crowd View Widget', () => {
   describe('components', () => {
     describe('<LegendBar />', () => {
-      it('renders exactly 1 segment', () => {
+      it('renders exactly 2 segments', () => {
         const { getAllByTestId } = render(
           <LegendBar isDark={false} type="short" />
         );
         const segments = getAllByTestId('legend-bar-segment');
-        expect(segments.length).toBe(1);
+        expect(segments.length).toBe(2);
       });
 
       it('uses light mode colors when isDark is false for long type', () => {
-        const { getByTestId } = render(
+        const { getAllByTestId } = render(
           <LegendBar isDark={false} type="long" />
         );
-        const segment = getByTestId('legend-bar-segment');
-        const style = segment.getAttribute('style');
+        const segments = getAllByTestId('legend-bar-segment');
+        const style = segments[0].getAttribute('style');
         expect(style).toContain(COLOR_MAP.light.long[0]);
         expect(style).toContain(COLOR_MAP.light.long[1]);
       });
 
       it('uses dark mode colors when isDark is true for long type', () => {
-        const { getByTestId } = render(<LegendBar isDark={true} type="long" />);
-        const segment = getByTestId('legend-bar-segment');
-        const style = segment.getAttribute('style');
+        const { getAllByTestId } = render(
+          <LegendBar isDark={true} type="long" />
+        );
+        const segments = getAllByTestId('legend-bar-segment');
+        const style = segments[0].getAttribute('style');
         expect(style).toContain(COLOR_MAP.dark.long[0]);
         expect(style).toContain(COLOR_MAP.dark.long[1]);
       });
 
       it('uses light mode short colors when isDark is false', () => {
-        const { getByTestId } = render(
+        const { getAllByTestId } = render(
           <LegendBar isDark={false} type="short" />
         );
-        const segment = getByTestId('legend-bar-segment');
-        const style = segment.getAttribute('style');
+        const segments = getAllByTestId('legend-bar-segment');
+        const style = segments[0].getAttribute('style');
         expect(style).toContain(COLOR_MAP.light.short[0]);
         expect(style).toContain(COLOR_MAP.light.short[1]);
       });
 
       it('uses dark mode short colors when isDark is true', () => {
-        const { getByTestId } = render(
+        const { getAllByTestId } = render(
           <LegendBar isDark={true} type="short" />
         );
-        const segment = getByTestId('legend-bar-segment');
-        const style = segment.getAttribute('style');
+        const segments = getAllByTestId('legend-bar-segment');
+        const style = segments[0].getAttribute('style');
         expect(style).toContain(COLOR_MAP.dark.short[0]);
         expect(style).toContain(COLOR_MAP.dark.short[1]);
       });
 
       it('renders gradient with correct direction for long type', () => {
-        const { getByTestId } = render(
+        const { getAllByTestId } = render(
           <LegendBar isDark={false} type="long" />
         );
-        const segment = getByTestId('legend-bar-segment');
-        const style = segment.getAttribute('style');
+        const segments = getAllByTestId('legend-bar-segment');
+        const style = segments[0].getAttribute('style');
         // Long type should use long[1] as start and long[0] as end
         expect(style).toMatch(/linear-gradient\(90deg/);
         expect(style).toContain(COLOR_MAP.light.long[1]);
@@ -70,11 +72,11 @@ describe('Crowd View Widget', () => {
       });
 
       it('renders gradient with correct direction for short type', () => {
-        const { getByTestId } = render(
+        const { getAllByTestId } = render(
           <LegendBar isDark={false} type="short" />
         );
-        const segment = getByTestId('legend-bar-segment');
-        const style = segment.getAttribute('style');
+        const segments = getAllByTestId('legend-bar-segment');
+        const style = segments[0].getAttribute('style');
         // Short type should use short[0] as start and short[1] as end
         expect(style).toMatch(/linear-gradient\(90deg/);
         expect(style).toContain(COLOR_MAP.light.short[0]);