@ulu/frontend-vue 0.1.1-beta.2 → 0.1.1-beta.3

package/lib/components/systems/facets/useFacets.js

@@ -1,6 +1,74 @@
 import { ref, computed, watch } from 'vue';
 import Fuse from 'fuse.js';
 
+/**
+ * Helper function to create a union of multiple Sets.
+ * @param {Array<Set>} sets - An array of sets to unify.
+ * @returns {Set} A new set containing all unique items from the input sets.
+ */
+function unionSets(sets) {
+  const union = new Set();
+  for (const set of sets) {
+    for (const item of set) {
+      union.add(item);
+    }
+  }
+  return union;
+}
+
+/**
+ * Helper function to create an intersection of multiple Sets.
+ * @param {Array<Set>} sets - An array of sets to intersect.
+ * @returns {Set} A new set containing only the items present in all input sets.
+ */
+function intersectSets(sets) {
+  if (!sets || sets.length === 0) return new Set();
+  // Start with a copy of the first set, which is an optimization if it's the smallest.
+  // For better performance, sort sets by size and start with the smallest.
+  const sortedSets = sets.sort((a, b) => a.size - b.size);
+  const intersection = new Set(sortedSets[0]);
+  for (let i = 1; i < sortedSets.length; i++) {
+    for (const item of intersection) {
+      if (!sortedSets[i].has(item)) {
+        intersection.delete(item);
+      }
+    }
+    // If intersection becomes empty, no need to continue.
+    if (intersection.size === 0) break;
+  }
+  return intersection;
+}
+
+/**
+ * Calculates the final set of item indices based on selected facets using the pre-built index.
+ * @param {Array<Object>} selected - The array of selected facet groups.
+ * @param {Map<String, Set>} index - The inverted index.
+ * @param {Set<number>} allItemsSet - A set of all possible item indices.
+ * @returns {Set} A set of indices for the items that match the filters.
+ */
+function getFilteredSetFromIndex(selected, index, allItemsSet) {
+  if (!selected || selected.length === 0) {
+    return allItemsSet;
+  }
+
+  const groupSets = selected.map(group => {
+    const childSets = group.children.map(child => {
+      const key = `${group.uid}:${child.uid}`;
+      return index.get(key) || new Set();
+    });
+
+    // For 'all' (AND), intersect the sets within the group.
+    if (group.match === 'all') {
+      return intersectSets(childSets);
+    }
+    // For 'some' (OR), union the sets within the group.
+    return unionSets(childSets);
+  });
+
+  // Intersect the results from each group.
+  return intersectSets(groupSets);
+}
+
 /**
  * Generates facet groups and their possible values from a list of items.
  * @param {Array<Object>} allItems - The full list of items.
@@ -54,6 +122,7 @@ function generateInitialFacets(allItems, facetFields) {
  * @param {Object} [options.searchOptions={}] - Configuration options for Fuse.js.
  * @param {Function} [options.getItemFacet] - A function to retrieve facet information from an item. Should always return an array of values.
  * @param {Function} [options.getSortValue] - A function to get the value to sort by from an item.
+ * @param {String} [options.countMode='none'] - The mode for calculating facet counts. Can be 'none', 'simple', or 'intuitive'.
  */
 export function useFacets(allItems, options = {}) {
   const defaultGetItemFacet = (item, uid) => {
@@ -120,6 +189,37 @@ export function useFacets(allItems, options = {}) {
     ...extraSortTypes
   }));
 
+  const facetIndex = computed(() => {
+    const index = new Map();
+    // Depend on searchedItems to re-build when search changes.
+    const items = searchedItems.value;
+    if (!items || !facetFields) return index;
+
+    // Create a map of getters for efficiency inside the loop.
+    const getters = new Map(facetFields.map(group => {
+      const getValue = group.getValue || (item => item[group.uid]);
+      return [group.uid, getValue];
+    }));
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      for (const group of facetFields) {
+        const getValue = getters.get(group.uid);
+        const value = getValue(item);
+        const values = Array.isArray(value) ? value : (value ? [value] : []);
+
+        for (const v of values) {
+          const key = `${group.uid}:${v}`;
+          if (!index.has(key)) {
+            index.set(key, new Set());
+          }
+          index.get(key).add(i);
+        }
+      }
+    }
+    return index;
+  });
+
   const searchOptions = computed(() => ({
     shouldSort: true,
     keys: ["title", "label", "description", "author"],
@@ -147,7 +247,23 @@ export function useFacets(allItems, options = {}) {
   });
 
   const filteredItems = computed(() => {
-    return getFilteredItems(searchedItems.value, selectedFacets.value);
+    if (!selectedFacets.value.length) {
+      return searchedItems.value;
+    }
+    const index = facetIndex.value;
+    // This check is important because the index might not be ready on the first render.
+    if (index.size === 0 && searchedItems.value.length > 0 && facetFields?.length > 0) {
+      return [];
+    }
+    const allItemsSet = new Set(searchedItems.value.map((_, i) => i));
+    const filteredIndexSet = getFilteredSetFromIndex(selectedFacets.value, index, allItemsSet);
+    
+    const result = [];
+    // Using a direct loop for performance.
+    for (const i of filteredIndexSet) {
+      result.push(searchedItems.value[i]);
+    }
+    return result;
   });
 
   const displayItems = computed(() => {
@@ -159,22 +275,6 @@ export function useFacets(allItems, options = {}) {
   });
 
   // --- Methods ---
-  function getFilteredItems(items, selected) {
-    if (!selected.length) return items;
-    return items.filter(item => {
-      return selected.every(group => {
-        const itemFacetValues = getItemFacet(item, group.uid);
-        if (itemFacetValues && itemFacetValues.length) {
-          if (group.match === 'all') {
-            return group.children.every(facet => itemFacetValues.includes(facet.uid));
-          }
-          return group.children.some(facet => itemFacetValues.includes(facet.uid));
-        }
-        return false;
-      });
-    });
-  }
-
   function clearFilters() {
     facets.value.forEach(group => {
       if (group.children) {
@@ -223,33 +323,52 @@ export function useFacets(allItems, options = {}) {
         });
       });
     } else if (countMode === 'intuitive') {
+      const index = facetIndex.value;
+      if (index.size === 0 && searchedItems.value.length > 0 && facetFields?.length > 0) {
+        // Index might not be ready yet.
+        return;
+      }
+      const allItemsSet = new Set(searchedItems.value.map((_, i) => i));
+      const currentFilteredSet = getFilteredSetFromIndex(currentSelected, index, allItemsSet);
+
       facets.value.forEach(group => {
         group.children.forEach(child => {
-          const tempFacets = JSON.parse(JSON.stringify(facets.value));
-          const tempGroup = tempFacets.find(g => g.uid === group.uid);
-          const tempChild = tempGroup.children.find(c => c.uid === child.uid);
-
-          if (tempGroup.multiple) {
-            if (tempChild.selected) {
-              child.count = filteredItems.value.filter(item => {
-                const itemValues = getItemFacet(item, group.uid);
-                return itemValues.includes(child.uid);
-              }).length;
-              return;
+          const key = `${group.uid}:${child.uid}`;
+          const childSet = index.get(key) || new Set();
+
+          if (child.selected) {
+            // --- Logic for already-selected facets (now performant) ---
+            if (group.multiple) {
+              // This is the intersection of currently filtered items and items with this facet value.
+              const intersection = intersectSets([currentFilteredSet, childSet]);
+              child.count = intersection.size;
+            } else {
+              // For single-select, the count is just the total number of filtered items.
+              child.count = currentFilteredSet.size;
             }
-            tempChild.selected = true;
           } else {
-            if (tempChild.selected) {
-              child.count = filteredItems.value.length;
-              return;
+            // --- Logic for un-selected facets (now without deep clone) ---
+            const tempSelected = [];
+            for (const g of currentSelected) {
+              tempSelected.push({ ...g, children: [...g.children] });
+            }
+      
+            let groupInTemp = tempSelected.find(g => g.uid === group.uid);
+      
+            if (!groupInTemp) {
+              groupInTemp = { ...group, children: [] };
+              tempSelected.push(groupInTemp);
+            }
+      
+            if (group.multiple) {
+              groupInTemp.children.push(child);
+            } else {
+              groupInTemp.children = [child];
             }
-            tempGroup.children.forEach(f => { f.selected = false; });
-            tempChild.selected = true;
+            
+            const finalSet = getFilteredSetFromIndex(tempSelected, index, allItemsSet);
+            child.count = finalSet.size;
           }
-          
-          const tempSelected = tempFacets.map(g => ({...g, children: g.children.filter(c => c.selected)})).filter(g => g.children.length > 0);
-          const resultItems = getFilteredItems(currentSearchedItems, tempSelected);
-          child.count = resultItems.length;
         });
       });
     }

package/lib/components/visualizations/UluProgressCircle.vue

@@ -61,7 +61,7 @@ const props = defineProps({
    */
   formatValue: {
     type: Function,
-    default: (value) => `${value}%`,
+    default: (value) => `${ value }%`,
   },
   /**
    * Hides the percentage value display.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.1-beta.2",
+  "version": "0.1.1-beta.3",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [

package/types/components/systems/facets/useFacets.d.ts

@@ -11,6 +11,7 @@
  * @param {Object} [options.searchOptions={}] - Configuration options for Fuse.js.
  * @param {Function} [options.getItemFacet] - A function to retrieve facet information from an item. Should always return an array of values.
  * @param {Function} [options.getSortValue] - A function to get the value to sort by from an item.
+ * @param {String} [options.countMode='none'] - The mode for calculating facet counts. Can be 'none', 'simple', or 'intuitive'.
  */
 export function useFacets(allItems: import("vue").Ref<Array<any>>, options?: {
     initialFacets?: any[];
@@ -22,6 +23,7 @@ export function useFacets(allItems: import("vue").Ref<Array<any>>, options?: {
     searchOptions?: any;
     getItemFacet?: Function;
     getSortValue?: Function;
+    countMode?: string;
 }): {
     facets: import("vue").Ref<any, any>;
     searchValue: import("vue").Ref<string, string>;

package/types/components/systems/facets/useFacets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFacets.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/useFacets.js"],"names":[],"mappings":"AA2CA;;;;;;;;;;;;;GAaG;AACH,oCAZW,OAAO,KAAK,EAAE,GAAG,CAAC,KAAK,KAAQ,CAAC,YAExC;IAAwB,aAAa;IACb,WAAW;IACV,kBAAkB;IAClB,eAAe;IACd,cAAc;IACf,cAAc;IACd,aAAa;IACX,YAAY;IACZ,YAAY;CACzC;;;;;;;;;;;;;EAmNA"}
+{"version":3,"file":"useFacets.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/useFacets.js"],"names":[],"mappings":"AA+GA;;;;;;;;;;;;;;GAcG;AACH,oCAbW,OAAO,KAAK,EAAE,GAAG,CAAC,KAAK,KAAQ,CAAC,YAExC;IAAwB,aAAa;IACb,WAAW;IACV,kBAAkB;IAClB,eAAe;IACd,cAAc;IACf,cAAc;IACd,aAAa;IACX,YAAY;IACZ,YAAY;IACd,SAAS;CACpC;;;;;;;;;;;;;EAqQA"}