v2.9.6 TR patch

v2.9.6 TR patch

README.md

@@ -4,7 +4,9 @@ Welcome to the _impresso_ app frontend website to search, explore and create per
 
 ## Install for development
 
-This is a website that uses vue2 framework build in node v17 and **is not compatible with node v18**. We provide a dockerfile-dev which points to the right node version to use. Alternatively, you can use `nvm install 17` and then install with `--openssl-legacy-provider` option
+This is a website that uses vue2 framework build in **node v17** and **is not compatible with node v18**. We provide a dockerfile-dev which points to the right node version to use. Alternatively, you can use `nvm install 17` and then install all dependencies 
+
+with `--openssl-legacy-provider` option
 
 ```
 NODE_OPTIONS=--openssl-legacy-provider npm install

package.json

@@ -1,6 +1,6 @@
 {
   "name": "impresso-frontend",
-  "version": "2.9.5",
+  "version": "2.9.6",
   "description": "Frontend app for impresso project",
   "author": "impresso <info@impresso-project.ch>",
   "contributors": [

src/components/SelectionMonitor.vue

@@ -487,8 +487,8 @@ export default defineComponent({
 @media (min-width: 992px) {
   .SelectionMonitor.textReuseCluster,
   .SelectionMonitor.textReusePassage {
-    width: 600px;
-    margin-left: -300px;
+    width: 800px;
+    margin-left: -400px;
   }
   .SelectionMonitor.textReuseClusterSize,
   .SelectionMonitor.textReusePassageSize,

src/components/TextReuseExplorerPage.vue

@@ -6,13 +6,11 @@
           <span class="label small-caps">{{ $t('textReuse').toLowerCase() }}</span>
 
           <h3 class="mb-1">
-            <span v-if="isLoading">
-              ... (loading)
-            </span>
+            <span v-if="isLoading"> ... (loading) </span>
             <span>{{ $t('routes.' + $route.name) }}</span>
             <small><InfoButton name="text-reuse" class="ml-1"/></small>
           </h3>
-          <section class="text-serif  TextReuseExplorerPage_summary">
+          <section class="text-serif TextReuseExplorerPage_summary">
             <div>
               <span v-html="incipit" />
               <SearchQuerySummary
@@ -61,7 +59,7 @@
           >
             <span>{{ $t('routeTextReuseStatistics') }}</span>
           </b-nav-item>
-          <!-- <b-nav-item
+          <b-nav-item
             :to="goToRoute({ name: 'textReuseClusters' })"
             active-class="active"
             class="pl-2"
@@ -73,7 +71,7 @@
                 })
               "
             />
-          </b-nav-item> -->
+          </b-nav-item>
           <b-nav-item
             :to="goToRoute({ name: 'textReusePassages' })"
             active-class="active"
@@ -103,7 +101,7 @@
       :loading="isLoading"
     />
     <List
-      v-if="$route.name === 'textReuseClusters'"
+      v-if="$route.name === 'textReuseClusters' && !isLoadingClusters"
       :items="clusters"
       :pagination-list="clustersPaginationList"
       @change-page="
@@ -135,12 +133,17 @@
       </template>
       <template v-slot:default>
         <div class="d-flex flex-wrap">
-          <ClusterItem v-for="item in clusters" :item="item" :key="item.id" />
+          <ClusterItem
+            class="m-3 pb-4 border-bottom"
+            v-for="item in clusters"
+            :item="item"
+            :key="item.id"
+          />
         </div>
       </template>
     </List>
     <List
-      v-if="$route.name === 'textReusePassages'"
+      v-if="$route.name === 'textReusePassages' && !isLoadingPassages"
       :items="passages"
       :pagination-list="passagesPaginationList"
       @change-page="
@@ -150,7 +153,7 @@
       "
     >
       <template v-slot:header>
-        <b-navbar-nav class="p-2 ml-auto">
+        <b-navbar-nav class="py-2 pl-3 ml-auto">
           <i-dropdown
             v-model="orderBy"
             :options="
@@ -202,7 +205,7 @@
       <div
         v-if="selectedCollection"
         class="shadow-sm border px-3 mt-2 p-2 rounded"
-        style="background-color: rgba(0,0,0,.025)"
+        style="background-color: rgba(0, 0, 0, 0.025)"
       >
         <ItemLabel :item="selectedCollection" type="collection" />
         <blockquote class="p-2 px-3 mt-2 text-small">
@@ -341,9 +344,8 @@ export default {
       }
       this.isLoadingPassages = true
       this.passages = []
-      this.totalPassages = 0
       // eslint-disable-next-line
-      console.debug('[TextReuseExplorer] loadPassages() \n loading...')
+      console.debug('[TextReuseExplorer] loadPassages() \n loading...', query)
 
       try {
         const [passages, total] = await textReusePassages
@@ -352,11 +354,7 @@ export default {
         this.passages = passages
         this.totalPassages = total
         // eslint-disable-next-line
-        console.debug(
-          '[TextReuseExplorer] loadPassages() \n - total: ',
-          this.totalPassages,
-          passages,
-        )
+        console.debug('[TextReuseExplorer] loadPassages() \n - total: ', this.totalPassages)
       } finally {
         this.isLoadingPassages = false
       }
@@ -501,6 +499,11 @@ export default {
     },
     /** @returns {{ currentPage: number, totalRows: number, perPage: number }} */
     passagesPaginationList() {
+      console.debug('[TextReuseExplorer] passagesPaginationList()', {
+        currentPage: this.paginationCurrentPage,
+        totalRows: this.totalPassages,
+        perPage: this.paginationPerPage,
+      })
       return {
         currentPage: this.paginationCurrentPage,
         totalRows: this.totalPassages,

src/components/modules/FilterDynamicRange.vue

@@ -84,6 +84,18 @@ export default {
       type: String,
       default: 'numbers.results',
     },
+    valueLabel: {
+      type: String,
+      default: 'value',
+    },
+    valueAsRangeLabel: {
+      type: String,
+      default: 'valueAsRange',
+    },
+    valuePercentageLabel: {
+      type: String,
+      default: 'valuePercentage',
+    },
     isPercentage: {
       type: Boolean,
       default: false,
@@ -131,28 +143,30 @@ export default {
         this.tooltip.isActive = false
         return
       }
+
       // eslint-disable-next-line
       // console.debug('[FilterDynamicRange] handleMouseMove', value.pointer)
       let label = ''
+
       if (this.isPercentage) {
         label =
           value.bucket.upper && value.bucket.upper !== value.bucket.lower
-            ? this.$t('valuePercentage', {
+            ? this.$t(this.valuePercentageLabel, {
                 upper: this.$n(value.bucket.upper),
                 lower: this.$n(value.bucket.lower),
               })
-            : this.$t('valuePercentage', {
+            : this.$t(this.valuePercentageLabel, {
                 upper: this.$n(value.bucket.upper + 0.999),
                 lower: this.$n(value.bucket.lower),
               })
       } else {
         label =
           value.bucket.upper && value.bucket.upper !== value.bucket.lower
-            ? this.$t('valueAsRange', {
+            ? this.$t(this.valueAsRangeLabel, {
                 upper: this.$n(value.bucket.upper),
                 lower: this.$n(value.bucket.lower),
               })
-            : this.$t('value', { val: this.$n(value.bucket.val) })
+            : this.$t(this.valueLabel, { val: this.$n(value.bucket.val) })
       }
 
       this.tooltip = {
@@ -276,7 +290,14 @@ export default {
   "en": {
     "value": "value: <span class='number'>{val}</span>",
     "valuePercentage": "value: <span class='number'>{lower}% - {upper}%</span>",
-    "valueAsRange": "range: <span class='number'>{lower} - {upper}</span>"
+    "valueAsRange": "range: <span class='number'>{lower} - {upper}</span>",
+
+    "textReuseClusterSizeValueLabel":  "cluster size: <span class='number'>{val}</span> passages per cluster",
+    "textReuseClusterSizeValueAsRangeLabel": "cluster size: <span class='number'>{lower} - {upper}</span>",
+    "textReuseClusterLexicalOverlapValuePercentageLabel": "<span class='number'>{lower}% - {upper}%</span> lexical overlap",
+
+    "textReuseClusterDayDeltaValueLabel": "<span class='number'>{val}</span> days",
+    "textReuseClusterDayDeltaValueAsRangeLabel": "<span class='number'>{lower} - {upper}</span> days"
   }
 }
 </i18n>

src/components/modules/lists/ClusterItem.vue

@@ -1,33 +1,48 @@
 <template>
   <div class="ClusterItem">
     <span class="d-flex align-self-stretch flex-shrink-0 selection-indicator" />
-    <pre>{{ JSON.stringify(item, null, 2) }}</pre>
-    <div class="d-flex">
-      <h2 class="flex-grow-1 sans">
-        <span>#{{ item.shortId }}</span>
-      </h2>
-      <div class="lexical-overlap" v-b-tooltip.hover :title="$t('lexicalOverlap')">
-        {{$n(item.lexicalOverlap / 100, { style: 'percent', maximumFractionDigits: 0 })}}
-      </div>
-
-      <span class="px-1">–</span>
-
-      <div class="small-caps" v-html="$tc('numbers.articles', item.clusterSize, {
-        n: $n(item.clusterSize),
-      })"/>
+    <TextReusePassageItemLabel
+      :item="textReusePassageItem"
+      class="border-left pl-2 my-2 small border-tertiary"
+    />
 
+    <div class="rounded border border-tertiary bg-white shadow-sm p-1">
+      <Ellipsis
+        v-bind:max-height="300"
+        v-bind:initialHeight="200"
+        :additional-height="50"
+        @click.prevent.stop
+      >
+        <p class="text-sample p-2">
+          <span>{{ item.textSampleContent }}</span>
+        </p>
+      </Ellipsis>
     </div>
-    </div>
+    <div class="small text-muted mb-2" v-html="textReuseClusterSummary"></div>
+
+    <b-button
+      variant="outline-secondary"
+      size="sm"
+      class="TextReusePassageItem_compareBtn float-left rounded shadow-sm"
+      @click="handleClusterClick"
+    >
+      {{ $t('seeTextReuseCluster') }}
+    </b-button>
   </div>
 </template>
 
 <script>
 import ClusterDetailsPanel from '@/components/modules/textReuse/ClusterDetailsPanel'
 
+import TextReusePassageItemLabel from './TextReusePassageItemLabel'
+import Ellipsis from '../Ellipsis'
+
 export default {
   name: 'ClusterItem',
   components: {
     ClusterDetailsPanel,
+    TextReusePassageItemLabel,
+    Ellipsis,
   },
   props: {
     selected: Boolean,
@@ -39,7 +54,73 @@ export default {
       type: Object,
     },
   },
-  computed: {},
+  methods: {
+    handleClusterClick() {
+      // <ItemSelector
+      //     :uid="item.textReuseCluster.id"
+      //     :item="item.textReuseCluster"
+      //     type="textReuseCluster"
+      //     context="textReuse"
+      //   >
+      //     {{ $t('seeTextReuseCluster') }}
+      //   </ItemSelector>
+      this.$store.dispatch('selectionMonitor/show', {
+        type: 'textReusePassage',
+        item: this.textReusePassageItem,
+        context: 'textReuse',
+        scope: 'comparePassages',
+        applyCurrentSearchFilters: false,
+        displayTimeline: false,
+        displayActionButtons: false,
+        displayCurrentSearchFilters: false,
+      })
+    },
+  },
+  computed: {
+    textReusePassageItem() {
+      return {
+        id: this.item.textSampleArticle.id,
+        title: this.item.textSampleTitle,
+        newspaper: {
+          id: this.item.textSampleArticle.id.split('-')[0],
+        },
+        date: this.item.textSampleDate,
+        pageNumbers: [1],
+        issue: {
+          id: this.item.textSampleArticle.id.split('-i')[0],
+        },
+        article: {
+          id: this.item.textSampleArticle.id,
+        },
+        content: this.item.textSampleContent,
+        textReuseCluster: {
+          id: this.item.id,
+          clusterSize: this.item.clusterSize,
+          lexicalOverlap: this.item.lexicalOverlap,
+          timeDifferenceDay: this.item.timeDifferenceDay,
+          article: {
+            id: this.item.textSampleArticle.id,
+          },
+        },
+      }
+    },
+    textReuseClusterSummary() {
+      const clusterSizeLabel = this.$tc('numbers.clusterSize', this.item.clusterSize, {
+        n: this.$n(this.item.clusterSize),
+      })
+      const lexicalOverlapLabel = this.$tc('numbers.lexicalOverlap', this.item.lexicalOverlap, {
+        n: this.$n(Math.round(this.item.lexicalOverlap * 100) / 100),
+      })
+
+      return this.$t('textReuseClusterSummary', {
+        clusterSize: clusterSizeLabel,
+        lexicalOverlap: lexicalOverlapLabel,
+        timespan: this.$tc('numbers.days', this.item.timeDifferenceDay, {
+          n: this.item.timeDifferenceDay,
+        }),
+      })
+    },
+  },
 }
 </script>
 
@@ -50,4 +131,21 @@ export default {
 .ClusterItem {
   max-width: 350px;
 }
+.ClusterItem .number {
+  font-weight: bold;
+}
 </style>
+
+<i18n>
+  {
+    "en": {
+      "numbers": {
+        "days": "<span class='number'>{n}</span> day|<span class='number'>{n}</span> days"
+      },
+      "fromArticle": "From article",
+      "seeTextReuseCluster": "Compare passages in cluster",
+      "textReuseClusterSummary": "Cluster size: {clusterSize} with {lexicalOverlap} over {timespan}."
+    }
+  }
+
+</i18n>

src/components/modules/lists/TextReusePassageItem.vue

@@ -32,7 +32,6 @@
 
 <script>
 import Ellipsis from '../Ellipsis'
-import ItemSelector from '../ItemSelector'
 import TextReusePassageItemLabel from './TextReusePassageItemLabel'
 
 export default {