Variable inspector widget buttons visibility and delete functionality

src/handler.ts

@@ -226,8 +226,8 @@ export class VariableInspectionHandler extends AbstractHandler {
             break;
           }
           case 'error':
-            console.log(response);
-            reject("Kernel error on 'matrixQuery' call!");
+            const error = response as KernelMessage.IErrorMsg;
+            reject(error);
             break;
           default:
             break;

src/inspectorscripts.ts

@@ -62,6 +62,9 @@ def _check_imported():
     __ipywidgets = _attempt_import('ipywidgets')
     __xr = _attempt_import('xarray')
 
+def _verify_import(module,name):
+    if module is None:
+        raise ImportError(f"{name} is required to inspect the variable. Please import it and try again.")
 
 def _jupyterlab_variableinspector_changesettings(maxitems, **kwargs):
     global _jupyterlab_variableinspector_maxitems
@@ -254,7 +257,8 @@ def _jupyterlab_variableinspector_getmatrixcontent(x, max_rows=10000):
         if threshold is not None:
             x = x.head(threshold)
         return x.to_json(orient="table", default_handler=_jupyterlab_variableinspector_default, force_ascii=False)
-    elif __np and __pd and type(x).__name__ == "ndarray":
+    elif __np and type(x).__name__ == "ndarray":
+        _verify_import(__pd, "pandas")
         df = __pd.DataFrame(x)
         return _jupyterlab_variableinspector_getmatrixcontent(df)
     elif __tf and (isinstance(x, __tf.Variable) or isinstance(x, __tf.Tensor)):
@@ -267,6 +271,7 @@ def _jupyterlab_variableinspector_getmatrixcontent(x, max_rows=10000):
         df = x.to_numpy()
         return _jupyterlab_variableinspector_getmatrixcontent(df)
     elif isinstance(x, list):
+        _verify_import(__pd, "pandas")
         s = __pd.Series(x)
         return _jupyterlab_variableinspector_getmatrixcontent(s)
 

src/variableinspector.ts

@@ -1,6 +1,10 @@
 import { OutputAreaModel, SimplifiedOutputArea } from '@jupyterlab/outputarea';
 
-import { closeIcon, searchIcon } from '@jupyterlab/ui-components';
+import {
+  closeIcon,
+  deleteIcon,
+  inspectorIcon
+} from '@jupyterlab/ui-components';
 
 import { DataGrid, DataModel } from '@lumino/datagrid';
 
@@ -37,6 +41,7 @@ provideJupyterDesignSystem().register(
 
 import wildcardMatch from 'wildcard-match';
 import { Message } from '@lumino/messaging';
+import { KernelMessage } from '@jupyterlab/services';
 
 const TITLE_CLASS = 'jp-VarInspector-title';
 const PANEL_CLASS = 'jp-VarInspector';
@@ -329,35 +334,43 @@ export class VariableInspectorPanel
       cell.title = 'Delete Variable';
       cell.className = 'jp-VarInspector-deleteButton';
       cell.gridColumn = '1';
-      const closeButton = document.createElement('jp-button') as Button;
-      closeButton.appearance = 'stealth';
-      const ico = closeIcon.element();
+      const deleteButton = document.createElement('jp-button') as Button;
+      deleteButton.appearance = 'stealth';
+      const ico = deleteIcon.element();
       ico.className = 'icon-button';
       ico.onclick = (ev: MouseEvent): any => {
+        this.source?.performDelete(name);
         this.removeRow(name);
       };
-      closeButton.append(ico);
-      cell.append(closeButton);
+      deleteButton.append(ico);
+      cell.append(deleteButton);
       row.appendChild(cell);
 
       // Add onclick event for inspection
       cell = document.createElement('jp-data-grid-cell') as DataGridCell;
       if (item.isMatrix) {
         cell.title = 'View Contents';
         cell.className = 'jp-VarInspector-inspectButton';
-        const searchButton = document.createElement('jp-button') as Button;
-        searchButton.appearance = 'stealth';
-        const ico = searchIcon.element();
+        const inspectorButton = document.createElement('jp-button') as Button;
+        inspectorButton.appearance = 'stealth';
+        const ico = inspectorIcon.element();
         ico.className = 'icon-button';
         ico.onclick = (ev: MouseEvent): any => {
           this._source
             ?.performMatrixInspection(item.varName)
             .then((model: DataModel) => {
               this._showMatrix(model, item.varName, item.varType);
+            })
+            .catch((error: KernelMessage.IErrorMsg) => {
+              if (error.content.ename === 'ImportError') {
+                alert(error.content.evalue);
+              } else {
+                console.log(error);
+              }
             });
         };
-        searchButton.append(ico);
-        cell.append(searchButton);
+        inspectorButton.append(ico);
+        cell.append(inspectorButton);
       } else {
         cell.innerHTML = '';
       }

style/base.css

@@ -80,13 +80,13 @@
 
 .jp-VarInspector-deleteButton {
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
   width: 1em;
 }
 
 .jp-VarInspector-inspectButton {
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
   width: 1em;
 }