From 89d7bc0876019defa0907a9f61000692284480a8 Mon Sep 17 00:00:00 2001
From: Eric Gentry <ericsnekbytes@gmail.com>
Date: Fri, 8 Nov 2024 13:27:31 -0500
Subject: [PATCH 1/2] Added selection indicator to sources list, UI tweaks.

---
 src/FssFilesysItem.ts | 50 +++++++++++++++++++++++++++++++++++--------
 src/index.ts          | 32 ++++++++++++++++++++++-----
 style/base.css        |  7 +++---
 3 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/src/FssFilesysItem.ts b/src/FssFilesysItem.ts
index aacd56d..c791a7b 100644
--- a/src/FssFilesysItem.ts
+++ b/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;
@@ -9,7 +14,9 @@ class FssFilesysItem {
     fsInfo: any;
     clickSlots: any;
     nameField: any;
-    typeField: any;
+    pathField: any;
+    _selected = false;
+    _hovered = false;
 
     constructor(fsInfo: any, userClickSlots: any) {
       this.filesysName = fsInfo.name;
@@ -25,6 +32,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
@@ -35,10 +43,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));
@@ -91,18 +99,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);
       }
diff --git a/src/index.ts b/src/index.ts
index 9d9607a..7684356 100644
--- a/src/index.ts
+++ b/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(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);
   }
diff --git a/style/base.css b/style/base.css
index d35cbc7..7b4055b 100644
--- a/style/base.css
+++ b/style/base.css
@@ -164,10 +164,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;
@@ -204,7 +205,7 @@
 
   align-self: flex-start;
 
-  height: 1.25rem;
+  /* height: 1.25rem; */
 
   /* padding: .25rem; */
   /* border-radius: 2px; */
@@ -216,7 +217,7 @@
 .jfss-fsitem-name {
   box-sizing: border-box;
 
-  height: 1.25rem;
+  /* height: 1rem; */
 
   border-radius: 2px;
 

From 3e561e9c8fc7b46347fe2ac916805962576ef7fb Mon Sep 17 00:00:00 2001
From: Eric Gentry <ericsnekbytes@gmail.com>
Date: Fri, 8 Nov 2024 15:59:21 -0500
Subject: [PATCH 2/2] Sorted listed files.

---
 src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index 7684356..78dc1ac 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -316,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}`;