Changing the default value of sortBy in connectHierarchicalMenu?

[eunjae-lee]

It's currently ['name:asc'], but what if we change it to ['isRefined:desc', 'name:asc']?

Normally categories.lvl0 and categories.lvl1 are strings but if arrays of strings are given, like

{
  "categories.lvl0": ["Cell Phone", "Mobile"],
  "categories.lvl1": ["Cell Phone > Accessories", "Mobile > Accessories"]
}

results[0].facets.CATEGORY_NAME contains multiple facets.

When they have only string, then it contains only one facet

---

Then here, when results[0] and results[1] are merged, the facets can become more than the limit given.

And eventually some of them get sliced out in the connectHierarchicalMenu.

Even if a user refined something, there is a chance that it is not displayed. To avoid this, we can add isRefined:desc to sortBy by default. It is a breaking change. So if it makes sense, we can consider this change in the next major version.

[Haroenv]

I think long term we need a different solution than just sorting to the top, since that always moves the items around and can be confusing if you click repeatedly.

I wonder if we could try something like this logic (for all widgets, pseudo code):

// make sure maxValuesPerFacet = limit + refinedItems.length + a margin
// not fool-proof, an item can still be missing if it's refined, but very few values
const originalRequestedItems = [
  { refined: true, id: 1 },
  { refined: false, id: 2 },
  { refined: false, id: 3 },
  { refined: true, id: 4 },
  { refined: false, id: 5 },
  { refined: false, id: 6 },
  { refined: false, id: 7 },
  { refined: true, id: 8 }
  // if you have more items, it will overflow the list
  // { refined: true, id: 9 },
  // { refined: true, id: 10 },
  // { refined: true, id: 11 }
];

const limit = 6;

const items = originalRequestedItems.slice(0, limit);
// thus:
// items = [
//   { refined: true, id: 1 },
//   { refined: false, id: 2 },
//   { refined: false, id: 3 },
//   { refined: true, id: 4 },
//   { refined: false, id: 5 },
//   { refined: false, id: 6 },
// ];
console.log("after just slicing", JSON.stringify(items, null, 2));

const refinedItems = originalRequestedItems.filter(item => item.refined);
// thus:
// refinedItems = [
//   { refined: true, id: 1 },
//   { refined: true, id: 4 },
//   { refined: true, id: 8 },
// //                     ^- this item is missing from the list
// ];
console.log("refined items", JSON.stringify(refinedItems, null, 2));

// IRL you'd have a better sort here of course
items.sort((a, b) => a.id - b.id);

const hiddenRefinedItems = refinedItems.filter(
  item => items.includes(item) === false
);
// this is [{refined: true, id: 8}]
console.log("hiddenRefinedItems", JSON.stringify(hiddenRefinedItems, null, 2));

const lastShownRefinedItemIndex = items.reduce(
  (lastIndex, curr, i) => (curr.refined ? i : lastIndex),
  -1
);
// this is 3
console.log("lastShownRefinedItemIndex", lastShownRefinedItemIndex);

// to prevent replacing a refined item
const maxItemsToReplace = items.length - 1 - lastShownRefinedItemIndex;
// this is 2
console.log("maxItemsToReplace", maxItemsToReplace);

const numberOfItemsToReplace = Math.min(
  maxItemsToReplace,
  hiddenRefinedItems.length
);
// this is 1
console.log("numberOfItemsToReplace", numberOfItemsToReplace);

const indexToStartReplacingAt = items.length - numberOfItemsToReplace;
// this is 5
console.log("indexToStartReplacingAt", indexToStartReplacingAt);

items.splice(
  indexToStartReplacingAt,
  numberOfItemsToReplace,
  ...hiddenRefinedItems
);
// finally our items will be:
// items = [
//   { refined: true, id: 1 },
//   { refined: false, id: 2 },
//   { refined: false, id: 3 },
//   { refined: true, id: 4 },
//   { refined: false, id: 5 },
//   { refined: true, id: 8 },
// ];
console.log("final items", JSON.stringify(items, null, 2));

// if you add more items to "refined, but not shown"

My idea would be to use the "natural" / "alphabetical" sort, tie-broken by the count (although no item will have the same name fully) (which I guess could be swapped for count -> alpha). Then adding on to the back all refined items, trying to go as low over the limit as possible.

I made a sandbox for this: https://codesandbox.io/s/twilight-firefly-1sce5?expanddevtools=1&fontsize=14&hidenavigation=1&previewwindow=console