upend/ui/src/views/Inspect.vue

<template>
  <div class="inspect">
    <h2>
      <Address
        :address="address"
        :is-file="backlinks.some(([_, e]) => e.attribute === 'FILE_IS')"
      />
    </h2>
    <blob-preview :address="address" />
    <div v-if="!error">
      <section
        class="typed-attribute-list"
        v-for="(attributes, typeAddr) in typedAttributes"
        :key="typeAddr"
      >
        <h3>
          <sl-icon
            v-if="types[typeAddr].getIcon()"
            :name="types[typeAddr].getIcon()"
          />
          {{ types[typeAddr]?.name || "???" }}
        </h3>
        <table>
          <tr>
            <th></th>
            <th>Attribute</th>
            <th>Value</th>
          </tr>
          <tr v-for="[id, entry] in attributes" :key="id">
            <td class="attr-action">
              <sl-icon-button name="x-circle" @click="removeEntry(id)" />
            </td>
            <td>{{ entry.attribute }}</td>
            <td>
              <Address
                link
                v-if="entry.value.t === 'Address'"
                :address="entry.value.c"
              />
              <template v-else>
                {{ entry.value.c }}
              </template>
            </td>
          </tr>
        </table>
      </section>
      <section class="untyped-attribute-list">
        <h3>
          <sl-icon name="question-diamond" />
          Other attributes
        </h3>
        <table>
          <tr>
            <th></th>
            <th>Attribute</th>
            <th>Value</th>
          </tr>
          <tr v-for="[id, entry] in untypedAttributes" :key="id">
            <td class="attr-action">
              <sl-icon-button name="x-circle" @click="removeEntry(id)" />
            </td>
            <td>{{ entry.attribute }}</td>
            <td>
              <Address
                link
                v-if="entry.value.t === 'Address'"
                :address="entry.value.c"
              />
              <template v-else>
                {{ entry.value.c }}
              </template>
            </td>
          </tr>
          <tr>
            <td class="attr-action">
              <sl-icon-button name="plus-circle" @click="addEntry()" />
            </td>
            <td>
              <sl-input v-sl-model:newEntryAttribute />
            </td>
            <td>
              <sl-input v-sl-model:newEntryValue />
            </td>
          </tr>
        </table>
      </section>
      <template v-if="backlinks.length">
        <section class="backlinks">
          <h3>Referred to ({{ backlinks.length }})</h3>
          <table>
            <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>
                {{ entry.attribute }}
              </td>
            </tr>
          </table>
        </section>
      </template>
    </div>
    <div v-else class="error">
      {{ error }}
    </div>
  </div>
</template>

<script lang="ts">
import Address from "@/components/Address.vue";
import BlobPreview from "@/components/BlobPreview.vue";
import { query, useEntity } from "@/lib/entity";
import { UpType } from "@/lib/types";
import { IEntry } from "@/types/base";
import { computed, defineComponent, reactive, watch } from "vue";

export default defineComponent({
  name: "Inspect",
  components: {
    Address,
    BlobPreview,
  },
  props: {
    address: {
      type: String,
      required: true,
    },
  },
  data: () => {
    return {
      newEntryAttribute: "",
      newEntryValue: "",
    };
  },
  methods: {
    async removeEntry(id: string) {
      if (confirm("Are you sure you want to remove the attribute?")) {
        await fetch(`/api/obj/${id}`, { method: "DELETE" });
        await this.mutate();
      }
    },
    async addEntry() {
      await fetch(`/api/obj`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          entity: this.address,
          attribute: this.newEntryAttribute,
          value: {
            t: "Value",
            c: this.newEntryValue,
          },
        }),
      });

      await this.mutate();

      this.newEntryAttribute = "";
      this.newEntryValue = "";
    },
  },
  setup(props) {
    const { error, mutate, attributes, backlinks } = useEntity(
      () => props.address
    );

    const allTypeAddresses = computed(() => {
      return attributes.value
        .map(([_, attr]) => attr)
        .filter((attr) => attr.attribute == "IS")
        .map((attr) => attr.value.c);
    });

    const { result: allTypeEntries } = query(
      () =>
        `(matches (in ${allTypeAddresses.value
          .map((addr) => `"${addr}"`)
          .join(" ")}) ? ?)`,
      () => allTypeAddresses.value.length > 0
    );

    const allTypes = computed(() => {
      const result = {} as { [key: string]: UpType };
      allTypeEntries.value.forEach(([_, entry]) => {
        if (result[entry.entity] === undefined) {
          result[entry.entity] = new UpType();
        }

        switch (entry.attribute) {
          case "TYPE":
            result[entry.entity].name = entry.value.c;
            break;
          case "TYPE_HAS":
          case "TYPE_ID":
            result[entry.entity].attributes.push(entry.value.c);
            break;
        }
      });

      return result;
    });

    const typedAttributes = reactive(
      {} as { [key: string]: [string, IEntry][] }
    );
    const untypedAttributes = reactive([] as [string, IEntry][]);

    watch([attributes, allTypes], () => {
      Object.keys(typedAttributes).forEach(
        (key) => delete typedAttributes[key]
      );
      untypedAttributes.length = 0;

      attributes.value
        .filter(([_, entry]) => entry.attribute !== "IS")
        .forEach(([entryAddr, entry]) => {
          const entryTypes = Object.entries(allTypes.value).filter(([_, t]) =>
            t.attributes.includes(entry.attribute)
          );
          if (entryTypes.length > 0) {
            entryTypes.forEach(([addr, _]) => {
              if (typedAttributes[addr] == undefined) {
                typedAttributes[addr] = [];
              }
              typedAttributes[addr].push([entryAddr, entry]);
            });
          } else {
            untypedAttributes.push([entryAddr, entry]);
          }
        });
    });

    return {
      typedAttributes,
      untypedAttributes,
      backlinks,
      error,
      mutate,
      types: allTypes,
    };
  },
});
</script>

<style  lang="scss">
.inspect {
  overflow: auto;
}

table {
  width: 100%;

  th {
    text-align: left;
  }

  td {
    font-family: var(--monospace-font);
    padding-right: 1em;
    line-height: 1em;

    &.attr-action {
      max-width: 1em;
    }
  }

  sl-input {
    max-width: 8em;
  }
}

.inspect section {
  position: relative;
  overflow: visible;

  margin-top: 1.66em;
  padding: 1ex 1em;

  border: 1px solid var(--foreground);
  border-radius: 4px;

  h3 {
    display: inline-block;

    background: var(--background);
    font-weight: 600;

    position: absolute;
    top: -1.66em;
    left: 1ex;
    line-height: 1;
    padding: 0 0.75ex;

    sl-icon {
      margin-bottom: -2px;
    }
  }
}

.error {
  color: red;
}
</style>