Link editor tab (#8)

Author: brichet

package.json

@@ -61,6 +61,11 @@
     "@jupyterlab/coreutils": "^6.0.0-beta.0",
     "@jupyterlab/mainmenu": "^4.0.0-beta.0",
     "@jupyterlab/services": "^7.0.0-beta.0",
+    "@jupyterlab/ui-components": "^4.0.0-beta.0",
+    "@lumino/algorithm": "^2.0.0",
+    "@lumino/coreutils": "^2.0.0",
+    "@lumino/signaling": "^2.0.0",
+    "@lumino/widgets": "^2.0.0",
     "gridstack": "^6.0.1"
   },
   "devDependencies": {

src/common/tabPanel.ts

@@ -2,6 +2,7 @@ import { LabIcon, classes, TabBarSvg } from '@jupyterlab/ui-components';
 import { Widget, TabBar, StackedPanel, BoxPanel, Title } from '@lumino/widgets';
 import { find, ArrayExt } from '@lumino/algorithm';
 import { Signal, ISignal } from '@lumino/signaling';
+
 export class HTabPanel extends BoxPanel {
   constructor(options: HTabPanel.IOptions) {
     const direction = options.tabBarPosition

src/controlPanel/data/dataPanel.ts

@@ -23,14 +23,6 @@ export class DataPanel extends SidePanel {
         onClick: () => console.log('clicked')
       })
     );
-    this.toolbar.addItem(
-      'Link data',
-      new ToolbarButton({
-        tooltip: 'Link Data',
-        label: 'Link Data',
-        onClick: () => console.log('clicked')
-      })
-    );
     const dataset = new DatasetsWidget({ model: this._model });
     this.addWidget(dataset);
 

src/controlPanel/layers/layerPanel.ts

@@ -14,14 +14,6 @@ export class LayerPanel extends SidePanel {
         onClick: () => console.log('clicked')
       })
     );
-    this.toolbar.addItem(
-      'Link data',
-      new ToolbarButton({
-        tooltip: 'Link Data',
-        label: 'Link Data',
-        onClick: () => console.log('clicked')
-      })
-    );
     this._model.tabsChanged.connect(() => {
       this.content.widgets.forEach(w => this.content.layout?.removeWidget(w));
 

src/linkPanel/linkPanel.ts

@@ -0,0 +1,50 @@
+import { JSONObject } from '@lumino/coreutils';
+import { BoxPanel } from '@lumino/widgets';
+
+import { IGlueSessionSharedModel } from '../types';
+
+/**
+ * The link editor widget.
+ */
+export class LinkWidget extends BoxPanel {
+  constructor(options: LinkWidget.IOptions) {
+    super({ direction: 'left-to-right' });
+    this._sharedModel = options.sharedModel;
+    this.addClass('glue-link-editor');
+    this.title.label = 'Link Data';
+    this.title.className = 'glue-LinkEditor-title';
+
+    this.node.innerText = 'Link editor widget';
+    this._sharedModel.changed.connect(this._onSharedModelChanged, this);
+  }
+
+  get sharedModel(): IGlueSessionSharedModel {
+    return this._sharedModel;
+  }
+
+  private _onSharedModelChanged() {
+    if (!this._sharedModel.contents.__main__) {
+      this.node.innerText = `Link editor widget for ${
+        this._sharedModel.state.path || '(no session)'
+      }\nNo data`;
+      return;
+    }
+
+    const dataCollection: string =
+      ((this._sharedModel.contents.__main__ as JSONObject).data as string) ||
+      '';
+    const dataNames: string[] = (
+      this._sharedModel.contents[dataCollection] as JSONObject
+    ).data as string[];
+    this.node.innerText = `Link editor widget for ${
+      this._sharedModel.state.path || '(no session)'
+    }\nExisting data: ${JSON.stringify(dataNames)}`;
+  }
+  private _sharedModel: IGlueSessionSharedModel;
+}
+
+namespace LinkWidget {
+  export interface IOptions extends BoxPanel.IOptions {
+    sharedModel: IGlueSessionSharedModel;
+  }
+}

src/viewPanel/sessionWidget.ts

@@ -4,6 +4,7 @@ import { HTabPanel } from '../common/tabPanel';
 import { IGlueSessionSharedModel } from '../types';
 import { TabView } from './tabView';
 import { TabModel } from './tabModel';
+import { LinkWidget } from '../linkPanel/linkPanel';
 
 export class SessionWidget extends BoxPanel {
   constructor(options: SessionWidget.IOptions) {
@@ -18,7 +19,11 @@ export class SessionWidget extends BoxPanel {
         addButtonEnabled: true
       }
     });
-    this._tabPanel.activateTab(0);
+
+    if (this._model) {
+      this._linkWidget = new LinkWidget({ sharedModel: this._model });
+      this._tabPanel.addTab(this._linkWidget, 0);
+    }
 
     this.addWidget(this._tabPanel);
     BoxPanel.setStretch(this._tabPanel, 1);
@@ -34,10 +39,12 @@ export class SessionWidget extends BoxPanel {
       });
       const tabWidget = new TabView({ model });
 
-      this._tabPanel.addTab(tabWidget, idx);
+      this._tabPanel.addTab(tabWidget, idx + 1);
     });
+    this._tabPanel.activateTab(1);
   }
   private _tabPanel: HTabPanel;
+  private _linkWidget: LinkWidget | undefined = undefined;
   private _model: IGlueSessionSharedModel;
   private _rendermime: IRenderMimeRegistry;
 }

style/base.css

@@ -63,6 +63,15 @@
   margin-left: 0;
 }
 
+.glue-Session-tabBar .lm-TabBar-tab.glue-LinkEditor-title {
+  flex: none;
+  background-color: var(--jp-brand-color1);
+}
+
+.glue-Session-tabBar .lm-TabBar-tab.lm-mod-current.glue-LinkEditor-title {
+  background: var(--jp-brand-color2);
+}
+
 .glue-Session-gridhost {
   background: var(--jp-layout-color3);
   background-image: unset !important;

yarn.lock

@@ -5816,6 +5816,11 @@ __metadata:
     "@jupyterlab/mainmenu": ^4.0.0-beta.0
     "@jupyterlab/services": ^7.0.0-beta.0
     "@jupyterlab/testutils": ^4.0.0-beta.0
+    "@jupyterlab/ui-components": ^4.0.0-beta.0
+    "@lumino/algorithm": ^2.0.0
+    "@lumino/coreutils": ^2.0.0
+    "@lumino/signaling": ^2.0.0
+    "@lumino/widgets": ^2.0.0
     "@types/jest": ^29.2.0
     "@typescript-eslint/eslint-plugin": ^4.8.1
     "@typescript-eslint/parser": ^4.8.1