Add visualization for timelines (from 1178)

gigamorph commented 8 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 8 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 8 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 7 months ago

Bringing this to IT meeting for discussion.

kamerynB commented 7 months ago

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

kamerynB commented 6 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 6 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 6 months 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 6 months 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 5 months 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 5 months 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 5 months 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 5 months 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 4 months ago

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

roamye commented 3 months ago

@kamerynB - can this ticket be worked on for the 08/05 or 08/19 milestone as the paginations issue was closed last week?

Also - is mike/heather still required for this ticket? Unsure where we left off.

kamerynB commented 3 months ago

@roamye I've added it to the current milestone but I have to reach out to Kara to see if she has suggestions on color for the graph.

roamye commented 3 months ago

From IT meeting 08/02: Recharts comes with out of the box accessibility, but it ruins highlight to zoom. However, it does come with a brush component which allows someone to slide and see the date on the slider. This works with accessibility as they can use the arrow buttons on the keyboard to minimize maximize the slider from the brush component.

This functionality can also allow the removal of date input fields (+2 Rob/Jeff).

kamerynB commented 2 months ago

Update 8/15: I believe this just needs an accessibility review. I've let Kara know it is deployed but she is has more responsibilities now. @jffcamp Is there anyone else on the accessibility team that can provide a review of this?

Edit: I also need to connect the list to the graph so that they're behavior is synced.

roamye commented 2 months ago

From IT Team meeting 8/23 this issue is not affected by ML. This is also unrelated to date issues. Additional colors for the timelines will be coming from POW.

roamye commented 3 weeks ago

DEV Mtg 10/14: There will need to be non LUX colors for the visualizations. Possibly patterns. (black/white/polka dots)

@kamerynB to reach out to Kara and re-confirm before bringing to team discussion. (Amy/Kara/Kam)

kamerynB commented 1 week ago

Reached out to Kara on 10/28. I came across this resource outlining possible accessibility solutions to charts.

Additional Resources: https://www.atlassian.com/data/charts/stacked-bar-chart-complete-guide https://www.atlassian.com/data/charts/how-to-choose-colors-data-visualization

project-lux / lux-frontend

Add visualization for timelines (from 1178) #15