- better facet filtering

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@openfonts/open-sans_all": "^1.44.2",
         "axios": "^0.24.0",
+        "class-transformer": "^0.4.0",
         "core-js": "^3.6.5",
         "qs": "^6.10.1",
         "rxjs": "^6.6.0",
@@ -4716,6 +4717,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/class-transformer": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/class-transformer/-/class-transformer-0.4.0.tgz",
+      "integrity": "sha512-ETWD/H2TbWbKEi7m9N4Km5+cw1hNcqJSxlSYhsLsNjQzWWiZIYA1zafxpK9PwVfaZ6AqR5rrjPVUBGESm5tQUA=="
+    },
     "node_modules/class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -20774,6 +20780,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "class-transformer": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/class-transformer/-/class-transformer-0.4.0.tgz",
+      "integrity": "sha512-ETWD/H2TbWbKEi7m9N4Km5+cw1hNcqJSxlSYhsLsNjQzWWiZIYA1zafxpK9PwVfaZ6AqR5rrjPVUBGESm5tQUA=="
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@openfonts/open-sans_all": "^1.44.2",
     "axios": "^0.24.0",
+    "class-transformer": "^0.4.0",
     "core-js": "^3.6.5",
     "qs": "^6.10.1",
     "rxjs": "^6.6.0",

src/app.ts

@@ -8,6 +8,7 @@ import { DatasetService } from "./services/dataset.service";
 import { Dataset, Suggestion } from "./models/dataset";
 import { SolrResponse, FacetFields, FacetItem, FacetResults } from "./models/headers";
 import { ActiveFilterCategories } from "@/models/solr";
+import { deserialize } from "class-transformer";
 
 @Options({
     components: {
@@ -63,6 +64,7 @@ export default class App extends Vue {
         // }
 
         this.activeFilterCategories = new ActiveFilterCategories();
+        this.facets = new FacetResults();
 
         // this.facets = {};
         this.searchTerm = suggestion;
@@ -72,7 +74,7 @@ export default class App extends Vue {
         );
     }
 
-    private dataHandler(res: SolrResponse): void {
+    private dataHandler(res: SolrResponse, filterItem?: FacetItem): void {
         // this.results = datasets;
         this.results = res.response.docs;
         this.numFound = res.response.numFound;
@@ -108,7 +110,25 @@ export default class App extends Vue {
             const facetCategory = facet_fields[prop];
             if (facetCategory.buckets) {
                 const facetItems: Array<FacetItem> = facetCategory.buckets;
-                const facetValues = facetItems.filter(function (el) {
+
+                let facetValues = facetItems.map((facetItem, index) => {
+                    let rObj: FacetItem;
+                    if (filterItem?.val == facetItem.val) {
+                        rObj = filterItem;
+                    } else if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
+                        // console.log(facetValue + " is included")
+                        const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
+                        // console.log(indexOfFacetValue);
+                        rObj = this.facets[prop][indexOfFacetValue];
+                        rObj.count = facetItem.count;
+                        // rObj = new FacetItem(val, count);
+                    } else {
+                        rObj = new FacetItem(facetItem.val, facetItem.count);
+                    }
+                    return rObj;
+                });
+
+                facetValues = facetValues.filter(function (el) {
                     return el != null && el.count > 0;
                 });
                 // this.facets[prop] = facetCategory;
@@ -131,8 +151,9 @@ export default class App extends Vue {
         // if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
         if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
             this.activeFilterCategories[facetItem.category].push(facetItem.val);
+
             this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
-                (res: SolrResponse) => this.dataHandler(res),
+                (res: SolrResponse) => this.dataHandler(res, facetItem),
                 (error: any) => this.errorHandler(error),
             );
             // alert(this.activeFilterCategories[filter.Category]);

src/components/face-category/facet-category.vue

@@ -9,7 +9,7 @@
             <ul class="filter-items list-unstyled" v-bind:class="{ limited: facetItems.length > 1 && collapsed }">
                 <li v-for="(item, index) in facetItems" :key="index" class="list-group-item titlecase">
                     <!-- <span :class="item.Active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.val }} ({{ item.count }}) </span> -->
-                    <span @click.prevent="activateItem(item)">{{ item.val }} ({{ item.count }}) </span>
+                    <span :class="item.active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.val }} ({{ item.count }}) </span>
                 </li>
             </ul>
             <ul class="overflowing" v-if="overflowing == true">

src/models/headers.ts

@@ -67,9 +67,16 @@ export interface FacetInstance {
     // buckets: Array<FacetItem>;
 }
 
-export interface FacetItem {
+export class FacetItem {
     val: string;
     count: number;
     category: string;
     active: boolean;
+
+    constructor(value: string, count: number) {
+        this.val = value;
+        this.count = count;
+        this.active = false;
+        this.category = "";
+    }
 }

src/notes.txt

@@ -40,4 +40,6 @@ npm install --save @openfonts/open-sans_all
 
 vue inspect > out.js
 
-npm install --save qs
+npm install --save qs
+
+npm install --save class-transformer