Add visualization for timelines (from 1178)

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

Bringing this to IT meeting for discussion.

kamerynB commented 8 months ago

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

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

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

roamye commented 4 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 4 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 4 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 3 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 3 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 1 month 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 month 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

roamye commented 2 weeks ago

@kamerynB - from your comment above, is this issue still blocked by an accessibility review? Sounds like new solutions will need to be implemented before Kara can re-review the issue.

prowns commented 4 days ago

The key under the timeline looks like links. Could/should we add a show all to let users see all objects produced by this person (for example)? Or -- could that at least be noted as Timeline Key/Colors?

roamye commented 4 days ago

Comments from @azaroth42 in teams thread (here) :

A border around the popup window to make it more visually distinct from the background, or a different background color?
Styling on the links in the popup window to make it clearly you can click on them to get to the search results?
If you haven't clicked, should the gray bar appear and popup appear? Currently if you slide the window, it appears by default on the left most entry?
Should you be able to click somewhere else to get the popup to disappear, or should it have an [x] to close it?
Colors could be brighter to be more visually distinct -- the green and blue look very similar, and the purple and black. I think contrasting is more important than not being garish.

roamye commented 4 days ago

Comments | https://lux-front-dev.collections.yale.edu/view/person/c225d5e4-8767-4a25-802b-af054d5e8f52

As this is a new feature on LUX, I think we should consider making the links open to a new page, as users will be modifying the visualizations to a certain area.

I think all the links within the white box (that shows after clicking a time period) should follow the same link color as those in the about section. To me, it looks like object produced: 2 is not a link as it follows the same color as non-link text. Is it possible to rewrite the links so the text title can be black and the links can be blue? Rather than the whole text as a link. I understand why we are matching it to the key but it could cause confusion later on. Suggestion: Objects Produced: 1 result where everything to the left of : is black and to the right is blue.

There are times the keyboard will not move in the correct direction after a user hovers over a time period. This happens when we zoom in/out/default state of the visualizations. I don't think this will hinder it from deploying BUT a fix should be addressed shortly after. Also, as you move back and forth with the keyboard you will also notice you cannot go inside the pop up box and select the link (objects produced/works published) when moving across the timeline. (You will need to tab twice to get to it, but when you tab again it will bring you to the accordions so it makes it harder for someone to go back to the visualizations and find a different time period. ) Steps are below.

click/hover over 1787 C.E,
using your keyboard use the <- arrow to move to the left.
will move your grey area to the empty area above 1822 c.e
click hover over 1860 c.e
using your keyboard using the -> arrow to move to the right
moves to 1818 c.e ** note: if you use a keyboard to navigate to this section the ability to move within the time periods (without filtering) is not available. (maybe im doing it wrong though)

In @prowns comment, I see there is a "show all" below each key. Is that supposed to bring me to the the set of results or only show/filter for that key on the visualization? I do not see this on my end of visualizations.

Otherwise, everything looks good Kam. Thank you for your work!

prowns commented 4 days ago

@kamerynB - can you turn off the vertical access labels so we don't get fractional lines? https://lux-front-dev.collections.yale.edu/view/person/5e37df1d-e038-4cf7-a214-eb0422580013 or https://lux-front-dev.collections.yale.edu/view/person/6515886b-4308-4b4e-82cd-94a5ac5cabad

project-lux / lux-frontend

Add visualization for timelines (from 1178) #15