Add AND/OR tag search to card stack component

[Incogdino]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

Related to #2648

What is the area that this feature belongs to?

Reader Usability

Is your feature request related to a problem? Please describe.

Allow users to toggle between AND/OR search for card stack.

Describe the solution you'd like

A button that toggles between AND/OR search for tags

Describe alternatives you've considered

No response

Additional context

No response

[pinion05]

Hi, I'd like to take on this issue. Can I be assigned to it?

[Incogdino]

@pinion05 sure! Ill assign you to this issue. Please make sure to review the dev guide at https://markbind.org/devdocs/devGuide/devGuide.html before starting!

[pinion05]

Hi, I have a question regarding the AND/OR toggle feature.

Do we need to implement AND/OR switching for each individual filter option? Or should there be a single AND/OR toggle that applies to all filter options collectively?

Additionally, if we implement AND/OR switching for each option, I’m planning to add a third click that transitions to a "Required Inclusion" state.

Looking forward to your thoughts!

[lhw-1]

When I initially suggested the feature here, I was actually thinking of a component attribute for the cardstack component's main filtering (e.g. <cardstack searchable blocks="2" logic="AND">). Having a button for toggling this also can work, but my main concern is that this won't see much use since the use case of the card stack will determine if OR or AND is better for the logic.

I don't mind having a button alongside this, though. Maybe the logic attribute can take "AND", "OR", or "BOTH" as values & we can add in the button if "BOTH" is specified? Just throwing ideas out there.

@Incogdino What do you think is a better approach?

[Incogdino]

When I initially suggested the feature here, I was actually thinking of a component attribute for the cardstack component's main filtering (e.g. <cardstack searchable blocks="2" logic="AND">). Having a button for toggling this also can work, but my main concern is that this won't see much use since the use case of the card stack will determine if OR or AND is better for the logic.

I don't mind having a button alongside this, though. Maybe the logic attribute can take "AND", "OR", or "BOTH" as values & we can add in the button if "BOTH" is specified? Just throwing ideas out there.

@Incogdino What do you think is a better approach?

I agree your suggestion is sound. We should go with the logic attribute taking on the options of AND, OR and BOTH and in the last case of BOTH, a toggle for switiching between them would appear in the component.

A concern that I have with this is that readers could be confused with the filter feature of the tags with no indication of whether the filter should be an AND/ OR filter. But I think we should leave this up to the choice of the user creating the site.

[Incogdino]

Do we need to implement AND/OR switching for each individual filter option? Or should there be a single AND/OR toggle that applies to all filter options collectively?

I presume you mean the case of whether this should apply to all card stack components that appear in the site or the indicidual card stack components. If that is the case, then we should make it apply to individual card stack components, preferably stated as an attribute. For example, <cardstack searchable blocks="2" logic="or">

Additionally, if we implement AND/OR switching for each option, I’m planning to add a third click that transitions to a "Required Inclusion" state.

Sorry I'm having troubles understanding what this state means. Could you elaborate more on this @pinion05? Thank you!

[damithc]

There can be use cases where the different readers will want to filter in different ways. Also, the reader may want to know the logic being used. So, I'm in favour of having a visible checkbox. But we can let the author choose if it will be ticked by default. e.g. [ ] AND (with a tooltip giving a longer explanation).

Do we need BOTH? My thinking is, either we use the more restrictive AND search (if ticked), or use the OR by default.

[damithc]

e.g. [ ] AND (with a tooltip giving a longer explanation).

Or [ ] Match all selected ?

[pinion05]

Hi @Incogdino,

I was not saying to create a button that is applied uniformly to all card stack components. However, there is a part where I thought incorrectly. I was thinking of creating individual tags or/and like the attached gif.

But I just realized that this is meaningless. I will improve it by adding a button that applies to the individual CardStack component tag filtering options as suggested.

Sorry for the inconvenience...!

[pinion05]

@damithc I agree. The BOTH option seems unnecessary.

Or [ ] Match all selected ?

It seems better to have a way that users can understand without any additional action, like above.

[Incogdino]

Do we need BOTH? My thinking is, either we use the more restrictive AND search (if ticked), or use the OR by default.

BOTH means we include both AND and OR search into the card stack component. Essentially showing the button to toggle between AND/ OR search.

There can be use cases where the different readers will want to filter in different ways. Also, the reader may want to know the logic being used. So, I'm in favour of having a visible checkbox. But we can let the author choose if it will be ticked by default. e.g. [ ] AND (with a tooltip giving a longer explanation).

It seems better to have a way that users can understand without any additional action, like above.

I agree with this. A visible checkbox would defitnitely improve reader's knowledge about the current search feature logic. I think we should go with prof @damithc suggestion to maintain a visible checkbox. @lhw-1 Any thoughts on this?

[pinion05]

Visible checkboxes are the most intuitive and good method.

This is a minor issue, but I think it might cause some users to mistakenly think it is one of the buttons for filtering tags. If anyone has ideas for improvements in this area, I would appreciate your feedback.

[Incogdino]

Visible checkboxes are the most intuitive and good method.

This is a minor issue, but I think it might cause some users to mistakenly think it is one of the buttons for filtering tags. If anyone has ideas for improvements in this area, I would appreciate your feedback.

I was thinking maybe a dropdown in between the searh bar and the start of the first tag. If you have any suggestions, please feel free to share them and we can look at it as well.

[pinion05]

https://github.com/user-attachments/assets/2e2e31c7-080e-4f45-8aff-e958aa900619

If attached next to the search bar, it might be confusing as an option related to the search bar.

How about the approach of distinguishing the design?

[damithc]

@pinion05 Use a simple check box [ ] match all selected. Don't put it inside a coloured badge like the other tags so that it will not be confused as a tag.

[pinion05]

The above design was adopted, and through the selectOption props, it can receive 'AND', 'OR', 'BOTH', with the BOTH attribute selected by default. When BOTH is selected, a toggle button appears. (The toggle button does not appear for AND or OR)

Feedback is always welcome.

Now, I will proceed with the document update.

[damithc]

The above design was adopted, and through the selectOption props, it can receive 'AND', 'OR', 'BOTH', with the BOTH attribute selected by default. When BOTH is selected, a toggle button appears. (The toggle button does not appear for AND or OR)

@pinion05 Let's try the following:

1. Just a tick box, no further options needed. If selected, use the AND search. If not selected, use OR search.
2. Let's use non-bold text and see how it looks.
3. Might be better to have it at the end (after the last tag), to distance it from the search box (as the option is not related to the search box)

[pinion05]

hi! @damithc

Just a tick box, no further options needed. If selected, use the AND search. If not selected, use OR search.

So you mean removing props and always having the checkbox visible? I will do that.

Let's use non-bold text and see how it looks.

It will appear in the shape shown above.

Might be better to have it at the end (after the last tag), to distance it from the search box (as the option is not related to the search box)

I agree with that opinion I have said that as well

If attached next to the search bar, it might be confusing as an option related to the search bar.

[damithc]

It will appear in the shape shown above.

Looks fine to me. Minor: Perhaps increase the separation between the search box a bit and the first tag, to show the two things are separate?

[pinion05]

@damithc I apologize for not being able to work for a few days due to an issue with my laptop.

I increased the space between the first tag and the search bar.

If there are any other parts you want before making the PR, please feel free to let me know.

[damithc]

@pinion05 No further suggestions from me at the moment. You can go ahead with the PR.