"instantiates" for FILE_IS

ui/src/views/Inspect.vue

@@ -34,6 +34,17 @@
     <div v-else class="error">
       {{ error }}
     </div>
+    <template v-if="referredAddress">
+      <div class="hr">
+        <hr />
+        <div class="hr-label">
+          <sl-icon name="chevron-double-down" />
+          Instantiates
+          <sl-icon name="chevron-double-down" />
+        </div>
+      </div>
+      <inspect :address="referredAddress" />
+    </template>
   </div>
 </template>
 
@@ -141,6 +152,16 @@ export default defineComponent({
       );
     });
 
+    const referredAddress = computed(() => {
+      const fileIsAttr = attributes.value.find(
+        ([_, entry]) => entry.attribute === "FILE_IS"
+      )?.[1];
+
+      if (fileIsAttr) {
+        return fileIsAttr.value.c;
+      }
+    });
+
     return {
       typedAttributes,
       untypedAttributes: filteredUntypedAttributes,
@@ -148,12 +169,42 @@ export default defineComponent({
       error,
       mutate,
       types: allTypes,
+      referredAddress,
     };
   },
 });
 </script>
 
 <style scoped lang="scss">
+.hr {
+  position: relative;
+  margin: 2rem 0 1rem 0;
+
+  hr {
+    border: none;
+    border-top: 4px double var(--foreground);
+    height: 1rem;
+  }
+
+  .hr-label {
+    position: absolute;
+    top: -1ex;
+    left: 50%;
+    transform: translateX(-50%);
+
+    font-weight: bold;
+    font-size: 18px;
+
+    color: var(--foreground);
+    background: var(--background);
+    padding: 0 4px;
+
+    sl-icon {
+      margin-bottom: -4px;
+    }
+  }
+}
+
 .error {
   color: red;
 }