UX updates from Nov 6 meeting

src/FssFilesysItem.ts

@@ -1,6 +1,11 @@
 // Element for displaying a single fsspec filesystem
 
 import { FssContextMenu } from './treeContext';
+// import { Logger } from "./logger"
+
+const HOVER = 'var(--jp-layout-color3)';
+const UNHOVER = 'var(--jp-layout-color2)';
+const SELECTED = 'var(--jp-layout-color4)';
 
 class FssFilesysItem {
     root: HTMLElement;
@@ -10,7 +15,9 @@ class FssFilesysItem {
     fsInfo: any;
     clickSlots: any;
     nameField: any;
-    typeField: any;
+    pathField: any;
+    _selected = false;
+    _hovered = false;
 
     constructor(model: any, fsInfo: any, userClickSlots: any) {
       this.model = model;
@@ -27,6 +34,7 @@ class FssFilesysItem {
       fsItem.classList.add('jfss-fsitem-root');
       fsItem.addEventListener('mouseenter', this.handleFsysHover.bind(this));
       fsItem.addEventListener('mouseleave', this.handleFsysHover.bind(this));
+      fsItem.dataset.fssname = fsInfo.name;
       this.root = fsItem;
 
       // Set the tooltip
@@ -37,10 +45,10 @@ class FssFilesysItem {
       this.nameField.innerText = this.filesysName;
       fsItem.appendChild(this.nameField);
 
-      this.typeField = document.createElement('div');
-      this.typeField.classList.add('jfss-fsitem-type');
-      this.typeField.innerText = 'Type: ' + this.filesysType;
-      fsItem.appendChild(this.typeField);
+      this.pathField = document.createElement('div');
+      this.pathField.classList.add('jfss-fsitem-type');
+      this.pathField.innerText = 'Path: ' + fsInfo.path;
+      fsItem.appendChild(this.pathField);
 
       fsItem.addEventListener('click', this.handleClick.bind(this));
       fsItem.addEventListener('contextmenu', this.handleContext.bind(this));
@@ -93,18 +101,42 @@ class FssFilesysItem {
       this.root.dataset.fss = value;
     }
 
+    set selected(value: boolean) {
+      this._selected = value;
+      if (value) {
+        this.root.style.backgroundColor = SELECTED;
+      }
+      else {
+        this.hovered = this._hovered;
+      }
+    }
+
+    set hovered(state: boolean) {
+      this._hovered = state;
+      if (this._selected) {
+        this.root.style.backgroundColor = SELECTED;
+      }
+      else {
+        if (state) {
+          this.root.style.backgroundColor = HOVER;
+        }
+        else {
+          this.root.style.backgroundColor = UNHOVER;
+        }
+      }
+    }
+
     handleFsysHover(event: any) {
       if (event.type == 'mouseenter') {
-        this.root.style.backgroundColor = 'var(--jp-layout-color3)';
-        this.root.style.backgroundColor = 'var(--jp-layout-color3)';
+        this.hovered = true;
       }
       else {
-        this.root.style.backgroundColor = 'var(--jp-layout-color2)';
-        this.root.style.backgroundColor = 'var(--jp-layout-color2)';
+        this.hovered = false;
       }
     }
 
     handleClick(_event: any) {
+      this.selected = true;
       for (const slot of this.clickSlots) {
         slot(this.fsInfo);
       }

src/index.ts

@@ -43,7 +43,8 @@ class FsspecWidget extends Widget {
   detailName: any;
   detailPath: any;
   treeView: any;
-  elementHeap: any = {};
+  elementHeap: any = {};  // Holds FssTreeItem's keyed by path
+  sourcesHeap: any = {};  // Holds FssFilesysItem's keyed by name
   filesysContainer: any;
   dirTree: any = {};
 
@@ -96,10 +97,10 @@ class FsspecWidget extends Widget {
     let lowerArea = document.createElement('div');
     lowerArea.classList.add('jfss-lowerarea');
 
-    let browserAreaLabel = document.createElement('div');
-    browserAreaLabel.classList.add('jfss-browseAreaLabel');
-    browserAreaLabel.innerText = 'Browse Filesystem';
-    lowerArea.appendChild(browserAreaLabel);
+    // let browserAreaLabel = document.createElement('div');
+    // browserAreaLabel.classList.add('jfss-browseAreaLabel');
+    // browserAreaLabel.innerText = 'Browse Filesystem';
+    // lowerArea.appendChild(browserAreaLabel);
 
     this.selectedFsLabel = document.createElement('div');
     this.selectedFsLabel.classList.add('jfss-selectedFsLabel');
@@ -122,6 +123,7 @@ class FsspecWidget extends Widget {
   }
 
   async fetchConfig() {
+    this.selectedFsLabel.innerText = '<Select a filesystem>';
     await this.model.refreshConfig();
     Logger.debug(`[FSSpec] Refresh config:\n${JSON.stringify(this.model.userFilesystems)}`);
     this.populateFilesystems();
@@ -130,6 +132,7 @@ class FsspecWidget extends Widget {
   populateFilesystems() {
     Logger.debug(`[FSSpec] Populate filesystems: \n${JSON.stringify(this.model.userFilesystems)}`);
 
+    this.sourcesHeap = {};
     this.filesysContainer.replaceChildren();
     this.treeView.replaceChildren();
     this.elementHeap = {};
@@ -141,11 +144,30 @@ class FsspecWidget extends Widget {
 
   addFilesystemItem(fsInfo: any) {
     let fsItem = new FssFilesysItem(this.model, fsInfo, [this.handleFilesystemClicked.bind(this)]);
+    this.sourcesHeap[fsInfo.name] = fsItem;
     fsItem.setMetadata(fsInfo.path);
     this.filesysContainer.appendChild(fsItem.root);
   }
 
   async handleFilesystemClicked(fsInfo: any) {
+    for (let fsElem of this.filesysContainer.children) {
+      // Set clicked FS to selected state (+colorize), deselect others
+      if (!(fsElem.dataset.fssname in this.sourcesHeap)) {
+        // This should never happen
+        Logger.error('Error selecting filesystem');
+        break;
+      }
+
+      let wrapper = this.sourcesHeap[fsElem.dataset.fssname];
+
+      if (fsElem.dataset.fssname == fsInfo.name) {
+        wrapper.selected = true;
+      }
+      else {
+        wrapper.selected = false;
+      }
+    }
+
     this.model.setActiveFilesystem(fsInfo.name);
     await this.fetchAndDisplayFileInfo(fsInfo.name);
   }
@@ -294,7 +316,7 @@ class FsspecWidget extends Widget {
       Logger.error(`Error fetching files for filesystem ${fsname}`);  // TODO jupyter info print
       return;
     }
-    const pathInfos = response['content'];
+    const pathInfos = response['content'].sort((a: any, b: any) => {return a.name.localeCompare(b.name)});
 
     // Update current filesystem display labels
     this.selectedFsLabel.innerText = `${fsname}`;

style/base.css

@@ -169,10 +169,11 @@
   /* box-sizing: border-box; */
 
   display: flex;
+  overflow: hidden;
   flex-direction: column;
   align-items: flex-start;
 
-  flex: 1 0 2.25rem;
+  flex: 1 0 1.75rem;
   /* font-weight: bold; */
 
   margin: 0 .5rem .5rem 0;
@@ -209,7 +210,7 @@
 
   align-self: flex-start;
 
-  height: 1.25rem;
+  /* height: 1.25rem; */
 
   /* padding: .25rem; */
   /* border-radius: 2px; */
@@ -221,7 +222,7 @@
 .jfss-fsitem-name {
   box-sizing: border-box;
 
-  height: 1.25rem;
+  /* height: 1rem; */
 
   border-radius: 2px;