Stateless Path Drawing Based on Incoming Data

Rahul Sahay
Jun 27, 2015
2.1k
0
0
Blog

I was recently working on one assignment where in we need to draw the flow of inventory movements based on the incoming data from the database. These datasets have to configured based on the routes coming from the database. Also, the case was values coming from database are redundant as well, so the algorithm has to be smart enough to figureout which route has been drawn and if same is getting repeated, then skip that part for the next time.

For making the same i have used one open API by google (http://jsplumb.org/demo/flowchart/dom.html), then modified the built in api based on my requirement. It’s a fairly, good combination of server side and client side projection. Below, is the sample code which i have used for the same.

@{
ViewBag.Title = "DataModel";
}
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="~/Scripts/JsPlumb/demo-all.css">
<link rel="stylesheet" href="~/Scripts/JsPlumb/demo.css">
@*<body data-demo-id="statemachine" data-library="jquery">*@
<script type="text/javascript">
var rootDir = "@Url.Content("~/")";
$(document).ready(function () {
var querystring = window.location.search.replace('?', '').split('amp');
var simid = "";
for (var i = 0; i < querystring.length; i++) {
if (querystring[0] != "") {
simid = querystring[0].split('=')[1];
$("#hdnSimid").val(simid);
}
}
$('#lnkReplication').text("Back to Simulation Screen with SIM Id: " + simid);
$("#lnkReplication").click(function () {
var url = rootDir + "SimulationEnquiry/SimulationEnquiry?Sim_ID=" + $("#hdnSimid").val();
$('#lnkReplication').attr('href', url);
});
})
</script>
<div>
<span style="font-family: Arial; text-wrap: normal; font-weight: bold">
<a href="#" id="lnkReplication">A
</a>
</span>
@Html.Hidden("hdnSimid")
</div>
<div id="main">
@* Generate divs dynamically *@
@{
var collection = ViewData["completeSet"];
// draw only unique boxes
// then take ids for from stockroom, tostockroom and path
// fetch unique to stock rooms 1st
var result = (from item in (IEnumerable<DataAccessLayer.Entities.SimulationDisplay>)ViewData["completeSet"]
select new
{
TO_STOCKROOM = item.TO_STOCKROOM,
}).Distinct().ToList();
//draw unique divs
var mapping = (from item in (IEnumerable<DataAccessLayer.Entities.SimulationDisplay>)ViewData["completeSet"]
select new
{
FROM_STOCKROOM = item.FROM_STOCKROOM,
TO_STOCKROOM = item.TO_STOCKROOM,
TRANSACTION_TYPE = item.TRANSACTION_TYPE
}).Distinct().ToList();
int count = mapping.Count();
<div id="mappingcount" style="display: none">@count</div>
<div class="demo statemachine-demo" id="statemachine-demo">
@* Compare From stockroom list with To stock room list *@
@{
//Query to fetch all from stockrooms
List<string> From_stock_rooms = new List<string>();
List<string> To_Stock_Rooms = new List<string>();
foreach (var w in mapping)
{
From_stock_rooms.Add(w.FROM_STOCKROOM);
}
From_stock_roomsFrom_stock_rooms = From_stock_rooms.Distinct().ToList();
// Query to fetch all to stockrooms
foreach (var w in mapping)
{
To_Stock_Rooms.Add(w.TO_STOCKROOM);
}
To_Stock_RoomsTo_Stock_Rooms = To_Stock_Rooms.Distinct().ToList();
//Compare both the lists
var compare_Stocks = From_stock_rooms.Except(To_Stock_Rooms);
compare_Stockscompare_Stocks= compare_Stocks.ToList();
}
@* Stock rooms CSS declartion *@
@{ string left = "10em";
string top = "15em";
string[] split_left;
string split_left_1st;
string[] split_left_2nd;
int var_left = 0;
string[] split_top;
string split_top_1st;
string[] split_top_2nd;
int var_top = 0;
//To_stockrroms decalartion
string left_tostockroom = "20em";
string top_tostockroom = "15em";
string[] split_left_tostockroom;
string split_left_1st_tostockroom;
string[] split_left_2nd_tostockroom;
int var_left_tostockroom = 0;
string[] split_top_tostockroom;
string split_top_1st_tostockroom;
string[] split_top_2nd_tostockroom;
int var_top_tostockroom = 0;
}
@* This scenario will come into picture when there is any mismatch in from and to stock room *@
@for(int k =0;k<compare_Stocks.Count();k++)
{
if(compare_Stocks.ElementAt(k)!="")
{
<div class="w" id="@compare_Stocks.ElementAt(k)" style="left:@left;top:@top;">@compare_Stocks.ElementAt(k)
@* use this ep class when you have to allow users to make changes or connect endpoints additionaly *@
@*<div class="ep"></div>*@
<div class=""></div>
</div>
split_left = left.Split('e');
// split_left_2nd = split_left_1st[0].Split('m');
split_leftsplit_left_1st = split_left[0].ToString();
var_left = Convert.ToInt32(split_left_1st);
var_left += 13;
left = Convert.ToString(var_left) + "em";
split_top = top.Split('e');
//split_top_2nd = split_top_1st[0].Split('m');
split_topsplit_top_1st = split_top[0].ToString();
var_top = Convert.ToInt32(split_top_1st);
var_top += 13;
top = Convert.ToString(var_top) + "em";
}
}
@foreach (var c in result)
{
@*<div id="@c.FROM_STOCKROOM" style="display:none">@c.FROM_STOCKROOM</div>*@
<div class="w" id="@c.TO_STOCKROOM" style="left:@left_tostockroom;top:@top_tostockroom;" >@c.TO_STOCKROOM
@* use this ep class when you have to allow users to make changes or connect endpoints additionaly *@
@*<div class="ep"></div>*@
<div class=""></div>
</div>
split_left_tostockroom = left_tostockroom.Split('e');
// split_left_2nd = split_left_1st[0].Split('m');
split_left_1st_tostockroom = split_left_tostockroom[0].ToString();
var_left_tostockroom = Convert.ToInt32(split_left_1st_tostockroom);
var_left_tostockroom += 13;
left_tostockroom = Convert.ToString(var_left_tostockroom) + "em";
split_top_tostockroom = top.Split('e');
//split_top_2nd = split_top_1st[0].Split('m');
split_top_1st_tostockroom = split_top_tostockroom[0].ToString();
var_top_tostockroom = Convert.ToInt32(split_top_1st_tostockroom);
var_top_tostockroom += 13;
top_tostockroom = Convert.ToString(var_top) + "em";
}
</div>
int i = 1;
int j = 1;
foreach (var m in mapping)
{
<div id="FROM_STOCKROOM_@i" style="display:none">@m.FROM_STOCKROOM</div>
<div id="TO_STOCKROOM_@i" style="display:none">@m.TO_STOCKROOM</div>
//if (FromStockroom == empty then skip trantype, That will be treated as orphan node)
if (@m.FROM_STOCKROOM != "")
{
<div id="TRANSACTION_TYPE_@j" style="display:none">@m.TRANSACTION_TYPE</div>
j++;
}
i++;
}
var mapresult = mapping;
}
</div>
@* <script src="~/Scripts/JsPlumb/jquery-1.9.0.js"></script>*@
<script src="~/Scripts/JsPlumb/jquery-ui-1.9.2-min.js"></script>
<script src="~/Scripts/JsPlumb/jquery.ui.touch-punch.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="~/Scripts/JsPlumb/jsBezier-0.6.js"></script>
<script src="~/Scripts/JsPlumb/jsplumb-geom-0.1.js"></script>
<script src="~/Scripts/JsPlumb/util.js"></script>
<script src="~/Scripts/JsPlumb/dom-adapter.js"></script>
<script src="~/Scripts/JsPlumb/jsPlumb.js"></script>
<script src="~/Scripts/JsPlumb/endpoint.js"></script>
<script src="~/Scripts/JsPlumb/connection.js"></script>
<script src="~/Scripts/JsPlumb/anchors.js"></script>
<script src="~/Scripts/JsPlumb/defaults.js"></script>
<script src="~/Scripts/JsPlumb/connectors-bezier.js"></script>
<script src="~/Scripts/JsPlumb/connectors-statemachine.js"></script>
<script src="~/Scripts/JsPlumb/connectors-flowchart.js"></script>
<script src="~/Scripts/JsPlumb/connector-editors.js"></script>
<script src="~/Scripts/JsPlumb/renderers-svg.js"></script>
<script src="~/Scripts/JsPlumb/renderers-canvas.js"></script>
<script src="~/Scripts/JsPlumb/renderers-vml.js"></script>
<script src="~/Scripts/JsPlumb/jquery.jsPlumb.js"></script>
<script src="~/Scripts/JsPlumb/demo-jquery.js"></script>
<script src="~/Scripts/JsPlumb/demo-list.js"></script>

Above snippet is MVC view where in, I have handled service side data with jsplumb. So, basically, based on the incoming data, its drawing the below diagram. This diagram is nothing but the data visualization diagram based on two sets of inputs. So, here user will be selecting different combinations from the two different dropdowns and then, based on that it will draw the diagram here.
data model