Merge pull request #109 from guardian/pf/experiment-category-mappings…

…-in-ui Add experimental subjects lookup for debugging
guardian · Jan 27, 2025 · 53f0c61 · 53f0c61
2 parents a4f6a28 + f0fb5be
commit 53f0c61
Show file tree

Hide file tree

Showing 3 changed files with 6,846 additions and 1 deletion.
diff --git a/newswires/client/src/WireDetail.tsx b/newswires/client/src/WireDetail.tsx
@@ -6,13 +6,17 @@ import {
 	EuiDescriptionListTitle,
 	EuiFlexGroup,
 	EuiFlexItem,
+	EuiListGroupItem,
+	EuiPanel,
 	EuiScreenReaderLive,
 	EuiSpacer,
+	EuiText,
 	useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { Fragment, useMemo } from 'react';
 import sanitizeHtml from 'sanitize-html';
+import { lookupCatCodesWideSearch } from './catcodes-lookup';
 import type { WireData } from './sharedTypes';
 
 export const WireDetail = ({
@@ -23,7 +27,7 @@ export const WireDetail = ({
 	isShowingJson: boolean;
 }) => {
 	const theme = useEuiTheme();
-	const { byline, keywords, usage, ednote } = wire.content;
+	const { byline, keywords, usage, ednote, subjects } = wire.content;
 
 	const safeBodyText = useMemo(() => {
 		return wire.content.bodyText
@@ -44,6 +48,11 @@ export const WireDetail = ({
 		[keywords],
 	);
 
+	const nonEmptySubjects = useMemo(
+		() => subjects?.code.filter((subject) => subject.trim().length > 0) ?? [],
+		[subjects],
+	);
+
 	return (
 		<Fragment>
 			{isShowingJson ? (
@@ -94,6 +103,51 @@ export const WireDetail = ({
 								</EuiDescriptionListDescription>
 							</>
 						)}
+						{nonEmptySubjects.length > 0 && (
+							<>
+								<EuiDescriptionListTitle>Subjects</EuiDescriptionListTitle>
+								<EuiDescriptionListDescription>
+									<EuiPanel>
+										<section
+											css={css`
+												max-height: 200px;
+												overflow-y: auto;
+											`}
+										>
+											<EuiDescriptionList>
+												{nonEmptySubjects.map((subject) => (
+													<>
+														<EuiDescriptionListTitle>
+															<EuiText size="s">{subject}</EuiText>
+														</EuiDescriptionListTitle>
+														<EuiDescriptionListDescription key={subject}>
+															{lookupCatCodesWideSearch(subject).length > 0 ? (
+																<>
+																	{lookupCatCodesWideSearch(subject).map(
+																		(category) => (
+																			<EuiListGroupItem
+																				key={category}
+																				label={category}
+																				size="xs"
+																				iconType={'dot'}
+																			></EuiListGroupItem>
+																		),
+																	)}
+																</>
+															) : (
+																<EuiText color="danger" key={subject} size="xs">
+																	No category label found
+																</EuiText>
+															)}
+														</EuiDescriptionListDescription>
+													</>
+												))}
+											</EuiDescriptionList>
+										</section>
+									</EuiPanel>
+								</EuiDescriptionListDescription>
+							</>
+						)}
 						{nonEmptyKeywords.length > 0 && (
 							<>
 								<EuiDescriptionListTitle>Keywords</EuiDescriptionListTitle>

diff --git a/newswires/client/src/catcodes-lookup.ts b/newswires/client/src/catcodes-lookup.ts
@@ -0,0 +1,28 @@
+import { lookupTables } from './category-code-lookup-tables';
+
+const qCodePrefixesLookup = {
+	medtop: ['IPTC MediaTopics'],
+	subj: ['IPTC NewsCodes', 'IPTC MediaTopics'],
+	a1312cat: ['A1312 CatCodes'],
+	n2000: ['N2000 Codes'],
+	n2: ['N2000 Codes'],
+};
+
+export function lookupCatCodesWideSearch(catCode: string): string[] {
+	return lookupTables
+		.map((table) => {
+			if (table.lookup[catCode]) {
+				return `${table.lookup[catCode]} (${table.name})`;
+			}
+			if (table.lookup[catCode.toUpperCase()]) {
+				return `${table.lookup[catCode.toUpperCase()]} (${table.name})`;
+			}
+			if (table.lookup[catCode.toLowerCase()]) {
+				return `${table.lookup[catCode.toLowerCase()]} (${table.name})`;
+			}
+			if (catCode.includes(':') && table.lookup[catCode.split(':')[1]]) {
+				return `${table.lookup[catCode.split(':')[1]]} (${table.name})`;
+			}
+		})
+		.filter((item): item is string => !!item);
+}