added execution order display to code cells (#13502)

Signed-off-by: Jonah Iden <[email protected]>
eclipse-theia · Mar 21, 2024 · cd0200f · cd0200f
1 parent dffb9dc
commit cd0200f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 14 deletions.
diff --git a/packages/notebook/src/browser/contributions/notebook-cell-actions-contribution.ts b/packages/notebook/src/browser/contributions/notebook-cell-actions-contribution.ts
@@ -190,10 +190,10 @@ export class NotebookCellActionContribution implements MenuContribution, Command
         });
 
         // Notebook Cell extra execution options
-        menus.registerIndependentSubmenu(NotebookCellActionContribution.CONTRIBUTED_CELL_EXECUTION_MENU,
-            nls.localizeByDefault('More...'),
-            { role: CompoundMenuNodeRole.Flat, icon: codicon('chevron-down') });
-        menus.getMenu(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU).addNode(menus.getMenuNode(NotebookCellActionContribution.CONTRIBUTED_CELL_EXECUTION_MENU));
+        // menus.registerIndependentSubmenu(NotebookCellActionContribution.CONTRIBUTED_CELL_EXECUTION_MENU,
+        //     nls.localizeByDefault('More...'),
+        //     { role: CompoundMenuNodeRole.Flat, icon: codicon('chevron-down') });
+        // menus.getMenu(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU).addNode(menus.getMenuNode(NotebookCellActionContribution.CONTRIBUTED_CELL_EXECUTION_MENU));
 
         // code cell output sidebar menu
         menus.registerSubmenu(

diff --git a/packages/notebook/src/browser/style/index.css b/packages/notebook/src/browser/style/index.css
@@ -129,11 +129,28 @@
   background-color: var(--theia-editor-background);
 }
 
-.theia-notebook-cell-sidebar {
+.theia-notebook-cell-sidebar-toolbar {
   display: flex;
   flex-direction: column;
   padding: 2px;
   background-color: var(--theia-editor-background);
+  flex-grow: 1;
+}
+
+.theia-notebook-cell-sidebar {
+  display: flex;
+  flex-direction: column;
+}
+
+.theia-notebook-code-cell-execution-order {
+  height: 35px;
+  display: block;
+  font-family: var(--monaco-monospace-font);
+  font-size: 10px;
+  opacity: 0.7;
+  text-align: center;
+  white-space: pre;
+  padding: 5px 0;
 }
 
 .theia-notebook-cell-toolbar-item {
@@ -159,11 +176,6 @@
   flex-direction: row;
 }
 
-.theia-notebook-cell-sidebar {
-  display: flex;
-  flex-direction: column;
-}
-
 .theia-notebook-main-container {
   display: flex;
   flex-direction: column;

diff --git a/packages/notebook/src/browser/view/notebook-cell-toolbar.tsx b/packages/notebook/src/browser/view/notebook-cell-toolbar.tsx
@@ -65,7 +65,7 @@ export class NotebookCellToolbar extends NotebookCellActionBar {
 export class NotebookCellSidebar extends NotebookCellActionBar {
 
     override render(): React.ReactNode {
-        return <div className='theia-notebook-cell-sidebar'>
+        return <div className='theia-notebook-cell-sidebar-toolbar'>
             {this.state.inlineItems.filter(e => e.isVisible()).map(item => this.renderItem(item))}
         </div>;
     }

diff --git a/packages/notebook/src/browser/view/notebook-code-cell-view.tsx b/packages/notebook/src/browser/view/notebook-code-cell-view.tsx
@@ -66,10 +66,9 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     render(notebookModel: NotebookModel, cell: NotebookCellModel, handle: number): React.ReactNode {
         return <div>
             <div className='theia-notebook-cell-with-sidebar'>
-                <div>
+                <div className='theia-notebook-cell-sidebar'>
                     {this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU, notebookModel, cell)}
-                    {/* cell-execution-order needs an own component. Could be a little more complicated
-                    <p className='theia-notebook-code-cell-execution-order'>{`[${cell.exec ?? ' '}]`}</p> */}
+                    <CodeCellExecutionOrder cell={cell} />
                 </div>
                 <div className='theia-notebook-cell-editor-container'>
                     <CellEditor notebookModel={notebookModel} cell={cell}
@@ -269,3 +268,20 @@ export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputP
     }
 
 }
+
+interface NotebookCellExecutionOrderProps {
+    cell: NotebookCellModel;
+}
+
+function CodeCellExecutionOrder({ cell }: NotebookCellExecutionOrderProps): React.JSX.Element {
+    const [executionOrder, setExecutionOrder] = React.useState(cell.internalMetadata.executionOrder ?? ' ');
+
+    React.useEffect(() => {
+        const listener = cell.onDidChangeInternalMetadata(e => {
+            setExecutionOrder(cell.internalMetadata.executionOrder ?? ' ');
+        });
+        return () => listener.dispose();
+    }, []);
+
+    return <span className='theia-notebook-code-cell-execution-order'>{`[${executionOrder}]`}</span>;
+}