Adds zoom and greyscale toggle to result viewer

README.md

@@ -14,11 +14,8 @@ Streamlit application for plotting a confusion matrix.
 
 
 ## TODOs
-- Add option to preview plot in black and white (for printed papers)
 - ggsave only uses DPI for scaling? We would expect output files to have the given DPI?
 - Allow svg, pdf?
-- Add full reset button (empty cache on different files) - callback?
 - Add option to change zero-tile background (e.g. to black for black backgrounds)
 - Add option to format total-count tile in sum tiles
-- Selectable templates (for 2,3,4,5 classes - one selects num classes and pick a color scheme and other common defaults)
 - Allow handling tick text - e.g. for long class names or many classes.

app.py

@@ -11,7 +11,12 @@ import pandas as pd
 from pandas.api.types import is_float_dtype
 from itertools import combinations
 
-from utils import call_subprocess, clean_string_for_non_alphanumerics, clean_str_column
+from utils import (
+    call_subprocess,
+    clean_string_for_non_alphanumerics,
+    clean_str_column,
+    min_max_scale_list,
+)
 from data import read_data, read_data_cached, DownloadHeader, generate_data
 from design import design_section
 from text_sections import (
@@ -414,11 +419,38 @@ if st.session_state["step"] >= 2:
                 encoding="UTF-8",
             )
 
-            DownloadHeader.header_and_image_download(
-                "", filepath=conf_mat_path, label="Download plot"
+            (
+                image_col_size,
+                st.session_state["show_greyscale"],
+            ) = DownloadHeader.slider_and_image_download(
+                filepath=conf_mat_path,
+                download_label="Download plot",
+                slider_label="Zoom",
+                toggle_label="Show greyscale",
+                toggle_value=True,
+                toggle_cols=[10, 1],
+                slider_help="Zoom in/out to better match the size you expect to have in a paper etc. "
+                "This affects the font sizes and will likely lead to adjustments of `height` and `width`.",
+            )
+            st.session_state["image_col_size"] = (
+                min_max_scale_list(
+                    x=[image_col_size],
+                    new_min=2.0,
+                    new_max=8.0,
+                    old_min=0.0,
+                    old_max=1.0,
+                )[0]
+                if image_col_size <= 1
+                else min_max_scale_list(
+                    x=[image_col_size],
+                    new_min=8.0,
+                    new_max=23.0,
+                    old_min=1.0,
+                    old_max=2.0,
+                )[0]
             )
 
-            col1, col2, col3 = st.columns([2, 8, 2])
+            col1, col2, col3 = st.columns([2, st.session_state["image_col_size"], 2])
             with col2:
                 st.write(" ")
                 st.write(" ")
@@ -431,16 +463,17 @@ if st.session_state["step"] >= 2:
                     output_format="auto",
                 )
 
-                # Convert the image to grayscale
-                st.write(" ")
-                image = image.convert("CMYK").convert("L")
-                st.image(
-                    image,
-                    caption="Greyscale version for assessing colors in print",
-                    clamp=False,
-                    channels="RGB",
-                    output_format="auto",
-                )
+                if st.session_state["show_greyscale"]:
+                    # Convert the image to grayscale
+                    st.write(" ")
+                    image = image.convert("CMYK").convert("L")
+                    st.image(
+                        image,
+                        caption="Greyscale version for assessing colors in print",
+                        clamp=False,
+                        channels="RGB",
+                        output_format="auto",
+                    )
                 st.write(" ")
                 st.write("Note: The downloadable file has a transparent background.")
 

components.py

@@ -0,0 +1,25 @@
+import streamlit as st
+from streamlit_toggle import st_toggle_switch
+
+
+def add_toggle_vertical(label, key, default, cols=[2, 5]):
+    st.markdown(f"<p style='font-size:0.85em;'>{label}</p>", unsafe_allow_html=True)
+    col1, _ = st.columns(cols)
+    with col1:
+        return st_toggle_switch(
+            " ",
+            default_value=default,
+            key=key,
+            label_after=True,
+            inactive_color="#eb5a53",
+        )
+
+
+def add_toggle_horizontal(label, key, default):
+    return st_toggle_switch(
+        label=label,
+        default_value=default,
+        key=key,
+        label_after=True,
+        inactive_color="#eb5a53",
+    )

data.py

@@ -4,6 +4,8 @@ import pandas as pd
 import streamlit as st
 from utils import call_subprocess
 
+from components import add_toggle_vertical
+
 
 def read_data(data):
     if data is not None:
@@ -33,23 +35,52 @@ class DownloadHeader:
     """
 
     @staticmethod
-    def header_and_image_download(
-        header, filepath, key=None, label="Download", help="Download plot"
-    ):
-        col1, col2 = st.columns([11, 3])
-        with col1:
-            st.subheader(header)
+    def slider_and_image_download(
+        filepath,
+        slider_label,
+        toggle_label,
+        download_label="Download",
+        slider_min=0.0,
+        slider_max=2.0,
+        slider_value=1.0,
+        slider_step=0.1,
+        slider_help=None,
+        toggle_value=False,
+        toggle_cols=[2, 5],
+        download_help="Download plot",
+        key=None,
+    ) -> int:
+        col1, col2, col3, col4 = st.columns([2, 6, 3, 3])
         with col2:
+            # Image viewing size slider
+            image_col_size = st.slider(
+                slider_label,
+                min_value=slider_min,
+                max_value=slider_max,
+                value=slider_value,
+                step=slider_step,
+                help=slider_help,
+                key=key + "_slider" if key is not None else key,
+            )
+        with col3:
+            toggle_state = add_toggle_vertical(
+                label=toggle_label,
+                key=key + "_toggle" if key is not None else key,
+                default=toggle_value,
+                cols=toggle_cols,
+            )
+        with col4:
             st.write("")
             with open(filepath, "rb") as img:
                 st.download_button(
-                    label=label,
+                    label=download_label,
                     data=img,
                     file_name=pathlib.Path(filepath).name,
                     mime="image/png",
-                    key=key,
-                    help=help,
+                    key=key + "_download" if key is not None else key,
+                    help=download_help,
                 )
+        return image_col_size, toggle_state
 
     @staticmethod
     def _convert_df_to_csv(data, **kwargs):

design.py

@@ -2,38 +2,14 @@ from typing import List, Callable, Any, Tuple
 import json
 import streamlit as st
 from PIL import Image
-from streamlit_toggle import st_toggle_switch
-
 
+from components import add_toggle_horizontal, add_toggle_vertical
 from text_sections import (
     design_text,
 )
 from templates import get_templates
 
 
-def _add_toggle_vertical(label, key, default, cols=[2, 5]):
-    st.markdown(f"<p style='font-size:0.85em;'>{label}</p>", unsafe_allow_html=True)
-    col1, _ = st.columns(cols)
-    with col1:
-        return st_toggle_switch(
-            " ",
-            default_value=default,
-            key=key,
-            label_after=True,
-            inactive_color="#eb5a53",
-        )
-
-
-def _add_toggle_horizontal(label, key, default):
-    return st_toggle_switch(
-        label=label,
-        default_value=default,
-        key=key,
-        label_after=True,
-        inactive_color="#eb5a53",
-    )
-
-
 def _add_select_box(
     key: str,
     label: str,
@@ -91,7 +67,7 @@ def select_settings():
                 options=[-1] + templates_available_num_classes,
             )
         with col2:
-            has_sums = _add_toggle_vertical(
+            has_sums = add_toggle_vertical(
                 label="With sum tiles",
                 key="filter_sum_tiles",
                 default=False,
@@ -199,7 +175,7 @@ def design_section(
                 # Reverse by default
                 selected_classes.reverse()
             with col2:
-                reverse_class_order = _add_toggle_vertical(
+                reverse_class_order = add_toggle_vertical(
                     label="Reverse class order",
                     key="reverse_order",
                     default=False,
@@ -230,7 +206,7 @@ def design_section(
             with col2:
                 st.session_state["selected_design_settings"][
                     "palette_use_custom"
-                ] = _add_toggle_vertical(
+                ] = add_toggle_vertical(
                     label="Use custom gradient", key="custom_gradient", default=False
                 )
             with col3:
@@ -278,7 +254,7 @@ def design_section(
             with col1:
                 st.session_state["selected_design_settings"][
                     "show_counts"
-                ] = _add_toggle_vertical(
+                ] = add_toggle_vertical(
                     label="Show counts",
                     key="show_counts",
                     default=get_uploaded_setting(
@@ -289,7 +265,7 @@ def design_section(
             with col2:
                 st.session_state["selected_design_settings"][
                     "show_normalized"
-                ] = _add_toggle_vertical(
+                ] = add_toggle_vertical(
                     label="Show normalized (%)",
                     key="show_normalized",
                     default=get_uploaded_setting(
@@ -300,7 +276,7 @@ def design_section(
             with col3:
                 st.session_state["selected_design_settings"][
                     "show_sums"
-                ] = _add_toggle_vertical(
+                ] = add_toggle_vertical(
                     label="Show sum tiles",
                     key="show_sum_tiles",
                     default=get_uploaded_setting(
@@ -366,7 +342,7 @@ def design_section(
                 with col1:
                     st.session_state["selected_design_settings"][
                         "rotate_y_text"
-                    ] = _add_toggle_horizontal(
+                    ] = add_toggle_horizontal(
                         label="Rotate y-axis text",
                         key="rotate_y_text",
                         default=get_uploaded_setting(
@@ -376,7 +352,7 @@ def design_section(
 
                     st.session_state["selected_design_settings"][
                         "place_x_axis_above"
-                    ] = _add_toggle_horizontal(
+                    ] = add_toggle_horizontal(
                         label="Place x-axis on top",
                         default=get_uploaded_setting(
                             key="place_x_axis_above", default=True, type_=bool
@@ -385,7 +361,7 @@ def design_section(
                     )
                     st.session_state["selected_design_settings"][
                         "counts_on_top"
-                    ] = _add_toggle_horizontal(
+                    ] = add_toggle_horizontal(
                         label="Counts on top",
                         default=get_uploaded_setting(
                             key="counts_on_top", default=False, type_=bool
@@ -415,7 +391,7 @@ def design_section(
                     st.write("Row and column percentages:")
                     st.session_state["selected_design_settings"][
                         "show_row_percentages"
-                    ] = _add_toggle_horizontal(
+                    ] = add_toggle_horizontal(
                         label="Show row percentages",
                         default=get_uploaded_setting(
                             key="show_row_percentages",
@@ -426,7 +402,7 @@ def design_section(
                     )
                     st.session_state["selected_design_settings"][
                         "show_col_percentages"
-                    ] = _add_toggle_horizontal(
+                    ] = add_toggle_horizontal(
                         label="Show column percentages",
                         default=get_uploaded_setting(
                             key="show_col_percentages",
@@ -437,7 +413,7 @@ def design_section(
                     )
                     st.session_state["selected_design_settings"][
                         "show_arrows"
-                    ] = _add_toggle_horizontal(
+                    ] = add_toggle_horizontal(
                         label="Show arrows",
                         default=get_uploaded_setting(
                             key="show_arrows", default=True, type_=bool
@@ -446,7 +422,7 @@ def design_section(
                     )
                     st.session_state["selected_design_settings"][
                         "diag_percentages_only"
-                    ] = _add_toggle_horizontal(
+                    ] = add_toggle_horizontal(
                         label="Diagonal percentages only",
                         default=get_uploaded_setting(
                             key="diag_percentages_only",
@@ -525,7 +501,7 @@ def design_section(
 
                 st.session_state["selected_design_settings"][
                     "show_tile_border"
-                ] = _add_toggle_horizontal(
+                ] = add_toggle_horizontal(
                     label="Add tile borders",
                     default=get_uploaded_setting(
                         key="show_tile_border", default=False, type_=bool
@@ -628,7 +604,7 @@ def design_section(
                 with col1:
                     st.session_state["selected_design_settings"][
                         "show_zero_shading"
-                    ] = _add_toggle_vertical(
+                    ] = add_toggle_vertical(
                         label="Add shading",
                         default=get_uploaded_setting(
                             key="show_zero_shading", default=True, type_=bool
@@ -638,7 +614,7 @@ def design_section(
                 with col2:
                     st.session_state["selected_design_settings"][
                         "show_zero_text"
-                    ] = _add_toggle_vertical(
+                    ] = add_toggle_vertical(
                         label="Show main text",
                         default=get_uploaded_setting(
                             key="show_zero_text", default=False, type_=bool
@@ -648,7 +624,7 @@ def design_section(
                 with col3:
                     st.session_state["selected_design_settings"][
                         "show_zero_percentages"
-                    ] = _add_toggle_vertical(
+                    ] = add_toggle_vertical(
                         label="Show row/column percentages",
                         default=get_uploaded_setting(
                             key="show_zero_percentages",
@@ -794,12 +770,12 @@ def create_font_settings(
             key=k,
             value=get_setting_fn(key=k, default=d, type_=str),
         ),
-        make_key("bold"): lambda k, d: _add_toggle_horizontal(
+        make_key("bold"): lambda k, d: add_toggle_horizontal(
             label="Bold",
             key=k,
             default=get_setting_fn(key=k, default=d, type_=bool),
         ),
-        make_key("italic"): lambda k, d: _add_toggle_horizontal(
+        make_key("italic"): lambda k, d: add_toggle_horizontal(
             label="Italic",
             key=k,
             default=get_setting_fn(key=k, default=d, type_=bool),

utils.py

@@ -2,6 +2,7 @@ import subprocess
 import re
 import streamlit as st
 import json
+from typing import Optional
 
 
 def show_error(msg, action):
@@ -63,3 +64,29 @@ def clean_string_for_non_alphanumerics(s):
 
 def clean_str_column(x):
     return x.astype(str).apply(lambda x: clean_string_for_non_alphanumerics(x))
+
+
+def min_max_scale_list(
+    x: list,
+    new_min: float,
+    new_max: float,
+    old_min: Optional[float] = None,
+    old_max: Optional[float] = None,
+) -> list:
+    """
+    MinMax scaler for lists.
+    Why: Currently we don't require numpy as dependency.
+    """
+    if old_min is None:
+        old_min = min(x)
+    if old_max is None:
+        old_max = max(x)
+
+    diff = old_max - old_min
+
+    # Avoiding zero-division
+    if diff == 0:
+        diff = 1
+
+    x = [(xi - old_min) / diff for xi in x]
+    return [xi * (new_max - new_min) + new_min for xi in x]