Spaces:
Running
Running
File size: 12,862 Bytes
294a40e 90c2999 294a40e 76f3c6e 7db744a 294a40e 76f3c6e 3ab4c02 76f3c6e 3ab4c02 76f3c6e 76f6f02 7888a2c 76f6f02 3ab4c02 5f08e7c dd4bc85 7888a2c dd4bc85 0b619ee dd4bc85 742e0c6 3ab4c02 76f3c6e 294a40e dd4bc85 76f3c6e 294a40e dd4bc85 294a40e dd4bc85 294a40e dd4bc85 294a40e dd4bc85 3ab4c02 dd4bc85 294a40e dd4bc85 294a40e dd4bc85 7db744a dd4bc85 294a40e dd4bc85 294a40e dd4bc85 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sankey Flow Wizard</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-sankey@0.12.3/dist/d3-sankey.min.js"></script>
<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="default" selected>Default</option>
<option value="left">Left</option>
<option value="right">Right</option>
<option value="top">Top</option>
<option value="bottom">Bottom</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Text Padding (px)</label>
<input type="range" id="text-padding" min="2" max="30" value="6" class="w-full">
<div class="text-xs text-gray-500 mt-1">Distance between text and node</div>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Node Width</label>
<input type="range" id="node-width" min="10" max="80" value="40" class="w-full">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Link Alpha</label>
<input type="range" id="link-alpha" min="0.1" max="1" step="0.1" value="0.5" class="w-full">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Link Color Mode</label>
<select id="link-color-mode" class="w-full p-2 border rounded-md">
<option value="source">Source Node Color</option>
<option value="target">Target Node Color</option>
<option value="static">Static Color</option>
</select>
</div>
<div id="static-link-color-container" class="hidden">
<label class="block text-sm text-gray-600 mb-1">Link Static Color</label>
<input type="color" id="static-link-color" value="#93c5fd" class="w-full h-8">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Diagram Height</label>
<input type="range" id="diagram-height" min="300" max="800" value="400" class="w-full">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Font Size</label>
<select id="font-size" class="w-full p-2 border rounded-md">
<option value="small">Small</option>
<option value="medium" selected>Medium</option>
<option value="large">Large</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Background Color</label>
<input type="color" id="background-color" value="#f3f4f6" class="w-full h-8">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Node Edge Color</label>
<input type="color" id="node-edge-color" value="#000000" class="w-full h-8">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Text Shadow</label>
<select id="text-shadow" class="w-full p-2 border rounded-md">
<option value="none">None</option>
<option value="light">Light</option>
<option value="medium">Medium</option>
<option value="dark">Dark</option>
</select>
</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>
<!-- Links 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="link" class="mr-2"></i> Links
</h3>
<div class="space-y-3">
<div class="grid grid-cols-3 gap-2">
<select id="source-node" class="col-span-1 p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></select>
<select id="target-node" class="col-span-1 p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></select>
<input type="number" id="link-value" placeholder="Value" min="1" value="1" class="col-span-1 p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="flex justify-end">
<button id="add-link" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition">Add Link</button>
</div>
<div id="links-list" class="max-h-60 overflow-y-auto border rounded-md p-2 space-y-2"></div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 flex flex-col">
<!-- Diagram Area -->
<div class="flex-1 p-6">
<div id="diagram-container" class="bg-gray-200 rounded-xl shadow-md h-full overflow-hidden">
<svg id="sankey-diagram" class="w-full h-full"></svg>
</div>
</div>
</div>
</div>
<!-- Initialize feather icons -->
<script>
feather.replace();
</script>
<!-- Main app script -->
<script src="script.js"></script>
</body>
</html>
|