feat(18222): Show layers starting with key words at the top in mcda dropdown

package.json

@@ -86,7 +86,7 @@
     "@konturio/default-icons": "^2.3.2",
     "@konturio/default-theme": "~3.2.5",
     "@konturio/floating": "^1.1.2",
-    "@konturio/ui-kit": "^5.1.12",
+    "@konturio/ui-kit": "^5.2.0",
     "@loaders.gl/core": "^3.4.14",
     "@loaders.gl/loader-utils": "^3.4.14",
     "@loaders.gl/worker-utils": "^3.4.14",

src/features/mcda/components/MCDAForm/index.tsx

@@ -13,6 +13,7 @@ import { createStateMap } from '~utils/atoms';
 import { availableBivariateAxisesAtom } from '../../atoms/availableBivariateAxisesAtom';
 import { generateEmojiPrefix } from '../../utils/generateEmojiPrefix';
 import s from './style.module.css';
+import { sortByAlphabet, sortByWordOccurence } from './utils/sorting';
 import type { Axis } from '~utils/bivariate';
 
 type FormInitialState = {
@@ -57,14 +58,10 @@ export function MCDAForm({
   const [axisesResource] = useAtom(availableBivariateAxisesAtom);
   const inputItems = useMemo(
     () =>
-      (axisesResource.data ?? [])
-        .sort((axis1, axis2) =>
-          axis1.label?.localeCompare(axis2.label, undefined, { sensitivity: 'base' }),
-        )
-        .map((d) => ({
-          title: `${generateEmojiPrefix(d.quotients?.[0]?.emoji)} ${d.label}`,
-          value: d.id,
-        })) ?? [],
+      (axisesResource.data ?? []).map((d) => ({
+        title: `${generateEmojiPrefix(d.quotients?.[0]?.emoji)} ${d.label}`,
+        value: d.id,
+      })) ?? [],
     [axisesResource],
   );
 
@@ -96,6 +93,17 @@ export function MCDAForm({
     }
   }, [axisesResource, selectedIndicators, onConfirm, name]);
 
+  const sortDropdownItems = useCallback(
+    (items: SelectableItem[], search: string): SelectableItem[] => {
+      sortByAlphabet(items);
+      if (search) {
+        sortByWordOccurence(items, search);
+      }
+      return items;
+    },
+    [],
+  );
+
   const statesToComponents = createStateMap(axisesResource);
 
   const indicatorsSelector = statesToComponents({
@@ -111,6 +119,7 @@ export function MCDAForm({
           onChange={onSelectedIndicatorsChange}
           placeholder={i18n.t('mcda.modal_input_indicators_placeholder')}
           noOptionsText={i18n.t('mcda.modal_input_indicators_no_options')}
+          transformSearchResults={sortDropdownItems}
         />
       </div>
     ),

src/features/mcda/components/MCDAForm/utils/__snapshots__/sorting.test.ts.snap

@@ -0,0 +1,51 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`sortByAlphabet > should sort items alphabetically, ignoring case 1`] = `
+[
+  {
+    "title": "999 numbers are earlier than letters",
+    "value": "5",
+  },
+  {
+    "title": "Ab",
+    "value": "3",
+  },
+  {
+    "title": "ac longer item",
+    "value": "4",
+  },
+  {
+    "title": "BB",
+    "value": "2",
+  },
+  {
+    "title": "CCC",
+    "value": "1",
+  },
+]
+`;
+
+exports[`sortByWordOccurence > should sort items based on earlier occurence of the substring at a starting word boundary 1`] = `
+[
+  {
+    "title": "Word at the start of the line",
+    "value": "5",
+  },
+  {
+    "title": "A. Word",
+    "value": "3",
+  },
+  {
+    "title": "BB. Words can be plural",
+    "value": "2",
+  },
+  {
+    "title": "CCC. Lower case word",
+    "value": "1",
+  },
+  {
+    "title": "Nonword. Not at the start boundary, does not count",
+    "value": "4",
+  },
+]
+`;

src/features/mcda/components/MCDAForm/utils/sorting.test.ts

@@ -0,0 +1,31 @@
+import { expect, describe, it } from 'vitest';
+import { sortByAlphabet, sortByWordOccurence } from './sorting';
+import type { SelectableItem } from '@konturio/ui-kit';
+
+describe('sortByWordOccurence', () => {
+  it('should sort items based on earlier occurence of the substring at a starting word boundary', () => {
+    const items: SelectableItem[] = [
+      { title: 'CCC. Lower case word', value: '1' },
+      { title: 'BB. Words can be plural', value: '2' },
+      { title: 'A. Word', value: '3' },
+      { title: 'Nonword. Not at the start boundary, does not count', value: '4' },
+      { title: 'Word at the start of the line', value: '5' },
+    ];
+    sortByWordOccurence(items, 'word');
+    expect(items).toMatchSnapshot();
+  });
+});
+
+describe('sortByAlphabet', () => {
+  it('should sort items alphabetically, ignoring case', () => {
+    const items: SelectableItem[] = [
+      { title: 'CCC', value: '1' },
+      { title: 'BB', value: '2' },
+      { title: 'Ab', value: '3' },
+      { title: 'ac longer item', value: '4' },
+      { title: '999 numbers are earlier than letters', value: '5' },
+    ];
+    sortByAlphabet(items);
+    expect(items).toMatchSnapshot();
+  });
+});

src/features/mcda/components/MCDAForm/utils/sorting.tsx

@@ -0,0 +1,24 @@
+import type { SelectableItem } from '@konturio/ui-kit';
+
+export function sortByAlphabet(items: SelectableItem[]) {
+  return items.sort((axis1, axis2) =>
+    axis1.title?.localeCompare(axis2.title, undefined, { sensitivity: 'base' }),
+  );
+}
+
+/**
+ * Sorts an array in place. Item moves higher if the substring occurs at the start
+ * of a word boundary. The earlier the occurence - the higher the item moves.
+ */
+export function sortByWordOccurence(items: SelectableItem[], substring: string) {
+  items.sort((axis1, axis2) => {
+    const regex = new RegExp(`\\b(${substring})`, 'i');
+    const NOT_FOUND = 10000;
+    const axis1FirstWordIndex = axis1.title.search(regex);
+    const axis2FirstWordIndex = axis2.title.search(regex);
+    return (
+      (axis1FirstWordIndex >= 0 ? axis1FirstWordIndex : NOT_FOUND) -
+      (axis2FirstWordIndex >= 0 ? axis2FirstWordIndex : NOT_FOUND)
+    );
+  });
+}