@oanda/labs-instruments-table-widget 1.0.44 → 1.0.46

package/src/InstrumentsTableWidget/config.ts

@@ -79,6 +79,13 @@ const normal: HeaderConfigType = {
       minWidth: '80px',
     },
   },
+  [DataRecordType.DATA_SOURCE]: {
+    displayName: 'Data Source',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px',
+    },
+  },
 };
 
 const longInstruments: HeaderConfigType = {

package/src/InstrumentsTableWidget/constant.ts

@@ -1,5 +1,6 @@
 import { DataRecordType } from '@oanda/labs-widget-common';
 
+const RAW_PRICE_DIVISION = 'MKTD';
 const DEFAULT_COUNT = 10;
 
 const DEFAULT_TOTAL_COUNT = 50;
@@ -20,4 +21,5 @@ export {
   DEFAULT_COUNT,
   DEFAULT_TOTAL_COUNT,
   INSTRUMENT_TOOLTIP_ID,
+  RAW_PRICE_DIVISION,
 };

package/src/InstrumentsTableWidget/types.ts

@@ -34,4 +34,5 @@ export interface MainProps {
   recordsPerPage?: number;
   dataSource: DataSource;
   isLiveRatesDisabled?: boolean;
+  priceType?: PriceType;
 }

package/src/InstrumentsTableWidget/utils.ts

@@ -1,24 +1,34 @@
-import type { LiveRatesDataSource } from '@oanda/labs-widget-common';
+import type { DataRecord } from '@oanda/labs-widget-common';
 
-import { DataSource, Division } from '../gql/types/graphql';
-import { PriceType } from './types';
+import { DataSource } from '../gql/types/graphql';
 
-const getLiveRatesDivisionCode = (
-  division: Division,
-  priceType: PriceType,
-  dataSource: LiveRatesDataSource
-): Division | string | undefined => {
-  const divisionMap = {
-    [PriceType.Raw]: {
-      [DataSource.Mt5]: Division.Oc,
-      [DataSource.V20]: 'MKTD',
-    },
-    [PriceType.Division]: {
-      [DataSource.Mt5]: division,
-      [DataSource.V20]: division,
-    },
+interface GroupedNames {
+  v20instruments: string[];
+  mt5instruments: string[];
+}
+
+const groupNamesBySource = (items: DataRecord[]) => {
+  const initialState: GroupedNames = {
+    v20instruments: [],
+    mt5instruments: [],
   };
-  return divisionMap[priceType]?.[dataSource];
+
+  return items.reduce((accumulator, currentItem) => {
+    if (currentItem.dataSource === DataSource.Mt5) {
+      return {
+        v20instruments: accumulator.v20instruments,
+        mt5instruments: [...accumulator.mt5instruments, currentItem.instrument],
+      };
+    }
+    if (currentItem.dataSource === DataSource.V20) {
+      return {
+        v20instruments: [...accumulator.v20instruments, currentItem.instrument],
+        mt5instruments: accumulator.mt5instruments,
+      };
+    }
+
+    return accumulator;
+  }, initialState);
 };
 
-export { getLiveRatesDivisionCode };
+export { groupNamesBySource };

package/src/gql/resolveInstrumentsWithFilters.ts

@@ -26,6 +26,7 @@ export const resolveInstrumentsWithFilters = gql`
         name
         displayName
         tradeMode @include(if: $withTradingModes)
+        dataSource
       }
       totalCount
       updatedAt @include(if: $withTradingModes)

package/src/gql/types/gql.ts

@@ -13,7 +13,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-  '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: DataSource!\n    $instruments: [String]\n    $searchPattern: String\n    $tradeModes: [TradeMode]\n    $count: Int\n    $offset: Int\n    $withTradingModes: Boolean!\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n      tradeModes: $tradeModes\n    ) {\n      instruments {\n        name\n        displayName\n        tradeMode @include(if: $withTradingModes)\n      }\n      totalCount\n      updatedAt @include(if: $withTradingModes)\n    }\n  }\n':
+  '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: DataSource!\n    $instruments: [String]\n    $searchPattern: String\n    $tradeModes: [TradeMode]\n    $count: Int\n    $offset: Int\n    $withTradingModes: Boolean!\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n      tradeModes: $tradeModes\n    ) {\n      instruments {\n        name\n        displayName\n        tradeMode @include(if: $withTradingModes)\n        dataSource\n      }\n      totalCount\n      updatedAt @include(if: $withTradingModes)\n    }\n  }\n':
     types.ResolveInstrumentsWithFiltersDocument,
 };
 
@@ -35,8 +35,8 @@ export function graphql(source: string): unknown;
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: DataSource!\n    $instruments: [String]\n    $searchPattern: String\n    $tradeModes: [TradeMode]\n    $count: Int\n    $offset: Int\n    $withTradingModes: Boolean!\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n      tradeModes: $tradeModes\n    ) {\n      instruments {\n        name\n        displayName\n        tradeMode @include(if: $withTradingModes)\n      }\n      totalCount\n      updatedAt @include(if: $withTradingModes)\n    }\n  }\n'
-): (typeof documents)['\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: DataSource!\n    $instruments: [String]\n    $searchPattern: String\n    $tradeModes: [TradeMode]\n    $count: Int\n    $offset: Int\n    $withTradingModes: Boolean!\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n      tradeModes: $tradeModes\n    ) {\n      instruments {\n        name\n        displayName\n        tradeMode @include(if: $withTradingModes)\n      }\n      totalCount\n      updatedAt @include(if: $withTradingModes)\n    }\n  }\n'];
+  source: '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: DataSource!\n    $instruments: [String]\n    $searchPattern: String\n    $tradeModes: [TradeMode]\n    $count: Int\n    $offset: Int\n    $withTradingModes: Boolean!\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n      tradeModes: $tradeModes\n    ) {\n      instruments {\n        name\n        displayName\n        tradeMode @include(if: $withTradingModes)\n        dataSource\n      }\n      totalCount\n      updatedAt @include(if: $withTradingModes)\n    }\n  }\n'
+): (typeof documents)['\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: DataSource!\n    $instruments: [String]\n    $searchPattern: String\n    $tradeModes: [TradeMode]\n    $count: Int\n    $offset: Int\n    $withTradingModes: Boolean!\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n      tradeModes: $tradeModes\n    ) {\n      instruments {\n        name\n        displayName\n        tradeMode @include(if: $withTradingModes)\n        dataSource\n      }\n      totalCount\n      updatedAt @include(if: $withTradingModes)\n    }\n  }\n'];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

package/src/gql/types/graphql.ts

@@ -551,6 +551,7 @@ export type ResolveInstrumentsWithFiltersQuery = {
       name: string;
       displayName: string;
       tradeMode?: TradeMode;
+      dataSource: DataSource;
     }>;
   } | null;
 };
@@ -781,6 +782,10 @@ export const ResolveInstrumentsWithFiltersDocument = {
                           },
                         ],
                       },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'dataSource' },
+                      },
                     ],
                   },
                 },

package/test/utils.test.ts

@@ -1,32 +1,257 @@
-import { PriceType } from '../src';
-import { DataSource, Division } from '../src/gql/types/graphql';
-import { getLiveRatesDivisionCode } from '../src/InstrumentsTableWidget/utils';
-
-describe('getLiveRatesDivisionCode', () => {
-  it('should return Division.Oc for PriceType.Raw and InstrumentDataSource.Mt5', () => {
-    const division = Division.Oc;
-    const priceType = PriceType.Raw;
-    const dataSource = DataSource.Mt5;
-    expect(getLiveRatesDivisionCode(division, priceType, dataSource)).toBe(
-      Division.Oc
-    );
-  });
-
-  it('should return "MKTD" for PriceType.Raw and DataSource.V20', () => {
-    const division = Division.Oc;
-    const priceType = PriceType.Raw;
-    const dataSource = DataSource.V20;
-    expect(getLiveRatesDivisionCode(division, priceType, dataSource)).toBe(
-      'MKTD'
-    );
-  });
-
-  it('should return the division for PriceType.Division', () => {
-    const division = Division.Oc;
-    const priceType = PriceType.Division;
-    const dataSource = DataSource.Mt5;
-    expect(getLiveRatesDivisionCode(division, priceType, dataSource)).toBe(
-      Division.Oc
-    );
+import { DataSource } from '../src/gql/types/graphql';
+import { groupNamesBySource } from '../src/InstrumentsTableWidget/utils';
+
+describe('groupNamesBySource', () => {
+  it('should return empty arrays for both sources when given empty input', () => {
+    const result = groupNamesBySource([]);
+
+    expect(result).toEqual({
+      v20instruments: [],
+      mt5instruments: [],
+    });
+  });
+
+  it('should group V20 instruments correctly', () => {
+    const items = [
+      {
+        instrument: 'EUR_USD',
+        displayName: 'EUR/USD',
+        dataSource: DataSource.V20,
+      },
+      {
+        instrument: 'GBP_USD',
+        displayName: 'GBP/USD',
+        dataSource: DataSource.V20,
+      },
+    ];
+
+    const result = groupNamesBySource(items);
+
+    expect(result).toEqual({
+      v20instruments: ['EUR_USD', 'GBP_USD'],
+      mt5instruments: [],
+    });
+  });
+
+  it('should group MT5 instruments correctly', () => {
+    const items = [
+      {
+        instrument: 'EUR_USD_CFD',
+        displayName: 'EUR/USD CFD',
+        dataSource: DataSource.Mt5,
+      },
+      {
+        instrument: 'GBP_USD_CFD',
+        displayName: 'GBP/USD CFD',
+        dataSource: DataSource.Mt5,
+      },
+    ];
+
+    const result = groupNamesBySource(items);
+
+    expect(result).toEqual({
+      v20instruments: [],
+      mt5instruments: ['EUR_USD_CFD', 'GBP_USD_CFD'],
+    });
+  });
+
+  it('should group mixed V20 and MT5 instruments correctly', () => {
+    const items = [
+      {
+        instrument: 'EUR_USD',
+        displayName: 'EUR/USD',
+        dataSource: DataSource.V20,
+      },
+      {
+        instrument: 'GBP_USD_CFD',
+        displayName: 'GBP/USD CFD',
+        dataSource: DataSource.Mt5,
+      },
+      {
+        instrument: 'USD_JPY',
+        displayName: 'USD/JPY',
+        dataSource: DataSource.V20,
+      },
+      {
+        instrument: 'AUD_USD_CFD',
+        displayName: 'AUD/USD CFD',
+        dataSource: DataSource.Mt5,
+      },
+    ];
+
+    const result = groupNamesBySource(items);
+
+    expect(result).toEqual({
+      v20instruments: ['EUR_USD', 'USD_JPY'],
+      mt5instruments: ['GBP_USD_CFD', 'AUD_USD_CFD'],
+    });
+  });
+
+  it('should ignore items with unknown data source', () => {
+    const items = [
+      {
+        instrument: 'EUR_USD',
+        displayName: 'EUR/USD',
+        dataSource: DataSource.V20,
+      },
+      {
+        instrument: 'UNKNOWN_INSTRUMENT',
+        displayName: 'Unknown Instrument',
+        dataSource: 'UNKNOWN_SOURCE' as any,
+      },
+      {
+        instrument: 'GBP_USD_CFD',
+        displayName: 'GBP/USD CFD',
+        dataSource: DataSource.Mt5,
+      },
+    ];
+
+    const result = groupNamesBySource(items);
+
+    expect(result).toEqual({
+      v20instruments: ['EUR_USD'],
+      mt5instruments: ['GBP_USD_CFD'],
+    });
+  });
+
+  it('should ignore items with undefined data source', () => {
+    const items = [
+      {
+        instrument: 'EUR_USD',
+        displayName: 'EUR/USD',
+        dataSource: DataSource.V20,
+      },
+      {
+        instrument: 'UNDEFINED_INSTRUMENT',
+        displayName: 'Undefined Instrument',
+        dataSource: undefined as any,
+      },
+      {
+        instrument: 'GBP_USD_CFD',
+        displayName: 'GBP/USD CFD',
+        dataSource: DataSource.Mt5,
+      },
+    ];
+
+    const result = groupNamesBySource(items);
+
+    expect(result).toEqual({
+      v20instruments: ['EUR_USD'],
+      mt5instruments: ['GBP_USD_CFD'],
+    });
+  });
+
+  it('should handle items with missing dataSource property', () => {
+    const items = [
+      {
+        instrument: 'EUR_USD',
+        displayName: 'EUR/USD',
+        dataSource: DataSource.V20,
+      },
+      {
+        instrument: 'MISSING_SOURCE_INSTRUMENT',
+        displayName: 'Missing Source Instrument',
+        // dataSource property is missing
+      } as any,
+      {
+        instrument: 'GBP_USD_CFD',
+        displayName: 'GBP/USD CFD',
+        dataSource: DataSource.Mt5,
+      },
+    ];
+
+    const result = groupNamesBySource(items);
+
+    expect(result).toEqual({
+      v20instruments: ['EUR_USD'],
+      mt5instruments: ['GBP_USD_CFD'],
+    });
+  });
+
+  it('should preserve order of instruments within each source group', () => {
+    const items = [
+      {
+        instrument: 'AUD_USD',
+        displayName: 'AUD/USD',
+        dataSource: DataSource.V20,
+      },
+      {
+        instrument: 'EUR_USD',
+        displayName: 'EUR/USD',
+        dataSource: DataSource.V20,
+      },
+      {
+        instrument: 'GBP_USD',
+        displayName: 'GBP/USD',
+        dataSource: DataSource.V20,
+      },
+    ];
+
+    const result = groupNamesBySource(items);
+
+    expect(result.v20instruments).toEqual(['AUD_USD', 'EUR_USD', 'GBP_USD']);
+  });
+
+  it('should handle large arrays efficiently', () => {
+    const v20Instruments = Array.from({ length: 100 }, (_, i) => ({
+      instrument: `V20_INSTRUMENT_${i}`,
+      displayName: `V20 Instrument ${i}`,
+      dataSource: DataSource.V20,
+    }));
+
+    const mt5Instruments = Array.from({ length: 100 }, (_, i) => ({
+      instrument: `MT5_INSTRUMENT_${i}`,
+      displayName: `MT5 Instrument ${i}`,
+      dataSource: DataSource.Mt5,
+    }));
+
+    const items = [...v20Instruments, ...mt5Instruments];
+
+    const result = groupNamesBySource(items);
+
+    expect(result.v20instruments).toHaveLength(100);
+    expect(result.mt5instruments).toHaveLength(100);
+    expect(result.v20instruments[0]).toBe('V20_INSTRUMENT_0');
+    expect(result.mt5instruments[0]).toBe('MT5_INSTRUMENT_0');
+  });
+
+  it('should handle items with only V20 data source', () => {
+    const items = [
+      {
+        instrument: 'EUR_USD',
+        displayName: 'EUR/USD',
+        dataSource: DataSource.V20,
+      },
+      {
+        instrument: 'GBP_USD',
+        displayName: 'GBP/USD',
+        dataSource: DataSource.V20,
+      },
+    ];
+
+    const result = groupNamesBySource(items);
+
+    expect(result.v20instruments).toEqual(['EUR_USD', 'GBP_USD']);
+    expect(result.mt5instruments).toEqual([]);
+  });
+
+  it('should handle items with only MT5 data source', () => {
+    const items = [
+      {
+        instrument: 'EUR_USD_CFD',
+        displayName: 'EUR/USD CFD',
+        dataSource: DataSource.Mt5,
+      },
+      {
+        instrument: 'GBP_USD_CFD',
+        displayName: 'GBP/USD CFD',
+        dataSource: DataSource.Mt5,
+      },
+    ];
+
+    const result = groupNamesBySource(items);
+
+    expect(result.v20instruments).toEqual([]);
+    expect(result.mt5instruments).toEqual(['EUR_USD_CFD', 'GBP_USD_CFD']);
   });
 });