class_docstr: Bridge pattern decoupling the application part from SmartExplainer and SmartPlotter.
  Attributes
  ----------
  explainer: object
      SmartExplainer instance to point to.
class_docstr_tok: ["Bridge","pattern","decoupling","the","application","part","from","SmartExplainer","and","SmartPlotter",".","Attributes","--","--","--","--","--","explainer",":","object","SmartExplainer","instance","to","point","to","."]
docstr: Describe the app skeleton (bootstrap grid) and initialize components containers
docstr_tok: ["Describe","the","app","skeleton","(","bootstrap","grid",")","and","initialize","components","containers"]
code: def make_skeleton(self):
      """
      Describe the app skeleton (bootstrap grid) and initialize components containers
      """
      self.skeleton["navbar"] = dbc.Container(
          [
              dbc.Row(
                  [
                      dbc.Col(
                          html.A(
                              dbc.Row(
                                  [
                                      dbc.Col(
                                          [
                                              html.Img(
                                                  src=self.logo,
                                                  height="40px",
                                              )
                                          ],
                                          className="col-1",
                                      ),
                                      dbc.Col(
                                          [
                                              html.H4(
                                                  "Shapash Monitor",
                                                  id="shapash_title",
                                              )
                                          ]
                                      ),
                                  ],
                                  align="center",
                                  style={
                                      "color": self.title_menu_color
                                  },
                              ),
                              href="https://github.com/MAIF/shapash",
                              target="_blank",
                          ),
                          # Change md=3 to md=2
                          md=2,
                          align="center",
                          width="100%",
                          style={"padding": "auto"},
                      ),
                      dbc.Col(
                          [
                              html.A(
                                  dbc.Row(
                                      [
                                          html.H3(
                                              truncate_str(
                                                  self.explainer.title_story,
                                                  maxlen=40,
                                              ),
                                              id="shapash_title_story",
                                              style={
                                                  "text-align": "center"
                                              },
                                          )
                                      ]
                                  ),
                                  href="https://github.com/MAIF/shapash",
                                  target="_blank",
                              )
                          ],
                          # Change md=3 to md=4
                          md=4,
                          align="center",
                          width="100%",
                          style={"padding": "auto"},
                      ),
                      dbc.Col(
                          [self.components["menu"]],
                          align="end",
                          md=6,
                          width="100%",
                      ),
                  ],
                  style={
                      "padding": "5px 15px",
                      "verticalAlign": "middle",
                      "width": "auto",
                      "justify": "end",
                  },
              )
          ],
          fluid=True,
          style={"height": "100%", "backgroundColor": self.bkg_color},
      )
  
      self.skeleton["body"] = dbc.Container(
          [
              dbc.Row(
                  [
                      dbc.Col(
                          [
                              dbc.Card(
                                  [
                                      html.Div(
                                          # To drow the global_feature_importance graph
                                          self.draw_component(
                                              "graph",
                                              "global_feature_importance",
                                          ),
                                          id="card_global_feature_importance",
                                          # Position must be absolute to add the explanation button
                                          style={
                                              "position": "absolute"
                                          },
                                      ),
                                      dcc.Store(id="clickdata-store"),
                                      html.Div(
                                          [
                                              # Create explanation button on feature importance graph
                                              dbc.Button(
                                                  "?",
                                                  id="open_feature_importance",
                                                  size="sm",
                                                  color="warning",
                                              ),
                                              # Create popover for this button
                                              dbc.Popover(
                                                  "Click here to have more \
                                                    information on Feature Importance graph.",
                                                  target="open_feature_importance",
                                                  body=True,
                                                  trigger="hover",
                                              ),
                                              # Create modal associated to this button
                                              dbc.Modal(
                                                  [
                                                      # Modal title
                                                      dbc.ModalHeader(
                                                          dbc.ModalTitle(
                                                              "Feature importance"
                                                          )
                                                      ),
                                                      dbc.ModalBody(
                                                          [
                                                              html.Div(
                                                                  # Add explanation
                                                                  dcc.Markdown(
                                                                      self.explanations.feature_importance
                                                                  )
                                                              ),
                                                              # Here to add link in the modal
                                                              html.A(
                                                                  "Click here for more details",
                                                                  href="https://github.com/MAIF/shapash/blob/master/tutorial/plots_and_charts/tuto-plot03-features-importance.ipynb",
                                                                  # open new brother tab
                                                                  target="_blank",
                                                                  style={
                                                                      "color": self.color[
                                                                          0
                                                                      ]
                                                                  },
                                                              ),
                                                          ]
                                                      ),
                                                      # button to close the modal
                                                      dbc.ModalFooter(
                                                          dbc.Button(
                                                              "Close",
                                                              id="close_feature_importance",
                                                              color="warning",
                                                          )
                                                      ),
                                                  ],
                                                  id="modal_feature_importance",
                                                  centered=True,
                                                  size="lg",
                                              ),
                                          ],
                                          # position must be relative
                                          style={
                                              "position": "relative",
                                              "left": "96%",
                                          },
                                      ),
                                  ]
                              )
                          ],
                          md=5,
                          style={"padding": "10px 10px 0px 10px"},
                      ),
                      dbc.Col(
                          [
                              # Tabs that contain 3 children tab (Dataset,
                              # Dataset Filters and True Value Vs Pedicted Values)
                              dbc.Tabs(
                                  [
                                      # Tab which contains the datatable component
                                      dbc.Tab(
                                          # draw datatable component
                                          self.draw_component(
                                              "table", "dataset"
                                          ),
                                          # Tab name
                                          label="Dataset",
                                          className="card",
                                          id="card_dataset",
                                          # Style of the tab
                                          style={"cursor": "pointer"},
                                          label_style={
                                              "color": "black",
                                              "height": "30px",
                                              "padding": "0px 5px",
                                          },
                                          # Style when the tab is activated
                                          active_tab_class_name="fw-bold fst-italic",
                                          active_label_style={
                                              "border-top": "3px solid",
                                              "border-top-color": self.color[
                                                  0
                                              ],
                                          },
                                      ),
                                      # Tab which contains components to filter the dataset
                                      dbc.Tab(
                                          dbc.Card(
                                              dbc.CardBody(
                                                  html.Div(
                                                      # draw the component
                                                      self.draw_filter_table(),
                                                      id="card_filter_dataset",
                                                      # To add scroll in overflow y
                                                      style={
                                                          "overflow-y": "scroll",
                                                          "overflow-x": "hidden",
                                                      },
                                                  )
                                              ),
                                              style={
                                                  "height": "24.1rem"
                                              },
                                          ),
                                          # Tab name
                                          label="Dataset Filters",
                                          # Style of the tab
                                          label_style={
                                              "color": "black",
                                              "height": "30px",
                                              "padding": "0px 5px",
                                          },
                                          tab_style={
                                              "border-left": "2px solid #ddd",
                                              "border-right": "2px solid #ddd",
                                          },
                                          # Style when the tab is activated
                                          active_tab_class_name="fw-bold fst-italic",
                                          active_label_style={
                                              "border-top": "3px solid",
                                              "border-top-color": self.color[
                                                  0
                                              ],
                                          },
                                      ),
                                      # Tab which contains prediction picking graph
                                      # and its explanation button
                                      dbc.Tab(
                                          dbc.Card(
                                              [
                                                  html.Div(
                                                      # draw prediction picking graph
                                                      self.draw_component(
                                                          "graph",
                                                          "prediction_picking",
                                                      ),
                                                      id="card_prediction_picking",
                                                      # Position must be absolute to add
                                                      # the explanation button
                                                      style={
                                                          "position": "absolute"
                                                      },
                                                  ),
                                                  html.Div(
                                                      [
                                                          # Create explanation button
                                                          dbc.Button(
                                                              "?",
                                                              id="open_prediction_picking",
                                                              size="sm",
                                                              color="warning",
                                                          ),
                                                          # Create popover for this button
                                                          dbc.Popover(
                                                              "Click here to have more \
                                                           information on Prediction Picking graph.",
                                                              target="open_prediction_picking",
                                                              body=True,
                                                              trigger="hover",
                                                          ),
                                                          # Create modal associated to this button
                                                          dbc.Modal(
                                                              [
                                                                  # Modal title
                                                                  dbc.ModalHeader(
                                                                      dbc.ModalTitle(
                                                                          "True values Vs Predicted values"
                                                                      )
                                                                  ),
                                                                  dbc.ModalBody(
                                                                      [
                                                                          html.Div(
                                                                              # explanation
                                                                              dcc.Markdown(
                                                                                  self.explanations.prediction_picking
                                                                              )
                                                                          ),
                                                                          # Here to add link in the modal
                                                                          html.Div(
                                                                              html.Img(
                                                                                  src="https://github.com/MAIF/shapash/blob/master/docs/_static/shapash_select_subset.gif?raw=true"
                                                                              )
                                                                          ),
                                                                          # Here to add a link in the modal
                                                                          html.A(
                                                                              "Click here for more details",
                                                                              href="https://github.com/MAIF/shapash/blob/master/tutorial/plots_and_charts/tuto-plot06-prediction_plot.ipynb",
                                                                              # open new brother tab
                                                                              target="_blank",
                                                                              style={
                                                                                  "color": self.color[
                                                                                      0
                                                                                  ]
                                                                              },
                                                                          ),
                                                                      ]
                                                                  ),
                                                                  dbc.ModalFooter(
                                                                      # button to close the modal
                                                                      dbc.Button(
                                                                          "Close",
                                                                          id="close_prediction_picking",
                                                                          color="warning",
                                                                      )
                                                                  ),
                                                              ],
                                                              id="modal_prediction_picking",
                                                              centered=True,
                                                              size="lg",
                                                          )
                                                          # Position must be relative
                                                      ],
                                                      style={
                                                          "position": "relative",
                                                          "left": "97%",
                                                      },
                                                  ),
                                              ]
                                          ),
                                          # Tab name
                                          label="True Values Vs Predicted Values",
                                          # Style of the tab
                                          label_style={
                                              "color": "black",
                                              "height": "30px",
                                              "padding": "0px 5px",
                                          },
                                          # Style when the tab is activated
                                          active_tab_class_name="fw-bold fst-italic",
                                          active_label_style={
                                              "border-top": "3px solid",
                                              "border-top-color": self.color[
                                                  0
                                              ],
                                          },
                                      ),
                                  ],
                                  id="tabs",
                              )
                          ],
                          md=7,
                          style={"padding": "10px 10px"},
                      ),
                  ],
                  style={
                      "padding": "10px 10px 0px 10px",
                      "height": "100%",
                  },
                  align="center",
              ),
              dbc.Row(
                  [
                      dbc.Col(
                          [
                              # Card which contains feature selector graph
                              # and explanation button
                              dbc.Card(
                                  [
                                      html.Div(
                                          # Draw feature selector graph
                                          self.draw_component(
                                              "graph",
                                              "feature_selector",
                                          ),
                                          id="card_feature_selector",
                                          # Position must be absolute to
                                          # add explanation button
                                          style={
                                              "position": "absolute"
                                          },
                                      ),
                                      html.Div(
                                          [
                                              # Create explanation button
                                              dbc.Button(
                                                  "?",
                                                  id="open_feature_selector",
                                                  size="sm",
                                                  color="warning",
                                              ),
                                              # popover of this button
                                              dbc.Popover(
                                                  "Click here to have more \
                                                           information on Feature Selector graph.",
                                                  target="open_feature_selector",
                                                  body=True,
                                                  trigger="hover",
                                              ),
                                              # Modal of this button
                                              dbc.Modal(
                                                  [
                                                      dbc.ModalHeader(
                                                          dbc.ModalTitle(
                                                              "Feature selector"
                                                          )
                                                      ),
                                                      dbc.ModalBody(
                                                          [
                                                              html.Div(
                                                                  # explanations
                                                                  dcc.Markdown(
                                                                      self.explanations.feature_selector
                                                                  )
                                                              ),
                                                              # Here to add link
                                                              html.A(
                                                                  "Click here for more details",
                                                                  href="https://github.com/MAIF/shapash/blob/master/tutorial/plots_and_charts/tuto-plot02-contribution_plot.ipynb",
                                                                  # open new brother tab
                                                                  target="_blank",
                                                                  style={
                                                                      "color": self.color[
                                                                          0
                                                                      ]
                                                                  },
                                                              ),
                                                          ]
                                                      ),
                                                      dbc.ModalFooter(
                                                          # Button to close modal
                                                          dbc.Button(
                                                              "Close",
                                                              id="close_feature_selector",
                                                              color="warning",
                                                          )
                                                      ),
                                                  ],
                                                  id="modal_feature_selector",
                                                  centered=True,
                                                  size="lg",
                                              ),
                                          ],
                                          # position must be relative
                                          style={
                                              "position": "relative",
                                              "left": "96%",
                                          },
                                      ),
                                  ]
                              )
                          ],
                          md=5,
                          align="center",
                          style={"padding": "0px 10px"},
                      ),
                      dbc.Col(
                          [
                              dbc.Row(
                                  [
                                      dbc.Col(
                                          [
                                              # Card that contains detail feature graph
                                              # and explanation button
                                              dbc.Card(
                                                  [
                                                      html.Div(
                                                          # draw detail_feature graph
                                                          self.draw_component(
                                                              "graph",
                                                              "detail_feature",
                                                          ),
                                                          id="card_detail_feature",
                                                          style={
                                                              "position": "absolute"
                                                          },
                                                      ),
                                                      html.Div(
                                                          [
                                                              # Create explanation button
                                                              dbc.Button(
                                                                  "?",
                                                                  id="open_detail_feature",
                                                                  size="sm",
                                                                  color="warning",
                                                              ),
                                                              # Popover of this button
                                                              dbc.Popover(
                                                                  "Click here to have more \
                                                           information on Detail Feature graph.",
                                                                  target="open_detail_feature",
                                                                  body=True,
                                                                  trigger="hover",
                                                              ),
                                                              # Modal of this button
                                                              dbc.Modal(
                                                                  [
                                                                      dbc.ModalHeader(
                                                                          dbc.ModalTitle(
                                                                              "Detail feature"
                                                                          )
                                                                      ),
                                                                      dbc.ModalBody(
                                                                          [
                                                                              html.Div(
                                                                                  # explanations
                                                                                  dcc.Markdown(
                                                                                      self.explanations.detail_feature
                                                                                  )
                                                                              ),
                                                                              # Here to add link on the modal
                                                                              html.A(
                                                                                  "Click here for more details",
                                                                                  href="https://github.com/MAIF/shapash/blob/master/tutorial/plot/tuto-plot01-local_plot-and-to_pandas.ipynb",
                                                                                  # open new brother tab
                                                                                  target="_blank",
                                                                                  style={
                                                                                      "color": self.color[
                                                                                          0
                                                                                      ]
                                                                                  },
                                                                              ),
                                                                          ]
                                                                      ),
                                                                      dbc.ModalFooter(
                                                                          # Button to close the modal
                                                                          dbc.Button(
                                                                              "Close",
                                                                              id="close_detail_feature",
                                                                              color="warning",
                                                                          )
                                                                      ),
                                                                  ],
                                                                  id="modal_detail_feature",
                                                                  centered=True,
                                                                  size="lg",
                                                              ),
                                                          ],
                                                          # Position must be relative
                                                          style={
                                                              "position": "relative",
                                                              "left": "96%",
                                                          },
                                                      ),
                                                  ]
                                              )
                                          ],
                                          md=8,
                                          align="center",
                                      ),
                                      dbc.Col(
                                          [
                                              html.Div(
                                                  self.draw_filter(),
                                                  className="card_filter",
                                                  id="card_filter",
                                              ),
                                          ],
                                          md=4,
                                          align="center",
                                      ),
                                  ],
                              ),
                          ],
                          md=7,
                          align="center",
                          style={"padding": "0px 10px"},
                      ),
                  ],
                  style={"padding": "10px 5px 10px 10px"},
              ),
          ],
          className="mt-12",
          fluid=True,
          # To drop the x scroll-bar
          style={"overflow-x": "hidden"},
      )
  
imports: import copy
  import dash
  from dash import dash_table
  import dash_daq
  from dash import no_update
  from dash.exceptions import PreventUpdate
  import dash_bootstrap_components
  from dash import dcc
  from dash import html
  from dash import MATCH, ALL
  from dash.dependencies import Output, Input, State
  from flask import Flask
  import pandas
  import plotly.graph_objs
  import random
  import re
  from math import log10
  from shapash.webapp.utils.utils import check_row, get_index_type, round_to_k
  from shapash.webapp.utils.MyGraph import MyGraph
  from shapash.utils.utils import truncate_str
  from shapash.webapp.utils.explanations import Explanations
  from shapash.webapp.utils.callbacks import select_data_from_prediction_picking, select_data_from_str_filters, select_data_from_bool_filters, select_data_from_numeric_filters, select_data_from_date_filters, get_feature_from_clicked_data, get_feature_from_features_groups, get_group_name, get_indexes_from_datatable, update_click_data_on_subset_changes, get_figure_zoom, get_feature_contributions_sign_to_show, update_features_to_display, get_id_card_features, get_id_card_contrib, create_id_card_data, create_id_card_layout, get_feature_filter_options, create_dropdown_feature_filter, create_filter_modalities_selection
label_desc: Use image node_id 4 for calling the SmartApp obj's underlying member method code with example usage: obj.make_skeleton() without return types