package Alex::Networkdiagram;

# Networkdiagram.pm - visualize concordance using network diagram

# Eric Lease Morgan <eric_morgan@infomotions.com>
# January 23, 2011 - first investigations; based on CGI script


# define/configure
use constant INFOMO          => 'http://infomotions.com';
use constant INSTANCE        => 'alex3';
use constant PROXY           => 56234;
use constant QUERY           => 'love';
use constant RADIUS          => 45;
use constant ROOT            => '/var/www/html/main';
use constant THRESHOLD       => 5;
use constant URL             => 73038;
use constant CONCORDANCE     => '/sandbox/concordance/?cmd=search&##ID##&query=##QUERY##&radius=##RADIUS##';

# require
use Apache2::Const -compile => qw( OK );
use CGI;
use Lingua::Concordance;
use Lingua::StopWords qw( getStopWords );
use MyLibrary::Core;
use strict;

# main
sub handler {

	# initalize
	my $r         = shift;
	my $cgi       = CGI->new;
	my $id        = $cgi->param( 'id' );
	my $query     = $cgi->param( 'q' ) ? $cgi->param( 'q' ) : QUERY;
	my $radius    = $cgi->param( 'r' ) ? $cgi->param( 'r' ) : RADIUS;
	my $threshold = $cgi->param( 't' ) ? $cgi->param( 't' ) : THRESHOLD;
	my $html      = '';
	my $stopwords = &getStopWords( 'en' ); $$stopwords{ 'one' }++;
	my %matrix    = ();
	MyLibrary::Config->instance( INSTANCE );
	
	# display default page
	if ( ! $id ) {
	
		# set-up output
		$html = &template;
		$html =~ s/##CONTENT##/&default/e;
		$html =~ s/##DATA##//;
		$html =~ s/##JAVASCRIPT##//;
	
	}

	# do the work
	else {
	
		# get the id's metadata; needs error checking
		my ( $title, $author, $filename, $url ) = &get_metadata( $id );
		
		# initalize some more
		my $corpus = &slurp( $filename );
		
		# get initial words found near the query and sort them by frequency
		my $words = &concordance( $corpus, $query, $radius, $stopwords );
		my @keys = sort { $$words{ $b } <=> $$words{ $a } } keys %$words;
		
		# process each word (key) below a particular threshold; build matrix of words
		for ( my $i = 0; $i < $threshold; $i++ ) {
		
			my $query = $keys[ $i ];
			my $words = &concordance( $corpus, $query, $radius, $stopwords );
			my @subkeys = ( sort { $$words{ $b } <=> $$words{ $a } } keys %$words );
			my $coocurrances = &coocurances( $subkeys[ 0 ], $words, $threshold );
			
			my @list = ();
			my $j    = 0;
			my $key  = '';
			foreach ( sort { $$coocurrances{ $b } <=> $$coocurrances{ $a } } keys %$coocurrances ) {
		
				$j++;
				if ( $j == 1 ) { $key = $_ }
				push @list, $_;
			
			}
			
			$matrix{ $key } = [ @list ];
		
		}

		# format matrix as table
		my $matrix = '<table cellpadding="7">';
		foreach ( sort keys %matrix ) {
		
			$matrix .= '<tr>';
			my $list = $matrix{ $_ };
			foreach my $word ( @$list ) { $matrix .= "<td>$word</td>" }
			$matrix .= '</tr>';
			
		}
		$matrix .= '</table>';

		# create an ordered list of the words in the matrix
		my %words = ();
		my $i     = 0;
		foreach ( keys %matrix ) {
		
			my $list = $matrix{ $_ };
			foreach my $word ( @$list ) {
			
				my $found = 0;
				foreach my $key ( keys %words ) {
				
					if ( $key eq $word ) { $found = 1 }
					
				}
				
				if ( ! $found ) {
				
					$words{ $word } = $i;
					$i++;
					
				}
				
			}
			
		}

		# build a list of nodes from the words for Protovis
		my $nodes = '';
		foreach ( sort { $words{ $a } <=> $words{ $b } } keys %words ) { $nodes .= qq({nodeName:"$_"},) }
		chop $nodes;
		
		# build a list of links from the words for Protovis
		my $links = '';
		foreach my $source ( keys %matrix ) {
		
			my $list = $matrix{ $source };
			foreach ( my $i = 1; $i < $threshold; $i++ ) {
			
				$links .= qq({source:$words{ $$list[ $source ] },target:$words{ $$list[ $i ] }},);
			
			}
		
		}
		chop $links;

		# build the javascript and data;
		my $javascript = &same_breath;
		my $data       = qq(<script type="text/javascript">var corpus = {nodes:[$nodes],\nlinks:[$links]};</script>\n);

		# display the page
		$html =  &template;
		$html =~ s/##CONTENT##/&home( $url )/e;
		$html =~ s/##TITLE##/$title/eg;
		$html =~ s/##AUTHOR##/$author/eg;
		$html =~ s/##JAVASCRIPT##/$javascript/e;
		$html =~ s/##MATRIX##/$matrix/e;
		$html =~ s/##DATA##/$data/e;
		$html =~ s/##TITLEQUERY##/" :: $query"/eg;
		$html =~ s/##ID##/$id/eg;
		$html =~ s/##QUERY##/$query/eg;
		$html =~ s/##BREATH##/$radius/eg;
		$html =~ s/##DETAIL##/$threshold/eg;
			
	}
	
	# done
	$r->content_type( 'text/html' );
	$r->print( $html );
	return Apache2::Const::OK;

}


# template
sub template {

	return <<EOT;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Concordance visualizations</title>
<script type="text/javascript" src="http://infomotions.com/etc/js/protovis.js"></script>
##DATA##
<link rel="stylesheet" type="text/css" href="http://infomotions.com/etc/css/jquery-ui.css" />
<script type="text/javascript" src="http://infomotions.com/etc/js/jquery-core.js"></script>
<script type="text/javascript" src="http://infomotions.com/etc/js/jquery-addons.js"></script>
	<script type="text/javascript">
		
		// show the size dialog
		function tips() {
			\$("#tips").dialog(
				{
					disabled: false,
					height: 375,
					modal: true,
					resizable: true,
					title: 'Usage tips',
					width: 600
				}
			);
		};
		
		function matrix() {
			\$("#matrix").dialog(
				{
					disabled: false,
					height: 375,
					modal: true,
					resizable: true,
					title: 'Matrix',
					width: 700
				}
			);
		};
		
	</script>
<meta name="ROBOTS" content="NOINDEX"/>
<style>
	#form { margin-left: 2em }
	#content { margin-right: 1%; font-size: small }
	#tips { display: none; font-size: small }
	#matrix { display: none; font-size: small }
</style>
</head>
<body style='margin: 5%' >
##CONTENT##
<hr />
<p style="font-size: medium">Author: Eric Lease Morgan &lt;<a href="mailto:eric_morgan\@infomotions.com">eric_morgan\@infomotions.com</a>&gt;<br />
Date created: January 23, 2011<br />
Date updated: January 23, 2011<br />
URL: <a href="http://infomotions.com/sandbox/diagrams/">http://infomotions.com/sandbox/diagrams/</a><br />
</p>
</body>
</html>
EOT

}


# default
sub default {

	return <<EOT;
<h1><a href="http://infomotions.com/" title="Infomotions, LLC"><img src="http://infomotions.com/logo.gif" alt="Infomotions, LLC" width="42" height="44" border="0" align="left" hspace="15" /></a>Concordance visualizations</h1><p>This is a set of concordance visualizations against content in the Alex Catalogue of Electronic Texts. You can use them to analyze and evaluate texts quickly. Here are few texts that can be used as examples:</p>
<ul>
<li><a href="./?id=twain-adventures-27">Adventures of Tom Sawyer / Mark Twain</a></li>
<li><a href="./?id=london-call-203">Call of the Wild / Jack London</a></li>
<li><a href="./?id=kant-critique-141">Critic of Pure Reason / Immanual Kant</a></li>
<li><a href="./?id=emerson-representative-238">Representative Men / Ralph Waldo Emerson</a></li>
<li><a href="./?id=shakespeare-romeo-48">Romeo And Juliet / William Shakespeare</a></li>
<li><a href="./?id=plato-symposium-356">Symposium / Plato</a></li>
<li><a href="./?id=nietzsche-thus-223">Thus Spake Zarathustra / Friedrich Nietzsche</a></li>
<li><a href="./?id=stevenson-treasure-166">Treasure Island / Robert Louis Stevenson</a></li>
<li><a href="./?id=thoreau-walden-186">Walden / Henry David Thoreau</a></li>
</ul>

<p>
For more texts, <a href="/alex/">search the Catalogue</a>.<br />
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <img src="http://l.yimg.com/hr/img/delicious.small.gif" height="19" width="19" alt="Delicious" /> <a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;">Bookmark this on Delicious</a>
</p>
EOT

}


# home
sub home {

	my $url = shift;
	return <<EOT;
	
##JAVASCRIPT##

<div id='content'>
	<h1>##TITLE##</h1>
	
	<p>Play with this page to literally see what was said <em>in the same breath</em> when a given word is used in the book <cite>##TITLE##</a>.</p>
	
	<div id='form' >

		<script>
			\$(function() {
				\$( "#breath_slider" ).slider({
					value: ##BREATH##, min: 40, max: 80, step: 1,
					slide: function( event, ui ) { \$( "#breath" ).val( ui.value ); }
				});
				
				\$( "#detail_slider" ).slider({
					value: ##DETAIL##, min: 2, max: 8, step: 1,
					slide: function( event, ui ) { \$( "#detail" ).val( ui.value ); }
				});
				
				\$( "#breath" ).val( \$( "#breath_slider" ).slider( "value" ) );
				\$( "#detail" ).val( \$( "#detail_slider" ).slider( "value" ) );
				
			});
		</script>

		<form action="./" method="get">
			<input type='hidden' name='id' value='##ID##' />
			<label>Enter a word: </label>
			<input name="q" type="text" value="##QUERY##"><br />
			<label>Size of breath (40-80 characters):<label>
			<input id="breath" name="r" type="hidden" value="##BREATH##" style='border: 0'><br />
			<div id="breath_slider" style='width: 25%; margin-bottom: 1em'></div>
			<label>Amount of detail (2-8 words):</label> <input id="detail" name="t" type="hidden" value="##DETAIL##" style='border: 0' >
			<div id="detail_slider" style='width: 25%'></div>
			<button type="submit">Go</button><br />
			<a href="javascript:tips()">Usage tips</a>
		</form>
	</div>

	<!-- tips dialog box -->
	<div id="tips">
		<p>How to get the most out of this application:</p>
		<ol><li>Enter or a word (or "regular expression") to locate in the book. This is your query.</li>
		<li>Change the size of the <strong>breath</strong> to increase or decrease the number of characters on either side of the query where co-occurances will be found. Values between 40 and 80 work well.</li>
		<li>Change the amount of <strong>detail</strong> to increase or decrease the number of co-occurances to identify for each query. Values between 4 and 7 work well.</li>
		<li>Adjust the breath and detail until the resulting diagram forms simple patterns with very few crossing lines.</li>
		</ol>
		<p>The resulting graphic will tell you something about the text, and you will be doing "distant reading".</p>
	</div>

	<!-- matrix -->
	<div id="matrix">
	<p>The visualization is based on the following matrix of terms, starting with and building upon  "##QUERY##":</p>
	##MATRIX##
	</div>

	<p>Zoom in and out to see detail. Drag nodes to simplify the diagram. Note enclosed polygons to "read" coherent thoughts. (<a href="javascript:matrix()">Matrix</a>)<p>
	<p><a href='/sandbox/concordance/?cmd=search&id=##ID##&query=##QUERY##&radius=##RADIUS##'>Concordance</a></p>
</div>
		
EOT

}



# given an id, return author, title, and filename
sub get_metadata {
	
	my $root      = ROOT;
	my $host      = INFOMO;
	my $resource  = MyLibrary::Resource->new( fkey => shift );
	my @locations = $resource->resource_locations;
	my $filename  = '';
	my $url       = '';
	foreach my $location ( @locations ) {
	
		if ( $location->resource_location_type == PROXY ) { $filename = $location->location }
		if ( $location->resource_location_type == URL   ) { $url      = $location->location }
	
	}
	
	$filename =~ s|$host|$root|e;
	
	return ( $resource->name, $resource->creator, $filename, $url );
	
}

sub concordance {

	my $corpus    = shift;
	my $query     = shift;
	my $radius    = shift;
	my $stopwords = shift;
	
	my $subset = '';
	my $concordance = Lingua::Concordance->new;
	$concordance->text( $corpus );
	$concordance->query( $query );
	$concordance->radius( $radius );
	foreach ( $concordance->lines ) { $subset .= $_ . ' ' }
	if ( ! $subset ) { &notfound }
	$subset =~ tr/a-zA-Zà-ƶÀ-Ƶ'()\-,.?!;:/\n/cs;
	$subset =~ s/([,.?!:;()\-])/\n$1\n/g;
	$subset =~ s/\n+/\n/g;
	my @tokens = split /\n/, lc( $subset );
	my %words = ();
	foreach ( @tokens ) {
	
		next if ( $_ =~ /[,.?!:;()\-]/ );
		next if ( $$stopwords{ $_ } );
		next if ( length( $_ ) < 3 );
		$words{ $_ }++;
	
	}

	return \%words;
	
}


sub coocurances {

	my $query = shift;
	my $words = shift;
	my $threshold = shift;
	
	my $t = 0;
	my %coocurrances = ();
	
	foreach ( sort { $$words{ $b } <=> $$words{ $a } } keys %$words ) {
	
		$coocurrances{ $_ } = $$words{ $_ };
		$t++;
		last if ( $t == $threshold );
		
	}
	
	return \%coocurrances;

}

sub slurp {

	# open a file named by the input and return its contents
	my $f = @_[0];
	open (F, "< $f");
	my $r = do { local $/; <F> };
	close F;
	return $r;

}


sub same_breath {

	return <<JAVASCRIPT;
<div style='float: right;border-width: 2px; border-style: dashed; border-color: white;'>
	<script type="text/javascript+protovis">
	
		var w = 550,
			h = 550;
		
		var vis = new pv.Panel()
			.width(w)
			.height(h)
			.fillStyle("white")
			.event("mousedown", pv.Behavior.pan())
			.event("mousewheel", pv.Behavior.zoom());
		
		var force = vis.add(pv.Layout.Force)
			.nodes(corpus.nodes)
			.links(corpus.links)
			.springLength(50)
			.chargeConstant(-1750)
			.bound(true);
			
		force.link.add(pv.Line);
		
		force.node.add(pv.Dot)
			.size(function(d) (d.linkDegree + 175) * Math.pow(this.scale, -1.5))
			.lineWidth(.5)
			.fillStyle("pink")
			.title(function(d) d.nodeName)
			.event("mousedown", pv.Behavior.drag())
			.event("drag", force);
		
		force.label.add(pv.Label).font('14px sans-serif');
		
		vis.render();
	
	</script>
</div>
JAVASCRIPT

}



# return true or die
1;