Feature: Distinguish reused terms in tree view

app/assets/stylesheets/bioportal.scss

@@ -637,209 +637,7 @@ li.ac_over > .obsolete_class {
   font-style: italic;
 }
 
-/********************
-## TREE VIEW
-*********************/
-div.tree_error {
-  background: none repeat scroll 0 0 lightYellow;
-  font-weight: 600;
-  padding: 5px 10px;
-}
-
-.expansion_error {
-  color: red;
-  font-size: x-small;
-  font-style: oblique;
-  padding: 0 3px;
-}
-
-#bd ul.simpleTree li{
-  margin-left: 0px;
-  padding: 5px 0 0 10px;
-}
-
-#bd ul.simpleTree{
-  margin-left:0px;
-  margin-bottom:0px;
-}
-
-.simpleTree {
-  margin:0;
-  padding:0;
-  /*
-  overflow:auto;
-  width: 250px;
-  height:350px;
-  overflow:auto;
-  border: 1px solid #444444;
-  */
-  a.tree-link {
-    display: inline-block;
-    padding: 5px;
-    word-break: break-all;
-    text-wrap: wrap;
-    color: var(--primary-color) !important;
-  }
 
-  a.tree-link.active {
-    cursor: default;
-    background-color: var(--light-color);
-    font-weight: bold;
-    border-radius: 3px;
-    padding: 7px 5px;
-  }
-
-  .tree-border-left{
-    border-left: 2px dotted #eee;
-    margin-left: 2px;
-  }
-}
-.simpleTree li {
-  list-style: none;
-  margin:0;
-  padding:0 0 0 22px;
-  line-height: 14px;
-}
-.simpleTree li span {
-  display:inline;
-  clear: left;
-  white-space: nowrap;
-}
-.simpleTree ul {
-  margin:0;
-  padding:0;
-}
-.simpleTree .root ul {
-  margin:0;
-}
-.simpleTree .root {
-  margin-left:-16px;
-  /*background: url(/images/tree/root.gif) no-repeat 16px 0 #ffffff;*/
-}
-.simpleTree .line {
-  margin:0 0 0 -16px;
-  padding:0;
-  line-height: 3px;
-  height:3px;
-  font-size:3px;
-  background: image-url('jquery.simple.tree/line_bg.gif') 0 0 no-repeat transparent;
-}
-.simpleTree .line-last {
-  margin:0 0 0 -16px;
-  padding:0;
-  line-height: 3px;
-  height:3px;
-  font-size:3px;
-  background: image-url('jquery.simple.tree/spacer.gif') 0 0 no-repeat transparent;
-}
-.simpleTree .line-over {
-  margin:0 0 0 -16px;
-  padding:0;
-  line-height: 3px;
-  height:3px;
-  font-size:3px;
-  background: image-url('jquery.simple.tree/line_bg_over.gif') 0 0 no-repeat transparent;
-}
-.simpleTree .line-over-last {
-  margin:0 0 0 -16px;
-  padding:0;
-  line-height: 3px;
-  height:3px;
-  font-size:3px;
-  background: image-url('jquery.simple.tree/line_bg_over_last.gif') 0 0 no-repeat transparent;
-}
-.simpleTree .folder-open {
-  margin-left:-16px;
-  background: image-url('jquery.simple.tree/collapsable.gif') 0 -2px no-repeat #fff;
-}
-.simpleTree .folder-open-last {
-  margin-left:-16px;
-  background: image-url('jquery.simple.tree/collapsable-last.gif') 0 -2px no-repeat #fff;
-}
-.simpleTree .folder-close {
-  margin-left:-16px;
-  background: image-url('jquery.simple.tree/expandable.gif') 0 -2px no-repeat #fff;
-}
-.simpleTree .folder-close-last {
-  margin-left:-16px;
-  background: image-url('jquery.simple.tree/expandable-last.gif') 0 -2px no-repeat #fff;
-}
-.simpleTree .doc {
-  margin-left:-16px;
-  background: image-url('jquery.simple.tree/leaf.gif') 0 -1px no-repeat #fff;
-}
-.simpleTree .doc-last {
-  margin-left:-16px;
-  background: image-url('jquery.simple.tree/leaf-last.gif') 0 -1px no-repeat #fff;
-}
-.simpleTree .ajax {
-  background: image-url('jquery.simple.tree/spinner.gif') no-repeat 0 0 #ffffff;
-  height: 16px;
-  display:none;
-}
-.simpleTree .ajax li {
-  display:none;
-  margin:0;
-  padding:0;
-}
-.simpleTree .trigger {
-  display:inline;
-  margin-left:-32px;
-  width: 28px;
-  height: 11px;
-  cursor:pointer;
-}
-.simpleTree .text {
-  cursor: default;
-  padding: 0 2px;
-}
-.simpleTree .active {
-  cursor: default;
-  background-color: #B9D5E4;
-  font-weight: bold;
-  padding-top: 0px;
-  padding-right: 2px;
-  padding-bottom: 0px;
-  padding-left: 2px;
-}
-.simpleTree a, .simpleTree a:hover {
-  text-decoration: none;
-  color: black;
-}
-.simpleTree a:hover {
-  cursor: pointer;
-}
-#drag_container {
-  background:#ffffff;
-  color:#000;
-  font: normal 11px arial, tahoma, helvetica, sans-serif;
-  border: 1px dashed #767676;
-}
-#drag_container ul {
-  list-style: none;
-  padding:0;
-  margin:0;
-}
-#drag_container li {
-  list-style: none;
-  background-color:#ffffff;
-  line-height:18px;
-  white-space: nowrap;
-  padding:1px 1px 0px 16px;
-  margin:0;
-}
-#drag_container li span {
-  padding:0;
-}
-#drag_container li.doc, #drag_container li.doc-last {
-  background: image-url('jquery.simple.tree/leaf.gif') no-repeat -17px 0 #ffffff;
-}
-#drag_container .folder-close, #drag_container .folder-close-last {
-  background: image-url('jquery.simple.tree/expandable.gif') no-repeat -17px 0 #ffffff;
-}
-#drag_container .folder-open, #drag_container .folder-open-last {
-  background: image-url('jquery.simple.tree/collapsable.gif') no-repeat -17px 0 #ffffff;
-}
 .contextMenu {
   display:none;
 }

app/assets/stylesheets/components/index.scss

@@ -33,4 +33,5 @@
 @import "range_slider";
 @import "ontologies_selector";
 @import "loader";
-@import "vertical_tabs";
+@import "vertical_tabs";
+@import "tree_view";

app/assets/stylesheets/components/tree_view.scss

@@ -0,0 +1,170 @@
+.tree-view-reuse-icon{
+    display: inline;
+}
+.tree-view-reuse-icon svg{
+    width: 13px;
+}
+
+div.tree_error {
+    background: none repeat scroll 0 0 lightYellow;
+    font-weight: 600;
+    padding: 5px 10px;
+}
+
+.expansion_error {
+    color: red;
+    font-size: x-small;
+    font-style: oblique;
+    padding: 0 3px;
+}
+
+#bd ul.simpleTree li{
+    margin-left: 0px;
+    padding: 5px 0 0 10px;
+}
+
+#bd ul.simpleTree{
+margin-left:0px;
+margin-bottom:0px;
+}
+
+.simpleTree {
+margin:0;
+padding:0;
+
+a.tree-link {
+    display: inline-block;
+    padding: 5px;
+    word-break: break-all;
+    text-wrap: wrap;
+    color: var(--primary-color) !important;
+}
+
+a.tree-link.active {
+    cursor: default;
+    background-color: var(--light-color);
+    font-weight: bold;
+    border-radius: 3px;
+    padding: 7px 5px;
+}
+
+.tree-border-left{
+    border-left: 2px dotted #eee;
+    margin-left: 2px;
+}
+}
+.simpleTree li {
+list-style: none;
+margin:0;
+padding:0 0 0 22px;
+line-height: 14px;
+}
+.simpleTree li span {
+display:inline;
+clear: left;
+white-space: nowrap;
+}
+.simpleTree ul {
+margin:0;
+padding:0;
+}
+.simpleTree .root ul {
+margin:0;
+}
+.simpleTree .root {
+margin-left:-16px;
+/*background: url(/images/tree/root.gif) no-repeat 16px 0 #ffffff;*/
+}
+.simpleTree .line {
+margin:0 0 0 -16px;
+padding:0;
+line-height: 3px;
+height:3px;
+font-size:3px;
+background: image-url('jquery.simple.tree/line_bg.gif') 0 0 no-repeat transparent;
+}
+.simpleTree .line-last {
+margin:0 0 0 -16px;
+padding:0;
+line-height: 3px;
+height:3px;
+font-size:3px;
+background: image-url('jquery.simple.tree/spacer.gif') 0 0 no-repeat transparent;
+}
+.simpleTree .line-over {
+margin:0 0 0 -16px;
+padding:0;
+line-height: 3px;
+height:3px;
+font-size:3px;
+background: image-url('jquery.simple.tree/line_bg_over.gif') 0 0 no-repeat transparent;
+}
+.simpleTree .line-over-last {
+margin:0 0 0 -16px;
+padding:0;
+line-height: 3px;
+height:3px;
+font-size:3px;
+background: image-url('jquery.simple.tree/line_bg_over_last.gif') 0 0 no-repeat transparent;
+}
+.simpleTree .folder-open {
+margin-left:-16px;
+background: image-url('jquery.simple.tree/collapsable.gif') 0 -2px no-repeat #fff;
+}
+.simpleTree .folder-open-last {
+margin-left:-16px;
+background: image-url('jquery.simple.tree/collapsable-last.gif') 0 -2px no-repeat #fff;
+}
+.simpleTree .folder-close {
+margin-left:-16px;
+background: image-url('jquery.simple.tree/expandable.gif') 0 -2px no-repeat #fff;
+}
+.simpleTree .folder-close-last {
+margin-left:-16px;
+background: image-url('jquery.simple.tree/expandable-last.gif') 0 -2px no-repeat #fff;
+}
+.simpleTree .doc {
+margin-left:-16px;
+background: image-url('jquery.simple.tree/leaf.gif') 0 -1px no-repeat #fff;
+}
+.simpleTree .doc-last {
+margin-left:-16px;
+background: image-url('jquery.simple.tree/leaf-last.gif') 0 -1px no-repeat #fff;
+}
+.simpleTree .ajax {
+background: image-url('jquery.simple.tree/spinner.gif') no-repeat 0 0 #ffffff;
+height: 16px;
+display:none;
+}
+.simpleTree .ajax li {
+display:none;
+margin:0;
+padding:0;
+}
+.simpleTree .trigger {
+display:inline;
+margin-left:-32px;
+width: 28px;
+height: 11px;
+cursor:pointer;
+}
+.simpleTree .text {
+cursor: default;
+padding: 0 2px;
+}
+.simpleTree .active {
+cursor: default;
+background-color: #B9D5E4;
+font-weight: bold;
+padding-top: 0px;
+padding-right: 2px;
+padding-bottom: 0px;
+padding-left: 2px;
+}
+.simpleTree a, .simpleTree a:hover {
+text-decoration: none;
+color: black;
+}
+.simpleTree a:hover {
+cursor: pointer;
+}

app/assets/stylesheets/concepts.scss

@@ -165,4 +165,5 @@ div.synonym-change-request button {
 .concepts_json_button{
   margin-right: 5px;
   margin-top: -4px;
-}
+}
+