add element viewer list commit

WebGde/.classpath

@@ -6,9 +6,8 @@
 			<attribute name="maven.pomderived" value="true"/>
 		</attributes>
 	</classpathentry>
-	<classpathentry exported="true" kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8">
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8">
 		<attributes>
-			<attribute name="module" value="true"/>
 			<attribute name="maven.pomderived" value="true"/>
 		</attributes>
 	</classpathentry>
@@ -18,16 +17,29 @@
 			<attribute name="org.eclipse.jst.component.dependency" value="/WEB-INF/lib"/>
 		</attributes>
 	</classpathentry>
-	<classpathentry kind="con" path="org.eclipse.payara.tools.lib.system">
+	<classpathentry kind="src" output="target/test-classes" path="src/test/java">
+		<attributes>
+			<attribute name="test" value="true"/>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="con" path="fish.payara.eclipse.tools.server.lib.system">
 		<attributes>
 			<attribute name="owner.project.facets" value="jst.web"/>
 		</attributes>
 	</classpathentry>
-	<classpathentry kind="src" output="target/test-classes" path="src/test/java">
+	<classpathentry excluding="**" kind="src" output="target/classes" path="src/main/resources">
 		<attributes>
-			<attribute name="test" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
 			<attribute name="optional" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry excluding="**" kind="src" output="target/test-classes" path="src/test/resources">
+		<attributes>
 			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="test" value="true"/>
+			<attribute name="optional" value="true"/>
 		</attributes>
 	</classpathentry>
 	<classpathentry kind="output" path="target/classes"/>

WebGde/.settings/org.eclipse.wst.common.project.facet.core.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <faceted-project>
-  <runtime name="Payara Server 5 (5.2022.5)"/>
+  <runtime name="Payara"/>
   <fixed facet="jst.web"/>
   <fixed facet="java"/>
   <fixed facet="wst.jsdt.web"/>

WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.css

+/* Reset and General Styles */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: 'Arial', sans-serif;
+}
+
+html,
+body {
+	min-height: 100vh;
+	height: 100%;
+	margin: 0;
+	background-image: linear-gradient(to bottom, #23569f, #00a8c0);
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-size: cover;
+	overflow-y: hidden;
+}
+
+/* Main Container */
+#containerId {
+	max-width: 900px;
+	margin: 2rem 1rem;
+	background-color: #fff;
+	border-radius: 12px;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	padding: 2rem;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+/* Element List Wrapper */
+.element-list {
+	max-height: 70vh;
+	overflow-y: auto;
+	padding-bottom: 1rem;
+	margin-bottom: 1rem;
+	border-bottom: 1px solid #e0e0e0;
+}
+
+/* Element Containers */
+.element-container {
+	display: flex;
+	flex-direction: column;
+	background-color: #fafafa;
+	border: 1px solid #e0e0e0;
+	border-radius: 8px;
+	margin-bottom: 1.5rem;
+	padding: 1rem;
+	transition: all 0.3s ease;
+	cursor: pointer;
+}
+
+.element-container:hover {
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.element-container.selected {
+	background-color: #d3e5ff;
+	border-color: #007bff;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Element Item */
+.element-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+/* Element Details */
+.extra-details {
+	margin-top: 1rem;
+	font-size: 0.9rem;
+	color: #7d7d7d;
+}
+
+/* Detail Item */
+.detail-item {
+	margin-top: 0.5rem;
+	padding: 0.5rem 0;
+	border-top: 1px solid #e0e0e0;
+	font-size: 0.9rem;
+	color: #7d7d7d;
+}
+
+/* Buttons */
+button {
+	padding: 1rem 2rem;
+	border: none;
+	border-radius: 50px;
+	font-size: 1rem;
+	color: #fff;
+	background-color: #007bff;
+	cursor: pointer;
+	transition: background-color 0.3s ease, transform 0.1s ease;
+}
+
+button:active {
+	transform: scale(0.95);
+}
+
+button.encode:hover,
+button.encode:active {
+	background-color: #0056b3;
+}
+
+button.new {
+	background-color: #28a745;
+}
+
+button.new:hover,
+button.new:active {
+	background-color: #218838;
+}
+
+.button-container {
+	margin-top: auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 2rem;
+}
+
+button.disabled {
+	background-color: #ccc;
+	cursor: not-allowed;
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+	#containerId {
+		padding: 1rem;
+	}
+
+	.element-container,
+	button {
+		padding: 1rem;
+	}
+}
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.js

+const API_ROOT = "http://18.233.158.67:8080/bpo/req";
+
+export class ElementListWidget {
+	global = {
+		container: null,
+		newButton: null,
+		encodeButton: null,
+		selectedElement: null,
+		workers: []
+	};
+
+	constructor(nodeId, containerId) {
+		this.nodeId = nodeId;
+		this.global.container = document.getElementById(containerId);
+
+		if (!this.global.container) {
+			this.global.container = document.createElement('div');
+			this.global.container.id = containerId;
+			document.body.appendChild(this.global.container);
+		}
+
+		this.workerId = sessionStorage.getItem("user_id");
+		this.init(nodeId, this.workerId);
+	}
+
+	async init(nodeId, workerId) {
+		console.log(`Fetching workers for node ID: ${nodeId}`);
+		const workerResponse = await fetchWorkersForNode(nodeId);
+		console.log("Worker API Response:", workerResponse);
+
+		if (workerResponse.successful && Array.isArray(workerResponse.workers)) {
+			this.global.workers = workerResponse.workers;
+		} else {
+			console.error('Failed to fetch workers:', workerResponse);
+			return;
+		}
+
+		const selectedWorker = this.global.workers.find(worker => worker.workerId === workerId);
+
+		if (!selectedWorker) {
+			console.error(`Worker with ID ${workerId} not found.`);
+			return;
+		}
+
+		/*		console.log(`Fetching elements for node ID: ${nodeId}`);*/
+		const elementResponse = await fetchElementsForNode(nodeId);
+		/*		console.log("Elements API Response:", elementResponse);*/
+
+		if (elementResponse.successful && Array.isArray(elementResponse.elements)) {
+			this.elements = elementResponse.elements.filter(element =>
+				selectedWorker.queueIndex.includes(element.queueIndex)
+			);
+		} else {
+			this.elements = [];
+			console.error('Failed to fetch elements or received malformed data:', elementResponse);
+		}
+
+		this.render();
+	}
+
+	render() {
+		this.global.container.innerHTML = "";
+
+		// Helper function to deselect all elements and remove their extra details
+		const deselectAll = () => {
+			document.querySelectorAll(".element-container.selected").forEach(el => {
+				el.classList.remove("selected");
+				this.removeExtraDetails(el);
+			});
+			this.global.selectedElement = null;
+			this.global.encodeButton.disabled = true;
+			this.global.encodeButton.classList.add("disabled");
+		};
+
+		// Initialize the encode button as disabled
+		this.global.encodeButton = document.createElement("button");
+		this.global.encodeButton.textContent = "ENCODE";
+		this.global.encodeButton.disabled = true;
+		this.global.encodeButton.classList.add("disabled");
+
+		// Create an element list container for the elements
+		const elementList = document.createElement("div");
+		elementList.classList.add("element-list");
+
+		this.elements.forEach(element => {
+			const elementContainer = document.createElement("div");
+			elementContainer.classList.add("element-container");
+
+			const elementDiv = document.createElement("div");
+			elementDiv.classList.add("element-item");
+
+			const elementIdSpan = document.createElement("span");
+			elementIdSpan.textContent = element.elementId;
+			elementDiv.appendChild(elementIdSpan);
+
+			elementContainer.appendChild(elementDiv);
+			elementList.appendChild(elementContainer);
+
+			// Move the click event listener from the elementDiv to the elementContainer
+			elementContainer.addEventListener("click", () => {
+				if (elementContainer.classList.contains("selected")) {
+					deselectAll();
+				} else {
+					deselectAll();
+					elementContainer.classList.add("selected");
+					this.global.selectedElement = element;
+					this.showExtraDetails(element, elementContainer);
+					this.global.encodeButton.disabled = false;
+					this.global.encodeButton.classList.remove("disabled");
+				}
+			});
+		});
+
+		this.global.container.appendChild(elementList);  // Add the wrapped elements to the main container
+
+		// Create a parent div for the buttons
+		const buttonContainer = document.createElement("div");
+		buttonContainer.classList.add("button-container");
+
+		this.global.encodeButton.addEventListener("click", () => {
+			if (this.global.encodeButton.disabled) {
+				return;
+			}
+			if (this.global.selectedElement) {
+				this.handleEncodeClick(this.global.selectedElement);
+			}
+		});
+
+		buttonContainer.appendChild(this.global.encodeButton);
+
+		const newButton = document.createElement("button");
+		newButton.textContent = "NEW";
+		newButton.addEventListener("click", () => this.handleNewClick());
+		buttonContainer.appendChild(newButton);
+
+		this.global.container.appendChild(buttonContainer);
+		this.global.newButton = newButton;
+	}
+
+
+	getContainer() {
+		return this.global.container;
+	}
+
+	getNewButton() {
+		return this.global.newButton;
+	}
+
+	getEncodeButton() {
+		return this.global.encodeButton;
+	}
+
+
+
+	showExtraDetails(element, elementContainer) {
+		// Remove existing extra details if any
+		this.removeExtraDetails(elementContainer);
+
+		// Check if there are any extra details
+		if (element.extraDetails && Object.keys(element.extraDetails).length > 0) {
+			Object.entries(element.extraDetails).forEach(([key, value]) => {
+				const detailDiv = document.createElement("div");
+				detailDiv.classList.add("detail-item");
+
+				const detailSpan = document.createElement("span");
+				detailSpan.textContent = `${key}: ${value}`;
+
+				detailDiv.appendChild(detailSpan);
+				elementContainer.appendChild(detailDiv);
+			});
+		}
+	}
+
+
+	removeExtraDetails(elementContainer) {
+		const detailsItems = elementContainer.querySelectorAll(".detail-item");
+		if (detailsItems.length > 0) {
+			detailsItems.forEach(detailItem => {
+				detailItem.remove();
+			});
+		}
+	}
+
+}
+
+async function fetchWorkersForNode(nodeId) {
+	const response = await fetch(`${API_ROOT}/nodes/${nodeId}/workers`);
+	return await response.json();
+}
+
+async function fetchElementsForNode(nodeId) {
+	const response = await fetch(`${API_ROOT}/nodes/${nodeId}/elements`);
+	return await response.json();
+}
+
+
+
+

WebGde/WebContent/WebGde-Widgets/config.js

@@ -10,7 +10,7 @@ export const  HIGH_LIGHT_SCHEMA = "./WebGde-Widgets/sample_schema/dbSchema_anno.
 export const ROOT_FOLDER = "/WebGde-Widgets";
 
 //this determines if the images will be retrieved from the gfs
-export const  DOMAIN = "http://54.157.29.8:8080"
+export const  DOMAIN = "http://18.233.158.67:8080"
 export const  CONTEXTROOT = "gfs-explorer-ws"
 export const  GDE_URL = DOMAIN + "/MobileGde/svc/gfs-rest"
 export const  FOLDER_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-folder?parentPath=/Users/"

WebGde/WebContent/index.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>Data Input Field</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="./style.css">
-    <link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css">
-    <link id="loginStylesheet" rel="stylesheet" href="./WebGde-Widgets/LogInWidget/LoginStyle.css">
-    <script type="module" src="./script.js"></script>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
-    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
-    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" type="text/javascript"></script>
-    <link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
-    <script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
-    <!-- <script src="https://auth.svi.cloud/auth/js/keycloak.js"></script>
-    <script type="text/javascript" src="./keycloak-login.js"></script> -->
-
-</head>
-<body>
-</body>
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Data Input Field</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<link rel="stylesheet" href="./style.css">
+	<link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css">
+	<link rel="stylesheet" href="./WebGde-Widgets/ElementListWidget/ElementListWidget.css">
+	<link id="loginStylesheet" rel="stylesheet" href="./WebGde-Widgets/LogInWidget/LoginStyle.css">
+	<script type="module" src="./script.js"></script>
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"
+		integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+	<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+	<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"
+		type="text/javascript"></script>
+	<link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
+	<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
+	<!-- <script src="https://auth.svi.cloud/auth/js/keycloak.js"></script>
+    <script type="text/javascript" src="./keycloak-login.js"></script> -->
+
+</head>
+
+<body>
+</body>
+
 </html>
\ No newline at end of file