From 2e9ec3cbc00a79284c6348a3df352c1ec67c95f1 Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Fri, 26 Apr 2024 01:50:12 -0400
Subject: [PATCH] Reorganized model URLs and added filter by model URL.

---
 frontend/src/components/CAMKPFrontend.vue | 10 ++--
 frontend/src/components/DisplayCAM.vue    | 20 ++++----
 frontend/src/components/SearchCAMs.vue    | 57 ++++++++++++++++-------
 3 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/CAMKPFrontend.vue b/frontend/src/components/CAMKPFrontend.vue
index f449757..6e03f57 100644
--- a/frontend/src/components/CAMKPFrontend.vue
+++ b/frontend/src/components/CAMKPFrontend.vue
@@ -5,12 +5,12 @@ import SearchCAMs from "./SearchCAMs.vue";
 
 // Some editable
 const automatCAMKPEndpoint = ref("https://automat.renci.org/cam-kp")
-const selectedModel = ref({})
-const searchIds = ref<string[]>([]);
+const selectedModelURL = ref('')
+const searchIds = ref<Set<string>>(new Set<string>());
 
-function changeSelectedModel(modelName: string) {
+function changeSelectedModel(modelURL: string) {
   // Allows other components to change the selected model.
-  selectedModel.value = modelName;
+  selectedModelURL.value = modelURL;
 }
 
 function changeSearchIds(searchIdList: string[]) {
@@ -41,7 +41,7 @@ function changeSearchIds(searchIdList: string[]) {
 
     <div class="row">
       <SearchCAMs :automatCAMKPEndpoint="automatCAMKPEndpoint" :changeSelectedModel="changeSelectedModel" :changeSearchIds="changeSearchIds" />
-      <DisplayCAM :selected-model="selectedModel" :search-ids="searchIds"></DisplayCAM>
+      <DisplayCAM :selected-model-u-r-l="selectedModelURL" :search-ids="searchIds"></DisplayCAM>
     </div>
 
     <div class="accordion" id="advancedOptionsAccordion">
diff --git a/frontend/src/components/DisplayCAM.vue b/frontend/src/components/DisplayCAM.vue
index dcd4e95..785e0e7 100644
--- a/frontend/src/components/DisplayCAM.vue
+++ b/frontend/src/components/DisplayCAM.vue
@@ -4,7 +4,7 @@ import {urlToID} from "./shared.ts";
 
 export interface Props {
   automatCAMKPEndpoint?: string,
-  selectedModel: object,
+  selectedModelURL: string,
   searchIds: Set<string>,
 }
 
@@ -13,8 +13,6 @@ const props = withDefaults(defineProps<Props>(), {
   searchIDs: new Set(),
 });
 
-const modelNotSelected = computed(() => !('url' in props.selectedModel));
-
 const downloadInProgress = ref(false);
 const modelRows = ref([]);
 const spos = ref([]);
@@ -32,9 +30,7 @@ function getPredicates(fromId: string, toId: string) {
   }).sort();
 }
 
-watch(() => props.selectedModel, (_, model) => {
-  const modelURL = model.url;
-
+watch(() => props.selectedModelURL, (_, modelURL) => {
   modelRows.value = [];
   spos.value = [];
   labels.value = {};
@@ -85,7 +81,7 @@ async function getModelRows(modelURL: string) {
 <template>
 
   <div class="col-8">
-    <div class="card my-2" v-if="modelNotSelected">
+    <div class="card my-2" v-if="!selectedModelURL">
       <div class="card-header">
         No model selected. Please search for one using the controls on the left.
       </div>
@@ -93,13 +89,13 @@ async function getModelRows(modelURL: string) {
 
     <div class="card my-2" v-if="downloadInProgress">
       <div class="card-header">
-        Download of CAM <a target="cam" :href="selectedModel.url">{{selectedModel.url}}</a> in progress ...
+        Download of CAM <a target="cam" :href="selectedModelURL">{{ selectedModelURL }}</a> in progress ...
       </div>
     </div>
 
-    <div id="edges" class="card my-2" v-if="!downloadInProgress && !modelNotSelected">
+    <div id="edges" class="card my-2" v-if="!downloadInProgress && selectedModelURL">
       <div class="card-header">
-        <strong>Edges in selected CAM:</strong> <a target="cam" :href="selectedModel.url">{{selectedModel.url}}</a> (<a href="#relationships">Relationships</a>)
+        <strong>Edges in selected CAM:</strong> <a target="cam" :href="selectedModelURL">{{ selectedModelURL }}</a> (<a href="#relationships">Relationships</a>)
       </div>
       <div class="card-body">
         <table class="table table-bordered mb-2">
@@ -142,9 +138,9 @@ async function getModelRows(modelURL: string) {
 
   <!-- This view is hard to compress, so let's give it the whole screen -->
   <div class="col-12">
-    <div id="relationships" class="card my-2" v-if="!downloadInProgress && !modelNotSelected">
+    <div id="relationships" class="card my-2" v-if="!downloadInProgress && selectedModelURL">
       <div class="card-header">
-        <strong>Relationships in selected CAM:</strong> <a target="cam" :href="selectedModel.url">{{selectedModel.url}}</a> (<a href="#edges">Edges</a>)
+        <strong>Relationships in selected CAM:</strong> <a target="cam" :href="selectedModelURL">{{ selectedModelURL }}</a> (<a href="#edges">Edges</a>)
       </div>
       <div class="card-body">
         <div class="table-responsive">
diff --git a/frontend/src/components/SearchCAMs.vue b/frontend/src/components/SearchCAMs.vue
index b4dca93..2d85876 100644
--- a/frontend/src/components/SearchCAMs.vue
+++ b/frontend/src/components/SearchCAMs.vue
@@ -16,7 +16,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 // We need to track the selected model (as well as letting the caller know via changeSelectedModel()
-const selectedModel = ref({});
+const selectedModelURL = ref('');
 
 // Store results.
 const results = ref([]);
@@ -26,6 +26,7 @@ const subjectOrObjectCURIEsCSV = ref('');
 const subjectCURIEsCSV = ref('');
 const objectCURIEsCSV = ref('');
 const predicateCURIEsCSV = ref('');
+const modelStartsWith = ref('');
 const limit = ref(100);
 
 const errors = ref([]);
@@ -51,6 +52,7 @@ async function updateModelList() {
         subjectCURIEs,
         predicateCURIEs,
         objectCURIEs,
+        modelStartsWith.value,
         limit.value
     );
 
@@ -64,7 +66,7 @@ async function updateModelList() {
 }
 
 
-async function searchModels(subjectOrObjectCURIEs: string[] = [], subjectCURIEs: string[] = [], predicateCURIEs: string[] = [], objectCURIEs: string[] = [], limit=100): Promise<string[]> {
+async function searchModels(subjectOrObjectCURIEs: string[] = [], subjectCURIEs: string[] = [], predicateCURIEs: string[] = [], objectCURIEs: string[] = [], modelURLStartsWith: string = '', limit=100): Promise<string[]> {
   /*
    * Search for models using the search criteria provided. Any search criteria that is empty is ignored. Search criteria with multiple values are ORed,
    * but the overall query is ANDed (i.e. a particular predicate type and a object node).
@@ -72,6 +74,8 @@ async function searchModels(subjectOrObjectCURIEs: string[] = [], subjectCURIEs:
    * - subjectCURIEs: CURIEs in the subject slot.
    * - predicateCURIEs: CURIEs in the predicate slot.
    * - objectCURIEs: CURIEs in the object slot.
+   * - modelURLStartsWith: The string that the model URL should start with, case-sensitive.
+   * - limit: The maximum number of models to return.
    */
 
   // Set up node selects.
@@ -118,10 +122,15 @@ async function searchModels(subjectOrObjectCURIEs: string[] = [], subjectCURIEs:
   if(subject_or_object_selects.length > 0) {
     selects.push(subject_or_object_selects.map(select => `(${select})`).join(' AND '));
   }
-  const select_query = selects.join(' AND ');
+
+  // Deal with modelURLStartsWith.
+  if(modelURLStartsWith) {
+    selects.push(`(ANY(url IN p.xref WHERE url STARTS WITH '${modelURLStartsWith.replaceAll("'", '')}'))`);
+  }
 
   // Generate query.
-  let query = `MATCH (s)-[p]-(o) RETURN DISTINCT p.xref LIMIT ${limit}`;
+  let query = `MATCH (s)-[p]-(o) RETURN DISTINCT p.xref, s, o, TYPE(p) AS pred_type LIMIT ${limit}`;
+  const select_query = selects.join(' AND ');
   if (select_query.length > 0) {
     query = `MATCH (s)-[p]-(o) WHERE ${select_query} RETURN DISTINCT p.xref, s, o, TYPE(p) AS pred_type LIMIT ${limit}`
   }
@@ -147,7 +156,7 @@ async function searchModels(subjectOrObjectCURIEs: string[] = [], subjectCURIEs:
 
   const rows = j['results'][0]['data'].flatMap(row => ({
     id: urlToID(row['row'][0][0]),
-    url: row['row'][0][0],
+    urls: row['row'][0],
     subj: row['row'][1],
     obj: row['row'][2],
     predicate: row['row'][3],
@@ -185,6 +194,17 @@ async function searchModels(subjectOrObjectCURIEs: string[] = [], subjectCURIEs:
           <label for="objectCURIEs" class="form-label">Object CURIEs</label>
           <input type="text" class="form-control" id="objectCURIEs" placeholder="CHEMBL.COMPOUND:CHEMBL158, PUBCHEM.COMPOUND:5742832" v-model="objectCURIEsCSV">
         </div>
+        <div class="mb-3">
+          <label for="modelStartsWith" class="form-label">Model starts with</label>
+          <ul>
+            <li>Examples</li>
+            <ul class="small">
+              <li>GO: <code>http://model.geneontology.org/</code></li>
+              <li>CTD: <code>http://ctdbase.org/detail.go?type=relationship&ixnId=</code></li>
+            </ul>
+          </ul>
+          <input type="text" class="form-control" id="modelStartsWith" v-model="modelStartsWith">
+        </div>
         <div class="mb-3">
           <label for="limit" class="form-label">Limit</label>
           <input type="text" class="form-control" id="limit" v-model="limit">
@@ -204,23 +224,26 @@ async function searchModels(subjectOrObjectCURIEs: string[] = [], subjectCURIEs:
       <div class="card-header">
         <strong>Search results ({{results.length}})</strong>
       </div>
-      <div class="card-body">
-        <table class="table table-bordered mb-2">
+      <div class="card-body p-0">
+        <table class="table table-bordered ">
           <thead>
           <tr>
-            <th>Models</th>
+            <th>Edges</th>
           </tr>
           </thead>
           <tbody>
-          <tr v-for="result in results" @click="selectedModel = result; changeSelectedModel(result)" :class="(selectedModel.url == result.url) ? 'table-active' : ''">
-            <td>{{result.id}} (<a :href="result.url" target="model-url">URL</a>, <a href="#edges">Relationships</a>, <a href="#relationships">Relationships</a>)
-              <ul v-if="result.subj || result.predicate || result.obj">
-                <li v-if="result.subj">{{result.subj.id}} ("{{result.subj.name}}")</li>
-                <li>{{result.predicate}}</li>
-                <li v-if="result.obj">{{result.obj.id}} ("{{result.obj.name}}")</li>
-              </ul>
-            </td>
-          </tr>
+            <template v-for="result in results">
+              <tr v-for="url in result.urls" @click="selectedModelURL = url; changeSelectedModel(url)" :class="(selectedModelURL === url) ? 'table-active' : ''">
+                <td>
+                  {{urlToID(url)}} (<a :href="url" target="model-url">URL</a>)
+                  <ul v-if="result.subj || result.predicate || result.obj">
+                    <li v-if="result.subj">{{result.subj.id}} ("{{result.subj.name}}")</li>
+                    <li>{{result.predicate}}</li>
+                    <li v-if="result.obj">{{result.obj.id}} ("{{result.obj.name}}")</li>
+                  </ul>
+                </td>
+              </tr>
+            </template>
           </tbody>
         </table>
       </div>