Logger

app/app.ts

@@ -3,7 +3,7 @@
 import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-import { getByID, addWarningHandler } from '../src/utils';
+import { getByID, logger } from '../src/utils';
 import { Dataset, Structure } from '../src/dataset';
 import { version, DefaultVisualizer, Settings } from '../src/index';
 
@@ -35,7 +35,7 @@ export class ChemiscopeApp {
         versionDisplay.innerText = `version ${version()}`;
 
         // handle warnings
-        addWarningHandler((message) => displayWarning(message));
+        logger.addHandler('warn', (message) => displayWarning(message as string));
 
         // when the window is resized, change the size available to the info
         // widget

python/chemiscope/sphinx/static/chemiscope-sphinx.css

@@ -1,9 +1,6 @@
-.chemiscope-sphinx-warning {
+.chemiscope-sphinx-log {
     display: none;
     flex-wrap: wrap;
-    border: 1px solid #f0ad4e;
-    background-color: #fcf8e3;
-    color: #8a6d3b;
     padding: 15px;
     border-radius: 4px;
     margin-bottom: 20px;
@@ -24,6 +21,28 @@
     }
 }
 
+.chemiscope-sphinx-log.warning {
+    border: 1px solid #f0ad4e;
+    background-color: #fcf8e3;
+    color: #8a6d3b;
+}
+
+.chemiscope-sphinx-log.error {
+    border: 1px solid #d9534f;
+    background-color: #f2dede;
+    color: #a94442;
+
+    .error-backtrace {
+        background-color: #f5d6d6;
+        border: 1px solid #d9534f;
+        border-radius: 4px;
+        padding: 10px;
+        margin-top: 10px;
+        white-space: pre-wrap;
+        overflow-x: auto;
+    }
+}
+
 .chemiscope-sphinx-spinner img {
     width: 2em;
     height: 2em;

python/chemiscope/sphinx/static/chemiscope-sphinx.html

@@ -11,12 +11,22 @@
 <!-- end headers -->
 
 <!-- Warning Display -->
-<div id="{{div_id}}-warning-display" class="chemiscope-sphinx-warning">
+<div id="{{div_id}}-warning-display" class="chemiscope-sphinx-log warning">
     <p></p>
     <button type="button" aria-label="Close" onclick="hideElement('{{div_id}}-warning-display')">
         &times;
     </button>
 </div>
+
+<!-- Error Display -->
+<div id="{{div_id}}-error-display" class="chemiscope-sphinx-log error">
+    <p class="error-message"></p>
+    <pre class="error-backtrace"></pre>
+    <button type="button" aria-label="Close" onclick="hideElement('{{div_id}}-error-display')">
+        &times;
+    </button>
+</div>
+
 <div style="padding: 0.5rem 1.25rem" />
 
 <!-- Loading Spinner -->

python/chemiscope/sphinx/static/chemiscope-sphinx.js

@@ -13,8 +13,10 @@ const VISUALISER_MODE = {
  * Asynchronously loads the Chemiscope visualization for the dataset
  */
 async function loadChemiscopeSphinx(divId, filePath, visualizerMode = VISUALISER_MODE.DEFAULT) {
-    // Handle warnings
-    Chemiscope.addWarningHandler((message) => displayWarning(divId, message));
+    // Handle warnings and errors
+    Chemiscope.logger.addHandler('warning', (message) => displayWarning(divId, message));
+    Chemiscope.logger.addHandler('error', (error) => displayError(divId, error));
+
     // Display loading
     toggleLoadingVisible(divId, true);
 
@@ -37,12 +39,15 @@ async function loadChemiscopeSphinx(divId, filePath, visualizerMode = VISUALISER
         // Load widget
         const visualiser = getVisualizer(visualizerMode);
         await visualiser.load(config, dataset);
-    } catch (error) {
-        // Display errors
-        console.error(error);
-        displayWarning(divId, error);
-    } finally {
-        // Hide loading
+    }
+
+    // Display errors
+    catch (error) {
+        Chemiscope.logger.error(error);
+    }
+
+    // Hide loading
+    finally {
         toggleLoadingVisible(divId, false);
     }
 }
@@ -176,3 +181,20 @@ function displayWarning(divId, message) {
         display.style.display = 'none';
     }, 4000);
 }
+
+function displayError(divId, error) {
+    const errorElement = document.getElementById(`${divId}-error-display`);
+    const messageElement = errorElement.querySelector('.error-message');
+    const backtraceElement = errorElement.querySelector('.error-backtrace');
+
+    // Set the error message
+    messageElement.textContent = error.toString();
+
+    // Extract and set the backtrace (stack trace) if available
+    if (error.stack) {
+        backtraceElement.textContent = error.stack;
+    }
+
+    // Show the error element
+    errorElement.style.display = 'flex';
+}

python/jupyter/src/widget.css

@@ -88,3 +88,29 @@ html {
 .chemiscope-meta-and-map .chemiscope-info *::part(chsp-slider) {
     display: none;
 }
+
+.chemiscope-sphinx-warning {
+    display: none;
+    flex-wrap: wrap;
+    border: 1px solid #f0ad4e;
+    background-color: #fcf8e3;
+    color: #8a6d3b;
+    padding: 15px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+
+    button {
+        position: relative;
+        float: right;
+        font-size: 3em;
+        line-height: 1;
+        color: inherit;
+        text-shadow: none;
+        background-color: transparent;
+        border: 0;
+    }
+
+    p {
+        flex: 1;
+    }
+}

python/jupyter/src/widget.ts

@@ -1,7 +1,7 @@
 import { DOMWidgetView } from '@jupyter-widgets/base';
 import Plausible from 'plausible-tracker';
 
-import { addWarningHandler, generateGUID, getByID } from '../../../src/utils';
+import { logger, generateGUID, getByID } from '../../../src/utils';
 
 // Import the CSS
 import './widget.css';
@@ -92,15 +92,20 @@ export class ChemiscopeView extends ChemiscopeBaseView {
         // and then inserting this.el inside the HTML document.
         const element = this.el;
 
-        addWarningHandler((message) => {
+        logger.addHandler('warn', (message) => {
             const display = getByID(`${this.guid}-warning-display`, element);
             display.style.display = 'block';
-            display.getElementsByTagName('p')[0].innerText = message;
+            display.getElementsByTagName('p')[0].innerText = message as string;
+        });
+        logger.addHandler('error', (e) => {
+            const display = getByID(`${this.guid}-error-display`, element);
+            display.style.display = 'block';
+            display.getElementsByTagName('p')[0].innerText = e.toString();
         });
 
         element.innerHTML = `
         <div>
-            <div class="alert alert-warning" role="alert" id="${this.guid}-warning-display" style="display: none; font-size: 1.5em;">
+            <div class="alert alert-warning chemiscope-sphinx-warning" role="alert" id="${this.guid}-warning-display" style="display: none; font-size: 1.5em;">
                 <button type="button" class="close" onclick="document.getElementById('${this.guid}-warning-display').style.display = 'none';">
                     <span aria-hidden="true">&times;</span>
                 </button>
@@ -145,12 +150,7 @@ export class ChemiscopeView extends ChemiscopeBaseView {
                 this._updatePythonSettings();
             })
             .catch((e: Error) => {
-                // eslint-disable-next-line no-console
-                console.error(e);
-
-                const display = getByID(`${this.guid}-error-display`, element);
-                display.style.display = 'block';
-                display.getElementsByTagName('p')[0].innerText = e.toString();
+                logger.error(e);
             });
 
         if (!this.model.get('has_metadata')) {
@@ -177,10 +177,10 @@ export class StructureView extends ChemiscopeBaseView {
         // and then inserting this.el inside the HTML document.
         const element = this.el;
 
-        addWarningHandler((message) => {
+        logger.addHandler('warn', (message) => {
             const display = getByID(`${this.guid}-warning-display`, element);
             display.style.display = 'block';
-            display.getElementsByTagName('p')[0].innerText = message;
+            display.getElementsByTagName('p')[0].innerText = message as string;
         });
 
         element.innerHTML = `
@@ -258,10 +258,10 @@ export class MapView extends ChemiscopeBaseView {
         // and then inserting this.el inside the HTML document.
         const element = this.el;
 
-        addWarningHandler((message) => {
+        logger.addHandler('warn', (message) => {
             const display = getByID(`${this.guid}-warning-display`, element);
             display.style.display = 'block';
-            display.getElementsByTagName('p')[0].innerText = message;
+            display.getElementsByTagName('p')[0].innerText = message as string;
         });
 
         element.innerHTML = `

src/index.ts

@@ -20,14 +20,7 @@ import {
     UserStructure,
 } from './dataset';
 import { JsObject, getTarget, validateDataset } from './dataset';
-import {
-    GUID,
-    PositioningCallback,
-    WarningHandler,
-    addWarningHandler,
-    getNextColor,
-    sendWarning,
-} from './utils';
+import { GUID, PositioningCallback, WarningHandler, getNextColor, logger } from './utils';
 import {
     ArrowParameters,
     CustomShapeParameters,
@@ -730,7 +723,7 @@ class MapVisualizer {
         for (const key in dataset.properties) {
             const property = dataset.properties[key];
             if (property.target === 'atom') {
-                sendWarning('unsupported per-atom property in a map-only viewer');
+                logger.warn('unsupported per-atom property in a map-only viewer');
             } else {
                 assert(property.target === 'structure');
                 n_structure = property.values.length;
@@ -870,9 +863,9 @@ function getMapSettings(settings: Partial<Settings> | undefined): Settings {
 }
 
 export {
-    // free functions
-    addWarningHandler,
+    // free function
     version,
+    logger,
     // dataset definitions
     Dataset,
     Metadata,

src/info/info.ts

@@ -7,7 +7,7 @@ import assert from 'assert';
 
 import { Parameter, Property } from '../dataset';
 import { DisplayTarget, EnvironmentIndexer, Indexes } from '../indexer';
-import { binarySearch, getElement, sendWarning } from '../utils';
+import { binarySearch, getElement, logger } from '../utils';
 
 import * as plotlyStyles from '../map/plotly/plotly-styles';
 
@@ -256,7 +256,7 @@ export class EnvironmentInfo {
             if (this._atom !== undefined) {
                 const activeAtoms = this._indexer.activeAtoms(structure);
                 if (activeAtoms.length === 0) {
-                    sendWarning(
+                    logger.warn(
                         `Cannot change to structure ${
                             structure + 1
                         }, which does not contain any active atoms`
@@ -389,7 +389,7 @@ export class EnvironmentInfo {
             if (indexes === undefined) {
                 const structure = this._structure.slider.value();
                 const atom = this._atom.slider.value();
-                sendWarning(
+                logger.warn(
                     `Environment for atom ${atom} in structure ${structure} is not part of this dataset`
                 );
                 return;

src/map/data.ts

@@ -4,7 +4,7 @@
  */
 
 import { Property } from '../dataset';
-import { sendWarning } from '../utils';
+import { logger } from '../utils';
 
 /** @hidden
  * Properties turned into numeric values to be displayed on the map.
@@ -146,7 +146,7 @@ export class MapData {
             try {
                 property = propertyToNumeric(name, properties[name]);
             } catch (e) {
-                sendWarning(`warning: ${(e as Error).message}`);
+                logger.warn(`warning: ${(e as Error).message}`);
                 continue;
             }
             if (property !== undefined) {

src/map/map.ts

@@ -14,7 +14,7 @@ import { Property, Settings } from '../dataset';
 
 import { DisplayTarget, EnvironmentIndexer, Indexes } from '../indexer';
 import { OptionModificationOrigin } from '../options';
-import { GUID, PositioningCallback, arrayMaxMin, sendWarning } from '../utils';
+import { GUID, PositioningCallback, arrayMaxMin, logger } from '../utils';
 import { enumerate, getElement, getFirstKey } from '../utils';
 
 import { MapData, NumericProperties, NumericProperty } from './data';
@@ -738,7 +738,7 @@ export class PropertiesMap {
                 arrayMaxMin(this._coordinates(axis, 0)[0] as number[])['min'] < 0 &&
                 axis.min.value <= 0
             ) {
-                sendWarning(
+                logger.warn(
                     'This property contains negative values. Note that taking the log will discard them.'
                 );
             }
@@ -790,7 +790,7 @@ export class PropertiesMap {
                 const min = axis.min.value;
                 const max = axis.max.value;
                 if (min > max) {
-                    sendWarning(
+                    logger.warn(
                         `The inserted min and max values in ${name} are such that min > max! The last inserted value was reset.`
                     );
                     if (minOrMax === 'min') {
@@ -991,7 +991,7 @@ export class PropertiesMap {
             const min = this._options.color.min.value;
             const max = this._options.color.max.value;
             if (min > max) {
-                sendWarning(
+                logger.warn(
                     `The inserted min and max values in color are such that min > max! The last inserted value was reset.`
                 );
                 if (minOrMax === 'min') {
@@ -1028,7 +1028,7 @@ export class PropertiesMap {
             const someValuesNaN = values.some((value) => isNaN(value));
 
             if (allValuesNaN) {
-                sendWarning(
+                logger.warn(
                     `The selected property contains only values ${invalidValues}. ` +
                         'To display this property, select an appropriate color scale. ' +
                         `The ${changed} will be set to its last value.`
@@ -1042,7 +1042,7 @@ export class PropertiesMap {
 
                 return false;
             } else if (someValuesNaN) {
-                sendWarning(
+                logger.warn(
                     `The selected property contains some values ${invalidValues}. ` +
                         'These values will be colored in grey.'
                 );
@@ -1301,7 +1301,7 @@ export class PropertiesMap {
             if (min <= max) {
                 return [min, max];
             }
-            sendWarning(
+            logger.warn(
                 `The inserted min and max values in ${axisName} are such that min > max! The default values will be used.`
             );
         }