add execution queue, code reformat and some cleaning

Author: pplonski

src/components/paginationControls.tsx

@@ -52,7 +52,7 @@ export const PaginationControls: React.FC<PaginationControlsProps> = ({
     <div className="mljar-variable-inspector-pagination-container">
       <div className="mljar-variable-inspector-pagination-item">
         <div className="mljar-variable-inspector-choose-range">
-          <span>Displaying rows from </span>
+          <span>Rows from </span>
           <button
             onClick={e => handlePrevRowPage('first')}
             className="mljar-variable-inspector-skip-button"
@@ -114,11 +114,11 @@ export const PaginationControls: React.FC<PaginationControlsProps> = ({
             <skipRightIcon.react className="mljar-variable-inspector-skip-icon" />
           </button>
           <span>
-            from total <span style={{ fontWeight: 600 }}>{rowsCount}</span> rows
+            Total <span style={{ fontWeight: 600 }}>{rowsCount}</span> rows
           </span>
         </div>
         <div className="mljar-variable-inspector-choose-range">
-          <span>Displaying columns from </span>
+          <span>Columns from </span>
           <button
             onClick={e => handlePrevColumnPage('first')}
             className="mljar-variable-inspector-skip-button"
@@ -180,8 +180,7 @@ export const PaginationControls: React.FC<PaginationControlsProps> = ({
             <skipRightIcon.react className="mljar-variable-inspector-skip-icon" />
           </button>
           <span>
-            from total <span style={{ fontWeight: 600 }}>{colsCount}</span>{' '}
-            columns
+            Total <span style={{ fontWeight: 600 }}>{colsCount}</span> columns
           </span>
         </div>
         {/* Goto Cell section */}

src/components/variableItem.tsx

@@ -53,7 +53,14 @@ export const VariableItem: React.FC<VariableItemProps> = ({
         const content = result.content;
         try {
           if (type === 'list') {
-            setPreview(`[ ${content}...]`);
+            let listLen = 10;
+            try {
+              listLen = parseInt(vrb.shape);
+            } catch {
+              /* empty */
+            } finally {
+              setPreview(`[${content}${listLen > 10 ? '...' : ''}]`);
+            }
           }
           if (type === 'dict') {
             const jsonStr = JSON.stringify(content);

src/components/variableList.tsx

@@ -73,7 +73,7 @@ export const VariableList: React.FC<VariableListProps> = ({
         </div>
       ) : variables.length === 0 ? (
         <div className="mljar-variable-inspector-message">
-          No variables available.
+          Sorry, no variables available.
         </div>
       ) : (
         <ul className="mljar-variable-inspector-list">

src/components/variablePanel.tsx

@@ -13,7 +13,7 @@ import { useThemeContext } from '../context/themeContext';
 import { transformMatrixData } from '../utils/utils';
 import { PaginationControls } from './paginationControls';
 
-interface VariablePanelProps {
+interface IVariablePanelProps {
   variableName: string;
   initVariableType: string;
   initVariableShape: string;
@@ -23,7 +23,7 @@ interface VariablePanelProps {
 const AutoSizer = RVAutoSizer as unknown as React.ComponentType<any>;
 const MultiGrid = RVMultiGrid as unknown as React.ComponentType<any>;
 
-export const VariablePanel: React.FC<VariablePanelProps> = ({
+export const VariablePanel: React.FC<IVariablePanelProps> = ({
   variableName,
   initVariableType,
   initVariableShape,
@@ -226,7 +226,7 @@ export const VariablePanel: React.FC<VariablePanelProps> = ({
     let maxLength = 0;
     for (let row = 0; row < rowCount; row++) {
       const cell = data[row][col];
-      const cellStr = cell != null ? cell.toString() : '';
+      const cellStr = cell !== null ? cell.toString() : '';
       if (cellStr.length > maxLength) {
         maxLength = cellStr.length;
       }

src/context/codeExecutionContext.tsx

@@ -14,7 +14,7 @@ import { VARIABLE_INSPECTOR_ID, autoRefreshProperty } from '../index';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { variableDict } from '../python_code/getVariables';
 
-interface ICodeExecutionContext { }
+interface ICodeExecutionContext {}
 
 interface CodeExecutionContextProviderProps {
   children: ReactNode;
@@ -32,8 +32,6 @@ export const CodeExecutionContextProvider: React.FC<
   const kernelReady = useNotebookKernelContext();
   const { refreshVariables } = useVariableContext();
   const getVariableCode = variableDict;
-  const matrixFunctionHeader =
-    '__mljar_variable_inspector_get_matrix_content()';
   const [autoRefresh, setAutoRefresh] = useState(true);
 
   const loadAutoRefresh = () => {
@@ -74,16 +72,18 @@ export const CodeExecutionContextProvider: React.FC<
       if (msg.header.msg_type === 'execute_input') {
         const inputMsg = msg as IExecuteInputMsg;
         const code = inputMsg.content.code;
+        const variableInspectorPrefix = '_jupyterlab_variableinspector';
+        const mljarPrefix = '__mljar';
         if (
           code !== getVariableCode &&
-          !code.includes(matrixFunctionHeader) &&
+          !code.includes(variableInspectorPrefix) &&
+          !code.includes(mljarPrefix) &&
           autoRefresh
         ) {
           refreshVariables();
         }
       }
     };
-
     kernel.iopubMessage.connect(handleIOPubMessage);
 
     return () => {

src/context/notebookVariableContext.tsx

@@ -11,7 +11,7 @@ import { KernelMessage } from '@jupyterlab/services';
 import { withIgnoredSidebarKernelUpdates } from '../utils/kernelOperationNotifier';
 import { variableDict } from '../python_code/getVariables';
 
-interface VariableInfo {
+interface IVariableInfo {
   name: string;
   type: string;
   shape: string;
@@ -20,8 +20,8 @@ interface VariableInfo {
   value: string;
 }
 
-interface VariableContextProps {
-  variables: VariableInfo[];
+interface IVariableContextProps {
+  variables: IVariableInfo[];
   loading: boolean;
   error: string | null;
   searchTerm: string;
@@ -31,34 +31,82 @@ interface VariableContextProps {
   refreshCount: number;
 }
 
-const VariableContext = createContext<VariableContextProps | undefined>(
+const VariableContext = createContext<IVariableContextProps | undefined>(
   undefined
 );
 
+type Task = () => Promise<void> | void;
+
+class DebouncedTaskQueue {
+  // Holds the timer handle.
+  private timer: ReturnType<typeof setTimeout> | null = null;
+  // Holds the most recently added task.
+  private lastTask: Task | null = null;
+  private delay: number;
+
+  /**
+   * @param delay Time in milliseconds to wait before executing the last task.
+   */
+  constructor(delay: number = 500) {
+    this.delay = delay;
+  }
+
+  /**
+   * Adds a new task to the queue. Only the last task added within the delay period will be executed.
+   * @param task A function representing the task.
+   */
+  add(task: Task): void {
+    // Save (or overwrite) the latest task.
+    this.lastTask = task;
+
+    // If there’s already a pending timer, clear it.
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+
+    // Start (or restart) the timer.
+    this.timer = setTimeout(async () => {
+      if (this.lastTask) {
+        try {
+          // Execute the latest task.
+          await this.lastTask();
+        } catch (error) {
+          console.error('Task execution failed:', error);
+        }
+      }
+      // After execution, clear the stored task and timer.
+      this.lastTask = null;
+      this.timer = null;
+    }, this.delay);
+  }
+}
+
 export const VariableContextProvider: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
   const notebookPanel = useNotebookPanelContext();
   const kernel = useNotebookKernelContext();
-  const [variables, setVariables] = useState<VariableInfo[]>([]);
+  const [variables, setVariables] = useState<IVariableInfo[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
   const [searchTerm, setSearchTerm] = useState<string>('');
   const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
   const [refreshCount, setRefreshCount] = useState<number>(0);
+  const queue = new DebouncedTaskQueue(250);
 
   const executeCode = useCallback(async () => {
     await withIgnoredSidebarKernelUpdates(async () => {
-      setIsRefreshing(true);
-      setLoading(true);
+      //setIsRefreshing(true);
+      //setLoading(true);
       setError(null);
 
       if (!notebookPanel) {
+        setVariables([]);
         setLoading(false);
         setIsRefreshing(false);
         return;
       }
-      setVariables([]);
+      //setVariables([]);
 
       try {
         const future =
@@ -86,10 +134,10 @@ export const VariableContextProvider: React.FC<{
                 try {
                   const cleanedData = textData.replace(/^['"]|['"]$/g, '');
                   const doubleQuotedData = cleanedData.replace(/'/g, '"');
-                  const parsedData: VariableInfo[] =
+                  const parsedData: IVariableInfo[] =
                     JSON.parse(doubleQuotedData);
                   if (Array.isArray(parsedData)) {
-                    const mappedVariables: VariableInfo[] = parsedData.map(
+                    const mappedVariables: IVariableInfo[] = parsedData.map(
                       (item: any) => ({
                         name: item.varName,
                         type: item.varType,
@@ -108,6 +156,7 @@ export const VariableContextProvider: React.FC<{
                   setRefreshCount(prev => prev + 1);
                 } catch (err) {
                   setError('Error during export JSON.');
+                  setVariables([]);
                   setLoading(false);
                   setIsRefreshing(false);
                 }
@@ -121,6 +170,7 @@ export const VariableContextProvider: React.FC<{
         setIsRefreshing(false);
       }
     });
+    return;
   }, [notebookPanel, kernel]);
 
   useEffect(() => {
@@ -135,7 +185,7 @@ export const VariableContextProvider: React.FC<{
         error,
         searchTerm,
         setSearchTerm,
-        refreshVariables: executeCode,
+        refreshVariables: () => queue.add(() => executeCode()),
         isRefreshing,
         refreshCount
       }}
@@ -145,7 +195,7 @@ export const VariableContextProvider: React.FC<{
   );
 };
 
-export const useVariableContext = (): VariableContextProps => {
+export const useVariableContext = (): IVariableContextProps => {
   const context = useContext(VariableContext);
   if (context === undefined) {
     throw new Error(

src/utils/executeGetMatrix.ts

@@ -47,6 +47,7 @@ export const executeMatrixContent = async (
           outputData += content.data['text/plain'];
         }
       } else if (msgType === 'stream') {
+        /* empty */
       } else if (msgType === 'error') {
         console.error('Python error:', msg.content);
         reject(new Error('Error during Python execution.'));

src/watchers/notebookWatcher.ts

@@ -18,48 +18,6 @@ function getNotebook(widget: Widget | null): Notebook | null {
   return content;
 }
 
-export type NotebookSelection = {
-  start: { line: number; column: number };
-  end: { line: number; column: number };
-  text: string;
-  numLines: number;
-  widgetId: string;
-  cellId?: string;
-};
-
-export type NotebookSelections = NotebookSelection[];
-
-export function getNotebookSelections(notebook: Notebook): NotebookSelections {
-  const selections: NotebookSelections = [];
-
-  const cellModels = notebook.model?.cells;
-
-  if (cellModels) {
-    for (let i = 0; i < cellModels.length; i++) {
-      const cell = cellModels.get(i);
-      const cellSource = cell?.sharedModel.getSource();
-      const cellId = cell?.id;
-
-      if (cellSource && cellId) {
-        const numLines = cellSource.split('\n').length;
-
-        const selection: NotebookSelection = {
-          start: { line: 0, column: 0 },
-          end: { line: numLines - 1, column: cellSource.length },
-          text: cellSource,
-          numLines,
-          widgetId: notebook.id,
-          cellId
-        };
-
-        selections.push(selection);
-      }
-    }
-  }
-
-  return selections;
-}
-
 export class NotebookWatcher {
   constructor(shell: JupyterFrontEnd.IShell) {
     this._shell = shell;
@@ -71,14 +29,6 @@ export class NotebookWatcher {
     });
   }
 
-  get selection(): NotebookSelections {
-    return this._selections;
-  }
-
-  get selectionChanged(): Signal<this, NotebookSelections> {
-    return this._selectionChanged;
-  }
-
   get notebookPanelChanged(): Signal<this, NotebookPanel | null> {
     return this._notebookPanelChanged;
   }
@@ -146,8 +96,6 @@ export class NotebookWatcher {
   protected _kernelChanged = new Signal<this, KernelInfo | null>(this);
   protected _shell: JupyterFrontEnd.IShell;
   protected _mainAreaWidget: Widget | null = null;
-  protected _selections: NotebookSelections = [];
-  protected _selectionChanged = new Signal<this, NotebookSelections>(this);
   protected _notebookPanel: NotebookPanel | null = null;
   protected _notebookPanelChanged = new Signal<this, NotebookPanel | null>(
     this

style/base.css

@@ -464,3 +464,8 @@
   text-decoration: underline;
   background-color: #d3d3d3;
 }
+
+.mljar-variable-inspector-variable-preview,
+.mljar-variable-inspector-variable-value {
+  padding-left: 7px;
+}