feat(facets): move selected values on top

pinoramajs · Jul 11, 2024 · 8669432 · 8669432
1 parent 9b4c0b9
commit 8669432
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 19 deletions.
diff --git a/...orama-studio/src/components/log-explorer/components/log-filters/components/facet-body.tsx b/...orama-studio/src/components/log-explorer/components/log-filters/components/facet-body.tsx
@@ -11,7 +11,7 @@ type FacetBodyProps = {
 
 export function FacetBody(props: FacetBodyProps) {
   return (
-    <div className="border border-muted box-border rounded-md overflow-auto max-h-[241px] my-2">
+    <div className="border box-border rounded-md overflow-auto max-h-[241px] my-2">
       {props.values?.map(({ value, count }) => {
         return (
           <FacetItem

diff --git a/...s/pinorama-studio/src/components/log-explorer/components/log-filters/components/facet.tsx b/...s/pinorama-studio/src/components/log-explorer/components/log-filters/components/facet.tsx
@@ -44,40 +44,39 @@ export function Facet(props: FacetProps) {
     [props.onFiltersChange, props.name, props.filters]
   )
 
-  const selected: FacetValue[] = useMemo(() => {
-    return operations
+  const selectedValuesNotInDataSource = useMemo(() => {
+    const selectedItems: FacetValue[] = operations
       .values(props.filters[props.name] as FacetFilter)
       .map((value: string | number) => {
         return {
           value,
           count: facet?.values[value] || 0
         }
       })
-  }, [facet?.values, props.filters, props.name, operations.values])
 
-  const unselected: FacetValue[] = useMemo(() => {
-    return Object.entries(facet?.values || {})
-      .map(([value, count]) => {
+    return selectedItems.filter(
+      (item) => !(item.value in (facet?.values || {}))
+    )
+  }, [props.filters, props.name, facet?.values, operations])
+
+  const allValues = useMemo(() => {
+    const currentValues = Object.entries(facet?.values || {}).map(
+      ([value, count]) => {
         // If the value is a number of type string,
-        // convert it to a number.
+        // we need to parse it to a number.
         let parsedValue: string | number = value
         if (props.type === "enum" && Number.isFinite(+value)) {
           parsedValue = Number(value)
         }
         return { value: parsedValue, count }
-      })
-      .filter(
-        ({ value }) => !selected.some((selected) => selected.value === value)
-      )
-  }, [facet?.values, props.type, selected])
+      }
+    )
 
-  const values = useMemo(
-    () => selected.concat(unselected),
-    [selected, unselected]
-  )
+    return [...selectedValuesNotInDataSource, ...currentValues]
+  }, [selectedValuesNotInDataSource, facet?.values, props.type])
 
   const hasError = status === "error"
-  const hasNoData = values.length === 0
+  const hasNoData = allValues.length === 0
 
   return (
     <div>
@@ -98,7 +97,7 @@ export function Facet(props: FacetProps) {
           <FacetBody
             name={props.name}
             type={props.type}
-            values={values}
+            values={allValues}
             filters={props.filters}
             onFiltersChange={props.onFiltersChange}
           />