Add visualization for timelines (from 1178)

gigamorph commented 4 months ago

Problem Description: LUX has a requirement for visualizations. The existing wireframes show this: https://nj46vq.axshare.com/#id=63klng&p=entity_-_person_group&g=1. We also need requirements and designs for visualizations.

Expected Behavior: Render timelines using a visualization and improve the list view for timelines

Breaking out list view to: New ticket - 52 Old ticket for reference - 1872

[x] Visualization Requirements
[x] Wireframes - Visualization
[x] Mockup - Visualization
[x] Question - is #52 required for this ticket to move forward? Answer: No

Links:

Wireframe (design comp below in thread)

Example of data from: https://lux-front-tst.collections.yale.edu/view/person/c225d5e4-8767-4a25-802b-af054d5e8f52

kamerynB commented 4 months ago

@prowns @jffcamp @ar2674 This issue requires better requirements. The list view changes will impact the manner in which the frontend displays this data. The graph would appear the same but depending on the list view, the data may be in a different structure than what it is currently.

ar2674 commented 4 months ago

@kamerynB are you saying we should have better requirements for what the list view should look like upon a user selecting a specific date within the timeline?

Wanted to make sure I understand.

roamye commented 3 months ago

Bringing this to IT meeting for discussion.

kamerynB commented 3 months ago

Update 3/28/24: The timeline graph can be worked on and is not blocked by the requirements for #52.

kamerynB commented 2 months ago

@miketullo95 Just one question on this. I started working on a proof of concept but with a stacked bar chart. There are two wireframes and one has the option to view each relationship but the other shows all relationships. Are both functionalities required? I would think we'd only want one.

My understanding was that by hovering or clicking on a bar, it would breakdown all of the relationships and you would be able to select the results you wanted to view, similar to how the list view is broken down by relationships.

Here is the proof of concept with both dummy data, dummy labels, and random styling. This was my attempt to work with Recharts which I like so far.

cc: @prowns @roamye

kamerynB commented 2 months ago

Update 5/1/24: I managed to get the graph working with real data.

Screenshot 2024-05-01 at 4 28 46 PM

cc: @miketullo95 @roamye @prowns

miketullo95 commented 1 month ago

@kamerynB I don't believe I have any info on this, this may have been a heather wireframe. I think generally its fine to have the info stacked, my only question would be accessibility.

kamerynB commented 1 month ago

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

roamye commented 1 month ago

Feedback based on the time line visualization on Andy Warhol page:

when you adjust the date to a year after 1945 and before 2023 BUT does not have a record for that specific year the page will render an error boundary. (Ex: 1960) Should we allow the visualization to go to the next year which has a record to prevent an error boundary? (1962)
what is zoom in supposed to do? It is not greyed out but when I click on it (expanding/not expanding the visualization) it doesn't zoom into the graph.
Should the key below the graph be interactive? When a user selects a bar, it will take them to a search result that has the most proportion and then the one with the least. but what if someone wanted the search results of just the works in that year? (ex: 1980c.e)

azaroth42 commented 1 month ago

Awesome work!

Ideas:

Make the x axis continuous, so that gaps in time are more obvious. e.g. https://lux-front-dev.collections.yale.edu/view/concept/cc768f79-990b-46c7-83af-a99e1b0b6e08 has an earliest of -3600, but there's only a small space before 1 CE as we don't have much (apart from fragments in one year) that early.
when the lines are thin and the bars small, it's hard (impossible?) to tell which of multiple stacked bars you'll be searching on. Could it be highlighted in the popup?

jffcamp commented 1 month ago

GREAT WORK @kamerynB

Count is not always right. Is that part of our estimate issue?

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

Timeline -3600 to 1

1303 BCE - Objects Produced: 2

Object results, when clicked, is 6

Same date filter (-3600 to 1) - years with single result are impossible to click.
Zoom in doesn't seem to do anything. Zoom out seems to clear the date range

prowns commented 1 month ago

Regarding Zoom feature - it's kind of confusing.

change button labels to: Zoom In and See All
only show See All after Zoom In has started

kamerynB commented 5 days ago

Moving this issue to blocked as it requires changes to support the pagination in facets.

project-lux / lux-frontend

Add visualization for timelines (from 1178) #15