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

[Documentation] Search bar for tables within docs #646

Merged
merged 8 commits into from
Oct 21, 2024

Conversation

fraser-combe
Copy link
Contributor

@fraser-combe fraser-combe commented Oct 9, 2024

🗑️ This dev branch should be deleted after merging to main.

🧠 Summary

This PR adds a search box to the tables within the documentation to improve the user experience when navigating through input and output details.

example markdown table updates wrapping in div with specific class

<div class="searchable-table" markdown="1">
Name | Value
-- | --
Item 1 | 100
Item 2 | 200
Item 3 | 300

</div>
: The div element wraps around the table. The class="searchable-table" is used to apply custom styles or JavaScript to this specific container. The attribute markdown="1" tells the Markdown processor to parse the content inside the div as Markdown.

⚡ Impacted Workflows/Tasks

Documentation: Added search functionality for the input and output tables.

This PR may lead to different results in pre-existing outputs: No

This PR uses an element that could cause duplicate runs to have different results: No

🛠️ Changes

Added a search box above the tables for input and output data to allow filtering table content.
Updated the CSS to ensure the search box styles are applied
Modified the JavaScript to dynamically add search boxes to relevant tables.

⚙️ Algorithm

N/A. The changes are related to the documentation display and user interface improvements.

➡️ Inputs

N/A

⬅️ Outputs

N/A

🧪 Testing

Verified that the search box appears above the input and output tables.
Tested the search functionality to ensure filtering works correctly
Tested search box is present upon page refresh

Suggested Scenarios for Reviewer to Test

Verify that the search box appears above both input and output tables.
Test the search functionality by entering various keywords and ensuring the filtering behaves as expected.

🔬 Final Developer Checklist

  • The workflow/task has been tested and results, including file contents, are as anticipated
  • The CI/CD has been adjusted and tests are passing (Theiagen developers)
  • Code changes follow the style guide
  • Documentation and/or workflow diagrams have been updated if applicable (Theiagen developers only)

🎯 Reviewer Checklist

  • All changed results have been confirmed
  • You have tested the PR appropriately (see the testing guide for more information)
  • All code adheres to the style guide
  • MD5 sums have been updated
  • The PR author has addressed all comments
  • The documentation has been updated

@fraser-combe fraser-combe requested a review from a team as a code owner October 9, 2024 18:20
@sage-wright
Copy link
Member

please remove all items in the site/ folder

mkdocs.yml Outdated Show resolved Hide resolved
mkdocs.yml Outdated Show resolved Hide resolved
@fraser-combe
Copy link
Contributor Author

updated extra_ javascript for table sort functionality

Copy link
Member

@sage-wright sage-wright left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will be so usefull!!! 🌟

@sage-wright sage-wright merged commit cd107b6 into main Oct 21, 2024
3 checks passed
@fraser-combe fraser-combe deleted the fc-search-table-doc-dev branch October 21, 2024 13:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants