Cytoscape dagre layout issues - decrease compound node separation and left-align nodes in the same rank

Question

I am using Cytoscape.js with dagre layout in order to visualize a tree like hierarchy. I have a couple of questions regarding the layout. You can check actual and expected snapshots and examine a runnable sample here.

1. Nodes in each rank/hierarchy level/ are center aligned. Can they be left-aligned according to the node with the largest width?
2. The separation between adjacent nodes in the same rank is the same for nodes no matter whether they are in compound nodes. Can we specify a smaller separation for nodes in a compound node ? I have a header and footer svg specified in the compound node and can have multiple nodes from the same rank. If I set a smaller separation for all the nodes, then the compound nodes will be overlapped. I want to avoid compound nodes overlapping and at the same time have a smaller separation in the compound node.
3. Can we specify a order for parent nodes in the same rank? For example I want node5 and node7 along with their compound nodes to be on the top ? I am not sure whether this is supported by the dagre layout. As for klay and elk layouts they doesn't seem to have as good layout as dagre.

I am curious whether the above can be achieved with a particular layout or must be handled manually.

You can find a link to a runnable example above.

    window.addEventListener("DOMContentLoaded", function() {
    var cy = window.cy = cytoscape({
      container: document.getElementById('cy'),
    
      boxSelectionEnabled: false,
      autounselectify: true,
    
      layout: {
        name: 'dagre',
        rankDir: 'LR',
        fit: false,
      },
    
      style: [
        {
          selector: 'node',
          style: {
            //'content': 'data(id)',
            'label': function(arg) {
              var labelRighPadding = arg.hasClass(ICON_NODE) ? '\u0020\u0020\u0020\u200b' : '';
              return arg.data().id + labelRighPadding; 
              //return arg.data().id + '\uf022';
            },
            //'text-wrap': 'wrap',
            //'font-family': 'FontAwesome, helvetica neue Cantarell',
            'text-opacity': 0.5,
            'text-valign': 'center',
            'text-halign': 'center',
            'background-color': 'white',
            'border-width': 1,
            'border-color': 'black',
            //'text-margin-x': -10,
            'width': 'label',
            // 'width': function(e) {
            //   return e.boundingBox().w + 20;
            // },
            'height':'label',
            'shape':'round-rectangle',
            'padding': '5px',  
          }
        },
        {
          selector: 'node.' + ICON_NODE,
          css: {
            'background-image': 'url(note.png)',
            'background-width': '16px',
            'background-height': '16px',
            'background-position-x': '100%',
            'background-opacity': 0,
           // 'padding-relative-to': 'min'
          }
        },
        {
          selector: 'node.parent_title',
          css: {
            'border-color': 'red',
        
          }
        },
        {
          selector: ':parent',
          css: {
            // 'text-valign': 'center',
            // 'text-halign': 'center',
            //'min-height': "90px",
            'background-image': ['url(host.svg)', addText(), drawLine(), addText()],
            'background-width': ['16', 'auto', '100%', 'auto'],
            'background-height': ['16', 'auto', '1px', 'auto'],
            'background-position-y': ['10%', '10%', '70%', '90%'],
            'background-position-x': ['10', '26', '0', '10'],
            'label': '',
            'background-color': 'white',
            'border-width': 1,
            'border-color': 'black',
            //'padding': '10px',
            'padding': '40px' //or padding 40 with no height
          }
        },
        {
          selector: 'edge',
          style: {
            "curve-style": "unbundled-bezier",
            'width': 1,
            'target-arrow-shape': 'triangle',
            'target-arrow-color': 'black',
            'line-color': 'black',
          }
        },
        {
          selector: 'edge.danger',
          style: {
            'line-color': 'red',
            'target-arrow-color': 'red',
          }
        }
      ],
    
      elements: {
        nodes: [
        
        ],
        edges: [
        ]
      },
    });
    });