app.js

const starterNodes = [
  {
    id: 1,
    title: "Import Context",
    x: 50,
    y: 35,
    cluster: "imported",
    summary:
      "Start by importing a shared AI conversation link, a text file, JSON memory data, or copied conversation text.",
    transferableContext:
      "This public template does not include the creator's private context. Import your own conversations to build a personal memory map.",
    related: ["Local Browser Storage", "Export Memory"],
    importance: 72,
  },
  {
    id: 2,
    title: "Local Browser Storage",
    x: 30,
    y: 62,
    cluster: "workflow",
    summary: "Imported memories are stored locally in the current browser using localStorage.",
    transferableContext:
      "Each visitor gets their own private browser-local memory map. Public hosting does not include anyone else's imported conversations.",
    related: ["Import Context", "Export Memory"],
    importance: 68,
  },
  {
    id: 3,
    title: "Export Memory",
    x: 70,
    y: 62,
    cluster: "projects",
    summary: "Export your generated memory map as JSON whenever you want a portable backup.",
    transferableContext:
      "Use exported JSON to move a memory map between browsers or keep a backup outside the app.",
    related: ["Import Context", "Local Browser Storage"],
    importance: 64,
  },
];

const colors = {
  career: "#55f0dc",
  learning: "#7df5a8",
  projects: "#ffd166",
  workflow: "#b79cff",
  imported: "#ff6b8a",
};

const storageKey = "neural-context-memory-map-v2";
const state = {
  nodes: loadNodes(),
  selectedId: 1,
  mode: "network",
  search: "",
  minImportance: 0,
  nodeElements: new Map(),
  connectionElements: [],
  animationFrame: null,
};

const els = {
  stage: document.querySelector(".map-stage"),
  nodeLayer: document.querySelector("#node-layer"),
  connectionLayer: document.querySelector("#connection-layer"),
  search: document.querySelector("#search"),
  importanceFilter: document.querySelector("#importance-filter"),
  importanceValue: document.querySelector("#importance-value"),
  importFile: document.querySelector("#import-file"),
  sourceUrl: document.querySelector("#source-url"),
  sourceText: document.querySelector("#source-text"),
  importSource: document.querySelector("#import-source"),
  sourceStatus: document.querySelector("#source-status"),
  exportJson: document.querySelector("#export-json"),
  resetMap: document.querySelector("#reset-map"),
  addNode: document.querySelector("#add-node"),
  modeButtons: [...document.querySelectorAll(".segmented button")],
  activeTitle: document.querySelector("#active-title"),
  title: document.querySelector("#node-title"),
  summary: document.querySelector("#node-summary"),
  context: document.querySelector("#node-context"),
  related: document.querySelector("#node-related"),
  importance: document.querySelector("#node-importance"),
  importanceText: document.querySelector("#node-importance-value"),
  form: document.querySelector("#memory-form"),
  copyContext: document.querySelector("#copy-context"),
  deleteNode: document.querySelector("#delete-node"),
  preview: document.querySelector("#import-preview"),
  importedText: document.querySelector("#imported-text"),
  total: document.querySelector("#metric-total"),
  average: document.querySelector("#metric-average"),
  cluster: document.querySelector("#metric-cluster"),
};

function loadNodes() {
  try {
    const saved = JSON.parse(localStorage.getItem(storageKey));
    return Array.isArray(saved) && saved.length ? saved : structuredClone(starterNodes);
  } catch {
    return structuredClone(starterNodes);
  }
}

function saveNodes() {
  localStorage.setItem(storageKey, JSON.stringify(state.nodes));
}

function selectedNode() {
  return state.nodes.find((node) => node.id === state.selectedId) || state.nodes[0];
}

function relationPairs() {
  const pairs = new Set();
  state.nodes.forEach((node) => {
    node.related.forEach((title) => {
      const target = state.nodes.find((candidate) => sameTitle(candidate.title, title));
      if (!target) return;
      pairs.add([node.id, target.id].sort((a, b) => a - b).join(":"));
    });
  });
  return [...pairs].map((pair) => pair.split(":").map(Number));
}

function sameTitle(a, b) {
  return a.trim().toLowerCase() === b.trim().toLowerCase();
}

function visibleNodes() {
  const query = state.search.trim().toLowerCase();
  return state.nodes.filter((node) => {
    const haystack = [node.title, node.summary, node.transferableContext, node.related.join(" ")]
      .join(" ")
      .toLowerCase();
    return node.importance >= state.minImportance && (!query || haystack.includes(query));
  });
}

function isFocusVisible(node, visibleIds) {
  const active = selectedNode();
  return (
    state.mode !== "focus" ||
    node.id === active.id ||
    active.related.some((item) => sameTitle(item, node.title)) ||
    node.related.some((item) => sameTitle(item, active.title))
  ) && visibleIds.has(node.id);
}

function nodeSize(node) {
  return Math.round(74 + node.importance * 0.58);
}

function render() {
  if (!state.nodes.length) {
    state.nodes = structuredClone(starterNodes);
    state.selectedId = 1;
  }

  const visible = visibleNodes();
  const visibleIds = new Set(visible.map((node) => node.id));

  renderConnections(visibleIds);
  renderNodes(visibleIds);
  renderDetails();
  renderMetrics();
  saveNodes();
}

function renderConnections(visibleIds) {
  els.connectionLayer.innerHTML = "";
  state.connectionElements = [];
  relationPairs().forEach(([fromId, toId]) => {
    const from = state.nodes.find((node) => node.id === fromId);
    const to = state.nodes.find((node) => node.id === toId);
    if (!from || !to) return;

    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    line.classList.add("connection");

    if (!visibleIds.has(from.id) || !visibleIds.has(to.id)) {
      line.classList.add("is-muted");
    }

    els.connectionLayer.appendChild(line);
    state.connectionElements.push({ line, fromId, toId });
  });
  updateAnimatedPositions(performance.now());
}

function renderNodes(visibleIds) {
  els.nodeLayer.innerHTML = "";
  state.nodeElements.clear();
  state.nodes.forEach((node) => {
    const button = document.createElement("button");
    button.className = "node";
    button.type = "button";
    button.style.left = `${node.x}%`;
    button.style.top = `${node.y}%`;
    button.style.setProperty("--float-x", "0px");
    button.style.setProperty("--float-y", "0px");
    button.style.setProperty("--node-size", `${nodeSize(node)}px`);
    button.style.setProperty("--node-color", colors[node.cluster] || colors.imported);
    button.innerHTML = `<strong>${escapeHtml(node.title)}</strong><small>${node.importance}</small>`;
    button.setAttribute("aria-label", `Open ${node.title}`);

    if (node.id === state.selectedId) button.classList.add("is-active");
    if (!isFocusVisible(node, visibleIds)) button.classList.add("is-dimmed");

    button.addEventListener("click", () => {
      state.selectedId = node.id;
      render();
    });
    button.addEventListener("pointerdown", (event) => beginDrag(event, node));
    els.nodeLayer.appendChild(button);
    state.nodeElements.set(node.id, button);
  });
  updateAnimatedPositions(performance.now());
}

function beginDrag(event, node) {
  if (event.button !== 0) return;
  const target = event.currentTarget;
  target.setPointerCapture(event.pointerId);

  const move = (moveEvent) => {
    const rect = els.stage.getBoundingClientRect();
    node.x = clamp(((moveEvent.clientX - rect.left) / rect.width) * 100, 7, 93);
    node.y = clamp(((moveEvent.clientY - rect.top) / rect.height) * 100, 9, 91);
    target.style.left = `${node.x}%`;
    target.style.top = `${node.y}%`;
    updateAnimatedPositions(performance.now());
  };

  const end = () => {
    target.removeEventListener("pointermove", move);
    target.removeEventListener("pointerup", end);
    saveNodes();
  };

  target.addEventListener("pointermove", move);
  target.addEventListener("pointerup", end);
}

function renderDetails() {
  const node = selectedNode();
  if (!node) return;

  els.activeTitle.textContent = node.title;
  els.title.value = node.title;
  els.summary.value = node.summary;
  els.context.value = node.transferableContext;
  els.related.value = node.related.join(", ");
  els.importance.value = node.importance;
  els.importanceText.textContent = node.importance;
}

function renderMetrics() {
  const nodes = state.nodes;
  const average = nodes.length
    ? Math.round(nodes.reduce((total, node) => total + Number(node.importance), 0) / nodes.length)
    : 0;
  const clusterScores = nodes.reduce((scores, node) => {
    scores[node.cluster] = (scores[node.cluster] || 0) + node.importance;
    return scores;
  }, {});
  const strongest = Object.entries(clusterScores).sort((a, b) => b[1] - a[1])[0]?.[0] || "-";

  els.total.textContent = nodes.length;
  els.average.textContent = average;
  els.cluster.textContent = titleCase(strongest);
}

function upsertNodeFromForm(event) {
  event.preventDefault();
  const node = selectedNode();
  if (!node) return;

  node.title = els.title.value.trim() || "Untitled Memory";
  node.summary = els.summary.value.trim();
  node.transferableContext = els.context.value.trim();
  node.related = parseRelated(els.related.value);
  node.importance = Number(els.importance.value);
  render();
}

function addNode() {
  const nextId = Math.max(0, ...state.nodes.map((node) => node.id)) + 1;
  const position = findOpenPosition();
  const node = {
    id: nextId,
    title: "New Memory",
    x: position.x,
    y: position.y,
    cluster: "imported",
    summary: "Describe the memory, preference, project, or useful context here.",
    transferableContext: "This is the concise context to carry into a new AI chat.",
    related: selectedNode() ? [selectedNode().title] : [],
    importance: 60,
  };
  state.nodes.push(node);
  state.selectedId = node.id;
  settleNodeLayout();
  render();
}

function deleteSelectedNode() {
  if (state.nodes.length <= 1) return;
  const deleted = selectedNode();
  state.nodes = state.nodes
    .filter((node) => node.id !== deleted.id)
    .map((node) => ({
      ...node,
      related: node.related.filter((item) => !sameTitle(item, deleted.title)),
    }));
  state.selectedId = state.nodes[0].id;
  render();
}

async function copyContext() {
  const node = selectedNode();
  if (navigator.clipboard?.writeText) {
    await navigator.clipboard.writeText(node.transferableContext);
  } else {
    els.context.focus();
    els.context.select();
    document.execCommand("copy");
  }
  els.copyContext.textContent = "Copied";
  window.setTimeout(() => {
    els.copyContext.textContent = "Copy Context";
  }, 1200);
}

function exportJson() {
  const blob = new Blob([JSON.stringify(state.nodes, null, 2)], {
    type: "application/json",
  });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "neural-context-memory-map.json";
  link.click();
  URL.revokeObjectURL(url);
}

function resetMap() {
  state.nodes = structuredClone(starterNodes);
  state.selectedId = 1;
  localStorage.removeItem(storageKey);
  render();
}

function handleImport(event) {
  const file = event.target.files?.[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = () => {
    const text = String(reader.result || "");
    els.preview.hidden = false;
    els.importedText.textContent = text.slice(0, 1400) + (text.length > 1400 ? "..." : "");

    try {
      const parsed = JSON.parse(text);
      if (Array.isArray(parsed)) {
        state.nodes = normalizeImportedNodes(parsed);
        state.selectedId = state.nodes[0]?.id || 1;
        settleNodeLayout();
        render();
        return;
      }
    } catch {
      // Plain text import falls through to local topic extraction.
    }

    const generated = extractMemories(text);
    if (generated.length) {
      state.nodes.push(...generated);
      state.selectedId = generated[0].id;
      settleNodeLayout();
      render();
    }
  };
  reader.readAsText(file);
  event.target.value = "";
}

async function importSourceContext() {
  const sourceUrl = normalizeUrl(els.sourceUrl.value.trim());
  const pastedText = els.sourceText.value.trim();

  if (!sourceUrl && !pastedText) {
    setSourceStatus("Paste a shared link, copied conversation text, or both.", "error");
    return;
  }

  setSourceStatus("Reading source...", "");
  els.importSource.disabled = true;

  try {
    let sourceText = pastedText;

    if (sourceUrl) {
      try {
        const fetched = await fetchSourceText(sourceUrl);
        sourceText = [pastedText, fetched].filter(Boolean).join("\n\n");
      } catch (error) {
        if (!sourceText) {
          createSourceLinkMemory(sourceUrl);
          setSourceStatus(
            "The link was saved as a source memory, but the provider blocked automatic reading. Paste copied conversation text to extract deeper context.",
            "error",
          );
          return;
        }
      }
    }

    const importedCount = importTextAsMemories(sourceText, sourceUrl, Boolean(sourceUrl));
    setSourceStatus(`Imported ${importedCount} memory ${importedCount === 1 ? "node" : "nodes"}.`, "success");
    els.sourceText.value = "";
  } finally {
    els.importSource.disabled = false;
  }
}

async function fetchSourceText(url) {
  const candidates = [url, `https://r.jina.ai/${url}`];
  let lastError;

  for (const candidate of candidates) {
    try {
      const response = await fetch(candidate, { cache: "no-store" });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const text = await response.text();
      const cleaned = cleanFetchedText(text);
      if (cleaned.length > 80) return cleaned;
    } catch (error) {
      lastError = error;
    }
  }

  throw lastError || new Error("Could not read source");
}

function importTextAsMemories(text, sourceUrl = "", forceSingleBubble = false) {
  const cleanText = cleanFetchedText(text);
  els.preview.hidden = false;
  els.importedText.textContent = cleanText.slice(0, 1400) + (cleanText.length > 1400 ? "..." : "");

  const generated = forceSingleBubble ? [] : extractMemories(cleanText);
  const nodes = generated.length ? generated : [createGeneralSourceMemory(cleanText, sourceUrl)];

  nodes.forEach((node) => {
    node.sourceUrl = sourceUrl || node.sourceUrl || "";
  });

  state.nodes.push(...nodes);
  state.selectedId = nodes[0].id;
  settleNodeLayout();
  render();
  return nodes.length;
}

function createSourceLinkMemory(sourceUrl) {
  const position = findOpenPosition();
  const node = {
    id: nextNodeId(),
    title: `${providerName(sourceUrl)} Shared Link`,
    x: position.x,
    y: position.y,
    cluster: "imported",
    summary:
      "A shared AI conversation link was added. Paste copied conversation text to extract full memory nodes from this source.",
    transferableContext: `Shared conversation source: ${sourceUrl}`,
    related: selectedNode() ? [selectedNode().title] : [],
    importance: 52,
    sourceUrl,
  };
  state.nodes.push(node);
  state.selectedId = node.id;
  settleNodeLayout();
  render();
}

function createGeneralSourceMemory(text, sourceUrl) {
  const summary = summarizeText(text);
  const position = findOpenPosition();
  return {
    id: nextNodeId(),
    title: sourceUrl ? `${providerName(sourceUrl)} Context` : "Imported Context",
    x: position.x,
    y: position.y,
    cluster: "imported",
    summary,
    transferableContext: buildTransferableContext(text, sourceUrl),
    related: selectedNode() ? [selectedNode().title] : [],
    importance: 68,
    sourceUrl,
  };
}

function buildTransferableContext(text, sourceUrl) {
  const cleaned = cleanFetchedText(text);
  const heading = sourceUrl ? `Imported conversation from ${sourceUrl}` : "Imported conversation";
  return `${heading}\n\n${cleaned.slice(0, 5000)}`;
}

function cleanFetchedText(text) {
  const rawText = String(text);
  const embeddedContent = extractSharedPageContent(rawText);

  return (embeddedContent || rawText)
    .replace(/<script[\s\S]*?<\/script>/gi, " ")
    .replace(/<style[\s\S]*?<\/style>/gi, " ")
    .replace(/<[^>]+>/g, " ")
    .replace(/\\n/g, "\n")
    .replace(/\\"/g, '"')
    .replace(/&quot;/g, '"')
    .replace(/&amp;/g, "&")
    .replace(/&lt;/g, "<")
    .replace(/&gt;/g, ">")
    .replace(/\s+/g, " ")
    .trim();
}

function extractSharedPageContent(text) {
  const markers = [
    ['\\"content\\",\\"', '\\",\\"access\\"'],
    ['"content","', '","access"'],
  ];

  for (const [startMarker, endMarker] of markers) {
    const start = text.indexOf(startMarker);
    if (start === -1) continue;

    const contentStart = start + startMarker.length;
    const end = text.indexOf(endMarker, contentStart);
    if (end === -1) continue;

    return text
      .slice(contentStart, end)
      .replace(/\\u003c/g, "<")
      .replace(/\\u003e/g, ">")
      .replace(/\\u0026/g, "&")
      .replace(/\\n/g, "\n")
      .replace(/\\"/g, '"')
      .replace(/\\\\/g, "\\");
  }

  return "";
}

function summarizeText(text) {
  const sentences = cleanFetchedText(text)
    .split(/(?<=[.!?])\s+/)
    .filter((sentence) => sentence.length > 35 && sentence.length < 260);
  return (sentences.slice(0, 3).join(" ") || cleanFetchedText(text).slice(0, 360)).slice(0, 420);
}

function nextNodeId() {
  return Math.max(0, ...state.nodes.map((node) => node.id)) + 1;
}

function normalizeUrl(value) {
  if (!value) return "";
  if (/^https?:\/\//i.test(value)) return value;
  return `https://${value}`;
}

function providerName(sourceUrl) {
  try {
    const host = new URL(sourceUrl).hostname.replace(/^www\./, "");
    if (host.includes("chatgpt")) return "ChatGPT";
    if (host.includes("claude")) return "Claude";
    if (host.includes("gemini")) return "Gemini";
    if (host.includes("perplexity")) return "Perplexity";
    if (host.includes("poe")) return "Poe";
    return titleCase(host.split(".")[0] || "AI");
  } catch {
    return "AI";
  }
}

function setSourceStatus(message, type) {
  els.sourceStatus.textContent = message;
  els.sourceStatus.classList.toggle("is-error", type === "error");
  els.sourceStatus.classList.toggle("is-success", type === "success");
}

function extractMemories(text) {
  const topics = [
    ["AI", "career", "model", "agent", "engineer", "machine learning"],
    ["Python", "Django", "FastAPI", "backend", "API", "code"],
    ["hackathon", "startup", "project", "demo", "portfolio"],
    ["GPU", "Colab", "cloud", "training", "inference"],
    ["laptop", "battery", "portable", "budget", "device"],
  ];

  const sentences = text
    .replace(/\s+/g, " ")
    .split(/(?<=[.!?])\s+/)
    .filter((sentence) => sentence.length > 28);

  return topics
    .map((keywords, index) => {
      const matches = sentences.filter((sentence) =>
        keywords.some((keyword) => sentence.toLowerCase().includes(keyword.toLowerCase())),
      );
      if (!matches.length) return null;

      const title = titleCase(keywords[0]);
      const nextId = nextNodeId() + index;
      const summary = matches.slice(0, 2).join(" ").slice(0, 320);

      return {
        id: nextId,
        title: `Imported ${title}`,
        ...findOpenPosition(index),
        cluster: "imported",
        summary,
        transferableContext: `Imported chat suggests this relevant context: ${summary}`,
        related: [selectedNode()?.title].filter(Boolean),
        importance: clamp(58 + matches.length * 6, 58, 96),
      };
    })
    .filter(Boolean);
}

function findOpenPosition(offset = 0) {
  const candidates = [];
  const rings = [
    [50, 44, 0],
    [50, 44, 19],
    [50, 44, 30],
    [50, 44, 40],
  ];

  rings.forEach(([centerX, centerY, radius], ringIndex) => {
    const count = ringIndex === 0 ? 1 : 10 + ringIndex * 4;
    for (let index = 0; index < count; index += 1) {
      const angle = ((index + offset * 2.3) / count) * Math.PI * 2;
      candidates.push({
        x: clamp(centerX + Math.cos(angle) * radius, 9, 91),
        y: clamp(centerY + Math.sin(angle) * radius, 12, 88),
      });
    }
  });

  return candidates
    .map((candidate) => ({
      ...candidate,
      score: Math.min(
        ...state.nodes.map((node) => distance(candidate.x, candidate.y, node.x, node.y)),
        100,
      ),
    }))
    .sort((a, b) => b.score - a.score)[0];
}

function distance(x1, y1, x2, y2) {
  return Math.hypot(x1 - x2, y1 - y2);
}

function settleNodeLayout(iterations = 28) {
  const minGap = 15;

  for (let step = 0; step < iterations; step += 1) {
    for (let a = 0; a < state.nodes.length; a += 1) {
      for (let b = a + 1; b < state.nodes.length; b += 1) {
        const first = state.nodes[a];
        const second = state.nodes[b];
        const dx = second.x - first.x;
        const dy = second.y - first.y;
        const gap = Math.hypot(dx, dy) || 0.01;

        if (gap >= minGap) continue;

        const push = (minGap - gap) * 0.22;
        const nx = dx / gap;
        const ny = dy / gap;

        first.x = clamp(first.x - nx * push, 8, 92);
        first.y = clamp(first.y - ny * push, 10, 90);
        second.x = clamp(second.x + nx * push, 8, 92);
        second.y = clamp(second.y + ny * push, 10, 90);
      }
    }
  }
}

function animatedPosition(node, time) {
  const phase = node.id * 1.7;
  const speed = time / 1000;
  const strength = state.mode === "focus" ? 0.55 : 1;
  const x = node.x + Math.sin(speed * 0.42 + phase) * 1.2 * strength;
  const y = node.y + Math.cos(speed * 0.36 + phase * 0.8) * 1.45 * strength;
  return { x: clamp(x, 6, 94), y: clamp(y, 8, 92) };
}

function updateAnimatedPositions(time) {
  state.nodes.forEach((node) => {
    const element = state.nodeElements.get(node.id);
    if (!element) return;
    const position = animatedPosition(node, time);
    element.style.left = `${position.x}%`;
    element.style.top = `${position.y}%`;
  });

  state.connectionElements.forEach(({ line, fromId, toId }) => {
    const from = state.nodes.find((node) => node.id === fromId);
    const to = state.nodes.find((node) => node.id === toId);
    if (!from || !to) return;
    const start = animatedPosition(from, time);
    const end = animatedPosition(to, time);
    line.setAttribute("x1", `${start.x}%`);
    line.setAttribute("y1", `${start.y}%`);
    line.setAttribute("x2", `${end.x}%`);
    line.setAttribute("y2", `${end.y}%`);
  });
}

function startMapAnimation() {
  if (state.animationFrame) return;

  const tick = (time) => {
    updateAnimatedPositions(time);
    state.animationFrame = requestAnimationFrame(tick);
  };

  state.animationFrame = requestAnimationFrame(tick);
}

function normalizeImportedNodes(nodes) {
  return nodes.map((node, index) => ({
    id: Number(node.id) || index + 1,
    title: String(node.title || `Imported Memory ${index + 1}`),
    x: clamp(Number(node.x) || 25 + index * 12, 7, 93),
    y: clamp(Number(node.y) || 25 + index * 9, 9, 91),
    cluster: node.cluster || "imported",
    summary: String(node.summary || ""),
    transferableContext: String(node.transferableContext || node.context || ""),
    related: Array.isArray(node.related) ? node.related.map(String) : parseRelated(node.related || ""),
    importance: clamp(Number(node.importance) || 60, 0, 100),
  }));
}

function parseRelated(value) {
  return String(value)
    .split(",")
    .map((item) => item.trim())
    .filter(Boolean);
}

function escapeHtml(value) {
  return String(value).replace(/[&<>"']/g, (char) => {
    const entities = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" };
    return entities[char];
  });
}

function titleCase(value) {
  return String(value)
    .replace(/[-_]/g, " ")
    .replace(/\b\w/g, (char) => char.toUpperCase());
}

function clamp(value, min, max) {
  return Math.max(min, Math.min(max, value));
}

els.search.addEventListener("input", (event) => {
  state.search = event.target.value;
  render();
});

els.importanceFilter.addEventListener("input", (event) => {
  state.minImportance = Number(event.target.value);
  els.importanceValue.textContent = state.minImportance;
  render();
});

els.importance.addEventListener("input", (event) => {
  els.importanceText.textContent = event.target.value;
});

els.modeButtons.forEach((button) => {
  button.addEventListener("click", () => {
    state.mode = button.dataset.mode;
    els.modeButtons.forEach((item) => item.classList.toggle("is-active", item === button));
    render();
  });
});

els.form.addEventListener("submit", upsertNodeFromForm);
els.addNode.addEventListener("click", addNode);
els.deleteNode.addEventListener("click", deleteSelectedNode);
els.copyContext.addEventListener("click", copyContext);
els.importSource.addEventListener("click", importSourceContext);
els.exportJson.addEventListener("click", exportJson);
els.resetMap.addEventListener("click", resetMap);
els.importFile.addEventListener("change", handleImport);

settleNodeLayout();
render();
startMapAnimation();