add click on "flag icon" for additional filtering #5340

basiratkareem · 2024-10-08T00:05:44Z

Task
This update allows users to filter records by clicking on a tag (like native, sandbox, etc.), enabling quicker access to filtered records without needing to use the search bar.
closes #5312

Implementation

Replaced <span> tags with <button> elements in layouts/partials/ecosystem/registry/entry.html
Applied existing Bootstrap styles for consistency with the rest of the project.
Added a function applyTagFilter in assets/js/registrySearch.js to handle the filter action when a tag is clicked.
Added a title to the buttons(tags). On hover, each button displays "Click to filter by [tag name]".

Result
The tags native, first party integration, sandbox, graduated, and deprecated are now clickable buttons.
Clicking a tag immediately filters the records in the OpenTelemetry registry based on the selected tag, enhancing the filtering experience.

…l and deprecated) into clickable buttons to filter record based on the tag

linux-foundation-easycla · 2024-10-08T00:05:48Z

The committers listed above are authorized under a signed CLA.

✅ login: basiratkareem / name: Basirat Kareem (88f811b, 3d10a65, fecfd0e, 4a3cacc, 31bb474, 1f0de04, aa84339, 46a6424, 680eb59, 3a3b494, b80101d, 52386d1)

svrnm

great start, a few notes!

svrnm · 2024-10-08T06:23:47Z

layouts/partials/ecosystem/registry/entry.html

+
+          {{ if $isNative -}}
+          <button type="button" class="badge rounded-pill text-bg-success text-white"
+          onclick="document.getElementById('input-s').value = 'native'; document.getElementById('input-language').value = 'all';document.getElementById('input-component').value = 'all';document.getElementById('searchForm').submit();">


Can you move the javascript code into a dedicated file? Since it is related to it, you can put it into https://github.com/open-telemetry/opentelemetry.io/blob/main/assets/js/registrySearch.js

I suggest that you add some data--tag to the elements and then select them in javascript:

<button type=button" data-filter-value="native" class="...">...native</button>

and then something like

document.querySelectorAll('[data-filter-value]').forEach(element => ...)

Also, provide a tooltip or something that says "click to filter by..."

I appreciate your feedback. I will update the code accordingly.

Hello @svrnm I’ve implemented the recommended changes. However, I observed an issue: after clicking a tag and the results page is rendered, clicking the tag again or another doesn’t trigger a new search. The reset button has to be clicked before the tag filter can work again.

@basiratkareem can you append the label to the existing search term instead of setting/replacing it. This way someone can have an existing search word and refine their search with adding one of the labels. The only thing you might want to check for if the label is already included in the search string so it's not added twice

Hi @svrnm, I implemented your suggestions, but the behavior remained unchanged. I realized that I was using the command npm run serve in the terminal. The issue persists with that command, but when I switched to npm run serve:netlify, the labels function as intended with both the previous commit and the new lines of code. Clicking on the label at any point now initiates a filter search using the label value.

I look forward to your feedback. Thank you.

It's still not working, please take a look in the auto generated preview:

https://deploy-preview-5340--opentelemetry.netlify.app/ecosystem/registry/

If I click on a button (e.g. native of the first element) the search is updated, but if I click another button it's not updated once again

Hi @svrnm,

Thank you for your feedback. I have taken a look at the preview link and that is the same experience on my end when I use the command npm run serve

However, It worked on my end using npm run serve:netlify, but I see there’s still an issue in the Netlify preview. I’ll check the code again and I’ll update you soon. Thank you.

…nstead of replacing

svrnm · 2024-10-25T06:54:28Z

@basiratkareem checking in if you could make some progress here? Today is the last day I can help you with moving this PR forward, so let me know if there is anything I can do to help you

basiratkareem · 2024-10-25T08:51:08Z

@basiratkareem checking in if you could make some progress here? Today is the last day I can help you with moving this PR forward, so let me know if there is anything I can do to help you

Hi @svrnm,

Thank you for your continued support and feedback! I aplogiize for the delay response. I’ve made several adjustments to the code, including tweaks to the event handling. Unfortunately, these updates haven’t resolved the issue, and the functionality is still the same as what we both observed in the Netlify preview.

Initially, running npm run serve:netlify gave the expected output on my end. However, after restarting my device and retesting, it’s now producing the same result as npm run serve.

I suspect the issue might be due to the URL updating after the initial click. If there’s anything specific you’d suggest trying or if there’s something I might be missing, I’d be glad to explore it to resolve this within your timeline.

Thank you again for your guidance and patience.

svrnm · 2024-10-25T09:51:18Z

the problem is the following:

we show a "#default-body" div if no search has been applied, your code adds the event listeners to the items in that list
we show a "#search results" div if search has been applied, they are lazy loaded, so your code is not applied to them.

You might need to update your code in a way that it re-applies the addition of event listeners to the newly created elements after the search was executed

basiratkareem · 2024-10-25T11:00:32Z

the problem is the following:

we show a "#default-body" div if no search has been applied, your code adds the event listeners to the items in that list

we show a "#search results" div if search has been applied, they are lazy loaded, so your code is not applied to them.

You might need to update your code in a way that it re-applies the addition of event listeners to the newly created elements after the search was executed

I will check this out.

…call applyFilterTag.

…ilterTag.

…l applyFilterTag.

…ilterTag.

…rTag.

basiratkareem · 2024-10-25T18:16:03Z

Hello @svrnm, I have added applyTag function to the code and updated the executeSearch function to call applyTag after populating search results.
I have tested the behaviour and it is working as expected. Clicking the labels initiates a search. I look forward to your feedback.

svrnm · 2024-11-11T15:02:35Z

hey @basiratkareem,

I would like to take that PR into the main branch and with that into the project. But we need to rework it a little bit, would you still be interested in that?

Here's what needs to be changed changed: I merged #5328, which introduces a "flag" parameter, so far only for "deprecated", "native" and "first party", not the different CNCF projects, can you make use of that instead of appending it to the search term? We can skip the CNCF projects to simplify it for now.

Thanks.

basiratkareem · 2024-11-12T13:05:00Z

hey @basiratkareem,

I would like to take that PR into the main branch and with that into the project. But we need to rework it a little bit, would you still be interested in that?

Here's what needs to be changed changed: I merged #5328, which introduces a "flag" parameter, so far only for "deprecated", "native" and "first party", not the different CNCF projects, can you make use of that instead of appending it to the search term? We can skip the CNCF projects to simplify it for now.

Thanks.

Hello @svrnm I'm happy to continue working on this. Based on my understanding of your comment:

A similar PR add a "flag" filter to registry #5328 has been merged, which implemented a flag parameter for the filter.
In PR add a "flag" filter to registry #5328, I noticed the filter uses a dropdown, similar to the component and types.
My task will be to integrate the flag parameter, ensuring the filter is initiated when the flag button is click without adding the flag value to the search input.

please let me know if I am missing something.

I'll make the necessary changes on my end and provide an update on this. Thank you.

svrnm · 2024-11-12T14:30:57Z

1. A similar PR [add a "flag" filter to registry  #5328](https://github.com/open-telemetry/opentelemetry.io/pull/5328) has been merged, which implemented a flag parameter for the filter.

2. In PR [add a "flag" filter to registry  #5328](https://github.com/open-telemetry/opentelemetry.io/pull/5328), I noticed the filter uses a dropdown, similar to the component and types.

3. My task will be to integrate the flag parameter, ensuring the filter is initiated when the flag button is click without adding the flag value to the search input.

please let me know if I am missing something.

I'll make the necessary changes on my end and provide an update on this. Thank you.

Your understanding is correct 👍

… the search input field

basiratkareem · 2024-11-14T12:49:21Z

Hi @svrnm

I’ve integrated the flag parameter into the code, and the filter is now activated when the flag button is clicked. The page is populated accordingly, and the search input field remains unchanged. I’ve also recorded a screen recording to demonstrate the behaviour.

https://www.loom.com/share/3427b2b7965a479c800175b63048d6ba?sid=8db7958f-6ca2-41f5-aa02-2d44d55ac397

Thank you, and please let me know your thoughts!

svrnm · 2024-11-14T14:39:21Z

I took a look at your code, but from what I see you didn't update your branch to be in sync with main, so the changes introduced via #5328 are not part of your work here, it also creates a merge conflict.

Please do the following:

backup your work here
bring your fork at https://github.com/basiratkareem/opentelemetry.io/ up-to-date with upstream (https://github.com/open-telemetry/opentelemetry.io)
create a new local clone and a new local branch and incorporate your work accordingly.

https://www.loom.com/share/3427b2b7965a479c800175b63048d6ba?sid=8db7958f-6ca2-41f5-aa02-2d44d55ac397

Thanks for taking the time to take a video, but not that we automatically create a preview of your work, which is accessible at https://deploy-preview-5340--opentelemetry.netlify.app/ecosystem/registry/, so approvers can try out your work directly.

basiratkareem · 2024-11-14T14:48:18Z

I took a look at your code, but from what I see you didn't update your branch to be in sync with main, so the changes introduced via #5328 are not part of your work here, it also creates a merge conflict.

Please do the following:

backup your work here

bring your fork at https://github.com/basiratkareem/opentelemetry.io/ up-to-date with upstream (https://github.com/open-telemetry/opentelemetry.io)

create a new local clone and a new local branch and incorporate your work accordingly.

https://www.loom.com/share/3427b2b7965a479c800175b63048d6ba?sid=8db7958f-6ca2-41f5-aa02-2d44d55ac397

Thanks for taking the time to take a video, but not that we automatically create a preview of your work, which is accessible at https://deploy-preview-5340--opentelemetry.netlify.app/ecosystem/registry/, so approvers can try out your work directly.

Apologies for that. I will follow the steps, make the required updates, and revert as needed. Thank you for your assistance!

basiratkareem · 2024-11-15T09:34:11Z

Hi @svrnm, changes implemented in PR #5611

Change made to tags (native, first party integration, cncfProjectLeve…

4a3cacc

…l and deprecated) into clickable buttons to filter record based on the tag

basiratkareem requested a review from a team as a code owner October 8, 2024 00:05

basiratkareem changed the title ~~[outreachy] Registry: click on tag for additional filtering #5312~~ [outreachy] Registry: click on tag for additional filtering Oct 8, 2024

svrnm requested changes Oct 8, 2024

View reviewed changes

svrnm added enhancement New feature or request registry outreachy Issues for Outreachy Participants labels Oct 8, 2024

Add applyTagFilter function and tooltips to the tag buttons

1f0de04

svrnm changed the title ~~[outreachy] Registry: click on tag for additional filtering~~ [outreachy] Registry: click on label for additional filtering Oct 14, 2024

Enhance label filter behavior by appending to existing search terms i…

31bb474

…nstead of replacing

basiratkareem added 7 commits October 25, 2024 18:14

Create the applyFilterTag func and updated the executeSearch func to …

fecfd0e

…call applyFilterTag.

Add applyFilterTag func and updated executeSearch func to call applyF…

680eb59

…ilterTag.

Add the applyFilterTag func and updated the executeSearch func to cal…

3a3b494

…l applyFilterTag.

Add the applyFilterTag func and updated the executeSearch func to cal…

88f811b

…l applyFilterTag.

Add applyFilterTag func and updated executeSearch func to call applyF…

aa84339

…ilterTag.

applyFilterTag func and updated executeSearch func to call applyFilte…

3d10a65

…rTag.

Update executeSearch function and add applyFilterTag function

b80101d

svrnm changed the title ~~[outreachy] Registry: click on label for additional filtering~~ add click on "flag icon" for additional filtering Nov 11, 2024

svrnm added ux and removed enhancement New feature or request outreachy Issues for Outreachy Participants labels Nov 11, 2024

basiratkareem added 2 commits November 14, 2024 13:16

Implement flag filter parameter to trigger on click without modifying…

46a6424

… the search input field

Implement flag filter parameter to trigger on click without modifying…

52386d1

… the search input field

svrnm closed this Nov 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add click on "flag icon" for additional filtering #5340

add click on "flag icon" for additional filtering #5340

basiratkareem commented Oct 8, 2024 •

edited

Loading

linux-foundation-easycla bot commented Oct 8, 2024 •

edited

Loading

svrnm left a comment

svrnm Oct 8, 2024

basiratkareem Oct 8, 2024

basiratkareem Oct 13, 2024

svrnm Oct 14, 2024

basiratkareem Oct 16, 2024 •

edited

Loading

basiratkareem Oct 18, 2024

svrnm Oct 21, 2024

basiratkareem Oct 21, 2024

svrnm commented Oct 25, 2024

basiratkareem commented Oct 25, 2024

svrnm commented Oct 25, 2024

basiratkareem commented Oct 25, 2024

basiratkareem commented Oct 25, 2024 •

edited

Loading

svrnm commented Nov 11, 2024

basiratkareem commented Nov 12, 2024

svrnm commented Nov 12, 2024

basiratkareem commented Nov 14, 2024

svrnm commented Nov 14, 2024

basiratkareem commented Nov 14, 2024

basiratkareem commented Nov 15, 2024

add click on "flag icon" for additional filtering #5340

add click on "flag icon" for additional filtering #5340

Conversation

basiratkareem commented Oct 8, 2024 • edited Loading

linux-foundation-easycla bot commented Oct 8, 2024 • edited Loading

svrnm left a comment

Choose a reason for hiding this comment

svrnm Oct 8, 2024

Choose a reason for hiding this comment

basiratkareem Oct 8, 2024

Choose a reason for hiding this comment

basiratkareem Oct 13, 2024

Choose a reason for hiding this comment

svrnm Oct 14, 2024

Choose a reason for hiding this comment

basiratkareem Oct 16, 2024 • edited Loading

Choose a reason for hiding this comment

basiratkareem Oct 18, 2024

Choose a reason for hiding this comment

svrnm Oct 21, 2024

Choose a reason for hiding this comment

basiratkareem Oct 21, 2024

Choose a reason for hiding this comment

svrnm commented Oct 25, 2024

basiratkareem commented Oct 25, 2024

svrnm commented Oct 25, 2024

basiratkareem commented Oct 25, 2024

basiratkareem commented Oct 25, 2024 • edited Loading

svrnm commented Nov 11, 2024

basiratkareem commented Nov 12, 2024

svrnm commented Nov 12, 2024

basiratkareem commented Nov 14, 2024

svrnm commented Nov 14, 2024

basiratkareem commented Nov 14, 2024

basiratkareem commented Nov 15, 2024

basiratkareem commented Oct 8, 2024 •

edited

Loading

linux-foundation-easycla bot commented Oct 8, 2024 •

edited

Loading

basiratkareem Oct 16, 2024 •

edited

Loading

basiratkareem commented Oct 25, 2024 •

edited

Loading