Spaces:

Davidal07
/

flowgenius-visualizer

Running

App Files Files Community

davidardz07 commited on Oct 26, 2025

Commit

76f3c6e

1 Parent(s): 7888a2c

Editar Links y Nodos

Browse files

Files changed (3) hide show

index.html +92 -47
script.js +192 -23
style.css +67 -0

index.html CHANGED Viewed

@@ -11,31 +11,78 @@
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 </head>
-<body class="bg-gray-100 min-h-screen flex">
-    <div class="flex flex-1">
-        <!-- Sidebar -->
-        <div class="w-80 bg-white shadow-lg flex flex-col">
-            <div class="p-4 border-b flex items-center justify-between">
-                <h1 class="text-xl font-bold text-gray-800">Sankey Flow Wizard</h1>
-                <button id="settings-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-2 rounded-md text-sm flex items-center space-x-2">
-                    <i data-feather="settings" class="mr-1"></i>
                 </button>
             </div>
-            <div class="flex-1 overflow-y-auto p-4 space-y-6">
-                <!-- Settings panel (hidden by default) -->
-                <div id="settings-panel" class="bg-gray-50 p-4 rounded-lg hidden">
-                    <h3 class="font-medium text-gray-700 mb-3 flex items-center">
-                        <i data-feather="sliders" class="mr-2"></i> Configuración
-                    </h3>
-                    <div class="space-y-4">
                         <div>
                             <label class="block text-sm text-gray-600 mb-1">Text Color</label>
-                            <input type="color" id="text-color" value="#000000" class="w-full h-10">
                         </div>
                         <div>
                             <label class="block text-sm text-gray-600 mb-1">Text Position</label>
-                            <select id="text-position" class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                 <option value="left">Left</option>
                                 <option value="middle" selected>Middle</option>
                                 <option value="right">Right</option>
@@ -55,38 +102,36 @@
                         </div>
                     </div>
                 </div>
-                <!-- Import/Export -->
-                <div class="bg-gray-50 p-4 rounded-lg">
-                    <h3 class="font-medium text-gray-700 mb-3 flex items-center">
-                        <i data-feather="upload" class="mr-2"></i> Import/Export
-                    </h3>
-                    <div class="grid grid-cols-2 gap-2">
-                        <button id="import-csv" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-2 rounded-md text-sm transition">
-                            <i data-feather="upload" class="mr-1"></i> Import CSV
-                        </button>
-                        <button id="export-csv" class="bg-green-500 hover:bg-green-600 text-white px-3 py-2 rounded-md text-sm transition">
-                            <i data-feather="download" class="mr-1"></i> Export CSV
-                        </button>
-                        <button id="center-diagram" class="bg-purple-500 hover:bg-purple-600 text-white px-3 py-2 rounded-md text-sm transition col-span-2">
-                            <i data-feather="crosshair" class="mr-1"></i> Center Diagram
-                        </button>
-                    </div>
-                    <input type="file" id="csv-file" accept=".csv" class="hidden">
-                </div>
-                <!-- Appearance moved into the Settings panel -->
                 <!-- Nodes Management -->
-                <div class="bg-gray-50 p-4 rounded-lg">
-                    <h3 class="font-medium text-gray-700 mb-3 flex items-center">
-                        <i data-feather="circle" class="mr-2"></i> Nodes
-                    </h3>
-                    <div class="space-y-3">
-                        <div class="flex space-x-2">
-                            <input type="text" id="node-name" placeholder="Node name" class="flex-1 px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                            <button id="add-node" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition">Add</button>
                         </div>
-                        <div id="nodes-list" class="max-h-60 overflow-y-auto border rounded-md p-2 space-y-2"></div>
                     </div>
                 </div>

     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 </head>
+<body class="bg-gray-100 min-h-screen flex flex-col">
+    <!-- Edit Modal -->
+    <div id="edit-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg p-6 w-96 shadow-xl">
+            <div class="flex justify-between items-center mb-4">
+                <h3 id="modal-title" class="text-lg font-semibold text-gray-800"></h3>
+                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
+                    <i data-feather="x"></i>
                 </button>
             </div>
+            <div id="modal-content">
+                <!-- Node editing form -->
+                <div id="node-edit-form" class="hidden">
+                    <div class="mb-4">
+                        <label class="block text-sm text-gray-600 mb-1">Node Name</label>
+                        <input type="text" id="edit-node-name" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                </div>
+                <!-- Link editing form -->
+                <div id="link-edit-form" class="hidden">
+                    <div class="mb-4">
+                        <label class="block text-sm text-gray-600 mb-1">Source Node</label>
+                        <select id="edit-link-source" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></select>
+                    </div>
+                    <div class="mb-4">
+                        <label class="block text-sm text-gray-600 mb-1">Target Node</label>
+                        <select id="edit-link-target" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></select>
+                    </div>
+                    <div class="mb-4">
+                        <label class="block text-sm text-gray-600 mb-1">Value</label>
+                        <input type="number" id="edit-link-value" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" min="0">
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end space-x-2 mt-6">
+                <button id="cancel-edit" class="px-4 py-2 text-gray-600 hover:text-gray-800 rounded-md">Cancel</button>
+                <button id="save-edit" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md">Save</button>
+            </div>
+        </div>
+    </div>
+    <!-- Main Header -->
+    <div class="bg-white shadow-lg p-4 flex items-center justify-between relative">
+        <div class="flex items-center">
+            <button id="toggle-sidebar" class="text-gray-600 hover:text-gray-800 p-2 rounded-md mr-4 tooltip-trigger" title="Toggle Sidebar">
+                <i data-feather="menu"></i>
+            </button>
+            <h1 class="text-xl font-bold text-gray-800">Sankey Flow Wizard</h1>
+        </div>
+        <div class="flex items-center space-x-2">
+            <button id="import-csv" class="p-2 text-gray-600 hover:text-gray-800 rounded-md tooltip-trigger" title="Import CSV">
+                <i data-feather="upload"></i>
+            </button>
+            <button id="export-csv" class="p-2 text-gray-600 hover:text-gray-800 rounded-md tooltip-trigger" title="Export CSV">
+                <i data-feather="download"></i>
+            </button>
+            <button id="center-diagram" class="p-2 text-gray-600 hover:text-gray-800 rounded-md tooltip-trigger" title="Center Diagram">
+                <i data-feather="crosshair"></i>
+            </button>
+            <div class="relative">
+                <button id="settings-btn" class="p-2 text-gray-600 hover:text-gray-800 rounded-md tooltip-trigger" title="Settings">
+                    <i data-feather="settings"></i>
+                </button>
+                <!-- Settings Dropdown Menu -->
+                <div id="settings-dropdown" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg z-50">
+                    <div class="p-4 space-y-4">
                         <div>
                             <label class="block text-sm text-gray-600 mb-1">Text Color</label>
+                            <input type="color" id="text-color" value="#000000" class="w-full h-8">
                         </div>
                         <div>
                             <label class="block text-sm text-gray-600 mb-1">Text Position</label>
+                            <select id="text-position" class="w-full p-2 border rounded-md">
                                 <option value="left">Left</option>
                                 <option value="middle" selected>Middle</option>
                                 <option value="right">Right</option>
                         </div>
                     </div>
                 </div>
+            </div>
+        </div>
+    </div>
+    <div class="flex flex-1">
+        <!-- Sidebar -->
+        <div id="sidebar" class="w-80 bg-white shadow-lg flex flex-col transition-all duration-300 ease-in-out">
+            <div class="p-2 border-b">
+                <h2 class="text-lg font-semibold text-gray-800">Diagram Editor</h2>
+            </div>
+            <div class="flex-1 overflow-y-auto p-2 space-y-1">
+                <!-- File input for CSV import -->
+                <input type="file" id="csv-file" accept=".csv" class="hidden">
                 <!-- Nodes Management -->
+                <div class="bg-gray-50 rounded-lg">
+                    <div class="p-2 border-b">
+                        <h3 class="font-medium text-gray-700 flex items-center">
+                            <i data-feather="circle" class="mr-2"></i> Nodes
+                        </h3>
+                    </div>
+                    <div class="p-3">
+                        <div class="space-y-3">
+                            <div id="nodes-list" class="max-h-[200px] overflow-y-auto border rounded-md p-2 space-y-2 bg-white"></div>
+                            <div class="flex space-x-2">
+                                <input type="text" id="node-name" placeholder="Node name" class="flex-1 px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <button id="add-node" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition">Add</button>
+                            </div>
                         </div>
                     </div>
                 </div>

script.js CHANGED Viewed

@@ -1,4 +1,109 @@
 // Define the d3.sankey layout function
 d3.sankey = function() {
     var sankey = {},
@@ -320,29 +425,81 @@ function saveData() {
     localStorage.setItem('sankeyData', JSON.stringify(sankeyData));
 }
 // Initialize the diagram
 function initDiagram() {
-    const svg = d3.select("#sankey-diagram");
-    svg.selectAll("*").remove();
-    // Early return if SVG container doesn't exist
-    if (!svg.node()) return;
-    // Set up the sankey diagram properties
-    const width = document.getElementById('diagram-container').clientWidth;
-    const baseHeight = parseInt(document.getElementById('diagram-height').value);
-    const textPosition = document.getElementById('text-position').value;
-    const textPadding = textPosition !== 'middle' ? 50 : 0; // Extra space for text above/below
-    const height = baseHeight + textPadding;
-    const linkAlpha = parseFloat(document.getElementById('link-alpha').value);
-    // Create Sankey generator with increased padding for better distribution
-    const sankey = d3.sankey()
-        .nodeWidth(parseInt(document.getElementById('node-width').value))
-        .nodePadding(120) // Increased padding for better vertical distribution
-        .size([width - textPadding, height - textPadding]);
-    // Create a copy of the data
     const graph = {
         nodes: sankeyData.nodes.map(d => Object.assign({}, d)),
         links: sankeyData.links.map(d => Object.assign({}, d))
@@ -505,7 +662,7 @@ function updateLists() {
     sankeyData.nodes.forEach((node, index) => {
         const nodeElement = document.createElement('div');
-        nodeElement.className = 'flex items-center justify-between bg-white p-2 rounded border border-gray-200';
         nodeElement.innerHTML = `
             <span>${node.name}</span>
             <div class="flex items-center space-x-2">
@@ -515,6 +672,12 @@ function updateLists() {
                 </button>
             </div>
         `;
         nodesList.appendChild(nodeElement);
     });
@@ -527,13 +690,19 @@ function updateLists() {
         const targetNode = sankeyData.nodes[link.target]?.name || 'Unknown';
         const linkElement = document.createElement('div');
-        linkElement.className = 'flex items-center justify-between bg-white p-2 rounded border border-gray-200';
         linkElement.innerHTML = `
             <span>${sourceNode} → ${targetNode} (${link.value})</span>
             <button class="text-red-500 hover:text-red-700 delete-link" data-index="${index}">
                 <i data-feather="trash-2" width="16"></i>
             </button>
         `;
         linksList.appendChild(linkElement);
     });

+// DOM Elements
+const sidebar = document.getElementById('sidebar');
+const toggleSidebarBtn = document.getElementById('toggle-sidebar');
+const settingsBtn = document.getElementById('settings-btn');
+const settingsDropdown = document.getElementById('settings-dropdown');
+// Modal Elements
+const editModal = document.getElementById('edit-modal');
+const modalTitle = document.getElementById('modal-title');
+const nodeEditForm = document.getElementById('node-edit-form');
+const linkEditForm = document.getElementById('link-edit-form');
+const editNodeName = document.getElementById('edit-node-name');
+const editLinkSource = document.getElementById('edit-link-source');
+const editLinkTarget = document.getElementById('edit-link-target');
+const editLinkValue = document.getElementById('edit-link-value');
+const saveEditBtn = document.getElementById('save-edit');
+const cancelEditBtn = document.getElementById('cancel-edit');
+const closeModalBtn = document.getElementById('close-modal');
+let currentEditItem = null; // Store the item being edited
+// Modal Functions
+function openModal() {
+    editModal.classList.remove('hidden');
+    feather.replace();
+}
+function closeModal() {
+    editModal.classList.add('hidden');
+    currentEditItem = null;
+    nodeEditForm.classList.add('hidden');
+    linkEditForm.classList.add('hidden');
+}
+function populateNodeForm(node) {
+    modalTitle.textContent = 'Edit Node';
+    nodeEditForm.classList.remove('hidden');
+    linkEditForm.classList.add('hidden');
+    editNodeName.value = node.name;
+}
+function populateLinkForm(link) {
+    modalTitle.textContent = 'Edit Link';
+    linkEditForm.classList.remove('hidden');
+    nodeEditForm.classList.add('hidden');
+    // Clear and populate source/target dropdowns
+    editLinkSource.innerHTML = '';
+    editLinkTarget.innerHTML = '';
+    sankeyData.nodes.forEach(node => {
+        const sourceOption = document.createElement('option');
+        sourceOption.value = node.name;
+        sourceOption.textContent = node.name;
+        editLinkSource.appendChild(sourceOption.cloneNode(true));
+        editLinkTarget.appendChild(sourceOption);
+    });
+    // Set current values
+    editLinkSource.value = sankeyData.nodes[link.source].name;
+    editLinkTarget.value = sankeyData.nodes[link.target].name;
+    editLinkValue.value = link.value;
+}
+// Event Handlers for Modal
+closeModalBtn.addEventListener('click', closeModal);
+cancelEditBtn.addEventListener('click', closeModal);
+// Click outside modal to close
+editModal.addEventListener('click', (e) => {
+    if (e.target === editModal) {
+        closeModal();
+    }
+});
+// Toggle sidebar
+toggleSidebarBtn.addEventListener('click', () => {
+    sidebar.classList.toggle('collapsed');
+});
+// Toggle settings dropdown
+let isSettingsOpen = false;
+settingsBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    isSettingsOpen = !isSettingsOpen;
+    settingsDropdown.classList.toggle('hidden', !isSettingsOpen);
+});
+// Close settings dropdown when clicking outside
+document.addEventListener('click', (e) => {
+    if (!settingsDropdown.contains(e.target) && !settingsBtn.contains(e.target)) {
+        settingsDropdown.classList.add('hidden');
+        isSettingsOpen = false;
+    }
+});
+// Prevent settings dropdown from closing when clicking inside it
+settingsDropdown.addEventListener('click', (e) => {
+    e.stopPropagation();
+});
+// Initialize Feather icons
+document.addEventListener('DOMContentLoaded', () => {
+    feather.replace();
+});
 // Define the d3.sankey layout function
 d3.sankey = function() {
     var sankey = {},
     localStorage.setItem('sankeyData', JSON.stringify(sankeyData));
 }
+// Edit node or link
+function handleEditNode(node, index) {
+    currentEditItem = { type: 'node', index };
+    populateNodeForm(node);
+    openModal();
+}
+function handleEditLink(link, index) {
+    currentEditItem = { type: 'link', index };
+    populateLinkForm(link);
+    openModal();
+}
+// Save changes from modal
+saveEditBtn.addEventListener('click', () => {
+    if (currentEditItem) {
+        if (currentEditItem.type === 'node') {
+            const newName = editNodeName.value.trim();
+            if (newName) {
+                sankeyData.nodes[currentEditItem.index].name = newName;
+            }
+        } else if (currentEditItem.type === 'link') {
+            const sourceNode = editLinkSource.value;
+            const targetNode = editLinkTarget.value;
+            const value = parseInt(editLinkValue.value);
+            if (sourceNode && targetNode && value > 0) {
+                sankeyData.links[currentEditItem.index] = {
+                    source: sankeyData.nodes.findIndex(n => n.name === sourceNode),
+                    target: sankeyData.nodes.findIndex(n => n.name === targetNode),
+                    value: value
+                };
+            }
+        }
+        updateLists();
+        initDiagram();
+        saveData();
+        closeModal();
+    }
+});
 // Initialize the diagram
 function initDiagram() {
+        const svg = d3.select("#sankey-diagram");
+        svg.selectAll("*").remove();
+        // Early return if SVG container doesn't exist
+        if (!svg.node()) return;
+        // Get the container dimensions
+        const container = document.getElementById('diagram-container');
+        const width = container.clientWidth;
+        const containerHeight = container.clientHeight;
+        // Set up the sankey diagram properties
+        const baseHeight = parseInt(document.getElementById('diagram-height').value);
+        const textPosition = document.getElementById('text-position').value;
+        const textPadding = textPosition !== 'middle' ? 50 : 0; // Extra space for text above/below
+        // Use the larger of container height or base height to prevent shrinking
+        const height = Math.max(containerHeight, baseHeight + textPadding);
+        const linkAlpha = parseFloat(document.getElementById('link-alpha').value);
+        // Update SVG dimensions
+        svg.attr("width", width)
+           .attr("height", height)
+           .attr("viewBox", [0, 0, width, height])
+           .attr("preserveAspectRatio", "xMinYMin");
+        // Create Sankey generator with increased padding for better distribution
+        const sankey = d3.sankey()
+            .nodeWidth(parseInt(document.getElementById('node-width').value))
+            .nodePadding(120) // Increased padding for better vertical distribution
+            .size([width - textPadding, height - textPadding]);    // Create a copy of the data
     const graph = {
         nodes: sankeyData.nodes.map(d => Object.assign({}, d)),
         links: sankeyData.links.map(d => Object.assign({}, d))
     sankeyData.nodes.forEach((node, index) => {
         const nodeElement = document.createElement('div');
+        nodeElement.className = 'flex items-center justify-between bg-white p-2 rounded border border-gray-200 cursor-pointer';
         nodeElement.innerHTML = `
             <span>${node.name}</span>
             <div class="flex items-center space-x-2">
                 </button>
             </div>
         `;
+        // Add double-click handler for editing
+        nodeElement.addEventListener('dblclick', (e) => {
+            if (!e.target.classList.contains('node-color-picker') && !e.target.closest('.delete-node')) {
+                handleEditNode(node, index);
+            }
+        });
         nodesList.appendChild(nodeElement);
     });
         const targetNode = sankeyData.nodes[link.target]?.name || 'Unknown';
         const linkElement = document.createElement('div');
+        linkElement.className = 'flex items-center justify-between bg-white p-2 rounded border border-gray-200 cursor-pointer';
         linkElement.innerHTML = `
             <span>${sourceNode} → ${targetNode} (${link.value})</span>
             <button class="text-red-500 hover:text-red-700 delete-link" data-index="${index}">
                 <i data-feather="trash-2" width="16"></i>
             </button>
         `;
+        // Add double-click handler for editing
+        linkElement.addEventListener('dblclick', (e) => {
+            if (!e.target.closest('.delete-link')) {
+                handleEditLink(link, index);
+            }
+        });
         linksList.appendChild(linkElement);
     });

style.css CHANGED Viewed

@@ -1,4 +1,68 @@
 /* Custom styles for the sankey diagram */
 #sankey-diagram {
@@ -12,6 +76,9 @@
     border-radius: 0.5rem;
     position: relative;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
 .node rect {
     cursor: move;

+/* Main layout */
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+/* Header styles */
+.header {
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+}
+/* Tooltip styles */
+.tooltip-trigger {
+    position: relative;
+}
+.tooltip-trigger:hover::after {
+    content: attr(title);
+    position: absolute;
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 4px 8px;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    z-index: 1000;
+}
+/* Settings dropdown */
+#settings-dropdown {
+    border: 1px solid #e5e7eb;
+    animation: fadeIn 0.2s ease-out;
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+/* Sidebar transitions */
+#sidebar {
+    transition: width 0.3s ease-in-out;
+}
+#sidebar.collapsed {
+    width: 0;
+    overflow: hidden;
+}
+/* Button hover effects */
+button {
+    transition: all 0.2s ease-in-out;
+}
+button:hover {
+    transform: scale(1.05);
+    background-color: rgba(0, 0, 0, 0.05);
+}
 /* Custom styles for the sankey diagram */
 #sankey-diagram {
     border-radius: 0.5rem;
     position: relative;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    min-height: 400px; /* Set a minimum height */
+    height: 100%; /* Take full height of parent */
+    display: flex; /* Ensure SVG fills container */
 }
 .node rect {
     cursor: move;