Web ROI handles long-word labels

By breaking up long words to wrap in Image viewer and using css in table
ome · Nov 25, 2011 · c8190d3 · c8190d3
1 parent b2bad1e
commit c8190d3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/components/tools/OmeroWeb/omeroweb/webgateway/media/css/omero_image.css b/components/tools/OmeroWeb/omeroweb/webgateway/media/css/omero_image.css
@@ -628,7 +628,7 @@ input.spin-button {
 
 /* Styles for the ROI table */
 #roi_table_postit {
-    width:320px;
+    width:340px;
 }
 #roi_table_div {
     overflow-y: scroll;
@@ -642,6 +642,8 @@ input.spin-button {
 #roi_small_table td {
     background-color: #fff;
     text-align: center;
+    max-width:100px;
+    word-wrap:break-word;
     border: solid #eee 1px;
     padding: 0px;
 }

diff --git a/components/tools/OmeroWeb/omeroweb/webgateway/media/js/roi_display-plugin.js b/components/tools/OmeroWeb/omeroweb/webgateway/media/js/roi_display-plugin.js
@@ -50,7 +50,18 @@ $.fn.roi_display = function(options) {
             var cols = parseInt(text_string.length/rows) + 1;
             if (text_string.length > cols) {
                 var lines = [];
-                var words = text_string.split(" ");
+                var full_words = text_string.split(" ");
+                var words = [];
+                // first handle any words that are too long
+                for (var w=0; w<full_words.length; w++) {
+                    var full_word = full_words[w];
+                    while (full_word.length > cols) {
+                        words.push(full_word.substring(0, cols));
+                        full_word = full_word.substring(cols);
+                    }
+                    words.push(full_word);
+                }
+                // now stitch words back into lines
                 var line = "";
                 for (var w=0; w<words.length; w++) {
                     var word = words[w];