static/MemView.pl

   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>