feat(search): facets are now fully collapsed by default. Also less ta…

…ll when closed. User can expand them to a fixed height with scrollable list of options.
kingsdigitallab · Dec 10, 2024 · 6e1294e · 6e1294e
1 parent 1538c98
commit 6e1294e
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 13 deletions.
diff --git a/app/assets/main.css b/app/assets/main.css
@@ -396,7 +396,9 @@ div[data-tei-subtype='section'] .textpart-number:before {
 }
 
 .panel-expand {
-  float: right;
+  /* float: right; */
+  display: inline-block;
+  width: 90%;
 }
 
 .facet-options ul {
@@ -497,4 +499,16 @@ div[data-tei-subtype='section'] .textpart-number:before {
   font-style: italic;
   margin: 0.5em;
   margin-top: 1.5em;
+}
+
+#search .panel-heading {
+  font-size: 1.2em;
+  line-height: 1em;
+  padding-top: 0.4em;
+  padding-bottom: 0.4em;
+}
+
+.facet-options ul {
+  overflow-y: auto;
+  max-height: 30em;
 }
diff --git a/app/assets/search.mjs b/app/assets/search.mjs
@@ -13,7 +13,7 @@ import { AvailableTags } from "../tags.mjs";
 const INDEX_PATH = 'app/index.json'
 const ITEMS_PER_PAGE = 24
 const OPTIONS_PER_FACET = 15
-const OPTIONS_PER_FACET_EXPANDED = 100
+const OPTIONS_PER_FACET_EXPANDED = 1000
 const HIDE_OPTIONS_WITH_ZERO_COUNT = true
 const CHANGE_QUEUE_PATH = 'annotations/change-queue.json'
 const TAG_EXEMPLAR = 'm.exemplar'
@@ -22,6 +22,25 @@ const SHA_UNREAD = 'SHA_UNREAD'
 const DATE_MIN = -1000
 const DATE_MAX = 2000
 
+function loadFacetsSettings() {
+  /* 
+  {
+    "chr": {"size":100,"sort":"count","order":"desc"},
+    "com": {"size":15,"sort":"count","order":"desc"}
+  }
+  */
+  let ret = JSON.parse(window.localStorage.getItem('facetsSettings') || '{}')
+
+  // remove all references to .size
+  Object.values(ret).forEach(facetSettings => {
+    delete facetSettings.size
+  })
+
+  // console.log(ret)
+
+  return ret
+}
+
 createApp({
   data() {
     return {
@@ -42,7 +61,7 @@ createApp({
         page: 1,
         perPage: ITEMS_PER_PAGE,
         // facetName: {sort: key|count, order: asc|desc, size: N}
-        facetsSettings: JSON.parse(window.localStorage.getItem('facetsSettings') || '{}'),
+        facetsSettings: loadFacetsSettings(),
         items: new Set(),
         newTagName: '',
         newTypeName: '',
@@ -371,8 +390,11 @@ createApp({
       this.itemsjs = window.itemsjs(this.index.data, config);
     },
     onClickFacetExpand(facetKey) {
+      if (this.getSelectedOptionsCount(facetKey)) return;
+
       let settings = this.getFacetSettings(facetKey)
-      settings.size = settings.size == OPTIONS_PER_FACET ? OPTIONS_PER_FACET_EXPANDED : OPTIONS_PER_FACET;
+      // settings.size = settings.size == OPTIONS_PER_FACET ? OPTIONS_PER_FACET_EXPANDED : OPTIONS_PER_FACET;
+      settings.expanded = !(settings?.expanded)
       this.setFacetSettings(facetKey, settings)
     },
     getFacetSettings(facetKey) {
@@ -385,13 +407,19 @@ createApp({
     },
     isFacetExpanded(facetKey) {
       let settings = this.getFacetSettings(facetKey)
-      return settings.size != OPTIONS_PER_FACET 
+      return !!settings.expanded
     },
     isFacetSortedBy(facetKey, sort, order) {
       let settings = this.getFacetSettings(facetKey)
       return settings.sort == sort && settings.order == order
 
     },
+    getSelectedOptionsCount(facetKey) {
+      return this.getSelectedOptions(facetKey).length
+    },
+    getSelectedOptions(facetKey) {
+      return this.selection?.facets[facetKey] || []
+    },
     onClickFacetColumn(facetKey, columnName) {
       let settings = this.getFacetSettings(facetKey)
       if (settings.sort == columnName) {
@@ -443,11 +471,15 @@ createApp({
       for (let facetKey of Object.keys(ret)) {
         let facet = ret[facetKey]
         let settings = this.getFacetSettings(facetKey)
-        facet.size = settings.size
+        // TODO: more efficient if we don't include it when not expanded
+        // note that size = 0 is treated like infinite by itemsjs
+        facet.size = settings.expanded ? OPTIONS_PER_FACET_EXPANDED : 1
         facet.sort = settings.sort
         facet.order = settings.order
         facet.hide_zero_doc_count = HIDE_OPTIONS_WITH_ZERO_COUNT
       }
+      // console.log('Facet Defs')
+      // console.log(ret)
       return ret
     },
     search(keepPage=false) {
@@ -464,6 +496,7 @@ createApp({
         query: (this.selection.searchPhrase || '').trim(),
         filters: this.selection.facets
       }
+      // console.log(options)
       if (this.selection.dateFrom > DATE_MIN || this.selection.dateTo < DATE_MAX) {
         options.filter = (item) => {
           if (this.selection.dateFrom > DATE_MIN) {
@@ -735,14 +768,17 @@ createApp({
       for (let facet of Object.keys(this.getFacetDefinitions())) {
         let options = searchParams.get(`f.${facet}`)
         if (options) {
+          // console.log(facet, options)
           this.selection.facets[facet] = options.split('|')
+          // console.log(this.selection.facets)
         }
       }
+      // console.log(this.selection.facets)
     },
     _getNumberFromString(stringValue, defaultValue=0) {
       let res = parseInt(stringValue)
       let ret = isNaN(res) ? defaultValue : res
-      console.log(stringValue, res, defaultValue, ret)
+      // console.log(stringValue, res, defaultValue, ret)
       return ret
     }
   }

diff --git a/app/search.html b/app/search.html
@@ -60,7 +60,7 @@ <h4 class="title is-4">
         <div class="columns search">
           <div class="column is-3 filters">
             <h2 class="title is-3">Filters 
-              <a href="#" @click.stop.prevent="resetSearch()" class="side-links">(clear)</a>
+              <a href="#" @click.stop.prevent="resetSearch()" class="side-links button is-medium">Clear</a>
             </h2>
             <div class="panel">
               <p class="panel-heading">
@@ -72,13 +72,14 @@ <h2 class="title is-3">Filters
 
               <template v-for="(facet, facetKey) in facets">
                 <p class="panel-heading">
-                  {{ facet.title }}
                   <a class="panel-expand" @click.stop.prevent="onClickFacetExpand(facetKey)" :title="isFacetExpanded(facetKey) ? 'Collapse' : 'Expand'">
-                    <template v-if="isFacetExpanded(facetKey)"><i class="fas fa-minus"></i></template>
-                    <template v-else><i class="fas fa-plus"></i></template>
+                    <template v-if="isFacetExpanded(facetKey)"><i class="fas fa-angle-down"></i></template>
+                    <template v-else><i class="fas fa-angle-right"></i></template>
+                    {{ facet.title }} 
+                    <span v-if="getSelectedOptionsCount(facetKey)">({{getSelectedOptionsCount(facetKey)}})</span>
                   </a>
                 </p>
-                <div class="panel-block facet-orders">
+                <div class="panel-block facet-orders" v-if="isFacetExpanded(facetKey)">
                   <p>
                     <a @click.stop.prevent="onClickFacetColumn(facetKey, 'key')">
                       <template v-if="isFacetSortedBy(facetKey, 'key', 'desc')"><i class="fas fa-arrow-up"></i></template>
@@ -92,7 +93,7 @@ <h2 class="title is-3">Filters
                     </a>
                   </p>          
                 </div>
-                <div class="panel-block facet-options">
+                <div class="panel-block facet-options" v-if="isFacetExpanded(facetKey)">
                   <ul>
                     <li v-for="option in getOptionsFromFacet(facet)" @click="onClickFacetOption(facetKey, option.key)" :class="{'is-selected': option.selected}">
                       <div v-if="facetKey == 'tag'" @mouseenter="onMouseEnterTag(option.key, true)" @mouseleave="onMouseLeaveTag(option.key)">