Cancel open the node on click or make it can be controlled by click listener

[sliyoxn]

update the zoom function in flamegraph.js

function zoom (d) {
        if (tooltip) tooltip.hide()
        const updateChart = () => {
            hideSiblings(d)
            show(d)
            fadeAncestors(d)
            update()
        }
        if (scrollOnZoom) {
            const chartOffset = svg._groups[0][0].parentNode.offsetTop
            const maxFrames = (window.innerHeight - chartOffset) / c
            const frameOffset = (d.height - maxFrames + 10) * c
            window.scrollTo({
                top: chartOffset + frameOffset,
                left: 0,
                behavior: 'smooth'
            })
        }
        if (typeof clickHandler === 'function') {
            if (clickHandler.length >= 2) {
                clickHandler(d, updateChart)
            } else {
                const res = clickHandler(d)
                if (res !== false) {
                    updateChart()
                }
            }
        } else {
            updateChart()
        }
    }

can use like this

var chart = flamegraph()
        .width(960)
        .cellHeight(18)
        .onClick(onClick);

function onClick(d, zoom) {

        if (window.event.ctrlKey) {
            history.pushState({id: d.id}, d.data.name, `#${d.id}`);
            zoom();
        } else {
            console.info(`Click on ${d.data.name}, id: "${d.id}"`, d);
        }

    }

[spiermar]

If I'm understanding this correctly, the goal for this is to make zoom optional? If that's the case, can you share more details about your use case. Zoom is a basic function for navigating flame graphs.

[Ilovetaxi]

update the zoom function in flamegraph.js

function zoom (d) {

        if (tooltip) tooltip.hide()

        const updateChart = () => {

            hideSiblings(d)

            show(d)

            fadeAncestors(d)

            update()

        }

        if (scrollOnZoom) {

            const chartOffset = svg._groups[0][0].parentNode.offsetTop

            const maxFrames = (window.innerHeight - chartOffset) / c

            const frameOffset = (d.height - maxFrames + 10) * c

            window.scrollTo({

                top: chartOffset + frameOffset,

                left: 0,

                behavior: 'smooth'

            })

        }

        if (typeof clickHandler === 'function') {

            if (clickHandler.length >= 2) {

                clickHandler(d, updateChart)

            } else {

                const res = clickHandler(d)

                if (res !== false) {

                    updateChart()

                }

            }

        } else {

            updateChart()

        }

    }

can use like this

var chart = flamegraph()

        .width(960)

        .cellHeight(18)

        .onClick(onClick);



function onClick(d, zoom) {



        if (window.event.ctrlKey) {

            history.pushState({id: d.id}, d.data.name, `#${d.id}`);

            zoom();

        } else {

            console.info(`Click on ${d.data.name}, id: "${d.id}"`, d);

        }



    }

[Ilovetaxi]

update the zoom function in flamegraph.js

function zoom (d) {

        if (tooltip) tooltip.hide()

        const updateChart = () => {

            hideSiblings(d)

            show(d)

            fadeAncestors(d)

            update()

        }

        if (scrollOnZoom) {

            const chartOffset = svg._groups[0][0].parentNode.offsetTop

            const maxFrames = (window.innerHeight - chartOffset) / c

            const frameOffset = (d.height - maxFrames + 10) * c

            window.scrollTo({

                top: chartOffset + frameOffset,

                left: 0,

                behavior: 'smooth'

            })

        }

        if (typeof clickHandler === 'function') {

            if (clickHandler.length >= 2) {

                clickHandler(d, updateChart)

            } else {

                const res = clickHandler(d)

                if (res !== false) {

                    updateChart()

                }

            }

        } else {

            updateChart()

        }

    }

can use like this

var chart = flamegraph()

        .width(960)

        .cellHeight(18)

        .onClick(onClick);



function onClick(d, zoom) {



        if (window.event.ctrlKey) {

            history.pushState({id: d.id}, d.data.name, `#${d.id}`);

            zoom();

        } else {

            console.info(`Click on ${d.data.name}, id: "${d.id}"`, d);

        }



    }