community-visualizations icon indicating copy to clipboard operation
community-visualizations copied to clipboard

Maintain Filter Zoom State

Open Outcydaz opened this issue 4 years ago • 3 comments

Hoping i can get some help maintaining the zoom states when using the map as a filter. Currently, using Choromap and in filter mode when a selection is clicked the map reverts back to its original state/size. Can the zoomed in state stay at any level without reverting back when using the map as a filter?

Outcydaz avatar Jan 08 '21 06:01 Outcydaz

Hi @Outcydaz - that's a good find! Just thinking out loud here to bounce some ideas, but the data viz subscribes to messages published from events (like using a filter or using the map itself as a filter) to Data Studio in order to run updates via the drawViz function.

The drawViz function removes and rebuilds the data viz and GeoJSON objects which is where I think it's losing and resetting the zoom state.

So if possible, I think maintaining the zoom state would likely require some changes to the source code and drawViz specifically. One thing to explore could be whether it's possible when drawViz is called as a result of using the map as a filter to avoid rebuilding objects and instead make changes (currently just opacity level) to the existing objects.

sesi avatar Jan 24 '21 04:01 sesi

Thanks both. I'll add this to the backlog to explore.

mshodge avatar Feb 16 '21 12:02 mshodge

Thanks @sesi and @mshodge. Here is a work around so far, Im sure it'll need more work, let me know your thoughts. The js line 17581 drawViz constant was changed to:

const drawViz = data => {

var rowData = data.tables.DEFAULT;

if (d3.select('body')
    .selectAll('svg').node() && data.interactions.onClick.value.data) {
        var applyFilterData = data.interactions.onClick.value.data;
        d3.selectAll('.area').style('opacity', 1); 
        //d3.select(applyFilterData.selectedPath).style('opacity',1)
        var g = d3.select('body').selectAll('svg').select('g');
        g.selectAll('path').style("opacity", function(d) {
            if (d) {
                var value = d.properties.dim;
                var opacity = d3.select(this).style("opacity");
                var applyFilterValue = applyFilterData.values[0][0];
                if (applyFilterValue != value) {
                return 0.4;
            }
            return opacity;
        }

    })
return

}

Outcydaz avatar Feb 17 '21 19:02 Outcydaz