Add search box to Transcript tab

[elynema]

Description

Create a new component in Ramp to provide transcript search. If we decide to extend search to metadata and/or other annotations, we can pull this component out from nesting within transcript component and let it stand on its own.

User can enter / refine a single search term. We do not need to support the ability to add multiple independent search terms like Aviary supports.

Likely, this search box will be wired up to back-end Content Search API, but need to finalize that before beginning on tying this to back-end. We can use a sample response to test this out before the search service is fully in place.

To start, implementing the search pieces in the same way the other module pieces work in the transcript component. In the future, this could be broken out as a separate component in the future instead of as a module.

Done Looks Like

• Evaluate how closely Third Wave search box implementation works with our requirements
• Search box is located above the drop-down on transcript tab (like Alexander Street Press)
• Magnifying glass icon button is next to the text field (matching the site search styling in Avalon); selecting the button submits the form, Return key also submits the form
• Placeholder text is "Search transcript"
• Transcript search returns search results for all existing transcripts for current canvas.
• Below / next to search box, show number of hits with arrows to page through them in transcript text
• Drop-down to select transcript shows # of hits in each transcript (like Aviary)
• Link to Clear search available after searching

Mockups

Search box with placeholder text

Search with results and search navigation + "Clear" link

Changing Width of Selection Box (potential change)

[joncameron]

This issue needs a mockup! We have visual examples to draw from in the Google document about transcript display and searching.

[joncameron]

Should this be moved to the Ramp repository?

[joncameron]

@joncameron to write a separate issue for extending the drop-down listing of transcript documents and changing the download button. Styling also needs to be considered and changed from the mockup to match existing styling and for accessibility.

[patrick-lienau]

Last year my company forked ramp to implement similar functionality for a client. We had another project come up and I never got the opportunity to PR my work. Since then, the upstream has changed enough to make a direct PR difficult so in the past week I've gone and reimplemented the functionality off the current codebase.

@joncameron please know that we do intend to contribute this functionality in the very near future. I believe we have a meeting on the 17th regarding this.

[elynema]

@patrick-lienau Any chance you can drop us a PR with these front-end code chages before May 17? We'd like to take a look at it.

[patrick-lienau]

@elynema Certainly. I expect I'll have something to PR by Friday (the 10th)

[elynema]

@joncameron @Dananji Took a quick look on the demo site at how the contributed code works, and I see a couple of things to decide how to handle:

• there's no magnifying glass to submit the search. It's automatically submitted as you type. Is that sufficient or do we want to add a button? Would a button increase accessibility?
• The previous and next buttons don't have left / right arrows on them. That seems like an easy positive thing to add.

The other items not yet checked off rely on connecting to an underlying search service to get results across transcripts/annotations.

Currently, the search box is only supporting phrase search for multi-term searches. Not sure what will be supported once we hook up the new back-end?

[elynema]

Do the styling work as part of this ticket; create a new ticket for searching across all transcripts and adding transcript hit counts for each transcript in the drop-down.