gdementen/dynamic_factor_range_test.html

## dynamic_factor_range_test.html
<!DOCTYPE HTML>
<html>
    <head>
    <title>Sandbox</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-1.0.4.css" type="text/css" />
    <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.0.4.js"></script>
    <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-1.0.4.js"></script>
    <script type="text/javascript">
        Bokeh.set_log_level("info");
    </script>
</head>

<body>
    <select id="rowselector">
        <option value="0">row 0</option>
        <option value="1">row 1</option>
        <option value="2">row 2</option>
    </select>

    <div id="plot_target"></div>

    <div>
        <button type="button" class="btn" id="BTN_A">a</button>
        <button type="button" class="btn" id="BTN_B">b</button>
        <button type="button" class="btn btn-secondary" id="BTN_C">c</button>
    </div>

    <script>
        function get_visible_data() {
            var visible_factors = ['A', 'B', 'C'].filter(factor => !$('#BTN_'+factor).hasClass('btn-secondary'));
            var row = $("#rowselector").val();
            var visible_data = visible_factors.map(factor => fulldata[factor][row]);
            return {factors: visible_factors, y: visible_data};
        }

        function update_graph() {
            var source = globals.source;
            var data = get_visible_data();
            source.data = data;
            source.change.emit();
            // this already helps but is not enough to make things work.
            // It seems to only work if the number of visible factors stays the same
            globals.graph.x_range.factors = data.factors;
        }

        function create_graph() {
            var data = get_visible_data();
            var source = new Bokeh.ColumnDataSource({data: data});

            var p = Bokeh.Plotting.figure({x_range: data.factors, y_range: [5, 25]});
            p.square({field: "factors"}, {field: "y"}, {source: source});

            $("#plot_target").empty();
            Bokeh.Plotting.show(p, "#plot_target");

            globals['source'] = source;
            globals['graph'] = p;
        }

        var globals = {source: null, graph: null};
        var fulldata = {
            A: [10, 15, 20],
            B: [15, 15, 15],
            C: [20, 15, 10],
        };

        create_graph();

        $("#rowselector").change(update_graph);
        $(".btn").click(function(e) {
            $(e.target).toggleClass("btn-secondary");
            // this is what I am trying to get working
            update_graph();
            // this works (but is slow for big graphs)
            // create_graph();
        });
    </script>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Sandbox</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

	<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-1.0.4.css" type="text/css" />
	<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.0.4.js"></script>
	<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-1.0.4.js"></script>
	<script type="text/javascript">
	Bokeh.set_log_level("info");
	</script>
	</head>

	<body>
	<select id="rowselector">
	<option value="0">row 0</option>
	<option value="1">row 1</option>
	<option value="2">row 2</option>
	</select>

	<div id="plot_target"></div>

	<div>
	<button type="button" class="btn" id="BTN_A">a</button>
	<button type="button" class="btn" id="BTN_B">b</button>
	<button type="button" class="btn btn-secondary" id="BTN_C">c</button>
	</div>

	<script>
	function get_visible_data() {
	var visible_factors = ['A', 'B', 'C'].filter(factor => !$('#BTN_'+factor).hasClass('btn-secondary'));
	var row = $("#rowselector").val();
	var visible_data = visible_factors.map(factor => fulldata[factor][row]);
	return {factors: visible_factors, y: visible_data};
	}

	function update_graph() {
	var source = globals.source;
	var data = get_visible_data();
	source.data = data;
	source.change.emit();
	// this already helps but is not enough to make things work.
	// It seems to only work if the number of visible factors stays the same
	globals.graph.x_range.factors = data.factors;
	}

	function create_graph() {
	var data = get_visible_data();
	var source = new Bokeh.ColumnDataSource({data: data});

	var p = Bokeh.Plotting.figure({x_range: data.factors, y_range: [5, 25]});
	p.square({field: "factors"}, {field: "y"}, {source: source});

	$("#plot_target").empty();
	Bokeh.Plotting.show(p, "#plot_target");

	globals['source'] = source;
	globals['graph'] = p;
	}

	var globals = {source: null, graph: null};
	var fulldata = {
	A: [10, 15, 20],
	B: [15, 15, 15],
	C: [20, 15, 10],
	};

	create_graph();

	$("#rowselector").change(update_graph);
	$(".btn").click(function(e) {
	$(e.target).toggleClass("btn-secondary");
	// this is what I am trying to get working
	update_graph();
	// this works (but is slow for big graphs)
	// create_graph();
	});
	</script>
	</body>
	</html>