betterImpex.js

gistfile1.txt

// ==UserScript==
// @name         Better IMPEX
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://impex.us-central1.gcp.commercetools.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=commercetools.com
// @require      https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

   // Add a button to the page that will render the network when clicked
    // Create a container div for the network
var networkDiv = document.createElement("div");
networkDiv.id = "mynetwork";
// Add the container div to the page
document.body.appendChild(networkDiv);
var renderBtn = document.createElement("button");
renderBtn.innerHTML = "Render Network";
renderBtn.onclick = function() {
  var jsonData = document.getElementById("copyToTextarea").value;
  console.log("jsonData:", jsonData);
  var data = JSON.parse(jsonData);
  var nodes = new vis.DataSet(data.results.map(result => {
    return {
      id: result.id,
      label: result.masterData.current.name.en
    };
  }));
  var edges = new vis.DataSet([]);
  var container = document.getElementById("mynetwork");
  var networkData = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var network = new vis.Network(container, networkData, options);
};

// Add the button to the page
var wrapper = document.createElement("div");
wrapper.appendChild(renderBtn);
document.body.insertBefore(wrapper, document.body.firstChild);

*/

// Create a container div for the network
var networkDiv = document.createElement("div");
networkDiv.id = "mynetwork";
// Add the container div to the page
document.body.appendChild(networkDiv);

// Add a button to the page that will render the network when clicked
var renderBtn = document.createElement("button");
renderBtn.innerHTML = "Render Network";
renderBtn.onclick = function() {
  var jsonData = document.getElementById("copyToTextarea").value;
  console.log("jsonData:", jsonData);
  var data = JSON.parse(jsonData);

  // Create the nodes and edges data sets
  var nodes = new vis.DataSet(data.results.map(result => {
    return {
      id: result.id,
      label: result.masterData.current.name.en
    };
  }));
  var edges = new vis.DataSet([]);

  // Create the network
  var container = document.getElementById("mynetwork");
  var network = new vis.Network(container, { nodes, edges });

  // Add an event listener to show information about the selected node
  network.on("click", function(params) {
    if (params.nodes.length > 0) {
      var nodeId = params.nodes[0];
      var node = nodes.get(nodeId);
      var overlay = document.createElement("div");
        overlay.innerHTML = "<h2>" + node.label + "</h2>";
        overlay.style.top = params.pointer.DOM.y + "px";
        overlay.style.left = params.pointer.DOM.x + "px";
      overlay.classList.add("overlay");
      overlay.innerHTML = "<h2>" + node.label + "</h2>";
      container.appendChild(overlay);

      // Add an event listener to remove the overlay when the user clicks outside of it
      window.addEventListener("click", function(event) {
        if (!overlay.contains(event.target)) {
          overlay.remove();
        }
      });
    }
  });
};

// Add the button to the page
var wrapper = document.createElement("div");
wrapper.appendChild(renderBtn);
document.body.insertBefore(wrapper, document.body.firstChild);


})();