feat: Add show_error flag to display error in cell output (#9430)

bindings/pydeck/pydeck/bindings/deck.py

@@ -39,7 +39,8 @@ def __init__(
         effects=None,
         map_provider=BaseMapProvider.CARTO.value,
         parameters=None,
-        widgets=None
+        widgets=None,
+        show_error=False,
     ):
         """This is the renderer and configuration for a deck.gl visualization, similar to the
         `Deck <https://deck.gl/docs/api-reference/core/deck>`_ class from deck.gl.
@@ -76,6 +77,9 @@ def __init__(
             Layers must have ``pickable=True`` set in order to display a tooltip.
             For more advanced usage, the user can pass a dict to configure more custom tooltip features.
             Further documentation is `here <tooltip.html>`_.
+        show_error : bool, default False
+            If ``True``, will display the error in the rendered output.
+            Otherwise, will only show error in browser console.
 
         .. _Deck:
             https://deck.gl/docs/api-reference/core/deck
@@ -98,6 +102,7 @@ def __init__(
         self.effects = effects
         self.map_provider = str(map_provider).lower() if map_provider else None
         self._tooltip = tooltip
+        self._show_error = show_error
 
         if has_jupyter_extra():
             from ..widget import DeckGLWidget
@@ -228,6 +233,7 @@ def to_html(
             configuration=pydeck_settings.configuration,
             as_string=as_string,
             offline=offline,
+            show_error=self._show_error,
             **kwargs,
         )
         return f

bindings/pydeck/pydeck/bindings/json_tools.py

@@ -14,6 +14,7 @@
     "_binary_data",
     "_tooltip",
     "_kwargs",
+    "_show_error",
 ]
 
 
@@ -74,7 +75,7 @@ def default_serialize(o, remap_function=lower_camel_case_keys):
     attrs = vars(o)
     attrs = {k: v for k, v in attrs.items() if v is not None}
     for ignore_attr in IGNORE_KEYS:
-        if attrs.get(ignore_attr):
+        if ignore_attr in attrs:
             del attrs[ignore_attr]
     if remap_function:
         remap_function(attrs)

bindings/pydeck/pydeck/io/html.py

@@ -64,6 +64,7 @@ def render_json_to_html(
     custom_libraries=None,
     configuration=None,
     offline=False,
+    show_error=False,
 ):
     js = j2_env.get_template("index.j2")
     css = j2_env.get_template("style.j2")
@@ -78,6 +79,7 @@ def render_json_to_html(
         css_text=css_text,
         custom_libraries=custom_libraries,
         configuration=configuration,
+        show_error=show_error,
     )
     return html_str
 
@@ -135,6 +137,7 @@ def deck_to_html(
     configuration=None,
     as_string=False,
     offline=False,
+    show_error=False,
 ):
     """Converts deck.gl format JSON to an HTML page"""
     html_str = render_json_to_html(
@@ -146,6 +149,7 @@ def deck_to_html(
         custom_libraries=custom_libraries,
         configuration=configuration,
         offline=offline,
+        show_error=show_error,
     )
 
     if filename:

bindings/pydeck/pydeck/io/templates/index.j2

@@ -38,7 +38,10 @@
       jsonInput,
       tooltip,
       customLibraries,
-      configuration
+      configuration,
+      {% if show_error %}
+      showError: true,
+      {% endif %}
     });
 
   </script>

bindings/pydeck/pydeck/io/templates/style.j2

@@ -13,3 +13,10 @@ body {
   z-index: 1;
   background: {{css_background_color or 'none'}};
 }
+
+#deck-container .error_text {
+  color: red;
+  background: {{css_background_color or 'none'}};
+  position: absolute;
+  z-index: 100;
+}

modules/jupyter-widget/src/playground/create-deck.js

@@ -127,7 +127,8 @@ function createStandaloneFromProvider({
   googleMapsKey,
   handleEvent,
   getTooltip,
-  container
+  container,
+  onError
 }) {
   // Common deck.gl props for all basemaos
   const handlers = handleEvent
@@ -145,7 +146,8 @@ function createStandaloneFromProvider({
         onDrag: info => handleEvent('deck-drag-event', info),
         onDragEnd: info => handleEvent('deck-drag-end-event', info)
       }
-    : null;
+    : {};
+  handlers.onError = onError;
 
   const sharedProps = {
     ...handlers,
@@ -196,9 +198,24 @@ function createDeck({
   tooltip,
   handleEvent,
   customLibraries,
-  configuration
+  configuration,
+  showError
 }) {
   let deckgl;
+  const onError = e => {
+    if (showError) {
+      const uiErrorText = window.document.createElement('pre');
+      uiErrorText.textContent = `Error: ${e.message}\nSource: ${e.source}\nLine: ${e.lineno}:${e.colno}\n${e.error ? e.error.stack : ''}`;
+      uiErrorText.className = 'error_text';
+
+      container.appendChild(uiErrorText);
+    }
+
+    // This will fail in node tests
+    // eslint-disable-next-line
+    console.error(e);
+  };
+
   try {
     if (configuration) {
       jsonConverter.mergeConfiguration(configuration);
@@ -223,7 +240,8 @@ function createDeck({
       googleMapsKey,
       handleEvent,
       getTooltip,
-      container
+      container,
+      onError
     });
 
     const onComplete = () => {
@@ -241,9 +259,7 @@ function createDeck({
 
     addCustomLibraries(customLibraries, onComplete);
   } catch (err) {
-    // This will fail in node tests
-    // eslint-disable-next-line
-    console.error(err);
+    onError(err);
   }
   return deckgl;
 }