From ed40ff571cc6a7e84c5144282bf23dcd6df586c9 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Thu, 10 Mar 2022 21:29:44 +0000
Subject: [PATCH] feat(comments): selection, replies, alignments and other
 interactions

---
 .../comments/CommentThreadViewer.vue          | 103 ++++++++++++++----
 .../src/main/components/viewer/Bubbles.vue    |   9 +-
 .../components/viewer/CommentAddOverlay.vue   |  19 ++--
 .../components/viewer/CommentsOverlay.vue     | 101 +++++++++++++----
 .../src/main/components/viewer/Filters.vue    |   2 +-
 .../main/components/viewer/ViewerControls.vue |   4 +-
 packages/frontend/src/main/store/index.js     |   7 +-
 packages/frontend/src/sass/variables.scss     |  67 ++++++++++++
 .../comments/graph/resolvers/comments.js      |  22 ++--
 .../comments/graph/schemas/comments.gql       |   2 +-
 .../migrations/20220222173000_comments.js     |   2 +-
 .../server/modules/comments/services/index.js |   3 +-
 12 files changed, 267 insertions(+), 74 deletions(-)

diff --git a/packages/frontend/src/main/components/comments/CommentThreadViewer.vue b/packages/frontend/src/main/components/comments/CommentThreadViewer.vue
index 891474769..92a0fabb4 100644
--- a/packages/frontend/src/main/components/comments/CommentThreadViewer.vue
+++ b/packages/frontend/src/main/components/comments/CommentThreadViewer.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="mt-2 pa-1 d-flex align-center" style="width: 300px">
-    <div class="">
+    <div class="" style="width: 100%">
       <template v-for="(reply, index) in thread">
-        <div v-if="index % 3 === 0" :key="index + 'date'" class="d-flex justify-center mouse">
+        <div v-if="showTime(index)" :key="index + 'date'" class="d-flex justify-center mouse">
           <div class="d-inline px-2 py-0 caption text-center mb-2 rounded-lg background grey--text">
-            {{ new Date(Date.now()).toLocaleString() }}
+            {{ new Date(reply.createdAt).toLocaleString() }}
+            <timeago :datetime="reply.createdAt" class="font-italic ma-1"></timeago>
           </div>
         </div>
         <div
@@ -23,15 +24,27 @@
       </template>
       <div class="px-0 mb-4">
         <v-textarea
+          v-model="replyText"
           solo
           hide-details
           auto-grow
           rows="1"
-          placeholder="Reply"
+          placeholder="Reply (shift + enter to send)"
           class="rounded-xl mb-2 caption"
           append-icon="mdi-send"
           @click:append="addReply"
+          @keydown.enter.shift.exact.prevent="addReply()"
         ></v-textarea>
+        <v-btn
+          v-tooltip="'Marks this thread as resolved.'"
+          class="float-right"
+          x-small
+          rounded
+          depressed
+          color="error"
+        >
+          Archive
+        </v-btn>
       </div>
     </div>
   </div>
@@ -46,7 +59,7 @@ export default {
     comment: { type: Object, default: () => null }
   },
   apollo: {
-    barf: {
+    replyQuery: {
       query: gql`
         query($streamId: String!, $id: String!) {
           comment(streamId: $streamId, id: $id) {
@@ -70,54 +83,96 @@ export default {
           id: this.comment.id
         }
       },
-      skip() {
-        return !this.comment.expanded
-      },
-      // result({ data }) {
-      //   console.log('data')
-      //   console.log(data)
+      // skip() {
+      //   return !this.comment.expanded
       // },
-      update: (data) => {
-        console.log(data)
-        return data.comment
+      result({ data }) {
+        data.comment.replies.items.forEach((item) => {
+          if (this.localReplies.findIndex((c) => c.id === item.id) === -1)
+            this.localReplies.push(item)
+        })
+        // this.localReplies.push(...data.comment.replies.items)
+      },
+      update: (data) => data.comment
+    },
+    $subscribe: {
+      commentReplyCreated: {
+        query: gql`
+          subscription($streamId: String!, $commentId: String!) {
+            commentReplyCreated(streamId: $streamId, commentId: $commentId)
+          }
+        `,
+        variables() {
+          return {
+            streamId: this.$route.params.streamId,
+            commentId: this.comment.id
+          }
+        },
+        // skip() {
+        //   return !this.comment.expanded
+        // },
+        result({ data }) {
+          if (!this.comment.expanded) return this.$emit('bounce', this.comment.id)
+          this.localReplies.push({ ...data.commentReplyCreated })
+        }
       }
     }
   },
   data: function () {
     return {
-      replyText: null
+      replyText: null,
+      localReplies: []
     }
   },
   computed: {
     thread() {
       // TODO: add the replies in here too
-      return [this.comment]
+      return [this.comment, ...this.localReplies]
+    }
+  },
+  watch: {
+    'comment.expanded': {
+      deep: true,
+      handler(newVal, oldVal) {
+        if (!newVal) return
+        this.localReplies = []
+        this.$apollo.queries.replyQuery.refetch()
+      }
     }
   },
   methods: {
+    showTime(index) {
+      if (index === 0) return true
+      let curr = new Date(this.thread[index].createdAt)
+      let prev = new Date(this.thread[index - 1].createdAt)
+      let delta = Math.abs(prev - curr)
+      return delta > 450000
+    },
     async addReply() {
-      if (!this.commentText || this.commentText.length < 5) {
+      if (!this.replyText || this.replyText.length < 3) {
         this.$eventHub.$emit('notification', {
-          text: `Reply must be at least 5 characters.`
+          text: `Reply must be at least 3 characters.`
         })
         return
       }
 
-      let commentInput = {
+      let replyInput = {
         streamId: this.$route.params.streamId,
-        resources: [{ resourceId: this.comment.id, resourceType: 'comment' }],
+        parentComment: this.comment.id,
+        // resources: [{ resourceId: this.$route.params.streamId, resourceType: 'stream' }],
         text: this.replyText
       }
 
       try {
         await this.$apollo.mutate({
           mutation: gql`
-            mutation commentCreate($input: CommentCreateInput!) {
-              commentCreate(input: $input)
+            mutation commentReply($input: ReplyCreateInput!) {
+              commentReply(input: $input)
             }
           `,
-          variables: { input: commentInput }
+          variables: { input: replyInput }
         })
+        this.replyText = null
       } catch (e) {
         this.$eventHub.$emit('notification', {
           text: e.message
@@ -125,7 +180,7 @@ export default {
       }
 
       setTimeout(() => {
-        this.$emit('reply-added') // needed for layout reshuffle in parent
+        this.$emit('refresh-layout') // needed for layout reshuffle in parent
       }, 100)
     }
   }
diff --git a/packages/frontend/src/main/components/viewer/Bubbles.vue b/packages/frontend/src/main/components/viewer/Bubbles.vue
index 93e07fd5d..d623e8d9f 100644
--- a/packages/frontend/src/main/components/viewer/Bubbles.vue
+++ b/packages/frontend/src/main/components/viewer/Bubbles.vue
@@ -91,7 +91,7 @@ export default {
         result({ data }) {
           // Note: swap user id checks for .userId (vs. uuid) if wanting to not allow same user two diff browsers
           // it's easier to test like this though :)
-          if (data.userCommentActivity.status === 'disconnect') {
+          if (data.userCommentActivity.status && data.userCommentActivity.status === 'disconnect') {
             this.users = this.users.filter((u) => u.uuid !== data.userCommentActivity.uuid)
             this.updateBubbles(true)
             return
@@ -225,10 +225,15 @@ export default {
         controls._zoom
       ]
 
+      let selectionLocation = this.selectionLocation
+      if (this.$store.state.selectedComment) {
+        selectionLocation = this.$store.state.selectedComment.data.location
+      }
+
       let data = {
         filter: this.$store.state.appliedFilter,
         selection: this.selectedIds,
-        selectionLocation: this.selectionLocation,
+        selectionLocation,
         sectionBox: window.__viewer.sectionBox.getCurrentBox(),
         selectionCenter: this.selectionCenter,
         camera: c,
diff --git a/packages/frontend/src/main/components/viewer/CommentAddOverlay.vue b/packages/frontend/src/main/components/viewer/CommentAddOverlay.vue
index 31acf958b..5b72d6833 100644
--- a/packages/frontend/src/main/components/viewer/CommentAddOverlay.vue
+++ b/packages/frontend/src/main/components/viewer/CommentAddOverlay.vue
@@ -16,7 +16,11 @@
     class="no-mouse"
   >
     <v-slide-x-transition>
-      <div v-show="visible" ref="commentButton" class="absolute-pos">
+      <div
+        v-show="visible && !$store.state.selectedComment"
+        ref="commentButton"
+        class="absolute-pos"
+      >
         <div class="d-flex align-center" style="height: 48px; width: 320px">
           <v-btn
             v-tooltip="!expand ? 'Add a comment (ctrl + shift + c)' : 'Cancel'"
@@ -62,7 +66,7 @@
     <portal to="viewercontrols" :order="100">
       <v-slide-x-transition>
         <v-btn
-          v-show="!location"
+          v-show="!location && !$store.state.selectedComment"
           v-tooltip="'Add a comment (ctrl + shift + c)'"
           icon
           dark
@@ -115,6 +119,7 @@ export default {
       let commentInput = {
         streamId: this.$route.params.streamId,
         resources: [
+          { resourceType: 'stream', resourceId: this.$route.params.streamId },
           {
             resourceType: this.$route.path.includes('object') ? 'object' : 'commit',
             resourceId: this.$route.params.resourceId
@@ -126,11 +131,11 @@ export default {
             ? this.location
             : new THREE.Vector3(camTarget.x, camTarget.y, camTarget.z),
           camPos: getCamArray(),
-          filters: null, // TODO
-          sectionBox: null, // TODO
-          selection: null, // TODO
-          screenshot: null // TODO
-        }
+          filters: this.$store.state.appliedFilter,
+          sectionBox: window.__viewer.sectionBox.getCurrentBox(),
+          selection: null // TODO for later, lazy now
+        },
+        screenshot: window.__viewer.interactions.screenshot()
       }
       if (this.$route.query.overlay) {
         commentInput.resources.push(
diff --git a/packages/frontend/src/main/components/viewer/CommentsOverlay.vue b/packages/frontend/src/main/components/viewer/CommentsOverlay.vue
index 8a0292fd7..e3e40f424 100644
--- a/packages/frontend/src/main/components/viewer/CommentsOverlay.vue
+++ b/packages/frontend/src/main/components/viewer/CommentsOverlay.vue
@@ -5,18 +5,20 @@
   <div
     ref="parent"
     style="width: 100%; height: 100vh; position: absolute; pointer-events: none; overflow: hidden"
-    class="d-flex align-center justify-center no-mouse-parent"
+    class="d-flex align-center justify-center no-mouse"
   >
-    <div v-show="showComments">
+    <div
+      v-show="showComments"
+      style="width: 100%; height: 100vh; position: absolute; pointer-events: none; overflow: hidden"
+      class="no-mouse"
+    >
       <!-- Comment bubbles -->
       <div
-        v-for="(comment, index) in localComments"
-        :key="index"
-        :ref="`comment-${index}`"
-        :class="`absolute-pos rounded-xl`"
-        :style="`pointer-events: none; transition: opacity 0.2s ease; z-index:${
-          comment.expanded ? '20' : '10'
-        }; ${
+        v-for="comment in localComments"
+        :key="comment.id"
+        :ref="`comment-${comment.id}`"
+        :class="`absolute-pos rounded-xl no-mouse`"
+        :style="`transition: opacity 0.2s ease; z-index:${comment.expanded ? '20' : '10'}; ${
           hasExpandedComment && !comment.expanded && !comment.hovered
             ? 'opacity: 0.1;'
             : 'opacity: 1;'
@@ -27,10 +29,12 @@
         <div class="" style="pointer-events: none">
           <div class="d-flex align-center" style="pointer-events: none">
             <v-btn
+              :ref="`comment-button-${comment.id}`"
+              v-tooltip="comment.expanded ? 'Close comment thread' : 'Open comment thread'"
               small
               icon
-              :class="`elevation-5 pa-0 ma-0 ${
-                comment.expanded ? 'dark white--text primary' : 'background'
+              :class="`elevation-5 pa-0 ma-0 mouse ${
+                comment.expanded || comment.bouncing ? 'dark white--text primary' : 'background'
               }`"
               @click="toggleComment(comment)"
             >
@@ -47,9 +51,9 @@
       </div>
       <!-- Comment Threads -->
       <div
-        v-for="(comment, index) in localComments"
-        :key="index + 'card'"
-        :ref="`commentcard-${index}`"
+        v-for="comment in localComments"
+        :key="comment.id + '-card'"
+        :ref="`commentcard-${comment.id}`"
         :class="`hover-bg absolute-pos rounded-xl overflow-y-auto ${
           comment.hovered && false ? 'background elevation-5' : ''
         }`"
@@ -60,7 +64,11 @@
         <!-- <v-card class="elevation-0 ma-0 transparent" style="height: 100%"> -->
         <v-fade-transition>
           <div v-show="comment.expanded">
-            <comment-thread-viewer :comment="comment" @reply-added="replyAdded" />
+            <comment-thread-viewer
+              :comment="comment"
+              @bounce="bounceComment"
+              @refresh-layout="updateCommentBubbles()"
+            />
           </div>
         </v-fade-transition>
         <!-- </v-card> -->
@@ -132,6 +140,7 @@ export default {
         for (let c of data.comments.items) {
           c.expanded = false
           c.hovered = false
+          c.bouncing = false
           if (this.localComments.findIndex((lc) => c.id === lc.id) === -1)
             this.localComments.push({ ...c })
         }
@@ -155,10 +164,15 @@ export default {
         },
         result({ data }) {
           // console.log(data.commentCreated)
+          if (!data.commentCreated) return
           data.commentCreated.expanded = false
           data.commentCreated.hovered = false
+          data.commentCreated.bouncing = false
           this.localComments.push(data.commentCreated)
-          setTimeout(this.updateCommentBubbles, 0)
+          setTimeout(() => {
+            this.updateCommentBubbles()
+            this.bounceComment(data.commentCreated.id)
+          }, 10)
         }
       }
     }
@@ -185,6 +199,7 @@ export default {
           for (let c of this.localComments) {
             c.expanded = false
           }
+          this.$store.commit('setCommentSelection', { comment: null })
         }.bind(this),
         10
       )
@@ -201,6 +216,7 @@ export default {
       for (let c of this.localComments) {
         if (c.id === comment.id && comment.expanded === false) {
           c.preventAutoClose = true
+          this.$store.commit('setCommentSelection', { comment: c })
           this.setCommentPow(c)
           setTimeout(() => {
             c.expanded = true
@@ -213,6 +229,7 @@ export default {
             // this.updateCommentBubbles()
           }, 1000)
         } else {
+          if (c.expanded) this.$store.commit('setCommentSelection', { comment: null })
           c.expanded = false
         }
       }
@@ -252,33 +269,48 @@ export default {
       if (camToSet[6] === 1) {
         window.__viewer.cameraHandler.activeCam.controls.zoom(camToSet[7], true)
       }
+      if (comment.data.filters) {
+        this.$store.commit('setFilterDirect', { filter: comment.data.filters })
+      } else {
+        this.$store.commit('resetFilters')
+      }
+
+      if (comment.data.sectionBox) {
+        window.__viewer.sectionBox.setBox(comment.data.sectionBox, 0)
+      } else {
+        // TODO: Toggle section box off
+        // window.__viewer.sectionBox
+      }
       // TODO: apply filters, section box, etc.
     },
-    replyAdded() {
-      this.updateCommentBubbles()
-    },
     updateCommentBubbles() {
       if (!this.comments) return
-      let index = -1
       let cam = window.__viewer.cameraHandler.camera
       cam.updateProjectionMatrix()
       for (let comment of this.localComments) {
-        index++
-        let commentEl = this.$refs[`comment-${index}`][0]
+        // get html elements
+        let commentEl = this.$refs[`comment-${comment.id}`][0]
+        let card = this.$refs[`commentcard-${comment.id}`][0]
+
         if (!commentEl) continue
+
         let location = new THREE.Vector3(
           comment.data.location.x,
           comment.data.location.y,
           comment.data.location.z
         )
+
         location.project(cam)
+
         let commentLocation = new THREE.Vector3(
           (location.x * 0.5 + 0.5) * this.$refs.parent.clientWidth,
           (location.y * -0.5 + 0.5) * this.$refs.parent.clientHeight,
           0
         )
+
         let tX = commentLocation.x - 20
         let tY = commentLocation.y - 20
+
         const paddingX = 10
         const paddingYTop = 70
         const paddingYBottom = 90
@@ -304,13 +336,18 @@ export default {
           tY = this.$refs.parent.clientHeight - paddingYBottom
         }
 
-        commentEl.style.transform = `translate(${tX}px,${tY}px)`
+        commentEl.style.top = `${tY}px`
+        commentEl.style.left = `${tX}px`
 
-        let card = this.$refs[`commentcard-${index}`][0]
         let maxHeight = this.$refs.parent.clientHeight - paddingYTop - paddingYBottom
 
         card.style.maxHeight = `${maxHeight}px`
+
+        if (tX > this.$refs.parent.clientWidth - (paddingX + 50 + card.scrollWidth)) {
+          tX = this.$refs.parent.clientWidth - (paddingX + 50 + card.scrollWidth)
+        }
         card.style.left = `${tX + 40}px`
+        // card.style.right = '0px'
 
         let cardTop = paddingYTop
 
@@ -334,6 +371,16 @@ export default {
           card.style.top = `${cardTop}px`
         }
       }
+    },
+    bounceComment(id) {
+      let commentEl = this.$refs[`comment-${id}`][0]
+      commentEl.classList.add('tada-once')
+      let comment = this.localComments.find((c) => c.id === id)
+      comment.bouncing = true
+      setTimeout(() => {
+        commentEl.classList.remove('tada-once')
+        comment.bouncing = false
+      }, 2000)
     }
   }
 }
@@ -364,4 +411,10 @@ export default {
 .hover-bg {
   transition: background 0.3s ease;
 }
+.no-mouse {
+  pointer-events: none;
+}
+.mouse {
+  pointer-events: auto;
+}
 </style>
diff --git a/packages/frontend/src/main/components/viewer/Filters.vue b/packages/frontend/src/main/components/viewer/Filters.vue
index 8c40e4128..94c756f25 100644
--- a/packages/frontend/src/main/components/viewer/Filters.vue
+++ b/packages/frontend/src/main/components/viewer/Filters.vue
@@ -136,7 +136,7 @@ export default {
         this.parseAndSetFilters()
       }
     },
-    '$store.state.appliedFilter'(val) {
+    '$store.state.appliedFilter'() {
       if (this.trySetPresetFilter) return
       if (this.$store.state.appliedFilter && this.$store.state.appliedFilter.filterBy) {
         let key = Object.keys(this.$store.state.appliedFilter.filterBy)[0]
diff --git a/packages/frontend/src/main/components/viewer/ViewerControls.vue b/packages/frontend/src/main/components/viewer/ViewerControls.vue
index 00712b1a3..74b4b8b7c 100644
--- a/packages/frontend/src/main/components/viewer/ViewerControls.vue
+++ b/packages/frontend/src/main/components/viewer/ViewerControls.vue
@@ -4,10 +4,8 @@
       <v-btn
         v-show="showVisReset"
         v-tooltip="`Resets all applied filters`"
-        :zzzdisabled="!showVisReset"
-        :small="small"
+        small
         rounded
-        icon
         class="mr-2"
         @click="resetVisibility()"
       >
diff --git a/packages/frontend/src/main/store/index.js b/packages/frontend/src/main/store/index.js
index 9d9b66b68..9251c87db 100644
--- a/packages/frontend/src/main/store/index.js
+++ b/packages/frontend/src/main/store/index.js
@@ -17,9 +17,14 @@ const store = new Vuex.Store({
     isolateCategoryKey: null,
     isolateCategoryValues: [],
     hideCategoryKey: null,
-    hideCategoryValues: []
+    hideCategoryValues: [],
+    selectedComment: null
   },
   mutations: {
+    setCommentSelection(state, { comment }) {
+      if (comment) window.__viewer.interactions.deselectObjects()
+      state.selectedComment = comment
+    },
     isolateObjects(state, { filterKey, filterValues }) {
       state.hideKey = null
       state.hideValues = []
diff --git a/packages/frontend/src/sass/variables.scss b/packages/frontend/src/sass/variables.scss
index 3aea4c842..887afa70e 100644
--- a/packages/frontend/src/sass/variables.scss
+++ b/packages/frontend/src/sass/variables.scss
@@ -26,6 +26,73 @@ $primary-gradient: linear-gradient(0deg, $primary-darken 0%, $primary-base 40%);
   background: linear-gradient(to top left, #243b55, #141e30) !important;
 }
 
+// TADAs
+.tada-infinte {
+  -webkit-animation-name: tada;
+  animation-name: tada;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  animation-iteration-count: infinite;
+}
+
+.tada-once {
+  -webkit-animation-name: tada;
+  animation-name: tada;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  animation-iteration-count: 2;
+}
+
+
+@-webkit-keyframes tada {
+  0% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+  10%, 20% {
+    -webkit-transform: scale3d(.8, .8, .8) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(.8, .8, .8) rotate3d(0, 0, 1, -3deg);
+  }
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale3d(1.4, 1.4, 1.4) rotate3d(0, 0, 1, 3deg);
+    transform: scale3d(1.4, 1.4, 1.4) rotate3d(0, 0, 1, 3deg);
+  }
+  40%, 60%, 80% {
+    -webkit-transform: scale3d(1.4, 1.4, 1.4) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(1.4, 1.4, 1.4) rotate3d(0, 0, 1, -3deg);
+  }
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+@keyframes tada {
+  0% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+  10%, 20% {
+    -webkit-transform: scale3d(.8, .8, .8) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(.8, .8, .8) rotate3d(0, 0, 1, -3deg);
+  }
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale3d(1.4, 1.4, 1.4) rotate3d(0, 0, 1, 3deg);
+    transform: scale3d(1.4, 1.4, 1.4) rotate3d(0, 0, 1, 3deg);
+  }
+  40%, 60%, 80% {
+    -webkit-transform: scale3d(1.4, 1.4, 1.4) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(1.4, 1.4, 1.4) rotate3d(0, 0, 1, -3deg);
+  }
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
 /* TOOLTIPs */
 
 .tooltip {
diff --git a/packages/server/modules/comments/graph/resolvers/comments.js b/packages/server/modules/comments/graph/resolvers/comments.js
index 12bc2da10..571bbcb62 100644
--- a/packages/server/modules/comments/graph/resolvers/comments.js
+++ b/packages/server/modules/comments/graph/resolvers/comments.js
@@ -54,11 +54,11 @@ module.exports = {
       // TODO: check perms, persist comment
       await authorizeResolver( context.userId, args.input.streamId, 'stream:reviewer' )
       let id = await createComment( { userId: context.userId, input: args.input } )
-      console.log( args.input )
+      // console.log( args.input )
       await pubsub.publish( 'COMMENT_CREATED', {
-        commentCreated: { ...args.input, authorId: context.userId, createdAt: Date.now() },
+        commentCreated: { ...args.input, authorId: context.userId, id, createdAt: Date.now() },
         streamId: args.input.streamId,
-        resourceId: args.input.resources[0].resourceId // TODO: hack for now
+        resourceId: args.input.resources[1].resourceId // TODO: hack for now
       } )
       return id
     },
@@ -70,14 +70,15 @@ module.exports = {
       await authorizeResolver( context.userId, args.input.streamId, 'stream:reviewer' )
       // the reply also has to be linked to the stream, for the recursive reply lookup to work
       let input = { ...args.input, resources: [ 
-        { id: args.input.parentComment, type: 'comment' },
-        { id: args.input.streamId, type: 'stream' }
+        { resourceId: args.input.parentComment, resourceType: 'comment' },
+        { resourceId: args.input.streamId, resourceType: 'stream' }
       ] }
+      // console.log(input.resources)
       let id = await createComment( { userId: context.userId, input } )
       await pubsub.publish( 'COMMENT_REPLY_CREATED', {
-        commentCreated: args.input, 
-        streamId: args.streamId,
-        resourceId: args.resourceId
+        commentReplyCreated: { ...args.input, id, authorId: context.userId, createdAt: Date.now() }, 
+        streamId: args.input.streamId,
+        commentId: args.input.parentComment
       } )
       return id
     },
@@ -101,7 +102,10 @@ module.exports = {
     commentReplyCreated: {
       subscribe: withFilter( () => pubsub.asyncIterator( [ 'COMMENT_REPLY_CREATED' ] ), async( payload, variables, context ) => {
         await authorizeResolver( context.userId, payload.streamId, 'stream:reviewer' )
-        return payload.streamId === variables.streamId && payload.resourceId === variables.resourceId
+        console.log( 'sub' )
+        console.log( payload )
+        console.log( variables )
+        return payload.streamId === variables.streamId && payload.commentId === variables.commentId
       } )
     }
   }
diff --git a/packages/server/modules/comments/graph/schemas/comments.gql b/packages/server/modules/comments/graph/schemas/comments.gql
index 39a1c96a1..080438ce2 100644
--- a/packages/server/modules/comments/graph/schemas/comments.gql
+++ b/packages/server/modules/comments/graph/schemas/comments.gql
@@ -62,7 +62,7 @@ input ReplyCreateInput {
   streamId: String!
   parentComment: String!
   text: String!
-  data: JSONObject!
+  data: JSONObject
 }
 
 input CommentEditInput {
diff --git a/packages/server/modules/comments/migrations/20220222173000_comments.js b/packages/server/modules/comments/migrations/20220222173000_comments.js
index 5dfd63047..3f9c19a34 100644
--- a/packages/server/modules/comments/migrations/20220222173000_comments.js
+++ b/packages/server/modules/comments/migrations/20220222173000_comments.js
@@ -5,7 +5,7 @@ exports.up = async ( knex ) => {
     table.string( 'authorId', 10 ).references( 'id' ).inTable( 'users' ).notNullable().index( )
     table.timestamp( 'createdAt' ).defaultTo( knex.fn.now( ) )
     table.timestamp( 'updatedAt' ).defaultTo( knex.fn.now( ) )
-    table.string( 'text' )
+    table.text( 'text' )
     table.text( 'screenshot' )
     table.jsonb( 'data' )
     table.boolean( 'archived' ).defaultTo( false ).notNullable()
diff --git a/packages/server/modules/comments/services/index.js b/packages/server/modules/comments/services/index.js
index 4264d5579..5a1aa6d95 100644
--- a/packages/server/modules/comments/services/index.js
+++ b/packages/server/modules/comments/services/index.js
@@ -53,8 +53,9 @@ const getCommentLinksForResources = async ( streamId, resources ) => {
 
 module.exports = { 
   async createComment( { userId, input } ) {
+    console.log(input)
     const streamResources = input.resources.filter( r => r.resourceType === 'stream' )
-    if ( streamResources.length < 1 ) throw Error( 'Must specify atleast a stream as the comment target' )
+    if ( streamResources.length < 1 ) throw Error( 'Must specify at least a stream as the comment target' )
     if ( streamResources.length > 1 ) throw Error( 'Commenting on multiple streams is not supported' )
 
     const [ stream ] = streamResources