From e8cff954394fb39cfa63e2f5ae5bbb3c94475405 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 28 Jan 2022 10:35:23 +0000
Subject: [PATCH 1/7] fix(frontend): null checks properly subscription event

---
 packages/frontend/src/cleanup/Main.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/frontend/src/cleanup/Main.vue b/packages/frontend/src/cleanup/Main.vue
index 579e73f65..7553e74e3 100644
--- a/packages/frontend/src/cleanup/Main.vue
+++ b/packages/frontend/src/cleanup/Main.vue
@@ -101,8 +101,7 @@ export default {
           }
         `,
         result({ data }) {
-          console.log(data)
-          if (!data) return
+          if (!data || !data.userStreamAdded) return
           if (this.$route.params.streamId === data.userStreamAdded.id) return
           this.$eventHub.$emit('notification', {
             text: `You've got a new stream!`,

From 1409827bb7eb99f9867f48a3c125c8a281fba213 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 28 Jan 2022 10:50:37 +0000
Subject: [PATCH 2/7] fix(frontend): minor layout bug in xl view on stream home

---
 .../cleanup/pages/stream/CommitObjectViewer.vue |  3 ---
 .../src/cleanup/pages/stream/StreamHome.vue     | 17 ++++++-----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue b/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue
index 93e87f3c0..8a051f87e 100644
--- a/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue
+++ b/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue
@@ -331,7 +331,6 @@ export default {
         if (!val && this.filterToSet) {
           setTimeout(() => {
             this.$store.commit('setFilterDirect', { filter: this.filterToSet })
-            // window.__viewer.applyFilter(this.filterToSet)
             this.filterToSet = null
           }, 200)
         }
@@ -358,7 +357,6 @@ export default {
             window.__viewer.cameraHandler.activeCam.name === 'ortho' ? 1 : 0,
             controls._zoom
           ]
-          console.log(c)
           let fullQuery = { ...this.$route.query }
           delete fullQuery.c
           this.$router
@@ -369,7 +367,6 @@ export default {
             .catch(() => {})
         }, 1000)
       )
-      // TODO: check query params for filter and camera pos and set them
     }, 300)
   },
   methods: {
diff --git a/packages/frontend/src/cleanup/pages/stream/StreamHome.vue b/packages/frontend/src/cleanup/pages/stream/StreamHome.vue
index 8b58d49e5..2fb86676f 100644
--- a/packages/frontend/src/cleanup/pages/stream/StreamHome.vue
+++ b/packages/frontend/src/cleanup/pages/stream/StreamHome.vue
@@ -4,7 +4,7 @@
       <v-col cols="12">
         <v-card :to="`/streams/${$route.params.streamId}/commits/${stream.commits.items[0].id}`">
           <preview-image
-            :height="320"
+            :height="420"
             :url="`/preview/${$route.params.streamId}/commits/${stream.commits.items[0].id}`"
           ></preview-image>
           <list-item-commit
@@ -19,9 +19,9 @@
       <v-col cols="12" style="height: 20px"></v-col>
       <v-col
         cols="12"
-        :xl="loggedIn ? 4 : 12"
-        class="pa-0 ma-0"
-        :order="`${$vuetify.breakpoint.xlOnly ? 'last' : ''}`"
+        xl="4"
+        :order="`${$vuetify.breakpoint.xl ? 'last' : ''}`"
+        :class="`${$vuetify.breakpoint.xl ? 'pl-4' : ''}`"
       >
         <v-card class="transparent elevation-0">
           <v-toolbar class="transparent elevation-0">
@@ -37,7 +37,7 @@
               cols="12"
               sm="4"
               md="4"
-              :xl="loggedIn ? 12 : 4"
+              xl="12"
             >
               <v-card :to="`/streams/${$route.params.streamId}/branches/${branch.name}`">
                 <preview-image
@@ -56,16 +56,11 @@
                     :color="`grey ${$vuetify.theme.dark ? 'darken-1' : 'lighten-1'}`"
                   ></v-badge>
                 </v-toolbar>
-                <!-- <list-item-commit
-                  :commit="branch.commits.items[0]"
-                  :stream-id="$route.params.streamId"
-                ></list-item-commit> -->
               </v-card>
             </v-col>
           </v-row>
         </v-card>
       </v-col>
-
       <v-col v-if="loggedIn" cols="12" xl="8">
         <v-card class="transparent elevation-0">
           <v-toolbar class="transparent elevation-0">
@@ -74,7 +69,7 @@
           </v-toolbar>
           <v-card-title class="caption" style="margin-top: -30px">Recent activity log</v-card-title>
         </v-card>
-        <div xxstyle="margin-top: -42px" class="mr-0">
+        <div class="mr-0">
           <stream-activity></stream-activity>
         </div>
       </v-col>

From 7855fa793287a0b6c9d452f4e659d18cfbbad6de Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sat, 29 Jan 2022 11:45:33 +0000
Subject: [PATCH 3/7] fix(frontend): refreshes branches on delete/edit (re
 #553)

---
 packages/frontend/src/cleanup/dialogs/BranchEditDialog.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/cleanup/dialogs/BranchEditDialog.vue b/packages/frontend/src/cleanup/dialogs/BranchEditDialog.vue
index 39661ba24..505a0c373 100644
--- a/packages/frontend/src/cleanup/dialogs/BranchEditDialog.vue
+++ b/packages/frontend/src/cleanup/dialogs/BranchEditDialog.vue
@@ -162,6 +162,7 @@ export default {
       this.showDelete = false
       this.$eventHub.$emit('notification', { text: 'Branch deleted' })
       this.$router.push(`/streams/` + this.$route.params.streamId)
+      this.$eventHub.$emit('branch-refresh')
     },
     async updateBranch() {
       if (!this.$refs.form.validate()) return

From 00014a268017a6dd5481964973aaded5f87eff51 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sat, 29 Jan 2022 13:23:24 +0000
Subject: [PATCH 4/7] fix(frontend): improves readability & clickability of
 object explorer

cc @clairekuang & @izzylys
---
 .../src/cleanup/components/common/Viewer.vue  | 19 +++++++++-
 .../components/viewer/ObjectProperties.vue    |  4 +-
 .../components/viewer/ObjectPropertiesRow.vue | 38 +++++++++++++------
 .../cleanup/components/viewer/Resource.vue    |  6 +--
 .../components/viewer/ResourceGroup.vue       |  4 +-
 5 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/packages/frontend/src/cleanup/components/common/Viewer.vue b/packages/frontend/src/cleanup/components/common/Viewer.vue
index 856d5b1e2..5be30b647 100644
--- a/packages/frontend/src/cleanup/components/common/Viewer.vue
+++ b/packages/frontend/src/cleanup/components/common/Viewer.vue
@@ -1,6 +1,10 @@
 <template lang="html">
   <div style="height: 100%; position: relative" class="transparent">
-    <div id="rendererparent" ref="rendererparent"></div>
+    <div
+      id="rendererparent"
+      ref="rendererparent"
+      :class="`background-${$vuetify.theme.dark ? 'dark' : 'light'}`"
+    ></div>
   </div>
 </template>
 <script>
@@ -86,6 +90,19 @@ export default {
   width: 100%;
   height: 100%;
 }
+
+.background-light {
+  background: #8e9eab;
+  background: -webkit-linear-gradient(to top, #eeeeee, #b0d3ec);
+  background: linear-gradient(to top, #ffffff, #c8e8ff);
+}
+
+.background-dark {
+  background: #141e30;
+  background: -webkit-linear-gradient(to top, #243b55, #141e30);
+  background: linear-gradient(to top, #243b55, #141e30);
+}
+
 #renderer {
   position: absolute;
   top: 0;
diff --git a/packages/frontend/src/cleanup/components/viewer/ObjectProperties.vue b/packages/frontend/src/cleanup/components/viewer/ObjectProperties.vue
index 624401237..2b39f89e9 100644
--- a/packages/frontend/src/cleanup/components/viewer/ObjectProperties.vue
+++ b/packages/frontend/src/cleanup/components/viewer/ObjectProperties.vue
@@ -15,9 +15,9 @@
           block
           plain
           :class="`grey ${$vuetify.theme.dark ? 'darken-3' : 'lighten-2'}`"
-          @click="currItems += maxItems"
+          @click.stop="currItems += maxItems"
         >
-          Load More ({{ kvps.length - currItems }})
+          Show More ({{ kvps.length - currItems }})
         </v-btn>
       </div>
     </div>
diff --git a/packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue b/packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue
index edfb2c2b2..77bd54d8c 100644
--- a/packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue
+++ b/packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-row no-gutters class="my-1 property-row rounded-lg">
+  <v-row
+    no-gutters
+    :class="`my-1 py-1 property-row rounded-lg ${
+      prop.type === 'object' || prop.type === 'array' ? (expanded ? 'border-blue' : 'border') : ''
+    } ${prop.type === 'object' || prop.type === 'array' ? 'hover-cursor' : ''}`"
+    @click.stop="prop.type === 'object' || prop.type === 'array' ? (expanded = !expanded) : null"
+  >
     <v-col cols="1" class="text-center">
       <v-icon small style="font-size: 12px" :class="`${$vuetify.theme.dark ? 'grey--text' : ''}`">
         {{ icon }}
@@ -12,7 +18,6 @@
         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>
@@ -45,9 +50,8 @@
         class="mr-1"
         target="_blank"
         :href="`/streams/${streamId}/objects/${refId}`"
-        @xxxxclick="toggleVisibility()"
       >
-        <v-icon class="grey--text" style="font-size: 11px">mdi-open-in-new</v-icon>
+        <v-icon class="grey--text" style="font-size: 12px">mdi-open-in-new</v-icon>
       </v-btn>
       <v-btn
         v-if="prop.extras.includes('visibility')"
@@ -55,9 +59,9 @@
         x-small
         icon
         class="mr-1"
-        @click="toggleVisibility()"
+        @click.stop="toggleVisibility()"
       >
-        <v-icon class="grey--text" style="font-size: 11px">
+        <v-icon class="grey--text" style="font-size: 12px">
           {{ visible ? 'mdi-eye' : 'mdi-eye-off' }}
         </v-icon>
       </v-btn>
@@ -67,14 +71,14 @@
         x-small
         icon
         class="mr-1"
-        @click="toggleFilter()"
+        @click.stop="toggleFilter()"
       >
-        <v-icon :class="`${isolated ? 'primary--text' : 'grey--text'}`" style="font-size: 11px">
+        <v-icon :class="`${isolated ? 'primary--text' : 'grey--text'}`" style="font-size: 12px">
           {{ !isolated ? 'mdi-filter' : 'mdi-filter' }}
         </v-icon>
       </v-btn>
-      <v-btn v-tooltip="'Expand/collapse property'" x-small icon @click="expanded = !expanded">
-        <v-icon :class="`${expanded ? 'primary--text' : 'grey--text'}`" style="font-size: 11px">
+      <v-btn v-tooltip="'Expand/collapse property'" x-small icon @click.stop="expanded = !expanded">
+        <v-icon :class="`${expanded ? 'grey--text' : 'grey--text'}`" style="font-size: 12px">
           {{ expanded ? 'mdi-minus-box' : 'mdi-plus-box' }}
         </v-icon>
       </v-btn>
@@ -169,11 +173,21 @@ export default {
 .hover-cursor:hover {
   cursor: pointer;
 }
+.border-blue {
+  border: solid rgba(131, 131, 131, 0.753);
+  border-width: 0px 0px 0px 2px;
+}
+.border {
+  border: solid #047ffb;
+  /* border: solid #047efb; */
+  border-width: 0px 0px 0px 2px;
+}
 .property-row {
   transition: all 0.3s ease;
-  background: rgba(120, 120, 120, 0.05);
+  padding: 0 0px 0 4px;
 }
 .property-row:hover {
-  background: rgba(120, 120, 120, 0.09);
+  /* border: 1px solid rgba(120, 120, 120, 0.1); */
+  /* background: rgba(120, 120, 120, 0.09); */
 }
 </style>
diff --git a/packages/frontend/src/cleanup/components/viewer/Resource.vue b/packages/frontend/src/cleanup/components/viewer/Resource.vue
index 9e0cddafa..3e6d33d24 100644
--- a/packages/frontend/src/cleanup/components/viewer/Resource.vue
+++ b/packages/frontend/src/cleanup/components/viewer/Resource.vue
@@ -12,7 +12,7 @@
       </v-list-item-action>
       <v-list-item-content>
         <v-list-item-title>
-          {{ resource.type === 'commit' ? resource.data.commit.message : 'Object' }}
+          {{ resource.type === 'commit' ? 'Commit ' + resource.data.commit.id : 'Object' }}
         </v-list-item-title>
       </v-list-item-content>
       <v-list-item-action
@@ -128,11 +128,11 @@ export default {
 </script>
 <style scoped>
 .list-overlay-dark {
-  background: rgba(40, 40, 40, 0.5);
+  background: rgb(40, 40, 40);
   z-index: 5;
 }
 .list-overlay-light {
-  background: rgba(235, 235, 235, 0.5);
+  background: rgb(235, 235, 235);
   z-index: 5;
 }
 </style>
diff --git a/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue b/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue
index 8879811a4..6d6cd40af 100644
--- a/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue
+++ b/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-list v-if="resources.length > 1" dense nav class="mt-0 py-0 mb-3">
+    <v-list v-if="resources.length > 0" dense nav class="mt-0 py-0 mb-3">
       <v-list-item
         :class="`px-2 list-overlay-${$vuetify.theme.dark ? 'dark' : 'light'} elevation-3`"
         style="position: sticky; top: 82px"
@@ -16,7 +16,7 @@
           </v-icon>
         </v-list-item-action>
         <v-list-item-content>
-          <v-list-item-title>Loaded Resources</v-list-item-title>
+          <v-list-item-title>Data</v-list-item-title>
         </v-list-item-content>
         <v-list-item-action class="pa-0 ma-0">
           <v-btn small icon @click.stop="expand = !expand">

From fe7dc6e396e0b38855932c82987b7949d50b1f2d Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sat, 29 Jan 2022 13:37:10 +0000
Subject: [PATCH 5/7] fix(frontend): makes filter search pos, etc. sane again

thx @clairekuang
---
 .../src/cleanup/components/viewer/Filters.vue | 23 ++++++++++---------
 .../components/viewer/ResourceGroup.vue       |  6 ++---
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/cleanup/components/viewer/Filters.vue b/packages/frontend/src/cleanup/components/viewer/Filters.vue
index b75038aa6..8214feb1c 100644
--- a/packages/frontend/src/cleanup/components/viewer/Filters.vue
+++ b/packages/frontend/src/cleanup/components/viewer/Filters.vue
@@ -43,19 +43,9 @@
           <filter-category-active :filter="activeFilter" />
         </div>
         <div v-if="activeFilter && activeFilter.data.type === 'number'">
-          <filter-numeric-active :filter="activeFilter" :prevent-first-set="preventFirstSet"/>
+          <filter-numeric-active :filter="activeFilter" :prevent-first-set="preventFirstSet" />
         </div>
         <div v-show="activeFilter === null">
-          <div v-if="topFilters.length !== 0">
-            <v-subheader>Reccommended filters:</v-subheader>
-            <div v-for="(filter, index) in topFilters" :key="index">
-              <filter-row-select
-                v-if="filter"
-                :filter="filter"
-                @active-toggle="(e) => (activeFilter = e)"
-              />
-            </div>
-          </div>
           <div class="">
             <v-text-field
               v-model="filterSearch"
@@ -67,6 +57,17 @@
               class="my-2"
               style="position: sticky; top: 122px; z-index: 6"
             />
+            <div v-if="topFilters.length !== 0 && !filterSearch">
+              <v-subheader>Reccommended filters:</v-subheader>
+              <div v-for="(filter, index) in topFilters" :key="index">
+                <filter-row-select
+                  v-if="filter"
+                  :filter="filter"
+                  @active-toggle="(e) => (activeFilter = e)"
+                />
+              </div>
+            </div>
+            <v-subheader>{{ filterSearch ? 'Matching' : 'Other' }} filters:</v-subheader>
             <div v-for="filter in matchingFilters" :key="filter.targetKey">
               <filter-row-select :filter="filter" @active-toggle="(e) => (activeFilter = e)" />
             </div>
diff --git a/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue b/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue
index 6d6cd40af..6ecfcd1ec 100644
--- a/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue
+++ b/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue
@@ -2,7 +2,7 @@
   <div>
     <v-list v-if="resources.length > 0" dense nav class="mt-0 py-0 mb-3">
       <v-list-item
-        :class="`px-2 list-overlay-${$vuetify.theme.dark ? 'dark' : 'light'} elevation-3`"
+        :class="`px-2 list-overlay-${$vuetify.theme.dark ? 'dark' : 'light'} elevation-2`"
         style="position: sticky; top: 82px"
         @click="expand = !expand"
       >
@@ -31,8 +31,8 @@
           v-for="(resource, index) in resources"
           :key="index"
           :resource="resource"
-          :is-multiple="resources.length !== 0"
-          :expand-initial="resources.length === 0"
+          :is-multiple="resources.length > 1"
+          :expand-initial="resources.length === 1"
           @remove="
             (e) => {
               $emit('remove', e)

From ebbabdd34e8e1d48b6a7edf2bac83f03eb1f26c3 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sun, 30 Jan 2022 12:05:28 +0000
Subject: [PATCH 6/7] =?UTF-8?q?feat(frontend):=20various=20many=20things?=
 =?UTF-8?q?=20=F0=9F=98=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

specifically, 1) attempts improvement of the navbar info display in the viewer, 2) makes the object
exploer a bit more friendly, clickable and readable (hopefully!), 3) moves selection info as an
overlay on the viewer, 4) fixes nasty bug in add overlay dialog, 5) adds back some nice props jedd
wanted, etc. thx @izzylis, @clairekuang, @teocomi, @bimgeek & other specklers for the feedback!

re #553 & more
---
 packages/frontend/src/cleanup/Main.vue        |   1 +
 .../components/common/SourceAppAvatar.vue     |   5 -
 .../src/cleanup/components/common/Viewer.vue  |   4 +-
 .../components/viewer/CommitInfoResource.vue  | 106 ++++++++++++++
 .../src/cleanup/components/viewer/Filters.vue |   4 +-
 .../components/viewer/ObjectInfoResource.vue  |  83 +++++++++++
 .../components/viewer/ObjectProperties.vue    |  18 ++-
 .../components/viewer/ObjectPropertiesRow.vue |  25 +++-
 .../components/viewer/ObjectSelection.vue     |  77 +++++-----
 .../cleanup/components/viewer/Resource.vue    | 138 ------------------
 .../components/viewer/ResourceGroup.vue       |  72 +++++----
 .../components/viewer/ViewerControls.vue      |  10 --
 .../components/viewer/dialogs/AddOverlay.vue  |   1 -
 .../viewer/dialogs/AllCommitsBranch.vue       | 115 +++++----------
 .../src/cleanup/navigation/MainLogo.vue       |   4 +-
 .../pages/stream/CommitObjectViewer.vue       |  49 +++++--
 .../src/cleanup/toolbars/CommitToolbar.vue    |  10 +-
 .../src/components/SourceAppAvatar.vue        |   9 +-
 18 files changed, 379 insertions(+), 352 deletions(-)
 create mode 100644 packages/frontend/src/cleanup/components/viewer/CommitInfoResource.vue
 create mode 100644 packages/frontend/src/cleanup/components/viewer/ObjectInfoResource.vue
 delete mode 100644 packages/frontend/src/cleanup/components/viewer/Resource.vue

diff --git a/packages/frontend/src/cleanup/Main.vue b/packages/frontend/src/cleanup/Main.vue
index 7553e74e3..1d001fc0b 100644
--- a/packages/frontend/src/cleanup/Main.vue
+++ b/packages/frontend/src/cleanup/Main.vue
@@ -7,6 +7,7 @@
       floating
       :class="`grey ${$vuetify.theme.dark ? 'darken-4' : 'lighten-4'} elevation-1`"
       :width="navWidth"
+      style="z-index: 100"
     >
       <div v-show="$route.meta.resizableNavbar" class="nav-resizer"></div>
       <main-nav :expanded="drawer" @hide-drawer="drawer = false" />
diff --git a/packages/frontend/src/cleanup/components/common/SourceAppAvatar.vue b/packages/frontend/src/cleanup/components/common/SourceAppAvatar.vue
index 61ba4d5ea..bc2ea6883 100644
--- a/packages/frontend/src/cleanup/components/common/SourceAppAvatar.vue
+++ b/packages/frontend/src/cleanup/components/common/SourceAppAvatar.vue
@@ -4,7 +4,6 @@
     small
     class="ma-1 caption white--text no-hover"
     :color="color"
-    :size="size"
   >
     {{ shortName }}
   </v-chip>
@@ -12,10 +11,6 @@
 <script>
 export default {
   props: {
-    size: {
-      type: Number,
-      default: 30
-    },
     applicationName: {
       type: String,
       default: '?'
diff --git a/packages/frontend/src/cleanup/components/common/Viewer.vue b/packages/frontend/src/cleanup/components/common/Viewer.vue
index 5be30b647..256134450 100644
--- a/packages/frontend/src/cleanup/components/common/Viewer.vue
+++ b/packages/frontend/src/cleanup/components/common/Viewer.vue
@@ -93,8 +93,8 @@ export default {
 
 .background-light {
   background: #8e9eab;
-  background: -webkit-linear-gradient(to top, #eeeeee, #b0d3ec);
-  background: linear-gradient(to top, #ffffff, #c8e8ff);
+  background: -webkit-linear-gradient(to top right, #eeeeee, #c8e8ff);
+  background: linear-gradient(to top right, #ffffff, #c8e8ff);
 }
 
 .background-dark {
diff --git a/packages/frontend/src/cleanup/components/viewer/CommitInfoResource.vue b/packages/frontend/src/cleanup/components/viewer/CommitInfoResource.vue
new file mode 100644
index 000000000..5defa237a
--- /dev/null
+++ b/packages/frontend/src/cleanup/components/viewer/CommitInfoResource.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <v-card class="mx-2 mb-2 rounded-lg">
+      <v-toolbar
+        v-ripple
+        class="transparent"
+        flat
+        style="cursor: pointer"
+        @click.stop="expanded = !expanded"
+      >
+        <v-app-bar-nav-icon>
+          <user-avatar
+            :id="commit.authorId"
+            :avatar="commit.authorAvatar"
+            :name="commit.authorName"
+          />
+        </v-app-bar-nav-icon>
+        <source-app-avatar :application-name="commit.sourceApplication" />
+        <v-spacer />
+        <v-btn
+          v-if="$route.params.resourceId !== resource.id"
+          v-tooltip="'Remove'"
+          small
+          icon
+          @click.stop="$emit('remove', resource)"
+        >
+          <v-icon x-small>mdi-close</v-icon>
+        </v-btn>
+        <v-btn v-tooltip="'Toggle visibility'" small icon @click.stop="toggleVisibility()">
+          <v-icon class="grey--text" style="font-size: 12px">
+            {{ visible ? 'mdi-eye' : 'mdi-eye-off' }}
+          </v-icon>
+        </v-btn>
+        <v-btn v-tooltip="'Isolate objects'" small icon @click.stop="isolate()">
+          <v-icon x-small :class="`${isolated ? 'primary--text' : ''}`">mdi-filter</v-icon>
+        </v-btn>
+        <v-btn small icon @click.stop="expanded = !expanded">
+          <v-icon x-small>{{ expanded ? 'mdi-minus' : 'mdi-plus' }}</v-icon>
+        </v-btn>
+      </v-toolbar>
+      <v-expand-transition>
+        <div v-show="expanded" class="px-1 pb-2">
+          <div class="caption my-2 px-2">
+            {{ commit.message }}
+            <v-divider class="my-2" />
+            <timeago :datetime="commit.createdAt"></timeago>
+            ,
+            {{ new Date(commit.createdAt).toLocaleString() }}
+          </div>
+          <v-divider class="mx-2 my-2" />
+          <object-properties
+            :obj="{
+              referencedId:
+                resource.type === 'commit'
+                  ? resource.data.commit.referencedObject
+                  : resource.data.object.id
+            }"
+            :stream-id="resource.data.id"
+          />
+        </div>
+      </v-expand-transition>
+    </v-card>
+  </div>
+</template>
+<script>
+export default {
+  components: {
+    SourceAppAvatar: () => import('@/cleanup/components/common/SourceAppAvatar'),
+    UserAvatar: () => import('@/cleanup/components/common/UserAvatar'),
+    ObjectProperties: () => import('@/cleanup/components/viewer/ObjectProperties')
+  },
+  props: ['resource'],
+  data() {
+    return {
+      expanded: true
+    }
+  },
+  computed: {
+    commit() {
+      return this.resource.data.commit
+    },
+    isolated() {
+      return (
+        this.$store.state.isolateValues.indexOf(this.resource.data.commit.referencedObject) !== -1
+      )
+    },
+    visible() {
+      return this.$store.state.hideValues.indexOf(this.resource.data.commit.referencedObject) === -1
+    }
+  },
+  methods: {
+    isolate() {
+      let id = this.resource.data.commit.referencedObject
+      if (this.isolated)
+        this.$store.commit('unisolateObjects', { filterKey: '__parents', filterValues: [id] })
+      else this.$store.commit('isolateObjects', { filterKey: '__parents', filterValues: [id] })
+    },
+    toggleVisibility() {
+      let id = this.resource.data.commit.referencedObject
+      if (this.visible)
+        this.$store.commit('hideObjects', { filterKey: '__parents', filterValues: [id] })
+      else this.$store.commit('showObjects', { filterKey: '__parents', filterValues: [id] })
+    }
+  }
+}
+</script>
diff --git a/packages/frontend/src/cleanup/components/viewer/Filters.vue b/packages/frontend/src/cleanup/components/viewer/Filters.vue
index 8214feb1c..48232528a 100644
--- a/packages/frontend/src/cleanup/components/viewer/Filters.vue
+++ b/packages/frontend/src/cleanup/components/viewer/Filters.vue
@@ -55,7 +55,7 @@
               append-icon="mdi-magnify"
               hide-details
               class="my-2"
-              style="position: sticky; top: 122px; z-index: 6"
+              style="position: sticky; top: 128px; z-index: 6"
             />
             <div v-if="topFilters.length !== 0 && !filterSearch">
               <v-subheader>Reccommended filters:</v-subheader>
@@ -96,7 +96,7 @@ export default {
   },
   data() {
     return {
-      expand: true,
+      expand: false,
       revitFilters: ['type', 'family', 'level'],
       allFilters: [],
       activeFilter: null,
diff --git a/packages/frontend/src/cleanup/components/viewer/ObjectInfoResource.vue b/packages/frontend/src/cleanup/components/viewer/ObjectInfoResource.vue
new file mode 100644
index 000000000..501a6cb0f
--- /dev/null
+++ b/packages/frontend/src/cleanup/components/viewer/ObjectInfoResource.vue
@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <v-card class="mx-2 mb-2 rounded-lg">
+      <v-toolbar
+        v-ripple
+        class="transparent"
+        flat
+        style="cursor: pointer"
+        @click.stop="expanded = !expanded"
+      >
+        <v-app-bar-nav-icon style="pointer-events: none">
+          <v-icon large>mdi-cube-outline</v-icon>
+        </v-app-bar-nav-icon>
+        <v-spacer />
+        <v-btn
+          v-if="$route.params.resourceId !== resource.id"
+          v-tooltip="'Remove'"
+          small
+          icon
+          @click.stop="$emit('remove', resource)"
+        >
+          <v-icon x-small>mdi-close</v-icon>
+        </v-btn>
+        <v-btn v-tooltip="'Toggle visibility'" small icon @click.stop="toggleVisibility()">
+          <v-icon class="grey--text" style="font-size: 12px">
+            {{ visible ? 'mdi-eye' : 'mdi-eye-off' }}
+          </v-icon>
+        </v-btn>
+        <v-btn v-tooltip="'Isolate objects'" small icon @click.stop="isolate()">
+          <v-icon x-small :class="`${isolated ? 'primary--text' : ''}`">mdi-filter</v-icon>
+        </v-btn>
+        <v-btn small icon @click.stop="expanded = !expanded">
+          <v-icon x-small>{{ expanded ? 'mdi-minus' : 'mdi-plus' }}</v-icon>
+        </v-btn>
+      </v-toolbar>
+      <v-expand-transition>
+        <div v-show="expanded" class="px-1">
+          <object-properties
+            :obj="{
+              referencedId: resource.data.object.id
+            }"
+            :stream-id="resource.data.id"
+          />
+        </div>
+      </v-expand-transition>
+    </v-card>
+  </div>
+</template>
+<script>
+export default {
+  components: {
+    ObjectProperties: () => import('@/cleanup/components/viewer/ObjectProperties')
+  },
+  props: ['resource'],
+  data() {
+    return {
+      expanded: true
+    }
+  },
+  computed: {
+    isolated() {
+      return this.$store.state.isolateValues.indexOf(this.resource.data.object.id) !== -1
+    },
+    visible() {
+      return this.$store.state.hideValues.indexOf(this.resource.data.object.id) === -1
+    }
+  },
+  methods: {
+    isolate() {
+      let id = this.resource.data.object.id
+      if (this.isolated)
+        this.$store.commit('unisolateObjects', { filterKey: '__parents', filterValues: [id] })
+      else this.$store.commit('isolateObjects', { filterKey: '__parents', filterValues: [id] })
+    },
+    toggleVisibility() {
+      let id = this.resource.data.object.id
+      if (this.visible)
+        this.$store.commit('hideObjects', { filterKey: '__parents', filterValues: [id] })
+      else this.$store.commit('showObjects', { filterKey: '__parents', filterValues: [id] })
+    }
+  }
+}
+</script>
diff --git a/packages/frontend/src/cleanup/components/viewer/ObjectProperties.vue b/packages/frontend/src/cleanup/components/viewer/ObjectProperties.vue
index 2b39f89e9..2bf90711f 100644
--- a/packages/frontend/src/cleanup/components/viewer/ObjectProperties.vue
+++ b/packages/frontend/src/cleanup/components/viewer/ObjectProperties.vue
@@ -45,11 +45,11 @@ export default {
       loading: false,
       ignoredProps: [
         '__closure',
-        'displayMesh',
-        'displayValue',
+        // 'displayMesh',
+        // 'displayValue',
         '__importedUrl',
-        // '__parents', // TODO: uncomment before release
-        'totalChildrenCount'
+        '__parents'
+        // 'totalChildrenCount'
       ]
     }
   },
@@ -108,9 +108,10 @@ export default {
           !this.realObject.speckle_type?.includes('Objects')
         )
           extras.push('visibility')
-        // if (value)
+
         this.kvps.push({
-          key,
+          key: this.cleanKey(key),
+          originalKey: key,
           value,
           type,
           extras,
@@ -119,6 +120,11 @@ export default {
           refId: value?.referencedId
         })
       }
+    },
+    cleanKey(key) {
+      if (key === 'totalChildrenCount') return 'children count'
+      if (key === 'speckle_type') return 'type'
+      return key
     }
   }
 }
diff --git a/packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue b/packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue
index 77bd54d8c..fd8fe059a 100644
--- a/packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue
+++ b/packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue
@@ -1,9 +1,9 @@
 <template>
   <v-row
     no-gutters
-    :class="`my-1 py-1 property-row rounded-lg ${
+    :class="`my-1 py-1 property-row rounded-lg ${$vuetify.theme.dark ? 'black-bg' : 'white-bg'} ${
       prop.type === 'object' || prop.type === 'array' ? (expanded ? 'border-blue' : 'border') : ''
-    } ${prop.type === 'object' || prop.type === 'array' ? 'hover-cursor' : ''}`"
+    } ${prop.type === 'object' || prop.type === 'array' ? 'hover-cursor' : 'normal-cursor'}`"
     @click.stop="prop.type === 'object' || prop.type === 'array' ? (expanded = !expanded) : null"
   >
     <v-col cols="1" class="text-center">
@@ -12,14 +12,16 @@
       </v-icon>
     </v-col>
     <v-col
-      v-tooltip="prop.key"
+      v-tooltip="prop.originalKey"
       cols="5"
       :class="`caption ${
         prop.type === 'object' || prop.type === 'array' ? 'hover-cursor' : ''
       } text-truncate px-1 ${$vuetify.theme.dark ? 'grey--text' : ''}`"
       style="line-height: 24px"
     >
-      {{ prop.key.startsWith('@') ? prop.key.substring(1) : prop.key }}
+      <span :class="`${expanded ? 'font-weight-bold' : ''}`">
+        {{ prop.key.startsWith('@') ? prop.key.substring(1) : prop.key }}
+      </span>
     </v-col>
     <v-col
       v-if="prop.type !== 'object' && prop.type !== 'array'"
@@ -78,8 +80,8 @@
         </v-icon>
       </v-btn>
       <v-btn v-tooltip="'Expand/collapse property'" x-small icon @click.stop="expanded = !expanded">
-        <v-icon :class="`${expanded ? 'grey--text' : 'grey--text'}`" style="font-size: 12px">
-          {{ expanded ? 'mdi-minus-box' : 'mdi-plus-box' }}
+        <v-icon :class="`${expanded ? 'grey--text' : 'primary--text'}`" style="font-size: 12px">
+          {{ expanded ? 'mdi-minus' : 'mdi-plus' }}
         </v-icon>
       </v-btn>
     </v-col>
@@ -173,6 +175,9 @@ export default {
 .hover-cursor:hover {
   cursor: pointer;
 }
+.normal-cursor:hover {
+  cursor: auto !important;
+}
 .border-blue {
   border: solid rgba(131, 131, 131, 0.753);
   border-width: 0px 0px 0px 2px;
@@ -186,6 +191,14 @@ export default {
   transition: all 0.3s ease;
   padding: 0 0px 0 4px;
 }
+
+.white-bg {
+  background: white;
+}
+.black-bg {
+  background: rgb(30, 30, 30);
+}
+
 .property-row:hover {
   /* border: 1px solid rgba(120, 120, 120, 0.1); */
   /* background: rgba(120, 120, 120, 0.09); */
diff --git a/packages/frontend/src/cleanup/components/viewer/ObjectSelection.vue b/packages/frontend/src/cleanup/components/viewer/ObjectSelection.vue
index d5e80060a..eee767474 100644
--- a/packages/frontend/src/cleanup/components/viewer/ObjectSelection.vue
+++ b/packages/frontend/src/cleanup/components/viewer/ObjectSelection.vue
@@ -1,32 +1,25 @@
 <template>
-  <v-list dense nav class="py-0 mb-3">
-    <v-list-item
-      :class="`px-2 list-overlay-${$vuetify.theme.dark ? 'dark' : 'light'} elevation-2`"
-      style="position: sticky; top: 82px"
-      @click="expand = !expand && props.length !== 0"
-    >
-      <v-list-item-action>
-        <v-icon small :class="`${props.length !== 0 ? '' : 'grey--text'}`">mdi-mouse</v-icon>
-      </v-list-item-action>
-      <v-list-item-content>
-        <v-list-item-title>
-          Selection
-          <span class="caption grey--text">({{ objects.length }})</span>
-        </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action class="pa-0 ma-0">
+  <div
+    class="overflow-hidden"
+    :style="`width: ${
+      $vuetify.breakpoint.xs ? '90%' : '300px'
+    }; height: 100%; position: absolute; padding-top: 72px`"
+  >
+    <!-- <v-card class="px-2"> -->
+    <perfect-scrollbar style="height: 100%" :options="{ suppressScrollX: true }">
+      <div class="d-flex align-center" style="pointer-events: auto">
+        <span class="caption">Selection Info</span>
+        <v-spacer />
         <v-btn
+          v-show="objects.length > 1"
           v-tooltip="'Open selection in a new window'"
-          :disabled="objects.length === 0 && isolated"
           small
           icon
           target="_blank"
           :href="getSelectionUrl()"
         >
-          <v-icon small>mdi-open-in-new</v-icon>
+          <v-icon x-small>mdi-open-in-new</v-icon>
         </v-btn>
-      </v-list-item-action>
-      <v-list-item-action class="pa-0 ma-0">
         <v-btn
           v-tooltip="'Isolate selected objects'"
           :disabled="objects.length === 0 && !isolated"
@@ -34,33 +27,29 @@
           icon
           @click.stop="isolateSelection()"
         >
-          <v-icon small :class="`${!isolated ? 'primary--text' : ''}`">mdi-filter</v-icon>
+          <v-icon x-small :class="`${!isolated ? 'primary--text' : ''}`">mdi-filter</v-icon>
         </v-btn>
-      </v-list-item-action>
-      <v-list-item-action class="pa-0 ma-0">
-        <v-btn small icon :disabled="props.length === 0" @click.stop="expand = !expand">
-          <v-icon>{{ expand ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+        <v-btn
+          v-show="$vuetify.breakpoint.xs"
+          v-tooltip="'Isolate selected objects'"
+          small
+          icon
+          @click.stop="$emit('clear-selection')"
+        >
+          <v-icon x-small>mdi-close</v-icon>
         </v-btn>
-      </v-list-item-action>
-    </v-list-item>
-    <v-expand-transition>
-      <div v-show="expand" class="mt-3">
-        <div v-for="prop in props" :key="prop.value.id">
-          <object-properties-row :prop="prop" :stream-id="streamId" :ref-id="prop.refId" />
-        </div>
-        <v-subheader v-show="props.length === 1" class="caption grey--text">
-          <v-icon
-            small
-            style="font-size: 12px"
-            :class="`${$vuetify.theme.dark ? 'grey--text' : ''} ml-0 mr-2`"
-          >
-            mdi-help
-          </v-icon>
-          Hint: hold shift to select multiple objects.
-        </v-subheader>
       </div>
-    </v-expand-transition>
-  </v-list>
+      <div v-for="prop in props" :key="prop.value.id" style="width: 99%">
+        <v-card class="transparent elevation-3 rounded-lg mb-3" style="pointer-events: auto">
+          <object-properties-row :prop="prop" :stream-id="streamId" :ref-id="prop.refId" />
+        </v-card>
+      </div>
+      <div v-show="props.length === 1 && !$vuetify.breakpoint.xs" class="caption grey--text">
+        Hint: hold shift to select multiple objects.
+      </div>
+    </perfect-scrollbar>
+    <!-- </v-card> -->
+  </div>
 </template>
 <script>
 export default {
diff --git a/packages/frontend/src/cleanup/components/viewer/Resource.vue b/packages/frontend/src/cleanup/components/viewer/Resource.vue
deleted file mode 100644
index 3e6d33d24..000000000
--- a/packages/frontend/src/cleanup/components/viewer/Resource.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <v-list dense nav class="mt-0 py-0 mb-3">
-    <v-list-item
-      v-if="!resource.data.error"
-      :class="`px-2 list-overlay-${$vuetify.theme.dark ? 'dark' : 'light'} elevation-0`"
-      style="position: sticky; top: 82px"
-      @click="expand = !expand"
-    >
-      <v-list-item-action>
-        <v-icon v-if="resource.type === 'commit'" small>mdi-source-commit</v-icon>
-        <v-icon v-if="resource.type === 'object'" small>mdi-cube-outline</v-icon>
-      </v-list-item-action>
-      <v-list-item-content>
-        <v-list-item-title>
-          {{ resource.type === 'commit' ? 'Commit ' + resource.data.commit.id : 'Object' }}
-        </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action
-        v-if="isMultiple"
-        class="pa-0 ma-0"
-        @click.stop="$emit('remove', resource)"
-      >
-        <v-btn
-          v-if="$route.params.resourceId !== resource.id"
-          v-tooltip="'Remove'"
-          small
-          icon
-          @click.stop="$emit('remove', resource)"
-        >
-          <v-icon x-small>mdi-close</v-icon>
-        </v-btn>
-      </v-list-item-action>
-      <v-list-item-action v-if="isMultiple" class="pa-0 ma-0">
-        <v-btn v-tooltip="'Isolate objects'" small icon @click.stop="isolate()">
-          <v-icon x-small :class="`${isolated ? 'primary--text' : ''}`">mdi-filter</v-icon>
-        </v-btn>
-      </v-list-item-action>
-      <v-list-item-action class="pa-0 ma-0">
-        <v-btn small icon @click.stop="expand = !expand">
-          <v-icon>{{ expand ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
-        </v-btn>
-      </v-list-item-action>
-    </v-list-item>
-    <v-list-item v-else class="warning" dark>
-      <v-list-item-action>
-        <v-icon small>mdi-alert</v-icon>
-      </v-list-item-action>
-      <v-list-item-content>
-        <v-list-item-title v-tooltip="resource.id">
-          Failed to load resource {{ resource.id }}.
-        </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action class="pa-0 ma-0" @click.stop="$emit('remove', resource)">
-        <v-btn
-          v-if="$route.params.resourceId !== resource.id"
-          v-tooltip="'Dismiss'"
-          small
-          icon
-          @click.stop="$emit('remove', resource)"
-        >
-          <v-icon x-small>mdi-close</v-icon>
-        </v-btn>
-      </v-list-item-action>
-    </v-list-item>
-
-    <div v-if="!resource.data.error">
-      <v-expand-transition>
-        <div v-show="expand" class="mt-3">
-          <!-- <div v-if="isMultiple && resource.type === 'commit'">TODO: info</div> -->
-          <object-properties
-            :obj="{
-              referencedId:
-                resource.type === 'commit'
-                  ? resource.data.commit.referencedObject
-                  : resource.data.object.id
-            }"
-            :stream-id="resource.data.id"
-          />
-        </div>
-      </v-expand-transition>
-    </div>
-    <div v-else>
-      <v-expand-transition>
-        <v-alert v-show="expand" type="warning" dense class="text-truncate">
-          {{ resource.data.message }}
-        </v-alert>
-      </v-expand-transition>
-    </div>
-  </v-list>
-</template>
-<script>
-export default {
-  components: {
-    ObjectProperties: () => import('@/cleanup/components/viewer/ObjectProperties')
-  },
-  props: {
-    resource: { type: Object, default: () => null },
-    isMultiple: { type: Boolean, default: false },
-    expandInitial: { type: Boolean, default: true }
-  },
-  data() {
-    return {
-      expand: this.expandInitial
-    }
-  },
-  computed: {
-    isolated() {
-      let id =
-        this.resource.type === 'commit'
-          ? this.resource.data.commit.referencedObject
-          : this.resource.data.object.id
-      return this.$store.state.isolateValues.indexOf(id) !== -1
-    }
-  },
-  methods: {
-    isolate() {
-      let id =
-        this.resource.type === 'commit'
-          ? this.resource.data.commit.referencedObject
-          : this.resource.data.object.id
-
-      if (this.isolated)
-        this.$store.commit('unisolateObjects', { filterKey: '__parents', filterValues: [id] })
-      else this.$store.commit('isolateObjects', { filterKey: '__parents', filterValues: [id] })
-    }
-  }
-}
-</script>
-<style scoped>
-.list-overlay-dark {
-  background: rgb(40, 40, 40);
-  z-index: 5;
-}
-.list-overlay-light {
-  background: rgb(235, 235, 235);
-  z-index: 5;
-}
-</style>
diff --git a/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue b/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue
index 6ecfcd1ec..2ac78f214 100644
--- a/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue
+++ b/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue
@@ -1,46 +1,53 @@
 <template>
-  <div>
-    <v-list v-if="resources.length > 0" dense nav class="mt-0 py-0 mb-3">
-      <v-list-item
-        :class="`px-2 list-overlay-${$vuetify.theme.dark ? 'dark' : 'light'} elevation-2`"
-        style="position: sticky; top: 82px"
-        @click="expand = !expand"
-      >
-        <v-list-item-action>
-          <v-icon small>
-            {{
-              resources.length < 10
-                ? 'mdi-numeric-' + resources.length + '-box-multiple'
-                : 'mdi-numeric-9-plus-box-multiple'
-            }}
-          </v-icon>
-        </v-list-item-action>
-        <v-list-item-content>
-          <v-list-item-title>Data</v-list-item-title>
-        </v-list-item-content>
-        <v-list-item-action class="pa-0 ma-0">
-          <v-btn small icon @click.stop="expand = !expand">
-            <v-icon>{{ expand ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
-          </v-btn>
-        </v-list-item-action>
-      </v-list-item>
-    </v-list>
+  <div class="mb-2">
     <v-expand-transition>
-      <div v-show="expand" class="mt-3">
-        <resource
+      <div v-show="expand" class="">
+        <div v-for="(resource, index) in resources" :key="index">
+          <commit-info-resource
+            v-if="resource.type === 'commit'"
+            :resource="resource"
+            @remove="
+              (e) => {
+                $emit('remove', e)
+                removedResources.push(e)
+              }
+            "
+          ></commit-info-resource>
+          <object-info-resource
+            v-if="resource.type === 'object'"
+            :resource="resource"
+            @remove="
+              (e) => {
+                $emit('remove', e)
+                removedResources.push(e)
+              }
+            "
+          ></object-info-resource>
+        </div>
+        <div class="px-2 mb-2">
+          <v-btn
+            v-tooltip="'Overlay another commit or object'"
+            block
+            rounded
+            class="primary"
+            @click="$emit('show-add-overlay')"
+          >
+            add
+          </v-btn>
+        </div>
+        <!-- <resource
           v-for="(resource, index) in resources"
           :key="index"
           :resource="resource"
           :is-multiple="resources.length > 1"
-          :expand-initial="resources.length === 1"
+          :expand-initial="resources.length === 1 || true"
           @remove="
             (e) => {
               $emit('remove', e)
               removedResources.push(e)
             }
           "
-        />
-
+        /> -->
         <div v-show="removedResources.length !== 0" class="px-3 caption pb-5">
           Removed resources:
           <span v-for="(res, index) in removedResources" :key="index" v-tooltip="'Click to re-add'">
@@ -69,7 +76,8 @@
 <script>
 export default {
   components: {
-    Resource: () => import('@/cleanup/components/viewer/Resource')
+    CommitInfoResource: () => import('@/cleanup/components/viewer/CommitInfoResource'),
+    ObjectInfoResource: () => import('@/cleanup/components/viewer/ObjectInfoResource')
   },
   props: {
     resources: { type: Array, default: () => [] }
diff --git a/packages/frontend/src/cleanup/components/viewer/ViewerControls.vue b/packages/frontend/src/cleanup/components/viewer/ViewerControls.vue
index 0f251f4f0..aa9b35a68 100644
--- a/packages/frontend/src/cleanup/components/viewer/ViewerControls.vue
+++ b/packages/frontend/src/cleanup/components/viewer/ViewerControls.vue
@@ -35,16 +35,6 @@
       >
         <v-icon small>mdi-scissors-cutting</v-icon>
       </v-btn>
-      <v-btn
-        v-tooltip="'Overlay another commit or object'"
-        color="primary"
-        :small="small"
-        rounded
-        class="mr-2"
-        @click="$emit('show-add-overlay')"
-      >
-        <v-icon>mdi-plus</v-icon>
-      </v-btn>
     </v-card>
   </div>
 </template>
diff --git a/packages/frontend/src/cleanup/components/viewer/dialogs/AddOverlay.vue b/packages/frontend/src/cleanup/components/viewer/dialogs/AddOverlay.vue
index cfa6f5752..b35edf8ec 100644
--- a/packages/frontend/src/cleanup/components/viewer/dialogs/AddOverlay.vue
+++ b/packages/frontend/src/cleanup/components/viewer/dialogs/AddOverlay.vue
@@ -115,7 +115,6 @@ export default {
     }
   },
   async mounted() {
-    console.log(this.streamId)
     let res = await this.$apollo.query({
       query: gql`
         query {
diff --git a/packages/frontend/src/cleanup/components/viewer/dialogs/AllCommitsBranch.vue b/packages/frontend/src/cleanup/components/viewer/dialogs/AllCommitsBranch.vue
index 2f1e839dd..764ce1963 100644
--- a/packages/frontend/src/cleanup/components/viewer/dialogs/AllCommitsBranch.vue
+++ b/packages/frontend/src/cleanup/components/viewer/dialogs/AllCommitsBranch.vue
@@ -1,13 +1,7 @@
 <template>
   <div>
-    <v-row v-if="stream" dense>
-      <v-col
-        v-for="commit in stream.branch.commits.items"
-        :key="commit.id + 'card'"
-        cols="12"
-        sm="6"
-        md="4"
-      >
+    <v-row v-if="commits.length != 0" dense>
+      <v-col v-for="commit in commits" :key="commit.id + 'card'" cols="12" sm="6" md="4">
         <v-card @click.stop="$emit('add-resource', commit.id)">
           <preview-image
             :height="180"
@@ -53,83 +47,52 @@ export default {
     SourceAppAvatar: () => import('@/cleanup/components/common/SourceAppAvatar')
   },
   props: ['streamId', 'branchName'],
-  apollo: {
-    stream: {
-      query: gql`
-        query($streamId: String!, $branchName: String!, $cursor: String) {
-          stream(id: $streamId) {
-            id
-            branch(name: $branchName) {
-              name
-              commits(cursor: $cursor, limit: 2) {
-                totalCount
-                cursor
-                items {
-                  sourceApplication
-                  id
-                  createdAt
-                  authorId
-                  branchName
-                  message
-                  referencedObject
-                }
-              }
-            }
-          }
-        }
-      `,
-      variables() {
-        return { streamId: this.streamId, branchName: this.branchName }
-      },
-      skip() {
-        return !this.streamId
-      }
+  data() {
+    return {
+      skip: true,
+      cursor: new Date().toISOString(),
+      commits: []
     }
   },
-  data() {
-    return {}
+  async mounted() {
+    this.fetchBranchCommits()
   },
-  async mounted() {},
   methods: {
-    infiniteHandler($state) {
-      this.$apollo.queries.stream.fetchMore({
-        variables: {
-          cursor: this.stream.branch.commits.cursor,
-          streamId: this.streamId,
-          branchName: this.branchName
-        },
-        // Transform the previous result with new data
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          const newItems = fetchMoreResult.stream.branch.commits.items
-          if (newItems.length === 0) $state.complete()
-          else $state.loaded()
-
-          let allItems = [...previousResult.stream.branch.commits.items]
-          for (const commit of newItems) {
-            if (allItems.findIndex((c) => c.id === commit.id) === -1) allItems.push(commit)
-          }
-
-          return {
-            stream: {
-              __typename: previousResult.stream.__typename,
-              name: previousResult.stream.name,
-              id: previousResult.stream.id,
-              branch: {
-                id: fetchMoreResult.stream.branch.id,
-                name: fetchMoreResult.stream.branch.name,
-                description: fetchMoreResult.stream.branch.description,
-                __typename: previousResult.stream.branch.__typename,
-                commits: {
-                  __typename: previousResult.stream.branch.commits.__typename,
-                  cursor: fetchMoreResult.stream.branch.commits.cursor,
-                  totalCount: fetchMoreResult.stream.branch.commits.totalCount,
-                  items: allItems
+    async fetchBranchCommits() {
+      let res = await this.$apollo.query({
+        query: gql`
+          query {
+            stream(id: "${this.streamId}") {
+              id
+              branch(name: "${this.branchName}") {
+                name
+                commits( cursor: "${this.cursor}", limit: 2) {
+                  totalCount
+                  cursor
+                  items {
+                    sourceApplication
+                    id
+                    createdAt
+                    authorId
+                    branchName
+                    message
+                    referencedObject
+                  }
                 }
               }
             }
           }
-        }
+        `
       })
+      let items = res.data.stream.branch.commits.items
+      this.cursor = res.data.stream.branch.commits.cursor
+      items.forEach((item) => this.commits.push(item))
+      return items
+    },
+    async infiniteHandler($state) {
+      let items = await this.fetchBranchCommits()
+      if (items.length === 0) $state.complete()
+      else $state.loaded()
     }
   }
 }
diff --git a/packages/frontend/src/cleanup/navigation/MainLogo.vue b/packages/frontend/src/cleanup/navigation/MainLogo.vue
index 7405e2a49..bb57eff48 100644
--- a/packages/frontend/src/cleanup/navigation/MainLogo.vue
+++ b/packages/frontend/src/cleanup/navigation/MainLogo.vue
@@ -26,8 +26,8 @@
       {{ serverInfo.version }}
     </div>
     <div class="flex-grow-1 text-right">
-      <v-btn icon small @click="$emit('hide-drawer')">
-        <v-icon>mdi-chevron-left</v-icon>
+      <v-btn v-tooltip="'Close sidebar'" icon small @click="$emit('hide-drawer')">
+        <v-icon x-small>mdi-close</v-icon>
       </v-btn>
     </div>
   </v-card>
diff --git a/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue b/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue
index 8a051f87e..d54d6827e 100644
--- a/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue
+++ b/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue
@@ -50,33 +50,22 @@
           </v-list-item>
         </v-list>
 
-        <!-- Selection info -->
-        <v-scroll-y-transition>
-          <transition-group>
-            <object-selection
-              v-show="selectionData.length !== 0"
-              :key="'one'"
-              :objects="selectionData"
-              :stream-id="$route.params.streamId"
-            />
-            <v-divider v-if="isMultiple && selectionData.length !== 0" :key="'two'" class="my-4" />
-          </transition-group>
-        </v-scroll-y-transition>
-
         <!-- Loaded resources  -->
         <resource-group
           :resources="resources"
           @remove="removeResource"
           @add-resource="addResource"
+          @show-add-overlay="showAddOverlay = true"
         />
 
-        <v-divider v-if="isMultiple" class="my-4" />
+        <!-- <v-divider v-if="isMultiple" class="my-4" /> -->
 
         <!-- Views display -->
-        <views-display v-if="views.length !== 0" :views="views" />
+        <views-display v-if="views.length !== 0" :views="views" class="mt-4" />
 
         <!-- Filters display -->
         <filters
+          class="mt-4"
           :props="objectProperties"
           :source-application="
             resources
@@ -110,6 +99,28 @@
       <div style="height: 100vh; width: 100%; top: -64px; left: 0px; position: absolute">
         <viewer @load-progress="captureProgress" @selection="captureSelect" />
       </div>
+
+      <div
+        style="
+          height: 100vh;
+          width: 100%;
+          top: -64px;
+          left: 22px;
+          position: absolute;
+          z-index: 10;
+          pointer-events: none;
+        "
+      >
+        <object-selection
+          v-show="selectionData.length !== 0"
+          :key="'one'"
+          :objects="selectionData"
+          :stream-id="$route.params.streamId"
+          @clear-selection="selectionData = []"
+        />
+      </div>
+
+      <!-- Viewer controls -->
       <div
         :style="`width: 100%; bottom: 12px; left: 0px; position: ${
           $isMobile() ? 'fixed' : 'absolute'
@@ -118,6 +129,7 @@
       >
         <viewer-controls @show-add-overlay="showAddOverlay = true" />
       </div>
+
       <!-- Progress bar -->
       <div v-if="!loadedModel" style="width: 20%; top: 45%; left: 40%; position: absolute">
         <v-progress-linear
@@ -148,7 +160,12 @@
         </h2>
       </error-placeholder>
     </div>
-    <v-dialog v-model="showAddOverlay" width="800" :fullscreen="$vuetify.breakpoint.smAndDown">
+    <v-dialog
+      v-model="showAddOverlay"
+      width="800"
+      :fullscreen="$vuetify.breakpoint.smAndDown"
+      style="z-index: 10000"
+    >
       <stream-overlay-viewer
         :stream-id="$route.params.streamId"
         @add-resource="addResource"
diff --git a/packages/frontend/src/cleanup/toolbars/CommitToolbar.vue b/packages/frontend/src/cleanup/toolbars/CommitToolbar.vue
index 8f1144e03..e5666effd 100644
--- a/packages/frontend/src/cleanup/toolbars/CommitToolbar.vue
+++ b/packages/frontend/src/cleanup/toolbars/CommitToolbar.vue
@@ -41,16 +41,16 @@
         </router-link>
       </div>
       <div class="text-truncate flex-shrink-0 hidden-xs-only">
-        <user-avatar
+        <!-- <user-avatar
           :id="stream.commit.authorId"
           :avatar="stream.commit.authorAvatar"
           :name="stream.commit.authorName"
           :size="20"
-        />
-        <span class="caption mr-1">
+        /> -->
+        <!-- <span class="caption mr-1">
           <timeago :datetime="stream.commit.createdAt"></timeago>
-        </span>
-        <source-app-avatar :application-name="stream.commit.sourceApplication" />
+        </span> -->
+        <!-- <source-app-avatar :application-name="stream.commit.sourceApplication" /> -->
         <commit-received-receipts :commit-id="stream.commit.id" :stream-id="stream.id" />
         <v-btn
           v-if="stream && stream.role !== 'stream:reviewer' && stream.commit.authorId === $userId()"
diff --git a/packages/frontend/src/components/SourceAppAvatar.vue b/packages/frontend/src/components/SourceAppAvatar.vue
index 3ebe2b8bd..0cf1169fe 100644
--- a/packages/frontend/src/components/SourceAppAvatar.vue
+++ b/packages/frontend/src/components/SourceAppAvatar.vue
@@ -1,10 +1,9 @@
 <template>
   <v-chip
-    small
+    v-tooltip="`Source Application: ${applicationName ? applicationName : 'unknown'}`"
+    x-small
     class="ma-1 caption white--text no-hover"
     :color="color"
-    :size="size"
-    v-tooltip="`Source Application: ${applicationName ? applicationName : 'unknown'}`"
   >
     {{ shortName }}
   </v-chip>
@@ -12,10 +11,6 @@
 <script>
 export default {
   props: {
-    size: {
-      type: Number,
-      default: 30
-    },
     applicationName: {
       type: String,
       default: '?'

From 100a304c1a33f5132184cc2fcefc1264bb9a23a8 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sun, 30 Jan 2022 12:09:49 +0000
Subject: [PATCH 7/7] =?UTF-8?q?fix(frontend):=20missed=20a=20change=20?=
 =?UTF-8?q?=F0=9F=98=AC,=20too=20late=20to=20ammend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/cleanup/components/viewer/ObjectPropertiesRow.vue   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue b/packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue
index fd8fe059a..e3f783805 100644
--- a/packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue
+++ b/packages/frontend/src/cleanup/components/viewer/ObjectPropertiesRow.vue
@@ -3,7 +3,7 @@
     no-gutters
     :class="`my-1 py-1 property-row rounded-lg ${$vuetify.theme.dark ? 'black-bg' : 'white-bg'} ${
       prop.type === 'object' || prop.type === 'array' ? (expanded ? 'border-blue' : 'border') : ''
-    } ${prop.type === 'object' || prop.type === 'array' ? 'hover-cursor' : 'normal-cursor'}`"
+    } ${prop.type === 'object' || prop.type === 'array' ? 'hover-cursor property-row-hover' : 'normal-cursor'}`"
     @click.stop="prop.type === 'object' || prop.type === 'array' ? (expanded = !expanded) : null"
   >
     <v-col cols="1" class="text-center">
@@ -199,8 +199,8 @@ export default {
   background: rgb(30, 30, 30);
 }
 
-.property-row:hover {
+.property-row-hover:hover {
   /* border: 1px solid rgba(120, 120, 120, 0.1); */
-  /* background: rgba(120, 120, 120, 0.09); */
+  background: rgba(120, 120, 120, 0.03);
 }
 </style>