Add modal to show document metadata

app/server/package.json

@@ -17,11 +17,13 @@
     "axios": "^0.18.0",
     "chart.js": "^2.7.2",
     "highlight.js": "^9.12.0",
+    "lodash.isempty": "^4.4.0",
     "marked": "^0.3.19",
     "swiper": "^4.3.3",
     "vue": "^2.5.16",
     "vue-chartjs": "^3.4.0",
     "vue-debounce": "^1.1.0",
+    "vue-json-pretty": "^1.6.0",
     "vue-loader": "^15.2.4",
     "vue-shortkey": "^3.1.6"
   },

app/server/static/js/annotation.pug

@@ -83,6 +83,22 @@ div.columns(v-cloak="")
           style="line-height: 150%"
         )
 
+    div.modal(v-bind:class="{ 'is-active': isMetadataActive }")
+      div.modal-background
+      div.modal-card
+        header.modal-card-head
+          p.modal-card-title Document Metadata
+          button.delete(
+            v-on:click="isMetadataActive = !isMetadataActive"
+            aria-label="close"
+          )
+        section.modal-card-body.modal-card-body-footer
+          vue-json-pretty(
+            v-bind:data="documentMetadata"
+            v-bind:show-double-quotes="false"
+            v-bind:show-line="false"
+          )
+
     div.columns.is-multiline.is-gapless.is-mobile.is-vertical-center
       div.column.is-3
         progress.progress.is-inline-block(
@@ -90,7 +106,7 @@ div.columns(v-cloak="")
           v-bind:value="achievement"
           max="100"
         ) 30%
-      div.column.is-8
+      div.column.is-7
         span.ml10
           strong {{ total - remaining }}
         | /
@@ -99,6 +115,14 @@ div.columns(v-cloak="")
         a.button(v-on:click="isAnnotationGuidelineActive = !isAnnotationGuidelineActive")
           span.icon
             i.fas.fa-book
+      div.column.is-1.has-text-right
+        a.button(
+          v-on:click="isMetadataActive = !isMetadataActive && documentMetadata != null"
+          v-bind:disabled="documentMetadata == null"
+          v-bind:title="documentMetadata == null ? 'No document metadata available.' : null"
+        )
+          span.icon
+            i.fas.fa-box
 
     block annotation-area
 

app/server/static/js/demo/demo_mixin.js

@@ -13,6 +13,7 @@ const annotationMixin = {
       searchQuery: '',
       picked: 'all',
       annotationId: 100,
+      isMetadataActive: false,
       isAnnotationGuidelineActive: false,
     };
   },

app/server/static/js/mixin.js

@@ -1,5 +1,7 @@
 import * as marked from 'marked';
 import hljs from 'highlight.js';
+import VueJsonPretty from 'vue-json-pretty';
+import isEmpty from 'lodash.isempty';
 import HTTP from './http';
 import Messages from './messages.vue';
 
@@ -36,6 +38,8 @@ const storeOffsetInUrl = (offset) => {
 };
 
 export const annotationMixin = {
+  components: { VueJsonPretty },
+
   data() {
     return {
       pageNumber: 0,
@@ -50,6 +54,7 @@ export const annotationMixin = {
       offset: getOffsetFromUrl(window.location.href),
       picked: 'all',
       count: 0,
+      isMetadataActive: false,
       isAnnotationGuidelineActive: false,
     };
   },
@@ -179,6 +184,20 @@ export const annotationMixin = {
       });
     },
 
+    documentMetadata() {
+      const document = this.docs[this.pageNumber];
+      if (document == null || document.meta == null) {
+        return null;
+      }
+
+      const metadata = JSON.parse(document.meta);
+      if (isEmpty(metadata)) {
+        return null;
+      }
+
+      return metadata;
+    },
+
     id2label() {
       const id2label = {};
       for (let i = 0; i < this.labels.length; i++) {