Added size label.

src/FssTreeItem.ts

@@ -11,6 +11,7 @@ export class FssTreeItem {
     model: any;
     // icon: HTMLElement;
     nameLbl: HTMLElement;
+    sizeLbl: HTMLElement;
     dirSymbol: HTMLElement;
     container: HTMLElement;
     clickSlots: any;
@@ -60,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);
@@ -74,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) {
@@ -89,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});

src/index.ts

@@ -257,7 +257,7 @@ class FsspecWidget extends Widget {
         }
         for (let [pathSegment, pathInfo] of Object.entries(childPaths)) {
           let item = new FssTreeItem(this.model, [this.lazyLoad.bind(this)], true, true);
-          item.setMetadata((pathInfo as any).path);
+          item.setMetadata((pathInfo as any).path, (pathInfo as any).metadata.size);
           item.setText(pathSegment);
           // (pathInfo as any).ui = item;
           elemParent.appendChild(item.root);

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;