FDC3 Demo App

fdc3Options: {
  enableLogging: true,
  // Create a single Data Mapping - to FDC3 Instrument Context
  // Use `Name` column (defined by '_colId') as the Instrument Name
  // Use the `Symbol` field (defined by '_field') to map to Ticker (in `id` prop)
  gridDataContextMapping: {
    'fdc3.instrument': {
      name: '_colId.Name',
      id: {
        ticker: '_field.Symbol',
      },
    },
  },
  intents: {
    raises: {
      // Raise 3 Intents: `ViewChart`, `ViewNews` and `ViewInstument`
      // Create an FDC3 Action Button for all 3 Intents
      // Each button will be rendered in the default FDC3 Action Column
      // Note: All 3 Intents use the mapping that was created in `gridDataContextMapping`
      ViewChart: [
        {
          contextType: 'fdc3.instrument',
          actionButton: {
            id: 'viewChartBtn',
            tooltip: 'Raise: ViewChart',
            icon: '_defaultFdc3',
            buttonStyle: {
              tone: 'info',
              variant: 'outlined',
            },
          },
        },
      ],
      ViewNews: [
        {
          contextType: 'fdc3.instrument',
          actionButton: {
            id: 'viewNewsBtn',
            tooltip: 'Raise: ViewNews',
            icon: '_defaultFdc3',
            buttonStyle: {
              variant: 'outlined',
              tone: 'warning',
            },
          },
        },
      ],
      ViewInstrument: [
        {
          contextType: 'fdc3.instrument',
          actionButton: {
            id: 'viewInstrumentBtn',
            tooltip: 'Raise: ViewInstrument',
            icon: {
              name: 'visibility-on',
            },
            buttonStyle: {
              tone: 'error',
              variant: 'outlined',
            },
          },
        },
      ],
      custom: {
        // Raise the Custom `GetPrice` Intent - using a bespoke FDC3 Action Column
        // When we receive a Price, display it in the column (instead of the button)
        GetPrice: [
          {
            contextType: 'fdc3.instrument',
            // Provide a bespoke Action Column definition
            actionColumn: {
              columnId: 'fdc3GetPriceColumn',
              friendlyName: 'Get Price',
              button: {
                id: 'GetPriceButton',
                label: (button, context) => {
                  const price = priceMap.get(context.rowData.Symbol);
                  return !!price ? `$ ${price}` : 'Get Price';
                },
                icon: (button, context) => {
                  const price = priceMap.get(context.rowData.Symbol);
                  return !price
                    ? {
                        name: 'quote',
                      }
                    : null;
                },
                tooltip: (button, context) => {
                  return `Get Price Info for ${context.rowData.Symbol}`;
                },
                buttonStyle: (button, context) => {
                  return priceMap.has(context.rowData.Symbol)
                    ? {
                        tone: 'success',
                        variant: 'text',
                      }
                    : {
                        tone: 'info',
                        variant: 'outlined',
                      };
                },
                disabled: (button, context) => {
                  return priceMap.has(context.rowData.Symbol);
                },
              },
            },
            // Handle the intent resolution by showing the returned Price in the Column
            handleIntentResolution: async (
              handleResolutionContext: HandleFdc3IntentResolutionContext,
            ) => {
              const intentResult =
                await handleResolutionContext.intentResolution.getResult();
              if (!intentResult?.type) {
                return;
              }
              const adaptableApi: AdaptableApi =
                handleResolutionContext.adaptableApi;
              const contextData = intentResult as Fdc3CustomContext;
              const ticker = contextData.id?.ticker;
              const price = contextData.price;
              if (ticker) {
                priceMap.set(ticker, price);
              }
              adaptableApi.gridApi.refreshColumn('fdc3GetPriceColumn');
            },
          },
        ],
      },
    },

    // listen for the 'fdc3.instrument' Context
    listensFor: ['ViewInstrument'],

    // handle the Intent received
    handleIntent: (handleFDC3Context: HandleFdc3Context) => {
      const adaptableApi: AdaptableApi = handleFDC3Context.adaptableApi;
      const ticker = handleFDC3Context.context.id?.ticker;
      const upperTicker = ticker.toUpperCase();

      // Create Row Highlight object, then jump to row and highlight it
      const rowHighlightInfo: RowHighlightInfo = {
        primaryKeyValue: upperTicker,
        timeout: 5000,
        highlightStyle: {
          BackColor: 'Yellow',
          ForeColor: 'Black',
        },
      };
      adaptableApi.gridApi.jumpToRow(upperTicker);
      adaptableApi.gridApi.highlightRow(rowHighlightInfo);

      // Display `Info` System Status Message with details of Intent received
      adaptableApi.systemStatusApi.setInfoSystemStatus(
        'Intent Received: ' + upperTicker,
        JSON.stringify(handleFDC3Context.context),
      );
    },
  },
  contexts: {
    // Broadcast FDC3 Instrument in 2 ways:
    // using a Context Menu Item in Ticker and Name columns
    // via a FDC3 Action Button (which will be rendered in the default FDC3 Action Column)
    // Note: The Context uses the mapping that was created in `gridDataContextMapping`
    broadcasts: {
      'fdc3.instrument': {
        contextMenu: {
          columnIds: ['Ticker', 'Name'],
          icon: '_defaultFdc3',
        },
        actionButton: {
          id: 'broadcastInstrumentBtn',
          icon: { name: 'broadcast' },
          tooltip: `Broadcast: Instrument`,
          buttonStyle: {
            tone: 'success',
            variant: 'outlined',
          },
        },
      },
    },

    // listen for the `ViewInstrument` Context
    listensFor: ['fdc3.instrument'],

    // handle the Context received
    handleContext: (handleFDC3Context: HandleFdc3Context) => {
      if (handleFDC3Context.context.type === 'fdc3.instrument') {
        const adaptableApi: AdaptableApi = handleFDC3Context.adaptableApi;
        const ticker = handleFDC3Context.context.id?.ticker;

        // Filter the Grid using the received Ticker
        adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn('Ticker', {
          PredicateId: 'Is',
          PredicateInputs: [handleFDC3Context.context.id?.ticker],
        });

        // Display `Success` System Status Message with details of Context received
        adaptableApi.systemStatusApi.setSuccessSystemStatus(
          'Context Received: ' + ticker,
          JSON.stringify(handleFDC3Context.context),
        );
      }
    },
  },

  // Narrow width of Default Action Column
  actionColumnDefaultConfiguration: {
    width: 150,
  },
},