Fix/compare tr in clusters view (#1173)

* Update README.md

* Update ClusterItem.vue

* Update SelectionMonitor.vue

* Update TextReuseExplorerPage.vue

* Update TextReusePassageItem.vue

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 all dependencies 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

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

@@ -8,7 +8,7 @@
           <h3 class="mb-1">
             <span v-if="isLoading"> ... (loading) </span>
             <span>{{ $t('routes.' + $route.name) }}</span>
-            <small><InfoButton name="text-reuse" class="ml-1" /></small>
+            <small><InfoButton name="text-reuse" class="ml-1"/></small>
           </h3>
           <section class="text-serif TextReuseExplorerPage_summary">
             <div>
@@ -101,7 +101,7 @@
       :loading="isLoading"
     />
     <List
-      v-if="$route.name === 'textReuseClusters'  && !isLoadingClusters"
+      v-if="$route.name === 'textReuseClusters' && !isLoadingClusters"
       :items="clusters"
       :pagination-list="clustersPaginationList"
       @change-page="
@@ -133,7 +133,12 @@
       </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>
@@ -349,10 +354,7 @@ export default {
         this.passages = passages
         this.totalPassages = total
         // eslint-disable-next-line
-        console.debug(
-          '[TextReuseExplorer] loadPassages() \n - total: ',
-          this.totalPassages,
-        )
+        console.debug('[TextReuseExplorer] loadPassages() \n - total: ', this.totalPassages)
       } finally {
         this.isLoadingPassages = false
       }
@@ -489,7 +491,6 @@ export default {
     orderBy: mapOrderBy(OrderByOptions, '-date'),
     /** @returns {{ currentPage: number, totalRows: number, perPage: number }} */
     clustersPaginationList() {
-
       return {
         currentPage: this.paginationCurrentPage,
         totalRows: this.totalClusters,
@@ -562,7 +563,6 @@ export default {
       immediate: true,
     },
   },
-
 }
 </script>
 <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 {