sorting facet values

Author: Piotr

src/App.vue

@@ -625,9 +625,15 @@ const updateSampleLine = () => {
                 <button class="btn-sm" style="margin-top:4px" @click="store.resetCorrelationFilter()">Reset correlation
                   filter</button>
               </div>
+              <br />
+              <span class="sort-label">Sort facets </span>
+              <button class="btn-sm" @click="store.facetSort = 'label'"
+                :disabled="store.facetSort === 'label'">Label</button>
+              <button class="btn-sm" @click="store.facetSort = 'count'"
+                :disabled="store.facetSort === 'count'">Count</button>
             </div>
             <Filter />
-            <FacetComponent :facets="store.facets" />
+            <FacetComponent :facets="store.facets" :sort="store.facetSort" />
           </template>
         </div>
       </div>

src/app.scss

@@ -135,6 +135,10 @@
       .counter {
         text-align: center;
         padding-bottom: 10px;
+
+        .sort-label{
+          font-size: 12px;
+        }
       }
 
     }

src/components/Facet.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { FacetCollection, FacetValues } from '../types';
+import { computed, ref } from 'vue';
+import { FacetCollection, FacetItem, FacetValues } from '../types';
 
 const props = defineProps<{
-    facets: FacetValues
+    facets: FacetValues,
+    sort: SortPropName
 }>()
 
 const toggleAll = (f: FacetCollection) => {
@@ -21,6 +22,12 @@ const facetsSorted = computed(() => {
     })
 })
 
+export type SortPropName = 'count' | 'label'
+const facetItemsSorted = (items: FacetItem[], sortBy: SortPropName) => {
+    let dir = sortBy === 'count' ? -1 : 1
+    return items.sort((a, b) => a[sortBy] > b[sortBy] ? 1 * dir : -1 * dir)
+}
+
 const formatNumber = (num: number): string => {
     return Intl.NumberFormat('en-US', {
         notation: "compact",
@@ -40,7 +47,7 @@ const formatNumber = (num: number): string => {
             <span class="facet-toggle" @click="toggleAll(f)">All</span>
         </div>
         <div v-if="f.toggled" class="facet-items">
-            <div v-for="l in f.items" class="facet-item" @click="l.selected = !l.selected"
+            <div v-for="l in facetItemsSorted(f.items, props.sort)" class="facet-item" @click="l.selected = !l.selected"
                 :class="{ 'facet-selected': l.selected }">
                 <div class="facet-label" :title="l.label">{{ l.label }}</div>
                 <div class="facet-val" :title="l.count.toString()">{{ formatNumber(l.count) }}</div>

src/store.ts

@@ -6,6 +6,7 @@ import { Layout } from "./config";
 import { useFilterStore } from "./stores/filter";
 import { client } from "./api";
 import { formatThousands, getUrlParam } from "./utils";
+import { SortPropName } from "./components/Facet.vue";
 
 export interface Notification {
     id?: string;
@@ -58,6 +59,7 @@ export const useMainStore = defineStore("main", () => {
     const settingsDrawer = ref<boolean>(false)
     const correlationFilter = ref<string>("")
     const tracesRows = ref<Record<string, TraceRow>>({})
+    const facetSort = ref<SortPropName>("label")
 
     const initSettings = ref<InitSettings>()
 
@@ -385,6 +387,7 @@ export const useMainStore = defineStore("main", () => {
         searchbarValid,
         searchClear,
 
-        toggleRowMark
+        toggleRowMark,
+        facetSort
     };
 });