Adjust components to display a registry

In particular, add more logic to determine a registry's name so that we know the source of a scheme after changes in #670.

src/components/RegistryInfo.vue

@@ -12,7 +12,7 @@
         :class="{
           'fontWeight-heavy': $store.state.settings.settings.mappingBrowserShowRegistry[registry.uri] !== false
         }">
-        {{ $jskos.prefLabel(registry, { language: locale }) }}
+        {{ registryName }}
       </span>
       <a
         v-if="showDetails"
@@ -73,6 +73,7 @@
 
 <script>
 import RegistryNotation from "./RegistryNotation.vue"
+import { getRegistryName } from "@/utils"
 
 // Import mixins
 import auth from "../mixins/auth.js"
@@ -104,6 +105,11 @@ export default {
       default: false,
     },
   },
+  computed: {
+    registryName() {
+      return getRegistryName({ registry: this.registry, locale: this.locale })
+    },
+  },
 }
 </script>
 

src/components/RegistryName.vue

@@ -6,6 +6,7 @@
 
 <script>
 import computed from "../mixins/computed.js"
+import { getRegistryName } from "@/utils"
 
 export default {
   name: "RegistryName",
@@ -21,15 +22,8 @@ export default {
     },
   },
   computed: {
-    registryName: function () {
-      let label = this.$jskos.prefLabel(this.registry, { language: this.locale })
-      let notation = this.$jskos.notation(this.registry)
-      if (label) {
-        return label.replace(notation, function () { return "<b>"+notation+"</b>" })
-      } else {
-        notation = 0
-        return notation || "?"
-      }
+    registryName() {
+      return getRegistryName({ registry: this.registry, locale: this.locale })
     },
     tooltipHtml() {
       return this.$jskos.definition(this.registry, { language: this.locale }).join("<br>")

src/components/RegistryNotation.vue

@@ -1,13 +1,14 @@
 <template>
   <div
+    v-if="notation"
     v-b-tooltip.html.left="tooltip ? $jskos.prefLabel(registry, { language: locale }) : ''"
     :class="{
       [isCurrentRegistry ? 'registry-current-enabled' : 'registry-enabled']: !disabled,
       'registry-notation-current': isCurrentRegistry,
     }"
-    :style="`width: ${18 + 9 * ($jskos.notation(registry).length - 1)}px;`"
+    :style="`width: ${18 + 9 * (notation.length - 1)}px;`"
     class="registry-notation">
-    {{ $jskos.notation(registry) }}
+    {{ notation }}
   </div>
 </template>
 
@@ -35,6 +36,9 @@ export default {
     isCurrentRegistry() {
       return this.$jskos.compareFast(this.registry, this.$store.getters.getCurrentRegistry)
     },
+    notation() {
+      return this.$jskos.notation(this.registry) || ""
+    },
   },
 }
 </script>

src/utils/index.js

@@ -0,0 +1,28 @@
+import _ from "lodash"
+import jskos from "jskos-tools"
+
+export function getRegistryName({ registry, locale }) {
+  if (!registry) {
+    return ""
+  }
+  let label = jskos.prefLabel(registry, { language: locale, fallbackToUri: false })
+  if (label) {
+    return label
+  }
+  // Try _config (i.e. result of /status endpoint)
+  label = _.get(registry, "_config.title")
+  if (label) {
+    const baseUrl = _.get(registry, "_config.baseUrl")
+    return baseUrl ? `${label} (${baseUrl})` : label
+  }
+  // Try URI
+  if (registry.uri) {
+    return registry.uri
+  }
+  // Try API URL
+  label = _.get(registry, "_api.api")
+  if (label) {
+    return label
+  }
+  return ""
+}