<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pump Selection</title>

<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>

<style>

body{
margin:0;
font-family:Arial;
}

.container{
display:flex;
height:100vh;
}

.sidebar{
width:300px;
border-right:1px solid #ccc;
padding:20px;
}

.sidebar select{
width:100%;
padding:8px;
margin-bottom:10px;
}

.diagram{
flex:1;
padding:20px;
}

</style>
</head>

<body>

<div class="container">

<div class="sidebar" id="dropdownContainer"></div>

<div class="diagram">
<div id="diagram"></div>
</div>

</div>

<script>

mermaid.initialize({
startOnLoad:false,
securityLevel:'loose'
});
const nodes = [

{id:1,parent:null,name:'Pump Selection'},

{id:2,parent:1,name:'Chemical Name'},

{id:3,parent:2,name:'Positive Suction'},
{id:4,parent:2,name:'Negative Suction'},

{id:5,parent:3,name:'Akali'},

{id:6,parent:5,name:'Clear Liquid'},
{id:7,parent:5,name:'With Slurry'},

{id:8,parent:6,name:'Process'},
{id:9,parent:6,name:'ETP'},
{id:10,parent:6,name:'Transfer'},
{id:11,parent:6,name:'Utility Area'},

{id:12,parent:7,name:'Filtration'},

{id:13,parent:12,name:'Highly Flammable'},
{id:14,parent:12,name:'Non Flammable'},

{id:15,parent:13,name:'0 to 2 %'},
{id:16,parent:13,name:'0 to 10 %'},
{id:17,parent:13,name:'0 to 30 %'},

{id:18,parent:14,name:'0 to 2 %'},
{id:19,parent:14,name:'0 to 10 %'},
{id:20,parent:14,name:'0 to 30 %'},
{id:21,parent:14,name:'0 to 50 %'},

{id:22,parent:4,name:'Acidic'}

];

let selectedPath = [];

function getChildren(parentId){
return nodes.filter(n => n.parent === parentId);
}

function init(){

let root = getChildren(null);

createDropdown(root,0);

}

function createDropdown(options,level){

const container = document.getElementById("dropdownContainer");

while(container.children.length > level){
container.removeChild(container.lastChild);
}

const select = document.createElement("select");

const def = document.createElement("option");
def.text="Select...";
def.value="";
select.appendChild(def);

options.forEach(item=>{

let opt=document.createElement("option");
opt.value=item.id;
opt.text=item.name;

select.appendChild(opt);

});

select.onchange=function(){

selectedPath = selectedPath.slice(0,level);

let id=parseInt(this.value);

if(!id) return;

let node = nodes.find(n=>n.id===id);

selectedPath[level]=node;

updateDiagram();

let children=getChildren(id);

if(children.length){
createDropdown(children,level+1);
}

};

container.appendChild(select);

}

function updateDiagram(){

if(selectedPath.length === 0) return;

let text = "flowchart LR\n";

let edges = new Set();

/* selected path */
for(let i=0;i<selectedPath.length-1;i++){

    let from = "node"+selectedPath[i].id;
    let to   = "node"+selectedPath[i+1].id;

    edges.add(`${from}["${selectedPath[i].name}"] --> ${to}["${selectedPath[i+1].name}"]`);
}

/* show children */
selectedPath.forEach(node => {

    let children = nodes.filter(n => n.parent === node.id);

    children.forEach(child => {

        let parentId = "node"+node.id;
        let childId  = "node"+child.id;

        edges.add(`${parentId}["${node.name}"] --> ${childId}["${child.name}"]`);

    });

});

/* build diagram text */
edges.forEach(edge=>{
    text += edge + "\n";
});

/* render */
const diagram = document.getElementById("diagram");

diagram.innerHTML = `<div class="mermaid">${text}</div>`;

mermaid.run({
nodes:diagram.querySelectorAll('.mermaid')
});

}
init();

</script>

</body>
</html>