Merge pull request #75 from psychoinformatics-de/service-integration

Service integration and more

public/config.json

@@ -15,5 +15,12 @@
         }
     },
     "id_iri": "https://concepts.datalad.org/s/things/v1/id",
-    "show_shapes_wo_id": false
+    "show_shapes_wo_id": false,
+    "use_service": false,
+    "service_base_url": "",
+    "service_endpoints":  {
+        "post-record": "record/{name}&format=ttl",
+        "get-record": "record?id={curie}&format=ttl",
+        "get-records": "records/{name}?format=ttl"
+    }
 }

src/App.vue

@@ -43,11 +43,19 @@
 
 
 <script setup>
-  import { ref } from 'vue'
+  import { ref, provide } from 'vue'
   const explore = ref(true)
   function startExploring() {
       explore.value = true;
   }
+  const canSubmit = ref(true)
+  const submitButtonPressed = ref(false)
+  function submitFn() {
+      submitButtonPressed.value = true
+  }
+  provide('submitButtonPressed', submitButtonPressed)
+  provide('submitFn', submitFn)
+  provide('canSubmit', canSubmit)
 
 </script>
 

src/components/AppHeader.vue

@@ -1,29 +1,55 @@
 <template>
-  <v-app-bar :elevation="1" rounded>
-    <template v-slot:prepend>
-      <v-img
-        :width="36"
-        cover
-        src="../assets/shacl_vue.svg"
-        style="margin-left: 10px;"
-      ></v-img>
-    </template>
+    <v-app-bar :elevation="1" rounded>
+        <template v-slot:prepend>
+            <v-img
+                :width="36"
+                cover
+                src="../assets/shacl_vue.svg"
+                style="margin-left: 10px;"
+            ></v-img>
+        </template>
 
-    <v-app-bar-title> 
-      <code style="font-size: 1em;">shacl-vue</code>
-    </v-app-bar-title>
+        <v-app-bar-title> 
+            <code style="font-size: 1em;">shacl-vue</code>
+        </v-app-bar-title>
 
-    <template v-slot:append>
-      <v-btn 
-        icon="mdi-text-box"
-        href="https://psychoinformatics-de.github.io/shacl-vue/docs/"
-        target="_blank"
-      ></v-btn>
-      <v-btn 
-        icon="mdi-github"
-        href="https://github.com/psychoinformatics-de/shacl-vue"
-        target="_blank"
-      ></v-btn>
-    </template>
-  </v-app-bar>
+        <template v-slot:append>
+
+            <v-tooltip text="Submit" location="bottom">
+                <template v-slot:activator="{ props }">
+                    <v-btn 
+                    icon="mdi-cloud-upload"
+                    @click="submitFn()"
+                    v-bind="props"
+                    :disabled="!canSubmit"
+                    ></v-btn>
+                </template>
+            </v-tooltip>
+            <v-tooltip text="Documentation" location="bottom">
+                <template v-slot:activator="{ props }">
+                    <v-btn 
+                    icon="mdi-text-box"
+                    href="https://psychoinformatics-de.github.io/shacl-vue/docs/"
+                    target="_blank"
+                    v-bind="props"
+                    ></v-btn>
+                </template>
+            </v-tooltip>
+            <v-tooltip text="Source code" location="bottom">
+                <template v-slot:activator="{ props }">
+                    <v-btn 
+                    icon="mdi-github"
+                    href="https://github.com/psychoinformatics-de/shacl-vue"
+                    target="_blank"
+                    v-bind="props"
+                    ></v-btn>
+                </template>
+            </v-tooltip>
+        </template>
+    </v-app-bar>
 </template>
+<script setup>
+    import { inject} from 'vue'
+    const submitFn = inject('submitFn')
+    const canSubmit = inject('canSubmit')
+</script>

src/components/FormEditor.vue

@@ -249,7 +249,7 @@
 <style scoped>
     .scaled-sheet {
         transform: scale(0.9);
-        /* transform-origin: top right; */
+        transform-origin: top;
     }
     .quote-description {
       border-left: 3px solid rgb(154, 153, 153);

src/components/InstancesSelectEditor.vue

@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-    import { inject, watch, onBeforeMount, ref, provide, computed, nextTick} from 'vue'
+    import { inject, watch, onBeforeMount, onMounted, ref, provide, computed, nextTick} from 'vue'
     import { useRules } from '../composables/rules'
     import rdf from 'rdf-ext'
     import {SHACL, RDF, RDFS } from '@/modules/namespaces'
@@ -109,9 +109,15 @@
     const graphData = inject('graphData');
     const allPrefixes = inject('allPrefixes');
     const classData = inject('classData');
+    const config = inject('config');
+    const fetchFromService = inject('fetchFromService');
     const localPropertyShape = ref(props.property_shape)
     const propClass = ref(null)
     propClass.value = localPropertyShape.value[SHACL.class.value] ?? false
+    if (config.value.use_service) {
+        const allclass_array = getAllClasses(propClass.value)
+        await getAllRecordsFromService(allclass_array)
+    }
     getItemsToList()
     const editorComp = ref(null)
     const { rules } = useRules(localPropertyShape.value)
@@ -144,7 +150,7 @@
         removeForm()
     };
     provide('saveFormHandler', saveDialogForm);
-    
+
     // ------------------- //
     // Computed properties //
     // ------------------- //
@@ -178,23 +184,21 @@
         return items
     })
 
+    
+
     // --------- //
     // Functions //
     // --------- //
 
     function valueParser(value) {
         // Parsing internalValue into ref values for separate subcomponent(s)
-        console.log("ValueParser")
-        console.log(value)
         if (!itemsToList.value) return { selectedInstance: null };
         var inst = findObjectByKey(itemsToList.value, "value", value)
         return { selectedInstance: inst ?? null }
     }
 
     function valueCombiner(values) {
         // Determing internalValue from subvalues/subcomponents
-        console.log("ValueCombiner")
-        console.log(values.selectedInstance)
         return values.selectedInstance ? values.selectedInstance.value : null
     }
 
@@ -214,6 +218,30 @@
         addForm(selectedAddItemShapeIRI.value, newNodeIdx.value, 'new')
     }
 
+    function getAllClasses(main_class) {
+        return [main_class].concat(getSubClasses(main_class))
+    }
+
+
+    function getSubClasses(main_class) {
+        // Find quads in the subclass datasetnodes with predicate rdfs:subClassOf
+        // object main_class, and return as an array of terms
+        const subClasses = rdf.grapoi({ dataset: classData })
+            .hasOut(rdf.namedNode(RDFS.subClassOf.value), rdf.namedNode(main_class))
+            .quads();
+        var myArr = []
+        Array.from(subClasses).forEach(quad => {
+            myArr.push(quad.subject.value)
+        });
+        return myArr
+    }
+
+    async function getAllRecordsFromService(iri_array) {
+        for (const iri of iri_array) {
+            const result = await fetchFromService('get-records', iri, allPrefixes)
+        }
+    }
+
     function getItemsToList() {
         // ---
         // The goal of this method is to populate the list of items for the

src/components/MainData.vue

@@ -19,7 +19,6 @@
                         <!-- BROWSE DATA -->
                         <v-tabs-window-item :key="1" :value="1">
                             <v-sheet d-flex d-flex-grow class="pa-4 ml-2" border rounded style="width: 100%;">
-                                <!-- <v-btn text="Download samples.tsv" @click="serializeNodesToTSV"></v-btn> -->
                                 <v-select v-model="selectedFormItem" v-if="prefixes_ready" :items="nodeShapeNamesArray" item-title="name" label="Select" density="compact" style="width: 100%;">
                                     <template v-slot:item="{ props, item }">
                                     <v-list-item v-bind="props" :title="toCURIE(nodeShapeNames[item.raw], shapePrefixes)" @click="selectIRI(nodeShapeNames[item.raw])"></v-list-item>
@@ -155,7 +154,6 @@
     const formData = inject('formData');
     const classData = inject('classData');
     const serializedGraphData = inject('serializedGraphData');
-    const serializeNodesToTSV = inject('serializeNodesToTSV')
     const public_url = ref('')
     const upload_url = ref(null)
     const datatab = ref(1)

src/components/PropertyShapeEditor.vue

@@ -12,16 +12,18 @@
             <span v-if="formData[localNodeUid][localNodeIdx]">
                 <v-row no-gutters v-for="(triple, triple_idx) in formData[localNodeUid][localNodeIdx][my_uid]" :key="localNodeUid + '-' + my_uid + '-' + triple_idx">
                     <v-col cols="9">
-                        <component
-                            v-model="formData[localNodeUid][localNodeIdx][my_uid][triple_idx]"
-                            :is="matchedComponent"
-                            :property_shape="localPropertyShape"
-                            :node_uid="localNodeUid"
-                            :node_idx="localNodeIdx"
-                            :triple_uid="my_uid"
-                            :triple_idx="triple_idx"
-                            >
-                        </component>
+                        <Suspense>
+                            <component
+                                v-model="formData[localNodeUid][localNodeIdx][my_uid][triple_idx]"
+                                :is="matchedComponent"
+                                :property_shape="localPropertyShape"
+                                :node_uid="localNodeUid"
+                                :node_idx="localNodeIdx"
+                                :triple_uid="my_uid"
+                                :triple_idx="triple_idx"
+                                >
+                            </component>
+                        </Suspense>
                     </v-col>
                     <v-col>
                             &nbsp;