Interactive atom search by tomrf1 · Pull Request #1979 · guardian/facia-tool

tomrf1 · 2026-04-24T14:57:05Z

Interactive atoms can be added to a front collection as a snap link.
This is done by dragging a url into the clipboard on the left, and then dragging from there into a collection.

This mechanism is used for thrashers.
The card then flows through to Frontend/MAPI as a snap link.

This PR proposes an alternative way to achieve the same thing in the tool. There are two motivations behind this:

improved UX for finding and adding interactive atoms, since they are in CAPI.
a stepping stone towards supporting other types of atoms. E.g. we are considering implementing thrashers differently (natively in dotcom-rendering, rather than as interactive atoms)

An "Include atoms" checkbox is added to the content search settings:

If ticked, the results will include interactive atoms from CAPI as well as content. They will appear at the bottom of the results list:

In the client, any interactive atoms retrieved this way are modelled as a INTERACTIVE_ATOM rather than as a SNAP_LINK.
When the user drags an interactive atom from the list into a collection it is still persisted as a snap. This means the only change here is to the client side of the tool.

Downstream systems (e.g. Frontend/MAPI) should be unaffected.

davidfurey · 2026-04-24T15:19:57Z

 	RECIPE: 'recipe',
 	CHEF: 'chef',
 	FEAST_COLLECTION: 'feast-collection',
+	INTERACTIVE_ATOM: 'interactive-atom',


What do you think about making this just ATOM: 'atom' rather than also specifying that it is interactive?

This enum value is only used client-side in the tool. The shape of interactive atoms differs from other atoms in CAPI, so I think we'd still need some way of handling them differently in the client.
It's a bit hard to say right now, but I'm inclined to be more specific here, and we can revisit this later when we introduce more atom types to the tool.

github-actions · 2026-05-08T13:04:03Z

Deploy build 9616 of `cms-fronts::facia-tool` to CODE

All deployment options

From guardian/actions-riff-raff.

Copilot

Pull request overview

Adds support for discovering interactive atoms via CAPI search and dragging them into collections/clipboard, while still persisting them downstream as snap links (client-side only change).

Changes:

Adds an “Include atoms” search option and extends the CAPI feed to fetch interactive atoms alongside articles.
Introduces an interactive-atom drag/drop type and UI rendering for atom feed items and cards.
Generalises async resource bundle ordering to support non-string order entries (used by the mixed article/atom feed).

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
fronts-client/src/util/snap.ts	Adds helper to create snap cards from interactive atom search results.
fronts-client/src/util/externalArticle.ts	Updates staleness selector to handle interactive atoms.
fronts-client/src/util/collectionUtils.ts	Adds `INTERACTIVE_ATOM` drop type mapping for drag-and-drop.
fronts-client/src/util/card.ts	Routes interactive-atom drops to snap creation.
fronts-client/src/types/Capi.ts	Introduces `CapiInteractiveAtom` + type guard.
fronts-client/src/services/capiQuery.ts	Adds `/atoms` query support for interactive atoms.
fronts-client/src/lib/createAsyncResourceBundle/index.ts	Generalises stored fetch order typing to non-string orders.
fronts-client/src/constants/cardTypes.ts	Adds `INTERACTIVE_ATOM` card type constant.
fronts-client/src/components/feed/SearchInput.tsx	Adds “Include atoms” checkbox to search filters.
fronts-client/src/components/feed/Feed.tsx	Renders a mixed feed (articles + atoms) based on typed order entries.
fronts-client/src/components/feed/CapiSearchContainer.tsx	Plumbs `includeAtoms` through to feed fetch params.
fronts-client/src/components/feed/AtomFeedItem.tsx	New feed item UI + drag payload for interactive atoms.
fronts-client/src/components/feed/ArticleFeedItem.tsx	Avoids rendering articles when the resource is actually an atom.
fronts-client/src/components/card/interactiveAtom/InteractiveAtomCard.tsx	New card UI for interactive atom snaps.
fronts-client/src/components/card/Card.tsx	Adds rendering branch for `INTERACTIVE_ATOM` cards and disables meta form.
fronts-client/src/bundles/capiFeedBundle.ts	Fetches atoms in parallel and builds a typed mixed feed order.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+		atoms: async (params: { q?: string }): Promise<CAPIAtomsQueryResponse> => {
+			return fetchCAPIResponse<CAPIAtomsQueryResponse>(
+				`${baseURL}/atoms${qs({
+					types: 'interactive',
+					searchFields: 'data.interactive.interactive_title',
+					...params,
+				})}`,
+			);
+		},


davidfurey

I've added some feedback but I don't think we should let that block us getting this feature out.

Before merging we should discuss a comms strategy with CP

davidfurey · 2026-06-10T08:15:36Z

-		results: checkIsContent(response) ? [response.content] : response.results,
+		results: checkIsContent(response)
+			? [response.content]
+			: [...response.results, ...atomResults],


Would it be difficult to sort the results here so that atoms and articles are in one list? It seems unintuitive for atoms to be at the bottom with no UX hint that this is the case

Yes good point, perhaps the UX needs a rethink here. If the user is looking for an atom, do they even want to see articles and atoms mixed together?

davidfurey · 2026-06-10T08:18:59Z

-						response.results.filter(isNonCommercialArticle, {
+					prefillActions.fetchSuccess(filteredResults, {
+						order: filteredResults.map((item) => item.id),
+						pagination: {


Presumably the pagination of atoms and articles is independent? So given that we publish many more articles than interactive atoms, page 5 will continue quite fresh articles but quite old atoms?

github-actions · 2026-07-13T06:57:12Z

This PR is stale because it has been open 30 days with no activity. Unless a comment is added or the “stale” label removed, this will be closed in 3 days

Georges-GNM · 2026-07-16T16:06:24Z

Just for info - I've picked on up on this branch and spiked an expansion to the functionality to include surfacing more atoms (those created in atom workshop), as part of discovery work for the event kit mission (and thanks a ton @tomrf1 - your work was really helpful) . We're planning to chat to CP about this relatively soon, so I'm happy to bring up the question of UX and release comms with them then.

tomrf1 added 3 commits April 24, 2026 09:11

WIP atom search

73bfa91

comments

4952281

interactive atom card

08b4c4b

davidfurey reviewed Apr 24, 2026

View reviewed changes

tomrf1 added 2 commits May 8, 2026 13:20

Merge branch 'main' into tf-atom-search

a612ab6

fix order

f405344

tomrf1 added 2 commits May 22, 2026 14:45

refactor createSelectIsArticleStale to handle both

2041e62

model atoms response properly

d105103

tomrf1 requested a review from Copilot May 22, 2026 14:34

Copilot started reviewing on behalf of tomrf1 May 22, 2026 14:34 View session

Copilot AI reviewed May 22, 2026

View reviewed changes

tomrf1 added 4 commits June 5, 2026 11:50

Merge branch 'main' into tf-atom-search

d26e5f5

use INTERACTIVE_ATOM type instead of cast

2b8a497

fix stale timestamp check

35b8fb6

test for createAtomSnapFromInteractiveAtom

76c991b

tomrf1 commented Jun 5, 2026

View reviewed changes

Comment thread fronts-client/src/lib/createAsyncResourceBundle/index.ts Outdated

tomrf1 added 2 commits June 5, 2026 14:56

Simplify feed bundle changes

1051d6a

revert createAsyncResourceBundle changes

c1ebced

tomrf1 marked this pull request as ready for review June 5, 2026 14:11

tomrf1 requested a review from a team as a code owner June 5, 2026 14:11

davidfurey approved these changes Jun 10, 2026

View reviewed changes

github-actions Bot added the Stale label Jul 13, 2026

github-actions Bot removed the Stale label Jul 20, 2026

Uh oh!

Conversation

tomrf1 commented Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davidfurey Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

tomrf1 May 8, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy build 9616 of cms-fronts::facia-tool to CODE

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

davidfurey left a comment

Choose a reason for hiding this comment

Uh oh!

davidfurey Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

tomrf1 Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

davidfurey Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 13, 2026

Uh oh!

Georges-GNM commented Jul 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tomrf1 commented Apr 24, 2026 •

edited

Loading

github-actions Bot commented May 8, 2026 •

edited

Loading

Deploy build 9616 of `cms-fronts::facia-tool` to CODE