$${Shide_border}$$
var flow_variable_if = "top";
if (flow_variable_if === "top") {
var is_this_exp_mode = true;
}
else {
var is_this_exp_mode = false;
}
var node_reached = $${InodeReached}$$ ;
var label1 = "$${SLabel1}$$"
var label2 = "$${SLabel2}$$";
var labels_line_1 = label1.split(",");
var labels_line_2 = label2.split(",");
var param = labels_line_1.length;
var nodes = d3.range(param);
var edges = d3.range(param-1);
function progress (integero, expert_mode) {
var progress = [];
var progress_line =[];
var current = [];
for(i; i < $${SnumComponent}$$; i++){
progress.push(false);
current.push(false);
if(i != $${SnumComponent}$$-1){
progress_line.push(false);
}
}
console.log("in func progress:", progress, progress_line, current);
current [integero] = true;
for (i = 0; i < progress.length; i++) {
if (i <= integero) {
progress[i] = true;
}}
for (i = 0; i < progress_line.length; i++) {
if (i < integero) {
progress_line[i] = true;
}}
var optionals = [false,false,false];
var optionals_line = [false,false,false];
var hide_easy_mode = [false,false,false];
if (integero > 0) {
if (! expert_mode) {
optionals_line[0] = true;
optionals[1] = true;
optionals_line[1] = true; }
if (expert_mode) {
hide_easy_mode[0] = true;
hide_easy_mode[1] = true; }
}
return [progress, progress_line, current, optionals, optionals_line, hide_easy_mode];
}
///////////////////////////////////////////////////////////
var list_progress = progress (node_reached, is_this_exp_mode);
console.log(list_progress)
///////////////////////////////////////////////////////////
var progress = list_progress[0];
var progress_line = list_progress[1];
var current = list_progress[2];
var optionals = list_progress[3];
var optionals_line = list_progress[4];
var hide_easy_mode = list_progress[5];
var yellow_string = "rgb(255,216,60)"
var local_workspace_path = "$${SImage}$$";
//var local_workspace_path = "img/logo.png";
//var size_circles = 1.05;
var fixed_width_nodes = 20;
var line_thickness = 3;
var size_circles_y = 13.3;
var perc_occupied = 90;
var step_size = perc_occupied/(param-1)
var perc_sides = (100-perc_occupied)/2
var opacity_param = 0.75;
//
var the_div = d3.select("body")
.append("div")
.classed("automl_header",true);
//the_div.append("img")
//.attr("class","logo")
//.attr("src",local_workspace_path);
var my_svg = the_div.append("div")
.classed("svg_container",true)
.append("svg");
var targetWidth_out = parseInt(d3.select("div.svg_container").style("width"));
var span_rects = fixed_width_nodes/targetWidth_out*100;
my_svg.attr("width","100%")
.attr("height","150px")
.call(responsivefy);
var dots = my_svg
.selectAll("rect")
.data(nodes);
var lines = my_svg
.selectAll("line")
.data(edges);
lines.enter()
.append("line")
.classed("connect",true)
.attr("y1", "50%")
.attr("y2", "50%")
.attr("x1", (d,i)=>String(perc_sides+i*step_size)+"%")
.attr("x2", (d,i)=>String(perc_sides+(i+1)*step_size)+"%")
.attr("stroke-width", line_thickness)
.attr("stroke", function (d,i) {
if (progress_line[i]) {return yellow_string}
return "lightgrey"});
lines.enter()
.append("line")
.classed("hide_connect",true)
.attr("y1", "50%")
.attr("y2", "50%")
.attr("x1", (d,i)=>String(perc_sides+i*step_size)+"%")
.attr("x2", (d,i)=>String(perc_sides+(i+1)*step_size)+"%")
.attr("stroke-width", line_thickness)
.attr("stroke","#666666")
.attr("opacity",function(d,i){
if (optionals_line[i]) {
return opacity_param
}
return 0
});
dots.enter()
.append("rect")
.classed("nodes",true)
.attr("y", "36.5%")
.attr("x", (d,i)=>String(perc_sides+i*step_size-span_rects)+"%")
.attr("width", String(fixed_width_nodes*2)+"")
.attr("height", String(size_circles_y*2)+"%")
.attr("rx",6)
.attr("ry",6)
.attr("fill", function (d,i) {
if (progress[i]) {
if (current[i]) {return "#666666"}
return yellow_string}
return "lightgrey"})
.attr("stroke", function (d,i) {
if (current[i]) {return yellow_string}
return "none"})
.attr("stroke-width", line_thickness);
dots.enter()
.append("text")
.attr("y", "76%")
.attr("x", (d,i)=>String(perc_sides+i*step_size)+"%")
.attr("text-anchor","middle")
.text((d,i)=>String(labels_line_1[i]));
dots.enter()
.append("text")
.attr("y", "87%")
.attr("x", (d,i)=>String(perc_sides+i*step_size)+"%")
.attr("text-anchor","middle")
.text((d,i)=>String(labels_line_2[i]));
dots.enter()
.append("rect")
.classed("hide_nodes",true)
.attr("y", "36.5%")
.attr("x", (d,i)=>String(perc_sides+i*step_size-span_rects)+"%")
.attr("width", String(fixed_width_nodes*2)+"")
.attr("height", String(size_circles_y*2)+"%")
.attr("fill", "#666666")
.attr("opacity",function(d,i){
if (optionals[i]) {
return opacity_param
}
return 0
});
dots.enter()
.append("rect")
.classed("hide_text",true)
.attr("y", "68%")
.attr("x", (d,i)=>String(perc_sides+i*step_size-step_size/2)+"%")
.attr("width", String(step_size)+"%")
.attr("height", "22%")
.attr("fill", "#666666")
.attr("opacity",function(d,i){
if (optionals[i]) {
return opacity_param;
}
return 0;
});
// found at https://brendansudol.com/writing/responsive-d3
function responsivefy(svg) {
// get container + svg aspect ratio
var container = d3.select(svg.node().parentNode),
width = parseInt(svg.style("width")),
height = parseInt(svg.style("height")),
aspect = width / height;
// add viewBox and preserveAspectRatio properties,
// and call resize so that svg resizes on inital page load
svg.attr("viewBox", "0 0 " + width + " " + height)
.attr("preserveAspectRatio", "xMinYMid")
.call(resize);
d3.select(window).on("resize." + container.attr("id"), resize);
// get width of container and resize svg to fit it
function resize() {
var targetWidth = parseInt(container.style("width"));
svg.attr("width", targetWidth);
//svg.attr("height", Math.round(targetWidth / aspect));
}
}