oedb-backend/DEMO_POPUP_ENHANCEMENT.md

Demo Page Popup Enhancement

Overview

The /demo endpoint of the OpenEventDatabase API provides an interactive map that displays current events from the database. This document describes the enhancement made to the event popups on the map, which now display all properties of each event.

Changes Made

Previously, the event popups only displayed a few selected properties:

• Event name (label)
• Date (when)
• Type (what)
• A link to more information (if available)

Now, the popups display all properties of each event, providing a more comprehensive view of the event data. The enhancements include:

1. Complete Property Display: All properties from the event's JSON object are now displayed in the popup.
2. Organized Layout: Properties are displayed in a table format with property names in the left column and values in the right column.
3. Alphabetical Sorting: Properties are sorted alphabetically for easier navigation.
4. Scrollable Container: A scrollable container is used to handle events with many properties without making the popup too large.
5. Smart Formatting:
   • Objects are displayed as formatted JSON
   • URLs are displayed as clickable links
   • Null values are displayed as "null" in italics
   • Other values are displayed as strings

Example

When you click on an event marker on the map, a popup will appear showing all properties of the event. For example:

Event Name

createdate: 2023-09-15T12:00:00Z
id: 123e4567-e89b-12d3-a456-426614174000
lastupdate: 2023-09-15T12:00:00Z
source: https://example.com/event
start: 2023-09-15T12:00:00Z
stop: 2023-09-16T12:00:00Z
type: scheduled
what: sport.match.football
what:series: Euro 2024
where: Stadium Name

Technical Implementation

The enhancement was implemented by modifying the JavaScript code in the demo.py file. The key changes include:

// Create popup content
let popupContent = '<div class="event-popup">';
popupContent += `<h3>${properties.label || 'Event'}</h3>`;

// Display all properties
popupContent += '<div style="max-height: 300px; overflow-y: auto;">';
popupContent += '<table style="width: 100%; border-collapse: collapse;">';

// Sort properties alphabetically for better organization
const sortedKeys = Object.keys(properties).sort();

for (const key of sortedKeys) {
    // Skip the label as it's already displayed as the title
    if (key === 'label') continue;
    
    const value = properties[key];
    let displayValue;
    
    // Format the value based on its type
    if (value === null || value === undefined) {
        displayValue = '<em>null</em>';
    } else if (typeof value === 'object') {
        displayValue = `<pre style="margin: 0; white-space: pre-wrap;">${JSON.stringify(value, null, 2)}</pre>`;
    } else if (typeof value === 'string' && value.startsWith('http')) {
        displayValue = `<a href="${value}" target="_blank">${value}</a>`;
    } else {
        displayValue = String(value);
    }
    
    popupContent += `
    <tr style="border-bottom: 1px solid #eee;">
        <td style="padding: 4px; font-weight: bold; vertical-align: top;">${key}:</td>
        <td style="padding: 4px;">${displayValue}</td>
    </tr>`;
}

popupContent += '</table>';
popupContent += '</div>';

Benefits

This enhancement provides several benefits:

1. More Information: Users can now see all available information about an event without having to make additional API calls.
2. Better Debugging: Developers can more easily debug issues with event data by seeing all properties.
3. Improved User Experience: The organized layout and smart formatting make it easier to read and understand the event data.
4. Transparency: Users can see exactly what data is stored for each event.

How to Test

1. Start the server:

   python3 backend.py
   

2. Open a web browser and navigate to:

   http://127.0.0.1:8080/demo
   

3. Click on any event marker on the map to see the enhanced popup with all properties displayed.

Future Improvements

Potential future improvements for the popup display:

1. Add filtering options to show only certain categories of properties
2. Add the ability to copy property values to the clipboard
3. Add visualization for temporal data (e.g., timeline for start and stop times)
4. Add the ability to edit event properties directly from the popup
5. Add support for displaying images or other media that might be included in event properties