Merge pull request #243 from biothings/nde-portal

fix: 🔨 NDE portal added, modal missing prop, domainIncludes sh…
biothings · Dec 11, 2023 · 9cbe95d · 9cbe95d
2 parents 8e9f9d2 + be83e0c
commit 9cbe95d
Show file tree

Hide file tree

Showing 17 changed files with 70,901 additions and 25 deletions.
diff --git a/nuxt-app/assets/img/niaid/nde.svg b/nuxt-app/assets/img/niaid/nde.svg
diff --git a/nuxt-app/components/EditDescription.vue b/nuxt-app/components/EditDescription.vue
@@ -43,6 +43,7 @@ export default {
             return method;
           },
           allowOutsideClick: () => !Swal.isLoading(),
+          backdrop: true
         })
         .then((result) => {
           let payload = {

diff --git a/nuxt-app/components/global/AnyOf.vue b/nuxt-app/components/global/AnyOf.vue
@@ -164,6 +164,7 @@ export default {
               });
           },
           allowOutsideClick: () => !self.$swal.isLoading(),
+          backdrop: true
         })
         .then((result) => {
           if (result.value) {

diff --git a/nuxt-app/components/global/OneOf.vue b/nuxt-app/components/global/OneOf.vue
@@ -163,6 +163,7 @@ export default {
               });
           },
           allowOutsideClick: () => !self.$swal.isLoading(),
+          backdrop: true
         })
         .then((result) => {
           if (result.value) {

diff --git a/nuxt-app/components/global/TypeSelector.vue b/nuxt-app/components/global/TypeSelector.vue
@@ -385,7 +385,9 @@ export default {
             self.parsed_options[option["@type"]] = option;
           } else if (option && option["items"] && option["items"]["@type"]) {
             if (!self.parsed_options.hasOwnProperty(option["items"]["@type"])) {
-              self.parsed_options[option["items"]["@type"]] = option;
+              self.parsed_options[option["items"]["@type"]] = option?.items ? option.items : option;
+            }else{
+              console.log('TypeSelector no option found for: ', self.main_name)
             }
           } else if (option && option["enum"]) {
             // use main prop name and replace underscore with space
@@ -405,7 +407,7 @@ export default {
         self.info.hasOwnProperty("properties") &&
         self.info.hasOwnProperty("@type") &&
         self.info.hasOwnProperty("type") &&
-        self.info.type == "object"
+        self.info?.type == "object"
       ) {
         // OBJECT TYPE FIELD
         self.parsed_options[self.info["@type"]] = self.info;
@@ -492,6 +494,7 @@ export default {
               });
           },
           allowOutsideClick: () => !self.$swal.isLoading(),
+          backdrop: true
         })
         .then((result) => {
           if (result.value) {
@@ -740,6 +743,7 @@ export default {
     },
   },
   mounted: function () {
+    // console.log('TYPE SELECTOR : ' + this.main_name, this.info)
     this.parseOptions();
   },
 };

diff --git a/nuxt-app/components/guide/Category.vue b/nuxt-app/components/guide/Category.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="m-1 text-center p-2 tip rounded"
+    class="m-1 text-center tip rounded"
     :data-tippy-content="cat"
     style="max-height: 109px; outline: none !important"
   >

diff --git a/nuxt-app/components/guide/InputBox.vue b/nuxt-app/components/guide/InputBox.vue
@@ -41,10 +41,10 @@
                 <!--🌈🌈🌈 INPUT 🌈 🌈🌈 TYPES 🌈🌈🌈-->
 
                 <!-- 🌈 BOOLEAN 🌈 -->
-                <template v-if="info && info.type === 'boolean'">
+                <template v-if="info && info?.type === 'boolean'">
                   <BooleanInput :name="name" :info="info"></BooleanInput>
                 </template>
-                <template v-if="info && info.type === 'string'">
+                <template v-if="info && info?.type === 'string'">
                   <!-- 🌈 STRING 🌈 -->
                   <template v-if="info && !info.format">
                     <!-- 🌈 STRING VOCABULARY🌈 -->
@@ -304,7 +304,7 @@
                 </template>
 
                 <!-- 🌈 LICENSE 🌈 -->
-                <template v-if="info.type === 'object' && name === 'license'">
+                <template v-if="info?.type === 'object' && name === 'license'">
                   <form id="licenseForm" class="p-1" v-if="!userInput">
                     <small class="text-muted"
                       >Allow commercial uses of your work?</small
@@ -399,7 +399,7 @@
                 </template>
 
                 <!-- 🌈  KEYWORDS 🌈 -->
-                <template v-if="info.type === 'array' && name === 'keywords'">
+                <template v-if="info?.type === 'array' && name === 'keywords'">
                   <div class="form-group p-2 row">
                     <div class="col-sm-12 mb-2">
                       <form @submit.prevent="addKeyword">
@@ -451,7 +451,7 @@
                 <!-- 🌈  CONSTANT DATA CATALOG 🌈 -->
                 <template
                   v-if="
-                    info.type === 'object' && name === 'includedInDataCatalog'
+                    info?.type === 'object' && name === 'includedInDataCatalog'
                   "
                 >
                   <!--<div class="text-center">
@@ -468,7 +468,7 @@
                 <!-- 🌈  OBJECT 🌈 -->
                 <template
                   v-if="
-                    info.type === 'object' &&
+                    info?.type === 'object' &&
                     name !== 'license' &&
                     name !== 'includedInDataCatalog'
                   "
@@ -555,12 +555,12 @@
                             :placeholder="'enter ' + item.format"
                           />
                         </template>
-                        <template v-if="item.type === 'string' && !item.format">
+                        <template v-if="item?.type === 'string' && !item.format">
                           <input
                             type="text"
                             v-model="userInput"
                             class="form-control form-control-sm"
-                            :placeholder="'enter ' + item.type"
+                            :placeholder="'enter ' + item?.type"
                           />
                         </template>
                       </div>
@@ -797,6 +797,7 @@ export default {
               });
           },
           allowOutsideClick: () => !self.$swal.isLoading(),
+          backdrop: true
         })
         .then((result) => {
           if (result.value) {
@@ -1894,12 +1895,13 @@ export default {
   },
   mounted: function () {
     var self = this;
-
+    // console.log('%c MOUNTING ' + self.name, "color:green")
+    // console.log({...self.info})
     if (self.info.hasOwnProperty("oneOf")) {
       if (
         (self.info["oneOf"].hasOwnProperty("type") &&
-          self.info["oneOf"][0]["type"] == "array") ||
-        self.info["oneOf"][1]["type"] == "array"
+          self.info["oneOf"][0]?.type == "array") ||
+        self.info["oneOf"][1]?.type == "array"
       ) {
         self.canAcceptMultiple = true;
       }

diff --git a/nuxt-app/pages/dashboard/index.vue b/nuxt-app/pages/dashboard/index.vue
@@ -1007,6 +1007,7 @@ export default {
                 showCancelButton: true,
                 confirmButtonText: "Go",
                 allowOutsideClick: () => !this.$swal.isLoading(),
+                backdrop: true
               })
               .then((result) => {
                 if (result.value) {

diff --git a/nuxt-app/pages/guide/nde/[[guide_query]].vue b/nuxt-app/pages/guide/nde/[[guide_query]].vue
@@ -0,0 +1,29 @@
+<script setup>
+import Guide from "../Guide.vue";
+const route = useRoute();
+const q = route.params.guide_query;
+</script>
+
+<template>
+  <Guide
+    :guide_query="q"
+    :presets="[
+      {
+        namespace: 'nde',
+        prefix: 'nde',
+        name: 'Dataset',
+        guide: '/guide/nde',
+        description:
+          'Datasets contained in the NIAID Data Ecosystem. The NIAID Data Ecosystem is an environment to find and access and infectious and immune-mediated disease data and computational tools to speed the development of diagnostics, therapeutics, and vaccines.',
+      },
+      {
+        namespace: 'nde',
+        prefix: 'nde',
+        name: 'ResourceCatalog',
+        guide: '/guide/nde/ResourceCatalog',
+        description:
+          'ResourceCatalogs (collections of scientific information or research outputs) contained in the NIAID Data Ecosystem. Resource catalogs include databases, repositories, knowledge bases, citation indices, software indices, browser-based data portals (web portals), etc.',
+      },
+    ]"
+  ></Guide>
+</template>
diff --git a/nuxt-app/pages/json-schema-viewer/index.vue b/nuxt-app/pages/json-schema-viewer/index.vue
@@ -399,7 +399,7 @@ export default {
         self.loadMsg = `<b class="text-success">Example loaded</b>`;
         let payload = {};
         payload["schema"] = self.file;
-        this.$store.commit("saveSchema", payload);
+        this.$store.commit("saveSchemaJSV", payload);
       } else if (self.input) {
         axios
           .get(self.input)
@@ -410,7 +410,7 @@ export default {
               self.loadMsg = `<b class="text-success">Schema loaded</b>`;
               payload = {};
               payload["schema"] = schema;
-              this.$store.commit("saveSchema", payload);
+              this.$store.commit("saveSchemaJSV", payload);
             } else if (schema && schema.hasOwnProperty("@context")) {
               self.loadMsg = `<b class="text-danger">ATTENTION! File is JSON-LD and only visualized partially. You should visualize this here: <a href="/schema-playground">Schema Playground</a> for a complete visualization.</b>`;
               if (schema && schema["@graph"]) {
@@ -437,7 +437,7 @@ export default {
                       if (value) {
                         payload = {};
                         payload["schema"] = options[value]["$validation"];
-                        this.$store.commit("saveSchema", payload);
+                        this.$store.commit("saveSchemaJSV", payload);
                         resolve();
                       }
                     });

diff --git a/nuxt-app/pages/markup-generator/index.vue b/nuxt-app/pages/markup-generator/index.vue
@@ -20,6 +20,7 @@ let json = ref({});
 let searchTerm = ref("");
 
 function updateEditor() {
+  store.commit('setUsePrefilled', false);
   store.commit("formPreviewForGuide");
   json.value = store.getters.getPreview;
 }
@@ -193,8 +194,17 @@ onMounted(() => {
               </p>
             </div>
           </div>
+          <div class="text-danger alert-dark m-0 p-1">
+            <h5 class="m-0">Required</h5>
+          </div>
+          <template v-for="(prop, index) in validation.properties" :key="index">
+            <InputBox v-if="store.getters.isRequired(index)" :name="index" :info="prop"></InputBox>
+          </template>
+          <div class="text-info alert-dark m-0 p-1">
+            <h5 class="m-0">Recommended</h5>
+          </div>
           <template v-for="(prop, index) in validation.properties" :key="index">
-            <InputBox :name="index" :info="prop"></InputBox>
+            <InputBox v-if="!store.getters.isRequired(index)" :name="index" :info="prop"></InputBox>
           </template>
         </div>
         <div class="col-sm-12 col-md-5 p-0 mainBackDark">

diff --git a/nuxt-app/pages/portal/[portal_name]/index.vue b/nuxt-app/pages/portal/[portal_name]/index.vue
@@ -16,6 +16,10 @@ let portal_name = route.params.portal_name;
 
 if (portal_name) {
   switch (portal_name) {
+    case "nde":
+      portal = portals.find((item) => item.keyName == portal_name);
+      featuredImg = "https://i.postimg.cc/d1RJrJYk/niaidportal.jpg";
+      break;
     case "niaid":
       portal = portals.find((item) => item.keyName == portal_name);
       featuredImg = "https://i.postimg.cc/J0QNFjbc/niaidportal.jpg";

diff --git a/nuxt-app/store/modules/editor.js b/nuxt-app/store/modules/editor.js
@@ -211,7 +211,8 @@ export const editor = {
       newProp["description"] = payload["description"];
       newProp["name"] = state.prefix + ":" + payload["name"];
       newProp["range"] = payload["range"];
-      newProp["domain"] = state.prefix + ":" + payload["domain"];
+      // domain id can already have prefix, if not add it.
+      newProp["domain"] = payload["domain"].includes(":") ? payload["domain"] : state.prefix + ":" + payload["domain"];
       // if new prop added it should appear in validation by default
       newProp["selected"] = payload["special"];
 
@@ -429,7 +430,7 @@ export const editor = {
               mainProp["rdfs:comment"] =
                 state.schema[i].properties[x]["description"];
               mainProp["rdfs:label"] = state.schema[i].properties[x]["label"];
-              mainProp["schema:domainIncludes"] = state.schema[i]["name"];
+              mainProp["schema:domainIncludes"] = {"@id": state.schema[i]["name"]};
               //Ranges of Property
               if (state.schema[i].properties[x]["range"]) {
                 let ranges = state.schema[i].properties[x]["range"].split(",");

diff --git a/nuxt-app/store/modules/guide.js b/nuxt-app/store/modules/guide.js
@@ -16,6 +16,7 @@ export const guide = {
     bulkJSONItems: [],
     valid: Boolean,
     errors: [],
+    useGuidePreFilled: true,
     guide_prefilled: {
       includedInDataCatalog: {
         name: "N3C Datasets",
@@ -65,6 +66,9 @@ export const guide = {
     saveBulkItems(state, payload) {
       state.bulkJSONItems = payload["items"];
     },
+    setUsePrefilled(state, payload) {
+      state.useGuidePreFilled = payload;
+    },
     updateJsonItem(state, payload) {
       let item = payload["item"];
       let change = payload["change"];
@@ -99,7 +103,7 @@ export const guide = {
     },
     saveSchema(state, payload) {
       state.schema = payload["schema"];
-      console.log("form properties", state.schema?.validation?.properties);
+      console.log("Schema saved", state.schema);
       state.output["@type"] = state.schema?.name || state.schema?.label;
       state.output["@context"] = payload["schema"]["@context"];
       let obj = Object.assign({}, state.output);
@@ -446,9 +450,10 @@ export const guide = {
       let props = state.schema.validation.properties;
       // Add prefilled values from config
       state.output = Object.assign({}, state.output_default);
-
-      for (var key in state.guide_prefilled) {
-        state.output[key] = state.guide_prefilled[key];
+      if(state.useGuidePreFilled){
+        for (var key in state.guide_prefilled) {
+          state.output[key] = state.guide_prefilled[key];
+        }
       }
       for (let key in props) {
         if (props[key].hasOwnProperty("value")) {

diff --git a/nuxt-app/store/modules/json_schema_viewer.js b/nuxt-app/store/modules/json_schema_viewer.js
@@ -5,7 +5,7 @@ export const json_schema_viewer = {
   },
   strict: true,
   mutations: {
-    saveSchema(state, payload) {
+    saveSchemaJSV(state, payload) {
       state.schemaJSV = payload["schema"];
       console.log("🍕🍕🍕 saved schemaJSV..🍕🍕🍕", state.schemaJSV);
     },