Fix default layout, Add help and about menu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "crate-o",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "A VueJS UI component to create and edit Research Object Crate (RO-Crate) metadata",
   "keywords": [
     "RO-Crate",

src/app/components/Welcome.vue → src/app/components/About.vue

@@ -1,28 +1,25 @@
 <script setup>
-import Help from "./Help.vue";
-import { ElRow, ElCol } from 'element-plus';
 
 //TODO: Insert code that will load the readme markdown into here as html
 </script>
 <template>
-  <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>
+  <div class="grid gap-2 text-gray-500 dark:text-gray-400">
+    <h2 class="mb-3 text-lg md:text-xl">About 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:
+    <p class="">Crate-O is designed to:</p>
     <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
@@ -49,6 +46,5 @@ import { ElRow, ElCol } from 'element-plus';
       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>

src/app/components/Help.vue

@@ -3,46 +3,54 @@ import { ElRow, ElCol } from 'element-plus';
 
 </script>
 <template>
-  <div class="grid gap-2 info-toolbar">
-    <h2 class="mb-3 text-lg text-gray-500 md:text-xl dark:text-gray-400">Toolbar Options</h2>
-    <h4 class="text-gray-500 dark:text-gray-400">
-      📂 Open Directory
-    </h4>
-    <p class="text-gray-500 dark:text-gray-400">
-      Select a directory/folder to describe your research.
-    </p>
-    <h4 class="text-gray-500 dark:text-gray-400">
-      🗃️ Load Files
-    </h4>
-    <p class="text-gray-500 dark:text-gray-400">
-      Loads files from the selected directory into this RO-Crate.
-    </p>
-    <h4 class="text-gray-500 dark:text-gray-400">
-      🗄️ Bulk Add
-    </h4>
-    <p class="text-gray-500 dark:text-gray-400">
-      Select a spreadsheet from a different directory to assist you with metadata description.
+  <div class="grid gap-2 info-toolbar text-gray-500 dark:text-gray-400">
+    <h2 class="mb-3 text-lg md:text-xl">Main Menu</h2>
+    <p>From the main menu, the following actions are available:</p>
+    <h4>📂 Open Directory</h4>
+    <p>Select a directory/folder to describe your research.</p>
+    <h4>🗃️ Load Files</h4>
+    <p>Loads files from the selected directory into this RO-Crate.</p>
+    <h4>🗄️ Bulk Add</h4>
+    <p>Select a spreadsheet from a different directory to assist you with metadata description.
       This will append to your existing RO-Crate if there is already one created.
     </p>
-    <h4 class="text-gray-500 dark:text-gray-400">
-      💾 Save
-    </h4>
-    <p class="text-gray-500 dark:text-gray-400">
-      Save the state of this page into your RO-Crate.
-      This will create an <i>ro-crate-metadata.json</i> file or append data into an existing <i>ro-crate-metadata.json</i>.
-    </p>
-    <h4 class="text-gray-500 dark:text-gray-400">
-      ⓧ Close
-    </h4>
-    <p class="text-gray-500 dark:text-gray-400">
-      Closes without saving.
-    </p>
-    <h4 class="text-gray-500 dark:text-gray-400">
-      Mode
-    </h4>
-    <p class="text-gray-500 dark:text-gray-400">
-      Select a predefined mode or load one from your computer.
+    <h4>💾 Save</h4>
+    <p>Save the state of this page into your RO-Crate.
+      This will create an <i>ro-crate-metadata.json</i> file or append data into an existing
+      <i>ro-crate-metadata.json</i>.
     </p>
+    <h4>ⓧ Close</h4>
+    <p>Closes without saving.</p>
+    <h4>Mode</h4>
+    <p>Select a predefined mode or load one from your computer.</p>
+    <p></p><br/>
+    <h2 class="mb-3 text-lg md:text-xl">General Navigation</h2>
+    <ul class="list-disc list-outside pl-5">
+      <li><strong>Selected Directory</strong> shows the directory or folder you currently have open.</li>
+      <li>Below <strong>Selected Directory</strong>, you will see a home icon followed by a file path that indicates
+        where you are located in the collection levels. This will change as you navigate to different sublevels.</li>
+      <li>Depending on the metadata group, different types of metadata will be available:
+        <ul class="list-disc list-outside pl-5">
+          <li><strong>About</strong> - The core metadata for this RO-Crate and its subject matter.</li>
+          <li><strong>Related People, Orgs & Works</strong> - The context for the creation of this RO-Crate; who made it, funded it etc.</li>
+          <li><strong>Structure</strong> - How the parts of this RO-Crate relate, such as collection and object relationships.</li>
+          <li><strong>Provenance</strong> - Detailed description of how entities were created, by whom and with which tools.</li>
+          <li><strong>Space & Time</strong> - Where and when the data was collected; the times and places it mentions or describes.</li>
+          <li><strong>Software & Hardware</strong> - For computer programs and execution environments that could be used to create data, have created data, or are being packaged and described.</li>
+          <li><strong>Others</strong> - Other properties not in the above categories. Note that if you find a property in `Other` that should be in one of the above groups or have other suggestions, please raise an issue on [GitHub](https://github.com/Language-Research-Technology/crate-o).</li>
+        </ul>
+      </li>
+    </ul>
+    <p>On the right-hand panel, there are some further options related to navigating and creating metadata entities:</p>
+    <ul class="list-disc list-outside pl-5">
+      <li><strong>Create New Entity</strong>: Create a new metadata entity, such as a
+        provenance action such as CreateAction, which describes how a work is created with more precision than a
+        property like `author`.</li>
+      <li><strong>Links from</strong>: When located in a sub-group, select to view the parent group(s).</li>
+      <li><strong>All Entities</strong>: Select to view all metadata associated with your collection.</li>
+      <li><strong>Unlinked Entities</strong>: Select to view all metadata that currently is not linked to any
+        properties.</li>
+    </ul>
   </div>
 
 </template>

src/app/views/CrateoView.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { shallowReactive, ref, computed } from 'vue';
 import { profilesPromise } from '../utils/profiles.js';
-import Welcome from "../components/Welcome.vue";
+import About from "../components/About.vue";
 import Help from "../components/Help.vue";
 import SpreadSheet from "../components/SpreadSheet.vue";
 import { Validator } from "../utils/profileValidator.js";
@@ -39,10 +39,11 @@ const data = shallowReactive({
   profiles: [],
   spreadSheetBuffer: null,
   loading: false,
-  profileError: [],
-  profileErrorDialog: false,
+  modeError: [],
   validationResult: {},
-  showWelcome: false,
+  showDialog: false,
+  dialogTitle: '',
+  dialogContent: null,
   validationResultDialog: false
 });
 window.data = data;
@@ -62,11 +63,13 @@ const commands = {
       const validator = new Validator();
       validator.errors = [];
       validator.loadAndCheck(content);
-      data.profileError = null;
-      data.profileErrorDialog = false;
+      data.modeError = null;
+      //data.profileErrorDialog = false;
       if (validator.errors.length > 0) {
-        data.profileError = validator.errors;
-        data.profileErrorDialog = true;
+        data.modeError = validator.errors;
+        data.showDialog = true;
+        data.dialogContent = null;
+        data.dialogTitle = 'Error when loading Mode';
       } else {
         //const profile = validator.profile;
         //TODO: put it profiles removing it when fixing it
@@ -159,14 +162,14 @@ const commands = {
       ElNotification({ title: 'Data successfully saved in ro-crate-metadata.json', type: 'success', duration: 3000 });
 
       // save preview
-      const crate = new ROCrate(rawCrate, {array: true, link: true});
+      const crate = new ROCrate(rawCrate, { array: true, link: true });
       await crate.resolveContext();
       const preview = new Preview(crate);
       content = renderTemplate(preview.templateParams());
       const previewHandle = await data.dirHandle.getFileHandle('ro-crate-preview.html', { create: true });
       writable = await previewHandle.createWritable();
       await writable.write(content);
-      await writable.close(); 
+      await writable.close();
     }
   },
 
@@ -193,7 +196,14 @@ const commands = {
   },
 
   help() {
-    data.showWelcome = true;
+    data.dialogTitle = 'Help';
+    data.dialogContent = Help;
+    data.showDialog = true;
+  },
+  about() {
+    data.dialogTitle = 'About';
+    data.dialogContent = About;
+    data.showDialog = true;
   }
 };
 
@@ -345,16 +355,21 @@ const activeNames = ref(['1']);
         💾 Save
       </el-menu-item>
       <el-menu-item index="close" :disabled="!data.dirHandle">
-        ⓧ Close
+        ❌ Close
       </el-menu-item>
       <el-menu-item index="help" title="Help">
-        ﹖ Help
+        ❓Help
+      </el-menu-item>
+      <el-menu-item index="about" title="About">
+        🛈 About
       </el-menu-item>
+
     </el-menu>
     <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">
+          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>
@@ -411,36 +426,28 @@ const activeNames = ref(['1']);
     <SpreadSheet v-model:crate="data.crate" :buffer="data.spreadSheetBuffer" />
   </template>
   <div v-else>
-    <welcome />
-  </div>
-  <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 />
-      <div class="p-2" v-for="error of data.profileError">
-        <p>
-          {{ error.instancePath }}
-        </p>
-        <p>
-          {{ error.message }}
-        </p>
-        <el-divider />
-      </div>
+    <div class="p-5 lg:p-20 lg:max-w-[75%]">
+      <about />
+      <help />
     </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button type="primary" @click="data.profileErrorDialog = false">Ok</el-button>
-      </span>
-    </template>
-  </el-dialog>
+  </div>
 
-  <el-dialog v-if="data.showWelcome" v-model="data.showWelcome" title="Help" width="50%">
-    <div class="overflow-x-scroll h-96">
-      <help />
+  <el-dialog v-model="data.showDialog" :title="data.dialogTitle" width="800" align-center>
+    <div class="dialog-content">
+      <component v-if="data.dialogContent" :is="data.dialogContent" />
+      <template v-else-if="data.modeError">
+        {{ data.selectedProfile?.metadata }}
+        <el-divider />
+        <div class="p-2" v-for="error of data.modeError">
+          <p>{{ error.instancePath }}</p>
+          <p>{{ error.message }}</p>
+          <el-divider />
+        </div>
+      </template>
     </div>
     <template #footer>
       <span class="dialog-footer">
-        <el-button type="primary" @click="data.showWelcome = false">Close</el-button>
+        <el-button type="primary" @click="data.showDialog = false">Close</el-button>
       </span>
     </template>
   </el-dialog>
@@ -461,4 +468,14 @@ const activeNames = ref(['1']);
   --el-collapse-header-text-color: inherit;
   --el-collapse-content-text-color: inherit;
 }
+
+.el-dialog {
+  width: unset;
+  max-width: var(--el-dialog-width);
+}
+
+.el-dialog .el-dialog__body {
+  max-height: calc(100svh - 200px);
+  overflow: auto;
+}
 </style>

src/lib/components/default_layout.json

@@ -38,12 +38,12 @@
     "name": "Structure",
     "help": "How the parts of this RO-Crate relate, such as collection and object relationships.",
     "inputs": [
-      "http://schema.org/memberOf",
-      "http://schema.org/hasMember",
+      "http://pcdm.org/memberOf",
+      "http://pcdm.org/hasMember",
       "http://schema.org/isPartOf",
       "http://schema.org/hasPart",
-      "http://schema.org/fileOf",
-      "http://schema.org/hasFile",
+      "http://pcdm.org/fileOf",
+      "http://pcdm.org/hasFile",
       "http://schema.org/inDefinedTermSet",
       "http://schema.org/hasDefinedTerm"
     ]