Skip to content

Commit

Permalink
Merge pull request #5 from ericsnekbytes/ux_updates2
Browse files Browse the repository at this point in the history 
Ux updates2
  • Loading branch information
@ericsnekbytes
ericsnekbytes authored Nov 8, 2024
2 parents 2b8be75 + 70e4163 commit 13dc494
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 21 deletions.
6 changes: 4 additions & 2 deletions src/FssFilesysItem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down
28 changes: 24 additions & 4 deletions src/FssTreeItem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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) {
Expand All @@ -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});
Expand Down Expand Up @@ -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);
Expand Down
8 changes: 4 additions & 4 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
32 changes: 21 additions & 11 deletions src/treeContext.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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();
},
);
}
}
}

Expand Down
5 changes: 5 additions & 0 deletions style/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,11 @@
display: flex;
}

.jfss-filesize-lbl {
margin-left: .5rem;
color: var(--jp-ui-font-color3)
}

.jfss-hseparator {
box-sizing: border-box;

Expand Down

0 comments on commit 13dc494

Please sign in to comment.