oSoc19 · fbrckman · Sep 9, 2019 · Sep 6, 2019
diff --git a/src/components/FormElements/NamespaceTable.vue b/src/components/FormElements/NamespaceTable.vue
@@ -19,6 +19,9 @@
           <sui-table color="green" inverted>
             <sui-table-header>
               <sui-table-row>
+                <sui-table-header-cell class="one wide">
+                  <span class="unclickable">Base URI</span>
+                </sui-table-header-cell>
                 <sui-table-header-cell class="four wide">
                   <span class="unclickable">Prefix</span>
                 </sui-table-header-cell>
@@ -39,6 +42,15 @@
                   v-for="(uri, prefix) of $store.getters.namespaces"
                   :key="prefix"
                 >
+                  <sui-table-cell class="one wide">
+                    <sui-checkbox
+                      v-model="getSelected()[prefix]"
+                      class="clickable"
+                      radio
+                      @click="updateBaseUri(prefix)"
+                    ></sui-checkbox>
+                  </sui-table-cell>
+
                   <sui-table-cell class="four wide">
                     <div :id="prefix + 'prefix'"></div>
                     <div
@@ -59,11 +71,14 @@
                     </div>
                   </sui-table-cell>
 
-                  <sui-table-cell
-                    class="one wide clickable"
-                    @click="deleteElement(prefix)"
-                  >
-                    <sui-icon name="x icon"></sui-icon>
+                  <sui-table-cell class="one wide">
+                    <sui-icon
+                      v-if="!isBaseURI(prefix)"
+                      v-model="selected.prefix"
+                      class="clickable"
+                      name="x icon"
+                      @click="deleteElement(prefix)"
+                    ></sui-icon>
                   </sui-table-cell>
                 </sui-table-row>
               </sui-table-body>
@@ -77,6 +92,7 @@
 
 <script>
 import { ENTER } from "../../util/constants";
+import {extractPrefix} from "../../util/urlParser";
 
 export default {
   name: "NamespaceTable",
@@ -88,7 +104,8 @@ export default {
   },
   data() {
     return {
-      input: ""
+      input: "",
+      selected: {}
     };
   },
   mounted() {
@@ -126,8 +143,8 @@ export default {
         // Check if the input is valid.
         if (!/^[a-zA-Z0-9]+$/i.test(this.input)) return true;
 
-        const newPrefix = this.$store.getters.prefixURI({ prefix: this.input });
-        const oldPrefix = this.$store.getters.prefixURI({ prefix: editRow });
+        const newPrefix = this.$store.getters.prefixURI(this.input);
+        const oldPrefix = this.$store.getters.prefixURI(editRow);
 
         // Check if the prefix is unique.
         if (newPrefix) return newPrefix !== oldPrefix;
@@ -136,13 +153,20 @@ export default {
         if (!"/#".includes(this.input.slice(-1))) return true;
 
         // Check if the uri is unique.
-        const newPrefix = this.$store.getters.uriPrefix({ uri: this.input });
+        const newPrefix = this.$store.getters.uriPrefix(this.input);
         if (newPrefix) return newPrefix !== editRow;
       }
 
       return false; // Default: no errors.
     },
 
+    /**
+     * Update the base URI to the URI corresponding to the given prefix.
+     */
+    updateBaseUri(prefix) {
+      this.$store.commit("setBaseUri", { prefix });
+    },
+
     /**
      * Are we editing the given field in the given row?
      * @returns {boolean}
@@ -177,10 +201,10 @@ export default {
     stopEditing() {
       const { editRow, editField } = this.$props.tableProperties;
       // Check if the input is valid.
-      if (!this.error()) {
-        this.$store.dispatch("stopEditingNamespace", { input: this.input });
-      } else {
+      if (this.error()) {
         this.$store.commit("clearTableEdit");
+      } else {
+        this.$store.dispatch("stopEditingNamespace", { input: this.input });
       }
       // Remove the input field from the table.
       const cell = document.getElementById(editRow + editField);
@@ -193,6 +217,29 @@ export default {
      */
     deleteElement(prefix) {
       this.$store.commit("deletePrefix", { prefix });
+    },
+
+    /**
+     * Check if the given prefix is the current base URI.
+     * @param prefix
+     * @returns {boolean}
+     */
+    isBaseURI(prefix) {
+      const { baseURI, prefixURI } = this.$store.getters;
+      return baseURI === prefixURI(prefix);
+    },
+
+    /**
+     * Get the available prefixes mapped to their checked-ness.
+     * @returns {{string: boolean}}
+     */
+    getSelected() {
+      const { baseURI, namespaces } = this.$store.getters;
+      const selected = {};
+      Object.keys(namespaces).map(prefix => {
+        selected[prefix] = namespaces[prefix] === baseURI;
+      });
+      return selected;
     }
   }
 };

diff --git a/src/components/Modals/PathModal.vue b/src/components/Modals/PathModal.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-  import {ENTER, IRI_REGEX} from "../../util/constants";
+import { ENTER, IRI_REGEX } from "../../util/constants";
 import { TERM } from "../../translation/terminology";
 import ValueType from "../../util/enums/ValueType";
 import { prefixToUri } from "../../util/urlParser";
@@ -49,7 +49,6 @@ export default {
   },
   data() {
     return {
-      uuid: require("uuid/v4"),
       path: ""
     };
   },
@@ -112,7 +111,6 @@ export default {
         } else {
           // Create a new property shape.
           this.$store.dispatch("addPropertyShape", {
-            id: this.uuid(),
             path: this.path
           });
         }

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -127,7 +127,6 @@ export default {
   },
   data() {
     return {
-      uuid: require("uuid/v4"),
       shacl: languages.SHACL,
       shex: languages.SHEX
     };
@@ -140,7 +139,7 @@ export default {
       this.$store.commit("toggleNamespaceModal");
     },
     createNodeShape() {
-      this.$store.dispatch("addNodeShape", this.uuid());
+      this.$store.dispatch("addNodeShape");
     },
     createPropertyShape() {
       this.$store.commit("togglePathModal");

diff --git a/src/store/configModule.js b/src/store/configModule.js
@@ -1,10 +1,12 @@
 import Vue from "vue";
 import { swapKeyValue } from "../util";
 import namespaceModalModule from "./modals/namespaceModalModule";
+import { DEFAULT_BASE_URI } from "../util/constants";
 
 const configModule = {
   state: {
     namespaces: {
+      usd: DEFAULT_BASE_URI,
       rdf: "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
       rdfs: "http://www.w3.org/2000/01/rdf-schema#",
       schema: "http://schema.org/",
@@ -32,7 +34,8 @@ const configModule = {
       oh: "http://semweb.mmlab.be/ns/oh#",
       combust: "http://combust.iminds.be/",
       "dbpedia-owl": "http://dbpedia.org/ontology/"
-    }
+    },
+    baseURI: DEFAULT_BASE_URI
   },
   modules: {
     mModal: namespaceModalModule
@@ -78,6 +81,17 @@ const configModule = {
     deletePrefix(state, args) {
       const { prefix } = args;
       Vue.delete(state.namespaces, prefix);
+    },
+
+    /**
+     * Set the current base URI to the given URI (if given) or to the URI corresponding to the given prefix.
+     * @param state
+     * @param args
+     */
+    setBaseUri(state, args) {
+      const { uri, prefix } = args;
+      if (uri) Vue.set(state, "baseURI", uri);
+      if (prefix) Vue.set(state, "baseURI", state.namespaces[prefix]);
     }
   },
   actions: {
@@ -125,17 +139,26 @@ const configModule = {
      * @param state
      * @returns {*}
      */
-    prefixURI: state => args => {
-      return state.namespaces[args.prefix];
+    prefixURI: state => prefix => {
+      return state.namespaces[prefix];
     },
 
     /**
      * Get the prefix of the given URI.
      * @param state
      * @returns {*}
      */
-    uriPrefix: state => args => {
-      return swapKeyValue(state.namespaces)[args.uri];
+    uriPrefix: state => uri => {
+      return swapKeyValue(state.namespaces)[uri];
+    },
+
+    /**
+     * Get the current base URI.
+     * @param state
+     * @returns {string}
+     */
+    baseURI: state => {
+      return state.baseURI;
     }
   }
 };

diff --git a/src/store/shapeModule.js b/src/store/shapeModule.js
@@ -1,8 +1,8 @@
 import Vue from "vue";
 import constraintModule from "./constraintModule";
-import { getNonOverlappingCoordinates } from "../util";
+import {generateUUID, getNonOverlappingCoordinates} from "../util";
 import coordinateModule from "./coordinateModule";
-import { LABEL, SHACL_URI } from "../util/constants";
+import { IDENTIFIER, LABEL, SHACL_URI } from "../util/constants";
 import { TERM } from "../translation/terminology";
 import getValueType from "../util/enums/ValueType";
 import ShaclTranslator from "../translation/shaclTranslator";
@@ -180,32 +180,27 @@ const shapeModule = {
     /* ADD ========================================================================================================== */
 
     /**
-     * Add an empty node shape with the given id.
+     * Add an empty node shape.
      * @param store
-     * @param id
      */
-    addNodeShape({ commit, getters }, id) {
+    addNodeShape({ commit, getters }) {
       const object = {
-        "@id": id,
+        "@id": generateUUID(getters.baseURI),
         "@type": [TERM.NodeShape]
       };
-
       commit("addShape", { object, bottomYs: getters.allBottomYs });
     },
 
     /**
-     * Add a property shape with the given id.
+     * Add a new property shape.
      * @param store
      * @param args
      */
     addPropertyShape({ commit, getters }, args) {
-      const { id, path } = args;
-      // Only do so if there is no property shape with this ID yet.
-      if (!getters.shapeWithID(id)) {
-        const object = { "@id": id };
-        object[TERM.path] = [{ "@id": path }];
-        commit("addShape", { object, bottomYs: getters.allBottomYs });
-      }
+      const { path } = args;
+      const object = { "@id": generateUUID(getters.baseURI) };
+      object[TERM.path] = [{ "@id": path }];
+      commit("addShape", { object, bottomYs: getters.allBottomYs });
     },
 
     /* EDIT ========================================================================================================= */

diff --git a/src/util/constants.js b/src/util/constants.js
@@ -2,10 +2,12 @@ import { TERM } from "../translation/terminology";
 
 export const ENTER = 13; // Enter key code.
 
+export const DEFAULT_BASE_URI = "http://example.org/ns/unshacled/";
+export const IDENTIFIER = "shapes";
+export const SCHEMA_URI = "http://schema.org/"; // Used for the `path` predicate.
+export const LABEL = "http://www.w3.org/2000/01/rdf-schema#label";
+// Used to change SHACL specific predicates to the internal model.
 export const SHACL_URI = "http://www.w3.org/ns/shacl#";
-export const SCHEMA_URI = "http://schema.org/";
-export const RDFS_URI = "http://www.w3.org/2000/01/rdf-schema#";
-export const LABEL = `${RDFS_URI}label`;
 
 // Indicates which constraints should be visualized in a single entry.
 export const SINGLE_ENTRY = ["property"];

diff --git a/src/util/index.js b/src/util/index.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 import { clone } from "ramda";
+import {IDENTIFIER} from "./constants";
 
 export { default as getNonOverlappingCoordinates } from "./getNonOverlappingCoordinates"; // prettier-ignore
 export { default as traverse } from "./traverse";
@@ -53,4 +54,13 @@ export function swapKeyValue(object) {
     output[object[key]] = key;
   });
   return output;
-}
+}
+
+/**
+ * Generate an UUID using the current set base URI and the `uuid/v4` generator.
+ * @param baseURI
+ * @returns {string}
+ */
+export function generateUUID(baseURI) {
+  return `${baseURI}${IDENTIFIER}/${require("uuid/v4")()}`;
+}
diff --git a/src/util/urlParser.js b/src/util/urlParser.js
@@ -1,5 +1,6 @@
 import { swapKeyValue } from "./index";
 import { CUSTOM_URI } from "../translation/terminology";
+import { IDENTIFIER } from "./constants";
 
 /**
  * Takes the name out of an url if possible.
@@ -55,10 +56,18 @@ export function prefixToUri(namespaces, string) {
  * @returns {string}
  */
 export function extractUrl(string) {
-  if (string.indexOf("#") !== -1)
-    return string.substring(0, string.indexOf("#") + 1);
-  if (string.indexOf("/") !== -1)
-    return string.substring(0, string.lastIndexOf("/") + 1);
+  if (string.indexOf("#") !== -1) {
+    const url = string.substring(0, string.indexOf("#") + 1);
+    const id = url.indexOf(IDENTIFIER);
+    if (id !== -1) return string.substring(0, id);
+    return url;
+  }
+  if (string.indexOf("/") !== -1) {
+    const url = string.substring(0, string.lastIndexOf("/") + 1);
+    const id = url.indexOf(IDENTIFIER);
+    if (id !== -1) return string.substring(0, id);
+    return url;
+  }
   return "";
 }