.. DO NOT EDIT.
.. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.
.. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE:
.. "auto_examples/matrix_plot/matrix_of_contribution_plots.py"
.. LINE NUMBERS ARE GIVEN BELOW.

.. only:: html

    .. note::
        :class: sphx-glr-download-link-note

        :ref:`Go to the end <sphx_glr_download_auto_examples_matrix_plot_matrix_of_contribution_plots.py>`
        to download the full example code.

.. rst-class:: sphx-glr-example-title

.. _sphx_glr_auto_examples_matrix_plot_matrix_of_contribution_plots.py:


Matrix of Contribution Correlation Plots
========================================
The first type of (interactive) similarity plot that we will view in matrix form is the contribution correlation plot discussed
in :ref:`sphx_glr_auto_examples_correlation_plot_contribution_correlation_plot.py`. This shows the contribution correlation plot between all
pairs of applications and experiments in a (symmetric) matrix. First we consider the case of a square matrix where the set
of applications and experiments are the same.

.. GENERATED FROM PYTHON SOURCE LINES 11-22

Interactive Matrix Plots
------------------------
Interactive matrix plots wrap several Plotly plots in an html grid that's served by a Dash app that allows users to interact
with each of the individual plots. This is useful for comparing multiple applications and experiments in a single figure.
Specifically, it is useful for viewing all combinations of a given set of SDF files in a single figure. 

**Note** that by default the the correlation plots in the off-diagonal cells are 
:class:`tsunami_ip_utils.viz.scatter_plot.InteractiveScatterLegend` plots, which are fully interactive, and dynamically update
the calculated summary statistics and regression when points are excluded with the legend. However, this interactivity requires
clientiside python to run, and so is not represented in the documentation. The off-diagonal plot types can be changed, and doing so
is documented in :ref:`sphx_glr_auto_examples_matrix_plot_changing_plot_defaults.py`.

.. GENERATED FROM PYTHON SOURCE LINES 22-31

.. code-block:: Python


    from tsunami_ip_utils.viz.viz import matrix_plot
    from tsunami_ip_utils.viz.plot_utils import generate_plot_objects_array_from_contributions
    from tsunami_ip_utils.integral_indices import get_uncertainty_contributions
    from paths import EXAMPLES

    application_files = [ EXAMPLES / 'data' / 'example_sdfs' / 'MCT' / f'MIX-COMP-THERM-001-00{i}.sdf' for i in range(1,4) ]
    experiment_files = application_files








.. GENERATED FROM PYTHON SOURCE LINES 32-35

Now we need to get the uncertainty contributions for each experiment and each application using 
:func:`tsunami_ip_utils.integral_indices.get_uncertainty_contributions` (described in 
:ref:`sphx_glr_auto_examples_uncertainty_contributions.py`).

.. GENERATED FROM PYTHON SOURCE LINES 35-42

.. code-block:: Python


    contributions_nuclide, contributions_nuclide_reaction = get_uncertainty_contributions(
        application_files, 
        experiment_files, 
        variance=True
    )








.. GENERATED FROM PYTHON SOURCE LINES 43-49

Nuclide-Wise Contributions
~~~~~~~~~~~~~~~~~~~~~~~~~~
Now, the :func:`tsunami_ip_utils.viz.viz.matrix_plot` function needs a numpy array of plot objects to generate the matrix plot.
We can generate this array using the :func:`tsunami_ip_utils.viz.plot_utils.generate_plot_objects_array_from_contributions` function.
This function takes a dictionary of contributions and the name of the integral index, and returns a numpy array of plot objects
that can be passed to the :func:`tsunami_ip_utils.viz.viz.matrix_plot` function.

.. GENERATED FROM PYTHON SOURCE LINES 49-52

.. code-block:: Python


    plot_objects_array_nuclide = generate_plot_objects_array_from_contributions(contributions_nuclide, '%(Δk/k)^2')








.. GENERATED FROM PYTHON SOURCE LINES 53-54

Now the matrix plot can easily be generated

.. GENERATED FROM PYTHON SOURCE LINES 54-58

.. code-block:: Python


    fig = matrix_plot(plot_objects_array_nuclide, plot_type='interactive')
    fig.show()




.. raw:: html

    <div class="zoomControls">
        <button type="button" onclick="zoom(1, this)">- Zoom Out</button>
        <button type="button" onclick="zoom(-1, this)">+ Zoom In</button>
    </div>
    <div class="iframe_container">
        <iframe src="../../_static/plot_03ae45ff-a2d0-43dc-a605-0a8cd8e5b124.html" width="100%" height="100%" frameborder="0" class="myiframe"></iframe>
    </div>
    <script>
        function zoom(direction, element) {
            // Find the closest parent container that includes both the buttons and the iframe
            const zoomContainer = element.closest('.zoomControls');
            const iframeContainer = zoomContainer.nextElementSibling;
            const iframe = iframeContainer.querySelector('.myiframe');

            // Initialize or retrieve the current scale
            let currentScale = parseFloat($(iframe).data('scale')) || 0.5;
            let originalWidth = parseFloat($(iframe).data('originalWidth')) || $(iframe).width();
            let originalHeight = parseFloat($(iframe).data('originalHeight')) || $(iframe).height();

            if (direction === 1) {
                currentScale /= 1.1;
            } else {
                currentScale *= 1.1;
            }

            let scaledWidth = originalWidth / currentScale;
            let scaledHeight = originalHeight / currentScale;

            // Store the updated scale
            $(iframe).data('scale', currentScale);

            // Apply the new scale as a CSS transform
            $(iframe).css('transform', `scale(${currentScale})`);
            $(iframe).css('width', `${scaledWidth}px`);
            $(iframe).css('height', `${scaledHeight}px`);
        }

        function applyInitialScale() {
            document.querySelectorAll('.myiframe').forEach(iframe => {
                let initialScale = 0.5;
                let originalWidth = $(iframe).width();
                let originalHeight = $(iframe).height();

                $(iframe).data('scale', initialScale);
                $(iframe).data('originalWidth', originalWidth);
                $(iframe).data('originalHeight', originalHeight);

                let scaledWidth = originalWidth / initialScale;
                let scaledHeight = originalHeight / initialScale;

                iframe.style.width = `${scaledWidth}px`;
                iframe.style.height = `${scaledHeight}px`;
                iframe.style.transform = 'scale(0.5)'; // Apply a neutral scale since size is already adjusted
                iframe.style.transformOrigin = '0 0'; // Transform from top left corner
            });
        }

        window.onload = function() {
            // Apply initial scale to all iframes when the page loads
            applyInitialScale();
        };
    </script>
            




.. GENERATED FROM PYTHON SOURCE LINES 59-62

This plot is fully interactive. You can hold shift and scroll using the mousewheel to scroll horizontally, or just use the
mousewheel alone to scroll vertically. Individual subfigures can also be saved by clicking the camera icon in the top right,
or the entire plot can be saved by calling the ``to_image`` method on the figure object.

.. GENERATED FROM PYTHON SOURCE LINES 62-68

.. code-block:: Python


    fig = matrix_plot(plot_objects_array_nuclide, plot_type='interactive')
    fig.to_image( EXAMPLES / '_static' / 'matrix_plot.png' )

    # sphinx_gallery_thumbnail_path = '../../examples/_static/matrix_plot.png'




.. raw:: html

    <div class="zoomControls">
        <button type="button" onclick="zoom(1, this)">- Zoom Out</button>
        <button type="button" onclick="zoom(-1, this)">+ Zoom In</button>
    </div>
    <div class="iframe_container">
        <iframe src="../../_static/plot_fd02194c-f689-4eba-8f9b-faf65df2596a.html" width="100%" height="100%" frameborder="0" class="myiframe"></iframe>
    </div>
    <script>
        function zoom(direction, element) {
            // Find the closest parent container that includes both the buttons and the iframe
            const zoomContainer = element.closest('.zoomControls');
            const iframeContainer = zoomContainer.nextElementSibling;
            const iframe = iframeContainer.querySelector('.myiframe');

            // Initialize or retrieve the current scale
            let currentScale = parseFloat($(iframe).data('scale')) || 0.5;
            let originalWidth = parseFloat($(iframe).data('originalWidth')) || $(iframe).width();
            let originalHeight = parseFloat($(iframe).data('originalHeight')) || $(iframe).height();

            if (direction === 1) {
                currentScale /= 1.1;
            } else {
                currentScale *= 1.1;
            }

            let scaledWidth = originalWidth / currentScale;
            let scaledHeight = originalHeight / currentScale;

            // Store the updated scale
            $(iframe).data('scale', currentScale);

            // Apply the new scale as a CSS transform
            $(iframe).css('transform', `scale(${currentScale})`);
            $(iframe).css('width', `${scaledWidth}px`);
            $(iframe).css('height', `${scaledHeight}px`);
        }

        function applyInitialScale() {
            document.querySelectorAll('.myiframe').forEach(iframe => {
                let initialScale = 0.5;
                let originalWidth = $(iframe).width();
                let originalHeight = $(iframe).height();

                $(iframe).data('scale', initialScale);
                $(iframe).data('originalWidth', originalWidth);
                $(iframe).data('originalHeight', originalHeight);

                let scaledWidth = originalWidth / initialScale;
                let scaledHeight = originalHeight / initialScale;

                iframe.style.width = `${scaledWidth}px`;
                iframe.style.height = `${scaledHeight}px`;
                iframe.style.transform = 'scale(0.5)'; // Apply a neutral scale since size is already adjusted
                iframe.style.transformOrigin = '0 0'; // Transform from top left corner
            });
        }

        window.onload = function() {
            // Apply initial scale to all iframes when the page loads
            applyInitialScale();
        };
    </script>
            




.. GENERATED FROM PYTHON SOURCE LINES 69-71

Note if the default, nondescriptive labels aren't preferred, an arbitrary dictionary of labels for the applications and
experiments may be passed instead. Perhaps the most useful is the SDF file names.

.. GENERATED FROM PYTHON SOURCE LINES 71-79

.. code-block:: Python


    labels = {
        'applications': [ application_file.name for application_file in application_files ],
        'experiments': [ experiment_file.name for experiment_file in experiment_files ],
    }
    fig = matrix_plot(plot_objects_array_nuclide, plot_type='interactive', labels=labels)
    fig.show()




.. raw:: html

    <div class="zoomControls">
        <button type="button" onclick="zoom(1, this)">- Zoom Out</button>
        <button type="button" onclick="zoom(-1, this)">+ Zoom In</button>
    </div>
    <div class="iframe_container">
        <iframe src="../../_static/plot_8163bf0b-614a-4806-a99d-caa3ec7ecade.html" width="100%" height="100%" frameborder="0" class="myiframe"></iframe>
    </div>
    <script>
        function zoom(direction, element) {
            // Find the closest parent container that includes both the buttons and the iframe
            const zoomContainer = element.closest('.zoomControls');
            const iframeContainer = zoomContainer.nextElementSibling;
            const iframe = iframeContainer.querySelector('.myiframe');

            // Initialize or retrieve the current scale
            let currentScale = parseFloat($(iframe).data('scale')) || 0.5;
            let originalWidth = parseFloat($(iframe).data('originalWidth')) || $(iframe).width();
            let originalHeight = parseFloat($(iframe).data('originalHeight')) || $(iframe).height();

            if (direction === 1) {
                currentScale /= 1.1;
            } else {
                currentScale *= 1.1;
            }

            let scaledWidth = originalWidth / currentScale;
            let scaledHeight = originalHeight / currentScale;

            // Store the updated scale
            $(iframe).data('scale', currentScale);

            // Apply the new scale as a CSS transform
            $(iframe).css('transform', `scale(${currentScale})`);
            $(iframe).css('width', `${scaledWidth}px`);
            $(iframe).css('height', `${scaledHeight}px`);
        }

        function applyInitialScale() {
            document.querySelectorAll('.myiframe').forEach(iframe => {
                let initialScale = 0.5;
                let originalWidth = $(iframe).width();
                let originalHeight = $(iframe).height();

                $(iframe).data('scale', initialScale);
                $(iframe).data('originalWidth', originalWidth);
                $(iframe).data('originalHeight', originalHeight);

                let scaledWidth = originalWidth / initialScale;
                let scaledHeight = originalHeight / initialScale;

                iframe.style.width = `${scaledWidth}px`;
                iframe.style.height = `${scaledHeight}px`;
                iframe.style.transform = 'scale(0.5)'; // Apply a neutral scale since size is already adjusted
                iframe.style.transformOrigin = '0 0'; // Transform from top left corner
            });
        }

        window.onload = function() {
            // Apply initial scale to all iframes when the page loads
            applyInitialScale();
        };
    </script>
            




.. GENERATED FROM PYTHON SOURCE LINES 80-83

Nuclide-Reaction-Wise Contributions
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The same can be done for the nuclide-reaction-wise contributions

.. GENERATED FROM PYTHON SOURCE LINES 83-88

.. code-block:: Python


    plot_objects_array_nuclide_reaction = generate_plot_objects_array_from_contributions(contributions_nuclide_reaction, '%(Δk/k)^2')
    fig = matrix_plot(plot_objects_array_nuclide_reaction, plot_type='interactive', labels=labels)
    fig.show()




.. raw:: html

    <div class="zoomControls">
        <button type="button" onclick="zoom(1, this)">- Zoom Out</button>
        <button type="button" onclick="zoom(-1, this)">+ Zoom In</button>
    </div>
    <div class="iframe_container">
        <iframe src="../../_static/plot_53921f21-5c83-470e-acdf-9f3fb728a5f2.html" width="100%" height="100%" frameborder="0" class="myiframe"></iframe>
    </div>
    <script>
        function zoom(direction, element) {
            // Find the closest parent container that includes both the buttons and the iframe
            const zoomContainer = element.closest('.zoomControls');
            const iframeContainer = zoomContainer.nextElementSibling;
            const iframe = iframeContainer.querySelector('.myiframe');

            // Initialize or retrieve the current scale
            let currentScale = parseFloat($(iframe).data('scale')) || 0.5;
            let originalWidth = parseFloat($(iframe).data('originalWidth')) || $(iframe).width();
            let originalHeight = parseFloat($(iframe).data('originalHeight')) || $(iframe).height();

            if (direction === 1) {
                currentScale /= 1.1;
            } else {
                currentScale *= 1.1;
            }

            let scaledWidth = originalWidth / currentScale;
            let scaledHeight = originalHeight / currentScale;

            // Store the updated scale
            $(iframe).data('scale', currentScale);

            // Apply the new scale as a CSS transform
            $(iframe).css('transform', `scale(${currentScale})`);
            $(iframe).css('width', `${scaledWidth}px`);
            $(iframe).css('height', `${scaledHeight}px`);
        }

        function applyInitialScale() {
            document.querySelectorAll('.myiframe').forEach(iframe => {
                let initialScale = 0.5;
                let originalWidth = $(iframe).width();
                let originalHeight = $(iframe).height();

                $(iframe).data('scale', initialScale);
                $(iframe).data('originalWidth', originalWidth);
                $(iframe).data('originalHeight', originalHeight);

                let scaledWidth = originalWidth / initialScale;
                let scaledHeight = originalHeight / initialScale;

                iframe.style.width = `${scaledWidth}px`;
                iframe.style.height = `${scaledHeight}px`;
                iframe.style.transform = 'scale(0.5)'; // Apply a neutral scale since size is already adjusted
                iframe.style.transformOrigin = '0 0'; // Transform from top left corner
            });
        }

        window.onload = function() {
            // Apply initial scale to all iframes when the page loads
            applyInitialScale();
        };
    </script>
            




.. GENERATED FROM PYTHON SOURCE LINES 89-93

Static Matrix Plots
-------------------
Static matrix plots are used for creating an analogous figure using static matplotlib plots. This implementation would have
no need for the html of the interactive matrix plot, but as it stands, the interactive plot can contain all static plots as
well (and a mixture of static and interactive plots), and so this feature has not yet been implemented.


.. rst-class:: sphx-glr-timing

   **Total running time of the script:** (0 minutes 41.347 seconds)


.. _sphx_glr_download_auto_examples_matrix_plot_matrix_of_contribution_plots.py:

.. only:: html

  .. container:: sphx-glr-footer sphx-glr-footer-example

    .. container:: sphx-glr-download sphx-glr-download-jupyter

      :download:`Download Jupyter notebook: matrix_of_contribution_plots.ipynb <matrix_of_contribution_plots.ipynb>`

    .. container:: sphx-glr-download sphx-glr-download-python

      :download:`Download Python source code: matrix_of_contribution_plots.py <matrix_of_contribution_plots.py>`

    .. container:: sphx-glr-download sphx-glr-download-zip

      :download:`Download zipped: matrix_of_contribution_plots.zip <matrix_of_contribution_plots.zip>`


.. only:: html

 .. rst-class:: sphx-glr-signature

    `Gallery generated by Sphinx-Gallery <https://sphinx-gallery.github.io>`_