518 update timeline configuration and rendering

client/CHANGELOG.md

@@ -8,6 +8,8 @@ All notable changes to this project will be documented in this file.
 
 ### Changed
 
+- Changed timeline data parsing and rendering functions to not rely on facet names ([#518](https://github.com/project-lux/lux-frontend/issues/518)).
+
 ### Fixed
 
 ### Removed
@@ -135,11 +137,13 @@ All notable changes to this project will be documented in this file.
 ### Added
 
 - Added namespace to LUX ID input in the advanced search ([#714](https://github.com/project-lux/lux-frontend/issues/714)).
+- Added objects included, works about, works caused by, and sets caused by to timelines on Event pages ([#518](https://github.com/project-lux/lux-frontend/issues/518)).
 
 ### Changed
 
 - Changed advanced search LUX IDs to be editable ([#827](https://github.com/project-lux/lux-frontend/issues/827)).
 - Changed the styling of About sections on People and Groups, Places, Concepts, and Events pages ([#670](https://github.com/project-lux/lux-frontend/issues/670)).
+- Changed 'Works Caused By' to 'Works Generated By' ([#565](https://github.com/project-lux/lux-frontend/issues/565)).
 
 ### Fixed
 

client/src/config/eventSearchTags.ts

@@ -17,8 +17,8 @@ export const relatedEntites: IHalLinks = {
     searchTag: 'lux:eventWorksAbout',
     tab: 'works',
   },
-  worksCausedBy: {
-    title: 'Works Caused By',
+  worksGeneratedBy: {
+    title: 'Works Generated By',
     searchTag: 'lux:eventCausedWorks',
     tab: 'works',
   },
@@ -101,9 +101,28 @@ export const relatedAccordions: IHalLinks = {
 
 // Used for rendering timelines
 export const timelines: IHalLinks = {
+  itemIncludedDate: {
+    searchTag: 'lux:eventItemIncludedTime',
+    tab: 'objects',
+  },
+  itemProductionDate: {
+    searchTag: 'lux:eventItemMadeTime',
+    tab: 'objects',
+  },
+  workCreationOrPublicationDate: {
+    searchTag: 'lux:eventWorksAboutTime',
+    tab: 'works',
+  },
+  workCausedBy: {
+    searchTag: 'lux:eventWorksCausedByTime',
+    tab: 'works',
+  },
+  setCausedBy: {
+    searchTag: 'lux:eventSetsCausedByTime',
+    tab: 'collections',
+  },
   setAboutDate: {
-    searchTag: 'lux:eventSetAboutTime',
+    searchTag: 'lux:eventSetsAboutTime',
     tab: 'collections',
-    jsonSearchTerm: 'publishedDate,createdDate',
   },
 }

client/src/config/personAndGroupSearchTags.ts

@@ -69,43 +69,36 @@ export const timelines: IHalLinks = {
   itemProductionDate: {
     searchTag: 'lux:agentItemMadeTime',
     tab: 'objects',
-    jsonSearchTerm: 'producedDate',
   },
   // Objects Encountered By
   itemEncounteredDate: {
     searchTag: 'lux:agentItemEncounteredTime',
     tab: 'objects',
-    jsonSearchTerm: 'encounteredDate',
   },
   // Works Created By
   workCreationDate: {
     searchTag: 'lux:agentWorkCreatedTime',
     tab: 'works',
-    jsonSearchTerm: 'createdDate',
   },
   // Works Published By
   workPublicationDate: {
     searchTag: 'lux:agentWorkPublishedTime',
     tab: 'works',
-    jsonSearchTerm: 'publishedDate',
   },
   // Collections About
   setAboutDate: {
     searchTag: 'lux:agentSetAboutTime',
     tab: 'collections',
-    jsonSearchTerm: 'publishedDate,createdDate',
   },
   // Collections Created By
   setCreationDate: {
     searchTag: 'lux:agentSetCreatedTime',
     tab: 'collections',
-    jsonSearchTerm: 'createdDate',
   },
   // Collections Published By
   setPublicationDate: {
     searchTag: 'lux:agentSetPublishedTime',
     tab: 'collections',
-    jsonSearchTerm: 'publishedDate',
   },
 }
 

client/src/config/timeline.ts

@@ -1,13 +1,32 @@
-export const facetNameMap: Map<string, string> = new Map([
-  ['itemProductionDate', 'Objects Produced'],
-  ['itemEncounteredDate', 'Objects Encountered'],
-  ['itemIncludedDate', 'Objects in Exhibition'],
-  ['workGeneratedBy', 'Works Generated By'],
-  ['workCreationDate', 'Works Created'],
-  ['workPublicationDate', 'Works Published'],
-  ['workCreationOrPublicationDate', 'Works About'],
-  ['setAboutDate', 'Collections About'],
-  ['setCausedByDate', 'Collections Caused By'],
-  ['setCreationDate', 'Collections Created'],
-  ['setPublicationDate', 'Collections Published'],
+export const halLinkMapToLegendName: Map<string, string> = new Map([
+  // Agent Search Tags
+  ['lux:agentItemMadeTime', 'Objects Produced'],
+  ['lux:agentItemEncounteredTime', 'Objects Encountered'],
+  ['lux:agentWorkCreatedTime', 'Works Created'],
+  ['lux:agentWorkPublishedTime', 'Works Published'],
+  ['lux:agentSetAboutTime', 'Collections About'],
+  ['lux:agentSetCreatedTime', 'Collections Created'],
+  ['lux:agentSetPublishedTime', 'Collections Published'],
+
+  // Concept Search Tags
+  ['lux:conceptItemMadeTime', 'Objects Produced'],
+  ['lux:conceptItemEncounteredTime', 'Objects Encountered'],
+  ['lux:conceptWorkCreatedTime', 'Works Created'],
+  ['lux:conceptWorkPublishedTime', 'Works Published'],
+
+  // Event Search Tags
+  ['lux:eventItemIncludedTime', 'Objects in Exhibition'],
+  ['lux:eventItemMadeTime', 'Objects Produced'],
+  ['lux:eventWorksAboutTime', 'Works About or Related To'],
+  ['lux:eventWorksCausedByTime', 'Works Generated By'],
+  ['lux:eventSetsCausedByTime', 'Collections Caused By'],
+  ['lux:eventSetsAboutTime', 'Collections About'],
+
+  // Place Search Tags
+  ['lux:placeItemMadeTime', 'Objects Produced'],
+  ['lux:placeItemEncounteredTime', 'Objects Encountered'],
+  ['lux:placeWorkCreatedTime', 'Works Created'],
+  ['lux:placeWorkPublishedTime', 'Works Published'],
+  ['lux:placeWorkAboutTime', 'Works About or Related To'],
+  ['lux:placeSetAboutTime', 'Collections About'],
 ])

client/src/features/timeline/CustomTooltip.tsx

@@ -62,9 +62,10 @@ const CustomTooltip: React.FC<IProps> = ({ active, payload, searchTags }) => {
       >
         {payload.length > 0 ? payload[0].payload.year : 'unknown year'}
         {payload.map((obj: Record<string, any>, ind: number) => {
-          const searchTag = obj.dataKey.replace('.totalItems', '')
+          const halLink = obj.dataKey.replace('.totalItems', '')
+          const { searchTag } = obj.payload[halLink]
           const { tab } = searchTags[searchTag]
-          const { searchParams } = obj.payload[searchTag] as ITimelineCriteria
+          const { searchParams } = obj.payload[halLink] as ITimelineCriteria
 
           return (
             <Row key={ind}>

client/src/features/timeline/Graph.tsx

@@ -21,7 +21,7 @@ import {
 import { IHalLinks } from '../../types/IHalLinks'
 import TimelineParser from '../../lib/parse/timeline/TimelineParser'
 import useResizeableWindow from '../../lib/hooks/useResizeableWindow'
-import { facetNameMap } from '../../config/timeline'
+import { halLinkMapToLegendName } from '../../config/timeline'
 
 import CustomTooltip from './CustomTooltip'
 import CustomLegend from './CustomLegend'
@@ -75,7 +75,7 @@ const Graph: React.FC<IProps> = ({
   const [selectedLegend, setSelectedLegend] = useState<string | null>(null)
   // Get the relationships that are used in the timeline data to determine which relationships to show in the legend
   const relationshipsToShowInLegend =
-    TimelineParser.getFacetsUsedForLegend(timelineData)
+    TimelineParser.getHalLinksUsedForLegend(timelineData)
   const activeLegend = hoveredLegend || selectedLegend
 
   const handleOnHover = (value: string | null): void => {
@@ -159,35 +159,37 @@ const Graph: React.FC<IProps> = ({
               />
             }
           />
-          {Array.from(facetNameMap.entries()).map(([facetKey, facetLabel]) => {
-            if (!relationshipsToShowInLegend.includes(facetKey)) {
-              return null
-            }
-
-            let defaultLegend = 'focused'
-            if (isNull(activeLegend)) {
-              defaultLegend = 'focused'
-            } else if (activeLegend === facetKey) {
-              defaultLegend = 'focused'
-            } else {
-              defaultLegend = 'unFocused'
-            }
-            return (
-              <Bar
-                key={facetKey}
-                dataKey={`${facetKey}.totalItems`}
-                stackId="a"
-                fill={
-                  theme.color.graphs[
-                    facetKey as keyof typeof theme.color.graphs
-                  ][defaultLegend as 'focused' | 'unFocused']
-                }
-                name={facetLabel || facetKey}
-                yAxisId="total"
-                shape={(p: any) => getShape(p)}
-              />
-            )
-          })}
+          {Array.from(halLinkMapToLegendName.entries()).map(
+            ([halLinkKey, label]) => {
+              if (!relationshipsToShowInLegend.includes(halLinkKey)) {
+                return null
+              }
+              const graphKey = label as keyof typeof theme.color.graphs
+              let defaultLegend = 'focused'
+              if (isNull(activeLegend)) {
+                defaultLegend = 'focused'
+              } else if (activeLegend === halLinkKey) {
+                defaultLegend = 'focused'
+              } else {
+                defaultLegend = 'unFocused'
+              }
+              return (
+                <Bar
+                  key={halLinkKey}
+                  dataKey={`${halLinkKey}.totalItems`}
+                  stackId="a"
+                  fill={
+                    theme.color.graphs[graphKey][
+                      defaultLegend as 'focused' | 'unFocused'
+                    ]
+                  }
+                  name={label || halLinkKey}
+                  yAxisId="total"
+                  shape={(p: any) => getShape(p)}
+                />
+              )
+            },
+          )}
           {yearsArray.length > 1 && (
             <Brush
               dataKey="year"

client/src/features/timeline/List.tsx

@@ -7,7 +7,10 @@ import TimelineParser from '../../lib/parse/timeline/TimelineParser'
 import StyledDd from '../../styles/shared/DescriptionDetail'
 import StyledDt from '../../styles/shared/DescriptionTerm'
 import StyledResponsiveCol from '../../styles/shared/ResponsiveCol'
-import { ITimelinesTransformed } from '../../types/ITimelines'
+import {
+  ITimelineCriteria,
+  ITimelinesTransformed,
+} from '../../types/ITimelines'
 import { IHalLinks } from '../../types/IHalLinks'
 
 import ListRow from './ListRow'
@@ -80,15 +83,19 @@ const List: React.FC<IProps> = ({
                 </StyledDd>
               </StyledResponsiveCol>
             </HoverableRow>
-            {Object.keys(transformedData[year]).map((searchTag, ind) => {
-              if (searchTag !== 'total' && searchTag !== 'criteria') {
+            {Object.keys(transformedData[year]).map((halLink, ind) => {
+              const yearData = transformedData[year][
+                halLink
+              ] as ITimelineCriteria
+              if (halLink !== 'total' && halLink !== 'criteria') {
                 return (
-                  <dl className="my-0" key={`${year}-${searchTag}-${ind}`}>
+                  <dl className="my-0" key={`${year}-${halLink}-${ind}`}>
                     <ListRow
                       searchTags={searchTags}
                       data={transformedData}
                       year={year}
-                      searchTag={searchTag}
+                      halLink={halLink}
+                      searchTag={yearData.searchTag}
                     />
                   </dl>
                 )

client/src/features/timeline/ListRow.tsx

@@ -13,6 +13,7 @@ import theme from '../../styles/theme'
 import StyledDd from '../../styles/shared/DescriptionDetail'
 import StyledDt from '../../styles/shared/DescriptionTerm'
 import StyledResponsiveCol from '../../styles/shared/ResponsiveCol'
+import { halLinkMapToLegendName } from '../../config/timeline'
 
 const HoverableRow = styled(Row)`
   &:hover {
@@ -28,26 +29,17 @@ const ListRow: React.FC<{
   searchTags: IHalLinks
   data: ITimelinesTransformed
   year: string
+  halLink: string
   searchTag: string
-}> = ({ searchTags, data, year, searchTag }) => {
-  const facetNameMap: Map<string, string> = new Map([
-    ['itemProductionDate', 'Objects Produced'],
-    ['itemEncounteredDate', 'Objects Encountered'],
-    ['workCreationDate', 'Works Created'],
-    ['workPublicationDate', 'Works Published'],
-    ['workCreationOrPublicationDate', 'Works About'],
-  ])
-
+}> = ({ searchTags, data, year, halLink, searchTag }) => {
   const { tab } = searchTags[searchTag]
-  const { searchParams, totalItems } = data[year][
-    searchTag
-  ] as ITimelineCriteria
+  const { searchParams, totalItems } = data[year][halLink] as ITimelineCriteria
 
   return (
-    <HoverableRow key={`${searchTag}-${year}`}>
+    <HoverableRow key={`${halLink}-${year}`}>
       <Col xs={12} sm={12} md={6} lg={12} xl={6}>
-        <StyledDt data-testid={`${year}-${searchTag}-relationship`}>
-          {facetNameMap.get(searchTag)}
+        <StyledDt data-testid={`${year}-${halLink}-relationship`}>
+          {halLinkMapToLegendName.get(halLink)}
         </StyledDt>
       </Col>
       <StyledResponsiveCol xs={12} sm={12} md={6} lg={12} xl={6}>

client/src/features/timeline/TimelineContainer.tsx

@@ -25,13 +25,13 @@ const StyledButtonCol = styled(Col)`
 const getHalLinks = (
   searchTags: IHalLinks,
   providedHalLinks: any,
-): Array<string> => {
-  const filteredHalLinks: Array<string> = []
+): Record<string, { href: string }> => {
+  const filteredHalLinks: Record<string, { href: string }> = {}
 
   Object.keys(providedHalLinks || {}).map((link: string) =>
     Object.keys(searchTags).map((tag) => {
       if (searchTags[tag].searchTag === link) {
-        filteredHalLinks.push(providedHalLinks[link].href)
+        filteredHalLinks[link] = { href: providedHalLinks[link].href }
       }
       return null
     }),