Admin select component performance #6213

chaimann · 2025-04-10T11:18:55Z

Summary

Allows to fetch options from remote resource, rather than rendering all options in place.

Usage

`:src` attribute

When initialising select component pass :src attribute with a url to JSON resource, omit :choices or pass them as nil.

Mapping fields

Maps fields "id" and "name" from JSON data to be value and text of an option accordingly. If the fields have different names, map them with :"data-option-value-field" and :"data-option-label-field" when initialising select component, e.g.:

// JSON response
[
  { "key": "ruby", "text": "Ruby" },
  { "key": "js", "text": "JavaScript" }
]

# to render these as options use:
component("ui/forms/select").new(
  ...,
  "data-option-value-field": "key",
  "data-option-label-field": "text",
)

Nested JSON data

If data in response JSON is nested, you can specify :"data-json-path" parameter to retrieve the data by given path signature, e.g.:

// JSON response
{
    "request": "https:\/\/whatcms.org\/API\/List",
    "result": {
        "code": 200,
        "msg": "Success",
        "list": [
            {
                "id": 1,
                "label": "WordPress",
                "type": [
                    "Blog",
                    "CMS"
                ]
            },
            {
                "id": 2,
                "label": "Joomla",
                "type": [
                    "Other CMS",
                    "CMS"
                ]
            },
    ...

# to access data specify path:
component("ui/forms/select").new(
  ...,
  src: "https://whatcms.org/API/List"
  "data-option-label-field": "label",
  "data-json-path": "result.list"
)

Loading template

A nice little "Loading" template placeholder is there to be displayed while the options are being loaded.

Screen.Recording.2025-04-10.at.16.14.46.mov

Checklist

Check out our PR guidelines for more details.

The following are mandatory for all PRs:

I agree that my PR will be published under the same license as Solidus.
I have written a thorough PR description.
I have kept my commits small and atomic.
I have used clear, explanatory commit messages.

codecov · 2025-04-10T11:38:55Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.79%. Comparing base (dad997b) to head (8c45c12).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6213      +/-   ##
==========================================
+ Coverage   86.52%   88.79%   +2.27%     
==========================================
  Files         518      840     +322     
  Lines       11934    18227    +6293     
==========================================
+ Hits        10326    16185    +5859     
- Misses       1608     2042     +434

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

fthobe · 2025-04-10T12:10:13Z

This will be very healthy when trying to deal with zipcode zones and I really appreciate this change.

kennyadsl · 2025-04-10T14:28:53Z

@chaimann nice! Which select(s) do we need this for?

tvdeyen · 2025-04-10T14:37:12Z

@chaimann nice! Which select(s) do we need this for?

This is very useful for Product-, Variant- and Taxon-Selects.

kennyadsl · 2025-04-10T14:39:32Z

Right, we were doing something similar with select2 on the legacy admin.

tvdeyen

Amazing. Thanks. Can we make the src argument a bit more approachable? It's too important to "hide" it in a Hash :)

tvdeyen · 2025-04-10T14:39:07Z

admin/app/components/solidus_admin/ui/forms/select/component.rb

@@ -25,22 +25,40 @@ class SolidusAdmin::UI::Forms::Select::Component < SolidusAdmin::BaseComponent
    },
  }.freeze

-  def initialize(label:, name:, choices:, size: :m, hint: nil, tip: nil, error: nil, **attributes)
+  def initialize(label:, name:, choices: nil, size: :m, hint: nil, tip: nil, error: nil, **attributes)


I would prefer to have src as named argument instead of "hiding" it in the attributes.

makes sense! 😄

admin/app/javascript/solidus_admin/web_components/solidus_select.js

tvdeyen

can we please not use data- attributes on our custom element? Sorry, missed that during previous PR review

tvdeyen · 2025-04-10T15:28:34Z

admin/app/javascript/solidus_admin/web_components/solidus_select.js

  async fetchOptions() {
-    const response = await fetch(this.getAttribute("data-src"));
-    return await response.json();
+    const [url, dataPath] = this.getAttribute("data-src").split("::");


can we add a dedicated attribute for that? something like json-result-path?

@tvdeyen are you strongly against this one? 😄 I did it this way because it's more "convention over configuration" and saves us from specifying one more attribute on the select element. Also it felt natural in a way that src is not just a URL but a full "waypoint" to where the relevant data can be accessed. Or do you think it's way too implicit/inconvenient?

No. But it seems a bit weird. I think another attribute is nothing bad.

sure. I had another thought and guess being more explicit about this feature might be a better choice

chaimann · 2025-04-10T20:02:50Z

@chaimann nice! Which select(s) do we need this for?

@kennyadsl also initially this was a spin-off from PR for zones add/edit where when a zone is state based there is a select with all the states. TomSelect handles dynamically loaded options pretty good, without any noticeable impact in the browsers; there is also a setting maxOptions which limits the number of options shown in the dropdown, further improving the performance. I set it to 500 (which I think might even be reduced to 100, but there does not seem to be any difference in performance), and for large option collections I believe the user will still be relying on search filtering rather than manually scrolling to find desired option.

fthobe · 2025-04-10T20:07:15Z

@chaimann it's more complicated than that. You can expect on Zip based zones up to thousands of values.

The issue is outlined in #6187,
you can expect thousands of values and no effective way to manage them other than fully copy and pasting or csv import (which is not a default option on Solidus). What you did is a great step forward in allowing effective management of zones.

chaimann · 2025-04-10T20:35:13Z

@fthobe amazing! I'm super glad that it's going to be useful :)

tvdeyen

I really like that! I also worry about the 500 results we pull. Can we utilize the pagination for that? Does TomSelect support it, like select2 does?

tvdeyen · 2025-04-11T14:51:33Z

admin/app/javascript/solidus_admin/web_components/solidus_select.js

      controlClass: "control",
      dropdownClass: "dropdown",
      dropdownContentClass: "dropdown-content",
      optionClass: "option",
      wrapperClass: "wrapper",
-      maxOptions: null,
+      maxOptions: 500,


Is there a way to utilize the pagination feature from our API, like we do in the productPicker and variantAutoComplete?

@tvdeyen The results are actually preloaded in full, and this maxOptions does not control how many results we pull, but how many results we display on dropdown open. It's like a small "hack" that allows to reduce the lag on TomSelect side (when displaying more than 1k options the search and select/unselect starts to have a visible delay). As I mentioned previously, having it in place helps to build a visual of a "full" dropdown, while expecting the user to use search instead of selecting options by manually scroll-finding them.

We also should be able to make pagination work with TomSelect, there is a plugin for that which I haven't tested yet but I believe it should work. I agree that it would be better in the long term to have paginated results instead of full preload, as the larger a dataset is the longer the request would be processed. The only downside I can see is that the search function would now need to hit the server as well, but I think I can configure it to search the "cached" fetched data first.

This change covers the problem that was discovered while working on zone creation and modification update (states select). The select box performance dropped significantly when there were thousands of options rendered for native select. So instead of rendering regular options, it's now possible to load them from the server and let TomSelect construct available options. For convenience, it also leverages TomSelect "loading" template option to show feedback to the user while request is being processed.

When json response contains other data than just array of option data, allow to access given array by specifying its path in "src" attribute.

Uses "virtual_scroll" plugin to implement loading more options on scroll. Retrieves next page URL from response header "Link". Also patches an existing bug with dropdown scroll: orchidjs/tom-select#556 orchidjs/tom-select#867

… source

Separates existing functionality from "solidus_select" into plugins: - patch_scroll.js - patches mentioned bug with dropdown scroll; - stash_on_search.js - hide and store selected item in a single select when typing, restore if nothing selected; - remote_with_pagination.js - core functionality to load options from remote source;

chaimann · 2025-04-23T07:34:13Z

Screen.Recording.2025-04-23.at.09.26.17.mov

Added infinite scroll for remote select, also patched the bug with dropdown scroll, and redesigned single select search to show search term when typing in the field, restoring selected option if user does not select anything after search.
Also cleaned up "solidus_select" by separating different pieces of logic into separate plugins, courtesy of TomSelect plugins system :)

For preselected options to work correctly these two settings need to be initialized along with TomSelect rather than inside the remote_with_pagination plugin.

github-actions bot added the changelog:solidus_admin label Apr 10, 2025

chaimann marked this pull request as ready for review April 10, 2025 14:25

chaimann requested a review from a team as a code owner April 10, 2025 14:25

tvdeyen reviewed Apr 10, 2025

View reviewed changes

admin/app/javascript/solidus_admin/web_components/solidus_select.js Outdated Show resolved Hide resolved

tvdeyen reviewed Apr 10, 2025

View reviewed changes

chaimann force-pushed the admin-select-component-performance branch from 9de8feb to f9e3557 Compare April 11, 2025 12:33

chaimann requested a review from tvdeyen April 11, 2025 13:07

tvdeyen reviewed Apr 11, 2025

View reviewed changes

chaimann marked this pull request as draft April 16, 2025 17:04

chaimann added 8 commits April 22, 2025 20:15

Update select component to allow finding options in arbitrary json

06a41ba

When json response contains other data than just array of option data, allow to access given array by specifying its path in "src" attribute.

Document accepted parameters

a23ffac

Implement infinite scroll for select with remote source

f12f5cf

Uses "virtual_scroll" plugin to implement loading more options on scroll. Retrieves next page URL from response header "Link". Also patches an existing bug with dropdown scroll: orchidjs/tom-select#556 orchidjs/tom-select#867

Update select component to allow showing selected options with remote…

d1564c2

… source

Use new plugins in "solidus_select"

c60b445

Update component previews

9774b2c

chaimann force-pushed the admin-select-component-performance branch from 808bcdc to 0e9fb3b Compare April 22, 2025 18:19

github-actions bot added the changelog:solidus_core Changes to the solidus_core gem label Apr 22, 2025

Document accepted parameters

2ad8bbd

Make linters happy

2f4eae1

chaimann force-pushed the admin-select-component-performance branch from 44c726d to 2f4eae1 Compare April 22, 2025 19:32

chaimann marked this pull request as ready for review April 23, 2025 07:34

chaimann requested a review from tvdeyen April 23, 2025 07:34

Initialize valueField and labelField sooner

8c45c12

For preselected options to work correctly these two settings need to be initialized along with TomSelect rather than inside the remote_with_pagination plugin.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Admin select component performance #6213

Admin select component performance #6213

chaimann commented Apr 10, 2025 •

edited

Loading

codecov bot commented Apr 10, 2025 •

edited

Loading

fthobe commented Apr 10, 2025

kennyadsl commented Apr 10, 2025

tvdeyen commented Apr 10, 2025

kennyadsl commented Apr 10, 2025

tvdeyen left a comment

tvdeyen Apr 10, 2025

chaimann Apr 10, 2025

tvdeyen left a comment

tvdeyen Apr 10, 2025

chaimann Apr 10, 2025

tvdeyen Apr 10, 2025

chaimann Apr 10, 2025

chaimann commented Apr 10, 2025

fthobe commented Apr 10, 2025

chaimann commented Apr 10, 2025

tvdeyen left a comment

tvdeyen Apr 11, 2025

chaimann Apr 14, 2025

chaimann commented Apr 23, 2025

Admin select component performance #6213

Are you sure you want to change the base?

Admin select component performance #6213

Conversation

chaimann commented Apr 10, 2025 • edited Loading

Summary

Usage

:src attribute

Mapping fields

Nested JSON data

Loading template

Checklist

codecov bot commented Apr 10, 2025 • edited Loading

Codecov Report

fthobe commented Apr 10, 2025

kennyadsl commented Apr 10, 2025

tvdeyen commented Apr 10, 2025

kennyadsl commented Apr 10, 2025

tvdeyen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tvdeyen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chaimann commented Apr 10, 2025

fthobe commented Apr 10, 2025

chaimann commented Apr 10, 2025

tvdeyen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chaimann commented Apr 23, 2025

chaimann commented Apr 10, 2025 •

edited

Loading

`:src` attribute

codecov bot commented Apr 10, 2025 •

edited

Loading