From 3730ee6a530c82b8a139243ab172ef2706f9d246 Mon Sep 17 00:00:00 2001
From: Philipp Eisen <philipp.eisen@peltarion.com>
Date: Sun, 12 Apr 2020 14:23:58 +0200
Subject: [PATCH 1/4] Add star ranking to similar items

---
 .dockerignore              |  3 ++
 package.json               |  3 +-
 src/components/Similar.vue | 91 ++++++++++++++++++++++++--------------
 3 files changed, 63 insertions(+), 34 deletions(-)
 create mode 100644 .dockerignore

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 000000000..849f9d151
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+dist/
+.vscode/
+node_modules/
\ No newline at end of file
diff --git a/package.json b/package.json
index 8a298435a..1a73798f2 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "vue": "^2.5.22",
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.5.22",
+    "vue-star-rating": "^1.6.1",
     "vuex": "^3.0.1",
     "vuex-router-sync": "^5.0.0"
   },
@@ -55,4 +56,4 @@
     "webpack-merge": "^4.2.1",
     "webpack-node-externals": "^1.7.2"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Similar.vue b/src/components/Similar.vue
index 2e82f8537..ce45aa01e 100644
--- a/src/components/Similar.vue
+++ b/src/components/Similar.vue
@@ -1,66 +1,91 @@
 
 <template>
   <div class="similar-posts">
-    <span class="title">Similar: </span>
+    <span class="title">Similar:</span>
     <ul class="list" v-if="story.similar && story.similar.length !== 0">
-      <li  v-for="sim in story.similar" :key="sim.id">
-        <span class="box" v-bind:style="{ background: getColor(sim.similarity_score)}" v-bind:title="sim.similarity_score"></span>
-        <router-link :to="'/item/' + sim.id">{{ sim.title }} | <b>{{ new Date(sim.time * 1000).getFullYear() }}</b> | {{ sim.descendants }} comments</router-link>
+      <li v-for="sim in story.similar" :key="sim.id">
+        <span
+          class="box"
+          v-bind:style="{ background: getColor(sim.similarity_score)}"
+          v-bind:title="sim.similarity_score"
+        ></span>
+        <router-link :to="'/item/' + sim.id">
+          {{ sim.title }} |
+          <b>{{ new Date(sim.time * 1000).getFullYear() }}</b>
+          | {{ sim.descendants }} comments |
+        </router-link>
+        <star-rating v-bind:star-size="15" active-color="#000000" @rating-selected ="setRating" v-bind:inline="true"></star-rating>
       </li>
     </ul>
     <div v-else class="no-posts">
       <span class="title">No similar posts found.</span>
     </div>
-
   </div>
 </template>
 
 <script>
+import StarRating from "vue-star-rating";
 
 export default {
-  name: 'similar-posts',
-  props: ['story'],
+  name: "similar-posts",
+  props: ["story"],
+  components: {
+    StarRating
+  },
   data: () => {
     return {
       colorStops: [
-        { start: 0, stop: 0.7, color: 'rgba(250, 157, 18, 0.5)' },
-        { start: 0.7, stop: 0.8, color: 'rgba(250, 157, 18, 0.75)' },
-        { start: 0.8, stop: 2, color: 'rgba(250, 157, 18, 1)' }
+        { start: 0, stop: 0.7, color: "rgba(250, 157, 18, 0.5)" },
+        { start: 0.7, stop: 0.8, color: "rgba(250, 157, 18, 0.75)" },
+        { start: 0.8, stop: 2, color: "rgba(250, 157, 18, 1)" }
       ]
     };
   },
   methods: {
     getColor: function(score) {
-      const found = this.colorStops.find(cs => score.toFixed(2) >= cs.start && score.toFixed(2) < cs.stop);
+      const found = this.colorStops.find(
+        cs => score.toFixed(2) >= cs.start && score.toFixed(2) < cs.stop
+      );
       return found.color;
+    },
+    setRating: function(rating) {
+      console.log(rating);
     }
   }
-}
+};
 </script>
 
 <style lang="stylus">
-  .similar-posts
-    line-height 1.2
+.similar-posts {
+  line-height: 1.2;
 
-    .box
-      width: 12px
-      height: .85em
-      display: inline-block
-      margin-right: 8px
+  .box {
+    width: 12px;
+    height: 0.85em;
+    display: inline-block;
+    margin-right: 8px;
+  }
+
+  .title {
+    font-size: 0.85em;
+  }
 
-    .title
-      font-size .85em
-    ul.list, .no-posts
-      background-color #f3f3f3
-      font-size .85em
-      margin 4px 0
-      padding 8px 12px
-      border-radius 4px
-      li
-        padding: 4px
-        display: flex
-        align-items: center
-    a
-      color: #828282;
+  ul.list, .no-posts {
+    background-color: #f3f3f3;
+    font-size: 0.85em;
+    margin: 4px 0;
+    padding: 8px 12px;
+    border-radius: 4px;
 
+    li {
+      padding: 4px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  a {
+    color: #828282;
+  }
+}
 </style>

From 5ab49ca57d3a53c3ef484d9cd6b5686138d295e2 Mon Sep 17 00:00:00 2001
From: Philipp Eisen <philipp.eisen@peltarion.com>
Date: Mon, 27 Apr 2020 19:39:05 +0200
Subject: [PATCH 2/4] Wrap with client only

---
 package.json               | 1 +
 src/components/Similar.vue | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1a73798f2..643d42f2a 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "route-cache": "0.4.3",
     "serve-favicon": "^2.4.5",
     "vue": "^2.5.22",
+    "vue-client-only": "^2.0.0",
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.5.22",
     "vue-star-rating": "^1.6.1",
diff --git a/src/components/Similar.vue b/src/components/Similar.vue
index ce45aa01e..ca705ed55 100644
--- a/src/components/Similar.vue
+++ b/src/components/Similar.vue
@@ -14,7 +14,14 @@
           <b>{{ new Date(sim.time * 1000).getFullYear() }}</b>
           | {{ sim.descendants }} comments |
         </router-link>
-        <star-rating v-bind:star-size="15" active-color="#000000" @rating-selected ="setRating" v-bind:inline="true"></star-rating>
+        <client-only>
+          <star-rating
+            v-bind:star-size="15"
+            active-color="#000000"
+            @rating-selected="setRating"
+            v-bind:inline="true"
+          ></star-rating>
+        </client-only>
       </li>
     </ul>
     <div v-else class="no-posts">

From 0ef42b42aedbf31122fc4f37a47c4844976e0a2e Mon Sep 17 00:00:00 2001
From: Philipp Eisen <philipp.eisen@peltarion.com>
Date: Mon, 27 Apr 2020 19:55:24 +0200
Subject: [PATCH 3/4] Fix: actually use the component

---
 src/components/Similar.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Similar.vue b/src/components/Similar.vue
index ca705ed55..ccca4732d 100644
--- a/src/components/Similar.vue
+++ b/src/components/Similar.vue
@@ -15,12 +15,14 @@
           | {{ sim.descendants }} comments |
         </router-link>
         <client-only>
-          <star-rating
-            v-bind:star-size="15"
-            active-color="#000000"
-            @rating-selected="setRating"
-            v-bind:inline="true"
-          ></star-rating>
+          <div>
+            <star-rating
+              v-bind:star-size="15"
+              active-color="#000000"
+              @rating-selected="setRating"
+              v-bind:inline="true"
+            ></star-rating>
+          </div>
         </client-only>
       </li>
     </ul>
@@ -32,12 +34,14 @@
 
 <script>
 import StarRating from "vue-star-rating";
+import ClientOnly from "vue-client-only";
 
 export default {
   name: "similar-posts",
   props: ["story"],
   components: {
-    StarRating
+    StarRating,
+    ClientOnly
   },
   data: () => {
     return {

From c08b423dea7e035bfda094f7eeb77a0b5556efde Mon Sep 17 00:00:00 2001
From: Philipp Eisen <philipp.eisen@peltarion.com>
Date: Fri, 1 May 2020 15:57:05 +0200
Subject: [PATCH 4/4] Implement start rating

---
 src/api/index.js           | 37 ++++++++++++++++++++++++++++++-------
 src/components/Similar.vue |  9 ++++++---
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index c5122f0e8..45188b05b 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -16,12 +16,12 @@ if (api.onServer) {
   warmCache()
 }
 
-function warmCache () {
+function warmCache() {
   fetchItems((api.cachedIds.top || []).slice(0, 30))
   setTimeout(warmCache, 1000 * 60 * 15)
 }
 
-function fetch (child) {
+function fetch(child) {
   logRequests && console.log(`fetching ${child}...`)
   const cache = api.cachedItems
   if (cache && cache.has(child)) {
@@ -41,25 +41,25 @@ function fetch (child) {
   }
 }
 
-export function fetchIdsByType (type) {
+export function fetchIdsByType(type) {
   return api.cachedIds && api.cachedIds[type]
     ? Promise.resolve(api.cachedIds[type])
     : fetch(`${type}stories`)
 }
 
-export function fetchItem (id) {
+export function fetchItem(id) {
   return fetch(`item/${id}`)
 }
 
-export function fetchItems (ids) {
+export function fetchItems(ids) {
   return Promise.all(ids.map(id => fetchItem(id)))
 }
 
-export function fetchUser (id) {
+export function fetchUser(id) {
   return fetch(`user/${id}`)
 }
 
-export function watchList (type, cb) {
+export function watchList(type, cb) {
   let first = true
   const ref = api.child(`${type}stories`)
   const handler = snapshot => {
@@ -87,3 +87,26 @@ export function fetchSimilar(queries) {
     .then(resp => resp.json())
     .then(json => json.rankings.map(i => i.entries));
 }
+
+function uuidv4() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+
+export default function sendFeedBack(query, result, rating) {
+  if (document.sessionId === undefined) {
+    document.sessionId = uuidv4()
+  }
+  return fetchData('https://textsimilarity.research.peltarion.com/feedback', {
+    method: 'POST',
+    body: JSON.stringify({
+      query: query,
+      result: result,
+      rating: rating,
+      dataset: 'hn-sbert',
+      sessionId: document.sessionId
+    })
+  })
+}
diff --git a/src/components/Similar.vue b/src/components/Similar.vue
index ccca4732d..92d8377bf 100644
--- a/src/components/Similar.vue
+++ b/src/components/Similar.vue
@@ -19,7 +19,8 @@
             <star-rating
               v-bind:star-size="15"
               active-color="#000000"
-              @rating-selected="setRating"
+              v-bind:show-rating="false"
+              @rating-selected="setRating($event, sim.title, story.title)"
               v-bind:inline="true"
             ></star-rating>
           </div>
@@ -35,6 +36,7 @@
 <script>
 import StarRating from "vue-star-rating";
 import ClientOnly from "vue-client-only";
+import sendFeedBack from "../api";
 
 export default {
   name: "similar-posts",
@@ -59,8 +61,9 @@ export default {
       );
       return found.color;
     },
-    setRating: function(rating) {
-      console.log(rating);
+
+    setRating: function(rating, similar, story) {
+      sendFeedBack(story, similar, rating);
     }
   }
 };