HTML Metadata Tags Displayed as Text in Expanded Call View

[VWJF]

This issue is reported and written on behalf of @JKBF. It contains content produced by an AI Agent.

Description

When expanding call spectrograms in the Bigg's (West Coast Transient) catalog, HTML meta tags are incorrectly displayed as visible text below the call information. This includes meta tags for description, author, keywords, viewport, and Open Graph properties.

Steps to Reproduce

1. Navigate to the Call Catalogue Viewer
2. Select the Bigg's (West Coast Transient) catalog
3. Click on any call to expand the spectrogram view (e.g., WCT02)
4. Scroll down to view the area below the play button and call details

Expected Behavior

The expanded call view should only display:

• Spectrogram and waveform images
• Play button with call name
• Call metadata (Sample, Clan, Subclan, Population)
• Any relevant call notes or description content

HTML meta tags should not be visible to users as they are page metadata elements.

Actual Behavior

Below the call information (Sample, Clan, Subclan, Population), raw HTML code is displayed as plain text, including:

• <meta name="description" content="...">
• <meta name="author" content="...">
• <meta name="keywords" content="...">
• <meta name="viewport" content="...">
• <meta property="og:locale" content="...">
• <meta property="og:site_name" content="...">
• <meta property="og:title" content="...">
• <meta property="og:type" content="...">
• And potentially more meta tags

Scope

• Confirmed affected: Bigg's (West Coast Transient) catalog calls
• Confirmed unaffected: Other catalogs (NRKW, SRKW, etc.)

Screenshot

See attached screenshot showing the issue with call WCT02.

Priority

Medium - This is a display issue that doesn't break functionality but significantly impacts user experience and appears unprofessional.

[VWJF]

Root Cause Identified

The issue occurs when rendering markdown description files for catalog entries with apostrophes in their names (e.g., "Bigg's").

Technical Details:

In js/GridPanel.js line 1192, the code uses zero-md to render markdown files with the src attribute.

https://github.com/coastal-science/call-catalog-viewer/blob/c0c89b7/js/GridPanel.js#L1192

When the file path contains catalog names with apostrophes (like "Bigg's (West Coast Transient)"), the following happens:

1. The filename is encoded using encodeURIComponent() to handle spaces and special characters
2. However, encodeURIComponent() does NOT encode apostrophes (')
3. If the src attribute was delimited with single quotes (src='${file}'), the apostrophe in "Bigg's" would prematurely terminate the attribute value
4. This causes the browser to interpret the remaining content as raw HTML, which is why the meta tags were being displayed

Solution

Change the src attribute delimiter to use double quotes:

Before: src=${file}
After: src="${file}"

This ensures that apostrophes in filenames like "Bigg's" are safely contained within the attribute value.

Trade-off: Filenames cannot contain double-quotes, but this is acceptable since double-quotes are extremely rare in filenames while apostrophes are common (especially in taxonomic names like "Bigg's").

Status

✅ Fixed - The change has been committed in commit c0c89b7 on the release2.0 branch.

Verification

This fix resolves the issue for all Bigg's/WCT catalog entries while maintaining compatibility with other catalogs that don't have apostrophes in their names.