Merge branch 'master' into bump_version_2.8.1

Author: guillaume-vignal

docs/_static/shapash-cluster_by_explainability.gif

@@ -9,4 +9,3 @@ sphinxcontrib-qthelp==1.0.3
 sphinxcontrib-serializinghtml==1.1.5
 nbsphinx==0.8.8
 sphinx_material==0.0.35
-numpy<2

docs/requirements.txt

@@ -5,6 +5,7 @@ build-backend = "setuptools.build_meta"
 [project]
 name = "shapash"
 version = "2.8.1"
+
 authors = [
     {name = "Yann Golhen"},
     {name = "Sebastien Bidault"},
@@ -43,7 +44,7 @@ dependencies = [
     "nbformat>5.8.0",
     "numba>=0.60.0",
     "numpy>=2.0.0",
-    "pandas>=2.2.2",
+    "pandas>=2.2.2,<3.0.0",
     "plotly>=5.0.0,<6.0.0",
     "scikit-learn>=1.4.2,<1.6.0",
     "scipy>=1.13.0",

pyproject.toml

@@ -10,7 +10,7 @@
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
-    font-size: 24px;
+    font-size: calc(0.5rem + 0.85vw);
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;

shapash/webapp/assets/material-icons.css

@@ -1,6 +1,14 @@
+h3 {
+    font-size: calc(0.6rem + 1.1vw) !important;
+}
+
+h4 {
+    font-size: calc(0.55rem + 0.95vw) !important;
+}
 :root {
     --main-color: #f4c000;
     --bkg-color: #343736;
+    --bs-body-font-size: calc(0.3rem + 0.5vw);
 }
 
 #shapash_title {
@@ -59,6 +67,10 @@
     border-color: var(--main-color);
 }
 
+.rc-slider-mark {
+    font-size: calc(0.25rem + 0.45vw);
+}
+
 
 /*   CHECKBOX     */
 .custom-control-input:checked~.custom-control-label::before {
@@ -75,6 +87,7 @@
 .Select--multi .Select-value {
     color: var(--bkg-color) !important;
     background-color: var(--main-color) !important;
+    margin-top: 1px !important;
 }
 
 /*   DATATABLE       */
@@ -92,6 +105,9 @@
     margin-left: 0 !important;
 }
 
+.dash-spreadsheet.dash-freeze-top, .dash-spreadsheet.dash-virtualized {
+    max-height: 100% !important;
+}
 
 .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected, td.focused {
     background-color : Transparent !important;
@@ -115,11 +131,11 @@
 /*   EXPAND      */
 
 .dock-expand {
-    width: 40px;
-    height: 40px;
+    width: 2vw;
+    height: 2vw;
     position: absolute;
-    top: -10px;
-    right: -10px;
+    top: -0.5vw;
+    right: -0.5vw;
     background-color: white;
     border-radius: 26px;
     box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
@@ -181,3 +197,55 @@
 {
     margin-bottom: 0;
 }
+
+.Select-placeholder, .Select__placeholder {
+    line-height: 1.4vw !important;
+    font-size: calc(0.3rem + 0.5vw) !important;
+}
+
+.Select-control, .Select__control {
+    height: 1.4vw !important;
+    line-height: 1.4vw !important;
+    font-size: calc(0.3rem + 0.5vw) !important;
+}
+
+.Select-value, .Select__single-value {
+    line-height: 0.9vw !important;
+    font-size: calc(0.3rem + 0.5vw) !important;
+    margin-top: 0.3vw !important;
+}
+
+.Select-input{
+    padding: 0;
+    height: 1.4vw !important;
+    line-height: 1.4vw !important;
+}
+
+.Select-input input {
+    padding: 0;
+    height: 1.4vw !important;
+    line-height: 1.4vw !important;
+}
+
+.Select-clear {
+    font-size: calc(0.4rem + 0.65vw) !important;
+}
+
+.Select-multi-value-wrapper, .Select__value-container {
+    height: 1.4vw !important;
+    min-height: 1.4vw !important;
+    line-height: 1.4vw !important;
+}
+
+input.form-control-s, input.form-control-s.form-control {
+    height: 1.5vw !important;
+    line-height: 1.5vw !important;
+    font-size: 0.7vw !important;
+}
+
+button#id_card, .btn-warning {
+    height: 1.5vw !important;
+    font-size: calc(0.3rem + 0.5vw) !important;
+    align-items: center;
+    padding-top: 0.2vw !important;
+}

shapash/webapp/assets/style.css

@@ -54,42 +54,78 @@ def adjust_graph_static(figure, x_ax="", y_ax=""):
         y_ax: title of the y-axis
         ---------------------------------------
         """
-        new_title = update_title(figure.layout.title.text)
+        main_title, subtitle = split_title_and_subtitle(figure.layout.title.text)
+        title_html = f'<span style="font-size: calc(1.5vh + 0.5vw);">{main_title}</span>'
+        if subtitle:
+            title_html += (
+                '<br><span style="display:block; font-size:calc(1vh + 0.4vw);margin-top:1vh;">' + subtitle + "</span>"
+            )
         figure.update_layout(
             autosize=True,
             margin=dict(l=50, r=10, b=10, t=67, pad=0),
             width=None,
             height=None,
             title={
-                "y": 0.95,
+                "y": 0.94,
                 "x": 0.5,
                 "xanchor": "center",
                 "yanchor": "top",
-                # update title and font-size of the title
-                "text": '<span style="font-size: 1.2vw;">' + new_title + "</span>",
+                "text": title_html,
             },
         )
         # update x title and font-size of the title
-        figure.update_xaxes(title='<span style="font-size: 1vw;">' + x_ax + "</span>", automargin=True)
+        figure.update_xaxes(
+            title='<span style="font-size: calc(0.45rem + 0.7vw);">' + x_ax + "</span>", automargin=True
+        )
         # update y title and font-size of the title
-        figure.update_yaxes(title='<span style="font-size: 1vw;">' + y_ax + "</span>", automargin=True)
+        figure.update_yaxes(
+            title='<span style="font-size: calc(0.45rem + 0.7vw);">' + y_ax + "</span>", automargin=True
+        )
 
 
-def update_title(title):
+def split_title_and_subtitle(title: str):
     """
-    adapt title content the app layout
+    Split an HTML-formatted title into a main title and an optional subtitle.
+
+    The function searches for a specific separator in the input string:
+    a line break followed by either a <sup>...</sup> or <span ...>...</span> block,
+    i.e., "<br><sup>...</sup>" or "<br><span ...>...</span>". If the pattern is
+    present and the entire string matches this structure, it returns a tuple with
+    the text before the separator as the main title and the inner text of the
+    <sup> or <span> element as the subtitle. If no such pattern is found, it
+    returns the original title and None.
+
     Parameters
     ----------
     title : str
-        string to ba adapted
+        The full title string, optionally containing "<br><sup>...</sup>" or
+        "<br><span ...>...</span>" at the end.
+
     Returns
     -------
-    str
+    tuple[str, Optional[str]]
+        (main_title, subtitle) where subtitle is None when no subtitle is detected.
+        If a subtitle tag is present but empty, an empty string is returned.
+
+    Notes
+    -----
+    - The match is anchored to the start and end of the string; the subtitle (if any)
+    must appear as the final part of the title.
+    - Attributes inside the <span> tag are allowed and ignored.
+    - Whitespace is preserved as-is.
+
+    Examples
+    --------
+    >>> split_title_and_subtitle("Report<br><sup>Q1 2026</sup>")
+    ('Report', 'Q1 2026')
+    >>> split_title_and_subtitle('Sales<br><span class="sub">Forecast</span>')
+    ('Sales', 'Forecast')
+    >>> split_title_and_subtitle("Overview")
+    ('Overview', None)
     """
-    patt = re.compile("^(.+)<span.+?(Predict: .*|Proba: .*)?</span>$")
-    try:
-        list_non_empty_str_matches = [x for x in patt.findall(title)[0] if x != ""]
-        updated = " - ".join(map(str, list_non_empty_str_matches))
-    except Exception:
-        updated = title
-    return updated
+    match = re.match(r"^(.*?)(?:<br><(?:sup|span)[^>]*>(.*?)</(?:sup|span)>)?$", title)
+    if match:
+        main_title = match.group(1)
+        subtitle = match.group(2) if match.lastindex and match.lastindex >= 2 else None
+        return main_title, subtitle
+    return title, None

shapash/webapp/smart_app.py

@@ -599,7 +599,10 @@ def create_dropdown_feature_filter(n_clicks_add: Optional[int], options: list) -
                     # div with dopdown button to select feature to filter
                     html.Div(
                         dcc.Dropdown(
-                            id={"type": "var_dropdown", "index": index_id}, options=options, placeholder="Variable"
+                            id={"type": "var_dropdown", "index": index_id},
+                            options=options,
+                            placeholder="Variable",
+                            style={"line-height": "1.2vh", "height": "1.2vh"},
                         ),
                         style={"width": "30%"},
                     ),