summary and links are now displayed within sidebar.

app/controllers/resources_controller.rb

@@ -10,6 +10,7 @@ def details
 
   def show
     @resource = params[:id] ? Ken.get(params[:id]) : Ken.get("/en/new_order")
+
     render :json => {
       :data => resource_json(@resource),
       :details_html => render_to_string(:partial => "details", :locals => { :resource => @resource })

app/views/layouts/application.html.haml

@@ -9,6 +9,7 @@
     = yield :head
     %title Ask Ken - Showcase
   %body
+    %canvas#kenviz
     %header
       %section#title
         %h1 ASK KEN™
@@ -18,9 +19,8 @@
       %br{:style => "clear: both;"}
     %section#content
       = yield
-      %aside
-        Text goes here
-      %br{:style => "clear: both"}
+    %aside
+
     %footer
       .left
         A

app/views/resources/_details.html.haml

@@ -1,17 +1,58 @@
--# fur future use
+- # retrive links
+- links = []
+- result = Ken.session.mqlread({ :id => @resource.id, :"/common/topic/article" => [{:"/common/document/source_uri" => []}], :"/common/topic/webpage" => [{:uri => nil, :name => nil}] })
+
+- # collect artist links
+- if result
+  - result["/common/topic/webpage"].each do |webpage|
+    - links << {:uri => webpage["uri"], :name => webpage["name"]} unless links.include?(webpage["uri"])
+
+-# for later use
+-# artist["home_page"].each do |homepage|
+-#   artist_links << homepage["uri"] unless artist_links.include?(homepage["uri"])
+-# end
+
 %h2= @resource.name
-- @resource.views.each do |view|
-  - if view.attributes.length>0
-    %h3= view
-    - view.attributes.each do |attribute|
-      %h4
-        = attribute.property.name
-      %ul
-        - attribute.values.each do |value|
-          %li          
-            - if attribute.property.expected_type=="/common/image"
-              %img{:src => "http://img.freebase.com/api/trans/image_thumb/#{value.id}?maxheight=70&mode=fit&maxwidth=70"}
-            - elsif attribute.property.object_type?
-              %a{:href => "/resources/show?id=#{value.id}"}= value
-            - else
-              = value
+%p.summary
+  - begin
+    - wikipedia_id = result["/common/topic/article"][0]["/common/document/source_uri"][0].split("/").last
+  - rescue
+    - wikipedia_id = ""
+  - image = @resource.attribute('/common/topic/image').values.first if @resource.attribute('/common/topic/image')
+  - if image
+    %img.summary-img{:src => "http://img.freebase.com/api/trans/image_thumb/#{image.id}?mode=fit&maxwidth=150"}
+  - descr = Ken.session.blurb_content(@resource.attribute('/common/topic/article').values.first.id, :maxlength => 500) if @resource.attribute('/common/topic/article')
+  - descr = "there's no description for this topic yet." if descr.length==0
+  = descr
+  [
+  %a{:href => "http://freebase.com/view#{resource.id}", :target => "_new"} Freebase Topic
+
+  - if wikipedia_id != ""
+    |
+    = "&nbsp;"
+    %a{:href => "http://en.wikipedia.org/w/index.php?curid=#{wikipedia_id}", :target => "_new"} Wikipedia Article  
+  ]
+
+  - if links.length > 0
+    %h3 Links
+    - if @resource.attribute('/common/topic/webpage')
+      %ul.links
+        - links.each do |link|
+          %li
+            %a{:href => link[:uri], :target => "_new"}= link[:name]
+
+-# - @resource.views.each do |view|
+-#   - if view.attributes.length>0
+-#     %h3= view
+-#     - view.attributes.each do |attribute|
+-#       %h4
+-#         = attribute.property.name
+-#       %ul
+-#         - attribute.values.each do |value|
+-#           %li          
+-#             - if attribute.property.expected_type=="/common/image"
+-#               %img{:src => "http://img.freebase.com/api/trans/image_thumb/#{value.id}?maxheight=70&mode=fit&maxwidth=70"}
+-#             - elsif attribute.property.object_type?
+-#               %a{:href => "/resources/show?id=#{value.id}"}= value
+-#             - else
+-#               = value

app/views/resources/index.html.erb

@@ -11,7 +11,7 @@
     }
 
     if (canvasSupported() && (!$.browser.mozilla || $.browser.version.substr(0,5)=="1.9.1")) {
-      $('#browser_not_supported').hide();
+      $('#content').hide();
       var canvas = document.getElementById("kenviz");
       var p = Processing(canvas);
 
@@ -46,7 +46,7 @@
       search.val(search.attr('default')).addClass('ghost-input');
 
       // init
-      p.resourceId = null; // "/en/new_order";
+      p.resourceId = null // "/en/new_order";
       p.init(p.ajax("/javascripts/pjs/physics.pjs")+p.ajax("/javascripts/pjs/value.pjs")+p.ajax("/javascripts/pjs/attribute.pjs")+p.ajax("/javascripts/pjs/resource.pjs")+p.ajax("/javascripts/pjs/node.pjs")+p.ajax("/javascripts/pjs/edge.pjs")+p.ajax("/javascripts/pjs/graph.pjs")+p.ajax("/javascripts/pjs/network.pjs"));
       initialized = true;
 
@@ -59,9 +59,8 @@
 
 <div id="browser_not_supported">
   Your Browser is currently not supported.<br/><br/>Try one of these:<br/>
-
     <a href="http://www.mozilla.com/en-US/firefox/firefox.html">Firefox 3.5</a><br/>
     <a href="http://www.apple.com/safari/">Safari 4.0</a><br/>
     <a href="http://www.google.com/chrome/">Chrome</a><br/>
 </div>
-<canvas id="kenviz"></canvas>
+

config/environment.rb

@@ -14,11 +14,9 @@
   # Add additional load paths for your own custom dirs
   # config.load_paths += %W( #{RAILS_ROOT}/extras )
 
-  if RAILS_ENV == "production"
-    config.gem "michael-ken", :source => "gems.github.com", :lib => "ken"
-  else
-    config.gem "ken"
-  end
+
+  config.gem "ken"
+
   config.gem "extlib"
 
   #config.gem "transformer"
@@ -55,7 +53,6 @@
 Haml::Template.options[:format] = :html5
 #Transformer.default_transformer = ResourceTransformer
 
-
 # patch FETCH_DATA_QUERY
 module Ken
   FETCH_DATA_QUERY = {
@@ -80,7 +77,7 @@ module Ken
         :link => nil,
         :name => nil,
         :optional => true,
-        :type => "/common/topic",
+        #:type => "/common/topic",
         :limit => 200
       }
     ],
@@ -90,7 +87,7 @@ module Ken
         :link => nil,
         :name => nil,
         :optional => true,
-        :type => "/common/topic",
+        #:type => "/common/topic",
         :limit => 200
       }
     ],

public/javascripts/pjs/network.pjs

@@ -30,10 +30,11 @@ Resource fetchResource(String resource) {
     dataType: 'json',
     success: function(response) {
       json = response.data;
+      html = response.details_html;
     }
   });
 
-	Resource resource = new Resource(json.id, json.name);
+	Resource resource = new Resource(json.id, json.name, html);
 	int numValues = 0;
 	for (int i = 0 ; i < json.attributes.length(); i++) {
 		Attribute attr = new Attribute(json.attributes[i].name, resource);
@@ -65,7 +66,7 @@ int selectedNodeIndex;
 
 
 void resize() {
-	size(window.innerWidth-40, window.innerHeight-135);
+	size(window.innerWidth-10, window.innerHeight-15);
 }
 
 void setup() {	
@@ -83,6 +84,7 @@ void setup() {
 		r = fetchResource(resourceId);
 		g.addNode(root = new Node(r));
 		g.setSelectedNode(root);
+		$('aside').html(r.html);
 	}
 }
 
@@ -174,16 +176,20 @@ void mousePressed() {
 				g.addNode(newNode = new Node(r2));
 				g.addEdge(new Edge(selectedNode, newNode));
 				g.setSelectedNode(newNode);
+
 			} else {
 				g.addEdge(new Edge(selectedNode, n));
 				g.setSelectedNode(g.nodes[0]);
 			}
+
+			$('aside').html(g.getSelectedNode().getSubject().html);
 
 		} else if (selectedNodeIndex != null) {
 			// TODO: Zoom to node
 			r.setClosed();
 			selectedNode = g.nodes[selectedNodeIndex];
 			selectedNode.getSubject().setOpen();
+			$('aside').html(selectedNode.getSubject().html);
 			g.setSelectedNode(selectedNode);
 			g.setDragNode(selectedNode);
 		}

public/javascripts/pjs/resource.pjs

@@ -36,16 +36,19 @@ public class Resource {
 
   int radius = 94;
   float radiusOuter = 110;
+  float radiusClosed = 40;
   int n = 40;
   float angle = 0;
 
   String id = "";
   String name = "";
+  String html = "";
 
-  public Resource(String id, String name) {
+  public Resource(String id, String name, String html) {
 		this.attributes = new ArrayList();
 		this.id = id;
     this.name = name;
+    this.html = html;
   }
 
 	public void setPos(float x, float y) {
@@ -254,35 +257,72 @@ public class Resource {
 		}	else { // draw closed
 			noStroke();
 
-			if (hovering)
-				fill(180, 180, 180, 100);
-			else
-				fill(222, 222, 222, 100);
+      // if (hovering)
+      //  fill(180, 180, 180, 100);
+      // else
+      //  fill(222, 222, 222, 100);
+
+			// spacer
+      fill(255);
+      ellipse(this.x, this.y, radiusClosed*2+50, radiusClosed*2+50);
+
 
-			ellipse(this.x, this.y, 110, 110);
-			ellipse(this.x, this.y, 130, 130);
+      fill(0,0,0,0);
+			stroke(222);
+			strokeWeight(20);
+			curContext.lineCap = "butt"; // processing.js patch!
+
+			arc(this.x, this.y, radiusClosed*2+20, radiusClosed*2+20, 0, TWO_PI);
+
+      float angle = 0;
+      // draw separators
+      for (int i=0; i<7; i++) {
+        stroke(255);
+        strokeWeight(2);
+        angle += TWO_PI/6;
+        line(this.x, this.y, this.x+cos(angle)*(radiusClosed+25), this.y+sin(angle)*(radiusClosed+25));
+      }
+
+
+			// draw values
+      // for (int i = 0 ; i < attributes.size(); i++) {
+      //  Attribute attribute = attributes[i];
+      //  ArrayList values = attribute.getValues();
+      // 
+      //  for (int j = 0; j < values.size(); j++) {
+      //    // stroke(colors[i%12]);
+      //           // stroke(222);
+      //           // strokeWeight(1);
+      //           // line(this.x+cos(angle)*(radiusClosed), this.y+sin(angle)*(radiusClosed), this.x+cos(angle)*(radiusOuter+25), this.attr.getResource().y+sin(this.angleStop)*(radiusOuter+25));
+      //    // values[j].draw();
+      //  }
+      //  // draw labels
+      //  // attribute.draw();
+      // }
 
-			// spacer
-			fill(255);
-			ellipse(this.x, this.y, 50, 50);
+      // ellipse(this.x, this.y, 110, 110);
+      // ellipse(this.x, this.y, 130, 130);
+      // 
+      // // spacer
+      // fill(255);
+      // ellipse(this.x, this.y, 50, 50);
 
-			labelOffset = 0;
+			labelOffset = 30;
 		}
 
 		if (hovering)
 			fill(0,0,0,150);
     else
      fill(66, 66, 66, 100);
-
+     
 		ellipse(this.x,this.y, diameter, diameter);
 
 		fill(33);
 		textFont(defaultFont, 13);
 
 		fontWidth = defaultFont.width((idx+1)+". "+this.getName()) * fontSize;
-
-		if (!selectedValueIndex)
-		  text((idx+1)+". "+this.getName(), this.x-fontWidth/2, this.y+10+labelOffset+30);
+		// if (!selectedValueIndex)
+		text((idx+1)+". "+this.getName(), this.x-fontWidth/2, this.y+10+labelOffset+30);
 
 		textFont(defaultFont, fontSize);
 

public/javascripts/pjs/value.pjs

@@ -70,6 +70,7 @@ public class Value {
 		  strokeWeight(2);
 		  line(this.attr.getResource().x+cos(this.angleStop)*(radius-10), this.attr.getResource().y+sin(this.angleStop)*(radius-10), this.attr.getResource().x+cos(this.angleStop)*(radiusOuter+25), this.attr.getResource().y+sin(this.angleStop)*(radiusOuter+25));
 		}
+
 		fill(0,0,0);
 
 		if (hovering) {
@@ -78,7 +79,7 @@ public class Value {
 		  stroke(0,0,0,20);
 		  strokeWeight(50);
 		  arc(this.attr.resource.x, this.attr.resource.y, (this.attr.resource.radiusOuter)*2, (this.attr.resource.radiusOuter)*2, angleStart, angleStop);
-		}		
+		}
 		strokeWeight(0); // reset
 
     if (selectedValueIndex!=null && attr.getResource().getSelectedAttribute()==attr) {