Skip to content

Commit

Permalink
Improve Mode selection UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@alvinsw
alvinsw committed May 24, 2024
1 parent a37c006 commit cdc7d50
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 112 deletions.
101 changes: 46 additions & 55 deletions src/app/components/Welcome.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
96 changes: 46 additions & 50 deletions src/app/views/CrateoView.vue
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -32,7 +34,7 @@ const data = shallowReactive({
entityId: '',
propertyId: '',
selectedProfile: defaultProfile,
profiles: shallowReactive(profiles),
profiles: [],
spreadSheetBuffer: null,
loading: false,
profileError: [],
Expand All @@ -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();
Expand Down Expand Up @@ -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);
}
}
},
Expand All @@ -96,17 +102,20 @@ 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();
//data.loading = false;
// 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')
},
Expand Down Expand Up @@ -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>
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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 />
Expand Down Expand Up @@ -443,6 +438,7 @@ const activeNames = ref(['1']);
.el-select-dropdown__item {
height: auto;
}
/* .validation-warnings .el-alert__content {
flex-grow: 1;
} */
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/CrateEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
11 changes: 5 additions & 6 deletions src/lib/components/Property.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -173,7 +172,7 @@ function removeValue(i, value) {
</template>
<style scoped>
.el-form-item {
/* .el-form-item {
margin-bottom: 0px;
}
} */
</style>

0 comments on commit cdc7d50

Please sign in to comment.