[p5sagit/Devel-Size.git] / static / MemView.pl

#!/usr/bin/env perl

use strict;
use warnings;

use Mojolicious::Lite;

use ORLite {
    file => '../x.db',
    package => "MemView",
    #user_version => 1,
    readonly => 1,
    #unicode => 1,
};

# Documentation browser under "/perldoc"
plugin 'PODRenderer';

get '/' => sub {
    my $self = shift;
    $self->render('index');
};

get '/jit_tree/:id/:depth' => sub {
    my $self = shift;
    my $id = $self->stash('id');
    my $depth = $self->stash('depth');
    warn "jit_tree $id $depth";
    my $jit_tree = _fetch_node($id, $depth, sub {
        my $node=shift; $node->{data}{'$area'} = $node->{self_size}+$node->{kids_size}
    });
    use Devel::Dwarn; Dwarn($jit_tree);
    $self->render_json($jit_tree);
};

sub _fetch_node {
    my ($id, $depth, $transform) = @_;
    my $node = MemView->selectrow_hashref("select * from node where id = ?", undef, $id);
    if ($depth && $node->{child_seqns}) {
        my @child_seqns = split /,/, $node->{child_seqns};
        my @children = map { _fetch_node($_, $depth-1, $transform) } @child_seqns;
        $node->{children} = \@children;
    }
    $transform->($node) if $transform;
    return $node;
}


app->start;
__DATA__
@@ index.html.ep
% layout 'default';
% title 'Welcome';
Welcome to the Mojolicious real-time web framework!

@@ layouts/default.html.ep
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Treemap - TreeMap with on-demand nodes</title>

<!-- CSS Files -->
<link type="text/css" href="css/base.css" rel="stylesheet" />
<link type="text/css" href="css/Treemap.css" rel="stylesheet" />

<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->

<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="jit.js"></script>
<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<!-- Example File -->
<script language="javascript" type="text/javascript" src="tmdata.js"></script>
<script language="javascript" type="text/javascript" src="tm.js"></script>
</head>

<body onload="init();">
<div id="container">

<div id="left-container">


<div class="text">
<h4>
TreeMap with on-demand nodes    
</h4> 

            This example shows how you can use the <b>request</b> controller method to create a TreeMap with on demand nodes<br /><br />
            This example makes use of native Canvas text and shadows, but can be easily adapted to use HTML like the other examples.<br /><br />
            There should be only one level shown at a time.<br /><br /> 
            Clicking on a band should show a new TreeMap with its most listened albums.<br /><br />            
            
</div>

<div id="id-list">
<table>
    <tr>
        <td>
            <label for="r-sq">Squarified </label>
        </td>
        <td>
            <input type="radio" id="r-sq" name="layout" checked="checked" value="left" />
        </td>
    </tr>
    <tr>
         <td>
            <label for="r-st">Strip </label>
         </td>
         <td>
            <input type="radio" id="r-st" name="layout" value="top" />
         </td>
    <tr>
         <td>
            <label for="r-sd">SliceAndDice </label>
          </td>
          <td>
            <input type="radio" id="r-sd" name="layout" value="bottom" />
          </td>
    </tr>
</table>
</div>

<a id="back" href="#" class="theme button white">Go to Parent</a>


<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>            
</div>

<div id="center-container">
    <div id="infovis"></div>    
</div>

<div id="right-container">

<div id="inner-details"></div>

</div>

<div id="log"></div>
</div>
</body>
</html>
Commit	Line	Data
b2fc39a5	1	#!/usr/bin/env perl
	2
	3	use strict;
	4	use warnings;
	5
	6	use Mojolicious::Lite;
	7
	8	use ORLite {
	9	file => '../x.db',
	10	package => "MemView",
	11	#user_version => 1,
	12	readonly => 1,
	13	#unicode => 1,
	14	};
	15
	16	# Documentation browser under "/perldoc"
	17	plugin 'PODRenderer';
	18
	19	get '/' => sub {
	20	my $self = shift;
	21	$self->render('index');
	22	};
	23
	24	get '/jit_tree/:id/:depth' => sub {
	25	my $self = shift;
	26	my $id = $self->stash('id');
	27	my $depth = $self->stash('depth');
	28	warn "jit_tree $id $depth";
	29	my $jit_tree = _fetch_node($id, $depth, sub {
	30	my $node=shift; $node->{data}{'$area'} = $node->{self_size}+$node->{kids_size}
	31	});
	32	use Devel::Dwarn; Dwarn($jit_tree);
	33	$self->render_json($jit_tree);
	34	};
	35
	36	sub _fetch_node {
	37	my ($id, $depth, $transform) = @_;
	38	my $node = MemView->selectrow_hashref("select * from node where id = ?", undef, $id);
	39	if ($depth && $node->{child_seqns}) {
	40	my @child_seqns = split /,/, $node->{child_seqns};
	41	my @children = map { _fetch_node($_, $depth-1, $transform) } @child_seqns;
	42	$node->{children} = \@children;
	43	}
	44	$transform->($node) if $transform;
	45	return $node;
	46	}
	47
	48
	49	app->start;
	50	__DATA__
	51	@@ index.html.ep
	52	% layout 'default';
	53	% title 'Welcome';
	54	Welcome to the Mojolicious real-time web framework!
	55
	56	@@ layouts/default.html.ep
	57	<!DOCTYPE html>
	58	<head>
	59	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	60	<title>Treemap - TreeMap with on-demand nodes</title>
	61
	62	<!-- CSS Files -->
	63	<link type="text/css" href="css/base.css" rel="stylesheet" />
	64	<link type="text/css" href="css/Treemap.css" rel="stylesheet" />
65
66	<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
67
68	<!-- JIT Library File -->
69	<script language="javascript" type="text/javascript" src="jit.js"></script>
70	<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
71
72	<!-- Example File -->
73	<script language="javascript" type="text/javascript" src="tmdata.js"></script>
74	<script language="javascript" type="text/javascript" src="tm.js"></script>
75	</head>
76
77	<body onload="init();">
78	<div id="container">
79
80	<div id="left-container">
81
82
83
84	<div class="text">
85	<h4>
86	TreeMap with on-demand nodes
87	</h4>
88
89	This example shows how you can use the <b>request</b> controller method to create a TreeMap with on demand nodes<br /><br />
90	This example makes use of native Canvas text and shadows, but can be easily adapted to use HTML like the other examples.<br /><br />
91	There should be only one level shown at a time.<br /><br />
92	Clicking on a band should show a new TreeMap with its most listened albums.<br /><br />
93
94	</div>
95
96	<div id="id-list">
97	<table>
98	<tr>
99	<td>
100	<label for="r-sq">Squarified </label>
101	</td>
102	<td>
103	<input type="radio" id="r-sq" name="layout" checked="checked" value="left" />
104	</td>
105	</tr>
106	<tr>
107	<td>
108	<label for="r-st">Strip </label>
109	</td>
110	<td>
111	<input type="radio" id="r-st" name="layout" value="top" />
112	</td>
113	<tr>
114	<td>
115	<label for="r-sd">SliceAndDice </label>
116	</td>
117	<td>
118	<input type="radio" id="r-sd" name="layout" value="bottom" />
119	</td>
120	</tr>
121	</table>
122	</div>
123
124	<a id="back" href="#" class="theme button white">Go to Parent</a>
125
126
127	<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
128	</div>
129
130	<div id="center-container">
131	<div id="infovis"></div>
132	</div>
133
134	<div id="right-container">
135
136	<div id="inner-details"></div>
137
138	</div>
139
140	<div id="log"></div>
141	</div>
142	</body>
143	</html>