From 70e416397cb0b6d668efaf7ebd9f53ebe22c6d6a Mon Sep 17 00:00:00 2001
From: Eric Gentry <ericsnekbytes@gmail.com>
Date: Thu, 7 Nov 2024 16:19:09 -0500
Subject: [PATCH] Added size label.

---
 src/FssTreeItem.ts | 22 ++++++++++++++++++++--
 src/index.ts       |  2 +-
 style/base.css     |  5 +++++
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/FssTreeItem.ts b/src/FssTreeItem.ts
index 9d07087..94eee37 100644
--- a/src/FssTreeItem.ts
+++ b/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});
diff --git a/src/index.ts b/src/index.ts
index 9e56b74..7242042 100644
--- a/src/index.ts
+++ b/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);
diff --git a/style/base.css b/style/base.css
index d35cbc7..082420c 100644
--- a/style/base.css
+++ b/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;