From 0fb161f550f165e440ac29e29b4792a376f04010 Mon Sep 17 00:00:00 2001
From: Alan Rynne <alan@speckle.systems>
Date: Sun, 31 Oct 2021 21:00:12 +0100
Subject: [PATCH] Frontend improvements

---
 .../components/commitSelector/CommitPanel.vue | 296 +++++++++++-------
 frontend/src/components/viewer/Renderer.vue   |  26 +-
 frontend/src/speckleQueries.js                |  28 +-
 frontend/src/views/StreamView.vue             |  57 ++--
 4 files changed, 246 insertions(+), 161 deletions(-)

diff --git a/frontend/src/components/commitSelector/CommitPanel.vue b/frontend/src/components/commitSelector/CommitPanel.vue
index 7bc1a5d..904310b 100644
--- a/frontend/src/components/commitSelector/CommitPanel.vue
+++ b/frontend/src/components/commitSelector/CommitPanel.vue
@@ -1,137 +1,207 @@
 <template lang="html">
   <v-sheet class="pa-4" elevation="8">
-    <p>Compare commit</p>
-    <v-row dense no-gutters>
-      <v-col cols="6">
-        <v-slide-group v-model="commitA" center-active show-arrows>
-          <v-slide-item
-            v-for="n in commits"
-            :key="n.id"
-            v-slot="{ active, toggle }"
-            :value="n"
-          >
-            <v-tooltip bottom>
-              <template v-slot:activator="{ on, attrs }">
-                <v-card
-                  v-bind="attrs"
-                  v-on="on"
-                  :color="active ? 'success' : 'primary lighten-1'"
-                  class="ma-1"
-                  height="100"
-                  width="40"
-                  @click="toggle"
-                >
-                  <div class="d-flex fill-height justify-center align-center">
-                    <v-scale-transition mode="out-in">
-                      <span v-if="!active" style="writing-mode: vertical-rl;">
-                        {{ n.id }}
-                      </span>
-                      <v-icon
-                        v-else
-                        color="white"
-                        size="20"
-                        v-text="'mdi-close-circle-outline'"
-                      ></v-icon>
-                    </v-scale-transition>
-                  </div>
-                </v-card>
-              </template>
-              <span>{{ n.message }}</span>
-            </v-tooltip>
-          </v-slide-item>
-        </v-slide-group>
-      </v-col>
-      <v-col cols="6">
-        <v-slide-group v-model="commitB" center-active show-arrows>
-          <v-slide-item
-            v-for="n in commits"
-            :key="n.id"
-            v-slot="{ active, toggle }"
-            :value="n"
-            :disabled="commitA && n.id === commitA['id']"
-          >
-            <v-tooltip bottom>
-              <template v-slot:activator="{ on, attrs }">
-                <v-card
-                  v-bind="attrs"
-                  v-on="on"
-                  :color="active ? 'success' : 'primary lighten-1'"
-                  class="ma-1"
-                  height="100"
-                  width="40"
-                  @click="toggle"
-                  :disabled="commitA && n.id === commitA['id']"
-                >
-                  <div class="d-flex fill-height justify-center align-center">
-                    <v-scale-transition mode="out-in">
-                      <span v-if="!active" style="writing-mode: vertical-rl;">
-                        {{ n.id }}
-                      </span>
-                      <v-icon
-                        v-else
-                        color="white"
-                        size="20"
-                        v-text="'mdi-close-circle-outline'"
-                      ></v-icon>
-                    </v-scale-transition>
-                  </div>
-                </v-card>
-              </template>
-              <span>{{ n.message }}</span>
-            </v-tooltip>
-          </v-slide-item>
-        </v-slide-group>
-      </v-col>
-      <div>
-        You are about to compare commit
-        <v-chip :close="commitA != null" @click:close="commitA = null">
-          {{ commitA ? commitA.id : "Select commit" }}
-        </v-chip>
-        against
-        <v-chip :close="commitB != null" @click:close="commitB = null">
-          {{ commitB ? commitB.id : "Select commit" }}
-        </v-chip>
-        <v-btn
-          color="success"
-          :disabled="!commitA || !commitB"
-          @click="requestDiff"
-        >
-          Run this!
-        </v-btn>
-      </div>
-    </v-row>
+    <div>
+      Compare commit
+      <v-chip
+        :close="currentCommit != null"
+        @click:close="$emit('update:currentCommit', null)"
+        @click="show_commit_selector = 'A'"
+      >
+        {{ currentCommit ? currentCommit.id : "Select commit" }}
+      </v-chip>
+      against
+      <v-chip
+        :close="prevCommit != null"
+        @click:close="$emit('update:prevCommit', null)"
+        @click="show_commit_selector = 'B'"
+      >
+        {{ prevCommit ? prevCommit.id : "Select commit" }}
+      </v-chip>
+      <v-btn
+        color="success"
+        :disabled="!currentCommit || !prevCommit"
+        :loading="loading"
+        @click="requestDiff"
+      >
+        Request diff
+      </v-btn>
+      <v-btn :disabled="!diffCommit" color="primary" @click="toggleDiffView">
+        {{ showDiff ? "View commits" : "View diff" }}
+      </v-btn>
+    </div>
+
+    <v-slide-group
+      v-if="show_commit_selector == 'A'"
+      :value="currentCommit"
+      @change="$emit('update:currentCommit', $event)"
+      center-active
+      show-arrows
+    >
+      <v-slide-item
+        v-for="n in commits"
+        :key="n.id"
+        v-slot="{ active, toggle }"
+        :value="n"
+        :disabled="prevCommit && n.id === prevCommit['id']"
+      >
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <v-card
+              v-bind="attrs"
+              v-on="on"
+              :color="active ? 'success' : 'primary lighten-1'"
+              class="ma-1"
+              height="100"
+              width="40"
+              @click="toggle"
+              v-on:click="show_commit_selector = null"
+              :disabled="prevCommit && n.id === prevCommit['id']"
+            >
+              <div class="d-flex fill-height justify-center align-center">
+                <v-scale-transition mode="out-in">
+                  <span v-if="!active" style="writing-mode: vertical-rl;">
+                    {{ n.id }}
+                  </span>
+                  <v-icon
+                    v-else
+                    color="white"
+                    size="20"
+                    v-text="'mdi-close-circle-outline'"
+                  ></v-icon>
+                </v-scale-transition>
+              </div>
+            </v-card>
+          </template>
+          <span>{{ n.message }}</span>
+        </v-tooltip>
+      </v-slide-item>
+    </v-slide-group>
+
+    <v-slide-group
+      v-else-if="show_commit_selector == 'B'"
+      :value="prevCommit"
+      @change="$emit('update:prevCommit', $event)"
+      center-active
+      show-arrows
+    >
+      <v-slide-item
+        v-for="n in commits"
+        :key="n.id"
+        v-slot="{ active, toggle }"
+        :value="n"
+        :disabled="currentCommit && n.id === currentCommit['id']"
+      >
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <v-card
+              v-bind="attrs"
+              v-on="on"
+              :color="active ? 'success' : 'primary lighten-1'"
+              :disabled="currentCommit && n.id === currentCommit['id']"
+              class="ma-1"
+              height="100"
+              width="40"
+              @click="toggle"
+              v-on:click="show_commit_selector = null"
+            >
+              <div class="d-flex fill-height justify-center align-center">
+                <v-scale-transition mode="out-in">
+                  <span v-if="!active" style="writing-mode: vertical-rl;">
+                    {{ n.id }}
+                  </span>
+                  <v-icon
+                    v-else
+                    color="white"
+                    size="20"
+                    v-text="'mdi-close-circle-outline'"
+                  ></v-icon>
+                </v-scale-transition>
+              </div>
+            </v-card>
+          </template>
+          <span>{{ n.message }}</span>
+        </v-tooltip>
+      </v-slide-item>
+    </v-slide-group>
   </v-sheet>
 </template>
 
-<script>
+<script lang="js">
 import { TOKEN } from "@/speckleUtils"
 
 export default {
   name: "CommitPanel",
   components: {},
-  props: ["commits"],
+  props: ["commits", "diffCommit", "showDiff", "currentCommit", "prevCommit"],
   data() {
     return {
-      commitA: null,
-      commitB: null
+      show_commit_selector: null,
+      loading: false,
     }
   },
   methods: {
-    async requestDiff() {
-      console.log("diff requested for", this.commitA.id, this.commitB.id)
-      var diffUrl = `http://localhost:8000/diff/${this.$route.params.id}/${this.commitA.id}/${this.commitB.id}`
-      console.log(diffUrl)
-      fetch(diffUrl, {
+    toggleDiffView(){
+      this.$emit("update:showDiff", !this.showDiff)
+    },
+    async doesDiffExist(){
+      console.log("diff check requested for", this.currentCommit.id, this.prevCommit.id)
+      var diffUrl = `http://localhost:8000/diff_check/${this.$route.params.id}/${this.currentCommit.id}/${this.prevCommit.id}`
+      var res = await fetch(diffUrl, {
         headers: {
-          method: "POST",
-          cors: "no-cors",
+          method: "GET",
           Authorisation: `Bearer ${localStorage.getItem(TOKEN)}`,
           "Content-type": "application/json",
           "Access-Control-Allow-Origin": "*"
         }
       })
-        .then(async res => console.log("fetch success", await res.json(), res))
-        .catch(err => console.warn("fetch failed", err))
+      return await res.json()
+    },
+    async requestDiff() {
+      this.loading = true
+      console.log("diff requested for", this.currentCommit.id, this.prevCommit.id)
+      var diffUrl = `http://localhost:8000/diff/${this.$route.params.id}/${this.currentCommit.id}/${this.prevCommit.id}`
+      var res = await fetch(diffUrl, {
+        headers: {
+          method: "GET",
+          Authorisation: `Bearer ${localStorage.getItem(TOKEN)}`,
+          "Content-type": "application/json",
+          "Access-Control-Allow-Origin": "*"
+        }
+      })
+      if(res.status == 200){
+        var body = await res.json()
+        console.log("diff body", res, body)
+        this.$emit("update:diffCommit", body.commit)
+      }
+      this.loading = false
+    },
+  },
+  watch: {
+    currentCommit: {
+      handler: async function(newVal, oldVal) {
+        this.$emit("current-commit", newVal)
+        this.loading = true
+        if(newVal && this.prevCommit){
+          var diffRes = await this.doesDiffExist()
+          console.log(diffRes)
+          if(diffRes.exists)
+            this.$emit("update:diffCommit", diffRes.commit)
+        }
+        this.loading = false
+      }
+    },
+    prevCommit: {
+      handler: async function(newVal, oldVal){
+        this.$emit("prev-commit", newVal)
+        this.loading = true
+        if(newVal && this.currentCommit){
+          var diffRes = await this.doesDiffExist()
+          console.log(diffRes)
+          if(diffRes.exists)
+            this.$emit("update:diffCommit", diffRes.commit)
+        }
+        this.loading = false
+      }
     }
   }
 }
diff --git a/frontend/src/components/viewer/Renderer.vue b/frontend/src/components/viewer/Renderer.vue
index 537a74d..11ad6d8 100644
--- a/frontend/src/components/viewer/Renderer.vue
+++ b/frontend/src/components/viewer/Renderer.vue
@@ -213,6 +213,7 @@ import throttle from "lodash.throttle"
 import { Viewer } from "@speckle/viewer"
 import { TOKEN } from "@/speckleUtils"
 import ObjectSimpleViewer from "@/components/viewer/ObjectSimpleViewer"
+import { debounce } from "debounce"
 
 export default {
   components: { ObjectSimpleViewer },
@@ -221,8 +222,8 @@ export default {
       type: Boolean,
       default: false
     },
-    objectUrls: {
-      type: Array,
+    objectUrl: {
+      type: String,
       default: null
     },
     unloadTrigger: {
@@ -236,6 +237,10 @@ export default {
     embeded: {
       type: Boolean,
       default: false
+    },
+    controls: {
+      type: Object,
+      default: null
     }
   },
   data() {
@@ -277,7 +282,9 @@ export default {
         this.namedViews.push(...views)
       }
     },
-    objectUrls() {
+    objectUrl(newVal, oldVal) {
+      console.log("obj urls changed", newVal, oldVal)
+      if (newVal == oldVal) return
       this.unloadData()
       this.load()
     }
@@ -289,8 +296,9 @@ export default {
     if (!this.viewer) {
       this.viewer = new Viewer({ container: this.$refs.renderer })
     }
-
+    this.$emit("update:controls", this.viewer.controls)
     this.viewer.onWindowResize()
+    console.log("viewer", this.viewer)
     this.setupEvents()
   },
   beforeDestroy() {
@@ -338,12 +346,10 @@ export default {
       })
     },
     load() {
-      if (!this.objectUrls || this.objectUrls.length === 0) return
-      this.viewer.onWindowResize()
-      this.objectUrls?.forEach(url => {
-        this.viewer.loadObject(url, localStorage.getItem(TOKEN))
-        this.viewerLastLoadedUrl = url
-      })
+      if (!this.objectUrl) return
+      this.viewer.loadObject(this.objectUrl, localStorage.getItem(TOKEN))
+      this.viewerLastLoadedUrl = this.objectUrl
+
       this.setupEvents()
       this.hasLoadedModel = true
     },
diff --git a/frontend/src/speckleQueries.js b/frontend/src/speckleQueries.js
index 85d658f..78bc865 100644
--- a/frontend/src/speckleQueries.js
+++ b/frontend/src/speckleQueries.js
@@ -1,5 +1,3 @@
-
-
 export const userInfoQuery = `
   query {
     user {
@@ -20,17 +18,19 @@ export const streamCommitsQuery = `
       name
       updatedAt
       id
-      commits(limit: $limit, cursor: $cursor) {
-        totalCount
-        cursor
-        items{
-          id
-          message
-          branchName
-          sourceApplication
-          referencedObject
-          authorName
-          createdAt
+      branch(name: "main"){
+        commits(limit: $limit, cursor: $cursor) {
+          totalCount
+          cursor
+          items{
+            id
+            message
+            branchName
+            sourceApplication
+            referencedObject
+            authorName
+            createdAt
+          }
         }
       }
     }
@@ -72,4 +72,4 @@ export const latestStreamsQuery = `query {
             updatedAt
         }
     }
-}`
\ No newline at end of file
+}`
diff --git a/frontend/src/views/StreamView.vue b/frontend/src/views/StreamView.vue
index 11727c0..88a04ce 100644
--- a/frontend/src/views/StreamView.vue
+++ b/frontend/src/views/StreamView.vue
@@ -1,20 +1,36 @@
 <template lang="html">
   <v-container fill-height fluid class="pa-0">
     <div class="float-center-top">
-      <CommitPanel v-if="stream" :commits="stream.commits.items"></CommitPanel>
+      <CommitPanel
+        v-if="stream"
+        :showDiff.sync="showDiff"
+        :diffCommit.sync="diffCommit"
+        :currentCommit.sync="currentCommit"
+        :prevCommit.sync="prevCommit"
+        :commits="stream.branch.commits.items"
+      />
     </div>
-    <v-row class="fill-height" no-gutters>
-      <v-col fill-height cols="6">
+    <v-row class="fill-height" no-gutters v-show="!showDiff">
+      <v-col cols="6">
         <Renderer
-          v-if="stream"
-          :object-urls="[objectUrl(0)]"
+          :camera.sync="camera"
+          :object-url="objectUrl(currentCommit)"
           show-selection-helper
         ></Renderer>
       </v-col>
-      <v-col fill-height cols="6">
+      <v-col cols="6">
         <Renderer
-          v-if="stream"
-          :object-urls="[objectUrl(1)]"
+          :camera.sync="camera"
+          :object-url="objectUrl(prevCommit)"
+          show-selection-helper
+        ></Renderer>
+      </v-col>
+    </v-row>
+    <v-row class="fill-height" no-gutters>
+      <v-col fill-height :cols="12">
+        <Renderer
+          :camera.sync="camera"
+          :object-url="objectUrl(diffCommit)"
           show-selection-helper
         ></Renderer>
       </v-col>
@@ -33,11 +49,13 @@ export default {
   data() {
     return {
       stream: null,
-      selectedCommit: null,
-      refObj: null,
+      currentCommit: null,
+      prevCommit: null,
+      diffCommit: null,
       serverUrl: process.env.VUE_APP_SERVER_URL,
+      showDiff: false,
       loading: true,
-      progress: 0
+      camera: null
     }
   },
   async mounted() {
@@ -46,6 +64,7 @@ export default {
     }
   },
   computed: {
+    /** @return {string} */
     streamId() {
       return this.$route.params.id
     }
@@ -53,13 +72,11 @@ export default {
   methods: {
     async getStream() {
       var res = await getStreamCommits(this.streamId, 10, null)
-      this.selectedCommit = res.data.stream.commits.items[0]
       this.stream = res.data.stream
     },
-    objectUrl(i) {
-      return [
-        `${this.serverUrl}/streams/${this.stream.id}/objects/${this.stream.commits.items[i].referencedObject}`
-      ]
+    objectUrl(commit) {
+      if (!commit) return null
+      return `${this.serverUrl}/streams/${this.stream.id}/objects/${commit.referencedObject}`
     }
   },
   watch: {
@@ -67,14 +84,6 @@ export default {
       handler: async function(val, oldVal) {
         if (val) this.getStream()
       }
-    },
-    selectedCommit: {
-      handler: async function() {
-        this.refObj = await getStreamObject(
-          this.stream.id,
-          this.selectedCommit.referencedObject
-        )
-      }
     }
   }
 }