// Create a region for each selection, filtered by selected filter

      // Collect all regions to create for collision detection
      const regionsToCreate: Array<{
        startTime: number;
        endTime: number;
        color: string;
        speciesLabels: string;
      }> = [];
      // First pass: collect all regions

          // Create label text from species and call types

          // Create label text from species and call types (shortened)

            const shortName = species.name.length > 15 ? species.name.substring(0, 15) + '...' : species.name;

              ? ` (${species.callTypes.map(ct => ct.name).join(', ')})`

              ? ` (${species.callTypes[0].name})` // Only show first call type

            return `${species.name}${callTypeText}`;

            return `${shortName}${callTypeText}`;

          // Create the region
          state.regionsPlugin.addRegion({
            start: selection.startTime,
            end: selection.endTime,
            color: color + '40', // Add transparency
            content: speciesLabels,
            resize: false,
            drag: false,
            contentEditable: false,
            style: {
              fontSize: '10px',
              padding: '2px 4px',
              position: 'absolute',
              top: '2px',
              left: '4px',
              backgroundColor: 'rgba(255, 255, 255, 0.8)',
              borderRadius: '2px',
            }

          regionsToCreate.push({
            startTime: selection.startTime,
            endTime: selection.endTime,
            color,
            speciesLabels

      // Sort by start time for better collision handling
      regionsToCreate.sort((a, b) => a.startTime - b.startTime);
      // Second pass: create regions with collision-aware positioning
      regionsToCreate.forEach((regionData, index) => {
        const region = state.regionsPlugin.addRegion({
          start: regionData.startTime,
          end: regionData.endTime,
          color: regionData.color + '25', // Slightly more opacity
          resize: false,
          drag: false,
        });
        // Add custom label styling after region is created
        if (region && region.element) {
          // Calculate label position to avoid collisions
          const labelOffset = (index % 3) * 16; // Stagger labels vertically
          
          const label = document.createElement('div');
          label.textContent = regionData.speciesLabels;
          label.style.cssText = `
            position: absolute;
            top: ${2 + labelOffset}px;
            left: 2px;
            font-size: 8px;
            font-weight: 600;
            color: #111827;
            background: rgba(255, 255, 255, 0.98);
            padding: 1px 3px;
            border-radius: 2px;
            border: 0.5px solid rgba(0, 0, 0, 0.15);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
            white-space: nowrap;
            z-index: ${10 + index};
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.1;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          `;
          region.element.appendChild(label);
          
          // Add tooltip on hover for full text
          label.title = regionData.speciesLabels;
        }
      });

                  <option value="all">All Filters</option>

                  <option value="all">All Models</option>