feat: ✨ metakg overview

marcodarko · marcodarko · commit 8c78e11b4653 · 2024-02-08T13:13:26.000-08:00
diff --git a/web-app/src/assets/app.css b/web-app/src/assets/app.css
@@ -511,10 +511,10 @@ a.middle-indicator-text {
 .clearButtonSmall {
   background-color: rgba(255, 255, 255, 0.1);
   padding: 3px 5px;
-  border: solid rgb(250, 109, 0) 2px;
+  border: solid rgb(158, 0, 250) 2px;
   border-radius: 10px;
   text-decoration: none;
-  color: rgb(250, 109, 0);
+  color: rgb(187, 0, 250);
   font-size: 0.9em;
   font-weight: light;
   font-variant: small-caps;
diff --git a/web-app/src/components/EntityPill.vue b/web-app/src/components/EntityPill.vue
@@ -6,7 +6,17 @@
     <div></div>
     <div class="yellow">
       <ul>
-        <li v-for="item in subjects" :key="item">{{ item }}</li>
+        <li v-for="item in subjects_viewed" :key="item">{{ item }}</li>
+        <li
+          v-if="!viewingAll"
+          @click="
+            limit = subjects.length;
+            viewingAll = true;
+          "
+          class="blue-text pointer"
+        >
+          <b>See All ({{ subjects.length }})</b>
+        </li>
       </ul>
     </div>
   </div>
@@ -17,13 +27,28 @@ export default {
   name: 'EntityPill',
   data: function () {
     return {
-      badgeID: Math.floor(Math.random() * 90000) + 10000
+      badgeID: Math.floor(Math.random() * 90000) + 10000,
+      limit: 7
     };
   },
   props: ['object', 'subjects'],
   computed: {
     color: function () {
       return this.$store.getters.getEntityColor(this.object);
+    },
+    subjects_viewed: function () {
+      if (this.subjects.length < this.limit) {
+        return this.subjects;
+      } else {
+        return this.subjects.slice(0, this.limit);
+      }
+    },
+    viewingAll: function () {
+      if (this.subjects.length <= this.limit) {
+        return true;
+      } else {
+        return false;
+      }
     }
   }
 };
diff --git a/web-app/src/components/RegistryItem.vue b/web-app/src/components/RegistryItem.vue
@@ -47,6 +47,20 @@
             </span>
           </template>
         </router-link>
+        <router-link
+          target="_blank"
+          data-tippy-content="Explore This API's Knowledge Graph"
+          :to="{
+            path: '/portal/translator/metakg',
+            query: {
+              q: 'api.smartapi.id:' + api._id
+            }
+          }"
+          class="versionBadge purple pointer"
+        >
+          <img class="scale-in-center" src="@/assets/img/metakg-01.png" width="10" /> MetaKG
+          <i class="fa fa-external-link" aria-hidden="true"></i>
+        </router-link>
       </div>
       <template v-if="api.info.description && api.info.description.length > 500">
         <CollapsibleText :text="api.info.description"></CollapsibleText>
diff --git a/web-app/src/components/RegistryMetaKG.vue b/web-app/src/components/RegistryMetaKG.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="p-1">
-    <p class="orange-text m-0" style="padding-bottom: 10px">
-      View biomedical entity knowledge available
+    <p class="purple-text m-0" style="padding-bottom: 10px">
+      <img class="scale-in-center" src="@/assets/img/metakg-01.png" width="20" /> View MetaKG
       <button @click="open = !open" type="button" class="clearButtonSmall">
         {{ open ? 'CLOSE' : 'OPEN' }}
       </button>
@@ -10,7 +10,17 @@
       <h3 class="p-2 grey-text" v-if="loading">Loading...</h3>
       <template v-if="!loading && !noHits">
         <div class="col s12 m8">
-          <h5 style="font-weight: lighter">Entity Relationship Overview</h5>
+          <h5 style="font-weight: lighter">
+            MetaKG Entity Overview
+            <small class="right"
+              >Edges ({{ numberWithCommas(total) }}) | Objects ({{ objects.length }}) | Subjects ({{
+                subjects.length
+              }})</small
+            >
+          </h5>
+          <p v-if="total && total > size" class="center yellow lighten-4 orange-text rounded">
+            This is just a subset of the available MetaKG
+          </p>
           <div v-if="graphData" style="max-height: 500px; overflow-y: scroll">
             <div class="d-flex flex-wrap align-items-start">
               <template v-for="(subjects, object) in graphData" :key="object">
@@ -19,16 +29,19 @@
             </div>
           </div>
         </div>
-        <div class="col s12 m4 grey darken-3">
+        <div class="col s12 m4 grey darken-4">
           <div class="d-flex justify-content-center">
             <img class="scale-in-center" src="@/assets/img/metakg-01.png" width="80" />
             <h5 class="white-text center" style="font-weight: lighter">MetaKG Explorer</h5>
           </div>
           <template v-if="networkData">
             <SimpleNetwork :nodes="networkData.nodes" :edges="networkData.edges"></SimpleNetwork>
           </template>
+          <p v-if="total && total > size" class="center yellow lighten-2 black-text rounded">
+            This is just a subset of the available MetaKG
+          </p>
           <p class="center">
-            <span class="white-text caps"> Explore {{ api.info.title }}'s MetaKG </span>
+            <span class="white-text caps"> Explore the full {{ api.info.title }}'s MetaKG </span>
           </p>
           <div class="d-flex justify-content-center align-items-center p-1">
             <router-link
@@ -37,12 +50,11 @@
               :to="{
                 path: '/portal/translator/metakg',
                 query: {
-                  'api.x-translator.component': api?.info?.['x-translator']?.component,
-                  'api.name': api.info.title
+                  q: 'api.smartapi.id:' + api._id
                 }
               }"
-              >Try It Now</router-link
-            >
+              >Try It Now <i class="fa fa-external-link" aria-hidden="true"></i
+            ></router-link>
           </div>
         </div>
       </template>
@@ -77,7 +89,11 @@ export default {
       loading: true,
       graphData: null,
       networkData: null,
-      noHits: false
+      noHits: false,
+      total: 0,
+      size: 400,
+      objects: [],
+      subjects: []
     };
   },
   watch: {
@@ -90,6 +106,9 @@ export default {
     }
   },
   methods: {
+    numberWithCommas(x) {
+      return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');
+    },
     getNetworkData(hits) {
       let self = this;
       let nodes = new Set();
@@ -126,6 +145,7 @@ export default {
           data: {
             weight: nodeWeight[node] + 100,
             id: node,
+            name: node[0],
             color: self.$store.getters.getEntityColor(node)
           }
         };
@@ -135,20 +155,32 @@ export default {
         edges: edges
       };
     },
+    getFacetData(facets) {
+      if (facets?.['object.raw']?.terms) {
+        this.objects = facets?.['object.raw']?.terms.map((v) => v.term);
+      }
+      if (facets?.['subject.raw']?.terms) {
+        this.subjects = facets?.['subject.raw']?.terms.map((v) => v.term);
+      }
+    },
     sendRequest() {
       let self = this;
       let base = process.env.NODE_ENV == 'development' ? 'https://dev.smart-api.info' : '';
       axios
         .get(
           base +
-            '/api/metakg?size=20&q=(api.name:"' +
+            '/api/metakg?q=(api.name:"' +
             self.api.info.title +
-            '")&size=300&fields=object,subject'
+            '")&size=' +
+            self.size +
+            '&fields=object,subject&facet_size=300&aggs=object.raw,subject.raw'
         )
         .then((res) => {
           let data = {};
           if (res.data?.hits && res.data?.hits?.length) {
+            self.total = res.data?.total;
             self.getNetworkData(res.data.hits);
+            self.getFacetData(res.data?.facets);
             res.data.hits.forEach((item) => {
               if (!(item.subject in data)) {
                 data[item.subject] = [item.object];
@@ -158,6 +190,20 @@ export default {
                 }
               }
             });
+            let sortable = [];
+            for (var key in data) {
+              sortable.push([key, data[key]]);
+            }
+            sortable.sort(function (a, b) {
+              return a[1].length - b[1].length;
+            });
+            sortable.reverse();
+            let objSorted = {};
+            sortable.forEach(function (item) {
+              objSorted[item[0]] = item[1].sort();
+            });
+            data = objSorted;
+
             self.graphData = data;
             self.loading = false;
             self.noHits = false;
diff --git a/web-app/src/components/SimpleNetwork.vue b/web-app/src/components/SimpleNetwork.vue
@@ -4,6 +4,7 @@
 
 <script>
 import cytoscape from 'cytoscape';
+import tippy from 'tippy.js';
 
 export default {
   name: 'SimpleNetwork',
@@ -21,6 +22,7 @@ export default {
   },
   methods: {
     draw() {
+      let self = this;
       this.cy = cytoscape({
         container: document.getElementById('sn' + this.badgeID),
         elements: [...this.edges, ...this.nodes],
@@ -29,6 +31,12 @@ export default {
           {
             selector: 'node',
             style: {
+              content: 'data(name)',
+              'text-wrap': 'wrap',
+              'text-valign': 'center',
+              'text-halign': 'center',
+              'font-size': '2em',
+              color: 'white',
               'background-color': 'data(color)',
               'z-index': 1000,
               width: 'data(weight)',
@@ -47,6 +55,54 @@ export default {
           }
         ]
       });
+
+      function readableName(text) {
+        const result = text.replace(/([A-Z])/g, '\n $1');
+        return result.charAt(0).toUpperCase() + result.slice(1);
+      }
+
+      function makePopper(ele) {
+        let ref = ele.popperRef();
+        ele.tippy = tippy(document.createElement('div'), {
+          getReferenceClientRect: ref.getBoundingClientRect,
+          placement: 'top',
+          trigger: 'mouseenter', // mandatory
+          arrow: true,
+          interactive: true,
+          allowHTML: true,
+          theme: 'light',
+          appendTo: document.body, // or append dummyDomEle to document.body
+          onShow: function (instance) {
+            instance.setContent(
+              '<div class="white-text" style="padding:3px 5px;background:' +
+                ele.data('color') +
+                '">' +
+                readableName(ele.id()) +
+                '</div>'
+            );
+          },
+          onUntrigger: function (instance) {
+            instance.show();
+          }
+        });
+      }
+
+      this.cy.ready(function () {
+        self.cy.elements().forEach(function (ele) {
+          if (ele.isNode()) {
+            makePopper(ele);
+          }
+        });
+      });
+
+      this.cy.userZoomingEnabled(false);
+
+      this.cy.elements().unbind('mouseover');
+      this.cy.elements().bind('mouseover', (event) => event.target?.tippy?.show());
+
+      this.cy.elements().unbind('mouseout');
+      this.cy.elements().bind('mouseout', (event) => event.target?.tippy?.hide());
+
       this.cy
         .layout({
           name: 'concentric',
@@ -55,8 +111,6 @@ export default {
           minNodeSpacing: 100
         })
         .run();
-
-      this.cy.userZoomingEnabled(false);
     }
   },
   mounted: function () {
