Click on reference props to go to them

app/imports/api/library/methods/updateReferenceNode.js

@@ -58,7 +58,10 @@ function updateReferenceNodeWork(node, userId) {
     node: doc,
   };
   if (library) {
-    cache.library = { name: library.name };
+    cache.library = {
+      id: library._id,
+      name: library.name,
+    };
   }
   writeCache(node._id, cache);
 }

app/imports/api/properties/References.js

@@ -51,6 +51,10 @@ let ReferenceSchema = new SimpleSchema({
     type: Object,
     optional: true,
   },
+  'cache.library.id': {
+    type: String,
+    optional: true,
+  },
   'cache.library.name': {
     type: String,
     optional: true,

app/imports/client/ui/properties/shared/PropertyViewer.vue

@@ -52,6 +52,7 @@
       :key="model._id"
       class="property-viewer"
       :model="model"
+      @select-sub-property="id => selectSubProperty(id)"
     />
     <v-row dense>
       <template

app/imports/client/ui/properties/viewers/ReferenceViewer.vue

@@ -8,17 +8,46 @@
       />
       <property-field
         v-else-if="model.ref && model.ref.id"
-        name="Linked Property"
+        name="Linked property"
+        :cols="{cols: 12, md: 6}"
       >
-        <div style="overflow: hidden;">
-          <tree-node-view :model="model.cache.node" />
+        <div style="overflow: hidden; min-width: 100%; min-height: 100%;">
+          <v-btn
+            plain
+            class="normal-text"
+            style="min-width: 100%; min-height: 100%;"
+            :to="(model.cache.library && model.cache.library.id) ? `/library/${model.cache.library.id}` : undefined"
+            @click="$emit('select-sub-property', model.ref.id)"
+          >
+            <div
+              class="pa-4"
+            >
+              <tree-node-view
+                :model="model.cache.node"
+              />
+            </div>
+          </v-btn>
         </div>
       </property-field>
       <property-field
         v-if="model.cache.library && model.cache.library.name"
         name="Library"
-        :value="model.cache.library.name"
-      />
+        :cols="{cols: 12, md: 6}"
+      >
+        <div style="overflow: hidden; min-width: 100%; min-height: 100%;">
+          <v-btn
+            plain
+            height="56"
+            class="normal-text"
+            style="min-width: 100%; min-height: 100%;"
+            :disabled="!model.cache.library.id"
+            :to="`/library/${model.cache.library.id}`"
+            @click="$emit('select-sub-property', model.ref.id)"
+          >
+            {{ model.cache.library.name }}
+          </v-btn>
+        </div>
+      </property-field>
     </v-row>
   </div>
 </template>
@@ -26,15 +55,24 @@
 <script lang="js">
 import propertyViewerMixin from '/imports/client/ui/properties/viewers/shared/propertyViewerMixin.js'
 import TreeNodeView from '/imports/client/ui/properties/treeNodeViews/TreeNodeView.vue';
+import OutlinedInput from '/imports/client/ui/properties/viewers/shared/OutlinedInput.vue';
 
 export default {
   components: {
     TreeNodeView,
+    OutlinedInput,
   },
   mixins: [propertyViewerMixin],
 }
 </script>
 
-<style lang="css" scoped>
-
+<style lang="css">
+  .reference-viewer .normal-text {
+    word-wrap: unset;
+    white-space: unset;
+    text-transform: unset;
+  }
+  .reference-viewer .normal-text span {
+    max-width: 100%;
+  }
 </style>