diff --git a/src/FssFilesysItem.ts b/src/FssFilesysItem.ts index aacd56d..d6576c4 100644 --- a/src/FssFilesysItem.ts +++ b/src/FssFilesysItem.ts @@ -4,6 +4,7 @@ import { FssContextMenu } from './treeContext'; class FssFilesysItem { root: HTMLElement; + model: any; filesysName: string; filesysType: string; fsInfo: any; @@ -11,7 +12,8 @@ class FssFilesysItem { 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); diff --git a/src/FssTreeItem.ts b/src/FssTreeItem.ts index 241463f..94eee37 100644 --- a/src/FssTreeItem.ts +++ b/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); diff --git a/src/index.ts b/src/index.ts index 9d9607a..7242042 100644 --- a/src/index.ts +++ b/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); diff --git a/src/treeContext.ts b/src/treeContext.ts index dbad6df..b9633fc 100644 --- a/src/treeContext.ts +++ b/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(); + }, + ); + } } } 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;