upend/webui/src/components/Inspect.svelte

<script lang="ts">
  import EntryView, { type Widget } from "./EntryView.svelte";
  import { useEntity } from "../lib/entity";
  import UpObject from "./display/UpObject.svelte";
  import { createEventDispatcher, setContext } from "svelte";
  import { derived, writable, type Readable } from "svelte/store";
  import type { UpEntry } from "upend";
  import Spinner from "./utils/Spinner.svelte";
  import NotesEditor from "./utils/NotesEditor.svelte";
  import type { AttributeChange } from "../types/base";
  import Selector from "./utils/Selector.svelte";
  import type { ADDRESS_TYPE, EntityInfo, IValue } from "upend/types";
  import IconButton from "./utils/IconButton.svelte";
  import type { BrowseContext } from "../util/browse";
  import { Link, useParams } from "svelte-navigator";
  import Icon from "./utils/Icon.svelte";
  import BlobViewer from "./display/BlobViewer.svelte";
  import { i18n } from "../i18n";
  import EntryList from "./widgets/EntryList.svelte";
  import api from "../lib/api";
  import Gallery from "./widgets/Gallery.svelte";
  import { ATTR_IN, ATTR_LABEL, ATTR_KEY, ATTR_OF } from "upend/constants";
  const dispatch = createEventDispatcher();
  const params = useParams();

  export let address: string;
  export let index: number | undefined;
  export let detail: boolean;
  export let editable = false;
  let showAsEntries = false;
  let highlightedType: string | undefined;

  let blobHandled = false;

  let indexStore = writable(index);
  $: $indexStore = index;

  let addressesStore = writable([]);
  $: $addressesStore = $params.addresses?.split(",") || [];

  setContext("browse", {
    index: indexStore,
    addresses: addressesStore,
  } as BrowseContext);

  $: ({ entity, entityInfo, error, revalidate } = useEntity(address));

  $: allTypes = derived(
    entityInfo,
    ($entityInfo, set) => {
      getAllTypes($entityInfo).then((allTypes) => {
        set(allTypes);
      });
    },
    {}
  ) as Readable<{
    [key: string]: {
      labels: string[];
      attributes: string[];
    };
  }>;

  async function getAllTypes(entityInfo: EntityInfo) {
    const allTypes = {};

    if (!entityInfo) {
      return {};
    }

    const typeAddresses: string[] = [
      await api.getAddress(entityInfo.t),
      ...$entity.attr[ATTR_IN].map((e) => e.value.c as string),
    ];
    const typeAddressesIn = typeAddresses.map((addr) => `@${addr}`).join(" ");

    const labelsQuery = await api.query(
      `(matches (in ${typeAddressesIn}) "${ATTR_LABEL}" ?)`
    );
    await Promise.all(
      typeAddresses.map(async (address) => {
        let labels = labelsQuery.getObject(address).identify();

        let typeLabel: string | undefined;
        await Promise.all(
          (["Hash", "Uuid", "Attribute", "Url"] as ADDRESS_TYPE[]).map(
            async (t) => {
              if ((await api.getAddress(t)) == address) {
                labels.push(`[${t}]`);
              }
            }
          )
        );
        if (typeLabel) {
          labels.unshift(typeLabel);
        }

        if (!labels.length) {
          labels.push(address);
        }

        allTypes[address] = {
          labels,
          attributes: [],
        };
      })
    );

    const attributes = await api.query(
      `(matches ? "${ATTR_OF}" (in ${typeAddressesIn}))`
    );
    await Promise.all(
      typeAddresses.map(async (address) => {
        allTypes[address].attributes = (
          await Promise.all(
            (attributes.getObject(address).attr[`~${ATTR_OF}`] || []).map(
              async (e) => {
                try {
                  const { t, c } = await api.addressToComponents(e.entity);
                  if (t == "Attribute") {
                    return c;
                  }
                } catch (err) {
                  console.error(err);
                  return false;
                }
              }
            )
          )
        ).filter(Boolean);
      })
    );

    return allTypes;
  }

  let typedAttributes = {} as { [key: string]: UpEntry[] };
  let untypedAttributes = [] as UpEntry[];

  $: {
    typedAttributes = {};
    untypedAttributes = [];

    ($entity?.attributes || []).forEach((entry) => {
      const entryTypes = Object.entries($allTypes || {}).filter(([_, t]) =>
        t.attributes.includes(entry.attribute)
      );
      if (entryTypes.length > 0) {
        entryTypes.forEach(([addr, _]) => {
          if (typedAttributes[addr] == undefined) {
            typedAttributes[addr] = [];
          }
          typedAttributes[addr].push(entry);
        });
      } else {
        untypedAttributes.push(entry);
      }
    });

    typedAttributes = typedAttributes;
    untypedAttributes = untypedAttributes;
  }

  $: filteredUntypedAttributes = untypedAttributes.filter(
    (entry) =>
      ![
        ATTR_LABEL,
        ATTR_IN,
        ATTR_KEY,
        "NOTE",
        "LAST_VISITED",
        "NUM_VISITED",
        "LAST_ATTRIBUTE_WIDGET",
      ].includes(entry.attribute)
  );

  $: currentUntypedAttributes = editable
    ? untypedAttributes
    : filteredUntypedAttributes;

  $: currentBacklinks =
    (editable
      ? $entity?.backlinks
      : $entity?.backlinks.filter(
          (entry) => ![ATTR_IN].includes(entry.attribute)
        )) || [];

  $: groups = ($entity?.attr[ATTR_IN] || []).map((e) => [
    e.value.c as string,
    e.address,
  ]);
  $: tagged = $entity?.attr[`~${ATTR_IN}`] || [];

  let attributesUsed: UpEntry[] = [];
  $: {
    if ($entityInfo?.t === "Attribute") {
      api
        .query(`(matches ? "${$entityInfo.c}" ?)`)
        .then((result) => (attributesUsed = result.entries));
    }
  }

  async function onChange(ev: CustomEvent<AttributeChange>) {
    const change = ev.detail;
    switch (change.type) {
      case "create":
        await api.putEntry({
          entity: address,
          attribute: change.attribute,
          value: change.value,
        });
        break;
      case "delete":
        await api.deleteEntry(change.address);
        break;
      case "update":
        await api.putEntityAttribute(address, change.attribute, change.value);
        break;
      default:
        console.error("Unimplemented AttributeChange", change);
        return;
    }
    revalidate();
  }

  let identities = [address];
  function onResolved(ev: CustomEvent<string[]>) {
    identities = ev.detail;
    dispatch("resolved", ev.detail);
  }

  let groupToAdd: IValue | undefined;
  async function addGroup() {
    if (!groupToAdd) {
      return;
    }
    await api.putEntry([
      {
        entity: address,
        attribute: ATTR_IN,
        value: {
          t: "Address",
          c: String(groupToAdd.c),
        },
      },
    ]);
    revalidate();
    groupToAdd = undefined;
  }

  async function removeGroup(groupAddress: string) {
    await api.deleteEntry(groupAddress);
    revalidate();
  }

  async function deleteObject() {
    if (confirm(`${$i18n.t("Really delete")} "${identities.join(" | ")}"?`)) {
      await api.deleteEntry(address);
      dispatch("close");
    }
  }

  async function onAttributeWidgetSwitch(ev: CustomEvent<string>) {
    await api.putEntityAttribute(
      address,
      "LAST_ATTRIBUTE_WIDGET",
      {
        t: "String",
        c: ev.detail,
      },
      "UI_PREFERENCES"
    );
  }

  const attributeWidgets: Widget[] = [
    {
      name: "List",
      icon: "list-check",
      components: (entries) => [
        {
          component: EntryList,
          props: {
            entries,
            columns: "attribute, value",
          },
        },
      ],
    },
    {
      name: "Gallery",
      icon: "image",
      components: (entries) => [
        {
          component: Gallery,
          props: {
            entities: entries
              .filter((e) => e.value.t == "Address")
              .map((e) => e.value.c),
            thumbnails: true,
          },
        },
      ],
    },
  ];

  const taggedWidgets: Widget[] = [
    {
      name: "List",
      icon: "list-check",
      components: (entries) => [
        {
          component: Gallery,
          props: {
            entities: entries.map((e) => e.entity),
            thumbnails: false,
          },
        },
      ],
    },
    {
      name: "Gallery",
      icon: "image",
      components: (entries) => [
        {
          component: Gallery,
          props: {
            entities: entries.map((e) => e.entity),
            thumbnails: true,
          },
        },
      ],
    },
  ];

  $: entity.subscribe(async (object) => {
    if (object && object.listing.entries.length) {
      await api.putEntityAttribute(
        object.address,
        "LAST_VISITED",
        {
          t: "Number",
          c: new Date().getTime() / 1000,
        },
        "IMPLICIT"
      );

      await api.putEntityAttribute(
        object.address,
        "NUM_VISITED",
        {
          t: "Number",
          c: (parseInt(String(object.get("NUM_VISITED"))) || 0) + 1,
        },
        "IMPLICIT"
      );
    }
  });
</script>

<div class="inspect" class:detail class:blob={blobHandled}>
  <header>
    <h2>
      {#if $entity}
        <UpObject banner {address} on:resolved={onResolved} />
      {:else}
        <Spinner centered />
      {/if}
    </h2>
  </header>
  {#if !showAsEntries}
    <div class="main-content">
      <div class="detail-col">
        <div class="blob-viewer">
          <BlobViewer
            {address}
            {editable}
            {detail}
            on:handled={(ev) => (blobHandled = ev.detail)}
          />
        </div>
        <NotesEditor {address} {editable} on:change={onChange} />
        {#if !$error}
          {#if groups.length}
            <section class="groups labelborder">
              <header><h3>{$i18n.t("Groups")}</h3></header>
              <div class="content">
                {#each groups as [groupAddress, groupEntryAddress]}
                  <div
                    class="tag"
                    on:mouseenter={() => (highlightedType = groupAddress)}
                    on:mouseleave={() => (highlightedType = undefined)}
                  >
                    <UpObject address={groupAddress} link />
                    {#if editable}
                      <IconButton
                        name="x-circle"
                        on:click={() => removeGroup(groupEntryAddress)}
                      />
                    {/if}
                  </div>
                {/each}
                {#if editable}
                  <div class="selector">
                    <Selector
                      type="value"
                      valueTypes={["Address"]}
                      bind:value={groupToAdd}
                      on:input={addGroup}
                      placeholder="Choose an entity..."
                    />
                  </div>
                {/if}
              </div>
            </section>
          {/if}
          <div class="attributes">
            {#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
              <EntryView
                {entries}
                {editable}
                widgets={attributeWidgets}
                on:change={onChange}
                highlighted={highlightedType == typeAddr}
                title={$allTypes[typeAddr].labels.join(" | ")}
              />
            {/each}

            {#if currentUntypedAttributes.length > 0 || editable}
              <EntryView
                title={$i18n.t("Attributes")}
                {editable}
                widgets={attributeWidgets}
                entries={currentUntypedAttributes}
                on:change={onChange}
              />
            {/if}

            {#if currentBacklinks.length > 0}
              <EntryView
                title={`${$i18n.t("Referred to")} (${currentBacklinks.length})`}
                entries={currentBacklinks}
                on:change={onChange}
              />
            {/if}

            {#if tagged.length > 0}
              <EntryView
                title={`${$i18n.t("Members")}`}
                widgets={taggedWidgets}
                entries={tagged}
                on:change={onChange}
              />
            {/if}

            {#if $entityInfo?.t === "Attribute"}
              <div class="buttons">
                <div class="button">
                  <Link to="/surface?x={$entityInfo.c}">
                    {$i18n.t("Surface view")}
                  </Link>
                </div>
              </div>

              <section class="labelborder">
                <header>
                  <h3>{$i18n.t("Used")} ({attributesUsed.length})</h3>
                </header>
                <EntryList
                  columns="entity,value"
                  columnWidths={["auto", "33%"]}
                  entries={attributesUsed}
                  orderByValue
                />
              </section>
            {/if}
          </div>

          {#if editable}
            <!-- svelte-ignore a11y-click-events-have-key-events -->
            <div class="button" on:click={deleteObject}>
              <Icon name="trash" />
            </div>
          {/if}
        {:else}
          <div class="error">
            {$error}
          </div>
        {/if}
      </div>
    </div>
  {:else}
    <div class="entries">
      <h2>{$i18n.t("Attributes")}</h2>
      <EntryList
        {editable}
        entries={$entity.attributes}
        columns={detail
          ? "timestamp, provenance, attribute, value"
          : "attribute, value"}
      />
      <h2>{$i18n.t("Backlinks")}</h2>
      <EntryList
        entries={$entity.backlinks}
        columns={detail
          ? "timestamp, provenance, entity, attribute"
          : "entity, attribute"}
      />
    </div>
  {/if}
  <div class="footer">
    <IconButton
      name="detail"
      title="Show as entries"
      active={showAsEntries}
      on:click={() => (showAsEntries = !showAsEntries)}
    />
  </div>
</div>

<style scoped lang="scss">
  @use "./util";

  header h2 {
    margin-bottom: 0;
  }

  .inspect,
  .main-content {
    flex: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
  }

  .groups {
    margin: 0.25rem 0;
    .content {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 0.5rem;
      align-items: center;
    }

    .tag {
      display: inline-flex;
      align-items: center;
    }

    .selector {
      width: 100%;
    }
  }

  .attributes {
    flex: auto;
    height: 0; // https://stackoverflow.com/a/14964944
    min-height: 12em;
    overflow-y: auto;
  }

  @media screen and (max-height: 1080px) {
    .main-content {
      overflow-y: auto;
      // min-height: 0;
    }

    .attributes {
      height: unset;
      min-height: unset;
      overflow-y: unset;
    }
  }

  .inspect.detail {
    .main-content {
      position: relative;
      flex-direction: row;
      justify-content: end;
    }

    .blob-viewer {
      width: 73%;
      height: 100%;
      position: absolute;
      left: 1%;
      top: 0;
    }

    .detail-col {
      width: 25%;
    }

    &.blob {
      .detail-col {
        flex-grow: 0;
      }
    }
  }

  .main-content .detail-col {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .entries {
    flex-grow: 1;
  }

  .footer {
    display: flex;
    justify-content: end;
  }

  .buttons {
    display: flex;
  }

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