2f:T4d6,md`# Lot Allocation Flow Explorer ## LAFE
This chart shows the flow of allocations of lots between multiple production stages and, ultimately, to final demands. The chart allows exploring the flow by highlighting or zooming the genealogy (upstream and downstream allocations) of one particular lot. Various units of measurement and bill of materials between stages can be handled. Compared to common Sankey diagram, this translates graphically into links with non constant thickness. Bar heights represent lot sizes. However, due to the bill of materials and possible unit change from one stage to another, heights of the bars representing lots can be compared between them only within a product group (green bracket) or along a stage (a column) depending on the normalization mode. Hold the mouse over a lot to display information such as the production date, the production resource, the lot size and how it is allocated. Hold the mouse over a link to display information about the flow. Left-click on a node (lot or demand) to highlight its genealogy. Right-click to toggle zoom mode on the genealogy of the node. Use checkboxes to change grouping and normalization modes or control layout related to demands. `30:Tb00,md`--- ## Example - Drug development production chain In this example we consider the drug development production chain. In a first stage, the drug substance (DS) is produced with a given concentration of the active pharmaceutical ingredient (API), e.g. 100mg/ml. In a second stage, drug substance is formulated into some drug products (DP) of a given form (e.g. vials). Multiple concentrations of the API are considered, e.g. 300mg/ml, 200mg/ml, 100mg/ml and 0mg/ml (placebo). Each one is treated as a different product of the DP stage. Comparator product (marketed product) is also considered as a different DP product. In a third stage, drug products are packaged into investigational medicinal products (IMP) which form the kits that will be dispensed to the patients enrolled in the clinical trials (e.g. a box containing a certain number of vials). The design of the kits depends in the clinical trial. Again, each design is treated as a different product of the IMP stage. Integrated device (DV) is considered as well (e.g. syringes) as a specific production stage. In this example, most of the demands represent the clinical trials that are supplied by the production chain. Demands can also be supplied by product from a non-final (intermediate) stage, e.g. SDP 01 in the example. The bill of materials for one specific product can include multiple upstream products (for example lot IMP014 of product IMP 2xACT200 requires two different upstream products: DP ACT200 and DV MON). In such case, the input flows from each required product overlap. In some other cases, the required quantity of one upstream product may come from multiple lots of that same product. In such case, the input flows from each lot stack, as show for DP006 which consumes DS taken from two lots: DS001 and DS002. Overlaping and stacking of input flows may also occur together as shown for lot IMP015 which consumes quantities from two lots of product DV MON (flows are stacked) and quantity from one lot of the other required product DP ACT200 (flow overlaps). Lot can be only partially allocated, as for example DS002. The unallocated fraction is represented by the empty part of the bar. In this example, unallocated part corresponds to quantities taken for sampling and quantities lost due to product expiry. Lots are ordered vetically according to their production date, within each product group when grouping per product or over the full production stage otherwise. In this example coming from the pharmaceutical industry, exploring lot allocation flow allows to quickly visualize all possible usages of one given lot which is a great support for traceabilty. ` 31:T2973,function init(data){ let lafe = {} //deep clone input data to keep orginal json object untouched lafe.data = JSON.parse(JSON.stringify(data)) // set the dimensions and margins of the graph lafe.margin = {top: 10, right: 10, bottom: 10, left: 10} lafe.width = lafe.data.layout.width - lafe.margin.left - lafe.margin.right lafe.height = lafe.data.layout.height - lafe.margin.top - lafe.margin.bottom lafe.zoom = false //Initial zoom state of the graph lafe.px = 1.0/lafe.width //Relative size of one pixel in the horizontal direction (x) lafe.py = 1.0/lafe.height //Relative size of one pixel in the vertical direction (y) //Graph options, managed by checkboxes or labels displayed directly within the graph lafe.options = [ { "code":"dShw", "type":"checkbox", "value":true, "title":"Show intermediate demands", "x":0.0,"y":0.0,"dx":0.0,"dy":0.0}, { "code":"lclick", "type":"label", "title":"Left-click on a node to highlight genealogy", "x":0.0,"y":0.0,"dx":0.0,"dy":0.0}, { "code":"pGrp", "type":"checkbox", "value":true, "title":"Group by product", "x":0.0,"y":0.0,"dx":0.0,"dy":0.0}, { "code":"dArg", "type":"checkbox", "value":true, "title":"Auto-arrange demands", "x":0.0,"y":0.0,"dx":0.0,"dy":0.0}, { "code":"rclick", "type":"label", "title":"Right-click on a node to toggle zoom", "x":0.0,"y":0.0,"dx":0.0,"dy":0.0}, { "code":"pNrm", "type":"checkbox", "value":true, "title":"Normalize by product", "x":0.0,"y":0.0,"dx":0.0,"dy":0.0} ] lafe.oMap = getMap(lafe.options) //Keeping only consistent data and storing them //into arrays (to keep original order) and maps (for convenient access) lafe.demands = lafe.data.demands .filter(d=>lafe.data.lot2demand.filter(l2d=>l2d.odemand==d.code).length>0) lafe.dMap = getMap(lafe.demands) lafe.resources = lafe.data.resources .filter(r=>lafe.data.lots.filter(l=>l.resource==r.code).length>0) lafe.rMap = getMap(lafe.resources) lafe.stages = lafe.data.stages .filter(s=>lafe.data.products.filter(p=>p.stage==s.code).length>0) lafe.sMap = getMap(lafe.stages) lafe.products = lafe.data.products .filter(p=>lafe.sMap.has(p.stage)) .filter(p=>lafe.data.lots.filter(l=>l.product==p.code).length>0) lafe.pMap = getMap(lafe.products) lafe.lots = lafe.data.lots .filter(l=>lafe.pMap.has(l.product)&&lafe.rMap.has(l.resource)) lafe.lMap = getMap(lafe.lots) lafe.l2l = lafe.data.lot2lot .filter(l2l=>lafe.lMap.has(l2l.ilot)&&lafe.lMap.has(l2l.olot)) lafe.l2d = lafe.data.lot2demand .filter(l2d=>lafe.lMap.has(l2d.ilot)&&lafe.dMap.has(l2d.odemand)) //building relationships between objects and adding required properties lafe.demands.forEach(d=>{ d.il2dMap = d3.map() //input l2d links d.size = 0 }) lafe.stages.forEach(s=>{ s.bdepth=0; //backward depth of the stage s.lMap = d3.map() //lots of the stage s.pMap = d3.map() //products of the stage s.pCount = //total number of products of the stage s.lCount = //total number of lots of the stage s.lSizeMax = 0.0 //maximum size of all lots of the stage s.x = 0.0 //relative x coordinate of the stage s.y = 0.0 //relative y coordinate of the stage s.dx = 0.0 //relative width of the stage s.dy = 0.0 //relative height of the stage }); lafe.products.forEach(p=>{ p.stage = lafe.sMap.get(p.stage) //stage the product belongs to p.lMap = d3.map() //lots of the product p.lCount = //total number of lots of the product p.lSizeMax = 0.0 //maximum size of all lots of the product p.x = 0.0 //relative x coordinate of the product p.y = 0.0 //relative y coordinate of the product p.dx = 0.0 //relative width of the product p.dy = 0.0 //relative height of the product p.visible = true //visible state of the product }) lafe.lots.forEach(l=>{ l.resource = lafe.rMap.get(l.resource); //resource the lot belongs to l.product = lafe.pMap.get(l.product); //product the lot belongs to l.date = new Date(l.date) //make date object from date string l.il2lMap = d3.map(); //input l2l links l.ol2lMap = d3.map(); //output l2l links l.ol2dMap = d3.map(); //output l2d links l.il2lSizes = d3.map() //total size of input l2l links per input product l.ol2lSize = 0.0 //total size of output l2l links l.ol2dSize = 0.0 //total size of output l2d links l.x = 0.0 //relative x coordinate of the lot l.y = 0.0 //relative y coordinate of the lot l.dx = 0.0 //relative width of the lot l.dy = 0.0 //relative height of the lot l.selected = false //selected state of the lot l.visible = true //visible state of the lot //filling parent properties l.product.lMap.set(l.code,l) l.product.stage.lMap.set(l.code,l) l.product.stage.pMap.set(l.product.code,l.product) if(l.size>l.product.lSizeMax) l.product.lSizeMax = l.size if(l.size>l.product.stage.lSizeMax) l.product.stage.lSizeMax = l.size }) lafe.l2l.forEach(l2l=>{ l2l.ilot = lafe.lMap.get(l2l.ilot); //input (origin) lot of the lot 2 lot link l2l.olot = lafe.lMap.get(l2l.olot); //output (destination) lot of the lot 2 lot link l2l.ix = 0.0 //relative x coordinate of the input of the lot 2 lot link (upper-left corner of the band) l2l.iy = 0.0 //relative y coordinate of the input of the lot 2 lot link (upper-left corner of the band) l2l.idy = 0.0 //relative height of the input of the lot 2 lot link (left part of the band) l2l.ox = 0.0 //relative x coordinate of the output of the lot 2 lot link (upper-right corner of the band) l2l.oy = 0.0 //relative y coordinate of the output of the lot 2 lot link (upper-right corner of the band) l2l.ody = 0.0 //relative height of the output of the lot 2 lot link (right part of the band) //filling parent properties l2l.ilot.ol2lMap.set(l2l.olot.code,l2l) l2l.olot.il2lMap.set(l2l.ilot.code,l2l) l2l.ilot.ol2lSize += l2l.size addValue(l2l.olot.il2lSizes,l2l.ilot.product.code,l2l.size) }) lafe.l2d.forEach(l2d=>{ l2d.ilot = lafe.lMap.get(l2d.ilot); //input (orgin) lot of the lot 2 demand link l2d.odemand = lafe.dMap.get(l2d.odemand); //output (destinaion) demand of the lot 2 demand link l2d.ix = 0.0 //relative x coordinate of the input of the lot 2 demand link (upper-left corner of the band) l2d.iy = 0.0 //relative y coordinate of the input of the lot 2 demand link (upper-left corner of the band) l2d.idy = 0.0 //relative height of the input of the lot 2 demand (left part of the band) l2d.ox = 0.0 //relative x coordinate of the output of the lot 2 demand (upper-right corner of the band) l2d.oy = 0.0 //relative y coordinate of the output of the lot 2 demand (upper-right corner of the band) l2d.ody = 0.0 //relative height of the output of the lot 2 lot link (right part of the band) //filling parent properties l2d.odemand.size += l2d.size l2d.ilot.ol2dMap.set(l2d.odemand.code,l2d) l2d.odemand.il2dMap.set(l2d.ilot.code,l2d) l2d.ilot.ol2dSize += l2d.size }) //Recursively computing backward depth of stages, //starting from demands and propagating backward //considering also possible lots with no output links lafe.demands.forEach(d=>bPropagate(d.il2dMap,0)) lafe.lots.filter(l=>(l.ol2lMap.size()+l.ol2dMap.size())==0).forEach(l=>bPropagate(l.il2lMap,1)) //Defining groups according to backward depths //groups are used to group stages in such a way to //minimize overlaping of links //all lots inside a group will be positioned separately along the y axis lafe.gCount = d3.set(lafe.stages.map(s=>s.bdepth)).size() lafe.groups = [...Array(lafe.gCount).keys()].map(i=>{ let group = { "code":"group-"+(i+1), "index":i, "bdepth":lafe.gCount-1-i, "first":(i==0), "last":(i==lafe.gCount-1), "sCount":0, //number of stages in the group "pCount":0, //number of products in the group "lCount":0, //number of lots in the group "tCount":0, //number of targets in the group } return group }) lafe.gMap =getMap(lafe.groups) //Assigning stages to groups and splitting demands into targets. //One target is created for each couple group x demand for which l2d links exist lafe.groups.forEach(g=>{ g.sMap = d3.map(lafe.stages.filter(s=>s.bdepth==g.bdepth),s=>s.code) g.sCount = g.sMap.size() g.tMap = d3.map() //targets of the group g.sMap.each(s=>{ s.group = g s.lMap.each(l=>{ l.ol2dMap.each(l2d=>{ //l2d is a lot to demand link with a lot part of the group //a target is created for that demand within the group if not existing yet let target = g.tMap.get(l2d.odemand.code) if (target===undefined){ //create a new target (a target is a group-demand couple) target = { "code":g.code+"|"+l2d.odemand.code, "sortkey":l2d.odemand.sortkey, "group":g, "demand":l2d.odemand, "l2dMap":d3.map(), //map of all l2d links with this target as destination "size":0, //total demand size of the target "sizes":d3.map(), //demand size per product of the the target "selected":false, //selected state of the target "visible":true, //visible state of the target "x":0.0, //relative x coordinate of the target "y":0.0, //relative y coordinate of the target "dx":0.0, //relative width of the target "dy":0.0 //relative height of the target } g.tMap.set(l2d.odemand.code,target) } l2d.target = target target.l2dMap.set(l2d.ilot.code,l2d) target.size += l2d.size addValue(target.sizes,l2d.ilot.product.code,l2d.size) }) }) }) }) lafe.targets = lafe.groups.map(g=>sortedValues(g.tMap)).flat() //all targets of the graph lafe.oCount = lafe.oMap.size() //total number of options lafe.sCount = lafe.sMap.size() //total number of stages lafe.pCount = lafe.pMap.size() //total number of products lafe.lCount = lafe.lMap.size() //total number of lots //elementary y padding space is the smallest y relative space used for vertical blank spacing between nodes //it corresponds to two pixels if possible, depending on the preferred height of the chart //and the maxium number of nodes (bars) to align vertically lafe.lPad = 1 //number of elementary y paddings used for lots lafe.pPad = 2 //number of elementary y paddings used for products lafe.sPad = 2 //number of elementary y paddings used for stages lafe.tPad = 2 //number of elementary y paddings used for targets return lafe }32:T1903,function computeSizes() { //Reseting max sizes lafe.groups.forEach(g=>{ g.tSizeMax = 0.0 //maximum size of all visible targets of the group g.tSizeTot = 0.0 //total size of all visible targets of the group }) lafe.stages.forEach(s=>{ s.lSizeMax = 0.0 //maximum size of all visible lots of the stage }) lafe.products.forEach(p=>{ p.lSizeMax = 0.0 //maximum size of all visible lots of the product }) //maximum value over all groups of the total number of elementary y paddings when grouping per stage lafe.sPadMax = 0 //maximum value over all groups of the total number of elementary y paddings when grouping per product lafe.pPadMax = 0 //Computing maximum and total sizes and based on visibility lafe.targets.filter(t=>t.visible).forEach(t=>{ if(t.size>t.group.tSizeMax) t.group.tSizeMax = t.size t.group.tSizeTot += t.size }) lafe.lots.filter(l=>l.visible).forEach(l=>{ if(l.size>l.product.lSizeMax) l.product.lSizeMax = l.size if(l.size>l.product.stage.lSizeMax) l.product.stage.lSizeMax = l.size }) //counting visible lots, products, stages at the various levels, //counting amount of elementary y padding spaces //computing normalized sizes (normalization can be done over product or stage dimension), lafe.groups.forEach(g=>{ g.sCount = 0 //number of visible stages of the group g.pCount = 0 //number of visible products of the group g.lCount = 0 //number of visible lots of the group g.tCount = 0 //number of visible targets of the group g.nsSize = 0 //Total normalized size of lots of the group when normalization is per stage g.npSize = 0 //Total normalized size of lots of the group when normalization is per product g.nsSizeL = 0 //Total normalized size of lots allocated to subsequent lots, normalization per stage g.npSizeL = 0 //Total normalized size of lots allocated to subsequent lots, normalization per product g.nsSizeD = 0 //Total normalized size of lots allocated to demands, normalization per stage g.npSizeD = 0 //Total normalized size of lots allocated to demands, normalization per product g.sPad = 0 //Total number of elementary y paddings of the group when lots are grouped per stage g.pPad = 0 //Total number of elementary y paddings of the group when lots are grouped per product g.sMap.each(s=>{ s.pCount = 0 s.nsSize = 0 s.npSize = 0 s.nsSizeL = 0 s.npSizeL = 0 s.nsSizeD = 0 s.npSizeD = 0 s.pMap.values().filter(p=>p.visible).forEach(p=>{ s.pCount += 1 p.first = g.first p.last = g.last p.lCount = 0 p.nsSize = 0 p.npSize = 0 p.nsSizeL = 0 p.npSizeL = 0 p.nsSizeD = 0 p.npSizeD = 0 p.lMap.values().filter(l=>l.visible).forEach(l=>{ p.lCount += 1 l.nsSize = s.lSizeMax>0?(l.size/s.lSizeMax):0.0 //normalizing lot sizes wrt to stage l.npSize = p.lSizeMax>0?(l.size/p.lSizeMax):0.0 //normalizing lot sizes wrt to product l.nsSizeL = s.lSizeMax>0?(l.ol2lSize/s.lSizeMax):0.0 //normalizing alloc. to lots wrt to stage l.npSizeL = p.lSizeMax>0?(l.ol2lSize/p.lSizeMax):0.0 //normalizing alloc. to lots wrt to product l.nsSizeD = s.lSizeMax>0?(l.ol2dSize/s.lSizeMax):0.0 //normalizing alloc. to demands wrt to stage l.npSizeD = p.lSizeMax>0?(l.ol2dSize/p.lSizeMax):0.0 //normalizing alloc. to demands wrt to product p.nsSize += l.nsSize p.npSize += l.npSize p.nsSizeL += l.nsSizeL p.npSizeL += l.npSizeL p.nsSizeD += l.nsSizeD p.npSizeD += l.npSizeD g.sPad += 2*lafe.lPad //counting upper and lower paddings around the lot (grouping per stage) g.pPad += 2*lafe.lPad //counting upper and lower paddings around the lot (grouping per product) },p) s.lCount += p.lCount s.nsSize += p.nsSize s.npSize += p.npSize s.nsSizeL += p.nsSizeL s.npSizeL += p.npSizeL s.nsSizeD += p.nsSizeD s.npSizeD += p.npSizeD g.pPad += 2*lafe.pPad //counting upper and lower paddings around the product (grouping per product) //no paddings around product to account for when grouping per stage },s) g.lCount += s.lCount g.pCount += s.pCount g.sCount += 1 g.nsSize += s.nsSize g.npSize += s.npSize g.nsSizeL += s.nsSizeL g.npSizeL += s.npSizeL g.nsSizeD += s.nsSizeD g.npSizeD += s.npSizeD g.sPad += 2*lafe.sPad //counting upper and lower paddings around the stage (grouping per stage) g.pPad += 2*lafe.sPad //counting upper and lower paddings around the stage (grouping per product) },g) g.tMap.values().filter(t=>t.visible).forEach(t=>{ t.last = g.last t.nSize = g.tSizeMax>0?(t.size/g.tSizeMax):0.0 g.tCount += 1 }) if (lafe.sPadMax{ let col = (i%lafe.oCols) //Column index of the option let row = Math.floor(i/lafe.oCols) //Row index of the option o.last = col==(lafe.oCols-1) //Option is place in the last column o.x = col*(1.0/(lafe.oCols-1)) + (o.last?-lafe.pPadX:lafe.pPadX) o.y = row*dyy o.dx = 8*lafe.px // using 8x8 pixels to draw checkbox o.dy = 8*lafe.py }) //Computing x-y positions of nodes (lots and targets) and links let x = 0.0 sortedValues(lafe.gMap).forEach(g=>{ //computing y space used by unitary normalized lot size for each group, //depending on the type of grouping (per product or stage) and //the type of normalization (per product or stage) //y space used for the demand part is computed based on the ratio //of the normalized size allocated to demands //y space used for the intermediate demand part is computed based //on the ratio of the normalized size allocated to demands g.dDY = lafe.botDY * (pNrm? (((g.npSizeL+g.npSizeD)>0)?(g.npSizeD/(g.npSizeL+g.npSizeD)):0.0): //normalization per product (((g.nsSizeL+g.nsSizeD)>0)?(g.nsSizeD/(g.nsSizeL+g.nsSizeD)):0.0) //normalization per stage ) //Make sure that the part used for intermediate demands should at least occupy 2% of y space if (g.tSizeTot>0){ g.dDY = Math.max( g.dDY, (0.02 + 2*(lafe.sPadY + (pGrp?lafe.pPadY:0)) + 2*g.tCount*lafe.tPadY) ) } //If intermediate demands are not displayed or if the group is the last one, reset related y space to 0 if (!dShw&&!g.last) g.dDY = 0 //y space used for empty space above lot part is computed based //on the y space used for the demand part of the previous group g.eDY = g.first?0.0:lafe.groups[g.index-1].dDY //y space used for the lot part g.lDY = lafe.botDY - g.eDY //y space used for a lot node of unitary size g.nDY = (g.lDY-(pGrp?g.pPad:g.sPad)*lafe.padY)/(pNrm?g.npSize:g.nsSize) g.x = x g.y = lafe.topDY //Computing x-y positions of all lots, products, stages within the group let y = g.y + g.eDY //All stages within the group are positioned in the first 20% x space //g.sDX is the x space between each stage of the group g.sDX = g.sCount>1?((0.2*lafe.gDX)/(g.sCount-1)):0.0 let xx = x sortedValues(g.sMap).forEach(s=>{ s.x = xx s.dx = lafe.pDX y += lafe.sPadY //Adding top padding space for the stage s.y = y if(pGrp){ //grouping per product sortedValues(s.pMap).forEach(p=>{ p.x = s.x p.dx = lafe.pDX y += (p.visible?lafe.pPadY:0) //Adding top padding space for product if visible p.y = y //Sorting lots of the product according to date p.lMap.values().sort((l1,l2)=>l1.date.getTime()-l2.date.getTime()).forEach(l=>{ y += (l.visible?lafe.lPadY:0) //Adding top padding space for lot if visible l.x = p.x + lafe.pPadX //Adding left padding space between product (bracket) and lot l.dx = lafe.nDX l.y = y //relative height of the lot is its normalized size (depending on the normalization mode) //If not visible, height is set to zero to cause shrinking effect when toggling zoom l.dy = (l.visible?(g.nDY*(pNrm?l.npSize:l.nsSize)):0) y += l.dy //move current y position by the lot height y += (l.visible?lafe.lPadY:0) //add bottom padding space for lot if visible },p) p.dy = y - p.y //total height of the product y += (p.visible?lafe.pPadY:0) //adding bottom padding space for product if visible },s) } else { //grouping per stage //Sorting lots of the stage according to date s.lMap.values().sort((l1,l2)=>l1.date.getTime()-l2.date.getTime()).forEach(l=>{ y += (l.visible?lafe.lPadY:0) //adding top padding for the lot if visible l.x = s.x + lafe.pPadX //Adding left padding space between product (bracket) and lot l.dx = lafe.nDX l.y = y //relative height of the lot is its normalized size (depending on the normalization mode) //If not visible, height is set to zero to cause shrinking effect when toggling zoom l.dy = (l.visible?(g.nDY*(pNrm?l.npSize:l.nsSize)):0) y += l.dy //move current y position by the lot height y += (l.visible?lafe.lPadY:0) //add bottom padding space for lot if visible },s) } s.dy = y - s.y //total height of the stage y += lafe.sPadY //Adding bottom padding space for the stage xx += g.sDX //Moving xx coordinate by the space between stages within the group },g) x += lafe.gDX //Moving x coordinate by the space between groups //at this level y should be equal to 1 //console.log("y = " + y) //Computing y weight of all targets //y weight of a target is the gravity center in the vertical direction //of the y position of the inputs of all links allocated to the target. //When auto-arranging demands is used, demands are ordered according to //this weight in order to minimize crossing of lot to demand flows g.tMap.each(t =>{ t.yweight = 0.0 t.l2dMap.each(l2d=>{ t.yweight += l2d.size*l2d.ilot.y },t) t.yweight = t.yweight/t.size }) //Computing x-y positions of all targets y = g.y + lafe.sPadY + (pGrp?lafe.pPadY:0) //Adding top padding of stage and product if visible //y space used for a target node of unitary size dyy = (g.tSizeTot>0&&g.dDY>0)? (g.dDY - 2*(lafe.sPadY + (pGrp?lafe.pPadY:0)) - 2*g.tCount*lafe.tPadY)/g.tSizeTot :0.0 //Sorting targets of the group according to demand original order or //according to the weight (if auto-arrange is active) g.tMap.values().sort( (t1,t2)=>dArg?(t1.yweight-t2.yweight):(t1.demand.sortkey-t2.demand.sortkey) ).forEach(t => { let show = t.visible&&(dShw||t.last) y += (show?lafe.tPadY:0) //Adding top padding for target if visible t.x = x + lafe.pPadX t.y = y t.dx = lafe.nDX //Using same relative width for targets and lots //relative height of the target is its size multiplied by space of unitary size //If not visible, height is set to zero to cause shrinking effect when toggling zoom t.dy = (show?(dyy*t.size):0) y += t.dy //move current y position by the target height y += (show?lafe.tPadY:0) //add bottom padding space for the target if visible }) }) //Computing x-y positions of all links //(ix,iy) are the coordinates of the upper-left corner of the band (input of the band) //(ox,oy) are the coordinates of the upper-right corner of the band (output of the band) //idy is the height of the input of the band //ody is the height of the output of the band lafe.gMap.each(g=>{ g.sMap.each(s=>{ s.pMap.each(p=>{ p.lMap.each(l=>{ let y = l.y //sorting output lot to demand links wrt link output target y position l.ol2dMap.values().sort((ol2d1,ol2d2)=>ol2d1.target.y-ol2d2.target.y).forEach(ol2d=>{ ol2d.ix = l.x + l.dx ol2d.iy = y //relative height of the link input is the fraction of the input lot height //corresponding to the ratio of allocation of the lot to the demand ol2d.idy = ((l.size>0)?ol2d.size/l.size:0.0)*l.dy y += ol2d.idy //moving y position by the link input height },l) //sorting output lot to lot links wrt y positions of link output lot l.ol2lMap.values().sort((ol2l1,ol2l2)=>(ol2l1.olot.y-ol2l2.olot.y)).forEach(ol2l=>{ ol2l.ix = l.x + l.dx ol2l.iy = y //relative height of the link input is the fraction of the input lot height //corresponding to the ratio of allocation of the input lot to the output lot ol2l.idy = ((l.size>0)?ol2l.size/l.size:0.0)*l.dy y += ol2l.idy //moving y position by the link input height },l) //for each input product, sorting related input lot to lot links //wrt to y positions of the link input lot //y coordinate is reset to the top of the lot at each product to cause overlapping of links //when multiple products are used as input of the lot l.il2lSizes.keys().forEach(code=>{ y = l.y //for one product, input links are stacked //isolating links related to the product and //sorting them according to the y position of the input lot l.il2lMap.values().filter(il2l=>il2l.ilot.product.code==code).sort( (il2l1,il2l2)=>il2l1.ilot.y - il2l2.ilot.y ).forEach(il2l=>{ il2l.ox = l.x il2l.oy = y //relative height of the link output is the fraction of the output lot height //corrresponding to the ratio of contribution of the link to the total contribution //of all links supplying the same product il2l.ody = ((l.il2lSizes.get(code)>0)?il2l.size/l.il2lSizes.get(code):0.0)*l.dy y += il2l.ody //moving y position by the link output height },p) },l) },p) },s) },g) g.tMap.each(t=>{ x = t.x let y = t.y //sorting input lot to demand links wrt link input lot y position t.l2dMap.values().sort((l2d1,l2d2)=>l2d1.iy-l2d2.iy).forEach(l2d=>{ l2d.ox = x l2d.oy = y //relative height of the link output is the fraction of the output target height //corresponding to the ratio of allocation of the lot to the demand l2d.ody = (t.size>0?(l2d.size/t.size):0.0)*t.dy y += l2d.ody }) },g) }) }34:T695, function setTitles(){ //Setting titles for lots lafe.lots.forEach(l=>{ l.title = l.code + "\n" + "\n" + "stage: " + l.product.stage.code + "\n" + "product: " + l.product.code + "\n" + "resource: " + l.resource.code + "\n" + "\n" + "date: " + formatDate(l.date) + "\n" + "\n" + "size: " + formatSize(l.size,l.product.unit) + "\n" + " → allocated to demands: " + formatSize(l.ol2dSize) + "\n" + " → allocated to lots: " + formatSize(l.ol2lSize) + "\n" + " → unallocated: " + formatSize(l.size-l.ol2lSize-l.ol2dSize) + "\n" }) //Setting titles for targets lafe.targets.forEach(t=>{ t.title = t.demand.code + "\n" + "\n" + "size: " + "\n" + t.sizes.entries().map(e=>" → "+e.key+": "+formatSize(e.value,lafe.pMap.get(e.key).unit)+"\n").join('') },lafe) //Setting titles for lot to lot links lafe.l2l.forEach(l2l=>{ l2l.title = l2l.ilot.code + " → " + l2l.olot.code + "\n" + "\n" + "size: " + formatSize(l2l.size,l2l.ilot.product.unit) + "\n" + " → consuming " + formatRatio(l2l.ilot.size==0?0.0:l2l.size/l2l.ilot.size) + " of " + l2l.ilot.code + "\n" + " → providing " + formatRatio(l2l.olot.il2lSizes.get(l2l.ilot.product.code)==0?0.0:l2l.size/l2l.olot.il2lSizes.get(l2l.ilot.product.code)) + " of " + l2l.olot.code + " need " + " \n" },lafe) //Setting titles for lot to demand links lafe.l2d.forEach(l2d=>{ l2d.title = l2d.ilot.code + " → " + l2d.odemand.code + "\n" + "\n" + "size: " + "\n" + formatSize(l2d.size,l2d.ilot.product.unit) + " = " + formatRatio(l2d.ilot.size==0?0.0:l2d.size/l2d.ilot.size) + "\n" }) }35:T9ca, function update(){ //Update all positions computePositions() let dShw = lafe.oMap.get("dShw").value //value of option "show intermediate demands" let dArg = lafe.oMap.get("dArg").value //value of option "auto-arrange demands" let pGrp = lafe.oMap.get("pGrp").value //value of option "group by product" let pNrm = lafe.oMap.get("pNrm").value //value of option "normalize by product" var duration = 2000 //duration of the transitions //Animate (un)activation of option checkboxes lafe.oElements.select("path").transition().duration(duration) .attr("fill",o=>o.value?"#aaa":"#fff") //Hide/show stuff lafe.pBrackets.transition().delay(p=>pShow(p)?(duration/2):0).duration(p=>pShow(p)?(duration/2):0) .attr("opacity",p=>pShow(p)?1.0:0.0) lafe.lNodes.transition().delay(l=>lShow(l)?0:duration) .attr("visibility",l=>lShow(l)?"visible":"hidden") lafe.dNodes.transition().delay(t=>tShow(t)?0:duration) .attr("visibility",t=>tShow(t)?"visible":"hidden") lafe.l2lLinks.transition().delay(l2l=>l2lShow(l2l)?0:duration) .attr("visibility",l2l=>l2lShow(l2l)?"visible":"hidden") lafe.l2dLinks.transition().delay(l2d=>l2dShow(l2d)?0:duration) .attr("visibility",l2d=>l2dShow(l2d)?"visible":"hidden") //Update positions lafe.pBrackets.select("path").transition().duration(duration) .attr("d",p=>pBracketD(p,lafe.width,lafe.height)) lafe.pBrackets.select("text").transition().duration(duration) .attr("x",p=>pBracketTextX(p,lafe.width)) .attr("y",p=>pBracketTextY(p,lafe.height)) lafe.l2lLinks.select("path").transition().duration(duration) .attr("d",l2l=>l2lLinkD(l2l,lafe.width,lafe.height)) lafe.l2dLinks.select("path").transition().duration(duration) .attr("d",l2d=>l2dLinkD(l2d,lafe.width,lafe.height)) lafe.lNodes.select("path.top").transition().duration(duration) .attr("d",l=>lNodeTopD(l,lafe.width,lafe.height)) lafe.lNodes.select("path.bottom").transition().duration(duration) .attr("d",l=>lNodeBottomD(l,lafe.width,lafe.height)) lafe.lNodes.select("text").transition().duration(duration) .attr("x",l=>lNodeTextX(l,lafe.width)) .attr("y",l=>lNodeTextY(l,lafe.height)) lafe.dNodes.select("path").transition().duration(duration) .attr("d",t=>dNodeD(t,lafe.width,lafe.height)) lafe.dNodes.select("text").transition().duration(duration) .attr("x",t=>dNodeTextX(t,lafe.width)) .attr("y",t=>dNodeTextY(t,lafe.height)) }36:T519, //Builds the "d" attribute of a path representing a band with vertical left and right bondaries //and curvy top and bottom bondaries //(ix,iy) are the relative coordinate of the upper-left corner of the band (input) //(ox,oy) are the relative coordinate of the upper-right corner of the band (output) //(idy,ody) are the relative heights of the left (input) and right (output) boundaries //width and height are the absolute dimensions of the container of the band function bandD(ix,iy,idy,ox,oy,ody,width,height){ var curvature = 0.5 //absolute coordinates of the band let x0 = Math.round(width*ix) let y0 = Math.round(height*iy) let x1 = Math.round(width*ox) let y1 = Math.round(height*oy) let x2 = Math.round(width*ox) let y2 = Math.round(height*(oy + ody)) let x3 = Math.round(width*ix) let y3 = Math.round(height*(iy + idy)) let dx = Math.round((x1-x0)*curvature) let d = "" d += "M " + x0 + " " + y0 //Move to (x0,y0) d += " C " + (x0+dx) + " " + y0 + " " + (x1-dx) + " " + y1 + " "+ x1 + " " + y1 //Cubic curve to (x1,y1) d += " L " + x2 + " " + y2 //Line to (x2,y2) d += " C " + (x2-dx) + " " + y2 + " " + (x3+dx) + " " + y3 + " "+ x3 + " " + y3 //Cubic curve to (x3,y3) d += " L " + x0 + " " + y0 //Line to (x0,y0) return d }37:T1089, function fillSVG(svg,scale){ let maxWidth = (lafe.width + lafe.margin.left + lafe.margin.right) let maxHeight = (lafe.height + lafe.margin.top + lafe.margin.bottom) svg.attr("class", "lafe") if (scale) svg.attr("width","100%") .attr("viewBox", "0 0 " + maxWidth + " " + maxHeight) else svg.attr("width",maxWidth) .attr("height",maxHeight) let g = svg .append("g") .attr("transform", "translate(" + lafe.margin.left + "," + lafe.margin.top + ")"); // add the option elements lafe.oElements = g.append("g").selectAll(".oElement") .data(lafe.options) .enter() .append("g") .attr("class", "oElement") // add the option element checkbox shapes lafe.oElements.filter(o=>o.type=="checkbox").append("path") .attr("fill",o=>o.value?"#aaa":"#fff") .attr("d",o=>oCheckboxD(o,lafe.width,lafe.height)) .on("click",function(o){ o.value = !o.value update() }) // add the option element texts lafe.oElements.append("text") .attr("x",o=>oCheckboxX(o,lafe.width)) .attr("y",o=>oCheckboxY(o,lafe.height)) .attr("dy",".7em") .attr("text-anchor",o=>o.last?"end":"start") .text(o=>o.title) // add the product brackets lafe.pBrackets = g.append("g").selectAll(".pBracket") .data(lafe.products) .enter() .append("g") .attr("class", "pBracket") // add the product bracket shapes lafe.pBrackets.append("path") .attr("d",p=>pBracketD(p,lafe.width,lafe.height)) .append("title") .text(p=>p.title); // add the product bracket labels lafe.pBrackets.append("text") .attr("x",p=>pBracketTextX(p,lafe.width)) .attr("y",p=>pBracketTextY(p,lafe.height)) .attr("dy",".7em") .attr("text-anchor",p=>(p.first?"start":"end")) .text(p=>p.code) // add the l2l links lafe.l2lLinks = g.append("g").selectAll(".l2lLink") .data(lafe.l2l) .enter() .append("g") .attr("class", "l2lLink") // add the l2l link shapes lafe.l2lLinks.append("path") .attr("d",l2l=>l2lLinkD(l2l,lafe.width,lafe.height)) .append("title") .text(l2l=>l2l.title); //add the l2d links lafe.l2dLinks = g.append("g").selectAll(".l2dLink") .data(lafe.l2d) .enter() .append("g") .attr("class", "l2dLink") // add the l2d link shapes lafe.l2dLinks.append("path") .attr("d",l2d=>l2dLinkD(l2d,lafe.width,lafe.height)) .append("title") .text(l2d=>l2d.title); // add the lot nodes lafe.lNodes = g.append("g").selectAll(".lNode") .data(lafe.lots) .enter() .append("g") .attr("class", "lNode") .on("click",function(l){ lClickL(l) }) .on("contextmenu",function(l){ d3.event.preventDefault(); lClickR(l) }) // add the lot node top shapes lafe.lNodes.append("path") .attr("d",l=>lNodeTopD(l,lafe.width,lafe.height)) .attr("class", "top") //add the lot node bottom shapes lafe.lNodes.append("path") .attr("d",l=>lNodeBottomD(l,lafe.width,lafe.height)) .attr("class", "bottom") //add the lot node titles lafe.lNodes.append("title") .text(l=>l.title); // add the lot node labels lafe.lNodes.append("text") .attr("x",l=>lNodeTextX(l,lafe.width) ) .attr("y",l=>lNodeTextY(l,lafe.height)) .attr("dy",".35em") .attr("text-anchor","start") .text(l=>l.code) // add the demand (target) nodes lafe.dNodes = g.append("g").selectAll(".dNode") .data(lafe.targets) .enter() .append("g") .attr("class", "dNode") .on("click",function(t){ tClickL(t) }) .on("contextmenu",function(t){ d3.event.preventDefault(); tClickR(t) }) // add the demand (target) node shapes lafe.dNodes.append("path") .attr("d",t=>dNodeD(t,lafe.width,lafe.height)) .append("title") .text(t=>t.title); //add the demand (target) node labels lafe.dNodes.append("text") .attr("x",t=>dNodeTextX(t,lafe.width)) .attr("y",t=>dNodeTextY(t,lafe.height)) .attr("dy",t=>".35em") .attr("text-anchor",t=>t.last?"end":"start") .text(t=>t.demand.code) }38:T435,//Dump lafe structure to console log = function(){ console.log("Graph [" + lafe.gMap.size() + " group(s)]") sortedValues(lafe.gMap).forEach(g=>{ console.log("\tgroup:"+g.code + " [" + g.sMap.size() + " stage(s)]") sortedValues(g.sMap).forEach(s=>{ console.log("\t\tstage:"+s.code + " [" + s.pMap.size() + " product(s)]" + " x=" + formatRatio(s.x)) sortedValues(s.pMap).forEach(p=>{ console.log("\t\t\tproduct:"+p.code + " [" + p.lMap.size() + " lot(s)]") sortedValues(p.lMap).forEach(l=>{ console.log("\t\t\t\tlot:"+l.code + " y=" + formatRatio(l.y)) console.log("\t\t\t\t\tinput lots:") sortedValues(l.il2lMap).forEach(il2l=>{ console.log("\t\t\t\t\t\t" + il2l.ilot.code) }) console.log("\t\t\t\t\toutput lots:") sortedValues(l.ol2lMap).forEach(ol2l=>{ console.log("\t\t\t\t\t\t" + ol2l.olot.code) }) console.log("\t\t\t\t\toutput demands:") sortedValues(l.ol2dMap).forEach(ol2d=>{ console.log("\t\t\t\t\t\t" + ol2d.odemand.code) }) },p) },s) },g) }) }39:Tbfa,html` `3a:[{"id":"ac3811b26fdc06f9ae1627592ffec911721273de9aaec2bd8a616f6b50ca47aa13a21fbcc260cd2bbbc7b330f837b7b1d696f35826ed122207859ed06ca95549","href":"https://static.observableusercontent.com/files/ac3811b26fdc06f9ae1627592ffec911721273de9aaec2bd8a616f6b50ca47aa13a21fbcc260cd2bbbc7b330f837b7b1d696f35826ed122207859ed06ca95549","name":"d3-lafe-example@14.json","type":"application/json","lastModified":1698877173210.316,"size":6308}] 2d:{"title":"Lot Allocation Flow Explorer","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof chart = {\n return getSVG().node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`---\n## Input data\nInput data is provided as JSON file containing layout information, required objects (demands, resources, stages, products and lots) and allocations (lot to lot and lot to demand allocations)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"json = FileAttachment(\"d3-lafe-example@14.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`---\n## Code`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"md`\n### Initialization\n\nThe lafe object is the root object of the Lot Allocation Flow Explorer. Let us first read the input data from the JSON file and initialize all data structures of the lafe object.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"lafe = init(json)","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":514,"value":"md`### Computing normalized sizes and counting paddings spaces\nDepending on the visibility of nodes, let us compute now the normalized sizes and number of vertical paddings. Normalization can be over a product (i.e. wrt the maximum size of all lots of the same product) or over a stage (i.e. wrt the maximum size of all lots of the same stage). \n\nThis function is called when visibility of nodes has changed and the sizing of bars has to be updated accordingly, i.e. after zoom mode is toggled on or off.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"md`### Computing positions\nDepending on the visibility of nodes and selection of options, let us compute now the relative x and y coordinates of nodes and links.\n\nThis function is called when visibility of nodes has changed or when re-arrangement of nodes is required due to a change in graphical options.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"md`### Setting titles\nSetting titles to be used as tooltips for nodes and links.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"md`### Update graph state using transitions\nThis function is called whenever something has changed in the graph. State change is managed through D3 transitions applied on positions and visibility status. \"d\" attribute of the SVG pathes used to represent most of the graph components is updated and a transition is applied toward the new value.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":577,"value":"md`### General helping functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"\tmonths = [\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sept\",\"Oct\",\"Nov\",\"Dec\"];\n\t","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"format0 = d3.format(\",.0f\")\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"format2 = d3.format(\",.2f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"\tfunction formatDate(date){\n\n\t var year = date.getFullYear();\n\t var month = months[date.getMonth()];\n\t var day = date.getDate();\n\n\t return day + '-' + month + '-' + year;\n\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"\tfunction formatSize(size,unit){\n\t\treturn format0(size) + (unit===undefined?\"\":(\" [\" + unit +\"]\"))\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"\tfunction formatRatio(ratio){\n\t\treturn format2(100*ratio) + \"%\"\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":" //Assuming an array of objects containing each a code property\n //Adds sortkey property to each object and return a map of the objects using code as key\n\tfunction getMap(array){\n\t\tarray.forEach((o,i)=>o.sortkey=i)\n\t\treturn d3.map(array,o=>o.code)\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"\t//Assuming a map of objects containing each a sortkey property\n //Returns an array of objects sorted according to the sortkey\n\tfunction sortedValues(map){\n\t\treturn map.values().sort((o1,o2)=>o1.sortkey-o2.sortkey)\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"\t//Assuming a map with numeric values\n //Increments value for key, if key not found create it with 0.0\n\tfunction addValue(map,key,value){\n\t\tmap.set(key,(map.has(key)?map.get(key):0.0)+value)\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"\t//Builds the \"d\" attribute of a path representing a bracket [ \n //(x,y) are the relative coordinate of the upper-left corner of the bracket\n //(dx,dy) are the relative width and height of the bracket\n //width and height are the absolute dimensions of the container of the bracket\n function bracketD(x,y,dx,dy,width,height){\n\n\t\t//absolute coordinates of the bracket [\n\t\tlet x0 = Math.round(width*x)\n\t\tlet y0 = Math.round(height*y)\n\t\tlet x1 = Math.round(width*(x+dx))\n\t\tlet y1 = Math.round(height*y)\n\t\tlet x2 = Math.round(width*(x+dx))\n\t\tlet y2 = Math.round(height*(y+dy))\n\t\tlet x3 = Math.round(width*x)\n\t\tlet y3 = Math.round(height*(y+dy))\n\n\t\tlet d = \"\"\n\t\td += \"M \" + x1 + \" \" + y1 //Move to (x1,y1) \n\t\td += \" L \" + x0 + \" \" + y0 //Line to (x0,y0)\n\t\td += \" L \" + x3 + \" \" + y3 //Line to (x3,y3)\n\t\td += \" L \" + x2 + \" \" + y2 //Line to (x2,y2)\n\t\t\n\t\treturn d\n\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"\t//Builds the \"d\" attribute of a path representing a rectangle \n //(x,y) are the relative coordinate of the upper-left corner of the rectangle\n //(dx,dy) are the relative width and height of the rectangle\n //width and height are the absolute dimensions of the container of the rectangle\n function rectangleD(x,y,dx,dy,width,height){\n\n\t\t//absolute coordinates of the rectangle\n\t\tlet x0 = Math.round(width*x)\n\t\tlet y0 = Math.round(height*y)\n\t\tlet x1 = Math.round(width*(x+dx))\n\t\tlet y1 = Math.round(height*y)\n\t\tlet x2 = Math.round(width*(x+dx))\n\t\tlet y2 = Math.round(height*(y+dy))\n\t\tlet x3 = Math.round(width*x)\n\t\tlet y3 = Math.round(height*(y+dy))\n\n\t\tlet d = \"\"\n\t\td += \"M \" + x0 + \" \" + y0 //Move to (x0,y0)\n\t\td += \" L \" + x1 + \" \" + y1 //Line to (x1,y1) \n\t\td += \" L \" + x2 + \" \" + y2 //Line to (x2,y2)\n\t\td += \" L \" + x3 + \" \" + y3 //Line to (x3,y3)\n\t\td += \" L \" + x0 + \" \" + y0 //Line to (x0,y0)\n\t\t\n\t\treturn d\n\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"md`### LAFE specific helping functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"\t//propagate backward depth\n\tfunction bPropagate(linkMap,depth){\n\t\tlinkMap.each(link =>{\n\t\t\tif (link.ilot.product.stage.bdepth0)?((l.ol2lSize+l.ol2dSize)/l.size):0.0\n\t\t\n\t\tlet x = l.x\n\t\tlet y = l.y\n\t\tlet dx = l.dx\n\t\tlet dy = l.dy*ry\n\t\t\n\t\treturn rectangleD(x,y,dx,dy,width,height)\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"\tfunction lNodeBottomD(l,width,height){\n\t\t\n\t\tlet ry = (l.size>0)?((l.ol2lSize+l.ol2dSize)/l.size):0.0\n\t\t\t\t\n\t\tlet x = l.x\n\t\tlet y = l.y+l.dy*ry\n\t\tlet dx = l.dx\n\t\tlet dy = l.dy*(1-ry)\n\t\t\n\t\treturn rectangleD(x,y,dx,dy,width,height)\n\t\t\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"\tfunction lNodeTextX(l,width){\n\t \treturn Math.round(width*(l.x+1.2*l.dx))\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"\tfunction lNodeTextY(l,height){\n\t\treturn Math.round(height*(l.y+0.5*l.dy))\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"\tfunction dNodeD(t,width,height){\n\t\t\n\t\tlet x = t.x\n\t\tlet y = t.y\n\t\tlet dx = t.dx\n\t\tlet dy = t.dy\n\n\t\treturn rectangleD(x,y,dx,dy,width,height)\n\t\t\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"\tfunction dNodeTextX(t,width){\n\t \treturn Math.round(width*(t.x+(t.last?-0.2:1.2)*t.dx))\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"\tfunction dNodeTextY(t,height){\n\t\treturn Math.round(height*(t.y+0.5*t.dy))\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"\tfunction l2lLinkD(l2l,width,height){\n\t\t\n\t\tlet ix = l2l.ix\n\t\tlet iy = l2l.iy\n\t\tlet idy = l2l.idy\n\t\t\n\t\tlet ox = l2l.ox\n\t\tlet oy = l2l.oy\n\t\tlet ody = l2l.ody\n\n\t\treturn bandD(ix,iy,idy,ox,oy,ody,width,height)\n\t\t\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"\tfunction l2dLinkD(l2d,width,height){\n\t\t\n\t\tlet ix = l2d.ix\n\t\tlet iy = l2d.iy\n\t\tlet idy = l2d.idy\n\t\t\n\t\tlet ox = l2d.ox\n\t\tlet oy = l2d.oy\n\t\tlet ody = l2d.ody\n\n\t\treturn bandD(ix,iy,idy,ox,oy,ody,width,height)\n\t\t\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"\tfunction l2lShowFwd(l2l){\n\n\t\tl2l.olot.visible = true\n\t\tl2l.olot.product.visible = true\n\t\tl2l.olot.ol2lMap.each(ol2l=>{\n\t\t\tl2lShowFwd(ol2l)\n\t\t})\n\t\tl2l.olot.ol2dMap.each(ol2d=>{\n\t\t\tl2dShowFwd(ol2d)\n\t\t})\n\n\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"\tfunction l2lShowBwd(l2l){\n\n\t\tl2l.ilot.visible = true\n\t\tl2l.ilot.product.visible = true\n\t\tl2l.ilot.il2lMap.each(il2l=>{\n\t\t\tl2lShowBwd(il2l)\n\t\t})\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"\tfunction l2dShowFwd(l2d){\n\n\t\tl2d.target.visible = true\n\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"\tfunction l2dShowBwd(l2d){\n\n\t\tl2d.ilot.visible = true\n\t\tl2d.ilot.product.visible = true\n\t\tl2d.ilot.il2lMap.each(il2l=>{\n\t\t\tl2lShowBwd(il2l)\n\t\t})\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"\tfunction l2lRevealFwd(l2l){\n\n\t\tlafe.l2lLinks.filter(x=>x==l2l).classed(\"reveal\",true)\n\t\tlafe.lNodes.filter(l=>l==l2l.olot).classed(\"reveal\",true)\n\n\t\tl2l.olot.ol2lMap.each(ol2l=>{\n\t\t\tl2lRevealFwd(ol2l)\n\t\t})\n\t\tl2l.olot.ol2dMap.each(ol2d=>{\n\t\t\tl2dRevealFwd(ol2d)\n\t\t})\n\n\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"\tfunction l2lRevealBwd(l2l){\n\n\t\tlafe.l2lLinks.filter(x=>x==l2l).classed(\"reveal\",true)\n\t\tlafe.lNodes.filter(l=>l==l2l.ilot).classed(\"reveal\",true)\n\n\t\tl2l.ilot.il2lMap.each(il2l=>{\n\t\t\tl2lRevealBwd(il2l)\n\t\t})\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"\tfunction l2dRevealFwd(l2d){\n\n\t\tlafe.l2dLinks.filter(x=>x==l2d).classed(\"reveal\",true)\n\t\tlafe.dNodes.filter(t=>t==l2d.target).classed(\"reveal\",true)\n\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"\tfunction l2dRevealBwd(l2d){\n\n\t\tlafe.l2dLinks.filter(x=>x==l2d).classed(\"reveal\",true)\n\t\tlafe.lNodes.filter(l=>l==l2d.ilot).classed(\"reveal\",true)\n\n\t\tl2d.ilot.il2lMap.each(il2l=>{\n\t\t\tl2lRevealBwd(il2l)\n\t\t})\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"\tfunction resetVisible(){\n\n\t\tlafe.products.forEach(p=>p.visible=!lafe.zoom)\n\t\tlafe.lots.forEach(l=>l.visible=!lafe.zoom)\n\t\tlafe.targets.forEach(t=>t.visible=!lafe.zoom)\n\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"\tfunction resetSelection(){\n\n\t\t//Clear selected flags\n\t\tlafe.lots.forEach(l=>l.selected=false)\n\t\tlafe.targets.forEach(t=>t.selected=false)\n\n\t\t//Clear reveal and select classes\n\t\tlafe.lNodes.classed(\"select\",false)\n\t\tlafe.lNodes.classed(\"reveal\",false)\n\t\tlafe.dNodes.classed(\"select\",false)\n\t\tlafe.dNodes.classed(\"reveal\",false)\n\t\tlafe.l2lLinks.classed(\"reveal\",false)\n\t\tlafe.l2dLinks.classed(\"reveal\",false)\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"\tfunction lClickL(lot){\n\n\t\tlet selected = lot.selected\n\t\tresetSelection()\n\t\t\n\t\tif(!selected){\n\t\t\tlot.selected = true\n\t\t\tlafe.lNodes.filter(l=>l==lot).classed(\"select\",true)\n\t\t\tlot.il2lMap.each(il2l=>{\n\t\t\t\tl2lRevealBwd(il2l)\n\t\t\t})\n\t\t\tlot.ol2lMap.each(ol2l=>{\n\t\t\t\tl2lRevealFwd(ol2l)\n\t\t\t})\n\t\t\tlot.ol2dMap.each(ol2d=>{\n\t\t\t\tl2dRevealFwd(ol2d)\n\t\t\t})\n\t\t}\n\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"\tfunction lClickR(lot){\n\n\t\tlafe.zoom = !lafe.zoom\n\t\tresetSelection()\n\t\tresetVisible()\n\n\t\tif(lafe.zoom){\n\n\t\t\tlot.visible = true\n\t\t\tlot.product.visible = true\n\t\t\tlot.il2lMap.each(il2l=>{\n\t\t\t\tl2lShowBwd(il2l)\n\t\t\t})\n\t\t\tlot.ol2lMap.each(ol2l=>{\n\t\t\t\tl2lShowFwd(ol2l)\n\t\t\t})\n\t\t\tlot.ol2dMap.each(ol2d=>{\n\t\t\t\tl2dShowFwd(ol2d)\n\t\t\t})\n\n\t\t}\n\n\t\tcomputeSizes()\n\t\tupdate()\n\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"\tfunction tClickL(target){\n\n\t\tlet selected = target.selected\n\t\tresetSelection()\n\t\t\n\t\tif(!selected){\n\t\t\ttarget.selected = true\n\t\t\tlafe.dNodes.filter(t=>t==target).classed(\"select\",true)\n\t\t\ttarget.l2dMap.each(il2d=>{\n\t\t\t\tl2dRevealBwd(il2d)\n\t\t\t})\n\t\t}\n\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"\tfunction tClickR(target){\n\n\t\tlafe.zoom = !lafe.zoom\n\t\tresetSelection()\n\t\tresetVisible()\n\n\t\tif(lafe.zoom){\n\n\t\t\ttarget.visible = true\n\t\t\ttarget.l2dMap.each(il2d=>{\n\t\t\t\tl2dShowBwd(il2d)\n\t\t\t})\n\t\t}\n\n\t\tcomputeSizes()\n\t\tupdate()\n\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"\tfunction pShow(p){\n\t\treturn lafe.oMap.get(\"pGrp\").value&&p.visible\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"\tfunction lShow(l){\n\t\treturn l.visible\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"\tfunction tShow(t){\n\t\treturn (lafe.oMap.get(\"dShw\").value||t.last)&&t.visible\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"\tfunction l2lShow(l2l){\n\t\treturn l2l.ilot.visible&&l2l.olot.visible\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"\tfunction l2dShow(l2d){\n\t\treturn (lafe.oMap.get(\"dShw\").value||l2d.target.last)&&l2d.target.visible&&l2d.ilot.visible\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"getSVG = function(){\n\t \n\t\tlet svg = d3.create(\"svg\")\n\n computeSizes()\n \tcomputePositions()\n\t setTitles()\n\t\tfillSVG(svg,true)\n\n return svg\n\t\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`---\n## CSS`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`---\n## Libraries`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"d3 = require(\"d3@4\")\n\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}