graphCellEx1 = { /* Original before I made it too complicated const mermaidNode = html`

${mermaid` ${mermaidString} `}

` // d3.select(graphCell) const cellWidth = mermaidNode.offsetWidth d3.select(mermaidNode).style('width',null).style('overflow','auto').style('max-height','800px') d3.select(mermaidNode).select('svg').attr('width', null).style('border', '1px grey solid') return mermaidNode } // END ORIGINAL... */ const containerPadding = 12 const container = html`

${mermaid` flowchart TB 100001015587["small shareholder(s)"] --34.7%--> 100000001023 100000123261_1["natural person(s)"] --23.8%--> 100000001023 100001000326["B.Grimm Joint
Venture Holding Co
Ltd"] --7.8%--> 100000001023 100001000325["B.Grimm Power
(Singapore) Pte Ltd"] --33.7%--> 100000001023 100000001023["B.Grimm Power PCL"] --100.0%--> P100000405358 P100000405358["Amata (Rayong) power
station"] `}

` /*** Grab elements from chart that we'll want to manipulate with d3, assign some basic styles ***/ const mermaidMiniMapDiv = d3.select(container).select('div#mermaid-mini-map') const mermaidMiniMapHighlight = d3.select(container).select('div#highlight-rect').datum({top: 0, left: 0}).style('top', d=> d.top + 'px').style('left', d=> d.left + 'px') .style('opacity',0).style('position','absolute') .style('background-color','#ffA50022').style('border','1px orange solid') const mermaidDiv = d3.select(container).select('div#mermaid') const mermaidSvg = mermaidDiv.select('svg') // const zoomBtn = d3.select(container).select('button#zoom-btn') // const zoomSlider = d3.select(container).select('input#zoom-slider') /*** Caculate widths and heights of for all elements ***/ const [svgInitialWidth, svgInitialHeight] = mermaidMiniMapDiv.select('svg').attr('viewBox').split(' ').slice(2,4).map(d=> +d) const svgAspectRatio = svgInitialWidth/svgInitialHeight // asign mini-map height first, and let width be based on that -- just need to constrain it so mini-map width it's wider than available width of device (minus padding) const miniMapHeight = d3.min([150, (width-(containerPadding*2)) /svgAspectRatio]) const miniMapWidth = miniMapHeight * svgAspectRatio let viewerHeight = d3.min([500, svgInitialHeight]) // let viewerWidth // if whole think would fit in reasonable view, then get rid of the mini-map if(width >= svgInitialWidth && viewerHeight >= svgInitialHeight){ mermaidMiniMapDiv.remove() // I was using .style('display','none'), but the defs of the mini-map were still being used by the arrow heads and since it was display none it was removing the arrow heads on the main chart too. viewerHeight = 800 } // console.log('width', width, d3.select(container).node().offsetWidth) let miniMapScale = miniMapHeight/svgInitialHeight // we need to come back once things have rendered to set the scale based on actual width available to the chart (which is less than observables "width". So setting up function now to update highlight rect size let viewPortionWidth, viewPortionHeight function updateHighlightWidthDimensions(viewerWidth) { // how much of the charts width and charts height is visible in the main view area. viewPortionWidth = viewerWidth / svgInitialWidth viewPortionHeight = viewerHeight / svgInitialHeight mermaidMiniMapHighlight // .style('width', miniMapWidth * viewPortionWidth + 'px') .style('width', (viewerWidth * miniMapScale) + 'px') .style('height', (viewerHeight * miniMapScale) + 'px') } // assign all the calculated widths and heights to relevants divs and svgs mermaidMiniMapDiv.style('width',miniMapWidth+'px').style('height',miniMapWidth / svgAspectRatio + 'px').style('margin-bottom', '12px') mermaidMiniMapDiv.select('svg').attr('height', null).style('border', '1px grey solid') mermaidDiv.style('width',null).style('overflow','auto').style('max-height',viewerHeight + 'px') // when someone scrolls around the main viewer div, move the highlight on the mini map accordingly mermaidDiv.on("scroll", function(e) { mermaidMiniMapHighlight .style('top', d=> (d.top = miniMapScale * this.scrollTop) + 'px') .style('left', d=> (d.left = miniMapScale * this.scrollLeft) + 'px') .transition().style('opacity',1) //console.log(this.scrollTop, this.scrollLeft) }) mermaidSvg .attr('width', d3.select(container).select('svg').style('max-width')) .style('border', '1px grey solid') /*** find the asset at the bottom of the ownership tree so we can scroll to it. ***/ let nodeCoords = [] mermaidSvg.selectAll('g.nodes>g').each(function() {nodeCoords.push(d3.select(this).attr('transform')/* .node().getCTM() /* .node()..getBBox().x /*.attr('transform')*/)}) const finalNodeX = xOfMaxY(nodeCoords.map(d=> coordsFromTranslate(d))) // scroll to node -- doesn't work without setTimeout -- maybe because the hieght/width aren't known yet? anyway, calling it recursively so if width still isn't >0 then it will try again function scrollToNode(){ setTimeout(()=> { //console.log('width', width, mermaidDiv.node().offsetWidth) if(mermaidDiv.node().offsetWidth >0 ){ mermaidDiv.node().scroll({top: mermaidDiv.node().scrollHeight, left: finalNodeX - mermaidDiv.node().offsetWidth/2, behavior: 'smooth'}) updateHighlightWidthDimensions(mermaidDiv.node().offsetWidth) } else { //console.log('trying again') scrollToNode() } } , 100) } scrollToNode() /*** this was old code from when a zoom button zoomed and panned to the asset's node in the mermaid tree ***/ /* zoomBtn.on('click', () => { mermaidDiv.transition() .on('end', () => mermaidDiv.node().scroll({ top: mermaidDiv.node().scrollHeight, left: finalNodeX - width/2, behavior: 'smooth'})) mermaidSvg .transition().duration(1000) .attr('width', d3.select(container).select('svg').style('max-width')) .on('end', ()=> { mermaidDiv.node().scroll({top: mermaidDiv.node().scrollHeight, left: finalNodeX - width/2, behavior: 'smooth'}) }) //.on('end', () => mermaidDiv.node().scrollTop = mermaidDiv.node().scrollHeight) // behavior: 'smooth' }) */ /**** set up to scroll the main view area based on dragging the miniMapHighlight area ***/ let maxTop, maxLeft; // to constrain the mini-map box within the view function dragstarted(event, d) { d3.select(this).style("border", '3px black solid'); let scrollPadding = 15 * miniMapScale maxLeft = scrollPadding + miniMapWidth - (viewPortionWidth *miniMapWidth) // mermaidMiniMapDiv.node().offsetWidth() maxTop = scrollPadding + miniMapWidth/svgAspectRatio - (viewPortionHeight*miniMapWidth/svgAspectRatio) //console.log('max top/left', maxLeft, maxTop) } function dragged(event, d) { d3.select(this) .style("top", (d.top = d3.max([0,d3.min([maxTop, d.top + event.dy])])) + 'px') .style("left", (d.left = d3.max([0,d3.min([maxLeft, d.left + event.dx])])) +'px'); const curPos = (d3.select(this).datum()) mermaidDiv.node().scroll({top: curPos.top/miniMapScale, left: curPos.left/miniMapScale}) //console.log('dragged', curPos, viewPortionWidth, mermaidDiv.node().offsetWidth) //console.log('max top/left', maxLeft, maxTop) } function dragended(event, d) { d3.select(this).style("border", '1px orange solid'); } const drag = d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); mermaidMiniMapHighlight .on('mouseover', function() { d3.select(this).style("border", '3px orange solid')}) .on('mouseleave', function() { d3.select(this).style("border", '1px orange solid')}) .call(drag) /**** Handle Mouseover on Edge Labels and Edges - highlight eachother *****/ const edgePaths = mermaidSvg.selectAll('g.edgePaths > path')//.selectAll('path.path') const edgeLabels = mermaidSvg.select('g.edgeLabels').selectAll('g.edgeLabel').select('span.edgeLabel') if (edgePaths.nodes().length > 0 && edgePaths.nodes().length == edgeLabels.nodes().length){ edgeLabels.on('mouseover', function(){ const iCur = edgeLabels.nodes().indexOf(this); edgePaths.style('stroke',(d,i)=> i == iCur ? 'orange' : '#333333') .style('stroke-width',(d,i) => i == iCur ? 2 : 1) edgeLabels .style('background-color',(d,i)=> i == iCur ? 'orange' : '#e8e8e8') .style('font-weight',(d,i)=> i == iCur ? 'bold' : 'normal') }) .on('mouseleave', function(){ edgePaths.style('stroke', '#333333').style('stroke-width', 1) edgeLabels.style('background-color', '#e8e8e8') .style('font-weight','normal') }) .on('click', function(){ const iCur = edgeLabels.nodes().indexOf(this); edgePaths.style('stroke',(d,i)=> i == iCur ? 'orange' : '#333333') .style('stroke-width',(d,i) => i == iCur ? 2 : 1) edgeLabels .style('background-color',(d,i)=> i == iCur ? 'orange' : '#e8e8e8') .style('font-weight',(d,i)=> i == iCur ? 'bold' : 'normal') }) } if( edgePaths.nodes().length > 10){ d3.select(container).append('div').text('* For some larger ownership trees, ownership percentage labels can be mispositioned. Hover or click on any label to see the associated line highlighted.') } return container }