From 3e8a6e322c2bb9691f9ab80471db75c86b33de14 Mon Sep 17 00:00:00 2001
From: Alvin Sebastian <a.sebastian@connect.qut.edu.au>
Date: Fri, 17 May 2024 02:02:35 +0000
Subject: [PATCH] UI changes, bug fixes

---
 package.json                       |  2 +-
 src/app/components/Help.vue        |  4 +-
 src/app/utils/profiles.js          |  8 +--
 src/app/views/CrateoView.vue       | 80 +++++++++++++++----------
 src/lib/components/ControlAdd.vue  |  8 +--
 src/lib/components/CrateEditor.vue | 94 +++++++++++++++++-------------
 src/lib/components/Entity.vue      | 48 +++++++--------
 src/lib/components/InputGeo.vue    |  1 +
 src/lib/components/LinkEntity.vue  | 16 ++++-
 src/lib/components/Property.vue    | 15 ++---
 src/lib/lookups/ror.js             |  2 +-
 11 files changed, 161 insertions(+), 117 deletions(-)

diff --git a/package.json b/package.json
index 85aaa47..5f70890 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crate-o",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "A VueJS UI component to create and edit Research Object Crate (RO-Crate) metadata",
   "keywords": [
     "RO-Crate",
diff --git a/src/app/components/Help.vue b/src/app/components/Help.vue
index 7ff3a3c..e149829 100644
--- a/src/app/components/Help.vue
+++ b/src/app/components/Help.vue
@@ -43,10 +43,10 @@ import { ElRow, ElCol } from 'element-plus';
           Closes without saving.
         </p>
         <h4 class="text-gray-500 dark:text-gray-400">
-          Profile
+          Mode
         </h4>
         <p class="text-gray-500 dark:text-gray-400">
-          Select a predefined profile or load one from your computer.
+          Select a predefined mode or load one from your computer.
         </p>
       </div>
     </el-col>
diff --git a/src/app/utils/profiles.js b/src/app/utils/profiles.js
index 953c2cb..f1f3568 100644
--- a/src/app/utils/profiles.js
+++ b/src/app/utils/profiles.js
@@ -1,8 +1,8 @@
 const profileUrls = [
-    'https://language-research-technology.github.io/ro-crate-editor-profiles/profiles/base-profile.json',
-    'https://language-research-technology.github.io/ro-crate-editor-profiles/profiles/schema.json',
-    'https://language-research-technology.github.io/ro-crate-editor-profiles/profiles/language-data-commons-collection-profile.json',
-    'https://language-research-technology.github.io/ro-crate-editor-profiles/profiles/software-profile.json'
+    'https://language-research-technology.github.io/ro-crate-modes/modes/base.json',
+    'https://language-research-technology.github.io/ro-crate-modes/modes/schema.json',
+    'https://language-research-technology.github.io/ro-crate-modes/modes/language-data-commons-collection.json',
+    'https://language-research-technology.github.io/ro-crate-modes/modes/software.json'
 ];
 export const profiles = profileUrls.map(p => null);
 const p = profileUrls.map((url, i) => fetch(url).then(r => r.ok ? r.json().then(json => profiles[i] = json) : null));
diff --git a/src/app/views/CrateoView.vue b/src/app/views/CrateoView.vue
index fe6069b..8dec578 100644
--- a/src/app/views/CrateoView.vue
+++ b/src/app/views/CrateoView.vue
@@ -6,7 +6,8 @@ import Help from "../components/Help.vue";
 import SpreadSheet from "../components/SpreadSheet.vue";
 import { Validator } from "../utils/profileValidator.js";
 import { ROCrate } from "ro-crate";
-import { ElRow, ElCol, ElMenu, ElMenuItem, ElDivider, ElSelect, ElOption, ElDialog, ElButton } from 'element-plus';
+import { ElRow, ElCol, ElMenu, ElMenuItem, ElDivider, ElSelect, ElOption, 
+  ElDialog, ElButton, ElCollapse, ElCollapseItem, ElAlert } from 'element-plus';
 import { handleRoute } from '../../lib/DefaultRouteHandler.js'
 import { CrateEditor } from '../../lib'
 
@@ -78,8 +79,6 @@ const commands = {
     console.log('open');
     try {
       data.dirHandle = await window.showDirectoryPicker();
-      // reset crate
-      resetData();
       data.loading = true;
       try {
         data.metadataHandle = await data.dirHandle.getFileHandle('ro-crate-metadata.json');
@@ -100,12 +99,13 @@ const commands = {
       data.crate = crate;
       //navigate();
       //data.loading = false;
-      console.log('end open')
+      // reset crate
+      resetData();
     } catch (error) {
       console.error(error);
       window.alert(error);
-      resetData();
     }
+    console.log('end open')
   },
 
   async addFiles() {
@@ -115,6 +115,7 @@ const commands = {
   },
 
   async save() {
+    console.log('save!!!!!!!!!!!');
     if (data.dirHandle) {
       // create new crate metadata
       data.metadataHandle = await data.dirHandle.getFileHandle('ro-crate-metadata.json', { create: true });
@@ -136,9 +137,9 @@ const commands = {
       const content = JSON.stringify(crate, null, 2);
       await writable.write(content);
       await writable.close();
-      data.crate = crate;
-      data.entityId = '';
-      data.validationResult = validate(data.crate, profile.value);
+      //data.crate = crate;
+      //data.entityId = '';
+      data.validationResult = validate(crate, profile.value);
       data.validationResultDialog = !!data.validationResult;
     }
   },
@@ -304,7 +305,7 @@ function selectProfile(v) {
     data.selectedProfile = v;
   }
 }
-
+const activeNames = ref(['1']);
 </script>
 
 <template>
@@ -326,22 +327,23 @@ function selectProfile(v) {
       <el-menu-item index="close" :disabled="!data.dirHandle">
         ⓧ Close
       </el-menu-item>
-
       <el-menu-item index="help" title="Help">
-        ﹖
+        ﹖ Help
       </el-menu-item>
     </el-menu>
     <el-row class="text-large p-3" :gutter="10">
       <el-col :xs="24" :sm="24" :md="12" :lg="12">
         <el-row class="w-full p-1">
-          <el-select :model-value="data.selectedProfile" @update:model-value="selectProfile" placeholder="Open a directory first to select a mode" class="w-[30em]" :disabled="!data.dirHandle">
+          <el-select :model-value="data.selectedProfile" @update:model-value="selectProfile"
+            placeholder="Open a directory first to select a mode" class="w-[30em]" :disabled="!data.dirHandle">
             <template #prefix>
               <span class="font-bold">Mode:</span>
             </template>
             <el-option :value="-1">
               <p class="font-bold italic">Load and add a new mode from your computer ...</p>
             </el-option>
-            <el-option v-for="(profile, index) of data.profiles" v-if="profile" :label="profile.metadata.name" :value="index">
+            <el-option v-for="(profile, index) of data.profiles" v-if="profile" :label="profile.metadata.name"
+              :value="index">
               <div class="border-b-1 mb-2">
                 <p>{{ profile.metadata.name }}</p>
                 <p class="text-slate-500 text-xs">{{ profile.metadata.description }}</p>
@@ -353,26 +355,32 @@ function selectProfile(v) {
       <el-col v-if="data.dirHandle" :xs="24" :sm="24" :md="12" :lg="12">
         <el-row class="p-1">
           <span class="flex items-center">
-            Selected Directory:&nbsp;<span class="font-bold">{{ data.dirHandle.name }}</span>
+            <span class="font-bold text-slate-500">Selected Directory:</span>&nbsp;<span>{{ data.dirHandle.name
+              }}</span>
           </span>
         </el-row>
       </el-col>
     </el-row>
   </div>
   <template v-if="data.crate">
-    <div v-if="data.validationResultDialog" class="bg-orange-100 text-orange-700 px-4 py-3 relative" role="alert">
-      <strong class="block sm:inline font-bold">Saved with warnings</strong>
-      <div class="p-2" v-for="(obj, key) in data.validationResult">
-        <p>Entity:
-          <el-button size="small" type="default" @click="goTo({ id: key })"> {{ obj?.name?.[0] || key }}</el-button>
-        </p>
-        Property(s) :
-        <p v-for="(prop, keyProp) in obj.props" class="ml-5 py-1">
-          <el-button size="small" @click="goTo({ id: key, prop: keyProp })">{{ prop.name }}</el-button>
-          <span class="text-red-700">&nbsp;is {{ prop['type'] }}</span>
-        </p>
-      </div>
-      <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
+    <el-alert class="validation-warnings" v-if="data.validationResultDialog" type="warning" @close="data.validationResultDialog = false">
+      <el-collapse class="ml-5 mr-10 min-w-96" role="alert">
+        <el-collapse-item title="Saved with warnings" name="validation-warnings">
+          <div class="p-2" v-for="(obj, key) in data.validationResult">
+            <p>Entity:
+              <el-button size="small" type="default" @click="goTo({ id: key })"> {{ obj?.name?.[0] || key }}</el-button>
+            </p>
+            Property(s) :
+            <p v-for="(prop, keyProp) in obj.props" class="ml-5 py-1">
+              <el-button size="small" @click="goTo({ id: key, prop: keyProp })">{{ prop.name }}</el-button>
+              <span class="text-red-700">&nbsp;is {{ prop['type'] }}</span>
+            </p>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </el-alert>
+      <!-- <strong class="block sm:inline font-bold">Saved with warnings</strong> -->
+      <!-- <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
         <el-button type="text" @click="data.validationResultDialog = false">
           <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 20 20">
@@ -381,8 +389,7 @@ function selectProfile(v) {
               d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
           </svg>
         </el-button>
-      </span>
-    </div>
+      </span> -->
     <CrateEditor ref="editor" :crate="data.crate" :profile="profile" :entityId="data.entityId"
       :propertyId="data.propertyId" :get-file="getFile" @update:entityId="updateEntityId" @update:crate="updateCrate"
       @ready="() => data.loading = false" @data="detectProfile">
@@ -390,9 +397,10 @@ function selectProfile(v) {
     <SpreadSheet v-model:crate="data.crate" :buffer="data.spreadSheetBuffer" />
   </template>
   <div v-else>
-    <welcome/>
+    <welcome />
   </div>
-  <el-dialog v-if="data.profileErrorDialog" v-model="data.profileError" :title="'Error when loading Profile'" width="50%">
+  <el-dialog v-if="data.profileErrorDialog" v-model="data.profileError" :title="'Error when loading Mode'"
+    width="50%">
     <div class="overflow-x-scroll h-96">
       {{ data.selectedProfile?.metadata }}
       <el-divider />
@@ -429,4 +437,14 @@ function selectProfile(v) {
 .el-select-dropdown__item {
   height: auto;
 }
+/* .validation-warnings .el-alert__content {
+  flex-grow: 1;
+} */
+.validation-warnings .el-collapse {
+  --el-collapse-header-bg-color: transparent;
+  --el-collapse-content-bg-color: transparent;
+  --el-collapse-header-font-size: 14px;
+  --el-collapse-header-text-color: inherit;
+  --el-collapse-content-text-color: inherit;
+}
 </style>
diff --git a/src/lib/components/ControlAdd.vue b/src/lib/components/ControlAdd.vue
index c14ec55..2349875 100644
--- a/src/lib/components/ControlAdd.vue
+++ b/src/lib/components/ControlAdd.vue
@@ -139,7 +139,7 @@ function typeLabel(type) {
   <div v-if="!definition.max || !modelValue.length || definition.max > 1">
     <!-- Add buttons -->
     <el-select v-if="types.length > 1" :modelValue="data.selectedType" @clear="data.selectedType = ''"
-      placeholder="Choose a type" size="small" clearable filterable style="--el-select-width: 200px;">
+      placeholder="Choose a type" clearable filterable style="--el-select-width: 200px;">
       <template #prefix>
         <el-icon>
           <Plus />
@@ -149,14 +149,14 @@ function typeLabel(type) {
         {{ typeLabel(t) }}
       </el-option>
     </el-select>
-    <el-button v-else v-for="t of types" size="small" type="primary" :icon="data.selectedType === t ? Close : Plus"
+    <el-button v-else v-for="t of types" type="primary" :icon="data.selectedType === t ? Close : Plus"
       :class="{ active: data.selectedType === t }" @click="add(t)">
       {{ typeLabel(t) }}
     </el-button>
     <!-- search input -->
     <template v-if="data.selectedType">
       <el-select v-focus class="flex-grow min-w-[100px]" filterable remote clearable v-model="data.entity" value-key="@id"
-        :loading="data.loading" @change="addEntity" :remote-method="search" size="small" @keyup.enter="addNewEntity">
+        :loading="data.loading" @change="addEntity" :remote-method="search" @keyup.enter="addNewEntity">
         <template v-for="group in data.options" :key="group.value">
           <el-option-group v-if="group.options.length" :label="group.label">
             <el-option v-for="item in group.options" :key="item['@id']" :label="createLabel(item)" :value="item">
@@ -166,7 +166,7 @@ function typeLabel(type) {
           </el-option-group>
         </template>
       </el-select>
-      <el-button class="add-new-entity" size="small" type="success" @click="addNewEntity">
+      <el-button class="add-new-entity" type="success" @click="addNewEntity">
         Create new {{ typeLabel(data.selectedType) }}<span v-if="data.keyword">:&nbsp;</span>
         {{ data.keyword }}</el-button>
     </template>
diff --git a/src/lib/components/CrateEditor.vue b/src/lib/components/CrateEditor.vue
index 34d4910..e8eb223 100644
--- a/src/lib/components/CrateEditor.vue
+++ b/src/lib/components/CrateEditor.vue
@@ -4,7 +4,7 @@ import { ref, shallowReactive, reactive, watch, computed, provide, onUpdated, ne
 import { HomeFilled, ArrowLeftBold, Delete } from '@element-plus/icons-vue';
 import {
   ElRow, ElCol, ElBreadcrumb, ElBreadcrumbItem, ElTabs, ElTabPane,
-  ElPageHeader, ElTooltip, ElLink, ElSelectV2, ElButton, ElLoading
+  ElPageHeader, ElTooltip, ElLink, ElSelectV2, ElButton, ElLoading, ElTag, ElIcon
 } from 'element-plus';
 import { $state } from './keys';
 import { EditorState } from './EditorState';
@@ -96,6 +96,7 @@ watch(() => props.entityId, entityId => {
 
 function initEntity(entityId) {
   var id = entityId || data.rootDataset?.['@id'];
+  console.log('entityId=', entityId, ' id=', id);
   if (state.crate) {
     if (data.entity?.['@id'] !== id) {
       const entity = state.crate.getEntity(id);
@@ -104,7 +105,8 @@ function initEntity(entityId) {
         if (i > -1) data.history.splice(i + 1);
         else data.history.push(entity);
         data.entity = entity;
-        console.log(data.history);
+        //console.log(data.history);
+        //console.log('initEntity');
         if (entityId !== id) emit('update:entityId', id);
       }
     }
@@ -212,53 +214,55 @@ function truncate(text) {
 
 <template>
   <div :key="forceKey">
-    <el-row class="bg-slate-300 p-2" v-if="data.rootDataset">
-      <el-col :span="17" class="p-2 flex items-center">
-        <el-breadcrumb separator="/">
-          <el-breadcrumb-item v-for="e, i in data.history">
-            <el-link :disabled="i === data.history.length - 1" :icon="i ? null : HomeFilled" href="/"
-              @click.prevent="showEntity(e)" :title="e.name?.[0] || e['@id']">
-              <span v-html="truncate(e.name?.[0] || (i ? e['@id'] : 'Root Dataset'))"></span>
-            </el-link>
-          </el-breadcrumb-item>
-        </el-breadcrumb>
-      </el-col>
-      <el-col :span="5" class="pt-1 pr-3">
-        <el-select-v2 placeholder="Create New Entity" class="flex-grow" filterable clearable :allow-create="false"
-          v-model="data.newEntityType" :options="newEntityTypes" @change="onSelectNewEntity"></el-select-v2>
-      </el-col>
-    </el-row>
-
     <el-row v-loading="data.loading" class="crate-o">
-      <el-col :span="18" class="p-2">
-        <template v-if="data.entity">
-          <el-page-header :icon="null" class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3"
-            role="alert">
-            <template #title>
-              <span class="text-large font-600 mr-3"> {{ data.entity['name']?.[0] || data.entity['@id'] }} </span>
-            </template>
-            <template #content>
-            </template>
-            <template #extra>
-              <div class="flex items-center">
+      <el-col :span="18" class="p-2" id="currentEntity">
+        <el-row class="py-3 px-2 items-center bg-slate-200" v-if="data.rootDataset">
+          <el-col>
+            <div class="mb-3">
+              <el-breadcrumb separator=">">
+                <template v-for="e, i in data.history">
+                  <el-breadcrumb-item>
+                    <el-link :icon="i ? null : HomeFilled" href="/"
+                      @click.prevent="showEntity(e)" :title="e.name?.[0] || e['@id']">
+                      <span v-html="truncate(e.name?.[0] || (i ? e['@id'] : 'Root Dataset'))"></span>
+                    </el-link>
+                  </el-breadcrumb-item>
+                </template>
+              </el-breadcrumb>
+            </div>
+            <el-row v-if="data.entity">
+              <el-col :sm="24" :md="18" :lg="20">
+                <h2 class="text-2xl mr-3"> 
+                  <span class="text-2xl font-bold text-slate-500">Current Entity: </span>
+                  <el-icon style="font-size: 30px; top:4px;" v-if="data.rootDataset === data.entity"><HomeFilled/></el-icon>
+                  {{ data.entity['name']?.[0] || data.entity['@id'] }} 
+                </h2>
+              </el-col>
+              <el-col :sm="24" :md="6" :lg="4">
                 <el-tooltip v-if="data.rootDataset !== data.entity"
                   :content="'Delete entity ' + data.entity['name']?.[0] || data.entity['@id']" placement="bottom-start"
                   effect="light">
-                  <el-button @click="deleteEntity" type="danger" plain :icon="Delete">Remove</el-button>
+                  <el-button class="float-right" @click="deleteEntity" type="danger" plain :icon="Delete">Remove Entity</el-button>
                 </el-tooltip>
-              </div>
-            </template>
-          </el-page-header>
-
-          <Entity :model-value="data.entity" @update:model-value="updateEntity" :getFile="getFile"
-            :propertyId="propertyId">
-          </Entity>
-
-        </template>
-        <div v-else="">Entity with id `{{ entityId }}` does not exist in the crate.</div>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+        <el-row class="mt-3">
+          <template v-if="data.entity">
+            <Entity :model-value="data.entity" @update:model-value="updateEntity" :getFile="getFile"
+              :propertyId="propertyId">
+            </Entity>
+
+          </template>
+          <div v-else="">Entity with id `{{ entityId }}` does not exist in the crate.</div>
+        </el-row>
       </el-col>
 
-      <el-col :span="6" class="h-screen p-2">
+      <el-col :span="6" class="h-screen p-2" id="entityNavigator">
+        <el-select-v2 placeholder="Create New Entity" class="flex-grow" filterable clearable :allow-create="false"
+          v-model="data.newEntityType" :options="newEntityTypes" @change="onSelectNewEntity"></el-select-v2>
+
         <el-tabs class="w-full" v-model="data.activeTab">
           <el-tab-pane label="All Entities" name="all" lazy>
             <FilteredPaged :modelValue="Array.from(state.entities.value)" v-slot="{ value, index }">
@@ -294,4 +298,10 @@ label.el-form-item__label,
 div.el-form-item__label {
   align-items: center;
 }
+
+.el-breadcrumb .el-link {
+  color: #626aef;
+  font-weight: 600;
+  font-size: 90%;
+}
 </style>
\ No newline at end of file
diff --git a/src/lib/components/Entity.vue b/src/lib/components/Entity.vue
index e1232b3..1ac4064 100644
--- a/src/lib/components/Entity.vue
+++ b/src/lib/components/Entity.vue
@@ -49,12 +49,12 @@ const layouts = computed(() => {
   }
   // put the rest in others tab
   const inputs = Array.from(othersProps);
-  const others = { 
-    name: 'Others', 
-    description: '', 
-    inputs, 
+  const others = {
+    name: 'Others',
+    description: '',
+    inputs,
     definitions: inputs.map(id => definitions[id]),
-    disabled: !inputs.length 
+    disabled: !inputs.length
   };
 
   return layouts.concat(others);
@@ -72,6 +72,7 @@ const activeGroup = computed({
 });
 
 watch(() => props.modelValue, async (entity) => {
+  data.file = null;
   if (entity['@type'].includes('File') && props.getFile) {
     data.file = await props.getFile(props.modelValue['@id']);
   }
@@ -169,33 +170,32 @@ function addConformTos(rTypes) {
   <el-tabs tab-position="left" v-model="activeGroup">
     <el-tab-pane v-for="(layout, i) in layouts" :label="layout.name" :name="layout.name" :disabled="layout.disabled">
       <template #label>
-        <el-popover v-if="layout.disabled" placement="right-end" :title="layout.name" :width="300" trigger="hover"
-          content="There are no properties available in the profile for this type">
-          <template #reference>
-            {{ layout.name }}
+        <el-tooltip placement="right-end" effect="light">
+          <template #content>
+            <div class="text-slate-700">
+              <h4 class="text-base">{{ layout.name }}</h4>
+              <p v-if="layout.help">{{ layout.help }}</p>
+              <p class="font-semibold" v-if="layout.disabled">There are no properties available in the mode for this type
+              </p>
+            </div>
           </template>
-        </el-popover>
-        <span v-else>
-          {{ layout.name }}
-          <el-tooltip v-if="layout.help" :content="layout.help" placement="bottom-start" effect="light">
-            <el-icon>
-              <InfoFilled />
-            </el-icon>
-          </el-tooltip>
-        </span>
+          <div>
+            {{ layout.name }}
+          </div>
+        </el-tooltip>
       </template>
       <el-form id="#entityForm" label-width="auto" novalidate v-if="activeGroup === layout.name">
         <div v-if="state.crate.rootDataset['@id'] === props.modelValue['@id']">
           <el-row v-if="checkRootTypes().length > 0"
             class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
-            This dataset does not have all the types required in profile:
+            This dataset does not have all the types required in the selected Mode:
             <el-button size="small" type="primary" :icon="Plus" @click="addRootTypes(checkRootTypes())">
               Add the missing type(s): {{ checkRootTypes().join(", ") }}
             </el-button>
           </el-row>
           <el-row v-if="checkConformsTo().length > 0"
             class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
-            This dataset does not have all the conformsTos required in profile:&nbsp;
+            This dataset does not have all the conformsTos required in the selected Mode:&nbsp;
             <el-button size="small" type="primary" :icon="Plus" @click="addConformTos(checkConformsTo())">
               Add the missing conformsTos(s):&nbsp;<span v-for="c of checkConformsTo()">{{ c?.['@id'] }}</span>
             </el-button>
@@ -206,12 +206,12 @@ function addConformTos(rTypes) {
           :components="getComponents(def)" :definition="def" @update:model-value="v => updateProperty(def, v)">
         </Property>
 
-        <el-form-item label="Preview" class="pt-2" v-if="data.file">
-          <MediaPreview :file="data.file" />
-        </el-form-item>
       </el-form>
+    </el-tab-pane>
 
-
+    <el-tab-pane v-if="data.file" label="Preview" name="Preview">
+      <MediaPreview :file="data.file" />
     </el-tab-pane>
+
   </el-tabs>
 </template>
\ No newline at end of file
diff --git a/src/lib/components/InputGeo.vue b/src/lib/components/InputGeo.vue
index 3f9289c..0af6c00 100644
--- a/src/lib/components/InputGeo.vue
+++ b/src/lib/components/InputGeo.vue
@@ -44,6 +44,7 @@ const help = {
     <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
       <LeafletMap class="h-72 flex grow min-w-[200px] mr-4" :modelValue="modelValue"
         @update:modelValue="(v) => $emit('update:modelValue', v)" :transformer="transformer"></LeafletMap>
+      <div class="text-xs italic">* This map is not suitable for native title or other land claims.</div>
     </el-col>
     <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
       <el-form label-width="auto">
diff --git a/src/lib/components/LinkEntity.vue b/src/lib/components/LinkEntity.vue
index 701673a..1530f81 100644
--- a/src/lib/components/LinkEntity.vue
+++ b/src/lib/components/LinkEntity.vue
@@ -46,7 +46,10 @@ function openUrl() {
       <component :is="icon"></component>
     </el-icon>
     <span class="flex mr-2">
-      <el-tag class="mr-1 font-bold" size="small" plain v-for="t of modelValue['@type']">{{ t }}</el-tag>
+      <!-- <el-tag class="mr-1 font-bold" size="small" plain type="info" v-for="t of modelValue['@type']">{{ t }}</el-tag> -->
+      <template v-for="t of modelValue['@type']">
+        <span class="type-tag" v-if="t">{{ t }}</span>
+      </template>
     </span>
     <slot> {{ label }} </slot>
   </el-button>
@@ -80,4 +83,15 @@ function openUrl() {
   white-space: normal;
   text-align: left;
 }
+
+.type-tag {
+  margin-right: 0.25rem;
+  font-weight: 600;
+  background: #8295fb;
+  padding: 0.25rem;
+  border-radius: 3px;
+  /* border: 1px solid var(--el-button-border-color); */
+  font-size: 75%;
+  color: white;
+}
 </style>
\ No newline at end of file
diff --git a/src/lib/components/Property.vue b/src/lib/components/Property.vue
index 1abe05e..ce3f528 100644
--- a/src/lib/components/Property.vue
+++ b/src/lib/components/Property.vue
@@ -118,7 +118,7 @@ function removeValue(i, value) {
     <template #label>
       <el-tooltip v-if="definition?.required" content="Property Required" placement="bottom-start" effect="light">
         <el-icon>
-          <WarningFilled class="text-red-600" />
+          <WarningFilled class="text-gray-500" />
         </el-icon>
       </el-tooltip>
       <span class="mx-1" :title="definition.id">{{ label }} </span>
@@ -149,13 +149,14 @@ function removeValue(i, value) {
         </template>
         <div class="pl-2 flex flex-nowrap" v-if="!isReverse">
           <!-- Delete Button -->
-          <el-tooltip v-if="definition?.min >= values.length" content="This property is required and cannot be deleted"
-            placement="bottom-start" effect="light">
-            <el-button :disabled="true" @click="removeValue(index, value)" type="default" plain :icon="Delete"
-              size="small"></el-button>
+          <el-tooltip placement="bottom-start" effect="light">
+            <template #content>
+              <span v-if="definition?.min >= values.length">This property is required and cannot be deleted</span>
+              <span v-else>Delete the property value</span>
+            </template>
+            <el-button :disabled="definition?.min >= values.length" @click="removeValue(index, value)" 
+              type="danger" plain :icon="Delete"></el-button>
           </el-tooltip>
-          <el-button v-else @click="removeValue(index, value)" type="danger" plain :icon="Delete"
-            size="small"></el-button>
         </div>
       </FilteredPaged>
 
diff --git a/src/lib/lookups/ror.js b/src/lib/lookups/ror.js
index b81b65a..0b4f58c 100644
--- a/src/lib/lookups/ror.js
+++ b/src/lib/lookups/ror.js
@@ -4,7 +4,7 @@ export default class Lookup {
   constructor(opt) {
 
   }
-  async search({ query, limit = 10 }) {
+  async search({ query, limit = 20 }) {
     let response = await fetch(`${api}?query.advanced=${query}`);
     if (response.status === 200) {
       response = await response.json();