Stateless Path Drawing Based on Incoming Data

Rahul Sahay
Jun 26, 2015
4.2k
0
1
Article

I was recently working on an assignment wherein we needed to draw the flow of inventory movements based on the incoming data from the database. These datasets must be configured based on the routes coming from the database. Also, the case was the values coming from the database was redundant as well, so the algorithm must be smart enough to determine which route has been drawn and is being repeated, then skip that part for the next time.

For making it I used an open API by Google, then modified the built-in API based on my requirements. It's a fairly good combination of server-side and client-side projection. The following is the sample code that I used for it.

@{
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_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_RoomsTo_Stock_Rooms = To_Stock_Rooms.Distinct().ToList();
//Compare both the lists
var compare_Stocks = From_stock_rooms.Except(To_Stock_Rooms);
compare_Stockscompare_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_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_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>

The preceding snippet is a MVC view wherein I handled the service-side data with jsplumb, so based on the incoming data the following diagram is drawn. This is the data visualization diagram based on two sets of inputs, so here the user will be selecting various combinations from the two dropdowns and then based on that it will draw the diagram here.