Improve Tag Search

[SHession]

Problem

User research has suggested that tag search in the Media Atom Maker is a cause of frustration:

Kirsten explains how tags behave illogically.

"It feels like the most relevant and important tags sit at the bottom"

Monika shows me the "sports" tag to show how the results are unhelpful. She has to scroll lots to find sports. She also shows me "tories" which is intersting as that's the same tag Kirsten chose to show me.

Solution

Can we replicate the tag search in Composer to improve the UX of this feature?

Dev Notes

It appears the Composer client is querying Tag Manager directly.

Media Atom Maker seems to be proxying calls to a tag endpoint on CAPI via the MAM backend:

media-atom-maker/conf/routes

Line 63 in ff49898

GET /support/previewCapi/*path controllers.Support.capiProxy(path: String, queryLive: Boolean ?= false)

media-atom-maker/public/video-ui/src/services/capi.ts

Lines 73 to 88 in 5871218

	static getTagsByType(query: string, types: string[]) {
	return Promise.all(
	types.map(type => {
	if (query === '*') {
	return apiRequest({
	url: `${ContentApi.proxyUrl}/tags?page-size=100&type=${type}` //TODO this is likely to change based on CAPI work to search by prefix on webTitle
	});
	}
	const encodedQuery = encodeURIComponent(query);
	return apiRequest({
	url: `${ContentApi.proxyUrl}/tags?page-size=200&type=${type}&web-title=${encodedQuery}`
	});
	})
	);
	}
	}

Relevant Composer files:

https://github.com/guardian/flexible-content/blob/56bc89acc0657f61046c1cd27a27270d06c10534/flexible-frontend/src/app/hooks/useDebouncedSearchTags.ts#L36-L44

https://github.com/guardian/flexible-content/blob/76a93b053c7985bcca34caf93c76b6d26e65b5a5/flexible-frontend/src/app/libs/services/tag-manager-service.ts#L186-L198

https://github.com/guardian/flexible-content/blob/c1e3c6a634cd38b993ec6da0914cde5bb021c6dc/flexible-frontend/src/app/libs/tag-manager-client.ts#L94-L106