fix: static search performance (#525)

Co-authored-by: pyansys-ci-bot <[email protected]>
Co-authored-by: Revathy Venugopal <[email protected]>
Co-authored-by: Revathyvenugopal162 <[email protected]>

Author: 3 people

doc/changelog.d/525.fixed.md

@@ -0,0 +1 @@
+fix: static search performance

doc/source/conf.py

@@ -68,8 +68,9 @@
     },
     "logo": "ansys",
     "static_search": {
-        "threshold": 0.5,
-        "ignoreLocation": True,
+        "threshold": 0.2,
+        "limit": 7,
+        "minMatchCharLength": 3,
     },
 }
 

doc/source/user-guide/options.rst

@@ -111,41 +111,50 @@ If you want to hide all icons, use the ``show_icons`` Boolean variable:
 Static search options
 ----------------------
 
-The Ansys Sphinx theme supports static search options to customize the search experience.
+The Ansys Sphinx theme supports static search options to customize the search
+experience.
 
-The static search bar is created using ``Fuse.js``. You can provide all options supported by ``Fuse.js`` through the ``static_search`` dictionary in the ``html_theme_options``.
+The static search bar is created using ``Fuse.js``. You can provide `all
+options <https://www.fusejs.io/api/options.html>`_ supported by ``Fuse.js``
+through the ``static_search`` dictionary in the ``html_theme_options``.
 
-Additional options include:
-
-1. ``keys``: List of keys to search in the documents. Default are ``["title", "text"]``.
-2. ``threshold``: The minimum score a search result must have to be included in the results. Default is ``0.5``.
-3. ``ignoreLocation``: Whether to ignore the location of the search term in the document. Default is ``False``. Ignoring the location can increase the search speed for large documents.
-4. ``limit``: The maximum number of search results to display. Default is ``10``.
-5. ``min_chars_for_search``: The minimum number of characters required to start the search. Default is ``1``.
+To improve the search performance, a debounce function is available. By
+default, a delay of 300 milliseconds is applied. To modify this value, declare
+the ``delay`` key in the ``static_search`` dictionary with a value specifying
+the amount of milliseconds to wait before executing the search. A value of
+``0`` disables the debounce function.
 
 .. note::
 
     All other options are available in the `Fuse.js documentation <https://fusejs.io/api/options.html>`_.
 
-Here is an example of how to add the ``static_search`` dictionary to the ``html_theme_options`` dictionary:
+Here is an example of how to add the ``static_search`` dictionary to the
+``html_theme_options`` dictionary:
 
 .. code-block:: python
 
     html_theme_options = {
         "static_search": {
             "threshold": 0.5,
             "limit": 10,
-            "min_chars_for_search": 1,
+            "minMatchCharLength": 1,
+            "delay": 300,
         },
     }
 
 
 .. note::
 
-    Serve locally your documentation using the ``python -m http.server -d /path/to/docs/html/`` to have a live-preview of your search results. This method is compliant with the `CORS policy <https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS>`_ and allows to load the generated resource files containing the indices of your documentation.
-    The search bar does not work if you open the HTML files directly in the browser.
+    Serve locally your documentation using the ``python -m http.server -d
+    /path/to/docs/html/`` to have a live-preview of your search results. This
+    method is compliant with the `CORS policy
+    <https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS>`_ and allows to
+    load the generated resource files containing the indices of your
+    documentation. The search bar does not work if you open the HTML files
+    directly in the browser.
 
-    To open the documentation in a local server, run the following command in the directory where the HTML files are located:
+    To open the documentation in a local server, run the following command in
+    the directory where the HTML files are located:
 
     .. code-block:: bash
 

doc/styles/config/vocabularies/ANSYS/accept.txt

@@ -3,6 +3,7 @@
 (?i)theme
 (?i)Boolean
 datatable
+debounce
 MeiliSearch
 (?i)linkcode
 link_code_library
@@ -21,4 +22,4 @@ Gedam
 Chris
 Sewell
 (?i)Sphinx-Gallery
-(?i)favicon
+(?i)favicon

src/ansys_sphinx_theme/search/__init__.py

@@ -37,12 +37,7 @@ def update_search_config(app: Sphinx) -> None:
     theme_static_options = app.config.html_theme_options.get("static_search", {})
     theme_static_options["keys"] = ["title", "text"]
     theme_static_options["threshold"] = theme_static_options.get("threshold", 0.5)
-    theme_static_options["shouldSort"] = theme_static_options.get("shouldSort", "True")
-    theme_static_options["ignoreLocation"] = theme_static_options.get("ignoreLocation", "False")
-    theme_static_options["useExtendedSearch"] = theme_static_options.get(
-        "useExtendedSearch", "True"
-    )
     theme_static_options["limit"] = theme_static_options.get("limit", 10)
-    theme_static_options["min_chars_for_search"] = theme_static_options.get(
-        "min_chars_for_search", 1
-    )
+
+
+__all__ = ["create_search_index", "update_search_config"]

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/components/ast-search-button.html

@@ -2,25 +2,13 @@
 <link rel="stylesheet" href="{{ pathto('_static/css/fuse-search.css', 1) }}">
 
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
-
-{% if theme_static_search %}
-
-{% set theme_static_search = theme_static_search | default({}) %}
-{% else %}
-{% set theme_static_search = {'keys': ['title', 'text'], 'threshold': 0.5, 'shouldSort': 'True', 'ignoreLocation': 'False', 'useExtendedSearch': 'True'} %}
-{% endif %}
-
-{% set theme_limit = theme_static_search.limit | default(10) %}
-{% set min_chars_for_search = theme_static_search.min_chars_for_search | default(1) %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.7/require.min.js"></script>
 
 <script>
-var theme_static_search = JSON.parse('{{ theme_static_search | tojson | safe }}');
-var theme_limit = "{{ theme_limit }}";
-var min_chars_for_search = "{{ min_chars_for_search }}";
-var searchPath = "{{ pathto('_static/search.json', 1) }}";
-
+// Passing the search options to the search.js file
+const SEARCH_OPTIONS = JSON.parse('{{ theme_static_search | tojson | safe }}');
+const SEARCH_FILE = "{{ pathto('_static/search.json', 1) }}";
 </script>
 
-<script src="{{ pathto('_static/js/fuse_search.js', 1) }}"></script>
-<script src="{{ pathto('_static/js/fuse_extension.js', 1) }}"></script>
+
+<script src="{{ pathto('_static/js/search.js', 1) }}"></script>

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/components/search-button-field.html

@@ -1,14 +1,13 @@
 
 <div class="search-bar" id="search-bar">
-<form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
-  <i class="fa-solid fa-magnifying-glass"></i>
-  <input type="search" class="form-control" name="q" placeholder="{{ theme_search_bar_text }}"
-         aria-label="{{ theme_search_bar_text }}" autocomplete="off" autocorrect="off"
-         autocapitalize="off" spellcheck="false"/>
-  <span class="search-button__kbd-shortcut">
-    <kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd>
-  </span>
-</form>
-<!-- Search results container -->
-<div id="results" class="results" style="display: none;" tabindex="0">
-</div>
+    <form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
+      <i class="fa-solid fa-magnifying-glass"></i>
+      <input type="search" class="form-control" name="q" placeholder="{{ theme_search_bar_text }}"
+             aria-label="{{ theme_search_bar_text }}" autocomplete="off" autocorrect="off"
+             autocapitalize="off" spellcheck="false"/>
+      <span class="search-button__kbd-shortcut">
+        <kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd>
+      </span>
+    </form>
+    <div id="search-results" class="search-results" style="display: none;" tabindex="0"></div>
+</div>

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/ansys_sphinx_theme.css

@@ -5,7 +5,7 @@
 @import "ansys-sphinx-theme-variables.css";
 @import "pydata-sphinx-theme-custom.css";
 @import "breadcrumbs.css";
-@import "fuse-search.css";
+@import "ast-search.css";
 @import "sphinx-design.css";
 @import "table-custom.css";
 @import "sphinx-gallery.css";

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/fuse-search.css renamed to src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/ast-search.css

@@ -1,71 +1,48 @@
 @import "ansys-sphinx-theme-variable.css";
 
-.results {
+.search-results {
   display: flex;
   flex-direction: column;
-  align-content: flex-start;
-  justify-content: center;
+  align-content: stretch;
+  justify-content: flex-start;
   position: absolute;
   background-color: var(--ast-search-bar-enable-background);
-  width: 700px;
-  padding: 10px;
+  width: 630px;
+  padding: 1em;
   border: 1px solid var(--ast-search-bar-enable-border);
   box-shadow: var(--ast-box-shadow-active);
   overflow: auto;
-  height: 500px;
-}
-.search-button__wrapper.show .search-button__search-container {
-  overflow: auto;
+  max-height: 500px;
 }
+
 .result-item {
-  margin-bottom: 1rem;
-  cursor: pointer; /* Indicate that the item is clickable */
-  transition: box-shadow 0.3s ease; /* Smooth transition */
+  cursor: pointer;
+  transition: box-shadow 0.3s ease;
+  border-bottom: thin solid var(--ast-search-bar-enable-border);
+  padding-bottom: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.result-item:last-child {
+  border-bottom: 0;
+  margin-bottom: 0;
 }
 
 .result-title {
   font-size: 1em;
   font-weight: bold;
-  background-color: var(--ast-suggestion-header-background);
   font-family: "Open Sans", sans-serif;
   color: var(--ast-catagory-header-text);
 }
 
-.result-title:focus,
-.result-title:focus-visible,
-.result-text:focus,
-.result-text:focus-visible {
-  box-shadow: var(--ast-ring-shadow-focused);
-}
-
-.result-item.selected {
-  box-shadow: var(--ast-ring-shadow-focused);
-}
-
 .result-text {
   font-size: 12px;
   font-family: "Open Sans", sans-serif;
   color: var(--ast-search-bar-enable-text);
 }
 
-.result-item:focus-visible,
-.result-item:focus {
-  outline: none; /* Remove default focus outline */
-  cursor: pointer;
+.result-item.selected {
   box-shadow: var(--ast-ring-shadow-focused);
-  z-index: 1;
-}
-
-.result-item:hover {
-  background-color: var(
-    --ast-hover-suggestion-text-background
-  ); /* Background when hovered */
-}
-
-.no-results {
-  font-style: italic;
-  color: var(--ast-color-text);
-  font-family: "Open Sans", sans-serif;
 }
 
 html[data-theme="light"] .highlight {