trim display ids on UI and enumeration

Author: dany-fu

src/main/resources/static/js/knox.js

@@ -184,6 +184,13 @@ function longestListLength(listoflists) {
   return maxLength;
 }
 
+//split by / for SBOL identity
+//this may not work well with other import formats
+export function splitElementID(elementID){
+  let splitArr = elementID.split('/');
+  return splitArr.length > 1 ? splitArr[splitArr.length-2] : elementID;
+}
+
 export function getSBOLImage(role){
   const sbolpath = "./img/sbol/";
   switch (role) {
@@ -353,7 +360,8 @@ $('#enumerate-designs-tooltip').click(() => {
         para.appendChild(document.createTextNode("["));
         const length = list.length;
         list.map((element, i) => {
-          para.appendChild(document.createTextNode(element.id));
+          para.appendChild(document.createTextNode(splitElementID(element.id)));
+          //append comma if there are more elements
           if (length !== i+1){
             para.appendChild(document.createTextNode(","));
           }

src/main/resources/static/js/target.js

@@ -1,5 +1,5 @@
 
-import {knoxClass, getSBOLImage} from "./knox.js";
+import {knoxClass, getSBOLImage, splitElementID} from "./knox.js";
 
 // The target class observes an SVG element on the page, and
 // provides methods for setting and clearing graph data. A variable
@@ -92,7 +92,16 @@ export default class Target{
       .attr("class", "sboltip")
       .attr("title", (d) => {
         if (d.hasOwnProperty("componentIDs")) {
-          return d["componentIDs"].toString();
+          let titleStr = "";
+          const length = d["componentIDs"].length;
+          for(let i=0; i<d["componentIDs"].length; i++){
+            titleStr += splitElementID(d["componentIDs"][i]);
+            if (length !== i+1){
+              titleStr += ",";
+            }
+          }
+
+          return titleStr;
         }
       })
       .attr("xlink:href", (d) => {