also make backlinks a Table

ui/src/components/AttributeView.vue

@@ -7,6 +7,7 @@
       v-bind="component.props"
       :attributes="attributes"
       :insertable="insertable"
+      :reverse="reverse"
       @edit="processChange"
     />
   </div>
@@ -42,6 +43,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     components(): ComponentOptions[] {

ui/src/components/widgets/Table.vue

@@ -2,60 +2,85 @@
   <div class="table">
     <table>
       <colgroup>
-        <col class="attr-action-col" />
+        <col v-if="editable" class="attr-action-col" />
         <col class="attr-col" />
         <col />
       </colgroup>
-      <tr>
+      <template v-if="!reverse">
-        <th></th>
+        <tr>
-        <th>Attribute</th>
+          <th v-if="editable"></th>
-        <th>Value</th>
+          <th>Attribute</th>
-      </tr>
+          <th>Value</th>
-      <tr v-for="[id, entry] in limitedAttributes" :key="id">
+        </tr>
-        <td class="attr-action">
+        <tr v-for="[id, entry] in limitedAttributes" :key="id">
-          <sl-icon-button name="x-circle" @click="removeEntry(id)" />
+          <td v-if="editable" class="attr-action">
-        </td>
+            <sl-icon-button
-        <td>
+              v-if="deletable"
-          <Marquee>{{ entry.attribute }}</Marquee>
+              name="x-circle"
-        </td>
+              @click="removeEntry(id)"
-        <td>
+            />
-          <Address
+          </td>
-            link
+          <td>
-            v-if="entry.value.t === 'Address'"
+            <Marquee>{{ entry.attribute }}</Marquee>
-            :address="entry.value.c"
+          </td>
-            :resolve="Boolean(resolve[id])"
+          <td>
-            :data-id="id"
+            <Address
-            :ref="
+              link
-              (el) => {
+              v-if="entry.value.t === 'Address'"
-                if (el) addressEls.push(el);
+              :address="entry.value.c"
-              }
+              :resolve="Boolean(resolve[id])"
-            "
+              :data-id="id"
-          />
+              :ref="
-          <template v-else>
+                (el) => {
+                  if (el) addressEls.push(el);
+                }
+              "
+            />
+            <template v-else>
+              <Marquee>
+                {{ entry.value.c }}
+              </Marquee>
+            </template>
+          </td>
+        </tr>
+        <tr v-if="attributes.length > currentDisplay">
+          <td :colspan="editable ? 3 : 2">
+            <sl-button
+              class="more-button"
+              @click="currentDisplay += MAX_DISPLAY"
+            >
+              + {{ attributes.length - currentDisplay }} more...
+            </sl-button>
+          </td>
+        </tr>
+        <tr v-if="insertable">
+          <td class="attr-action">
+            <sl-icon-button name="plus-circle" @click="addEntry()" />
+          </td>
+          <td>
+            <sl-input v-sl-model:newEntryAttribute size="small" />
+          </td>
+          <td>
+            <sl-input v-sl-model:newEntryValue size="small" />
+          </td>
+        </tr>
+      </template>
+      <template v-else>
+        <tr>
+          <th>Entities</th>
+          <th>Attribute name</th>
+        </tr>
+        <tr v-for="[id, entry] in attributes" :key="id">
+          <td>
+            <Address link :address="entry.entity" />
+          </td>
+          <td>
             <Marquee>
-              {{ entry.value.c }}
+              {{ entry.attribute }}
             </Marquee>
-          </template>
+          </td>
-        </td>
+        </tr>
-      </tr>
+      </template>
-      <tr v-if="attributes.length > currentDisplay">
-        <td colspan="3">
-          <sl-button class="more-button" @click="currentDisplay += MAX_DISPLAY">
-            + {{ attributes.length - currentDisplay }} more...
-          </sl-button>
-        </td>
-      </tr>
-      <tr v-if="insertable">
-        <td class="attr-action">
-          <sl-icon-button name="plus-circle" @click="addEntry()" />
-        </td>
-        <td>
-          <sl-input v-sl-model:newEntryAttribute size="small" />
-        </td>
-        <td>
-          <sl-input v-sl-model:newEntryValue size="small" />
-        </td>
-      </tr>
     </table>
   </div>
 </template>
@@ -94,6 +119,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -102,6 +131,10 @@ export default defineComponent({
     };
   },
   setup(props) {
+    const editable = computed(() => {
+      return (props.deletable || props.insertable) && !props.reverse;
+    });
+
     // Enable IntersectionObserver for performance reasons
     const addressEls = ref<InstanceType<typeof Address>[]>([]);
     const resolve = reactive<{ [key: string]: boolean }>({});
@@ -129,6 +162,7 @@ export default defineComponent({
     });
 
     return {
+      editable,
       addressEls,
       resolve,
       limitedAttributes,

ui/src/views/Inspect.vue

@@ -41,22 +41,7 @@
       <template v-if="backlinks.length">
         <section class="backlinks">
           <h3>Referred to ({{ backlinks.length }})</h3>
-          <table>
+          <AttributeView :address="address" :attributes="backlinks" reverse />
-            <tr>
-              <th>Entities</th>
-              <th>Attribute names</th>
-            </tr>
-            <tr v-for="[id, entry] in backlinks" :key="id">
-              <td>
-                <Address link :address="entry.entity" />
-              </td>
-              <td>
-                <Marquee>
-                  {{ entry.attribute }}
-                </Marquee>
-              </td>
-            </tr>
-          </table>
         </section>
       </template>
     </div>