Initial test version

MOLAorg · Oct 27, 2024 · 35c2f9b · 35c2f9b
1 parent 65193ed
commit 35c2f9b
Show file tree

Hide file tree

Showing 2 changed files with 198 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YAML Editor and Visualizer</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
+    <style>
+        #container {
+            display: flex;
+            height: calc(100% - 50px);
+            /* Full height minus the top bar */
+        }
+
+        #editor-container,
+        #graph-container {
+            height: 100%;
+        }
+
+        #editor-container {
+            width: 50%;
+            /* Initial width, adjustable by dragging */
+            border-right: 1px solid #ccc;
+        }
+
+        #graph-container {
+            width: 50%;
+            /* Initial width */
+            position: relative;
+            overflow: hidden;
+        }
+
+        #separator {
+            width: 5px;
+            cursor: col-resize;
+            background-color: #ddd;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="top-bar">
+        <div id="toolbox">
+            <button id="add-algorithm">+ Algorithm</button>
+            <button id="add-map-layer">+ Map Layer</button>
+        </div>
+        <div id="menu">
+            <input type="file" id="upload-yaml" accept=".yaml,.yml">
+            <button id="download-yaml">Download YAML</button>
+        </div>
+    </div>
+    <div id="container">
+        <div id="container">
+            <div id="editor-container">
+                <textarea id="yaml-editor"></textarea>
+            </div>
+            <div id="separator"></div> <!-- Draggable separator -->
+            <div id="graph-container"></div>
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/yaml/yaml.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/js-yaml@4/dist/js-yaml.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/interact.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js"></script>
+
+    <script src="mp2p-icp-graph-editor.js"></script>
+</body>
+
+</html>
diff --git a/mp2p-icp-graph-editor.js b/mp2p-icp-graph-editor.js
@@ -0,0 +1,126 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const yamlEditor = CodeMirror.fromTextArea(document.getElementById("yaml-editor"), {
+        mode: "yaml",
+        lineNumbers: true,
+        theme: "default"
+    });
+
+    const graphContainer = document.getElementById("graph-container");
+    const toolbox = document.getElementById("toolbox");
+    const uploadInput = document.getElementById("upload-yaml");
+
+    let blocks = [];
+    let connections = [];
+
+    function parseYAML(yamlText) {
+        try {
+            const doc = jsyaml.load(yamlText);
+            renderGraph(doc);
+        } catch (e) {
+            console.error("Invalid YAML:", e);
+        }
+    }
+
+    function renderGraph(yamlDoc) {
+        clearGraph();
+
+        // Example YAML parsing logic
+        ["generators", "filters", "final_filters"].forEach((key) => {
+            if (yamlDoc[key]) {
+                yamlDoc[key].forEach((item, index) => {
+                    createBlock(item.class_name, "algorithm", { x: 100, y: index * 100 });
+                });
+            }
+        });
+
+        // Example connections (based on YAML relationships)
+        // You’d add logic here to add arrows from params like 'input_pointcloud_layer' etc.
+    }
+
+    function createBlock(name, type, position) {
+        const block = document.createElement("div");
+        block.className = `block ${type}-block`;
+        block.textContent = name;
+        block.style.left = `${position.x}px`;
+        block.style.top = `${position.y}px`;
+
+        block.addEventListener("dblclick", () => jumpToYAML(name));
+
+        blocks.push({ name, type, element: block });
+        graphContainer.appendChild(block);
+        enableDrag(block);
+    }
+
+    function enableDrag(element) {
+        interact(element).draggable({
+            onmove(event) {
+                const { target, dx, dy } = event;
+                const x = (parseFloat(target.getAttribute('data-x')) || 0) + dx;
+                const y = (parseFloat(target.getAttribute('data-y')) || 0) + dy;
+                target.style.transform = `translate(${x}px, ${y}px)`;
+                target.setAttribute('data-x', x);
+                target.setAttribute('data-y', y);
+            }
+        });
+    }
+
+    function clearGraph() {
+        blocks.forEach((block) => {
+            graphContainer.removeChild(block.element);
+        });
+        blocks = [];
+        connections.forEach((conn) => conn.remove());
+        connections = [];
+    }
+
+    function jumpToYAML(name) {
+        // Locate and jump to YAML text line
+    }
+
+    uploadInput.addEventListener("change", function (event) {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                yamlEditor.setValue(e.target.result);
+                parseYAML(e.target.result);
+            };
+            reader.readAsText(file);
+        }
+    });
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    const editorContainer = document.getElementById("editor-container");
+    const graphContainer = document.getElementById("graph-container");
+    const separator = document.getElementById("separator");
+
+    let isDragging = false;
+
+    // Mouse down on separator starts dragging
+    separator.addEventListener("mousedown", (e) => {
+        isDragging = true;
+        document.body.style.cursor = "col-resize"; // Change cursor during drag
+    });
+
+    // Mouse move adjusts the widths
+    document.addEventListener("mousemove", (e) => {
+        if (!isDragging) return;
+
+        // Calculate new width as percentage
+        const containerRect = document.getElementById("container").getBoundingClientRect();
+        const offsetX = e.clientX - containerRect.left;
+        const editorWidthPercent = (offsetX / containerRect.width) * 100;
+        const graphWidthPercent = 100 - editorWidthPercent;
+
+        // Set the widths of the editor and graph containers
+        editorContainer.style.width = `${editorWidthPercent}%`;
+        graphContainer.style.width = `${graphWidthPercent}%`;
+    });
+
+    // Mouse up stops dragging
+    document.addEventListener("mouseup", () => {
+        isDragging = false;
+        document.body.style.cursor = "default"; // Reset cursor after drag
+    });
+});