feat(search): search page now shows thumbnail for the tags on hover. …

…It will prioritise those tagged with m.exemplar and the selected allograph..
kingsdigitallab · Oct 1, 2024 · 23c79ae · 23c79ae
1 parent 20046f6
commit 23c79ae
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 18 deletions.
diff --git a/app/assets/main.css b/app/assets/main.css
@@ -456,6 +456,9 @@ div[data-tei-subtype='section'] .textpart-number:before {
   margin: 0.5em;
   box-shadow: 4px 4px 10px;
 }
+.annotation-preview.pull-right {
+  right: 0;  
+}
 .annotation-preview {
   li {
     font-size: 0.8em;
@@ -489,3 +492,9 @@ div[data-tei-subtype='section'] .textpart-number:before {
   overflow-y: auto;
   max-height: 90vh;
 }
+.index-date {
+  color: grey; 
+  font-style: italic;
+  margin: 0.5em;
+  margin-top: 1.5em;
+}
diff --git a/app/assets/search.mjs b/app/assets/search.mjs
@@ -16,6 +16,7 @@ const OPTIONS_PER_FACET = 15
 const OPTIONS_PER_FACET_EXPANDED = 100
 const HIDE_OPTIONS_WITH_ZERO_COUNT = true
 const CHANGE_QUEUE_PATH = 'annotations/change-queue.json'
+const TAG_EXEMPLAR = 'm.exemplar'
 
 createApp({
   data() {
@@ -68,6 +69,8 @@ createApp({
       },
       availableTags: new AvailableTags(),
       hoveredItem: null,
+      showModalOnTheRight: false,
+      indexDate: null,
     }
   },
   async mounted() {
@@ -92,7 +95,7 @@ createApp({
       this.search()
     },
     'selection.perPage'() {
-      console.log('selection.perPage')
+      // console.log('selection.perPage')
       this.search()
     }
   },
@@ -196,6 +199,7 @@ createApp({
           data: []
         }
       }
+      this.indexDate = new Date(this.index.meta['dc:modified'])
 
       // order field
       this.annotationIdsToItem = {}
@@ -498,13 +502,46 @@ createApp({
         this.search(true)
       }
     },
-    // preview
+    // preview annotation
     onMouseEnterItem(item) {
       this.hoveredItem = item
     },
     onMouseLeaveItem(item) {
       this.hoveredItem = null
     },
+    // preview tag examplar
+    onMouseEnterTag(tag, showModalOnTheRight=false) {
+      // TODO: cache the results for each tag
+      let ret = null
+      let selectedAllographs = this.selection.facets?.chr || []
+      if (selectedAllographs.length == 1) {
+        ret = this._searchByTag(tag, selectedAllographs[0], true) || this._searchByTag(tag, selectedAllographs[0])
+      }
+      ret = ret || this._searchByTag(tag, null, true) || this._searchByTag(tag)
+      this.hoveredItem = ret
+      this.showModalOnTheRight = showModalOnTheRight
+    },
+    _searchByTag(tag, allograph=null, exemplar=false) {
+      let filters = {
+        'tag': [tag]
+      }
+      if (exemplar) filters.tag.push(TAG_EXEMPLAR);
+      if (allograph) filters.chr = [allograph]
+      let res = this.itemsjs.search({
+        per_page: 1,
+        page: 1,
+        sort: 'or1',
+        query: '',
+        filters: filters
+      })
+      let items = res?.data?.items
+      let ret = items ? items[0] : null
+      // console.log(tags, items.length)
+      return ret
+    },
+    onMouseLeaveTag(tag) {
+      this.hoveredItem = null
+    },
     // ----------------------
     // bulk-edit
     onClickItem(item) {

diff --git a/app/search.html b/app/search.html
@@ -25,7 +25,8 @@
   </head>
   <body>
     <section class="section full-width" id="search">
-      <div class="annotation-preview" v-if="hoveredItem">
+
+      <div :class="{'annotation-preview': 1, 'pull-right': showModalOnTheRight}" v-if="hoveredItem">
         <img :src="getThumbUrlFromItem(hoveredItem, 150)" alt="Placeholder image" class="graph-thumb">
         <h4 class="title is-4">
           {{ hoveredItem.chr }} ({{ hoveredItem.scr }})
@@ -37,6 +38,7 @@ <h4 class="title is-4">
           <li v-for="cxf in (hoveredItem?.cxf || []).sort()">{{ cxf }}</li>
         </ul>
       </div>
+
       <div class="container is-fluid">
         <div :class="['notification', 'is-'+lastMessage.level, 'is-light']">
           {{ lastMessage.content }}
@@ -93,8 +95,14 @@ <h2 class="title is-3">Filters
                 <div class="panel-block facet-options">
                   <ul>
                     <li v-for="option in getOptionsFromFacet(facet)" @click="onClickFacetOption(facetKey, option.key)" :class="{'is-selected': option.selected}">
-                      <span class="option-label">{{ option.key }}</span>
-                      <span class="option-count">{{ option.doc_count }}</span>
+                      <div v-if="facetKey == 'tag'" @mouseenter="onMouseEnterTag(option.key, true)" @mouseleave="onMouseLeaveTag(option.key)">
+                        <span class="option-label">{{ option.key }}</span>
+                        <span class="option-count">{{ option.doc_count }}</span>
+                      </div>
+                      <div v-else>
+                        <span class="option-label">{{ option.key }}</span>
+                        <span class="option-count">{{ option.doc_count }}</span>
+                      </div>
                     </li>
                   </ul>
                 </div>
@@ -117,18 +125,6 @@ <h2 class="title is-3">Annotations ({{ pagination.total }})</h2>
                   </select>
                 </p>
               </nav>
-                <!-- <ul class="pagination-list">
-                  <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
-                  <li><span class="pagination-ellipsis">&hellip;</span></li>
-                  <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
-                  <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
-                  <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
-                  <li><span class="pagination-ellipsis">&hellip;</span></li>
-                  <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
-                </ul>
-              </nav>              
-              <a href="#" @click.stop.prevent="onClickPagination(-1)" class="button">Prev</a> 
-              <a href="#" @click.stop.prevent="onClickPagination(1)" class="button">Next</a> -->
             </div>
             <div class="items">
               <span v-for="item in items" :class="{card: 1, item: 1, selected: this.selection.items.has(item)}" @click="onClickItem(item)">
@@ -166,6 +162,10 @@ <h2 class="title is-3">Annotations ({{ pagination.total }})</h2>
                 </p>
               </nav>
             </div>
+            <p class="index-date" v-if="indexDate">
+              Indexed on
+              {{ indexDate.toLocaleDateString() }} {{ indexDate.toLocaleTimeString() }}
+            </p>
           </div>
 
           <div class="column is-3 selection">
@@ -175,7 +175,10 @@ <h2 class="title is-3">Bulk edit ({{ selection.items.size }})
             <h3 class="title is-4">Tags {{ tagSelection }}:</h3>
             <ul class="tags-selector">
               <li v-for="state, tag in definitions.tags">
-                <label @click.stop.prevent="onClickTag(tag)" :class="`state-${state}`"><input type="checkbox" :checked="state === true" :disabled="state === null"> {{ tag }}</label>
+                <label @click.stop.prevent="onClickTag(tag)" :class="`state-${state}`" @mouseenter="onMouseEnterTag(tag)" @mouseleave="onMouseLeaveTag(tag)">
+                  <input type="checkbox" :checked="state === true" :disabled="state === null">
+                  {{ tag }}
+                </label>
                 <img :src="getThumbUrlFromTag(tag, 40)" alt="annotation thumbnail" class="graph-thumb" v-if="getThumbUrlFromTag(tag, 40)">
               </li>
             </ul>