Merge branch 'UI2' of https://github.com/ebolam/KoboldAI into UI2

aiserver.py

@@ -7291,34 +7291,47 @@ def UI_2_load_model(data):
 def UI_2_load_story_list(data):
     file_popup("Select Story to Load", "./stories", "load_story", upload=True, jailed=True, folder_only=False, renameable=True, 
                                                                   deleteable=True, show_breadcrumbs=True, item_check=valid_story,
-                                                                  valid_only=True, hide_extention=True, extra_parameter_function=get_story_length,
+                                                                  valid_only=True, hide_extention=True, extra_parameter_function=get_story_listing_data,
-                                                                  column_names=['Story Name', 'Action Count'], show_filename=False,
+                                                                  column_names=['Story Name', 'Action Count', 'Last Loaded'], show_filename=False,
-                                                                  column_widths=['auto', '100px'], advanced_sort=story_sort,
+                                                                  column_widths=['auto', '150px', '150px'], advanced_sort=story_sort,
                                                                   sort="Modified", desc=True)
                                                                   
-def get_story_length(item_full_path, item, valid_selection):
+def get_story_listing_data(item_full_path, item, valid_selection):
+    title = ""
+    action_count = -1
+    last_loaded = ""
+
     if not valid_selection:
-        return ["", ""]
+        return [title, action_count, last_loaded]
+
     with open(item_full_path, "r") as f:
         js = json.load(f)
-        title = js['story_name'] if 'story_name' in js else ".".join(item.split(".")[:-1])
+
-        if 'file_version' not in js:
+    title = js['story_name'] if 'story_name' in js else ".".join(item.split(".")[:-1])
-            return [title, len(js['actions'])]
+    action_count = len(js["actions"])
-        if js['file_version'] == 1:
+
-            return [title, len(js['actions'])]
+    if title in koboldai_vars._system_settings.story_loads:
-        return [title, 0 if js['actions']['action_count'] == -1 else js['actions']['action_count'] ]
+        # UNIX Timestamp
+        last_loaded = int(time.mktime(time.strptime(koboldai_vars._system_settings.story_loads[title], "%m/%d/%Y, %H:%M:%S")))
+
+    if js.get("file_version", 1) == 1:
+        return [title, action_count, last_loaded]
+
+    action_count = 0 if js['actions']['action_count'] == -1 else js['actions']['action_count']
+
+    return [title, action_count, last_loaded]
     
 
 def valid_story(file):
-        if file.endswith(".json"):
+    if file.endswith(".json"):
-            with open(file, "r") as f:
+        with open(file, "r") as f:
-                try:
+            try:
-                    js = json.load(f)
+                js = json.load(f)
-                except:
+            except:
-                    pass
+                pass
-                    return False
+                return False
 
-                return 'actions' in js
+            return 'actions' in js
 
 def story_sort(base_path, desc=False):
     files = {}

static/koboldai.css

@@ -907,8 +907,8 @@ td.server_vars {
 	overflow: hidden;
 	display: block;
 	width: 100%;
-	padding-left: 20px;
+	padding-left: 15px;
-	padding-right: 35px;
+	padding-right: 15px;
 	margin-bottom: 10px;
 	flex-shrink: 0;
 	cursor: pointer;
@@ -1564,6 +1564,21 @@ body {
 	display: inline;
 }
 
+.table-header-container {
+	display: flex;
+	justify-content: space-between;
+	cursor: pointer;
+}
+
+.table-header-sort-icon {
+	margin-right: 10px;
+	margin-top: 2px;
+}
+
+.table-header-label {
+	margin-top: 4px;
+}
+
 #error_message.popup {
 	background-color: var(--error);
 	color: var(--error_text);
@@ -2047,6 +2062,7 @@ h2 .material-icons-outlined {
 .section_header,
 .help_text,
 .sample_order,
+.table-header-label,
 .noselect {
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;

static/koboldai.js

@@ -33,6 +33,9 @@ var ai_busy_start = Date.now();
 var popup_deleteable = false;
 var popup_editable = false;
 var popup_renameable = false;
+var popup_rows = [];
+var popup_style = "";
+var popup_sort = {};
 var shift_down = false;
 var world_info_data = {};
 var world_info_folder_data = {};
@@ -58,6 +61,7 @@ const finder_actions = [
 	// {name: "", icon: "palette", func: function() { highlightEl("#biasing") }},
 ];
 
+
 const map1 = new Map()
 map1.set('Top K Sampling', 0)
 map1.set('Top A Sampling', 1)
@@ -664,8 +668,238 @@ function load_popup(data) {
 					  
 }
 
+function redrawPopup() {
+	// This is its own function as it's used to show newly-sorted rows as well.
+
+	// Clear old items, not anything else
+	$(".item").remove();
+
+	// Create lines
+	for (const row of popup_rows) {
+		let tr = document.createElement("div");
+		tr.classList.add("item");
+		tr.setAttribute("folder", row.isFolder);
+		tr.setAttribute("valid", row.isValid);
+		tr.style = popup_style;
+
+		let icon_area = document.createElement("span");
+		icon_area.style = "grid-area: icons;";
+		
+		// Create the folder icon
+		let folder_icon = document.createElement("span");
+		folder_icon.classList.add("folder_icon");
+		if (row.isFolder) {
+			folder_icon.classList.add("oi");
+			folder_icon.setAttribute('data-glyph', "folder");
+		}
+		icon_area.append(folder_icon);
+		
+		// Create the edit icon
+		let edit_icon = document.createElement("span");
+		edit_icon.classList.add("edit_icon");
+		if (popup_editable && !row.isValid) {
+			edit_icon.classList.add("oi");
+			edit_icon.setAttribute('data-glyph', "spreadsheet");
+			edit_icon.title = "Edit"
+			edit_icon.id = row.path;
+			edit_icon.onclick = function () {
+				socket.emit("popup_edit", this.id);
+			};
+		}
+		icon_area.append(edit_icon);
+		
+		// Create the rename icon
+		let rename_icon = document.createElement("span");
+		rename_icon.classList.add("rename_icon");
+		if (popup_renameable && !row.isFolder) {
+			rename_icon.classList.add("oi");
+			rename_icon.setAttribute('data-glyph', "pencil");
+			rename_icon.title = "Rename"
+			rename_icon.id = row.path;
+			rename_icon.setAttribute("filename", row.fileName);
+			rename_icon.onclick = function () {
+				let new_name = prompt("Please enter new filename for \n"+ this.getAttribute("filename"));
+				if (new_name != null) {
+					socket.emit("popup_rename", {"file": this.id, "new_name": new_name});
+				}
+			};
+		}
+		icon_area.append(rename_icon);
+		
+		// Create the delete icon
+		let delete_icon = document.createElement("span");
+		delete_icon.classList.add("delete_icon");
+		if (popup_deleteable) {
+			delete_icon.classList.add("oi");
+			delete_icon.setAttribute('data-glyph', "x");
+			delete_icon.title = "Delete"
+			delete_icon.id = row.path;
+			delete_icon.setAttribute("folder", row.isFolder);
+			delete_icon.onclick = function () {
+				if (this.getAttribute("folder") == "true") {
+					if (window.confirm("Do you really want to delete this folder and ALL files under it?")) {
+						socket.emit("popup_delete", this.id);
+					}
+				} else {
+					if (window.confirm("Do you really want to delete this file?")) {
+						socket.emit("popup_delete", this.id);
+					}
+				}
+			};
+		}
+		icon_area.append(delete_icon);
+		tr.append(icon_area);
+		
+		//create the actual item
+		let gridIndex = 0;
+		if (row.showFilename) {
+			let popup_item = document.createElement("span");
+			popup_item.style = `grid-area: p${gridIndex};`;
+			gridIndex += 1;
+
+			popup_item.id = row.path;
+			popup_item.setAttribute("folder", row.isFolder);
+			popup_item.setAttribute("valid", row.isValid);
+			popup_item.textContent = row.fileName;
+			popup_item.onclick = function () {
+				let accept = document.getElementById("popup_accept");
+
+				if (this.getAttribute("valid") == "true") {
+					accept.classList.remove("disabled");
+					accept.disabled = false;
+					accept.setAttribute("selected_value", this.id);
+				} else {
+					accept.setAttribute("selected_value", "");
+					accept.classList.add("disabled");
+					accept.disabled = true;
+					if (this.getAttribute("folder") == "true") {
+						socket.emit("popup_change_folder", this.id);
+					}
+				}
+
+				let popup_list = document.getElementById('popup_list').getElementsByClassName("selected");
+				for (const item of popup_list) {
+					item.classList.remove("selected");
+				}
+				this.parentElement.classList.add("selected");
+			};
+			tr.append(popup_item);
+		}
+		
+		let dataIndex = -1;
+		for (const columnName of Object.keys(row.data)) {
+			const dataValue = row.data[columnName];
+
+			let td = document.createElement("span");
+			td.style = `grid-area: p${gridIndex};`;
+
+			gridIndex += 1;
+			dataIndex++;
+
+			td.id = row.path;
+			td.setAttribute("folder", row.isFolder);
+			td.setAttribute("valid", row.isValid);
+
+			if (columnName === "Last Loaded") {
+				let timestamp = parseInt(dataValue);
+
+				if (timestamp) {
+					// Date expects unix timestamps to be in milligilliaseconds or something
+					const date = new Date(timestamp * 1000)
+					td.textContent = date.toLocaleString();
+				}
+			} else {
+				td.textContent = dataValue;
+			}
+
+			td.onclick = function () {
+				let accept = document.getElementById("popup_accept");
+				if (this.getAttribute("valid") == "true") {
+					accept.classList.remove("disabled");
+					accept.disabled = false;
+					accept.setAttribute("selected_value", this.id);
+				} else {
+					accept.setAttribute("selected_value", "");
+					accept.classList.add("disabled");
+					accept.disabled = true;
+					if (this.getAttribute("folder") == "true") {
+						socket.emit("popup_change_folder", this.id);
+					}
+				}
+
+				let popup_list = document.getElementById('popup_list').getElementsByClassName("selected");
+				for (item of popup_list) {
+					item.classList.remove("selected");
+				}
+				this.parentElement.classList.add("selected");
+			};
+			tr.append(td);
+		}
+
+		popup_list.append(tr);
+	}
+}
+
+function sortPopup(key) {
+	// Nullify the others
+	for (const sKey of Object.keys(popup_sort)) {
+		if (sKey === key) continue;
+		popup_sort[sKey] = null;
+
+		document.getElementById(`sort-icon-${sKey.toLowerCase().replaceAll(" ", "-")}`).innerText = "filter_list";
+	}
+
+	// True is asc, false is asc
+	let sortState = !popup_sort[key];
+
+	popup_sort[key] = sortState;
+
+	popup_rows.sort(function(x, y) {
+		let xDat = x.data[key];
+		let yDat = y.data[key];
+
+		if (typeof xDat == "string" && typeof yDat == "string") return xDat.toLowerCase().localeCompare(yDat.toLowerCase());
+
+		if (xDat < yDat) return -1;
+		if (xDat > yDat) return 1;
+		return 0;
+	});
+	if (sortState) popup_rows.reverse();
+	
+	// Change icons
+	let icon = document.getElementById(`sort-icon-${key.toLowerCase().replaceAll(" ", "-")}`);
+	icon.innerText = sortState ? "arrow_drop_up" : "arrow_drop_down";
+
+	redrawPopup();
+}
+
 function popup_items(data) {
-	console.log(data);
+	// The data as we recieve it is not very fit for sorting, let's do some cleaning.
+	popup_rows = [];
+	popup_sort = {};
+
+	for (const name of data.column_names) {
+		popup_sort[name] = null;
+	}
+
+	for (const item of data.items) {
+		let itemData = item[4];
+		let dataRow = {data: {}};
+
+		for (const i in data.column_names) {
+			dataRow.data[data.column_names[i]] = itemData[i];
+		}
+
+		dataRow.isFolder = item[0];
+		dataRow.path = item[1];
+		dataRow.fileName = item[2];
+		dataRow.isValid = item[3];
+		dataRow.showFilename = item.show_filename;
+
+		popup_rows.push(dataRow);
+	}
+
+
 	var popup_list = document.getElementById('popup_list');
 	//first, let's clear out our existing data
 	while (popup_list.firstChild) {
@@ -674,22 +908,24 @@ function popup_items(data) {
 	document.getElementById('popup_upload_input').value = "";
 	
 	//create the column widths
-	var style = /*width: 50vw;*/'display: grid; grid-template-areas: "icons';
+	popup_style = 'display: grid; grid-template-areas: "icons';
-	for (i=0; i < data.column_widths.length; i++) {
+	for (let i=0; i < data.column_widths.length; i++) {
-		style = style + " p"+i;
+		popup_style += ` p${i}`;
 	}
+
 	if (data.show_filename) {
-		style = style + " p"+i;
+		popup_style += ` p${i}`;
 	}
-	style = style + '"; grid-template-columns: 50px';
+
-	for (column_width of data.column_widths) {
+	popup_style += '"; grid-template-columns: 50px';
-		style = style + " "+column_width;
+	for (const column_width of data.column_widths) {
+		popup_style += " "+column_width;
 	}
-	style = style + ';';
+	popup_style += ';';
 	
 	//create titles
 	var tr = document.createElement("div");
-	tr.style = style;
+	tr.style = popup_style;
 	//icon area
 	var td = document.createElement("span");
 	td.style = "grid-area: icons;";
@@ -704,160 +940,41 @@ function popup_items(data) {
 		i+=1;
 		tr.append(td)
 	}
-	for (column of data.column_names) {
+
-		td = document.createElement("span");
+	for (const columnName of data.column_names) {
-		td.textContent = column;
+		const container = document.createElement("div");
-		td.style = "grid-area: p"+i+";";
+		const td = document.createElement("span");
-		i+=1;
+		const icon = document.createElement("span");
-		tr.append(td)
+
+		container.addEventListener("click", function(c) {
+			return (function() {
+				sortPopup(c);
+			});
+		}(columnName));
+		container.classList.add("table-header-container")
+		container.style = `grid-area: p${i};`;
+
+		td.classList.add("table-header-label");
+		td.textContent = columnName;
+
+		// TODO: Better unsorted icon
+		icon.id = `sort-icon-${columnName.toLowerCase().replaceAll(" ", "-")}`;
+		icon.innerText = "filter_list";
+		icon.classList.add("material-icons-outlined");
+		icon.classList.add("table-header-sort-icon");
+
+
+		container.appendChild(document.createElement("spacer-dummy"));
+		container.appendChild(td);
+		container.appendChild(icon);
+
+		tr.append(container);
+
+		i++;
 	}
 	popup_list.append(tr);
 	
-	//create lines
+	redrawPopup();
-	for (item of data.items) {
-		var tr = document.createElement("div");
-		tr.classList.add("item");
-		tr.setAttribute("folder", item[0]);
-		tr.setAttribute("valid", item[3]);
-		tr.style = style;
-		var icon_area = document.createElement("span");
-		icon_area.style = "grid-area: icons;";
-		
-		//create the folder icon
-		var folder_icon = document.createElement("span");
-		folder_icon.classList.add("folder_icon");
-		if (item[0]) {
-			folder_icon.classList.add("oi");
-			folder_icon.setAttribute('data-glyph', "folder");
-		}
-		icon_area.append(folder_icon);
-		
-		//create the edit icon
-		var edit_icon = document.createElement("span");
-		edit_icon.classList.add("edit_icon");
-		if ((popup_editable) && !(item[0])) {
-			edit_icon.classList.add("oi");
-			edit_icon.setAttribute('data-glyph', "spreadsheet");
-			edit_icon.title = "Edit"
-			edit_icon.id = item[1];
-			edit_icon.onclick = function () {
-							socket.emit("popup_edit", this.id);
-					  };
-		}
-		icon_area.append(edit_icon);
-		
-		//create the rename icon
-		var rename_icon = document.createElement("span");
-		rename_icon.classList.add("rename_icon");
-		if ((popup_renameable) && !(item[0])) {
-			rename_icon.classList.add("oi");
-			rename_icon.setAttribute('data-glyph', "pencil");
-			rename_icon.title = "Rename"
-			rename_icon.id = item[1];
-			rename_icon.setAttribute("filename", item[2]);
-			rename_icon.onclick = function () {
-							var new_name = prompt("Please enter new filename for \n"+ this.getAttribute("filename"));
-							if (new_name != null) {
-								socket.emit("popup_rename", {"file": this.id, "new_name": new_name});
-							}
-					  };
-		}
-		icon_area.append(rename_icon);
-		
-		//create the delete icon
-		var delete_icon = document.createElement("span");
-		delete_icon.classList.add("delete_icon");
-		if (popup_deleteable) {
-			delete_icon.classList.add("oi");
-			delete_icon.setAttribute('data-glyph', "x");
-			delete_icon.title = "Delete"
-			delete_icon.id = item[1];
-			delete_icon.setAttribute("folder", item[0]);
-			delete_icon.onclick = function () {
-							if (this.getAttribute("folder") == "true") {
-								if (window.confirm("Do you really want to delete this folder and ALL files under it?")) {
-									socket.emit("popup_delete", this.id);
-								}
-							} else {
-								if (window.confirm("Do you really want to delete this file?")) {
-									socket.emit("popup_delete", this.id);
-								}
-							}
-					  };
-		}
-		icon_area.append(delete_icon);
-		tr.append(icon_area);
-		
-		//create the actual item
-		i=0;
-		if (data.show_filename) {
-			var popup_item = document.createElement("span");
-			popup_item.style = "grid-area: p"+i+";";
-			i+=1;
-			popup_item.id = item[1];
-			popup_item.setAttribute("folder", item[0]);
-			popup_item.setAttribute("valid", item[3]);
-			popup_item.textContent = item[2];
-			popup_item.onclick = function () {
-							var accept = document.getElementById("popup_accept");
-							if (this.getAttribute("valid") == "true") {
-								accept.classList.remove("disabled");
-								accept.disabled = false;
-								accept.setAttribute("selected_value", this.id);
-							} else {
-								accept.setAttribute("selected_value", "");
-								accept.classList.add("disabled");
-								accept.disabled = true;
-								if (this.getAttribute("folder") == "true") {
-									socket.emit("popup_change_folder", this.id);
-								}
-							}
-							var popup_list = document.getElementById('popup_list').getElementsByClassName("selected");
-							for (item of popup_list) {
-								item.classList.remove("selected");
-							}
-							this.parentElement.classList.add("selected");
-					  };
-			tr.append(popup_item);
-		}
-		
-		for (extra_data of item[4]) {
-			td = document.createElement("span");
-			td.style = "grid-area: p"+i+";";
-			i+=1;
-			td.id = item[1];
-			td.setAttribute("folder", item[0]);
-			td.setAttribute("valid", item[3]);
-			td.textContent = extra_data;
-			td.onclick = function () {
-							var accept = document.getElementById("popup_accept");
-							if (this.getAttribute("valid") == "true") {
-								accept.classList.remove("disabled");
-								accept.disabled = false;
-								accept.setAttribute("selected_value", this.id);
-							} else {
-								accept.setAttribute("selected_value", "");
-								accept.classList.add("disabled");
-								accept.disabled = true;
-								if (this.getAttribute("folder") == "true") {
-									socket.emit("popup_change_folder", this.id);
-								}
-							}
-							var popup_list = document.getElementById('popup_list').getElementsByClassName("selected");
-							for (item of popup_list) {
-								item.classList.remove("selected");
-							}
-							this.parentElement.classList.add("selected");
-					  };
-			tr.append(td);
-		}
-		
-		
-		popup_list.append(tr);
-		
-		
-	}
-	
 	
 }