feat(frontend): stores and sets camera from url query

packages/frontend/src/cleanup/components/viewer/FilterCategoryActive.vue

@@ -51,7 +51,11 @@
           @click="toggleVisibility(type.fullName)"
         >
           <v-icon class="grey--text" style="font-size: 11px">
-            {{ hidden.indexOf(type.fullName) === -1 ? 'mdi-eye' : 'mdi-eye-off' }}
+            {{
+              $store.state.hideCategoryValues.indexOf(type.fullName) === -1
+                ? 'mdi-eye'
+                : 'mdi-eye-off'
+            }}
           </v-icon>
         </v-btn>
         <v-btn

packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue

@@ -8,8 +8,11 @@
     <v-col
       v-tooltip="prop.key"
       cols="5"
-      :class="`caption text-truncate px-1 ${$vuetify.theme.dark ? 'grey--text' : ''}`"
+      :class="`caption ${
+        prop.type === 'object' || prop.type === 'array' ? 'hover-cursor' : ''
+      } text-truncate px-1 ${$vuetify.theme.dark ? 'grey--text' : ''}`"
       style="line-height: 24px"
+      @click="prop.type === 'object' || prop.type === 'array' ? (expanded = !expanded) : null"
     >
       {{ prop.key.startsWith('@') ? prop.key.substring(1) : prop.key }}
     </v-col>
@@ -77,7 +80,7 @@
       </v-btn>
     </v-col>
     <v-scroll-y-transition>
-      <v-col v-if="expanded" cols="12">
+      <v-col v-if="expanded && (prop.type === 'object' || prop.type === 'array')" cols="12">
         <object-properties :obj="prop.value" :stream-id="streamId" />
       </v-col>
     </v-scroll-y-transition>
@@ -163,6 +166,9 @@ export default {
 }
 </script>
 <style scoped>
+.hover-cursor:hover {
+  cursor: pointer;
+}
 .property-row {
   transition: all 0.3s ease;
   background: rgba(120, 120, 120, 0.05);

packages/frontend/src/cleanup/components/viewer/ViewerControls.vue

@@ -58,17 +58,11 @@ export default {
   },
   data() {
     return {
-      fullScreen: false,
-      viewerBusy: false
+      fullScreen: false
     }
   },
   computed: {
     showVisReset() {
-      // return (
-      //   (this.$store.state.isolateKey !== null && this.$store.state.isolateValues.length !== 0) ||
-      //   (this.$store.state.hideKey !== null && this.$store.state.hideValues.length !== 0) ||
-      //   (this.$store.state.isolateCategoryKey !== null && this.$store.state.isolateCategoryValues.length !== 0)
-      // )
       return !!this.$store.state.appliedFilter
     }
   },

packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue

@@ -166,6 +166,7 @@
   </div>
 </template>
 <script>
+import debounce from 'lodash.debounce'
 import streamCommitQuery from '@/graphql/commit.gql'
 import streamObjectQuery from '@/graphql/objectSingleNoData.gql'
 import Viewer from '@/cleanup/components/common/Viewer' // do not import async
@@ -228,6 +229,23 @@ export default {
         this.$router.push(`/streams/${this.$route.params.streamId}/globals/${val.commit.id}`)
         return
       }
+    },
+    '$store.state.appliedFilter'(val) {
+      if (!val) {
+        let fullQuery = { ...this.$route.query }
+        delete fullQuery.filter
+        this.$router.replace({
+          path: this.$route.path,
+          query: { ...fullQuery }
+        })
+        return
+      }
+      let fullQuery = { ...this.$route.query }
+      delete fullQuery.filter
+      this.$router.replace({
+        path: this.$route.path,
+        query: { ...fullQuery, filter: encodeURIComponent(JSON.stringify(val)) }
+      })
     }
   },
   async mounted() {
@@ -267,8 +285,16 @@ export default {
       )
       return
     }
-
+    console.log('mounted')
     this.$eventHub.$emit('page-load', false)
+    this.firstCallToCam = true
+    this.camToSet = null
+
+    if (this.$route.query && this.$route.query.c) {
+      let posArr = JSON.parse(decodeURIComponent(this.$route.query.c))
+      this.camToSet = posArr
+    }
+
     setTimeout(() => {
       for (const resource of this.resources) {
         if (resource.data.error) continue
@@ -277,8 +303,59 @@ export default {
             ? resource.data.commit.referencedObject
             : resource.data.object.id
         )
-        window.__viewer.on('busy', (val) => (this.viewerBusy = val))
       }
+      window.__viewer.on('busy', (val) => {
+        this.viewerBusy = val
+        if (!val && this.camToSet) {
+          setTimeout(() => {
+            if (this.camToSet[6] === 1) {
+              window.__viewer.toggleCameraProjection()
+            }
+            window.__viewer.interactions.setLookAt(
+              { x: this.camToSet[0], y: this.camToSet[1], z: this.camToSet[2] }, // position
+              { x: this.camToSet[3], y: this.camToSet[4], z: this.camToSet[5] } // target
+            )
+            if (this.camToSet[6] === 1) {
+              window.__viewer.cameraHandler.activeCam.controls.zoom(this.camToSet[7], true)
+            }
+            this.camToSet = null
+          }, 200)
+        }
+      })
+
+      window.__viewer.cameraHandler.controls.addEventListener(
+        'rest',
+        debounce(() => {
+          if (this.firstCallToCam) {
+            this.firstCallToCam = false
+            return
+          }
+          if (this.camToSet) return
+          let controls = window.__viewer.cameraHandler.activeCam.controls
+          let pos = controls.getPosition()
+          let target = controls.getTarget()
+          let c = [
+            Math.round(pos.x, 5),
+            Math.round(pos.y, 5),
+            Math.round(pos.z, 5),
+            Math.round(target.x, 5),
+            Math.round(target.y, 5),
+            Math.round(target.z, 5),
+            window.__viewer.cameraHandler.activeCam.name === 'ortho' ? 1 : 0,
+            controls._zoom
+          ]
+          console.log(c)
+          let fullQuery = { ...this.$route.query }
+          delete fullQuery.c
+          this.$router
+            .replace({
+              path: this.$route.path,
+              query: { ...fullQuery, c: encodeURIComponent(JSON.stringify(c)) }
+            })
+            .catch(() => {})
+        }, 1000)
+      )
+      // TODO: check query params for filter and camera pos and set them
     }, 300)
   },
   methods: {

packages/frontend/src/store/index.js

@@ -172,7 +172,6 @@ const store = new Vuex.Store({
         colorBy: { type: 'gradient', property: filterKey, minValue, maxValue, gradientColors },
         filterBy: { [filterKey]: { gte: minValue, lte: maxValue } }
       }
-      console.log(state.appliedFilter)
       window.__viewer.applyFilter(state.appliedFilter)
     },
     resetInternalHideIsolateObjectState(state) {