Use canonical_id, protein_evidence_map and synonyms

dd-code-api#15

web/src/components/CondensateDetailPage.vue

@@ -37,12 +37,18 @@
                                                 {{response.data.species_name}}
                                             </div>
                                         </div>
+                                        <!--<div class="row">-->
+                                          <!--<div class="text col-sm-3">Evidence Stars</div>-->
+                                          <!--<div class="col-sm-9 tooltipped tooltipped-w"-->
+                                               <!--:aria-label="getDbNames(response.data.data_sources)">-->
+                                            <!--<span v-for="(item, index) in getRating(response.data.data_sources)" :class="item" v-bind:key="index"/>-->
+                                          <!--</div>-->
+                                        <!--</div>-->
                                         <div class="row">
-                                          <div class="text col-sm-3">Evidence Stars</div>
-                                          <div class="col-sm-9 tooltipped tooltipped-w"
-                                               :aria-label="getDbNames(response.data.data_sources)">
-                                            <span v-for="(item, index) in getRating(response.data.data_sources)" :class="item" v-bind:key="index"/>
-                                          </div>
+                                            <div class="text col-sm-3">Also Known As</div>
+                                            <div class="col-sm-9">
+                                                {{response.data.synonyms}}
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -99,7 +105,7 @@
                             </div>
 
                             <h4 class="round">Proteins</h4>
-                            <llps-table id="protein-table" :data="response.data.proteins">
+                            <llps-table id="protein-table" :data="response.data.proteins" :map="response.data.protein_evidence_map">
                             </llps-table>
 
 <!--                            {{response.data.experiments}}-->

web/src/components/LlpsTable.vue

@@ -40,7 +40,7 @@
 
   export default {
     name: 'llps-table',
-    props: ['id', 'data'],
+    props: ['id', 'data', 'map'],
     data() {
       return {
       };
@@ -105,6 +105,14 @@
             },
           },
           // {
+          //   title: 'Evidence',
+          //   data: 'uniprot_id',
+          //   className: "text-nowrap",
+          //   fnCreatedCell: (nTd, sData, oData) => {
+          //     $(nTd).html(`${vm.map[oData.uniprot_id]}`);
+          //   },
+          // },
+          // {
           //   title: 'Sequence',
           //   data: 'sequence',
           //   className: "text-nowrap",
@@ -113,25 +121,25 @@
           //           <button class="copy-button" name="${oData.uniprot_id}" id="${oData.uniprot_id}" data-clipboard-text="${sData}"><i class="glyphicon glyphicon-copy"></i> </button>`);
           //   },
           // }
-          // {
-          //   title: 'Evidence Stars',
-          //   className: "text-nowrap",
-          //   data: 'condensates',
-          //   render: function ( data, type, row, meta ) {
-          //     // console.log(_.flatMap(row.condensates, c => c.data_sources))
-          //     if(row.condensates) {
-          //       return getRatingValue(_.flatMap(row.condensates, c => c.data_sources));
-          //     }
-          //     return '';
-          //   },
-          //   fnCreatedCell: (nTd, sData, oData) => {
-          //     // console.log(sData)
-          //     let data = _.flatMap(sData, c => c.data_sources);
-          //     if(data) {
-          //       $(nTd).html(getRating(data).join('\n'));
-          //     }
-          //   }
-          // }
+          {
+            title: 'Evidence Stars',
+            className: "text-nowrap",
+            data: 'uniprot_id',
+            render: function ( data, type, row, meta ) {
+              // console.log(_.flatMap(row.condensates, c => c.data_sources))
+              if(row.condensates) {
+                return getRatingValue(vm.map[row.uniprot_id]);
+              }
+              return '';
+            },
+            fnCreatedCell: (nTd, sData, oData) => {
+              // console.log(sData)
+              let data = vm.map[oData.uniprot_id];
+              if(data) {
+                $(nTd).html(getRating(data).join('\n'));
+              }
+            }
+          }
         ];
 
         const nTableOptions = {