From cdc7d50613e72445eefdf2439a84c3c8e5a4ddff Mon Sep 17 00:00:00 2001
From: Alvin Sebastian <a.sebastian@connect.qut.edu.au>
Date: Tue, 21 May 2024 00:46:31 +0000
Subject: [PATCH] Improve Mode selection UI

---
 src/app/components/Welcome.vue     | 101 +++++++++++++----------------
 src/app/views/CrateoView.vue       |  96 +++++++++++++--------------
 src/lib/components/CrateEditor.vue |   2 +-
 src/lib/components/Property.vue    |  11 ++--
 4 files changed, 98 insertions(+), 112 deletions(-)

diff --git a/src/app/components/Welcome.vue b/src/app/components/Welcome.vue
index 3162bad..7f0e896 100644
--- a/src/app/components/Welcome.vue
+++ b/src/app/components/Welcome.vue
@@ -5,59 +5,50 @@ import { ElRow, ElCol } from 'element-plus';
 //TODO: Insert code that will load the readme markdown into here as html
 </script>
 <template>
-  <el-row :gutter="20" class="p-20">
-    <el-col :span="6" :xs="0" :sm="0" :md="4" :lg="6" :xl="8">
-      <div class="grid-content ep-bg-purple"/>
-    </el-col>
-    <el-col :span="18" :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
-      <div class="grid gap-6">
-        <h2 class="mb-3 text-lg text-gray-500 md:text-xl dark:text-gray-400">What is Crate-O?</h2>
-        <p class="text-gray-500 dark:text-gray-400">
-          Crate-O is a browser-based editor for <a class="text-blue-600 dark:text-blue-500 hover:underline"
-                                                   href="https://www.researchobject.org/ro-crate" target="_blank"
-                                                   rel="noopener noreferrer">Research Object Crates (RO-Crate)</a>.
-          RO-Crate is a flexible,
-          developer-friendly approach to linked-data description and packaging.
-          </p>
-          <p class="text-gray-500 dark:text-gray-400">
-          Crate-O is designed to:
-            <ul class="list-disc list-inside">
-            <li>describe files on a user’s computer and to add contextual information about those files,</li>
-            <li>skip the files and describe abstract contextual entities such as in a Cultural Collection or an encyclopaedia, or</li>
-            <li>annotate existing resources elsewhere on the web.</li>
-            </ul>
-          </p>
-        <p class="text-gray-500 dark:text-gray-400">
-          Crate-O works only with <a class="text-blue-600 dark:text-blue-500 hover:underline"
-                                href="https://google.com/chrome" target="_blank" rel="noopener noreferrer">Google
-          Chrome</a> and <a class="text-blue-600 dark:text-blue-500 hover:underline" href="https://microsoft.com/edge"
-                            target="_blank" rel="noopener noreferrer">Microsoft Edge</a> at this stage as it
-          describes files on the user's
-          computer, and saves RO-Crate metadata there. We will be releasing versions that work with online resources
-          directly which will be compatible with other browsers (see the
-          <a class="text-blue-600 dark:text-blue-500 hover:underline"
-             href="https://github.com/Language-Research-Technology/crate-o#roadmap--backlog"
-             target="_blank" rel="noopener noreferrer">Roadmap</a>).
-        </p>
-        <p class="text-gray-500 dark:text-gray-400">
-          While the current version of Crate-O is designed for editing self-contained RO-Crates (and works fine with
-          crates
-          containing tens of thousands of entities) - our roadmap includes editing fragments of larger linked-data
-          resources,
-          and integration with Arkisto repositories such as the Oni repository, data API and search portal.
-        </p>
-        <p class="text-gray-500 dark:text-gray-400">
-          Crate-O is currently developed by the <a class="text-blue-600 dark:text-blue-500 hover:underline"
-                                                   href="https://www.ldaca.edu.au/" target="_blank"
-                                                   rel="noopener noreferrer">Language Data Commons of Australia
-          (LDaCA)</a>, under the guidance of
-          Peter Sefton as technical lead. If the tool is adopted in other contexts (we are in talks with a few groups
-          about this) then we aim to establish a steering committee/reference group to help guide development.
-        </p>
-      </div>
-      <div class="grid gap-6">&nbsp;</div>
-      <help/>
-    </el-col>
-  </el-row>
-
+  <div class="grid gap-6 p-5 lg:p-20 lg:max-w-[75%] text-gray-500 dark:text-gray-400">
+    <h2 class="mb-3 text-lg md:text-xl">What is Crate-O?</h2>
+    <p class="">
+      Crate-O is a browser-based editor for <a class="text-blue-600 dark:text-blue-500 hover:underline"
+        href="https://www.researchobject.org/ro-crate" target="_blank" rel="noopener noreferrer">Research Object Crates
+        (RO-Crate)</a>.
+      RO-Crate is a flexible,
+      developer-friendly approach to linked-data description and packaging.
+    </p>
+    <p class="">
+      Crate-O is designed to:
+    <ul class="list-disc list-inside">
+      <li>describe files on a user’s computer and to add contextual information about those files,</li>
+      <li>skip the files and describe abstract contextual entities such as in a Cultural Collection or an encyclopaedia,
+        or</li>
+      <li>annotate existing resources elsewhere on the web.</li>
+    </ul>
+    </p>
+    <p class="">
+      Crate-O works only with <a class="text-blue-600 dark:text-blue-500 hover:underline"
+        href="https://google.com/chrome" target="_blank" rel="noopener noreferrer">Google
+        Chrome</a> and <a class="text-blue-600 dark:text-blue-500 hover:underline" href="https://microsoft.com/edge"
+        target="_blank" rel="noopener noreferrer">Microsoft Edge</a> at this stage as it
+      describes files on the user's
+      computer, and saves RO-Crate metadata there. We will be releasing versions that work with online resources
+      directly which will be compatible with other browsers (see the
+      <a class="text-blue-600 dark:text-blue-500 hover:underline"
+        href="https://github.com/Language-Research-Technology/crate-o#roadmap--backlog" target="_blank"
+        rel="noopener noreferrer">Roadmap</a>).
+    </p>
+    <p class="">
+      While the current version of Crate-O is designed for editing self-contained RO-Crates (and works fine with
+      crates
+      containing tens of thousands of entities) - our roadmap includes editing fragments of larger linked-data
+      resources,
+      and integration with Arkisto repositories such as the Oni repository, data API and search portal.
+    </p>
+    <p class="">
+      Crate-O is currently developed by the <a class="text-blue-600 dark:text-blue-500 hover:underline"
+        href="https://www.ldaca.edu.au/" target="_blank" rel="noopener noreferrer">Language Data Commons of Australia
+        (LDaCA)</a>, under the guidance of
+      Peter Sefton as technical lead. If the tool is adopted in other contexts (we are in talks with a few groups
+      about this) then we aim to establish a steering committee/reference group to help guide development.
+    </p>
+    <help />
+  </div>
 </template>
\ No newline at end of file
diff --git a/src/app/views/CrateoView.vue b/src/app/views/CrateoView.vue
index fa7147a..3e91ce4 100644
--- a/src/app/views/CrateoView.vue
+++ b/src/app/views/CrateoView.vue
@@ -1,13 +1,15 @@
 <script setup>
-import { shallowReactive, reactive, ref, computed, watch, watchEffect, nextTick } from 'vue';
-import { profiles, profilesPromise } from '../utils/profiles.js';
+import { shallowReactive, ref, computed } from 'vue';
+import { profilesPromise } from '../utils/profiles.js';
 import Welcome from "../components/Welcome.vue";
 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, ElCollapse, ElCollapseItem, ElAlert, ElNotification  } from 'element-plus';
+import {
+  ElRow, ElCol, ElMenu, ElMenuItem, ElDivider, ElSelectV2, ElOption,
+  ElDialog, ElButton, ElCollapse, ElCollapseItem, ElAlert, ElNotification
+} from 'element-plus';
 import { handleRoute } from '../../lib/DefaultRouteHandler.js'
 import { CrateEditor } from '../../lib'
 
@@ -32,7 +34,7 @@ const data = shallowReactive({
   entityId: '',
   propertyId: '',
   selectedProfile: defaultProfile,
-  profiles: shallowReactive(profiles),
+  profiles: [],
   spreadSheetBuffer: null,
   loading: false,
   profileError: [],
@@ -43,6 +45,8 @@ const data = shallowReactive({
 });
 window.data = data;
 const profile = computed(() => data.profiles[data.selectedProfile]);
+const profileOptions = computed(() => data.profiles.flatMap((p, value) =>
+  p ? [{ value, label: p.metadata.name, description: p.metadata.description }] : []));
 
 const editor = ref();
 
@@ -70,8 +74,10 @@ const commands = {
         //profile = newProfile;
       }
     } catch (error) {
-      console.error(error);
-      window.alert(error);
+      if (error.name !== 'AbortError') {
+        console.error(error);
+        window.alert(error);
+      }
     }
   },
 
@@ -96,8 +102,9 @@ const commands = {
         const content = await file.text();
         crate = JSON.parse(content);
       }
-      await profilesPromise;
-      console.log(crate);
+      const profiles = (await profilesPromise).map(p => p.value);
+      data.profiles = shallowReactive(profiles)
+      //console.log(crate);
       data.crate = crate;
       console.log(data.crate);
       //navigate();
@@ -105,8 +112,10 @@ const commands = {
       // reset crate
       resetData();
     } catch (error) {
-      console.error(error);
-      window.alert(error);
+      if (error.name !== 'AbortError') {
+        console.error(error);
+        window.alert(error);
+      }
     }
     console.log('end open')
   },
@@ -304,13 +313,6 @@ function updateCrate(raw, roc) {
   data.crate = raw;
 }
 
-function selectProfile(v) {
-  if (v < 0) {
-    commands.loadProfile();
-  } else {
-    data.selectedProfile = v;
-  }
-}
 const activeNames = ref(['1']);
 </script>
 
@@ -337,39 +339,33 @@ const activeNames = ref(['1']);
         ﹖ 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">
-            <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">
-              <div class="border-b-1 mb-2">
-                <p>{{ profile.metadata.name }}</p>
-                <p class="text-slate-500 text-xs">{{ profile.metadata.description }}</p>
-              </div>
-            </el-option>
-          </el-select>
-        </el-row>
+    <el-row class="text-large py-3">
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" class="pl-3">
+        <el-select-v2 v-model="data.selectedProfile" class="w-[30em]" :disabled="!data.dirHandle" scrollbar-always-on
+          placeholder="Open a directory first to select a mode" :options="profileOptions" :height="290" :item-height="58">
+          <template #prefix>
+            <span class="font-bold">Mode:</span>
+          </template>
+          <template #footer>
+            <el-button size="small" @click="commands.loadProfile()">Load and add a new mode from your computer
+              ...</el-button>
+          </template>
+          <template #default="{ item }">
+            <div class="border-b-1 mb-2" v-if="item">
+              <p>{{ item.label }}</p>
+              <p class="text-slate-500 text-xs">{{ item.description }}</p>
+            </div>
+          </template>
+        </el-select-v2>
       </el-col>
-      <el-col v-if="data.dirHandle" :xs="24" :sm="24" :md="12" :lg="12">
-        <el-row class="p-1">
-          <span class="flex items-center">
-            <span class="font-bold text-slate-500">Selected Directory:</span>&nbsp;<span>{{ data.dirHandle.name
-              }}</span>
-          </span>
-        </el-row>
+      <el-col v-if="data.dirHandle" :xs="24" :sm="24" :md="12" :lg="12" class="content-center pl-3">
+        <span class="font-bold text-slate-500">Selected Directory:</span>&nbsp;<span>{{ data.dirHandle.name }}</span>
       </el-col>
     </el-row>
   </div>
   <template v-if="data.crate">
-    <el-alert class="validation-warnings" v-if="data.validationResultDialog" type="warning" @close="data.validationResultDialog = false">
+    <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">
@@ -385,8 +381,8 @@ const activeNames = ref(['1']);
         </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">
+    <!-- <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">
@@ -405,8 +401,7 @@ const activeNames = ref(['1']);
   <div v-else>
     <welcome />
   </div>
-  <el-dialog v-if="data.profileErrorDialog" v-model="data.profileError" :title="'Error when loading Mode'"
-    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 />
@@ -443,6 +438,7 @@ const activeNames = ref(['1']);
 .el-select-dropdown__item {
   height: auto;
 }
+
 /* .validation-warnings .el-alert__content {
   flex-grow: 1;
 } */
diff --git a/src/lib/components/CrateEditor.vue b/src/lib/components/CrateEditor.vue
index fb91c2e..3bd2f44 100644
--- a/src/lib/components/CrateEditor.vue
+++ b/src/lib/components/CrateEditor.vue
@@ -215,7 +215,7 @@ function truncate(text) {
 <template>
   <div class="crate-editor" :key="forceKey">
     <el-row v-loading="data.loading" class="crate-o">
-      <el-col :span="18" class="p-2" id="currentEntity">
+      <el-col :span="18" class="p-2 pr-3" id="currentEntity">
         <div class="current-entity-heading py-3 px-2 mb-3 items-center bg-slate-200" v-if="data.rootDataset">
           <el-breadcrumb class="mb-3" separator=">">
             <template v-for="e, i in data.history">
diff --git a/src/lib/components/Property.vue b/src/lib/components/Property.vue
index ce3f528..9db0672 100644
--- a/src/lib/components/Property.vue
+++ b/src/lib/components/Property.vue
@@ -112,9 +112,8 @@ function removeValue(i, value) {
 
 <template>
   <!-- <el-form-item class="hover:bg-violet-100 px-2 p-2"> -->
-  <!-- TODO: !!! remove hack of checking the ro-crate-metadata.json-->
   <el-form-item
-    :class="[isReverse ? 'bg-teal-100 border-1 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md' : 'px-2 p-2', 'px-2 p-2']">
+    :class="[isReverse ? 'bg-teal-100 border-1 border-teal-500 rounded-b text-teal-900 shadow-md pt-3 !mb-5' : '', 'mb-2']">
     <template #label>
       <el-tooltip v-if="definition?.required" content="Property Required" placement="bottom-start" effect="light">
         <el-icon>
@@ -161,9 +160,9 @@ function removeValue(i, value) {
       </FilteredPaged>
 
       <ControlAdd v-if="!isReverse" :modelValue="values" :definition="definition"
-        class="flex flex-col md:flex-row gap-1 flex-nowrap" @add="add">
+        class="flex flex-col md:flex-row gap-1 flex-nowrap mb-3" @add="add">
       </ControlAdd>
-      <div v-if="definition.help" class="flex items-center text-sm text-indigo-400 py-3 mt-2" role="alert">
+      <div v-if="definition.help" class="flex items-center text-xs text-indigo-400 mb-3" role="alert">
         <el-icon>
           <InfoFilled />
         </el-icon>&nbsp;<p>{{ definition.help }}</p>
@@ -173,7 +172,7 @@ function removeValue(i, value) {
 </template>
 
 <style scoped>
-.el-form-item {
+/* .el-form-item {
   margin-bottom: 0px;
-}
+} */
 </style>
\ No newline at end of file