Fix/ux misc (#1216)

* Update messages.js fix #1215 * Update HomePage2020.vue fix typo * Update IssueViewerText.vue fix #1214 * Update EmbeddingsSearch.vue fix #1213 * fix embedding style in filter facet monitor * fix fragment regions (bad key in Search page)
impresso · Apr 29, 2024 · e2f9688 · e2f9688
1 parent eee8c53
commit e2f9688
Show file tree

Hide file tree

Showing 7 changed files with 218 additions and 140 deletions.
diff --git a/src/components/HomePage2020.vue b/src/components/HomePage2020.vue
@@ -66,9 +66,9 @@
               src="@/assets/img/Twitter_Logo_WhiteOnImage.png"
               class="mr-2"
               style="max-height: 1em"
-              alt="X (former witter) icon"
+              alt="X (former Twitter) icon"
             />
-            X (former witter):
+            X (former Twitter):
             <a href="https://twitter.com/ImpressoProject" target="_blank">@impressoproject</a>
           </p>
           <p>
@@ -142,7 +142,7 @@
 
         <div class="HomePage__card">
           <h3>
-            Try the Impresso Challenges
+            Learn Impresso with the Impresso Challenges
           </h3>
           <p>
             How to explore the newspapers with persons or locations? <br />What are topics good for?

diff --git a/src/components/IIIFFragment.vue b/src/components/IIIFFragment.vue
@@ -108,6 +108,8 @@ export default defineComponent({
         width: `${this.imageWidth}px`,
         height: `${this.imageHeight}px`,
         opacity: this.isLoaded ? 1 : 0,
+        transform: `scale(${this.scale})`,
+        'transform-origin': 'left top',
       }
     },
     computedRegions() {

diff --git a/src/components/modules/EmbeddingsSearch.vue b/src/components/modules/EmbeddingsSearch.vue
@@ -1,42 +1,61 @@
-<template lang="html">
+<template>
   <div class="border p-2 bg-light">
     <div class="mb-2" v-html="$t('embedding_howto')" />
-    <b-input-group>
-      <b-form-input type="text" size="sm" class="form-control w-25"
-        style="border-color: black; color: black"
+    <div class="d-flex">
+      <b-form-input
+        type="text"
+        size="sm"
+        class="form-control"
+        style="border-color: black; color: black; flex-grow: 1"
         @keydown.space.prevent
         @click.prevent.stop
         name="inputEmbeddings"
-        v-model.trim="query" debounce="250"/>
-      <b-form-select name="languageEmbeddings"
+        v-model.trim="query"
+        debounce="250"
+      />
+      <b-form-select
+        name="languageEmbeddings"
         v-model="languageEmbeddings"
         :options="languageEmbeddingsOptions"
-        size="sm" variant="outline-primary"
-        style="border-left-color: black"/>
-      <b-form-select name="limitEmbeddings"
+        size="sm"
+        variant="outline-primary"
+        style="border-left-color: black;width: 75px;
+  text-overflow: ellipsis;"
+        class="pl-1 pr-4"
+      />
+      <b-form-select
+        name="limitEmbeddings"
         v-model="limitEmbeddings"
         :options="limitEmbeddingsOptions"
-        size="sm" variant="outline-primary" />
-    </b-input-group>
+        size="sm"
+        variant="outline-primary"
+        style="width:75px "
+        class="pl-1 pr-4"
+      />
+    </div>
     <div class="my-2">
       <i-spinner v-if="isLoading" class="text-center p-3" />
-      <div v-else-if="errorType" role="alert" v-html="$t(`error_${errorType}`, { query })"/>
-      <div v-else-if="words.length" class="font-italic" >
+      <div v-else-if="errorType" role="alert" v-html="$t(`error_${errorType}`, { query })" />
+      <div v-else-if="words.length" class="font-italic">
         {{ $t('embeddings_words') }}
       </div>
     </div>
     <div class="embeddings my-2">
-      <a v-for="(word, i) in words" :key="i" @click.prevent.stop="updateFilter(word)"
+      <a
+        v-for="(word, i) in words"
+        :key="i"
+        @click.prevent.stop="updateFilter(word)"
         :title="$t('filter.add', { word })"
-        class="mr-2 mt-2 border px-2 d-inline-block">
+        class="mr-2 mt-2 border px-2 d-inline-block"
+      >
         {{ word }}
       </a>
     </div>
   </div>
 </template>
 
 <script>
-import { embeddings as embeddingsService } from '@/services';
+import { embeddings as embeddingsService } from '@/services'
 
 export default {
   data: () => ({
@@ -62,74 +81,82 @@ export default {
   computed: {
     filterQuery() {
       if (this.filter && Array.isArray(this.filter.q)) {
-        const q = this.filter.q.join(' ').split(' ').pop().replace(/(\s|-).*/, '')
-        return q;
+        const q = this.filter.q
+          .join(' ')
+          .split(' ')
+          .pop()
+          .replace(/(\s|-).*/, '')
+        return q
       }
       return undefined
     },
     limitEmbeddings: {
       get() {
-        return this.$store.state.embeddings.limit;
+        return this.$store.state.embeddings.limit
       },
       set(limitEmbeddings) {
-        this.$store.commit('embeddings/UPDATE_LIMIT', limitEmbeddings);
+        this.$store.commit('embeddings/UPDATE_LIMIT', limitEmbeddings)
       },
     },
     languageEmbeddings: {
       get() {
-        return this.$store.state.embeddings.language;
+        return this.$store.state.embeddings.language
       },
       set(languageEmbeddings) {
-        this.$store.commit('embeddings/UPDATE_LANGUAGE', languageEmbeddings);
+        this.$store.commit('embeddings/UPDATE_LANGUAGE', languageEmbeddings)
       },
     },
     serviceQuery() {
       return {
         q: this.query,
         language: this.languageEmbeddings,
-        limit: this.limitEmbeddings
-      };
+        limit: this.limitEmbeddings,
+      }
     },
   },
   methods: {
     updateFilter(embedding) {
-      this.$emit('embdding-selected', embedding);
+      this.$emit('embdding-selected', embedding)
     },
   },
   mounted() {
     if (this.filterQuery) {
-      this.query = this.filterQuery;
+      this.query = this.filterQuery
     }
   },
   watch: {
-    serviceQuery:{
+    serviceQuery: {
       handler({ q, language, limit }) {
         this.errorType = undefined
         this.words = []
-        if (q.length === 0) return;
-        this.isLoading = true;
-        embeddingsService.find({
-          ignoreErrors: true,
-          query: { q, language, limit }
-        }).then(({ data }) => {
-          this.words = data;
-        }).catch((e) => {
-          console.warn('Error received from embeddings.find service:', e);
-          this.errorType = e.name;
-        }).finally(() => {
-          this.isLoading = false;
-        })
+        if (q.length === 0) return
+        this.isLoading = true
+        embeddingsService
+          .find({
+            ignoreErrors: true,
+            query: { q, language, limit },
+          })
+          .then(({ data }) => {
+            this.words = data.filter(w => w !== q.toLowerCase())
+          })
+          .catch(e => {
+            console.warn('Error received from embeddings.find service:', e)
+            this.errorType = e.name
+          })
+          .finally(() => {
+            this.isLoading = false
+          })
       },
       immediate: true,
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
 <style lang="css" scoped>
 .embeddings {
   max-height: 20vh;
-  overflow-y:scroll;
+  overflow-y: scroll;
 }
 </style>
 

diff --git a/src/components/modules/FilterMonitor.vue b/src/components/modules/FilterMonitor.vue
@@ -123,7 +123,7 @@
       </div>
       <!-- string to add -->
       <div class="strings-to-add m-2 ml-4" v-if="stringsToAdd.length">
-        <b-form inline v-for="(item, idx) in stringsToAdd" :key="idx" class="mb-2">
+        <div v-for="(item, idx) in stringsToAdd" :key="idx" class="mb-2 d-flex">
           <b-form-input
             size="sm"
             placeholder="..."
@@ -139,7 +139,7 @@
             style="padding:0.25rem 0.5rem 0 0.5rem"
             @click.prevent.stop="removeStringItem(idx)"
           />
-        </b-form>
+        </div>
       </div>
     </div>
     <div v-if="EntityTypes.includes(type)">