Add Explore Hierarchy widget to Concept and Place pages (from 1723)

[gigamorph]

Problem Description: The current implementation of the entity hierarchy is difficult to understand and does not make complex relationships clear.

July 2023: Teams Chat

Expected Behavior/Solution: There will be a React Flow visualization of the hierarchy based on the below wireframes. Note relationship with #84 (list view updates)

Requirements:

• The component will not render if there is no data
• Initial view: show current entity in the center with the parents rendering to the left of it and children to the right
  • Each parent and child list will render 5 results
  • Each parent and child list will have their own Show More (+5) and Show Less (-5) button if there are more or less results
  • The component will utilize HAL links to retrieve the children (currently implemented as placeParts and conceptChidlren, respectively)
  • Parents will be rendered from data in the record (part_of property in Places and broader property in Concepts)
  • The Show More button will not render if there are not more results
  • The Show Less button will not render if there are not less results
• Each entity in the hierarchy will be text, not a link
  • Each entity will have a vertical 3 dot menu button that contains the following:
    • View this Record button that will take the user to the corresponding entity's record page
    • Explore this Record Hierarchy button that will make the corresponding entity's hierarchy render in the component (parents and children of the selected entity will render and the selected entity will be moved to the center of the hierarchy)
• If a user is navigating the hierarchy and is not on the current page's hierarchy there will be a button that will take them back to their initial view/the current page's hierarchy
• There will be an button for viewing the hierarchy in full screen
• There will be a button for toggling back and forth between the list view and the chart view/visualization
• The default view will be the visualization

Needed:

• [x] Wireframe/Mockup - Mike
• [ ] ~Committee discussions - Sarah~
• [ ] ~Feasibility/Team discussion - Sarah~
• [x] Backend requirements - Kam, middle tier ticket linked below
• [x] Frontend requirements - Kam, Mike
• [x] Questions
  • [x] how best to explore hierarchies for Place and Concepts?

UAT/LUX Examples:

• https://lux.collections.yale.edu/view/concept/e22c096f-d5a9-470f-a8c5-ca49277ff465 has 59 grandparents And 137 unique great grand parents
• https://lux.collections.yale.edu/view/place/3eee943e-cd9f-4a3b-808c-95d50e1f0eb3
• https://lux.collections.yale.edu/view/place/c86331f7-f1eb-4b4b-8384-ebfa5a29be73
• https://lux.collections.yale.edu/view/concept/b60f4df3-ecef-4d26-9ea5-157170a9ad25
• https://lux.collections.yale.edu/view/concept/4aa074f3-00ae-438d-aa8d-917fee3acae6
• https://lux.collections.yale.edu/view/concept/0559cde4-9022-4a4b-8ebb-bd218d3cf734
• https://lux-front-dev.collections.yale.edu/view/place/7c3652e3-a5d8-45c9-ac11-19e1430554e4

Dependencies/Blocks:

• Blocking: https://git.yale.edu/lux-its/lux-backend/issues/72
  • The current hierarchies are dependent on the code
  • This widget will remove the dependency on the middle tier
• should be done at the same time as: https://github.com/project-lux/lux-frontend/issues/84

Related Github Issues:

• Original Github issue: https://git.yale.edu/lux-its/lux-web/issues/1723

Related Links:

• BugHerds:
  • https://www.bugherd.com/projects/284041/tasks/2098
  • https://www.bugherd.com/projects/284041/tasks/2077
  • https://www.bugherd.com/projects/284041/tasks/1696

Wireframes: 4/16 version: Note: on hover, the icon will probably be outlined or highlighted in some way as a visual indicator that it is a button. Once the user clicks on it, that corresponding entity will become the center of the hierarchy as previously discussed.

[prowns]

@miketullo95 - further notes from 2/23/24 team meeting:

Decision: use plus sign to match +

• Think about how to align with Archives hierarchy
• Think broadly about all hierarchies in LUX (below)
• Goal: consistency

Make sure solution works for/aligns with other hierarchies:

• People members of groups
• Objects within sets
• Places
• Concepts
• Periods
• Archives (Explore the Archive) - but this is a strict tree, so may not need the same visualization treatment

See Also: 2024-02-14: Place and Concept Hierarchy Visualization Deep Dive meeting notes

[roamye]

@kamerynB @miketullo95 Hey Kam. I remember a couple of meetings ago you had a chart where a user could click on the child and parent. Mike was wondering if he could have a screenshot of that to reference for these mockups.

[kamerynB]

Old wireframes: Initial view:

Showing expanded grandparents:

Showing expanded siblings

[kamerynB]

@miketullo95 Here is what I have so far as a proof of concept with React Flow.

[miketullo95]

@prowns @kamerynB @roamye wireframes uploaded. due to this tickets complexity, this may need to be discussed as a group.

[prowns]

@miketullo95 and @kamerynB - Some feedback from R/S/J review of the mocks...

• The 3 vertical dots look like a drag handle. This is confusing.
• Suggestion to remove the three dots and the intermediary "View Record/Explore this Hierarchy' selection. -- Clicking the name takes user to new page (follows LUX name-clicking convention) -- Add an icon (TBD) to let people explore in situ

We would need a new icon for this.

[kamerynB]

@azaroth42 @prowns @jffcamp Why not just do a dropdown button similar to the advanced search button on the landing page. The three dots would be an arrow.

[prowns]

I don't mind that, but the goal was eliminating that extra click. That said, I like the arrow better than three dots. On the left side, should the arrow be on the left, with the selection box expanding out to the left side? This also implies "up" the hierarchy.

Labels would need to change. How about: View Record, Explore More

@miketullo95 - what are your thoughts. #agenda for 4/12

[prowns]

@kamerynB - iterating mocks via teams. Will update ticket when consensus is reached.

[roamye]

There are two options up for discussion: Option 1: The name of the entity is a link to that entity page and the arrow is a button to a menu that allows a user to view hierarchy OR it's a button that takes the user to that entity's hierarchy. (whichever we choose)

Option 2: The text is a button that shows a dropdown menu for user to view options for that entity

After it has been discussed I will move the mockups to the issue body. Conversation in Teams

[azaroth42]

Option 1:

Option 2:

[prowns]

I like option 2 with the icon as a button.

[prowns]

Older mocks here for reference: Updated wireframes to be uploaded by @miketullo95. Default view

When a user clicks the menu icon, shows two options.

When user clicks "show more" it shows 5 more items (placeholder data, not for UAT)

When a user clicks on "Explore Hierarchy" (and when an item has no parents)

[kamerynB]

Update 5/2/24: The hierarchy is not in DEV yet but the following is now working locally:

1. Show More/Less in List view and Chart view
2. Connectivity between the List and Chart, ie when selecting to view an entity's hierarchy or clicking show more/less will be reflected in both views when switching back and forth
3. Show all X children results button
4. Show entity's hierarchy button
5. Entity links
6. Fullscreen view with some minor bugs

cc: @prowns @jffcamp @roamye

[kamerynB]

Update 5/8: The first iteration of the hierarchy has been deployed to DEV. Please feel free to leave feedback here. @prowns @jffcamp @roamye

[jffcamp]

Weird rendering for this: https://lux-front-dev.collections.yale.edu/view/concept/cc768f79-990b-46c7-83af-a99e1b0b6e08

[kamerynB]

@jffcamp Is the below screenshot what you see? And if so, is it the visual works by material or technique record that is weird? What I'm thinking is if I set a width on each node, then that might mitigate long titles from rendering weird edges (edges being the lines connecting the nodes/entity links).

[jffcamp]

Yes. It is the Visual Works by material or technique.

[prowns]

Moving visualization around drops artifacts:

Seen here: https://lux-front-dev.collections.yale.edu/view/concept/213fde35-557e-4a25-a1d9-3e7b94215fde

[roamye]

The record Algeria in DEV: https://lux-front-dev.collections.yale.edu/view/place/b544756d-3e3c-4a88-8a0c-f5a26b22b353, does not accurately reflect the children when selecting the branch of the child "Constantine (Province)". This happens within the list view and the hierarchy view. Examples below:

List view of Constantine (Province):

Hierarchy View of Constantine (Province):

What should show for the record Constantine (Province):

Note: I clicked on Constantine (Province) record from the Algeria record and it showed as the two photos above rather than immediately as the third photo. I had to refresh it for it to reflect it properly.

[kamerynB]

@roamye Thank you for pointing out. The next deployment to DEV, which is TBD, will contain the fix.

[roamye]

@kamerynB - is mike/heather still needed for this ticket? Also wanted to confirm if this was removed from the 07/08 milestone because of paginations (https://github.com/project-lux/lux-frontend/issues/252). What else is left for this to move forward?

[kamerynB]

@roamye I have to work on accessibility and overall functionality. It's not a facets issue since the children results come from a search link HAL link. I'll add it to the 8/19 milestone. It won't be done for the current milestone.

[kamerynB]

@jffcamp @prowns What is the urgency of this ticket? I have not been working on this as other issues have taken priority. Is this something I should return to for the next deployment?

cc: @roamye

[jffcamp]

@kamerynB, it would be great to get this critical ticket completed. So yes, if you can work on it for the next deployment that would be swell.

[roamye]

New visualizations have been added into DEV. Feedback is based off of the record: Southern Cone of South America Feedback on Functionality:

1. Hierarchy Window Closes when selecting a parent (Mentioning this so we have record of it, but I know we are aware of this.) -- 1. Click on Southern Cone of South America -- 2. Click Full Screen icon -- 3. Select Chile

Feedback (general):

1. When places/concepts are both children and parents there should be an indicator of that since nodes are listed on the children side. -- 1. Click on Southern Cone of South America -- 2. Notice how Uruguay is listed on the children side only.

2. Show more/show less does not list additional parent records. -- 1. Click on Southern Cone of South America -- 2. Select Show More -- 3. Notice the records from both sides stay the same. (Note: ** the line connection from Brazil does disappear but given there is no indication this is also a parent record it is hard to notice. )

3. Hierarchy map is not consistent. -- 1. Click on Southern Cone of South America -- 2. Select Chile -- 3. Select southern cone of south America -- 4. notice how it differs from what was presented originally (layout wise) when selecting the link in step 1.

[kamerynB]

Making notes in response to Amy's comment.

Feedback on Functionality:

1. Yes, known issue. Thank you for recording it!

General Feedback:

1. This is because Uruguay is a child and parent of the entity but it does not appear in the first 5 children being rendered.
2. It technically does. Brazil is a parent and child but it is not listed in the first 5 parents rendered. When you hit Show More, it becomes visible to the frontend and therefore the (poorly placed) connection is made.
3. I have yet to figure out how to make ReactFlow render the nodes in a consistent manner. Right now, it is choosing the coordinates of the nodes based on dagre, another Javascript library.

Notes: Issues 1 and 2 of the General Feedback are because a parent is a child or a child is a parent and they are not being rendered at first because they are not part of the initial 5 parents/children displayed. This should be discussed at the 10/18/24 team meeting.

cc: @roamye

[roamye]

From IT Team Meeting 10/18 (notes here):

• This issue will move to the next milestone (11/04) to allow for fixes and testing to be done.
• Kam to include fixes to show instances of hierarchy on both sides when they are categorized as parents & children.