From 71a878d7c5bfb91a705ae25c1429cbac65f893ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Olov=20Ylinenp=C3=A4=C3=A4?= <olov.ylinenpaa@kb.se>
Date: Wed, 14 Aug 2024 15:43:05 +0200
Subject: [PATCH 1/5] Remove obsolete item-sibling component

It has not been used in a long time. Works are now handled like any
other node.
---
 vue-client/src/App.vue                        |   2 +-
 .../src/components/inspector/entity-adder.vue |  23 -
 vue-client/src/components/inspector/field.vue |  23 -
 .../src/components/inspector/item-sibling.vue | 694 ------------------
 4 files changed, 1 insertion(+), 741 deletions(-)
 delete mode 100644 vue-client/src/components/inspector/item-sibling.vue

diff --git a/vue-client/src/App.vue b/vue-client/src/App.vue
index 68b579bbd..e6604729d 100644
--- a/vue-client/src/App.vue
+++ b/vue-client/src/App.vue
@@ -847,7 +847,7 @@ body {
       }
     }
   }
-  input, textarea, img, select, .ItemEntity, .ItemLocal, .EntityAction, .ItemSibling, .icon, .icon i, li, i.fa, div {
+  input, textarea, img, select, .ItemEntity, .ItemLocal, .EntityAction, .icon, .icon i, li, i.fa, div {
     &:focus {
       .focus-mixin-border();
     }
diff --git a/vue-client/src/components/inspector/entity-adder.vue b/vue-client/src/components/inspector/entity-adder.vue
index 42097892c..68b3ecf6d 100644
--- a/vue-client/src/components/inspector/entity-adder.vue
+++ b/vue-client/src/components/inspector/entity-adder.vue
@@ -383,29 +383,6 @@ export default {
         addToHistory: true,
       });
     },
-    addSibling(obj) {
-      const linkObj = { '@id': `${this.inspector.data.record['@id']}#work` };
-      const workObj = obj;
-      workObj['@id'] = linkObj['@id'];
-
-      this.$store.dispatch('setInspectorStatusValue', {
-        property: 'lastAdded',
-        value: 'work',
-      });
-      this.$store.dispatch('updateInspectorData', {
-        changeList: [
-          {
-            path: `${this.path}`,
-            value: linkObj,
-          },
-          {
-            path: 'work',
-            value: workObj,
-          },
-        ],
-        addToHistory: true,
-      });
-    },
     addEmpty(typeId) {
       this.hide();
       const shortenedType = StringUtil.getCompactUri(typeId, this.resources.context);
diff --git a/vue-client/src/components/inspector/field.vue b/vue-client/src/components/inspector/field.vue
index a84b28e0a..9c8fe2653 100644
--- a/vue-client/src/components/inspector/field.vue
+++ b/vue-client/src/components/inspector/field.vue
@@ -19,7 +19,6 @@ import ItemLocal from './item-local.vue';
 import ItemError from './item-error.vue';
 import ItemVocab from './item-vocab.vue';
 import ItemType from './item-type.vue';
-import ItemSibling from './item-sibling.vue';
 import ItemBoolean from './item-boolean.vue';
 import ItemNumeric from './item-numeric.vue';
 import ItemGrouped from './item-grouped.vue';
@@ -141,7 +140,6 @@ export default {
     'item-entity': ItemEntity,
     'item-value': ItemValue,
     'item-local': ItemLocal,
-    'item-sibling': ItemSibling,
     'item-error': ItemError,
     'item-vocab': ItemVocab,
     'item-boolean': ItemBoolean,
@@ -563,9 +561,6 @@ export default {
       if (this.isPlainObject(o) && this.isLinked(o)) {
         return 'entity';
       }
-      if (this.isPlainObject(o) && o.hasOwnProperty('@id') && this.isInGraph(o)) {
-        return 'sibling';
-      }
       if (this.isPlainObject(o) && !this.isLinked(o)) {
         return 'local';
       }
@@ -967,24 +962,6 @@ export default {
           :in-array="valueIsArray"
           :diff="diff"
           :should-expand="expandChildren || embellished" />
-
-        <item-sibling
-          v-if="getDatatype(item) == 'sibling'"
-          :id="item['@id']"
-          :is-locked="locked"
-          :field-key="fieldKey"
-          :entity-type="entityType"
-          :is-compositional="isCompositional"
-          :all-values-from="allValuesFrom"
-          :some-values-from="someValuesFrom"
-          :all-search-types="allSearchTypes"
-          :range="range"
-          :range-full="rangeFull"
-          :index="index"
-          :in-array="valueIsArray"
-          :diff="diff"
-          :should-expand="expandChildren || embellished"
-          :parent-path="path" />
       </div>
       <portal-target :name="`typeSelect-${path}`" />
     </div>
diff --git a/vue-client/src/components/inspector/item-sibling.vue b/vue-client/src/components/inspector/item-sibling.vue
deleted file mode 100644
index 4e0a7fd7e..000000000
--- a/vue-client/src/components/inspector/item-sibling.vue
+++ /dev/null
@@ -1,694 +0,0 @@
-<script>
-/*
-  This component is used for the special case for when we want to show a sibling (ie a work in an instance)
-  as an item-local in mainEntity. Most of the functionality is similar to those in item-local, but with some
-  important differences. Examples of this is the path-variables as they are pointing to one place for what data to show,
-  and to another for what data to edit.
-*/
-
-import { cloneDeep, each } from 'lodash-es';
-import { vOnClickOutside } from '@vueuse/components';
-import { mapGetters } from 'vuex';
-import * as StringUtil from 'lxljs/string';
-import * as LayoutUtil from '@/utils/layout';
-import { labelByLang, capitalize } from '@/utils/filters';
-import ItemMixin from '@/components/mixins/item-mixin.vue';
-import LensMixin from '@/components/mixins/lens-mixin.vue';
-import FormMixin from '@/components/mixins/form-mixin.vue';
-import PropertyAdder from '@/components/inspector/property-adder.vue';
-import SearchWindow from '@/components/inspector/search-window.vue';
-import EntityAction from '@/components/inspector/entity-action.vue';
-
-export default {
-  name: 'item-sibling',
-  directives: {
-    'on-click-outside': vOnClickOutside,
-  },
-  mixins: [FormMixin, ItemMixin, LensMixin],
-  props: {
-    id: {
-      type: String,
-      default: '',
-    },
-    entityType: {
-      type: String,
-      default: '',
-    },
-    isLocked: {
-      type: Boolean,
-      default: false,
-    },
-    allSearchTypes: {
-      type: Array,
-      default: () => [],
-    },
-    allValuesFrom: {
-      type: Array,
-      default: () => [],
-    },
-    someValuesFrom: {
-      type: Array,
-      default: () => [],
-    },
-    range: {
-      type: Array,
-      default: () => [],
-    },
-    rangeFull: {
-      type: Array,
-      default: () => [],
-    },
-    inArray: {
-      type: Boolean,
-      default: false,
-    },
-    shouldExpand: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      inEdit: false,
-      showCardInfo: false,
-      isNewlyAdded: false,
-      extractDialogActive: false,
-      propertyAdderOpened: false,
-      expanded: false,
-      focused: false,
-      isHovered: false,
-      removeHover: false,
-      showLinkAction: false,
-      copyTitle: false,
-      expandChildren: false,
-      highlights: [],
-    };
-  },
-  computed: {
-    ...mapGetters([
-      'inspector',
-      'resources',
-      'settings',
-      'user',
-      'status',
-    ]),
-    isSpecialHeading() {
-      return this.path === 'mainEntity.instanceOf';
-    },
-    largerActions() {
-      if (this.isSpecialHeading && this.expanded === true) {
-        return true;
-      }
-      return false;
-    },
-    item() {
-      const item = cloneDeep(this.inspector.data[this.fragmentId]);
-      if (typeof item === 'undefined' || item === null) {
-        this.$store.dispatch('pushNotification', {
-          type: 'danger',
-          message: `${StringUtil.getUiPhraseByLang('Data is missing a reference, please verify file', this.user.settings.language, this.resources.i18n)}`,
-        });
-        throw new Error('A sibling-item was undefined. This is probably a reference error in the data.');
-      }
-      return item;
-    },
-    fragmentId() {
-      const s = this.id.split('#')[1];
-      if (s === 'it') {
-        return 'mainEntity';
-      }
-      return s;
-    },
-    canCopyTitle() {
-      if (this.isExtractable && !this.item.hasOwnProperty('hasTitle') && this.key === 'instanceOf') {
-        return true;
-      }
-      return false;
-    },
-    isLastAdded() {
-      if (this.inspector.status.lastAdded === this.getPath) {
-        return true;
-      }
-      return false;
-    },
-    isExtracting() {
-      if (this.inspector.extractItemsOnSave.includes(this.path)) {
-        return true;
-      }
-      return false;
-    },
-    getPath() {
-      return this.fragmentId;
-    },
-    isEmpty() {
-      let bEmpty = true;
-      // Check if item has any keys besides @type and _uid. If not, we'll consider it empty.
-      each(this.item, (value, key) => {
-        if (key !== '_uid') {
-          if (key !== '@id') {
-            if (typeof value !== 'undefined') {
-              bEmpty = false;
-            }
-          }
-        }
-      });
-      return bEmpty;
-    },
-    formObj() {
-      return this.item;
-    },
-  },
-  methods: {
-    labelByLang,
-    capitalize,
-    highLightLastAdded() {
-      const element = this.$el;
-      LayoutUtil.ensureInViewport(element);
-    },
-    removeThis() {
-      const changeList = [
-        {
-          path: `${this.parentPath}`,
-          value: null,
-        },
-      ];
-      if (this.fieldKey === 'instanceOf') {
-        changeList.push({
-          path: 'work',
-          value: null,
-        });
-      }
-      this.$store.dispatch('updateInspectorData', {
-        addToHistory: true,
-        changeList: changeList,
-      });
-    },
-    addHighlight(type) {
-      this.highlights.push(type);
-    },
-    removeHighlight(type) {
-      this.highlights.splice(this.highlights.indexOf(type));
-    },
-    expand() {
-      this.expanded = true;
-    },
-    collapse() {
-      this.expanded = false;
-    },
-    toggleExpanded() {
-      if (this.expanded === true) {
-        this.collapse();
-      } else {
-        this.expand();
-      }
-    },
-    openPropertyAdder() {
-      if (this.inspector.status.editing) {
-        this.propertyAdderOpened = true;
-      }
-    },
-    closePropertyAdder() {
-      if (this.inspector.status.editing) {
-        this.propertyAdderOpened = false;
-      }
-    },
-    openExtractDialog() {
-      if (this.inspector.status.editing) {
-        this.extractDialogActive = true;
-      }
-    },
-    closeExtractDialog() {
-      this.extractDialogActive = false;
-      this.extracting = false;
-    },
-    openForm() {
-      this.inEdit = true;
-    },
-    closeForm() {
-      this.inEdit = false;
-    },
-    addFocus() {
-      this.focused = true;
-    },
-    removeFocus() {
-      this.focused = false;
-    },
-    extract() {
-      this.$store.dispatch('addExtractItemOnSave', { path: this.path, item: this.focusData });
-      this.$store.dispatch(
-        'pushNotification',
-        { type: 'success',
-          message: `${StringUtil.getUiPhraseByLang('Link was created', this.user.settings.language, this.resources.i18n)}` },
-      );
-      this.closeExtractDialog();
-    },
-    stopExtracting() {
-      this.$store.dispatch('removeExtractItemOnSave', { path: this.path });
-      this.closeExtractDialog();
-    },
-    checkFocus() {
-      if (this.focused) {
-        this.toggleExpanded();
-      }
-    },
-    replaceWith(value) {
-      const newValue = { '@id': value['@id'] };
-      this.$store.dispatch('addToQuoted', value);
-      const changeList = [
-        {
-          // Remove the link
-          path: `${this.parentPath}`,
-          value: newValue,
-        },
-        {
-          // Remove the #work
-          path: `${this.getPath}`,
-          value: null,
-        },
-      ];
-      this.$store.dispatch('updateInspectorData', {
-        addToHistory: true,
-        changeList: changeList,
-      });
-      this.$store.dispatch(
-        'pushNotification',
-        { type: 'success',
-          message: `${StringUtil.getUiPhraseByLang('Linking was successful', this.user.settings.language, this.resources.i18n)}` },
-      );
-      this.$store.dispatch('setInspectorStatusValue', {
-        property: 'lastAdded',
-        value: `${this.parentPath}.{"@id":"${newValue['@id']}"}`,
-      });
-      this.closeExtractDialog();
-    },
-    expandAllChildren() {
-      this.expandChildren = true;
-      this.$nextTick(this.focusFirstInput);
-    },
-    focusFirstInput() {
-      const firstInput = this.$el.querySelector('.js-itemValueInput');
-      if (firstInput) {
-        firstInput.focus();
-      }
-    },
-    attachHeadingStickyFunctionality() {
-      document.addEventListener('scroll', () => {
-        const scrolled = document.scrollingElement.scrollTop;
-        const heading = this.$refs.heading;
-        const container = this.$refs.container;
-        if (!heading || !container) return;
-        const position = LayoutUtil.getPosition(container).y;
-        const searchBarHeight = document.getElementById('SearchBar').offsetHeight;
-        heading.style.top = `${searchBarHeight}px`;
-
-        if (scrolled > position - searchBarHeight) {
-          heading.classList.add('is-stuck');
-        } else {
-          heading.classList.remove('is-stuck');
-        }
-      });
-    },
-  },
-  watch: {
-    'inspector.event'(val) {
-      if (val.name === 'form-control') {
-        switch (val.value) {
-          case 'collapse-item':
-            if (this.getPath.startsWith(this.inspector.status.focus) // Only expand part of form that has focus
-                || (this.getPath.startsWith('work') && this.inspector.status.focus === 'mainEntity')) {
-              this.collapse();
-            }
-            break;
-          case 'expand-item':
-            if (this.getPath.startsWith(this.inspector.status.focus)
-                || (this.getPath.startsWith('work') && this.inspector.status.focus === 'mainEntity')) {
-              this.expand();
-            }
-            break;
-          default:
-        }
-      }
-    },
-    'inspector.status.editing'(val) {
-      if (!val) {
-        this.closePropertyAdder();
-        this.stopExtracting();
-      }
-    },
-    shouldExpand(val) {
-      if (val) {
-        this.expand();
-        this.expandChildren = true;
-      }
-    },
-    extractDialogActive(val) {
-      if (!val && this.inspector.status.editing) {
-        this.$refs.linkAction.$el.focus();
-      }
-    },
-  },
-  created() {
-    if (this.$store.state.settings.defaultExpandedProperties.includes(this.fieldKey)) {
-      this.expand();
-    }
-  },
-  mounted() {
-    if (this.isSpecialHeading) {
-      this.attachHeadingStickyFunctionality();
-    }
-    if (this.isLastAdded) {
-      this.highLightLastAdded();
-      const fieldAdder = this.$refs.fieldAdder;
-      if (this.isEmpty) {
-        LayoutUtil.enableTabbing();
-        fieldAdder.$refs.adderButton.focus();
-      } else {
-        this.expand();
-        this.expandAllChildren();
-      }
-      setTimeout(() => {
-        if (this.isLastAdded) {
-          this.$store.dispatch('setInspectorStatusValue', { property: 'lastAdded', value: '' });
-        }
-      }, 1000);
-    }
-    if (this.shouldExpand) {
-      this.expand();
-      this.expandChildren = true;
-    }
-    if (this.inspector.status.isNew) {
-      this.expand();
-    }
-  },
-
-  components: {
-    'search-window': SearchWindow,
-    'property-adder': PropertyAdder,
-    'entity-action': EntityAction,
-  },
-};
-</script>
-
-<template>
-  <div
-    class="ItemSibling js-itemLocal"
-    ref="container"
-    :id="`formPath-${path}`"
-    :class="{
-      'is-extracting': isExtracting,
-      'is-highlighted': isNewlyAdded,
-      'highlight-info': highlights.indexOf('info') > -1,
-      'highlight-remove': highlights.indexOf('remove') > -1,
-      'is-expanded': expanded && !isEmpty,
-      'is-extractable': isExtractable,
-    }"
-    :tabindex="isEmpty ? -1 : 0"
-    @keyup.enter="checkFocus()"
-    @focus="addFocus()"
-    @blur="removeFocus()">
-
-    <div
-      class="ItemSibling-heading"
-      ref="heading"
-      @mouseover="isHovered = true"
-      @mouseout="isHovered = false"
-    >
-      <div
-        class="ItemSibling-label"
-        :class="{ 'is-inactive': isEmpty, 'is-locked': isLocked }"
-        @click="toggleExpanded()">
-        <i
-          class="ItemSibling-arrow fa fa-chevron-right"
-          :class="{ 'icon is-disabled': isEmpty }" />
-        <span
-          class="ItemSibling-type"
-          :title="item['@type']">{{ capitalize(labelByLang(item['@type'])) }}:</span>
-        <span class="ItemSibling-collapsedLabel" v-show="!expanded || isEmpty">
-          {{getItemLabel}}
-        </span>
-      </div>
-
-      <div class="ItemSibling-actions">
-        <entity-action
-          v-if="isExtracting"
-          @action="stopExtracting()"
-          @highlight="addHighlight('info')"
-          @dehighlight="removeHighlight('info')"
-          label="Cancel linking"
-          description="Cancel linking"
-          icon="unlink"
-          :parent-hovered="isHovered"
-          :is-large="largerActions"
-        />
-        <entity-action
-          v-if="inspector.status.editing && !isEmbedded && !isLocked && !isCompositional && extractedMainEntity != null && !isExtracting"
-          @action="openExtractDialog(), expand()"
-          @highlight="addHighlight('info')"
-          @dehighlight="removeHighlight('info')"
-          label="Create/link"
-          description="Create/link"
-          icon="link"
-          ref="linkAction"
-          :parent-hovered="isHovered"
-          :is-large="largerActions"
-        />
-
-        <entity-action
-          v-if="!isLocked"
-          @action="openPropertyAdder(), expand()"
-          @highlight="addHighlight('info')"
-          @dehighlight="removeHighlight('info')"
-          label="Property"
-          description="Add property"
-          icon="plus-circle"
-          :parent-hovered="isHovered"
-          :is-large="largerActions"
-        />
-
-        <entity-action
-          v-if="inspector.status.editing && !isLocked"
-          @action="removeThis(true)"
-          @highlight="addHighlight('remove')"
-          @dehighlight="removeHighlight('remove')"
-          label="Remove"
-          description="Remove"
-          icon="trash-o"
-          :parent-hovered="isHovered"
-          :is-large="false"
-        />
-
-        <entity-action
-          :placeholder="true"
-        />
-      </div>
-    </div>
-
-    <ul class="ItemSibling-list js-itemLocalFields" v-show="expanded">
-      <field
-        v-show="k !== '_uid'"
-        v-for="(v, k) in filteredItem"
-        :parent-path="getPath"
-        :entity-type="item['@type']"
-        :is-inner="true"
-        :is-locked="isLocked"
-        :is-removable="false"
-        :parent-key="fieldKey"
-        :parent-index="index"
-        :field-key="k"
-        :field-value="v"
-        :key="k"
-        :expand-children="expandChildren" />
-    </ul>
-
-    <property-adder
-      :entity-type="item['@type']"
-      :allowed="allowedProperties"
-      :isActive="propertyAdderOpened"
-      :path="getPath"
-    />
-
-    <search-window
-      :isActive="extractDialogActive"
-      :can-copy-title="canCopyTitle"
-      :copy-title="copyTitle"
-      :range-full="rangeFull"
-      :range="range"
-      :all-values-from="allValuesFrom"
-      :some-values-from="someValuesFrom"
-      :all-search-types="allSearchTypes"
-      :entity-type="item['@type']"
-      :field-key="fieldKey"
-      :extracting="extracting"
-      :extractable="isExtractable"
-      :item-info="extractedMainEntity"
-      :index="index"
-      @extract="extract"
-      @replace-with="replaceWith"
-    />
-  </div>
-
-</template>
-
-<style lang="less">
-
-.ItemSibling {
-  width: 100%;
-  min-width: 0;
-  padding: 0;
-  position: relative;
-  flex: 1 100%;
-  border-radius: 4px;
-
-  &.highlight-info {
-    .is-stuck, .is-sticky {
-      background-color: @form-mark;
-    }
-  }
-  &.highlight-remove {
-    .is-stuck, .is-sticky {
-      background-color: @form-remove;
-    }
-  }
-
-  &-heading {
-    display: flex;
-    align-items: center;
-    height: 2.5em;
-    width: 100%;
-    font-weight: normal;
-    background-color: inherit;
-    box-shadow: 0px 6px 5px -5px rgba(0, 0, 0, 0);
-    transition: box-shadow 0.25s ease;
-    z-index: 850;
-    &.is-stuck, &.is-sticky {
-      box-shadow: 0px 6px 5px -5px #0000002b;
-      position: sticky;
-      background-color: #fff;
-    }
-    .icon-hover();
-  }
-
-  &.highlight-info {
-    background-color: @form-mark;
-  }
-  &.highlight-remove {
-    background-color: @form-remove;
-  }
-
-  &.has-failed-validations {
-    outline: 1px dotted red;
-  }
-
-  &-label {
-    &.is-locked {
-      margin: 0;
-    }
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    overflow: hidden;
-
-    &.is-inactive {
-      pointer-events: none;
-    }
-  }
-
-  &-type {
-    margin: 0 0.5rem;
-    white-space: nowrap;
-  }
-
-  &-collapsedLabel {
-    justify-content: space-between;
-    align-items: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &-collapsedText {
-    display: inline;
-  }
-
-  &-arrow {
-    transition: all 0.2s ease;
-    padding: 0 2px;
-    font-size: 14px;
-    color: @grey-darker-transparent;
-
-    .ItemLocal-label:hover & {
-      color: @black
-    }
-  }
-
-  &-list {
-    flex: 1 100%;
-    position: relative;
-    padding: 0 0 0 20px;
-
-    > .is-expanded & {
-      margin: 10px 0 0;
-    }
-  }
-
-  &-actions {
-    div:not(:first-child) {
-      margin-left: 0.4rem;
-    }
-    display: flex;
-    align-items: baseline;
-  }
-
-  .ManagerMenu {
-    li > a {
-      cursor: pointer;
-      padding: 3px 5px;
-    }
-    &-menuList {
-      display: block;
-      padding: 5px 0;
-    }
-    &-menuItem {
-      & a {
-        display: flex;
-        align-items: center;
-        padding: 5px 15px;
-        color: @grey-darker;
-      }
-
-    }
-    &-menuLink {
-      cursor: pointer;
-      & i {
-        margin-right: 5px;
-      }
-    }
-  }
-
-  &-action {
-    display: inline-block;
-  }
-
-  &.is-marked {
-    background-color: @form-mark;
-  }
-
-  &.is-removeable {
-    background-color: @form-remove;
-  }
-
-  &.is-expanded >
-  .ItemLocal-heading >
-  .ItemLocal-label >
-  .ItemLocal-arrow {
-    transform:rotate(90deg);
-    transform-origin: center;
-  }
-
-  &.is-highlighted {
-    background-color: @form-highlight;
-  }
-}
-
-</style>

From 88196879ca84049977feb19ee20717b649c625c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Olov=20Ylinenp=C3=A4=C3=A4?= <olov.ylinenpaa@kb.se>
Date: Fri, 16 Aug 2024 09:33:06 +0200
Subject: [PATCH 2/5] Remove dead code

---
 vue-client/src/components/inspector/field.vue | 28 -------------------
 .../src/components/inspector/item-local.vue   | 10 -------
 2 files changed, 38 deletions(-)

diff --git a/vue-client/src/components/inspector/field.vue b/vue-client/src/components/inspector/field.vue
index 9c8fe2653..16062b93f 100644
--- a/vue-client/src/components/inspector/field.vue
+++ b/vue-client/src/components/inspector/field.vue
@@ -130,7 +130,6 @@ export default {
       activeModal: false,
       removeHover: false,
       pasteHover: false,
-      foundChip: false,
       removed: false,
       uniqueIds: [],
     };
@@ -374,15 +373,6 @@ export default {
       }
       return `${this.parentPath}.${this.fieldKey}`;
     },
-    isMarc() {
-      return this.fieldKey.startsWith('marc:');
-    },
-    isChild() {
-      if (this.parentPath !== 'mainEntity') {
-        return true;
-      }
-      return false;
-    },
     isLangMapWithPartner() {
       return this.isLangMap && this.hasProp;
     },
@@ -584,17 +574,6 @@ export default {
       }
       return false;
     },
-    isInGraph(o) {
-      const data = this.inspector.data;
-      for (const point in data) {
-        if (data[point] !== null) {
-          if (data[point]['@id'] === o['@id']) {
-            return true;
-          }
-        }
-      }
-      return false;
-    },
     isEmbedded(o) {
       const type = o['@type'];
       if (!type || typeof type === 'undefined') {
@@ -602,13 +581,6 @@ export default {
       }
       return VocabUtil.isEmbedded(type, this.resources.vocab, this.settings);
     },
-    isChip(item) {
-      if (this.getDatatype(item) === 'entity') {
-        this.foundChip = true;
-        return true;
-      }
-      return false;
-    },
     highLightLastAdded() {
       if (this.isLastAdded === true) {
         if (this.fieldValue === null || (isArray(this.fieldValue) && this.fieldValue.length === 0)) {
diff --git a/vue-client/src/components/inspector/item-local.vue b/vue-client/src/components/inspector/item-local.vue
index 687af16be..e0968cbdc 100644
--- a/vue-client/src/components/inspector/item-local.vue
+++ b/vue-client/src/components/inspector/item-local.vue
@@ -69,7 +69,6 @@ export default {
   },
   data() {
     return {
-      inEdit: false,
       showCardInfo: false,
       extractDialogActive: false,
       propertyAdderOpened: false,
@@ -225,9 +224,6 @@ export default {
         this.expand();
       }
     },
-    isHolding() {
-      return this.inspector.data.mainEntity['@type'] === 'Item';
-    },
     isHistoryView() {
       return this.diff !== null;
     },
@@ -249,12 +245,6 @@ export default {
     closeExtractDialog() {
       this.extractDialogActive = false;
     },
-    openForm() {
-      this.inEdit = true;
-    },
-    closeForm() {
-      this.inEdit = false;
-    },
     addFocus() {
       this.focused = true;
     },

From 81208b0c7b5d2f575b0b6bd95f8d8a8d1eed25cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Olov=20Ylinenp=C3=A4=C3=A4?= <olov.ylinenpaa@kb.se>
Date: Mon, 19 Aug 2024 17:04:12 +0200
Subject: [PATCH 3/5] Add id-pill component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the id-fnurgel pill seen in the top right corner of cards to its
own component. Use it in item-local as well.

Co-authored-by: Lars Rosenström <lars.rosenstrom@kb.se>
---
 .../src/components/inspector/item-local.vue   |  10 ++
 .../src/components/shared/entity-summary.vue  |  82 ++-----------
 vue-client/src/components/shared/id-pill.vue  | 110 ++++++++++++++++++
 3 files changed, 128 insertions(+), 74 deletions(-)
 create mode 100644 vue-client/src/components/shared/id-pill.vue

diff --git a/vue-client/src/components/inspector/item-local.vue b/vue-client/src/components/inspector/item-local.vue
index e0968cbdc..029480a11 100644
--- a/vue-client/src/components/inspector/item-local.vue
+++ b/vue-client/src/components/inspector/item-local.vue
@@ -9,6 +9,7 @@ import * as LayoutUtil from '@/utils/layout';
 import { translatePhrase, labelByLang, capitalize } from '@/utils/filters';
 import PropertyAdder from '@/components/inspector/property-adder.vue';
 import EntityAction from '@/components/inspector/entity-action.vue';
+import IdPill from '@/components/shared/id-pill.vue';
 import SearchWindow from './search-window.vue';
 import ItemMixin from '../mixins/item-mixin.vue';
 import LensMixin from '../mixins/lens-mixin.vue';
@@ -149,6 +150,9 @@ export default {
       }
       return false;
     },
+    hasId() {
+      return this.item.hasOwnProperty('@id');
+    },
     getPath() {
       if (this.inArray) {
         return `${this.parentPath}[${this.index}]`;
@@ -445,6 +449,7 @@ export default {
     'property-adder': PropertyAdder,
     'search-window': SearchWindow,
     'entity-action': EntityAction,
+    'id-pill': IdPill,
   },
 };
 </script>
@@ -510,6 +515,11 @@ export default {
           <i class="fa fa-plus-circle icon--sm icon-added" />
         </div>
       </div>
+      <id-pill
+        v-if="this.hasId"
+        :uri="this.recordId"
+        :isLibrisResource="this.isLibrisResource"
+      />
 
       <div class="ItemLocal-actions">
         <entity-action
diff --git a/vue-client/src/components/shared/entity-summary.vue b/vue-client/src/components/shared/entity-summary.vue
index dffc8da37..cba0b7df0 100644
--- a/vue-client/src/components/shared/entity-summary.vue
+++ b/vue-client/src/components/shared/entity-summary.vue
@@ -9,12 +9,14 @@ import OverflowMixin from '@/components/mixins/overflow-mixin.vue';
 import EncodingLevelIcon from '@/components/shared/encoding-level-icon.vue';
 import TypeIcon from '@/components/shared/type-icon.vue';
 import SummaryNode from '@/components/shared/summary-node.vue';
+import IdPill from '@/components/shared/id-pill.vue';
 import LensMixin from '../mixins/lens-mixin.vue';
 
 export default {
   mixins: [LensMixin, OverflowMixin],
   name: 'entity-summary',
   components: {
+    IdPill,
     EncodingLevelIcon,
     SummaryNode,
     TypeIcon,
@@ -109,9 +111,6 @@ export default {
   },
   data() {
     return {
-      idHover: false,
-      recentlyCopiedId: false,
-      failedCopyId: false,
       defaultSettings: {
         show: false,
         styling: 'grey',
@@ -145,24 +144,9 @@ export default {
       }
       return false;
     },
-    idAsFnurgel() {
-      if (this.uri) {
-        const id = this.uri;
-        const fnurgel = RecordUtil.extractFnurgel(id);
-        if (fnurgel && this.isLibrisResource) {
-          return fnurgel;
-        }
-        const cleaned = id.replace('https://', '').replace('http://', '');
-        return cleaned;
-      }
-      return null;
-    },
     hiddenDetailsNumber() {
       return this.getSummary.info.length - this.keyDisplayLimit;
     },
-    idTooltipText() {
-      return StringUtil.getUiPhraseByLang('Copy ID', this.user.settings.language, this.resources.i18n);
-    },
     isReplacedBy() {
       const info = this.getSummary.info;
       const infoObj = {};
@@ -285,18 +269,6 @@ export default {
     labelByLang,
     convertResourceLink,
     capitalize,
-    copyFnurgel() {
-      const self = this;
-      this.$copyText(this.uri).then(() => {
-        self.recentlyCopiedId = true;
-        setTimeout(() => {
-          self.recentlyCopiedId = false;
-        }, 1000);
-      }, (e) => {
-        self.failedCopyId = true;
-        console.warn(e);
-      });
-    },
     importThis() {
       this.$emit('import-this');
     },
@@ -332,18 +304,11 @@ export default {
         {{ topBarInformation }} {{ isLocal ? '{lokal entitet}' : '' }}
         <span class="EntitySummary-sourceLabel" v-if="database">{{ database }}</span>
       </div>
-      <div
-        v-if="idAsFnurgel && excludeComponents.indexOf('id') < 0"
-        class="EntitySummary-id"
-        :class="{ 'recently-copied': recentlyCopiedId }"
-        @mouseover="idHover = true"
-        @mouseout="idHover = false">
-        <i
-          v-tooltip.top="idTooltipText"
-          class="fa fa-copy EntitySummary-idCopyIcon"
-          :class="{ collapsedIcon: !idHover || recentlyCopiedId }"
-          @click.stop="copyFnurgel" />{{ idAsFnurgel }}
-      </div>
+      <id-pill
+        v-if="!excludeComponents.includes('id')"
+        :uri="this.recordId"
+        :isLibrisResource="this.isLibrisResource"
+      />
     </div>
 
     <div class="EntitySummary-info">
@@ -442,7 +407,7 @@ export default {
     display: flex;
   }
 
-  &-type, &-id {
+  &-type {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -461,37 +426,6 @@ export default {
     flex-grow: 2;
     flex-basis: 50%;
   }
-  &-id {
-    flex-grow: 0;
-    text-align: right;
-    text-transform: none;
-    color: @grey-very-dark-transparent;
-    background-color: @badge-color-transparent;
-    transition: background-color 0.5s ease;
-    letter-spacing: 0.5px;
-    font-size: 1.2rem;
-    font-weight: 400;
-    padding: 0 0.75em;
-    border-radius: 1em;
-
-    &.recently-copied {
-      background-color: @brand-success;
-      color: @white;
-    }
-  }
-  &-idCopyIcon {
-    transition: all 0.25s ease;
-    margin: 0 0.25em 0 -0.25em;
-    overflow: hidden;
-    width: 1.2em;
-    opacity: 1;
-    cursor: pointer;
-    &.collapsedIcon {
-      margin: 0 0 0 0;
-      width: 0;
-      opacity: 0;
-    }
-  }
 
   &-sourceLabel {
     border: 1px solid;
diff --git a/vue-client/src/components/shared/id-pill.vue b/vue-client/src/components/shared/id-pill.vue
new file mode 100644
index 000000000..0c5f4c138
--- /dev/null
+++ b/vue-client/src/components/shared/id-pill.vue
@@ -0,0 +1,110 @@
+<script>
+import * as StringUtil from 'lxljs/string';
+import * as RecordUtil from '@/utils/record';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'id-pill',
+  props: {
+    uri: {
+      type: String,
+      default: '',
+    },
+    isLibrisResource: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      idHover: false,
+      recentlyCopiedId: false,
+      failedCopyId: false,
+    };
+  },
+  methods: {
+    copyFnurgel() {
+      const self = this;
+      this.$copyText(this.uri).then(() => {
+        self.recentlyCopiedId = true;
+        setTimeout(() => {
+          self.recentlyCopiedId = false;
+        }, 1000);
+      }, (e) => {
+        self.failedCopyId = true;
+        console.warn(e);
+      });
+    },
+  },
+  computed: {
+    ...mapGetters([
+      'user',
+      'resources',
+    ]),
+    idAsFnurgel() {
+      if (this.uri) {
+        const id = this.uri;
+        const fnurgel = RecordUtil.extractFnurgel(id);
+        if (fnurgel && this.isLibrisResource) {
+          return fnurgel;
+        }
+        const cleaned = id.replace('https://', '').replace('http://', '');
+        return cleaned;
+      }
+      return null;
+    },
+    idTooltipText() {
+      return StringUtil.getUiPhraseByLang('Copy ID', this.user.settings.language, this.resources.i18n);
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="idAsFnurgel"
+    class="IdPill"
+    :class="{ 'recently-copied': recentlyCopiedId }"
+    @mouseover="idHover = true"
+    @mouseout="idHover = false">
+    <i
+      v-tooltip.top="idTooltipText"
+      class="fa fa-copy IdPill-idCopyIcon"
+      :class="{ collapsedIcon: !idHover || recentlyCopiedId }"
+      @click.stop="copyFnurgel" />{{ idAsFnurgel }}
+  </div>
+</template>
+
+<style lang="less">
+.IdPill {
+  flex-grow: 0;
+  text-align: right;
+  text-transform: none;
+  color: @grey-very-dark-transparent;
+  background-color: @badge-color-transparent;
+  transition: background-color 0.5s ease;
+  letter-spacing: 0.5px;
+  font-size: 1.2rem;
+  font-weight: 400;
+  padding: 0 0.75em;
+  border-radius: 1em;
+
+  &.recently-copied {
+    background-color: @brand-success;
+    color: @white;
+  }
+  &-idCopyIcon {
+    transition: all 0.25s ease;
+    margin: 0 0.25em 0 -0.25em;
+    overflow: hidden;
+    width: 1.2em;
+    opacity: 1;
+    cursor: pointer;
+    &.collapsedIcon {
+      margin: 0 0 0 0;
+      width: 0;
+      opacity: 0;
+    }
+  }
+}
+</style>

From bcf023b19f09e5f9205de6d74c34adc6bb714b8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Olov=20Ylinenp=C3=A4=C3=A4?= <olov.ylinenpaa@kb.se>
Date: Mon, 19 Aug 2024 17:06:49 +0200
Subject: [PATCH 4/5] Add support for linked SingleItem in holdings

---
 lxljs/vocab.js                                |  3 +
 vue-client/src/components/inspector/field.vue | 30 +++----
 .../src/components/inspector/item-entity.vue  | 10 +--
 .../src/components/inspector/item-local.vue   | 90 +++++++++++++++++--
 .../inspector/reverse-relations.vue           |  3 +-
 .../src/components/inspector/toolbar.vue      | 16 ++--
 .../src/components/mixins/item-mixin.vue      | 26 +++---
 vue-client/src/resources/json/i18n.json       |  5 +-
 vue-client/src/settings.js                    |  3 +
 vue-client/src/store.js                       | 17 +++-
 vue-client/src/utils/data.js                  |  4 +
 vue-client/src/utils/http.js                  |  9 ++
 vue-client/src/utils/record.js                | 58 +++++++++++-
 vue-client/src/utils/shelfmark.js             |  8 +-
 vue-client/src/views/Inspector.vue            | 87 ++++++++++++++++--
 15 files changed, 309 insertions(+), 60 deletions(-)

diff --git a/lxljs/vocab.js b/lxljs/vocab.js
index b0fe7b396..e951140b2 100644
--- a/lxljs/vocab.js
+++ b/lxljs/vocab.js
@@ -172,6 +172,9 @@ export function getRecordType(mainEntityType, vocab, context) {
     // Mostly added as to not throw an error while the data is being picked up.
     return null;
   }
+  if (isSubClassOf(mainEntityType, 'SingleItem', vocab, context)) {
+    return 'SingleItem';
+  }
   if (isSubClassOf(mainEntityType, 'Item', vocab, context)) {
     return 'Item';
   }
diff --git a/vue-client/src/components/inspector/field.vue b/vue-client/src/components/inspector/field.vue
index 16062b93f..b99183970 100644
--- a/vue-client/src/components/inspector/field.vue
+++ b/vue-client/src/components/inspector/field.vue
@@ -266,7 +266,8 @@ export default {
         this.resources.context,
         this.resources.vocabClasses,
       ).map((item) => StringUtil.getCompactUri(item, this.resources.context));
-      return fetchedRange;
+      const unselectableTypes = Object.values(this.settings.extractableMappedTypes);
+      return fetchedRange.filter((t) => !unselectableTypes.includes(t));
     },
     allSearchTypes() {
       if (this.allValuesFrom.length > 0) {
@@ -387,12 +388,10 @@ export default {
       );
     },
     isCompositional() {
-      if (this.keyAsVocabProperty && this.keyAsVocabProperty.hasOwnProperty('category')) {
-        if (this.keyAsVocabProperty.category['@id'] === 'https://id.kb.se/vocab/compositional') {
-          return true;
-        }
-      }
-      return false;
+      return VocabUtil.hasCategory(this.keyAsVocabProperty, 'compositional', this.resources);
+    },
+    isHistoryView() {
+      return this.diff !== null;
     },
     hasSingleValue() {
       if (!isArray(this.fieldValue) || this.fieldValue.length === 1) {
@@ -548,12 +547,12 @@ export default {
       if (this.fieldKey === '@type' || VocabUtil.getContextValue(this.fieldKey, '@type', this.resources.context) === '@vocab') {
         return 'vocab';
       }
+      if (this.isPlainObject(o) && (!this.isLinked(o) || this.isInlined(o))) {
+        return 'local';
+      }
       if (this.isPlainObject(o) && this.isLinked(o)) {
         return 'entity';
       }
-      if (this.isPlainObject(o) && !this.isLinked(o)) {
-        return 'local';
-      }
       if (this.range && this.range.length > 0 && this.range.every((r) => Object.keys(VocabUtil.XSD_NUMERIC_TYPES).includes(r))) {
         return 'numeric';
       }
@@ -569,10 +568,11 @@ export default {
       if (typeof o === 'undefined') {
         throw new Error('Cannot check link status of undefined object.');
       }
-      if (o.hasOwnProperty('@id') && !o.hasOwnProperty('@type')) {
-        return true;
-      }
-      return false;
+      return o.hasOwnProperty('@id');
+    },
+    isInlined(o) {
+      // FIXME
+      return this.isLinked(o) && Object.keys(o).length > 1 && this.isCompositional && !this.isHistoryView;
     },
     isEmbedded(o) {
       const type = o['@type'];
@@ -915,7 +915,7 @@ export default {
           :diff="diff"
           :parent-path="path" />
 
-        <!-- Not linked, local child objects -->
+        <!-- Not linked, local child objects OR inlined linked objects-->
         <item-local
           :data-parent="path"
           v-if="getDatatype(item) == 'local'"
diff --git a/vue-client/src/components/inspector/item-entity.vue b/vue-client/src/components/inspector/item-entity.vue
index 419cdc5d6..71e904490 100644
--- a/vue-client/src/components/inspector/item-entity.vue
+++ b/vue-client/src/components/inspector/item-entity.vue
@@ -78,6 +78,9 @@ export default {
     isCardWithData() {
       return this.isCard && this.focusData && Object.keys(this.focusData).length > 1;
     },
+    isHistoryView() {
+      return this.diff != null;
+    },
   },
   watch: {
     'inspector.event'(val) {
@@ -128,9 +131,6 @@ export default {
     removeFocus() {
       this.focused = false;
     },
-    isHistoryView() {
-      return this.diff != null;
-    },
   },
   components: {
     Menu,
@@ -138,7 +138,7 @@ export default {
     ReverseRelations,
   },
   created() {
-    if (this.$store.state.settings.defaultExpandedProperties.includes(this.fieldKey)) {
+    if (this.$store.state.settings.defaultExpandedProperties.includes(this.fieldKey) && !this.isHistoryView) {
       this.expand();
     }
   },
@@ -151,7 +151,7 @@ export default {
           }
         }).catch((error) => console.error(error));
       }
-      if (this.isExpanded && !this.isHistoryView()) {
+      if (this.isExpanded && !this.isHistoryView) {
         this.expand();
       }
       if (this.isNewlyAdded) {
diff --git a/vue-client/src/components/inspector/item-local.vue b/vue-client/src/components/inspector/item-local.vue
index 029480a11..5335dcb27 100644
--- a/vue-client/src/components/inspector/item-local.vue
+++ b/vue-client/src/components/inspector/item-local.vue
@@ -6,6 +6,8 @@ import * as VocabUtil from 'lxljs/vocab';
 import * as DisplayUtil from 'lxljs/display';
 import * as StringUtil from 'lxljs/string';
 import * as LayoutUtil from '@/utils/layout';
+import * as HttpUtil from "@/utils/http";
+import { DELETE_ON_SAVE } from '@/store';
 import { translatePhrase, labelByLang, capitalize } from '@/utils/filters';
 import PropertyAdder from '@/components/inspector/property-adder.vue';
 import EntityAction from '@/components/inspector/entity-action.vue';
@@ -150,7 +152,18 @@ export default {
       }
       return false;
     },
-    hasId() {
+    canExtractMappedType() {
+      // TODO open up for all users at some point
+      if (this.user.getActiveLibraryUri() !== 'https://libris.kb.se/library/S') {
+        return false;
+      }
+
+      return this.extractableMappedType && !this.isInlinedRecord;
+    },
+    extractableMappedType() {
+      return this.settings.extractableMappedTypes[this.item['@type']];
+    },
+    isInlinedRecord() {
       return this.item.hasOwnProperty('@id');
     },
     getPath() {
@@ -290,7 +303,13 @@ export default {
     },
     cloneThis() {
       const parentData = cloneDeep(get(this.inspector.data, this.parentPath));
-      parentData.push(this.item);
+      if (this.isInlinedRecord) {
+        const o = cloneDeep(this.item);
+        delete o['@id'];
+        parentData.push(o);
+      } else {
+        parentData.push(this.item);
+      }
 
       this.$store.dispatch('setInspectorStatusValue', {
         property: 'lastAdded',
@@ -322,6 +341,13 @@ export default {
     copyThis() {
       const userStorage = cloneDeep(this.userStorage);
       userStorage.copyClipboard = this.item;
+      if (this.isInlinedRecord) {
+        const o = cloneDeep(this.item);
+        delete o['@id'];
+        userStorage.copyClipboard = o;
+      } else {
+        userStorage.copyClipboard = this.item;
+      }
       this.$store.dispatch('setUserStorage', userStorage);
       this.$store.dispatch(
         'pushNotification',
@@ -346,6 +372,24 @@ export default {
         }
       });
     },
+    removeThisAndDeleteLinked() {
+      HttpUtil.getRelatedRecords({ o: this.item['@id'], _limit: 0 }, this.settings.apiPath)
+        .then((response) => {
+          // Before queuing the deletion of the linked record, check if there are any other
+          // records linking to it. If there are other links we won't be able to delete it.
+          // We assume that if there is exactly one link it is our own link.
+          if (response.totalItems === 1) {
+            const extraChangeList = [{ path: DELETE_ON_SAVE, id: this.item['@id'], type: this.item['@type'] }];
+            this.removeThis(true, extraChangeList);
+          } else {
+            this.$store.dispatch('pushNotification', { type: 'danger', message: `${translatePhrase('Forbidden')} - ${translatePhrase('This entity may have active links')}` });
+          }
+        }, (error) => {
+          const msg = 'Error checking for relations';
+          this.$store.dispatch('pushNotification', { type: 'danger', message:`${translatePhrase(msg)} - ${error?.statusText || ''}` });
+          console.log(msg, error);
+        });
+    },
   },
   watch: {
     'inspector.status.editing'(val) {
@@ -499,7 +543,7 @@ export default {
           :title="item['@type']">
           <span class="ItemLocal-extraction-label" v-if="isExtracting">
             <i class="fa fa-scissors" />
-            {{ translatePhrase("The work is extracted once the instance is saved") }}
+            {{ translatePhrase("Extracted when the record is saved") }}
           </span>
           <span v-if="!expanded || !isExtracting">
             {{ capitalize(labelByLang(item['@type'])) }}:
@@ -516,7 +560,7 @@ export default {
         </div>
       </div>
       <id-pill
-        v-if="this.hasId"
+        v-if="this.isInlinedRecord"
         :uri="this.recordId"
         :isLibrisResource="this.isLibrisResource"
       />
@@ -559,7 +603,7 @@ export default {
         />
 
         <entity-action
-          v-if="inspector.status.editing && !isLocked"
+          v-if="inspector.status.editing && !isLocked && !isInlinedRecord && !isExtracting"
           @action="removeThis(true)"
           @highlight="addHighlight('remove')"
           @dehighlight="removeHighlight('remove')"
@@ -570,6 +614,30 @@ export default {
           :is-large="false"
         />
 
+        <entity-action
+          v-if="inspector.status.editing && !isLocked && isInlinedRecord"
+          @action="removeThisAndDeleteLinked()"
+          @highlight="addHighlight('remove')"
+          @dehighlight="removeHighlight('remove')"
+          label="Remove entity"
+          :description="`${translatePhrase('Remove')} ${capitalize(labelByLang(item['@type']))}`"
+          icon="trash-o"
+          :parent-hovered="isHovered"
+          :is-large="false"
+        />
+
+        <entity-action
+          v-if="inspector.status.editing && !isLocked && isInlinedRecord"
+          @action="removeThis(true)"
+          @highlight="addHighlight('remove')"
+          @dehighlight="removeHighlight('remove')"
+          label="Remove link to"
+          :description="`${translatePhrase('Remove link to')} ${capitalize(labelByLang(item['@type']))}`"
+          icon="times-circle"
+          :parent-hovered="isHovered"
+          :is-large="false"
+        />
+
         <entity-action
           v-if="inspector.status.editing && !isLocked"
           @action="managerMenuOpen ? closeManagerMenu() : openManagerMenu()"
@@ -608,6 +676,16 @@ export default {
                 {{ translatePhrase("Duplicate entity") }}
               </a>
             </li>
+            <li class="ManagerMenu-menuItem" v-if="canExtractMappedType">
+              <a
+                tabindex="0"
+                class="ManagerMenu-menuLink"
+                @keyup.enter="extract(), closeManagerMenu()"
+                @click="extract(), closeManagerMenu()">
+                <i class="fa fa-fw fa-plus" aria-hidden="true" />
+                {{ translatePhrase("Extract") }} {{ capitalize(labelByLang(extractableMappedType)) }}
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -870,7 +948,7 @@ export default {
   &.is-extracting {
     background-color: @form-extracting !important;
     border: 1px dashed @brand-primary;
-    
+
     &.highlight-mark {
       border-color: @brand-primary !important;
     }
diff --git a/vue-client/src/components/inspector/reverse-relations.vue b/vue-client/src/components/inspector/reverse-relations.vue
index 4fc21dc84..9fbc051dc 100644
--- a/vue-client/src/components/inspector/reverse-relations.vue
+++ b/vue-client/src/components/inspector/reverse-relations.vue
@@ -6,6 +6,7 @@ import * as StringUtil from 'lxljs/string';
 import * as MathUtil from '@/utils/math';
 import * as HttpUtil from '@/utils/http';
 import { translatePhrase } from '@/utils/filters';
+import { isLink } from '@/utils/data';
 import Spinner from '@/components/shared/spinner.vue';
 import RoundedButton from '@/components/shared/rounded-button.vue';
 import CreateItemButton from '@/components/inspector/create-item-button.vue';
@@ -112,8 +113,6 @@ export default {
       return this.myHolding !== null;
     },
     myHolding() {
-      const isLink = (o) => Object.keys(o).length === 1 && Object.keys(o).includes('@id');
-
       if (this.user.isLoggedIn) {
         // Check if my sigel has holding
         const libraryUri = this.user.getActiveLibraryUri();
diff --git a/vue-client/src/components/inspector/toolbar.vue b/vue-client/src/components/inspector/toolbar.vue
index d6e2dee31..6b913c371 100644
--- a/vue-client/src/components/inspector/toolbar.vue
+++ b/vue-client/src/components/inspector/toolbar.vue
@@ -348,7 +348,7 @@ export default {
       'status',
     ]),
     isMyHolding() {
-      if (this.recordType !== 'Item') {
+      if (!VocabUtil.isSubClassOf(this.recordType, 'Item', this.resources.vocab, this.resources.context)) {
         return false;
       }
       if (this.inspector.data.mainEntity.heldBy && this.inspector.data.mainEntity.heldBy['@id'] === this.activeSigelId) {
@@ -366,7 +366,7 @@ export default {
     },
     compiledIsAvailable() {
       if (
-        (this.recordType === 'Instance' || this.isMyHolding)
+        (this.recordType === 'Instance' || (this.isMyHolding && this.inspector.data.mainEntity.itemOf))
         && this.hasSigel
         && !this.inspector.status.editing
         && this.user.email !== ''
@@ -408,11 +408,13 @@ export default {
       if (record['@type'] !== 'Record') {
         return false;
       }
-      if (mainEntity['@type'] === 'Item') {
-        if (this.isMyHolding || this.user.isGlobalRegistrant()) {
-          return true;
-        }
-        return false;
+      if (VocabUtil.isSubClassOf(
+        mainEntity['@type'],
+        'Item',
+        this.resources.vocab,
+        this.resources.context,
+      )) {
+        return this.isMyHolding || this.user.isGlobalRegistrant();
       }
       if (VocabUtil.isSubClassOf(
         mainEntity['@type'],
diff --git a/vue-client/src/components/mixins/item-mixin.vue b/vue-client/src/components/mixins/item-mixin.vue
index 0a48ab42d..d6201af64 100644
--- a/vue-client/src/components/mixins/item-mixin.vue
+++ b/vue-client/src/components/mixins/item-mixin.vue
@@ -5,6 +5,7 @@ import * as VocabUtil from 'lxljs/vocab';
 import * as StringUtil from 'lxljs/string';
 import * as DataUtil from '@/utils/data';
 import * as RecordUtil from '@/utils/record';
+import { DELETE_ON_SAVE } from "@/store";
 
 export default {
   props: {
@@ -36,35 +37,32 @@ export default {
     };
   },
   methods: {
-    removeThis(animate = false) {
+    removeThis(animate = false, extraChangeList = []) {
       let parentValue = cloneDeep(get(this.inspector.data, this.parentPath));
       if (isArray(parentValue)) {
         parentValue.splice(this.index, 1);
       } else {
         parentValue = null;
       }
+      const changeList = [
+        {
+          path: `${this.parentPath}`,
+          value: parentValue,
+        },
+      ];
+      changeList.push(...extraChangeList);
       if (animate) {
         this.$store.dispatch('setInspectorStatusValue', { property: 'removing', value: true });
         this.removed = true;
         setTimeout(() => {
           this.$store.dispatch('updateInspectorData', {
-            changeList: [
-              {
-                path: `${this.parentPath}`,
-                value: parentValue,
-              },
-            ],
+            changeList: changeList,
             addToHistory: true,
           });
         }, 500);
       } else {
         this.$store.dispatch('updateInspectorData', {
-          changeList: [
-            {
-              path: `${this.parentPath}`,
-              value: parentValue,
-            },
-          ],
+          changeList: changeList,
           addToHistory: true,
         });
       }
@@ -132,7 +130,7 @@ export default {
       return `${this.entityType}.${this.fieldKey}`;
     },
     extractedMainEntity() {
-      return RecordUtil.getCleanedExtractedData(this.focusData, this.inspector.data, this.resources);
+      return RecordUtil.getCleanedExtractedData(this.focusData, this.inspector.data, this.resources, this.settings);
     },
     isExtractable() {
       if (this.isCompositional === true) {
diff --git a/vue-client/src/resources/json/i18n.json b/vue-client/src/resources/json/i18n.json
index f6bd03038..2cdb71a98 100644
--- a/vue-client/src/resources/json/i18n.json
+++ b/vue-client/src/resources/json/i18n.json
@@ -128,6 +128,8 @@
     "Save and stop editing": "Spara och sluta redigera",
     "Create record": "Skapa post",
     "Remove": "Ta bort",
+    "Remove entity": "Ta bort entitet",
+    "Remove link to": "Ta bort länk till",
     "Search" : "Sök",
     "Searching": "Söker",
     "E-mail": "E-post",
@@ -242,12 +244,13 @@
     "Link was created and title was copied from instance": "Länkning påbörjades och titel kopierades från instans",
     "Linking was successful": "Länkning lyckades",
     "Extract entity": "Bryt ut entitet",
+    "Extract": "Bryt ut",
     "Create/link": "Skapa/länka",
     "Cancel linking": "Avbryt utbrytning",
     "Yes, start linking": "Ja, påbörja utbrytning",
     "Do you want to create linkable": "Vill du skapa länkbart",
     "The local entity will be extracted and linked": "Den lokala entiteten bryts ut och länkas",
-    "The work is extracted once the instance is saved": "Verket bryts ut när instansen sparas",
+    "Extracted when the record is saved": "Bryts ut när posten sparas",
     "Yes, create": "Ja, skapa",
     "Create": "Skapa",
     "Creating link": "Skapar länk",
diff --git a/vue-client/src/settings.js b/vue-client/src/settings.js
index 96f83f792..ed69ff1e2 100644
--- a/vue-client/src/settings.js
+++ b/vue-client/src/settings.js
@@ -31,6 +31,9 @@ export default {
     // 'Concept', - Blocking this per request of MSS
     'Work',
   ],
+  extractableMappedTypes: {
+    Item: 'SingleItem',
+  },
   showTypeChangerFor: [
     'Instance',
     'Work',
diff --git a/vue-client/src/store.js b/vue-client/src/store.js
index e5edb8795..929f322a4 100644
--- a/vue-client/src/store.js
+++ b/vue-client/src/store.js
@@ -8,6 +8,7 @@ import * as User from '@/models/user';
 import settings from './settings';
 
 const EXTRACT_ON_SAVE = '__EXTRACT_ON_SAVE__';
+export const DELETE_ON_SAVE = '__DELETE_ON_SAVE__';
 
 const store = createStore({
   state: {
@@ -73,6 +74,7 @@ const store = createStore({
       changeHistory: [],
       event: [],
       magicShelfMarks: [],
+      otherRecordsToDeleteOnSave: [],
       extractItemsOnSave: [],
     },
     status: {
@@ -193,6 +195,12 @@ const store = createStore({
       if (payload.addToHistory) {
         const changes = [];
         each(payload.changeList, (node) => {
+          if (node.path === DELETE_ON_SAVE) {
+            state.inspector.otherRecordsToDeleteOnSave.push({ id: node.id, type: node.type });
+            changes.push(node);
+            return;
+          }
+
           let oldValue;
           if (node.path === '') {
             oldValue = inspectorData;
@@ -273,6 +281,7 @@ const store = createStore({
     },
     flushChangeHistory(state) {
       state.inspector.changeHistory = [];
+      state.inspector.otherRecordsToDeleteOnSave = [];
     },
     setChangeHistory(state, data) {
       state.inspector.changeHistory = data;
@@ -731,6 +740,12 @@ const store = createStore({
           dispatch('removeExtractItemOnSave', { path: node.path.replace(`.${EXTRACT_ON_SAVE}`, '') });
         }
 
+        if (node.path === DELETE_ON_SAVE) {
+          state.inspector.otherRecordsToDeleteOnSave = state.inspector.otherRecordsToDeleteOnSave
+            .filter((i) => i.id !== node.id);
+          return acc;
+        }
+
         // It had a value
         if (typeof node.value !== 'undefined') {
           return [...acc, node];
@@ -754,7 +769,7 @@ const store = createStore({
         }
 
         return acc;
-      }, [])
+      }, []);
 
       commit("updateInspectorData", {
         addToHistory: false,
diff --git a/vue-client/src/utils/data.js b/vue-client/src/utils/data.js
index c60af9c93..7c55f3eb9 100644
--- a/vue-client/src/utils/data.js
+++ b/vue-client/src/utils/data.js
@@ -245,3 +245,7 @@ export function translateAliasedUri(uri) {
   }
   return translatedUri;
 }
+
+export function isLink(o) {
+  return Object.keys(o).length === 1 && Object.keys(o).includes('@id');
+}
diff --git a/vue-client/src/utils/http.js b/vue-client/src/utils/http.js
index bb8819480..a14ca83a9 100644
--- a/vue-client/src/utils/http.js
+++ b/vue-client/src/utils/http.js
@@ -135,6 +135,8 @@ export function getRelatedRecords(queryPairs, apiPath) {
 export async function getDocument(uri, contentType = 'application/ld+json', embellished = true) {
   let translatedUri = translateAliasedUri(uri);
 
+  translatedUri = translatedUri.split('#')[0];
+
   if (!uri.includes('embellished=')) {
     const query = `${uri.includes('?') ? '&' : '?'}embellished=${embellished}`;
     translatedUri = `${translatedUri}${query}`;
@@ -159,6 +161,7 @@ export async function getDocument(uri, contentType = 'application/ld+json', embe
   }
   responseObject.data = await response.json();
   responseObject.ETag = response.headers.get('ETag');
+  responseObject.uri = uri;
   return responseObject;
 }
 
@@ -206,3 +209,9 @@ export function getResourceFromCache(url) {
     });
   });
 }
+
+export function fetchPlainEtags(ids) {
+  return Promise
+    .all(ids.map((id) => getDocument(id, undefined, false)))
+    .then((responses) => Object.fromEntries(responses.map((r) => [r.uri, r.ETag])));
+}
diff --git a/vue-client/src/utils/record.js b/vue-client/src/utils/record.js
index b13790abc..7e4b49c7c 100644
--- a/vue-client/src/utils/record.js
+++ b/vue-client/src/utils/record.js
@@ -3,6 +3,7 @@ import * as LxlDataUtil from 'lxljs/data';
 import * as VocabUtil from 'lxljs/vocab';
 import * as httpUtil from './http';
 import * as DataUtil from './data';
+import { isLink } from './data';
 
 export function getRecordId(data, quoted) {
   const recordObj = recordObject(data, quoted);
@@ -282,12 +283,15 @@ export function getObjectAsRecord(mainEntity, record = {}) {
   return newObj;
 }
 
-export function getCleanedExtractedData(extractedData, inspectorData, resources) {
+export function getCleanedExtractedData(extractedData, inspectorData, resources, settings) {
   /**
    * Cleans extracted data and adds title from parent data if it is missing.
    */
   const cleanObj = DataUtil.removeNullValues(extractedData);
   if (cleanObj == null) return null; // Nothing left of this
+  if (settings.extractableMappedTypes[extractedData['@type']]) {
+    cleanObj['@type'] = settings.extractableMappedTypes[extractedData['@type']];
+  }
   if (VocabUtil.isSubClassOf(extractedData['@type'], 'Work', resources.vocabClasses, resources.context)) {
     // Entity is of type Work or derived type
     if (extractedData.hasOwnProperty('hasTitle') === false) {
@@ -394,3 +398,55 @@ export function getNewCopy(id) {
     });
   });
 }
+
+// FIXME check in vocab. Need a precomputed category => members map?
+// eslint-disable-next-line no-unused-vars
+function compositionalProperties(resources) {
+  return ['hasComponent'];
+}
+
+export function moveFromQuotedToMain(splitData, ids, resources) {
+  // FIXME check whole doc
+  compositionalProperties(resources).forEach((p) => {
+    if (splitData.mainEntity[p]) {
+      splitData.mainEntity[p].forEach((o) => {
+        if (isLink(o) && ids.includes(o['@id'])) {
+          Object.assign(o, splitData.quoted[o['@id']]);
+          delete splitData.quoted[o['@id']];
+        }
+      });
+    }
+  });
+}
+
+export function extractInlinedData(data, ids, resources) {
+  // FIXME check whole doc
+  const result = {};
+  compositionalProperties(resources).forEach((p) => {
+    const v = data[p] || [];
+    v.forEach((o, ix) => {
+      if (o['@id'] && !isLink(o) && ids.includes(o['@id'])) {
+        result[o['@id']] = o;
+        v[ix] = { '@id': o['@id'] };
+      }
+    });
+  });
+
+  return result;
+}
+
+export function getLinkedIdsToBeInlined(splitData, resources) {
+  // FIXME check whole doc
+  const result = [];
+  compositionalProperties(resources).forEach((p) => {
+    if (splitData.mainEntity[p]) {
+      result.push(
+        ...splitData.mainEntity[p]
+          .filter((o) => isLink(o))
+          .map((o) => o['@id']),
+      );
+    }
+  });
+
+  return result;
+}
diff --git a/vue-client/src/utils/shelfmark.js b/vue-client/src/utils/shelfmark.js
index 83c5b666b..be209a978 100644
--- a/vue-client/src/utils/shelfmark.js
+++ b/vue-client/src/utils/shelfmark.js
@@ -1,6 +1,7 @@
 import { get } from 'lodash-es';
 import md5 from 'md5';
 import * as HttpUtil from './http';
+import { isSubClassOf } from "lxljs/vocab";
 
 export async function hasAutomaticShelfControlNumber(shelfMarkId) {
   return HttpUtil.get({
@@ -9,11 +10,12 @@ export async function hasAutomaticShelfControlNumber(shelfMarkId) {
   }).then((shelfMark) => Promise.resolve(shelfMark['@graph'][1].hasOwnProperty('nextShelfControlNumber')));
 }
 
-export async function checkAutoShelfControlNumber(obj, settings, user) {
+export async function checkAutoShelfControlNumber(obj, settings, user, resources) {
   const mainEntity = obj['@graph'][1];
+  const isItem = (type) => type && isSubClassOf(type, 'Item', resources.vocab, resources.context);
 
-  if (mainEntity['@type'] === 'Item') {
-    const items = (mainEntity.hasComponent || []).filter((c) => c['@type'] === 'Item');
+  if (isItem(mainEntity['@type'])) {
+    const items = (mainEntity.hasComponent || []).filter((c) => isItem(c['@type']));
     items.push(mainEntity);
     for (const item of items) {
       // we actually want to do these sequentially in case they link to the same shelf mark
diff --git a/vue-client/src/views/Inspector.vue b/vue-client/src/views/Inspector.vue
index 71dbb5414..d2be9bc66 100644
--- a/vue-client/src/views/Inspector.vue
+++ b/vue-client/src/views/Inspector.vue
@@ -70,6 +70,8 @@ export default {
     return {
       documentId: null,
       documentETag: null,
+      etagMap: {},
+      inlinedIds: [],
       documentTitle: null,
       result: {},
       recordLoaded: false,
@@ -207,8 +209,20 @@ export default {
         });
       }).then((result) => {
         if (typeof result !== 'undefined') {
+          // TODO dead store?
           this.result = result;
           const splitFetched = LxlDataUtil.splitJson(result);
+
+          this.inlinedIds = RecordUtil.getLinkedIdsToBeInlined(splitFetched, this.resources);
+          if (this.inlinedIds.length > 0) {
+            HttpUtil.fetchPlainEtags(this.inlinedIds).then((etagMap) => {
+              console.log('Inlined document etags:', etagMap);
+              this.etagMap = etagMap;
+            });
+
+            RecordUtil.moveFromQuotedToMain(splitFetched, this.inlinedIds, this.resources);
+          }
+
           this.$store.dispatch('setInspectorData', splitFetched);
           this.onRecordLoaded();
         }
@@ -216,6 +230,8 @@ export default {
     },
     initializeRecord() {
       this.documentETag = null; // Reset this
+      this.etagMap = {};
+      this.inlinedIds = [];
       this.marcPreview.active = false;
       this.$store.dispatch('pushLoadingIndicator', 'Loading document');
       this.recordLoaded = false;
@@ -423,6 +439,26 @@ export default {
         }
       });
     },
+    doRemoveOtherRecord(fnurgel, type) {
+      const url = `${this.settings.apiPath}/${fnurgel}`;
+      HttpUtil._delete({ url, activeSigel: this.user.settings.activeSigel, token: this.user.token }).then(() => {
+        this.$store.dispatch('pushNotification', {
+          type: 'success',
+          message: `${labelByLang(type)} ${translatePhrase('was deleted')}!`,
+        });
+      }, (error) => {
+        if (error.status === 403) {
+          this.$store.dispatch('pushNotification', { type: 'danger', message: `${translatePhrase('Forbidden')} - ${translatePhrase('This entity may have active links')} - ${error.statusText}` });
+        } else {
+          this.$store.dispatch('pushNotification', { type: 'danger', message: `${translatePhrase('Something went wrong')} - ${error.statusText}` });
+        }
+      });
+    },
+    removeOtherRecords() {
+      this.inspector.otherRecordsToDeleteOnSave.forEach((r) => {
+        this.doRemoveOtherRecord(RecordUtil.extractFnurgel(r.id), r.type);
+      });
+    },
     loadDocument() {
       this.$store.dispatch('setInspectorStatusValue', { property: 'isNew', value: false });
 
@@ -651,6 +687,7 @@ export default {
         await this.saveExtracted();
         this.saveQueued = () => this.saveItem(done);
       } catch (error) {
+        console.error(error);
         this.$store.dispatch('pushNotification', {
           type: 'danger',
           message: `${StringUtil.getUiPhraseByLang('Something went wrong', this.user.settings.language, this.resources.i18n)} - ${error}`,
@@ -661,18 +698,18 @@ export default {
     async saveExtracted() {
       this.$store.dispatch('setInspectorStatusValue', { property: 'saving', value: true });
       for await (const path of this.inspector.extractItemsOnSave) {
-        const cleanedExtractedData = RecordUtil.getCleanedExtractedData(get(this.inspector.data, path), this.inspector.data, this.resources);
+        const cleanedExtractedData = RecordUtil.getCleanedExtractedData(get(this.inspector.data, path), this.inspector.data, this.resources, this.settings);
         const extractedRecord = RecordUtil.getObjectAsRecord(cleanedExtractedData, {
           descriptionCreator: { '@id': this.user.getActiveLibraryUri() },
           ...((this.inspector.data.record['@id'] !== 'https://id.kb.se/TEMPID') && {
             derivedFrom: { '@id': this.inspector.data.record['@id'] },
           }),
         });
-        const response = await HttpUtil.post({
+        const response = await this.preSaveHook(extractedRecord).then((r) => HttpUtil.post({
           url: `${this.settings.apiPath}/data`,
           token: this.user.token,
           activeSigel: this.user.settings.activeSigel,
-        }, extractedRecord);
+        }, r));
         const postUrl = `${response.getResponseHeader('Location')}`;
         const savedExtractedRecord = await HttpUtil.get({ url: `${postUrl}/data.jsonld`, contentType: 'text/plain' });
         const savedExtractedMainEntity = LxlDataUtil.splitJson({
@@ -737,10 +774,12 @@ export default {
           ? 'was sent'
           : (!this.documentId ? 'was created' : 'was saved');
 
+        const type = get(obj, ['@graph', 1, '@type'], '');
+
         setTimeout(() => {
           this.$store.dispatch('pushNotification', {
             type: 'success',
-            message: `${labelByLang(this.recordType)} ${StringUtil.getUiPhraseByLang(msgKey, this.user.settings.language, this.resources.i18n)}!`,
+            message: `${labelByLang(type)} ${StringUtil.getUiPhraseByLang(msgKey, this.user.settings.language, this.resources.i18n)}!`,
           });
         }, 10);
         if (!this.documentId) {
@@ -752,6 +791,7 @@ export default {
         } else {
           this.fetchDocument();
           this.warnOnSave();
+          this.removeOtherRecords();
           if (done) {
             this.stopEditing();
           } else {
@@ -790,6 +830,7 @@ export default {
               } });
             break;
           default:
+            console.error(error);
             errorMessage = `${StringUtil.getUiPhraseByLang('Something went wrong', this.user.settings.language, this.resources.i18n)} - ${error.status}: ${StringUtil.getUiPhraseByLang(error.statusText, this.user.settings.language, this.resources.i18n)}`;
             this.$store.dispatch('pushNotification', { type: 'danger', message: `${errorBase}. ${errorMessage}.` });
         }
@@ -821,9 +862,45 @@ export default {
       }, 5000);
     },
     async preSaveHook(obj) {
-      await checkAutoShelfControlNumber(obj, this.settings, this.user);
+      await checkAutoShelfControlNumber(obj, this.settings, this.user, this.resources);
+      await this.saveInlined(obj);
+
       return obj;
     },
+    async saveInlined(obj) {
+      if (this.inlinedIds.includes(obj['@graph'][1]['@id'])) {
+        // we only handle one level of inlined docs so far
+        return;
+      }
+
+      const inlined = RecordUtil.extractInlinedData(obj['@graph'][1], this.inlinedIds, this.resources);
+      await Promise.all(Object.keys(inlined)
+        .map((id) => HttpUtil.getDocument(id, undefined, false)
+          .then((r) => {
+            if (!r.data) {
+              // TODO Fix HttpUtil.getDocument so that it errors instead
+              const e = new Error(`Could not fetch document ${id}`);
+              e.statusText = 'Try again';
+              throw e;
+            }
+            if (r.ETag !== this.etagMap[id]) {
+              const msg = 'The resource has been modified by another user';
+              const e = new Error(`${msg} ${id}`);
+              // FIXME smuggling the fnurgel inside status
+              e.status = RecordUtil.extractFnurgel(id);
+              e.statusText = msg;
+              throw e;
+            }
+            r.data['@graph'][1] = inlined[id];
+            return this.preSaveHook(r.data);
+          })
+          .then((data) => HttpUtil.put({
+            url: id,
+            ETag: this.etagMap[id],
+            activeSigel: this.user.settings.activeSigel,
+            token: this.user.token,
+          }, data))));
+    },
   },
   watch: {
     'inspector.data'(val, oldVal) {

From 6fbccd850c8a379c2738f83f46c25e78b769fe08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Olov=20Ylinenp=C3=A4=C3=A4?= <olov.ylinenpaa@kb.se>
Date: Mon, 19 Aug 2024 16:27:55 +0200
Subject: [PATCH 5/5] Remove dead code

---
 vue-client/src/views/Inspector.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/vue-client/src/views/Inspector.vue b/vue-client/src/views/Inspector.vue
index d2be9bc66..3a3efdc36 100644
--- a/vue-client/src/views/Inspector.vue
+++ b/vue-client/src/views/Inspector.vue
@@ -73,7 +73,6 @@ export default {
       etagMap: {},
       inlinedIds: [],
       documentTitle: null,
-      result: {},
       recordLoaded: false,
       modalOpen: false,
       removeInProgress: false,
@@ -209,8 +208,6 @@ export default {
         });
       }).then((result) => {
         if (typeof result !== 'undefined') {
-          // TODO dead store?
-          this.result = result;
           const splitFetched = LxlDataUtil.splitJson(result);
 
           this.inlinedIds = RecordUtil.getLinkedIdsToBeInlined(splitFetched, this.resources);