Populate concept pages using ID instead of label [TOGGLED]

content/webapp/components/SearchPagesLink/Images.tsx

@@ -27,7 +27,9 @@ const emptyImagesProps: ImagesProps = {
   'source.production.dates.from': undefined,
   'source.genres.concepts': [],
   'source.subjects.label': [],
+  'source.subjects.concepts': [],
   'source.contributors.agent.label': [],
+  'source.contributors.concepts': [],
   color: undefined,
   sort: undefined,
   sortOrder: undefined,
@@ -42,7 +44,9 @@ const codecMap = {
   'source.production.dates.from': maybeStringCodec,
   'source.genres.concepts': csvCodec,
   'source.subjects.label': quotedCsvCodec,
+  'source.subjects.concepts': csvCodec,
   'source.contributors.agent.label': quotedCsvCodec,
+  'source.contributors.concepts': csvCodec,
   color: maybeStringCodec,
   sort: maybeStringCodec,
   sortOrder: maybeStringCodec,

content/webapp/components/SearchPagesLink/Works.tsx

@@ -26,7 +26,9 @@ const emptyWorksProps: WorksProps = {
   'genres.label': [],
   'genres.concepts': [],
   'subjects.label': [],
+  'subjects.concepts': [],
   'contributors.agent.label': [],
+  'contributors.concepts': [],
   sort: undefined,
   sortOrder: undefined,
   'partOf.title': undefined,
@@ -44,7 +46,9 @@ const codecMap = {
   'genres.label': quotedCsvCodec,
   'genres.concepts': csvCodec,
   'subjects.label': quotedCsvCodec,
+  'subjects.concepts': csvCodec,
   'contributors.agent.label': quotedCsvCodec,
+  'contributors.concepts': csvCodec,
   sort: maybeStringCodec,
   sortOrder: maybeStringCodec,
   'partOf.title': maybeStringCodec,

content/webapp/components/SearchPagesLink/WorksLink.test.tsx

@@ -19,8 +19,10 @@ describe('WorksLink', () => {
         'genres.concepts': [],
         'genres.label': [],
         'subjects.label': [],
+        'subjects.concepts': [],
         languages: [],
         'contributors.agent.label': [],
+        'contributors.concepts': [],
       });
     });
 
@@ -49,8 +51,10 @@ describe('WorksLink', () => {
         'genres.concepts': [],
         'genres.label': [],
         'subjects.label': [],
+        'subjects.concepts': [],
         languages: [],
         'contributors.agent.label': [],
+        'contributors.concepts': [],
       });
     });
   });

content/webapp/pages/concepts/[conceptId].tsx

@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import { pageDescriptionConcepts } from '@weco/common/data/microcopy';
 import { ImagesLinkSource } from '@weco/common/data/segment-values';
 import { getServerData } from '@weco/common/server-data';
+import { useToggles } from '@weco/common/server-data/Context';
 import { appError, AppErrorProps } from '@weco/common/services/app';
 import { Pageview } from '@weco/common/services/conversion/track';
 import { font } from '@weco/common/utils/classnames';
@@ -42,7 +43,8 @@ import {
   allRecordsLinkParams,
   conceptTypeDisplayName,
   getDisplayIdentifierType,
-  queryParams,
+  queryParamsById,
+  queryParams as queryParamsByLabel,
 } from '@weco/content/utils/concepts';
 import { cacheTTL, setCacheControl } from '@weco/content/utils/setCacheControl';
 
@@ -259,6 +261,9 @@ export const ConceptPage: NextPage<Props> = ({
   apiToolbarLinks,
 }) => {
   useHotjar(true);
+  const { conceptsById } = useToggles();
+  const linkParams = conceptsById ? queryParamsById : allRecordsLinkParams;
+
   const pathname = usePathname();
   const worksTabs = tabOrder
     .map(relationship => {
@@ -271,7 +276,7 @@ export const ConceptPage: NextPage<Props> = ({
         resultsGroup: data.works,
         tabLabelText: data.label,
         link: toWorksLink(
-          allRecordsLinkParams(tabId, conceptResponse),
+          linkParams(tabId, conceptResponse),
           linkSources[tabId]
         ),
       });
@@ -291,7 +296,7 @@ export const ConceptPage: NextPage<Props> = ({
         resultsGroup: sectionsData[relationship].images,
         tabLabelText: sectionsData[relationship].label,
         link: toImagesLink(
-          allRecordsLinkParams(tabId, conceptResponse),
+          linkParams(tabId, conceptResponse),
           `${linkSources[tabId]}_${pathname}` as ImagesLinkSource
         ),
       });
@@ -449,6 +454,9 @@ export const getServerSideProps: GetServerSideProps<
     );
   }
 
+  const filterByConceptId = serverData.toggles?.conceptsById?.value;
+  const queryParams = filterByConceptId ? queryParamsById : queryParamsByLabel;
+
   const getConceptWorks = (sectionName: string) =>
     getWorks({
       params: queryParams(sectionName, conceptResponse),

content/webapp/utils/concepts.ts

@@ -21,12 +21,14 @@ export const conceptTypeDisplayName = (conceptResponse: ConceptType) => {
     ? 'Type/Technique'
     : conceptResponse.type;
 };
+
 const commonKeys = {
   worksAbout: { filter: 'subjects.label', fields: ['label'] },
   worksBy: { filter: 'contributors.agent.label', fields: ['label'] },
   imagesAbout: { filter: 'source.subjects.label', fields: ['label'] },
   imagesBy: { filter: 'source.contributors.agent.label', fields: ['label'] },
 };
+
 // Definition of the fields used to populate each section
 // of the page, and to define the link to the "all" searches.
 // Currently, only genres use the id to filter
@@ -61,6 +63,33 @@ const linkKeys = {
   ...linkOnlyKeys,
 };
 
+const keysById = {
+  worksAbout: {
+    filter: 'subjects.concepts',
+    fields: ['id', 'sameAs'],
+  },
+  worksBy: {
+    filter: 'contributors.concepts',
+    fields: ['id', 'sameAs'],
+  },
+  imagesAbout: {
+    filter: 'source.subjects.concepts',
+    fields: ['id', 'sameAs'],
+  },
+  imagesBy: {
+    filter: 'source.contributors.concepts',
+    fields: ['id', 'sameAs'],
+  },
+  worksIn: {
+    filter: 'genres.concepts',
+    fields: ['id', 'sameAs'],
+  },
+  imagesIn: {
+    filter: 'source.genres.concepts',
+    fields: ['id', 'sameAs'],
+  },
+};
+
 const gatherValues = (conceptResponse: ConceptType, fields: string[]) => {
   return fields.reduce(
     (acc, current) => acc.concat(conceptResponse[current]),
@@ -81,6 +110,19 @@ export const queryParams = (
   };
 };
 
+export const queryParamsById = (
+  sectionName: string,
+  conceptResponse: ConceptType
+) => {
+  const queryDefinition = keysById[sectionName];
+  return {
+    [queryDefinition.filter]: gatherValues(
+      conceptResponse,
+      queryDefinition.fields
+    ),
+  };
+};
+
 export const allRecordsLinkParams = (
   sectionName: string,
   conceptResponse: ConceptType