project-lux / lux-frontend

Web front end of LUX
Apache License 2.0
3 stars 0 forks source link

Add visualization for timelines (from 1178) #15

Open gigamorph opened 8 months ago

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

Links:

Wireframe (design comp below in thread) image

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

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.

Screenshot 2024-04-30 at 4 18 32 PM

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 Screenshot 2024-05-01 at 4 28 51 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:

azaroth42 commented 5 months ago

Awesome work!

Ideas:

jffcamp commented 5 months ago

GREAT WORK @kamerynB

prowns commented 5 months ago

Regarding Zoom feature - it's kind of confusing.

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