@kws3/ui 1.9.1 → 1.9.2

package/CHANGELOG.mdx

@@ -1,3 +1,8 @@
+## 1.9.2
+ - Bug fix with fuzzy.js and Vite prebundling
+ - Debounce fuzzy searches
+ - Expose `@kws3/ui/utils/fuzzysearch` as a reusable function
+
 ## 1.9.1
  - `SearchableSelect` and `MultiSelect`: match colors of dropdown area to theme color when dropdown area is inside a `Portal`
  - `AutoComplete`: match colors of dropdown area to theme color when dropdown area is inside a `Portal`

package/forms/AutoComplete.svelte

@@ -100,7 +100,7 @@ Default value: `<span>{option.label}</span>`
   import { debounce } from "@kws3/ui/utils";
   import { createEventDispatcher, onMount, tick } from "svelte";
   import { createPopper } from "@popperjs/core";
-  import fuzzy from "fuzzy.js";
+  import { fuzzy, fuzzysearch } from "../utils/fuzzysearch";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -262,38 +262,11 @@ Default value: `<span>{option.label}</span>`
   }
 
   function triggerSearch(filters) {
-    let cache = {};
-    //TODO - can optimize more for very long lists
-    filters.forEach((word, idx) => {
-      // iterate over each word in the search query
-      let opts = [];
-      if (word) {
-        if (allow_fuzzy_match) {
-          opts = fuzzySearch(word, normalised_options);
-        } else {
-          opts = [...normalised_options].filter((item) => {
-            // filter out items that don't match `filter`
-            if (typeof item === "object" && item.value) {
-              return (
-                typeof item.value === "string" &&
-                item.value.toLowerCase().indexOf(word) > -1
-              );
-            }
-          });
-        }
-      }
-
-      cache[idx] = opts; // storing options to current index on cache
-    });
-
-    filtered_options = Object.values(cache) // get values from cache
-      .flat() // flatten array
-      .filter((v, i, self) => i === self.findIndex((t) => t.value === v.value)); // remove duplicates
-
-    if (highlighted_results && !allow_fuzzy_match) {
-      filtered_options = highlightMatches(filtered_options, filters);
+    if (allow_fuzzy_match) {
+      debouncedFuzzySearch(filters, [...normalised_options]);
+    } else {
+      searchInStrictMode(filters, [...normalised_options]);
     }
-    setOptionsVisible(true);
   }
 
   function triggerExternalSearch(filters) {
@@ -446,25 +419,57 @@ Default value: `<span>{option.label}</span>`
     return v && v.trim() ? v.toLowerCase().trim().split(/\s+/) : [];
   }
 
-  function fuzzySearch(word, options) {
-    let OPTS = options.map((item) => {
-      let output = fuzzy(item.value, word);
-      item = { ...output, ...item };
-      item.label = output.highlightedTerm;
-      item.score =
-        !item.score || (item.score && item.score < output.score)
-          ? output.score
-          : item.score || 0;
-      return item;
+  const debouncedFuzzySearch = debounce(searchInFuzzyMode, 200, false);
+
+  function searchInFuzzyMode(filters, options) {
+    let cache = {};
+    //TODO - can optimize more for very long lists
+    filters.forEach((word, idx) => {
+      // iterate over each word in the search query
+      let opts = [];
+      if (word) {
+        let result = fuzzysearch(word, options, {
+          search_key: "label",
+          scoreThreshold,
+        });
+        opts = result;
+      }
+
+      cache[idx] = opts; // storing options to current index on cache
     });
+    setFilteredOptions(cache);
+  }
+
+  function searchInStrictMode(filters, options) {
+    let cache = {};
+    filters.forEach((word, idx) => {
+      // iterate over each word in the search query
+      let opts = [];
+      if (word) {
+        opts = options.filter((item) => {
+          // filter out items that don't match `filter`
+          if (typeof item === "object" && item.value) {
+            return (
+              typeof item.value === "string" &&
+              item.value.toLowerCase().indexOf(word) > -1
+            );
+          }
+        });
+      }
 
-    let maxScore = Math.max(...OPTS.map((i) => i.score));
-    let calculatedLimit = maxScore - scoreThreshold;
+      cache[idx] = opts; // storing options to current index on cache
+    });
+    setFilteredOptions(cache, filters);
+  }
 
-    OPTS = OPTS.filter(
-      (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0)
-    );
+  function setFilteredOptions(cache, filters) {
+    filtered_options = Object.values(cache) // get values from cache
+      .flat() // flatten array
+      .filter((v, i, self) => i === self.findIndex((t) => t.value === v.value)); // remove duplicates
 
-    return OPTS;
+    if (highlighted_results && !allow_fuzzy_match) {
+      filtered_options = highlightMatches(filtered_options, filters);
+    }
+    setOptionsVisible(true);
   }
 </script>

package/forms/select/MultiSelect.svelte

@@ -164,7 +164,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   import { debounce } from "@kws3/ui/utils";
   import { createEventDispatcher, onMount, tick } from "svelte";
   import { createPopper } from "@popperjs/core";
-  import fuzzy from "fuzzy.js";
+  import { fuzzy, fuzzysearch } from "../../utils/fuzzysearch";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -407,7 +407,7 @@ Default value: `<span>{option[search_key] || option}</span>`
       debouncedTriggerSearch(filter);
     } else {
       if (allow_fuzzy_match) {
-        filteredOptions = fuzzySearch(filter, [...normalisedOptions]);
+        fuzzySearch(filter, [...normalisedOptions]);
       } else {
         filteredOptions = strictSearch(filter, [...normalisedOptions]);
       }
@@ -416,7 +416,11 @@ Default value: `<span>{option[search_key] || option}</span>`
 
   function updateActiveOption() {
     if (
-      (activeOption && searching && !filteredOptions.includes(activeOption)) ||
+      (activeOption &&
+        searching &&
+        !filteredOptions.some(
+          (fo) => fo[used_value_key] === activeOption[used_value_key]
+        )) ||
       (!activeOption && searchText)
     ) {
       activeOption = filteredOptions[0];
@@ -484,6 +488,8 @@ Default value: `<span>{option[search_key] || option}</span>`
     if (allow_fuzzy_match && fuzzy) {
       fuzzy.analyzeSubTerms = true;
       fuzzy.analyzeSubTermDepth = 10;
+      fuzzy.highlighting.before = "";
+      fuzzy.highlighting.after = "";
     }
 
     //normalize value for single versus multiselect
@@ -716,27 +722,19 @@ Default value: `<span>{option[search_key] || option}</span>`
     });
   };
 
-  function fuzzySearch(filter, options) {
-    if (!filter) return options;
+  const fuzzySearch = debounce(searchInFuzzyMode, 200, false);
+
+  function searchInFuzzyMode(filter, options) {
+    if (!filter) {
+      filteredOptions = options;
+      return;
+    }
     if (options.length) {
-      let OPTS = options.map((item) => {
-        let output = fuzzy(item[used_search_key], filter);
-        item = { ...output, original: item };
-        item.score =
-          !item.score || (item.score && item.score < output.score)
-            ? output.score
-            : item.score || 0;
-        return item;
+      let result = fuzzysearch(filter, options, {
+        search_key: used_search_key,
+        scoreThreshold,
       });
-
-      let maxScore = Math.max(...OPTS.map((i) => i.score));
-      let calculatedLimit = maxScore - scoreThreshold;
-
-      OPTS = OPTS.filter(
-        (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0)
-      ).map((o) => o.original);
-
-      return OPTS;
+      filteredOptions = result;
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -25,10 +25,9 @@
   "dependencies": {
     "apexcharts": "3.33.2",
     "flatpickr": "^4.5.2",
-    "fuzzy.js": "^0.1.0",
     "svelte-portal": "^2.1.2",
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "cc856b925257a0978959fa01b32b7bea6dc52c5c"
+  "gitHead": "9e6e5f8d4dbb1e5f0a40e3dade66bdfd5f31fd4d"
 }

package/utils/fuzzy.js

@@ -0,0 +1,117 @@
+/**
+ * fuzzy.js v0.1.0
+ * (c) 2016 Ben Ripkens
+ * @license: MIT
+ */
+/**
+ *
+ * Adapted from fuzzy.js for @kws3/ui to work with vite prebundling
+ */
+
+var fuzzy = function fuzzy(term, query) {
+  var max = calcFuzzyScore(term, query);
+  var termLength = term.length;
+
+  if (fuzzy.analyzeSubTerms) {
+    for (var i = 1; i < termLength && i < fuzzy.analyzeSubTermDepth; i++) {
+      var subTerm = term.substring(i);
+      var score = calcFuzzyScore(subTerm, query);
+      if (score.score > max.score) {
+        // we need to correct 'term' and 'matchedTerm', as calcFuzzyScore
+        // does not now that it operates on a substring. Doing it only for
+        // new maximum score to save some performance.
+        score.term = term;
+        score.highlightedTerm = term.substring(0, i) + score.highlightedTerm;
+        max = score;
+      }
+    }
+  }
+
+  return max;
+};
+
+var calcFuzzyScore = function calcFuzzyScore(term, query) {
+  var score = 0;
+  var termLength = term.length;
+  var queryLength = query.length;
+  var highlighting = "";
+  var ti = 0;
+  // -1 would not work as this would break the calculations of bonus
+  // points for subsequent character matches. Something like
+  // Number.MIN_VALUE would be more appropriate, but unfortunately
+  // Number.MIN_VALUE + 1 equals 1...
+  var previousMatchingCharacter = -2;
+
+  for (var qi = 0; qi < queryLength && ti < termLength; qi++) {
+    var qc = query.charAt(qi);
+    var lowerQc = qc.toLowerCase();
+
+    for (; ti < termLength; ti++) {
+      var tc = term.charAt(ti);
+
+      if (lowerQc === tc.toLowerCase()) {
+        score++;
+
+        if (previousMatchingCharacter + 1 === ti) {
+          score += 2;
+        }
+
+        highlighting +=
+          fuzzy.highlighting.before + tc + fuzzy.highlighting.after;
+        previousMatchingCharacter = ti;
+        ti++;
+        break;
+      } else {
+        highlighting += tc;
+      }
+    }
+  }
+
+  highlighting += term.substring(ti, term.length);
+
+  return {
+    score: score,
+    term: term,
+    query: query,
+    highlightedTerm: highlighting,
+  };
+};
+
+fuzzy.matchComparator = function matchComparator(m1, m2) {
+  return m2.score - m1.score !== 0
+    ? m2.score - m1.score
+    : m1.term.length - m2.term.length;
+};
+
+/*
+ * Whether or not fuzzy.js should analyze sub-terms, i.e. also
+ * check term starting positions != 0.
+ *
+ * Example:
+ * Given the term 'Halleluja' and query 'luja'
+ *
+ * Fuzzy.js scores this combination with an 8, when analyzeSubTerms is
+ * set to false, as the following matching string will be calculated:
+ * Ha[l]lel[uja]
+ *
+ * If you activate sub temr analysis though, the query will reach a score
+ * of 10, as the matching string looks as following:
+ * Halle[luja]
+ *
+ * Naturally, the second version is more expensive than the first one.
+ * You should therefore configure how many sub terms you which to analyse.
+ * This can be configured through fuzzy.analyzeSubTermDepth = 10.
+ */
+fuzzy.analyzeSubTerms = false;
+
+/*
+ * How many sub terms should be analyzed.
+ */
+fuzzy.analyzeSubTermDepth = 10;
+
+fuzzy.highlighting = {
+  before: "<em>",
+  after: "</em>",
+};
+
+export default fuzzy;

package/utils/fuzzysearch.js

@@ -1,20 +1,42 @@
-export default function fuzzysearch(needle, haystack) {
-  var tlen = haystack.length;
-  var qlen = needle.length;
-  if (qlen > tlen) {
-    return false;
-  }
-  if (qlen === tlen) {
-    return needle === haystack;
-  }
-  outer: for (var i = 0, j = 0; i < qlen; i++) {
-    var nch = needle.charCodeAt(i);
-    while (j < tlen) {
-      if (haystack.charCodeAt(j++) === nch) {
-        continue outer;
+import fuzzy from "./fuzzy.js";
+
+export function fuzzysearch(needle, haystack, opts) {
+  let search_key = defaultValue(opts, "search_key", "value");
+  let scoreThreshold = defaultValue(opts, "scoreThreshold", 5);
+
+  let OPTS = haystack.map((option) => {
+    let item = { ...option };
+    item.original = { ...option };
+    if (typeof item === "object") {
+      if (!Array.isArray(search_key)) {
+        search_key = [search_key];
       }
+
+      search_key.forEach((s_key) => {
+        if (`${s_key}` in item) {
+          let output = fuzzy(option[s_key], needle);
+          item.original[s_key] = output.highlightedTerm;
+          item.score =
+            !item.score || (item.score && item.score < output.score)
+              ? output.score
+              : item.score || 0;
+        }
+      });
     }
-    return false;
-  }
-  return true;
+    return item;
+  });
+
+  let maxScore = Math.max(...OPTS.map((i) => i.score));
+  let calculatedLimit = maxScore - scoreThreshold;
+
+  OPTS = OPTS.filter(
+    (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0)
+  );
+  return OPTS.map((i) => i.original);
 }
+
+function defaultValue(opts, key, value) {
+  return opts && opts[key] ? opts[key] : value;
+}
+
+export { fuzzy };