{% macro json_editor_macro(nodes, edges) -%}
    <form method="POST" action="/custom" onsubmit="updateGraph(event)" id="sidebar" style="display:none;" >

        <textarea id="textarea-jsgraph" name="jsgraph_string" defaultvalue="{{ jsgraph_string }}" placeholder="No graph loaded."  style="height:calc(100% - 5rem);min-width:25rem;border:none;border:1px solid var(--neutral-200);border-radius:0.5rem;padding:0.5rem;">
        </textarea>
        <button type="submit" class="button" style="width:100%;margin-top:0.5rem;">Update Graph</button>
         <button type="button" onclick="resetGraph()" class="button" style="width:100%;margin-top:0.5rem;color:#cc0000">Discard Changes</button>
        <script>
            let storage_key = window.location.pathname + 'jsgraph';
            const saved_graph = localStorage.getItem(storage_key)
            const el =  document.querySelector('#textarea-jsgraph')
            const resolved_graph = saved_graph || JSON.stringify({nodes: {{ nodes }}.map(createJSNode), edges : {{ edges }}.map(createJSEdge)}, null, 2);
            try {
                const jsgraph_dict = JSON.parse(resolved_graph)
                nodes.update(jsgraph_dict.nodes);
                edges.update(jsgraph_dict.edges)
                network.redraw();
                el.value = resolved_graph
            } catch (err) {
                alert('graph is invalid')
            }
        </script>
        <script>

        </script>
          <script>
            function updateGraph(event) {
                event.preventDefault()
                const formData = new FormData(event.target);
                const jsgraph_string = formData.get('jsgraph_string');
                try {
                     const jsgraph_dict = JSON.parse(jsgraph_string)
                    nodes.update(jsgraph_dict.nodes);
                    edges.update(jsgraph_dict.edges)
                    network.redraw();
                    localStorage.setItem(storage_key, jsgraph_string)
                } catch (err) {
                    alert('graph is invalid')
                }

            }
            function resetGraph() {
                    localStorage.removeItem(storage_key)
                    window.location.reload();
            }
        </script>
    </form>
{%- endmacro %}