116 lines
3.5 KiB
JavaScript
116 lines
3.5 KiB
JavaScript
|
|
import { nodeSelectDisplayComponentForm } from './componentHandler.js';
|
|
|
|
function displayNodes(state) {
|
|
const nodeDropdown = document.getElementById('nodeDropdown');
|
|
if (!nodeDropdown) {
|
|
console.error('Node dropdown element not found.');
|
|
return;
|
|
}
|
|
|
|
clearElementChildren(nodeDropdown);
|
|
|
|
const nodeEntries = Object.entries(state.nodeToCustomNodeMap);
|
|
if (nodeEntries.length === 0) {
|
|
alert('Upload a valid workflow in API format.');
|
|
console.warn('No nodes available to display.');
|
|
return;
|
|
}
|
|
|
|
nodeEntries.forEach(([nodeId, nodeInfo], index) => {
|
|
const option = createNodeOption(nodeId, nodeInfo, index + 1);
|
|
nodeDropdown.appendChild(option);
|
|
});
|
|
|
|
|
|
nodeDropdown.removeEventListener('change', handleNodeDropdownChange);
|
|
nodeDropdown.addEventListener('change', (event) => handleNodeDropdownChange(event, state));
|
|
|
|
selectFirstNodeOption(nodeDropdown);
|
|
}
|
|
|
|
function handleNodeDropdownChange(event, state) {
|
|
const selectedNodeId = event.target.value;
|
|
const selectedNodeInfo = state.nodeToCustomNodeMap[selectedNodeId];
|
|
|
|
if (selectedNodeId && selectedNodeInfo) {
|
|
|
|
displayNodeInfo(selectedNodeId, selectedNodeInfo, state);
|
|
|
|
|
|
nodeSelectDisplayComponentForm(selectedNodeId, selectedNodeInfo, state);
|
|
} else {
|
|
console.error(`No information found for node ID: ${selectedNodeId}`);
|
|
}
|
|
}
|
|
|
|
function displayNodeInfo(nodeId, nodeInfo, state) {
|
|
const nodeInfoElement = document.getElementById('nodeInfo');
|
|
const nodeInfoExtraElement = document.getElementById('nodeInfo-extra');
|
|
|
|
if (!nodeInfoElement) {
|
|
console.error('Node info element not found.');
|
|
return;
|
|
}
|
|
|
|
if (!nodeInfoExtraElement) {
|
|
console.error('Node info extra element not found.');
|
|
return;
|
|
}
|
|
|
|
nodeInfoElement.innerHTML = generateNodeInfoHTML(nodeId, nodeInfo);
|
|
nodeInfoExtraElement.innerHTML = generateNodeInfoExtraHTML(nodeId, nodeInfo);
|
|
}
|
|
|
|
function createNodeOption(nodeId, nodeInfo, index) {
|
|
const option = document.createElement('option');
|
|
option.value = nodeId;
|
|
option.textContent = `Node ${index}: ${nodeId} (${nodeInfo.classType})`;
|
|
return option;
|
|
}
|
|
|
|
function clearElementChildren(element) {
|
|
while (element.firstChild) {
|
|
element.removeChild(element.firstChild);
|
|
}
|
|
}
|
|
|
|
function selectFirstNodeOption(nodeDropdown) {
|
|
if (nodeDropdown.options.length > 0) {
|
|
nodeDropdown.selectedIndex = 0;
|
|
nodeDropdown.dispatchEvent(new Event('change'));
|
|
}
|
|
}
|
|
|
|
function generateNodeInfoHTML(nodeId, nodeInfo) {
|
|
const { classType, pythonModule = 'N/A', count = 0, inputPaths = {} } = nodeInfo;
|
|
|
|
const inputsHTML = Object.entries(inputPaths)
|
|
.map(([name, path]) => `<li>${name}: ${path}</li>`)
|
|
.join('');
|
|
return `
|
|
`;
|
|
}
|
|
|
|
function generateNodeInfoExtraHTML(nodeId, nodeInfo) {
|
|
const { classType, pythonModule = 'N/A', count = 0, inputPaths = {} } = nodeInfo;
|
|
|
|
const inputsHTML = Object.entries(inputPaths)
|
|
.map(([name, path]) => `<li>${name}: ${path}</li>`)
|
|
.join('');
|
|
|
|
return `
|
|
<div class="node-info-box">
|
|
<h3>Node Info</h3>
|
|
<p><strong>Node ID:</strong> ${nodeId}</p>
|
|
<p><strong>Type:</strong> ${classType}</p>
|
|
<p><strong>Module:</strong> ${pythonModule}</p>
|
|
<p><strong>Count:</strong> ${count}</p>
|
|
</div>
|
|
<p><strong>Inputs:</strong></p>
|
|
<ul>${inputsHTML}</ul>
|
|
`;
|
|
}
|
|
|
|
export { displayNodes, displayNodeInfo };
|