Cards of color pickers (#10)

Author: tupui

panel/app.py

@@ -3,13 +3,15 @@
 
 from bokeh.models import PrintfTickFormatter
 from bokeh.models.widgets.tables import NumberFormatter
+import matplotlib as mpl
 import matplotlib.pyplot as plt
 import numpy as np
 import pandas as pd
 import panel as pn
 from panel.layout.gridstack import GridStack
 
 import simdec as sd
+from simdec.visualization import colormap_from_single_color
 
 
 # panel app
@@ -136,8 +138,33 @@ def decomposition(dec_limit, si, inputs, output):
     )
 
 
-def palette(res):
-    return sd.palette(res.states)
+def base_colors(res):
+    all_colors = sd.palette(res.states)
+    colors = all_colors[:: res.states[0]]
+    colors = [mpl.colors.rgb2hex(color, keep_alpha=False) for color in colors]
+    return colors
+
+
+def update_colors_select(event):
+    colors = [color_picker.value for color_picker in color_pickers]
+    colors_select.param.update(
+        options=colors,
+        value=colors,
+    )
+
+
+def create_color_pickers(states, colors):
+    color_picker_list = []
+    for state, color in zip(states[0][::-1], colors):
+        color_picker = pn.widgets.ColorPicker(name=state, value=color)
+        color_picker.param.watch(update_colors_select, "value")
+        color_picker_list.append(color_picker)
+    color_pickers[:] = color_picker_list
+
+
+def palette(res, colors_picked):
+    cmaps = [colormap_from_single_color(color_picked) for color_picked in colors_picked]
+    return sd.palette(res.states, cmaps=cmaps)
 
 
 def n_bins_auto(res):
@@ -255,7 +282,6 @@ def tableau_states(res, states):
     interactive_inputs_decomposition,
     interactive_output,
 )
-interactive_palette = pn.bind(palette, interactive_decomposition)
 
 switch_histogram_boxplot = pn.widgets.RadioButtonGroup(
     name="Switch histogram - boxplot",
@@ -275,6 +301,29 @@ def tableau_states(res, states):
     visible=show_n_bins,
 )
 
+interactive_states = pn.bind(
+    states_from_data, interactive_decomposition, interactive_inputs_decomposition
+)
+
+
+interactive_base_colors = pn.bind(base_colors, interactive_decomposition)
+
+
+color_pickers = pn.Card(title="Main color for states")
+colors_select = pn.widgets.MultiSelect(
+    value=interactive_base_colors,
+    options=interactive_base_colors,
+    name="Colors",
+    visible=False,
+)
+
+dummy_color_pickers_bind = pn.bind(
+    create_color_pickers, interactive_states, colors_select.param.value, watch=True
+)
+
+interactive_palette = pn.bind(
+    palette, interactive_decomposition, colors_select.param.value
+)
 
 interactive_figure = pn.bind(
     figure,
@@ -285,10 +334,6 @@ def tableau_states(res, states):
     selector_output,
 )
 
-
-interactive_states = pn.bind(
-    states_from_data, interactive_decomposition, interactive_inputs_decomposition
-)
 interactive_tableau = pn.bind(
     tableau, interactive_decomposition, interactive_states, interactive_palette
 )
@@ -312,6 +357,8 @@ def tableau_states(res, states):
     pn.pane.Markdown("## Visualization", styles={"color": blue_color}),
     switch_histogram_boxplot,
     selector_n_bins,
+    dummy_color_pickers_bind,
+    color_pickers,
     # pn.Row(logout),
     max_width=350,
     sizing_mode="stretch_width",

src/simdec/visualization.py

@@ -94,9 +94,11 @@ def palette(
     if cmaps is None:
         cmaps = [mpl.colormaps[cmap] for cmap in SEQUENTIAL_PALETTES[:n_cmaps]]
     else:
+        cmaps = cmaps[:n_cmaps]
         if len(cmaps) != n_cmaps:
             raise ValueError(
-                "Must have the same number of cmaps as the number of first states"
+                f"Must have the same number of cmaps ({len(cmaps)}) as the "
+                f"number of first states ({n_cmaps})"
             )
 
     colors = []