Ux updates2

src/FssFilesysItem.ts

@@ -4,14 +4,16 @@ import { FssContextMenu } from './treeContext';
 
 class FssFilesysItem {
     root: HTMLElement;
+    model: any;
     filesysName: string;
     filesysType: string;
     fsInfo: any;
     clickSlots: any;
     nameField: any;
     typeField: any;
 
-    constructor(fsInfo: any, userClickSlots: any) {
+    constructor(model: any, fsInfo: any, userClickSlots: any) {
+      this.model = model;
       this.filesysName = fsInfo.name;
       this.filesysType = fsInfo.type;
       this.fsInfo = fsInfo;
@@ -57,7 +59,7 @@ class FssFilesysItem {
         }
 
         // Make/add the context menu
-        let context = new FssContextMenu();
+        let context = new FssContextMenu(this.model);
         context.root.dataset.fss = this.root.dataset.fss;
         let body = document.getElementsByTagName('body')[0];
         body.appendChild(context.root);

src/FssTreeItem.ts

@@ -8,8 +8,10 @@ import { Logger } from "./logger"
 
 export class FssTreeItem {
     root: any;
+    model: any;
     // icon: HTMLElement;
     nameLbl: HTMLElement;
+    sizeLbl: HTMLElement;
     dirSymbol: HTMLElement;
     container: HTMLElement;
     clickSlots: any;
@@ -19,11 +21,12 @@ export class FssTreeItem {
     lazyLoadAutoExpand = true;
     clickAnywhereDoesAutoExpand = true;
 
-    constructor(clickSlots: any, autoExpand: boolean, expandOnClickAnywhere: boolean) {
+    constructor(model: any, clickSlots: any, autoExpand: boolean, expandOnClickAnywhere: boolean) {
         // The TreeItem component is the root and handles
         // tree structure functionality in the UI
         let root = new TreeItem();
         this.root = root;
+        this.model = model;
         this.clickSlots = clickSlots;
         this.lazyLoadAutoExpand = autoExpand;
         this.clickAnywhereDoesAutoExpand = expandOnClickAnywhere;
@@ -58,6 +61,12 @@ export class FssTreeItem {
         container.appendChild(nameLbl);
         this.nameLbl = nameLbl;
 
+        // Show the name of this file/folder (a single path segment)
+        let sizeLbl = document.createElement('div');
+        sizeLbl.classList.add('jfss-filesize-lbl');
+        container.appendChild(sizeLbl);
+        this.sizeLbl = sizeLbl;
+
         // Add click and right click handlers to the tree component
         root.addEventListener('contextmenu', this.handleContext.bind(this));
         root.addEventListener('click', this.handleClick.bind(this), true);
@@ -72,8 +81,18 @@ export class FssTreeItem {
         this.root.appendChild(elem);
     }
 
-    setMetadata(value: string) {
-        this.root.dataset.fss = value;
+    setMetadata(user_path: string, size: string) {
+        this.root.dataset.fss = user_path;
+        this.root.dataset.fsize = size;
+
+        let sizeDisplay = `(${size.toLocaleString()})`;
+        // if (parseInt(size) > 100) {
+        //     const sizeFormat = new Intl.NumberFormat(undefined, {
+        //         notation: 'scientific',
+        //     });
+        //     sizeDisplay = `(${sizeFormat.format(parseInt(size))})`;
+        // }
+        this.sizeLbl.innerText = sizeDisplay;
     }
 
     setText(value: string) {
@@ -87,6 +106,7 @@ export class FssTreeItem {
         if (symbol == 'dir') {
             folderIcon.element({container: this.dirSymbol});
             this.isDir = true;
+            this.sizeLbl.style.display = 'none';
         }
         if (symbol == 'file') {
             fileIcon.element({container: this.dirSymbol});
@@ -170,7 +190,7 @@ export class FssTreeItem {
         }
 
         // Make/add the context menu
-        let context = new FssContextMenu();
+        let context = new FssContextMenu(this.model);
         context.root.dataset.fss = this.root.dataset.fss;
         let body = document.getElementsByTagName('body')[0];
         body.appendChild(context.root);

src/index.ts

@@ -140,7 +140,7 @@ class FsspecWidget extends Widget {
   }
 
   addFilesystemItem(fsInfo: any) {
-    let fsItem = new FssFilesysItem(fsInfo, [this.handleFilesystemClicked.bind(this)]);
+    let fsItem = new FssFilesysItem(this.model, fsInfo, [this.handleFilesystemClicked.bind(this)]);
     fsItem.setMetadata(fsInfo.path);
     this.filesysContainer.appendChild(fsItem.root);
   }
@@ -192,7 +192,7 @@ class FsspecWidget extends Widget {
       Logger.error(`Error fetching files for path ${source_path}`);  // TODO jupyter info print
       return;
     }
-    // Logger.debug(`Response: (${JSON.stringify(response)})`);
+    Logger.debug(`Response: (${JSON.stringify(response)})`);
 
     // Get the dir tree node for this path (updates go into this subtree)
     let nodeForPath = this.getNodeForPath(source_path);
@@ -256,8 +256,8 @@ class FsspecWidget extends Widget {
           // TODO: Create a placeholder child item for this dir
         }
         for (let [pathSegment, pathInfo] of Object.entries(childPaths)) {
-          let item = new FssTreeItem([this.lazyLoad.bind(this)], true, true);
-          item.setMetadata((pathInfo as any).path);
+          let item = new FssTreeItem(this.model, [this.lazyLoad.bind(this)], true, true);
+          item.setMetadata((pathInfo as any).path, (pathInfo as any).metadata.size);
           item.setText(pathSegment);
           // (pathInfo as any).ui = item;
           elemParent.appendChild(item.root);

src/treeContext.ts

@@ -3,11 +3,13 @@
 export class FssContextMenu {
     root: any;
     clicked = false;
+    model: any;
 
-    constructor() {
+    constructor(model: any) {
         let root = document.createElement('div');
         root.classList.add('jfss-tree-context-menu');
         this.root = root;
+        this.model = model;
 
         let menuItem = document.createElement('div');
         menuItem.classList.add('jfss-tree-context-item');
@@ -23,16 +25,24 @@ export class FssContextMenu {
 
     handleItemClick(event: any) {  // TODO multiple menu it
         if (event.target.dataset.fssContextType == 'copyPath') {
-            navigator.clipboard.writeText(this.root.dataset.fss).then(
-                () => {  // Success
-                    console.log('Copy path: ' + this.root.dataset.fss);
-                    this.root.remove();
-                },
-                () => {
-                    console.log('Copy path failed: ' + this.root.dataset.fss);
-                    this.root.remove();
-                },
-            );
+            let info = this.model.getActiveFilesystemInfo();
+            let protocol = info?.canonical_path.slice(
+                0,
+                info.canonical_path.length - info.path.length,
+            )
+            if (protocol) {
+                let canonical = protocol + '/' + this.root.dataset.fss.replace(/^\/+/, () => '');
+                navigator.clipboard.writeText(canonical).then(
+                    () => {  // Success
+                        console.log('Copy path: ' + canonical);
+                        this.root.remove();
+                    },
+                    () => {
+                        console.log('Copy path failed: ' + canonical);
+                        this.root.remove();
+                    },
+                );
+            }
         }
     }
 

style/base.css

@@ -111,6 +111,11 @@
   display: flex;
 }
 
+.jfss-filesize-lbl {
+  margin-left: .5rem;
+  color: var(--jp-ui-font-color3)
+}
+
 .jfss-hseparator {
   box-sizing: border-box;