More informative topic lists (#308, #329, #387).

Topic lists displayed in the page panel, e.g. search results, are more informative: topics which are already visible on the canvas are displayed with an disabled icon. This provides for better orientation when revealing a whole bunch of topics and is particularily useful in conjunction with #387.

See ticket 308.
See ticket 329.
See ticket 387.

modules/dm4-help/src/main/resources/web/script/plugin.js

@@ -10,7 +10,7 @@ dm4c.add_plugin("de.deepamehta.help", function() {
                     '<div class="field-label">Version</div>' +
                     '<div>${project.version}</div>' +
                     '<div class="field-label">Release Date</div>' +
-                    '<div>Dec 4, 2012</div>' +
+                    '<div>Dec 16, 2012</div>' +
                     '<div class="field-label">Copyright</div>' +
                     '<div>2000-2012 Jörg Richter</div>' +
                     '<div class="field-label">License</div>' +

modules/dm4-webclient/src/main/resources/web/css/webclient.css

@@ -197,13 +197,19 @@ body {
     padding-left: 1em;
     padding-right: 0.75em;
     width: 24px;
+    cursor: pointer;
 }
 
 .topic-list .supplement-text {
     font-size: 75%;
     line-height: 1.5em;
 }
 
+.topic-list .disabled {
+    opacity: 0.4;
+    cursor: default;
+}
+
 /*** Association Page ***/
 
 .assoc-role {

modules/dm4-webclient/src/main/resources/web/script/interfaces/topicmap_renderer.js

@@ -49,6 +49,13 @@ function TopicmapRenderer() {
      */
     this.remove_association = function(assoc_id, refresh_canvas) {}
 
+    /**
+     * Checks if a topic is visible on the canvas.
+     *
+     * @return  a boolean
+     */
+    this.topic_exists = function(topic_id) {}
+
     /**
      * Clears the model: removes all topics and associations and resets the selection.
      *

modules/dm4-webclient/src/main/resources/web/script/renderers/topicmap_renderers/default_topicmap_renderer.js

@@ -184,6 +184,10 @@ function DefaultTopicmapRenderer() {
 
     // ---
 
+    this.topic_exists = function(topic_id) {
+        return model.topic_exists(topic_id)
+    }
+
     this.clear = function() {
         // Must reset canvas translation.
         // See TopicmapRenderer contract.

modules/dm4-webclient/src/main/resources/web/script/util/render_helper.js

@@ -58,27 +58,50 @@ function RenderHelper() {
                 var supplement = $("<div>").addClass("supplement-text").append(supplement_text)
             }
             // render topic
-            var icon_click_handler = create_click_handler(topic, "icon")
-            var topic_click_handler = create_click_handler(topic, "label")
-            var icon_link_title = "A " + dm4c.type_label(topic.type_uri) + "\nClick to reveal on topicmap"
-            var topic_link_title = icon_link_title + " and focus"
+            var icon_handler = click_handler_for(topic, "icon")
+            var label_handler = click_handler_for(topic, "label")
+            var title = tooltips(icon_handler == undefined)
             table.append($("<tr>")
-                .append($("<td>").append(this.icon_link(topic, icon_click_handler, icon_link_title)))
-                .append($("<td>").append(this.topic_link(topic, topic_click_handler, topic_link_title))
-                                 .append(supplement))
+                .append($("<td>").append(this.icon_link(topic, icon_handler, title.icon)))
+                .append($("<td>").append(this.topic_link(topic, label_handler, title.label)).append(supplement))
             )
         }
         return table
 
-        function create_click_handler(topic, spot) {
+        function click_handler_for(topic, spot) {
+            // create no handler for the "icon" spot if the topic is already visible on canvas
+            if (spot == "icon" && dm4c.canvas.topic_exists(topic.id)) {
+                return
+            }
+            //
             return function() {
                 if (click_handler) {
                     click_handler(topic, spot)
                 } else {
                     var action = spot == "label" && "show"
                     dm4c.do_reveal_related_topic(topic.id, action)
                 }
-                return false    // suppress browser's own link-click behavoir
+                // reflect "visible on canvas" status in page panel
+                if (spot == "icon") {
+                    dm4c.page_panel.refresh()
+                }
+                // suppress browser's own link-click behavoir
+                return false
+            }
+        }
+
+        function tooltips(is_visible_on_canvas) {
+            var type_label = dm4c.type_label(topic.type_uri)
+            if (is_visible_on_canvas) {
+                return {
+                    icon:  "A " + type_label + "\nAlready visible on topicmap",
+                    label: "A " + type_label + "\nClick to focus on topicmap"
+                }
+            } else {
+                return {
+                    icon:  "A " + type_label + "\nClick to reveal on topicmap",
+                    label: "A " + type_label + "\nClick to reveal on topicmap and focus"
+                }
             }
         }
     }
@@ -96,13 +119,21 @@ function RenderHelper() {
     }
 
     /**
-     * Renders a topic icon and attaches a click handler to it.
+     * Renders a topic icon and optionally attaches a click handler to it.
      *
+     * @param   handler     Optional: the click handler.
+     *                      If not specified the icon is rendered as disabled and doesn't respond to clicks.
      * @param   title       Optional: the tooltip title.
      *                      If not specified the topic's type name is used.
      */
     this.icon_link = function(topic, handler, title) {
-        return this.type_icon(topic.type_uri, title).click(handler)
+        var type_icon = this.type_icon(topic.type_uri, title)
+        if (handler) {
+            type_icon.click(handler)
+        } else {
+            type_icon.addClass("disabled")
+        }
+        return type_icon
     }
 
     this.link_text = function(topic) {
@@ -124,7 +155,7 @@ function RenderHelper() {
      * @return  An <img> element of CSS class "type-icon" (jQuery object).
      */
     this.type_icon = function(type_uri, title) {
-        var src   = dm4c.get_icon_src(type_uri)
+        var src = dm4c.get_icon_src(type_uri)
         title = title || dm4c.type_label(type_uri)
         return this.icon(src, title)
     }