EventList Component

Embed the EventList component to display and interact with events

The EventList module provides a comprehensive financial events listing with filtering, search, playback, and transcript viewing capabilities.

Overview

EventList displays financial events such as earnings calls, investor days, and conferences. It supports live and upcoming events, historical events, search, filtering, audio playback, and integrated transcript viewing.

Installation

import { EventList } from '@aiera/client-sdk/modules/EventList';

Basic Usage

React Component

import { EventList } from '@aiera/client-sdk/modules/EventList';
import { Provider } from '@aiera/client-sdk/components/Provider';

function App() {
  return (
    <Provider config={{ moduleName: 'EventList' }}>
      <EventList />
    </Provider>
  );
}

Web Embedding

<script src="https://public.aiera.com/aiera-sdk/0.0.80/embed.js"></script>
<script>
  const eventList = new Aiera.Module(
      'https://public.aiera.com/aiera-sdk/0.0.80/modules/EventList/index.html', 
      'YOUR-IFRAME-ID'
  );

  eventList.load().then(() => {
    eventList.authenticateApiKey('your-public-api-key');
  });

  eventList.on('authenticated', () => {
    eventList.configure({
      options: {
        ticker: 'AAPL',
        darkMode: true
      },
      tracking: { userId: '12345' }
    });
  });
</script>

Props

The EventList component accepts the following props:

Props Example

<EventList
  defaultLive={false}
  hidePlaybar
  showHeaderControls={false}
  useConfigOptions
/>

Configuration Options

Configure EventList through the options object:

EventListFilter Configuration

interface EventListFilter {
  name: 'transcripts' | 'earningsOnly';
  visible: boolean;      // Show filter toggle in UI
  defaultValue: boolean; // Initial filter state
}

Configuration Example

eventList.configure({
  options: {
    darkMode: false,
    ticker: 'AAPL',
    eventListView: 'combined',
    eventListFilters: [
      { name: 'transcripts', visible: true, defaultValue: false },
      { name: 'earningsOnly', visible: true, defaultValue: true }
    ],
    showCompanyFilter: true
  },
  tracking: { userId: '12345' }
});

Features

View Modes

Tabs Mode (default):

• "Live Events" tab: Currently live and upcoming events
• "Recent" tab: Historical events, most recent first

Combined Mode:

• Single list showing all events; activated when:
• company selected, search entered, or eventListView: 'combined'

Event Filtering

Search

• Full-text search across events and transcripts
• Debounced input for performance
• Works with company filter

Audio Playback

• Play button for events with audio
• Live stream support
• Recorded audio playback
• Audio offset for jumping to timestamps
• Integrated Playbar component

Transcript Viewing

Click an event to view its full transcript with:

• Real-time updates for live events
• Search highlighting
• Edit capability for custom events (creator only)

Pagination

• Default 30 events per page
• "Load more" button for additional results
• Automatic deduplication of results

Auto-Refresh

• Refreshes every 15 seconds when at list top
• Pauses refresh while browsing older pages
• Visual indicator during refresh

Events

Emitted Events

EventSelected Payload

interface EventSelected {
  ticker?: string;
  title?: string;
  eventId?: string;
  eventType?: string;
  eventDate?: string;
}

Incoming Events

Event Handling Example

// Listen for event selection
eventList.on('event-selected', (event) => {
  console.log(`Selected: ${event.ticker} - ${event.title}`);
  // Navigate to event detail, update analytics, etc.
});

// Listen for company selection
eventList.on('instrument-selected', (ticker) => {
  console.log(`Filtering by: ${ticker}`);
});

// Set up watchlist
eventList.on('authenticated', () => {
  eventList.configure({
    tracking: { userId: '12345' }
  });
});

eventList.on('configured', () => {
  eventList.setWatchlist([
    { ticker: 'AAPL' },
    { ticker: 'GOOGL' },
    { ISIN: 'US02079K1079' }
  ]);
});

Watchlist Integration

Create persistent watchlists by providing a userId in tracking config:

eventList.configure({
  tracking: { userId: '12345' }
});

eventList.on('configured', () => {
  // Set watchlist - creates/updates persistent watchlist
  eventList.setWatchlist([
    { ticker: 'AAPL' },
    { ticker: 'MSFT' },
    { ISIN: 'US0231351067' }  // Can use ISIN instead of ticker
  ]);
});

Custom Event Row

Provide a custom component for rendering event rows:

interface EventRowProps {
  event: EventListEvent;
  onClick: () => void;
  isPlaying: boolean;
}

const CustomEventRow = ({ event, onClick, isPlaying }: EventRowProps) => {
  return (
    <div onClick={onClick} className={isPlaying ? 'playing' : ''}>
      <strong>{event.title}</strong>
      <span>{event.eventDate}</span>
    </div>
  );
};

<EventList EventRow={CustomEventRow} />

Styling

Dark Mode

configure({
  options: { darkMode: true }
});

CSS Classes

Custom Styling

configure({
  overrides: {
    style: `
      .event-row {
        padding: 16px;
        border-bottom: 1px solid #eee;
      }
      .event-row:hover {
        background: #f5f5f5;
      }
    `
  }
});

Internal State

EventList manages the following state:

Example: Ticker-Specific View

<EventList
  defaultLive={false}
  showHeaderControls={false}
  useConfigOptions
/>

With configuration:

configure({
  options: { ticker: 'AAPL' }
});

Shows only Apple events, recent-first, without header controls.

Example: Custom Events Only

<EventList useConfigOptions />

With configuration:

configure({
  options: { customOnly: true }
});

Shows only user-created custom events.

Example: Complete Integration

import { EventList } from '@aiera/client-sdk/modules/EventList';
import { Provider } from '@aiera/client-sdk/components/Provider';
import { useMessageBus } from '@aiera/client-sdk/lib/msg';

function EventViewer() {
  const bus = useMessageBus();

  useEffect(() => {
    // Handle event selection
    const unsubscribe = bus.on('event-selected', (event) => {
      console.log('Event selected:', event);
      // Open in new tab, update state, etc.
    });

    return unsubscribe;
  }, [bus]);

  return (
    <EventList
      defaultLive
      showHeaderControls
      useConfigOptions
    />
  );
}

function App() {
  return (
    <Provider
      config={{
        moduleName: 'EventList',
        tracking: { userId: '12345' },
        options: {
          darkMode: false,
          showGlobalSearch: true,
          eventListFilters: [
            { name: 'transcripts', visible: true, defaultValue: false },
            { name: 'earningsOnly', visible: true, defaultValue: false }
          ]
        }
      }}
    >
      <div style={{ height: '600px' }}>
        <EventViewer />
      </div>
    </Provider>
  );
}

Troubleshooting

Events not loading

1. Verify API authentication is successful 2Ensure network connectivity 3Check browser console for errors

Playbar not appearing

1. Verify hidePlaybar prop is not set
2. Check if events have audio available
3. Ensure Playbar component is rendering

Watchlist not working

1. Confirm tracking.userId is set in configuration
2. Call setWatchlist after configured event
3. Check network requests for watchlist API calls

Filters not applying

1. Verify filter configuration in eventListFilters
2. Check that visible: true is set for filters you want to show

Search not working

1. Verify showGlobalSearch is enabled
2. Check for debounce timing
3. Ensure search term reaches API endpoint

Performance Tips

• Use filters: Reduce data load by filtering to relevant events
• Pagination: Load more events on demand rather than all at once
• Watchlist: Use watchlists to focus on relevant companies
• Auto-refresh: Disable auto-refresh when not needed (scroll down in list)