Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

More personalizable collections - Analysis #514

Closed
g-saracca opened this issue Oct 3, 2024 · 11 comments
Closed

More personalizable collections - Analysis #514

g-saracca opened this issue Oct 3, 2024 · 11 comments
Labels
FY25 Sprint 7 FY25 Sprint 7 (2024-09-25 - 2024-10-09) FY25 Sprint 8 FY25 Sprint 8 (2024-10-09 - 2024-10-23) GREI Re-arch GREI re-architecture-related Original size: 30 Size: 3 A percentage of a sprint. 2.1 hours. SPA: Collection Page SPA.Q4.6 Analysis and proposal for more customizable collection page SPA

Comments

@g-saracca
Copy link
Contributor

Overview of the Feature Request

This is to analyze point 3 of the Epic: Design, demonstrate, and implement new SPA-based Dataverse homepage and collection pages

What kind of user is the feature intended for?
SPA Users

What inspired the request?
Q4 Roadmap

@g-saracca g-saracca added Size: 30 A percentage of a sprint. 21 hours. (formerly size:33) SPA: Collection Page GREI Re-arch GREI re-architecture-related SPA Original size: 30 labels Oct 3, 2024
@g-saracca g-saracca self-assigned this Oct 3, 2024
@GPortas GPortas added the SPA.Q4.6 Analysis and proposal for more customizable collection page label Oct 8, 2024
@cmbz cmbz added the FY25 Sprint 7 FY25 Sprint 7 (2024-09-25 - 2024-10-09) label Oct 8, 2024
@g-saracca g-saracca added Size: 10 A percentage of a sprint. 7 hours. and removed Size: 30 A percentage of a sprint. 21 hours. (formerly size:33) labels Oct 9, 2024
@cmbz cmbz added the FY25 Sprint 8 FY25 Sprint 8 (2024-10-09 - 2024-10-23) label Oct 9, 2024
@g-saracca g-saracca added Size: 3 A percentage of a sprint. 2.1 hours. and removed Size: 10 A percentage of a sprint. 7 hours. labels Oct 10, 2024
@g-saracca
Copy link
Contributor Author

@sekmiller @scolapasta @siacus @jggautier @GPortas
I have created a possible design to add another way to personalize collections, I call them "featured items".

The idea is to be able to create featured items for a collection from this page - (This is from Storybook so its working with mocked data).
An MVP for this first iteration of this feature offers users the ability to add, remove and sort by drag-and-drop these featured items, and also preview them in real time as they are being added, modified, sorted or deleted.
These featured items will have a title and text content or text content + image.
The idea is that in future iterations we will make a rich text editor to enrich the content.
*Note: the design for mobile screens and image uploading has not been developed to first get an idea that we are on the right track.

And then, if a collection has featured items, they will be displayed like in this Storybook.

One idea would be that if a collection contains a description and featured items, the description would be displayed as the first item in the featured items carousel, titled as “About”.
Also for a future iterations it could be a good idea to create from this same section, featured collections and featured datasets to display in the carousel.

This is an end to end feature, meaning it will require work on the backend, api and frontend:

  • API endpoint to create/modify the featured items.
  • API endpoint to get the featured items of an specific collection.
  • JS-dataverse use case to to create/modify the featured items.
  • JS-dataverse to get the featured items of an specific collection.
  • SPA Frontend integration with the use cases.

As a first instance I would like to know what you think so we can plan the remaining work. Many thanks!

@sekmiller
Copy link
Contributor

The idea that I was trying to describe in today's meeting was it would be great if a featured item could be a dvobject (collection, dataset, or file) from the installation - either owned by the collection that is featuring it or from outside the current collection. Either way, adding a link so that the end user could go directly to that featured item. Probably not needed for the first iteration, but something that you could be mindful of for the future.

@g-saracca
Copy link
Contributor Author

@sekmiller Yes, I think that's great, a similar idea was suggested by the rest of the SPA frontend team when I showed them this proposal.
I think we could have a different structure for this kind of dvobjects items, both for how the carousel cards will look like and how the information about each featured item will be sent and retrieve from and to the API.

Maybe we could handle this type of data model, these are the Typescript types I have in mind:

type FeaturedItem = CustomFeaturedItem | DvObjectFeaturedItem

type CustomFeaturedItem = {
  type: 'custom'
  title: string
  content: string
  image?: {
    url: string
    altText: string
  }
}

type DvObjectFeaturedItem = {
  type: DvObjectType // 'collection' | 'dataset' | 'file'
  linkUrl: string
  title: string
  description?: string
}

@jggautier
Copy link

Hi @g-saracca. This is cool. Thanks for sharing.

Do you think it would be helpful at this point to also seek feedback from folks who've created collections? I could help with that, or at least help with starting to think about that.

I'm also thinking about how exactly these changes might be evaluated, and looking at the related GitHub issue at IQSS/dataverse-pm#231 for more info. @cmbz wrote that "Feature analysis for item 3 and 4 is underway" and pointed to this GitHub issue.

So at the moment this design is meant to satisfy the goals of tasks 3 and 4?

Not very related, but I'm excited to see some new design patterns (new to Dataverse!) that could be useful in other parts of Dataverse, too, like the dataset metadata form. Some inspiration for the Citation metadata block redesign that the UX working group has been working on.

@g-saracca
Copy link
Contributor Author

Hi @jggautier, thanks to you.

This is to satisfy only task 3 from the Epic #231. The idea is to have the MVP of this feature working by this last quarter of the year.

Regarding feedback, it would be great to hear some comments on this so we can fine tune this or see if we are not missing something, even not only for this first iteration but for future iterations as well.

Not very related, but I'm excited to see some new design patterns (new to Dataverse!) that could be useful in other parts of Dataverse, too, like the dataset metadata form.

Yeah, maybe not the place here but we have this open SPA issue - 438 for example, the drag-and-drop functionality from this feature could be implemented also to accomplish the requirement in 438 🙌 .

@siacus
Copy link

siacus commented Oct 16, 2024

This is nice German, I think we can start simple and grow. A couple of ideas: 1) let the user decide if they want a carousel or just an image; 2) let the user decide if dataset can be shown after pushing the button 'show me data" or always; 3) what about the idea of a background color/pattern or image with transparency (i.e. the content is always visible, the image/bakcground is rendered with transparency)? And make it part of a "theme" element (for the future).

@jggautier
Copy link

@cmbz, the status at IQSS/dataverse-pm#231 (comment) should be edited, right, so it reads that the feature analysis for item 3 is underway? Right now it mentions item 4 ("Design, implement, and test a more customizable collection page for Dataverse users")

@g-saracca
Copy link
Contributor Author

Hi @siacus, thanks for the feedback!

Point 2 seems to me a great idea and we can easily achieve it with a checkbox/toggle to allow the user to enable or disable that.

About point 1, I don't fully understand, if we go for just an image then the user will not be able to add more than one feature item? The carousel is to be able to navigate through the different items, what we could do is in the case that there is only one item configured (either with image or image + text) simply show the item without the carousel indicators and arrows.

Regarding point 3, what you are referring to is a background with transparency under each featured item?
Or maybe you are talking about a kind of cover behind the collection page header?

@siacus
Copy link

siacus commented Oct 16, 2024

on point 1: ok, it seems what I am asking coincides with the case with only one feature

point 3: I mean something like in the gmail background settings (see screenshot): (not high priority though if it is too difficult, but let's think at it as a future feature)

image

@g-saracca
Copy link
Contributor Author

Oh yes! I love that idea and I have several proposals about it too!
I think it will be a good idea to tackle that when the time comes to replicate the Theme & Widgets section of the current JSF version.

@g-saracca
Copy link
Contributor Author

Issues were created to start with API work and also JS-Dataverse use cases

@g-saracca g-saracca removed their assignment Oct 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FY25 Sprint 7 FY25 Sprint 7 (2024-09-25 - 2024-10-09) FY25 Sprint 8 FY25 Sprint 8 (2024-10-09 - 2024-10-23) GREI Re-arch GREI re-architecture-related Original size: 30 Size: 3 A percentage of a sprint. 2.1 hours. SPA: Collection Page SPA.Q4.6 Analysis and proposal for more customizable collection page SPA
Projects
Status: Done 🧹
Development

No branches or pull requests

6 participants