diff --git a/nuxt-app/assets/img/ripple.svg b/nuxt-app/assets/img/ripple.svg
index b1fd1dbe..b47ea917 100644
--- a/nuxt-app/assets/img/ripple.svg
+++ b/nuxt-app/assets/img/ripple.svg
@@ -1 +1 @@
-<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ripple" style="background: none;"><circle cx="50" cy="50" r="37.7867" fill="none" ng-attr-stroke="{{config.c1}}" ng-attr-stroke-width="{{config.width}}" stroke="#006476" stroke-width="3"><animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="1" keySplines="0 0.2 0.8 1" begin="-0.5s" repeatCount="indefinite"></animate><animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1" keySplines="0.2 0 0.8 1" begin="-0.5s" repeatCount="indefinite"></animate></circle><circle cx="50" cy="50" r="20.5508" fill="none" ng-attr-stroke="{{config.c2}}" ng-attr-stroke-width="{{config.width}}" stroke="#5c3069" stroke-width="3"><animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="1" keySplines="0 0.2 0.8 1" begin="0s" repeatCount="indefinite"></animate><animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1" keySplines="0.2 0 0.8 1" begin="0s" repeatCount="indefinite"></animate></circle></svg>
\ No newline at end of file
+<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ripple" style="background: none;"><circle cx="50" cy="50" r="37.7867" fill="none" ng-attr-stroke="{{config.c1}}" ng-attr-stroke-width="{{config.width}}" stroke="#43318d" stroke-width="3"><animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="1" keySplines="0 0.2 0.8 1" begin="-0.5s" repeatCount="indefinite"></animate><animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1" keySplines="0.2 0 0.8 1" begin="-0.5s" repeatCount="indefinite"></animate></circle><circle cx="50" cy="50" r="20.5508" fill="none" ng-attr-stroke="{{config.c2}}" ng-attr-stroke-width="{{config.width}}" stroke="#d83f87" stroke-width="3"><animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="1" keySplines="0 0.2 0.8 1" begin="0s" repeatCount="indefinite"></animate><animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1" keySplines="0.2 0 0.8 1" begin="0s" repeatCount="indefinite"></animate></circle></svg>
\ No newline at end of file
diff --git a/nuxt-app/components/CodeEditorWithProp.vue b/nuxt-app/components/CodeEditorWithProp.vue
index d7567418..f15c1fa1 100644
--- a/nuxt-app/components/CodeEditorWithProp.vue
+++ b/nuxt-app/components/CodeEditorWithProp.vue
@@ -58,7 +58,7 @@ export default {
tabSize = new Compartment();
let state = EditorState.create({
- doc: JSON.stringify(self.item?.validation, null, 2),
+ doc: JSON.stringify(self.item?.validation || self.item, null, 2),
extensions: [
basicSetup,
history(),
diff --git a/nuxt-app/pages/index.vue b/nuxt-app/pages/index.vue
index cae13b16..3663466d 100644
--- a/nuxt-app/pages/index.vue
+++ b/nuxt-app/pages/index.vue
@@ -218,11 +218,11 @@
<div class="bg-light jumbotron m-0">
<p class="text-center bold text-dde-dark">
The Data Discovery Engine is a project from the
- <a href="http://wulab.io/" rel="noreferrer" target="_blank">Wu Lab</a>
+ <a href="https://wulab.io/" rel="noreferrer" target="_blank">Wu Lab</a>
and
- <a href="http://sulab.org/" rel="noreferrer" target="_blank">Su Lab</a>
- at Scripps Research and is supported by the National Cancer Institute
- (75N91019D00024).
+ <a href="https://sulab.org/" rel="noreferrer" target="_blank">Su Lab</a>
+ at Scripps Research and is supported by the National Institutes of
+ Health (75N91019D00024).
</p>
</div>
</div>
diff --git a/nuxt-app/pages/resource/[id]/index.vue b/nuxt-app/pages/resource/[id]/index.vue
index 9f17241c..d09ceb98 100644
--- a/nuxt-app/pages/resource/[id]/index.vue
+++ b/nuxt-app/pages/resource/[id]/index.vue
@@ -10,10 +10,12 @@ const route = useRoute();
const store = useStore();
const id = route.params.id;
let metadata = ref({});
+let metadata_pure = ref({});
let isN3C = ref(false);
let meta_id = ref("");
let n3c_status = ref("");
let scriptText = ref("");
+let ready = ref(false);
let color = ref("badge-light");
function processMarkdown(txt) {
@@ -73,31 +75,6 @@ function download() {
a.click();
}
-function getPreview() {
- let txt =
- "<sc" +
- 'ript type="application/ld+json" >' +
- JSON.stringify(metadata.value, null, 2) +
- "</scr" +
- "ipt>";
- $swal.fire({
- position: "center",
- confirmButtonColor: "#63296b",
- cancelButtonColor: "#4a7d8f",
- customClass: "scale-in-center",
- html:
- `<h6 class="text-center mainTextDark">Copy this code</h6><div class="text-left alert-secondary">
- <div>
- <span>
- <pre>` +
- txt +
- `</pre>
- </span>
- </div>
- </div>`,
- });
-}
-
function getFeatured(meta) {
if (meta.value?._meta?.guide.includes("n3c")) {
return "https://i.postimg.cc/ry0C25bK/n3cfeatured.jpg";
@@ -119,6 +96,13 @@ function getMetadata(id) {
.then((response) => response.json())
.then((data) => {
metadata.value = data;
+ setTimeout(() => {
+ ready.value = true;
+ let o = Object.assign({}, data);
+ delete o["_meta"];
+ delete o["_id"];
+ metadata_pure.value = o;
+ }, 200);
useHead({
title: "DDE | " + metadata.value.name,
meta: [
@@ -220,6 +204,23 @@ function copyScript(id) {
});
}
+function copyJsonToClipboard() {
+ const jsonString = JSON.stringify(metadata_pure.value, null, 2); // Convert JSON object to a pretty-printed string
+ navigator.clipboard
+ .writeText(jsonString)
+ .then(() => {
+ new Notify({
+ status: "success",
+ title: "Copied!",
+ autoclose: true,
+ autotimeout: 2000,
+ });
+ })
+ .catch((err) => {
+ console.error("Error copying JSON to clipboard: ", err);
+ });
+}
+
const last_updated = computed(() => {
if (
metadata.value.hasOwnProperty("_meta") &&
@@ -358,60 +359,78 @@ getMetadata(id);
</template>
</div>
</div>
- <div class="alert bg-dde-mid-muted text-dde-dark m-5">
- <h5>Embed this structured dataset metadata on your website</h5>
- <h6>Embedding options:</h6>
- <div class="row">
- <div class="col-sm-12 col-md-6 p-3">
- <h6>Dynamic Embedding</h6>
- <p>
- <span
- >Leave it up to us! Just copy the following code and paste it
- anywhere before the closing <code></head></code> tag on
- your website's code.</span
- >
- </p>
- <p class="text-dde-mid bold">
- <span>Changes to metadata will be applied automatically.</span>
- </p>
- <span class="d-block text-muted">
- <b>CLICK TO COPY</b>
- </span>
- <input
- id="myInput"
- @click="copyScript('myInput')"
- title="Learn More About FAIR Principles"
- class="form-control p-2 w-75 m-auto pointer"
- v-model="scriptText"
- type="text"
- />
- </div>
- <div class="col-sm-12 col-md-6 p-3">
- <h6>Hard Coded</h6>
- <p>
- <span
- >In your website's code anywhere before the closing
- <code></head></code> tag, paste the code below.</span
- >
- </p>
- <p class="text-dde-mid bold">
- <span>Changes to metadata need to be updated manually.</span>
- </p>
- <span class="d-block text-muted">
- <b>COPY THIS CODE:</b>
- </span>
- <button
- class="btn-secondary text-light btn m-auto"
- @click="getPreview()"
+ <div class="alert alert-dark text-dde-dark mt-5">
+ <h5>
+ <b>For dataset owner:</b> Embed this structured dataset metadata on
+ your website describing this dataset
+ <span
+ class="text-info"
+ data-tippy-content="This enhances discoverability by making your data easily searchable and accessible through web search engines. This facilitates data sharing and collaboration among researchers and developers. Additionally, it provides clear context and provenance for the datasets, ensuring users understand the source, quality, and relevance of the data."
+ >[why?]</span
+ >
+ </h5>
+ <div class="p-3">
+ <h6>Dynamic Embedding</h6>
+ <hr />
+ <p>
+ <span
+ >Leave it up to us! Just copy the following code and paste it
+ anywhere before the closing <code></head></code> tag on
+ your website's code.</span
>
- View Code
- </button>
- <br />
+ </p>
+ <p class="text-dde-mid bold">
+ <span>Changes to metadata will be applied automatically.</span>
+ </p>
+ <span class="d-block text-muted text-center">
+ <b>CLICK THE INPUT FIELD TO COPY</b>
+ </span>
+ <input
+ id="myInput"
+ @click="copyScript('myInput')"
+ title="Learn More About FAIR Principles"
+ class="form-control p-2 w-75 m-auto pointer"
+ v-model="scriptText"
+ type="text"
+ />
+ </div>
+ <div class="p-3">
+ <h6>Hard Coded Embedding</h6>
+ <hr />
+ <p>
<span
- ><a class="pointer" @click="download()">Download Code</a></span
+ >In your website's code anywhere before the closing
+ <code></head></code> tag, paste the code below inside of a
+ script tag like this:
+ <code
+ ><script type="application/ld+json" > ...your
+ metadata...</script></code
+ >.</span
>
- </div>
+ </p>
+ <p class="text-dde-mid bold">
+ <span>Changes to metadata need to be updated manually.</span>
+ </p>
+ </div>
+ </div>
+ <div class="alert-light">
+ <div class="text-left p-1">
+ <a
+ class="btn btn-sm themeButton text-light mx-3"
+ @click="download()"
+ >Download Metadata</a
+ >
+ <a
+ class="btn btn-sm themeButton text-light mx-3"
+ @click="copyJsonToClipboard()"
+ >Copy Metadata</a
+ >
</div>
+ <template v-if="ready">
+ <div style="max-height: 600px; overflow-y: scroll">
+ <CodeEditorWithProp :item="metadata_pure"></CodeEditorWithProp>
+ </div>
+ </template>
</div>
</div>
<div