razyk 0.0.1 → 0.1.0

data/lib/razyk/webapp.rb

@@ -3,23 +3,33 @@ require "rack"
 require "tempfile"
 require "thread"
 require "stringio"
-
-require "razyk/graph"
+require "json"
 
 module RazyK
   class WebApp
-    def initialize
-      reset
-    end
-
-    def reset
-      @vm = nil
-      @graph = 0
-      @step = 0
-      @thread = nil
-      @port_in = StringIO.new
-      @port_out = StringIO.new
-      @queue = Queue.new
+    class InputStream
+      def initialize(str="")
+        @buf = str.b
+        @chars = []
+      end
+      def getbyte
+        if @buf
+          ret = @buf.unpack("C")[0]
+          @buf = @buf[1..-1]
+          if ret
+            @chars << ret
+          end
+          ret
+        else
+          nil
+        end
+      end
+      def wrote
+        @chars.pack("C*")
+      end
+      def remain
+        @buf || ""
+      end
     end
 
     def template(name)
@@ -27,7 +37,6 @@ module RazyK
     end
 
     def main_page(req)
-      reset
       res = Rack::Response.new
       res.status = 200
       res.write File.read(template("main.html"))
@@ -44,96 +53,46 @@ module RazyK
       res
     end
 
-    def reduce_thread(vm)
-      while q = @queue.pop
-        begin
-          q.push(vm.reduce)
-        rescue
-          q.push($!)
-        end
-      end
-    end
+    def parse(req)
+      expression = req.params["expression"] || "(OUT (I IN))"
 
-    def set_program(req)
+      memory = {}
+      tree = RazyK::Parser.parse(expression, memory: memory)
       res = Rack::Response.new
-      begin
-        tree = RazyK::Parser.parse(req.params["program"])
-        if req.params["mode"] == "true"
-          root = Pair.new(:OUT, Pair.new(tree, :IN))
-          @port_in = StringIO.new(req.params["stdin"] || "")
-          recursive = false
-        else
-          root = tree
-          recursive = true
-        end
-        # discard previous vm and thread
-        if @thread
-          @thread.kill
-          @thread = nil
-        end
-        @vm = VM.new(root, @port_in, @port_out, recursive)
-        # start Thread for reduction
-        @thread = Thread.start do reduce_thread(@vm) end
-      rescue
-        res.status = 501
-        puts $!.message, $@
-        return res
-      end
-      res.header["Content-Type"] = "text/json"
-      res.write('{"status":"success"}')
+      res.header["Content-Type"] = "application/json"
+      json_state = JSON::State.from_state(nil)
+      json_state.max_nesting = 0
+      res.write({
+        expression: tree.inspect,
+        nodes: tree.as_json,
+      }.to_json(json_state))
       res
     end
 
-    def step(req)
-      res = Rack::Response.new
-      res.header["Content-Type"] = "text/plain"
-      if @thread
-        rep = Queue.new
-        @queue.push(rep)
-        ret = rep.pop
-        if ret.is_a?(Exception)
-          raise ret
-        end
-        if ret
-          @step += 1
-        end
-        res.write("OK")
-      else
-        res.write("enter program first")
-      end
-      res
-    end
-
-    def stdout(req)
-      res = Rack::Response.new
-      res.header["Content-Type"] = "text/plain"
-      res.write(@port_out.string.inspect)
-      res
-    end
+    def reduce(req)
+      stdin_read = req.params["stdin_read"] || ""
+      stdin_remain = req.params["stdin_remain"] || ""
+      stdout = req.params["stdout"] || ""
+      expression = req.params["expression"] || "(OUT (I IN))"
+      recursive = (req.params["recursive"] == "true")
+      port_in = InputStream.new(stdin_remain)
+      port_out = StringIO.new("")
 
-    def expression(req)
+      memory = {}
+      tree = RazyK::Parser.parse(expression, memory: memory)
+      vm = VM.new(tree, port_in, port_out, recursive: recursive)
+      vm.reduce
       res = Rack::Response.new
-      res.header["Content-Type"] = "text/plain"
-      if @vm
-        res.write(@vm.tree.inspect)
-      else
-        res.write("enter program first")
-      end
-      res
-    end
-
-    def graph(req)
-      res = Rack::Response.new
-      if @vm
-        res.header["Content-Type"] = "image/svg+xml"
-        tmpfile = Tempfile.new("razyk_graph")
-        RazyK::Graph.graph(@vm.tree, :style => :dag).output(:svg => tmpfile.path)
-        res.write(tmpfile.read)
-        tmpfile.unlink
-      else
-        res.header["Content-Type"] = "text/plain"
-        res.write("enter program first")
-      end
+      res.header["Content-Type"] = "application/json"
+      json_state = JSON::State.from_state(nil)
+      json_state.max_nesting = 0
+      res.write({
+        expression: vm.tree.inspect,
+        nodes: vm.tree.as_json,
+        stdin_read: stdin_read + port_in.wrote,
+        stdin_remain: port_in.remain,
+        stdout: stdout + port_out.string,
+      }.to_json(json_state))
       res
     end
 
@@ -142,16 +101,10 @@ module RazyK
       case req.path
       when "/"
         res = main_page(req)
-      when "/set_program"
-        res = set_program(req)
-      when "/step"
-        res = step(req)
-      when "/stdout"
-        res = stdout(req)
-      when "/expression"
-        res = expression(req)
-      when "/graph"
-        res = graph(req)
+      when "/parse"
+        res = parse(req)
+      when "/reduce"
+        res = reduce(req)
       else
         res = not_found(req)
       end

data/lib/razyk/webapp/templates/main.html

@@ -2,68 +2,235 @@
 <html>
 <head>
   <title>RazyK</title>
-  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
   <script type="text/javascript">
-    function update() {
-      if ($("#program_mode").is(":checked")) {
-        $("#output_buffer").load("/stdout");
+    var RazyK = function(expression, nodes, stdin_read, stdin_remain, stdout, recursive) {
+      this.expression = expression;
+      this.nodes = nodes;
+      this.stdin_read = stdin_read;
+      this.stdin_remain = stdin_remain;
+      this.stdout = stdout;
+      this.recursive = recursive;
+    };
+
+    function draw(razyk) {
+      toggle_mode();
+      if ($("#lazyk_mode").is(":checked")) {
+        $("#stdin_progress").text(razyk.stdin_read + "_" + razyk.stdin_remain);
+        $("#stdout").text(razyk.stdout);
+      }
+      $("#expression").text(razyk.expression);
+
+      var max_depth_f = function(node, depth) {
+        if (node.children) {
+          return Math.max.apply(null, node.children.map(function(elm){ return max_depth_f(elm, depth+1); }));
+        }
+        return depth;
+      }
+      var max_width_f = function(node, depth, widths) {
+        if (widths[depth]) {
+          widths[depth] += 1;
+        } else {
+          widths[depth] = 1;
+        }
+        if (node.children) {
+          node.children.forEach(function(elm){
+            max_width_f(elm, depth+1, widths);
+          });
+        }
+        if (depth == 1) {
+          return Math.max.apply(null, Object.keys(widths).map(function(elm) { return widths[elm] }));
+        } else {
+          return null;
+        }
       }
-      $("#expression").load("/expression");
-      $("#graph").attr("src", "/graph");
+      var max_depth = max_depth_f(razyk.nodes, 1);
+      var max_width = max_width_f(razyk.nodes, 1, {});
+      $("div#graph").empty();
+      var svg = d3.select("div#graph").append("svg");
+      var width = max_width * 20;
+      var height = max_depth * 20;
+      if (width < 500) { width = 500; }
+      if (width < 1000) { width = 1000; }
+      svg.attr("width", width + 50);
+      svg.attr("height", height + 50);
+      var tree = d3.layout.tree().size([width, height]);
+      var nodes = tree.nodes(razyk.nodes);
+      // segments
+      svg.selectAll("path")
+        .data(tree.links(nodes))
+        .enter()
+        .append("path")
+        .attr("d", d3.svg.diagonal())
+        .attr("fill", "none")
+        .attr("stroke", "black")
+        .attr("stroke-width", 2)
+        .attr("transform", "translate(0, 15)");
+      // circles
+      var coloring = function(d) {
+        if (d.name == "") {
+          return "black";
+        } else if (d.name == "I") {
+          return "blue";
+        } else if (d.name == "K") {
+          return "green";
+        } else if (d.name == "S") {
+          return "red";
+        } else if (d.name == "OUT" || d.name == "PUTC") {
+          return "purple";
+        } else if (d.name == "IN") {
+          return "yellow";
+        } else {
+          return "black";
+        }
+      };
+      svg.selectAll("circle")
+        .data(nodes)
+        .enter()
+        .append("circle")
+        .attr("cx", function(d){return d.x;})
+        .attr("cy", function(d){return d.y+15;})
+        .attr("r", function(d) { if (d.name == "") { return 2; } else { return 10; } })
+        .style("fill", coloring);
     }
-    function set_program() {
-      $.post("/set_program",
-             {
-               program: $("#program").val(),
-               mode: $("#program_mode").is(":checked"),
-               stdin: $("#input_buffer").val()
-             },
-             function() {
-               update();
-             }, "json");
+
+    function set_program(cb) {
+      program = $("#program").val();
+      recursive = true;
+
+      if ($("#lazyk_mode").is(":checked")) {
+        program = "($OUT (" + program + " $IN))";
+        recursive = false;
+      }
+      window.razyk = new RazyK(program, {name: ""}, "", $("#input_buffer").val(), "", recursive);
+      $.post("/parse", {expression: program},
+             function(data) {
+               window.razyk.expression = data.expression;
+               window.razyk.nodes = data.nodes;
+               draw(window.razyk);
+               if (cb) { cb(); }
+             });
     }
 
-    function step_reduction() {
-      $.get("/step", {},
-            function() {
-               update();
+    function reduce(cb) {
+      r = window.razyk;
+      $.post("/reduce",
+             {expression: r.expression, stdin_read: r.stdin_read, stdin_remain: r.stdin_remain, stdout: r.stdout, recursive: r.recursive},
+            function(data) {
+              finished = r.expression == data.expression;
+              window.razyk = new RazyK(data.expression, data.nodes, data.stdin_read, data.stdin_remain, data.stdout, window.razyk.recursive);
+              draw(window.razyk);
+              if (cb) { cb(finished); }
             });
     }
 
+    function run() {
+      var wait = 500;
+      if (!window.running) { return; }
+      if ( window.razyk == undefined ) {
+        set_program(function() {
+          setTimeout(run, wait);
+        });
+      } else {
+        reduce(function(finished) {
+          if (!finished) {
+            setTimeout(run, wait);
+          } else {
+            window.running = false;
+          }
+        });
+      }
+    }
+
+    function start() {
+      window.running = true;
+      run();
+    }
+
+    function stop() {
+      window.running = false;
+    }
+
     function toggle_mode() {
-      if ($("#program_mode").is(":checked")) {
-        $("#inout_pane").show("fast");
+      if ($("#lazyk_mode").is(":checked")) {
+        $(".inout_pane").show("fast");
       } else {
-        $("#inout_pane").hide("fast");
+        $(".inout_pane").hide("fast");
       }
     }
   </script>
 </head>
-<body>
-  <p><div>enter program</div>
-  <textarea id="program" cols="100">skki</textarea>
-  </p>
-  <p>
-  <input type="checkbox" id="program_mode" onchange="toggle_mode();" />
-  <span>LazyK application mode</span>
-  </p>
-  <p>
-  <input type="button" value="set program" onclick="set_program();" />
-  <input type="button" value="step" onclick="step_reduction();" />
-  </p>
-  <span id="inout_pane" style="display: none">
-    <div>stdin</div>
-    <textarea id="input_buffer" cols="100"></textarea>
-    <div>stdout</div>
-    <div id="output_buffer"></div>
-  </span>
-  <p>
-    <div>combinator expression</div>
-    <div id="expression"> </div>
-  </p>
-  <p>graph expression</p>
-  <iframe id="graph" height="1000" width="100%">
-    using iframe.
-  </iframe>
+<body class="bg-info">
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+  <div class="container-fluid bg-info">
+    <div class="row"><div class="col-lg-1"></div><div class="col-lg-10">
+    <div class="row form-group">
+      <div class="col-lg-12">
+        <label for="program">enter program</label>
+        <textarea id="program" class="form-control" cols="100">SKKI</textarea>
+      </div>
+    </div>
+    <div class="row form-group">
+      <div class="col-sm-3">
+        <label class="checkbox-inline">
+          <input type="checkbox" id="lazyk_mode" onchange="toggle_mode();" /> LazyK application
+        </label>
+      </div>
+      <div class="col-sm-1"><input type="button" class="form-control btn btn-default" value="reset" onclick="set_program();" /></div>
+      <div class="col-sm-1"><input type="button" class="form-control btn btn-default" value="step" onclick="reduce();" /></div>
+      <div class="col-sm-1"><input type="button" class="form-control btn btn-default" value="run" onclick="start();" /></div>
+      <div class="col-sm-1"><input type="button" class="form-control btn btn-default" value="stop" onclick="stop();" /></div>
+    </div>
+    <div class="row inout_pane form-group" style="display: none">
+      <div class="col-lg-12">
+        <label for="input_buffer">stdin</label>
+        <div>
+          <textarea id="input_buffer" class="form-control" cols="100"></textarea>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+    </div>
+    <div class="row"></div>
+    <div class="row inout_pane" style="display: none">
+      <div class="col-lg-12">
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <div class="panel-title">stdin</div>
+          </div>
+          <div id="stdin_progress" class="panel-body"></div>
+        </div>
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <div class="panel-title">stdout</div>
+          </div>
+          <div id="stdout" class="panel-body"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-12">
+        <div class="panel panel-default">
+          <div class="panel-heading"><div class="panel-title">combinator expression</div></div>
+          <div id="expression" class="panel-body"> </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-12">
+        <div class="panel panel-default">
+          <div class="panel-heading"><div class="panel-title">graph</div></div>
+          <div id="graph" class="panel-body"> </div>
+        </div>
+      </div>
+    </div>
+    </div><div class="col-lg-1"></div></div>
+  </div>
 </body>
 </html>