deployer/drawio/dtdesign.js

Draw.loadPlugin(function(ui) {

const WEE = "wee.rys.app";

const BACKEND = "dtb.rys.app";
const EXPECTED_BACKEND_VERSION = 6; // expected backend version

const SPARQL_SERVER   = "fuseki.rys.app"
const SPARQL_ENDPOINT = "/SystemDesignOntology2Layers/"

const dropVocabularyPrefix = str => str.substring(41);
const dropDescriptionPrefix = str => str.substring(30);
const dropArtifactPrefix = str => str.substring(41);
const addFormalismsPrefix = str => "http://ua.be/sdo2l/vocabulary/formalisms/" + str;
const addArtifactPrefix = str => "http://ua.be/sdo2l/description/artifacts/" + str;

const QUERIES = {
  // Query that navigates the given link from the given source element, and returns the IRI and most-concrete-type of the target element.
  // If `reverse` is true, then incoming links are returned instead.
  getOutgoingLink: (iri, link_type, reverse=false) => `\
PREFIX object_diagram: <http://ua.be/sdo2l/vocabulary/formalisms/object_diagram#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX pt: <http://ua.be/sdo2l/vocabulary/formalisms/processtraces#>

SELECT DISTINCT ?element ?type
WHERE {
  ${reverse ? `?element <${link_type}> <${iri}>` : `<${iri}> <${link_type}> ?element`}.
  ?element a ?type .
  {
    ?type rdfs:subClassOf object_diagram:Object .
  } UNION {
    ?type rdfs:subClassOf pt:Event .
  } UNION {
    ?type rdfs:subClassOf pt:Artifact .
  }
  FILTER(NOT EXISTS {
    ?more_concrete_type rdfs:subClassOf ?type .
    ?element a ?more_concrete_type .
    FILTER(?more_concrete_type != ?type)
  })
  FILTER(NOT EXISTS {
    ?more_concrete_link_type rdfs:subPropertyOf <${link_type}> .
    ${reverse ? `?element ?more_concrete_link_type <${iri}>` : `<${iri}> ?more_concrete_link_type ?element`} . 
    FILTER(?more_concrete_link_type != <${link_type}>)
  })
}`,

  // Query that gets the IRI and most-concrete-type of a given drawio cell.
  getCellStuff: (cellId) => `\
PREFIX drawio: <http://ua.be/sdo2l/vocabulary/formalisms/drawio#>
PREFIX object_diagram: <http://ua.be/sdo2l/vocabulary/formalisms/object_diagram#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>

SELECT DISTINCT ?element ?type
WHERE {
  ?element drawio:hasDrawioId "${cellId}" .
  ?element a ?type .
  ?type rdfs:subClassOf object_diagram:Object .
  NOT EXISTS {
    ?more_concrete_type rdfs:subClassOf ?type .
    ?element a ?more_concrete_type .
    FILTER(?more_concrete_type != ?type)
  }
}`,

  // Query that, for a given cell IRI, gets the name of the diagram containing the cell, and the ID of the cell.
  getDiagramAndCellId: cellIri => `\
PREFIX drawio: <http://ua.be/sdo2l/vocabulary/formalisms/drawio#>
PREFIX object_diagram: <http://ua.be/sdo2l/vocabulary/formalisms/object_diagram#>

SELECT DISTINCT ?diagramName ?cellId
WHERE {
  <${cellIri}> drawio:hasDrawioId ?cellId .
  <${cellIri}> object_diagram:inModel ?model .
  ?model object_diagram:hasName ?diagramName .
}`,

  // Query that gets ALL subclass relations.
  getSubClassRelations: `
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>

SELECT DISTINCT ?subclass ?superclass
WHERE {
  ?subclass rdfs:subClassOf ?superclass
}`,

  getAllGraphs: `
SELECT ?g (COUNT(*) as ?count) {GRAPH ?g {?s ?p ?o}} GROUP BY ?g
`,

  getArtifactFilename: artifactIri => `\
PREFIX pt: <http://ua.be/sdo2l/vocabulary/formalisms/processtraces#>
PREFIX pm: <http://ua.be/sdo2l/vocabulary/formalisms/pm#>
PREFIX base: <http://ua.be/sdo2l/vocabulary/base/base#>

SELECT DISTINCT ?filename ?formalismName
WHERE {
  <${artifactIri}> pt:hasLocation ?filename .
  <${artifactIri}> pt:relatesTo ?pmArtifact .
  ?pmArtifact pm:hasType ?ftgFormalism .
  ?ftgFormalism base:hasGUID ?formalismName .
}`,

  getModels: `\
PREFIX object_diagram: <http://ua.be/sdo2l/vocabulary/formalisms/object_diagram#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX cs_as: <http://ua.be/sdo2l/vocabulary/formalisms/cs_as#>

SELECT DISTINCT ?model ?type
WHERE {
  ?model a object_diagram:Model .
  ?model a ?type .
  ?type rdfs:subClassOf object_diagram:Model .
  FILTER(NOT EXISTS {
    ?model a cs_as:CorrespondenceModel .
  })
  FILTER(NOT EXISTS {
    ?more_concrete_type rdfs:subClassOf ?type .
    ?model a ?more_concrete_type .
    FILTER(?more_concrete_type != ?type)
  })
}
`,

  getProperty: (iri, propertyIri) => `\
SELECT DISTINCT ?value
WHERE {
  <${iri}> <${propertyIri}> ?value .
}
`,

  insertTraceLink: (fromIri, toIri) => `\
PREFIX trace: <http://ua.be/sdo2l/vocabulary/formalisms/traceability_model#>
INSERT DATA {
  GRAPH <http://ua.be/sdo2l/description/traces> {
    <${fromIri}> trace:traceLinkTo   <${toIri}> .
    <${fromIri}> trace:traceLinkFrom <${toIri}> .
  }
}
`,
};



// When rebuilding OML, all graphs will be deleted from Fuseki, except for the following (which are not sourced from OML, but inserted directly as RDF triples into Fuseki)
GRAPHS_NOT_TO_DELETE = [
  "http://ua.be/sdo2l/description/traces",
];

const typeToDescription = new Map([
  ["ftg#Model", async (element, type, getProperty) => getProperty("object_diagram#hasName").then(modelName => `ftg "${modelName}"`)],
  ["xopp#Text", async (element, type, getProperty) => getProperty("xopp#hasText").then(text => `text "${text}"`)],
  ["xopp#Model", async (element, type, getProperty) => getProperty("object_diagram#hasName").then(modelName => `xournal++ model "${modelName}"`)],
  ["drawio#Cell", async (element, type, getProperty) => getProperty("drawio#hasDrawioId").then(id => `cell "${id}"`)],
  ["drawio#Vertex", async (element, type, getProperty) => getProperty("drawio#hasDrawioId").then(id => `vertex "${id}"`)],
  ["drawio#Edge", async (element, type, getProperty) => getProperty("drawio#hasDrawioId").then(id => `edge "${id}"`)],
  ["drawio#Model", async (element, type, getProperty) => getProperty("object_diagram#hasName").then(modelName => `drawio model "${modelName}"`)],
  ["pm#Model", async (element, type, getProperty) => getProperty("object_diagram#hasName").then(modelName => `process model "${modelName}"`)],
  ["pm#Activity", async (element, type, getProperty) => element],
  ["pm#Artifact", async (element, type, getProperty) => element],
  ["pm#CtrlInputPort", async (element, type, getProperty) => getProperty("pm#hasName").then(portname => `ctrl inport "${portname}"`)],
  ["pm#CtrlOutputPort", async (element, type, getProperty) => getProperty("pm#hasName").then(portname => `ctrl outport "${portname}"`)],
  ["pm#DataInputPort", async (element, type, getProperty) => getProperty("pm#hasName").then(portname => `data inport "${portname}"`)],
  ["pm#DataOutputPort", async (element, type, getProperty) => getProperty("pm#hasName").then(portname => `data outport "${portname}"`)],
])

// (Hardcoded) link types exposed to the user.
const typeToLinkType = new Map([
  ["object_diagram#Object", [
    {
      relation: "cs_as#parsedAs",
      description: `Is parsed as`,
    },
    {
      relation: "cs_as#renderedAs",
      description: `Is rendered as`,
    },
    // Outcommented, because it's not an interesting relation:
    {
      relation: "object_diagram#inModel",
      description: `Is part of`,
    },
    {
      relation: "traceability_model#traceLinkTo",
      description: `Trace-link (outgoing)`,
    },
    {
      relation: "traceability_model#traceLinkFrom",
      description: `Trace-link (incoming)`,
    },
  ]],
  ["drawio#Model", [
    {
      relation: "drawio#hasRootCell",
      description: `Has root`,
    },
  ]],
  // Outcommented, blows up:
  // ["drawio#Cell", [
  //   {
  //     relation: "drawio#hasChild",
  //     description: `Has child`,
  //   },
  // ]],
  ["pm#Activity", [
    {
      relation: "pm#isTransformation",
      description: `Is typed by`,
    },
    {
      relation: "pm#hasPort",
      description: `Has`,
    },
  ]],
  ["pm#element", [
    {
      relation: "processtraces#relatesTo",
      description: `Enacted by`,
      reverse: true,
    },
  ]],
  ["processtraces#element", [
    {
      relation: "processtraces#relatesTo",
      description: `Enactment of`,
    },
    // pt-element is not a sub-type of 'Object', so we must repeat this:
    {
      relation: "cs_as#renderedAs",
      description: `Is rendered as`,
    },
  ]],
  ["pm#Artifact", [
    {
      relation: "pm#hasType",
      description: `Is typed by`,
    },
  ]],
  ["ftg#Transformation", [
    {
      relation: "pm#occursAsActivity",
      description: `Occurs as`,
    }
  ]],
  ["ftg#Formalism", [
    {
      relation: "pm#occursAsArtifact",
      description: `Occurs as`,
    },
  ]],
  ["xopp#Model", [
    {
      relation: "xopp#hasPage",
      description: `Has page`,
    },
  ]],
  ["xopp#Page", [
    {
      relation: "xopp#hasLayer",
      description: `Has layer`,
    },
  ]],  
  ["xopp#Layer", [
    {
      relation: "xopp#hasElement",
      description: `Has element`,
    },
  ]],
]);

// mapping from class-IRI to array of superclass-IRIs
const superclasses = new Map(); // map is populated as soon as the plugin is loaded

function getQueries(type) {
  const result = [].concat(
    typeToLinkType.get(dropVocabularyPrefix(type)) || [],
    ... (superclasses.get(type) || []).map(supertype => typeToLinkType.get(dropVocabularyPrefix(supertype)) || []));
  console.log("getQueries,type=",type,"superclasses=",superclasses.get(type),"result=",result);
  return result;
}

function querySPARQL(query) {
  const body = new URLSearchParams();
  body.append("query", query);
  return fetch(SPARQL_SERVER+SPARQL_ENDPOINT, {
    headers: new Headers({"Content-Type": "application/x-www-form-urlencoded"}),
    method: "POST",
    body,
  })
  .then(res => res.json())
  .then(json => {
    console.log("Query:\n"+query+"\Result:",json.results.bindings);
    return json.results.bindings;
  })  
}

function updateSPARQL(update) {
  const body = new URLSearchParams();
  body.append("update", update);
  return fetch(SPARQL_SERVER+SPARQL_ENDPOINT, {
    headers: new Headers({"Content-Type": "application/x-www-form-urlencoded"}),
    method: "POST",
    body,
  })
  .then(res => {
    console.log("Update:\n"+update+"\Result:",res);
  })
}


const defaultSettings = {
  dialogPosX: 100,
  dialogPosY: 100,
  dialogWidth: 240,
  dialogHeight: 400,
};

fetch(BACKEND+"/version")
.then(response => response.json())
.catch(() => 0) // parsing failed - probably backend doesn't even have a version
.then(version => {

  if (version !== EXPECTED_BACKEND_VERSION) {
    alert("Incorrect DTDesign Python backend version.\nExpected: " + EXPECTED_BACKEND_VERSION + ", got: " + version + ".\nRefusing to load plugin. Please upgrade :)");
    return;
  }
  else {
    console.log("Backend version is ", version);
    console.log("All good.")
  }

  // Loads all 'rdfs:subClassOf' relations and stores them in a mapping.
  function loadSuperclasses() {
    return querySPARQL(QUERIES.getSubClassRelations)
    .then(results => {
      for (const {subclass, superclass} of results) {
        const superclasslist = superclasses.get(subclass.value) || (() => {
          const list = [];
          superclasses.set(subclass.value, list);
          return list;
        })();
        superclasslist.push(superclass.value);
      }
    });    
  }

  loadSuperclasses();

  // Override context menu when right-clicking somewhere in the diagram:
  const oldFactoryMethod = ui.editor.graph.popupMenuHandler.factoryMethod;
  ui.editor.graph.popupMenuHandler.factoryMethod = function(menu, cell, evt) {
    const modelverseMenu = menu.addItem("Knowledge Graph...", null, null);
    const createLinkMenu = menu.addItem("Create traceability link to...", null, null);
    menu.addSeparator();
    oldFactoryMethod.apply(this, arguments);

    const entry = (element, type) => element+':'+type;

    function addMenuItem(element, type, maxRecursion, parentMenuItem, description, alreadyVisited, onClick) {
      if (alreadyVisited.has(entry(element, type))) {
        return; // don't go in circles
      }
      const shortType = dropVocabularyPrefix(type);
      const itemDescriptionGen = typeToDescription.get(shortType) || (async () => shortType);
      itemDescriptionGen(dropArtifactPrefix(element), shortType, property => {
        return querySPARQL(QUERIES.getProperty(element, addFormalismsPrefix(property)))
        .then(results => {
          if (results.length > 0) return results[0].value.value;
          else return "";
        });
      })
      .then(itemDescription => {
        const menuItemText = description + ' ' + itemDescription;
        let createdMenuItem;
        // If the menu item is a (subtype of a) drawio cell, then clicking on it will take us to that cell in drawio.
        if (onClick) {
          createdMenuItem = menu.addItem(menuItemText, null, () => onClick(element), parentMenuItem);
        }
        else if ((superclasses.get(type) || []).some(t => t.endsWith("drawio#Cell"))) {
          createdMenuItem = menu.addItem(menuItemText, null, () => goto(element), parentMenuItem);
        }
        else {
          createdMenuItem = menu.addItem(menuItemText, null, null, parentMenuItem);
        }
        if ((superclasses.get(type) || []).some(t => t.endsWith("processtraces#Artifact"))) {
          querySPARQL(QUERIES.getArtifactFilename(element))
          .then(results => {
            for (const {filename, formalismName} of results) {
              menu.addItem(`File "${filename.value}"`, null, () => (createDownloadHandler(formalismName.value))(filename.value), createdMenuItem);
            }
          })
        }
        alreadyVisited.add(entry(element, type));
        if (maxRecursion <= 0) {
          return;
        }
        addSubmenuItems(element, type, createdMenuItem, maxRecursion, alreadyVisited, onClick);        
      })
    }
    function addSubmenuItems(element, type, parentMenuItem, maxRecursion, alreadyVisited, onClick) {
      const queries = getQueries(type);
      for (const {relation, description, reverse} of queries) {
        querySPARQL(QUERIES.getOutgoingLink(element, "http://ua.be/sdo2l/vocabulary/formalisms/"+relation, reverse))
        .then(results => {
          for (const {element, type} of results) {
            addMenuItem(element.value, type.value, maxRecursion-1, parentMenuItem, description, alreadyVisited, onClick);
          }
        })
      }
    }

    // Populate ModelVerse submenu asynchronously:
    if (cell && cell.vertex) {
      querySPARQL(QUERIES.getCellStuff(cell.id))
      .then(results => {
        for (const {element, type} of results) {
          const alreadyVisited = new Set([[element.value, type.value]]);
          addSubmenuItems(element.value, type.value, modelverseMenu, 3, alreadyVisited);

          querySPARQL(QUERIES.getModels)
          .then(results => {
            const alreadyVisited2 = new Set([[element.value, type.value]]);
            for (const {model, type} of results) {
              addMenuItem(model.value, type.value, 3, createLinkMenu, "Model",
                alreadyVisited2,
                targetIri => updateSPARQL(QUERIES.insertTraceLink(element.value, targetIri)));
            }
          });
        }
      })
    }
  }


  function getSetting(prop) {
    const result = localStorage.getItem("dtdesign-"+prop);
    if (result !== null) {
      return JSON.parse(result);
    }
    return defaultSettings[prop];
  }
  function setSetting(prop, value) {
    localStorage.setItem("dtdesign-"+prop, JSON.stringify(value));
  }

  const errWndDiv = document.createElement('div');
    // wndDiv.style.color = "red";
    errWndDiv.style.overflow = "auto";
    errWndDiv.style.height = "100%";
    errWndDiv.style.padding = '12px 14px 8px 14px';
  const errWnd = new mxWindow("Error Details",
    errWndDiv, 300, 300, 300, 360, true, true);
    errWnd.destroyOnClose = false;
    errWnd.setMaximizable(false);
    errWnd.setResizable(true);
    errWnd.setClosable(true);

  function getErrDetailsAnchor() {
    const anchor = document.createElement('a');
      anchor.innerText = "Details";
      anchor.href = "#";
      anchor.onclick = function() {
        errWnd.show();
      };
    return anchor;
  }

  let rebuildOMLPromise = Promise.resolve();

  function rejectIfStatusAbove400(httpResponse) {
    if (httpResponse.status >= 400) {
      return httpResponse.text().then(text => {
        return Promise.reject(text);
      });
    }
    return Promise.resolve();
  }

  function rebuildOMLForced() {
    return querySPARQL(QUERIES.getAllGraphs)
    .then(results => {
      const graphsToDelete = results
        .map(({g,count}) => g.value)
        .filter(graphIri => !GRAPHS_NOT_TO_DELETE.includes(graphIri));
      // Delete all graphs first
      return Promise.all(graphsToDelete.map(graphToDelete =>
        fetch(SPARQL_SERVER+SPARQL_ENDPOINT+"?graph="+graphToDelete, {
          method: "DELETE",
        })
        .then(rejectIfStatusAbove400)
      ))
      .then(() => {
        // Build OML and load the resulting .owl files:
        return fetch(BACKEND+"/owl_load", {
          method: "PUT",
        })
        .then(rejectIfStatusAbove400)
      });
    });
  }

  function rebuildOMLIncremental() {
    // Backend takes care of all the heavy work:
    return fetch(BACKEND+"/owl_reload_incremental", { method: "PUT", })
    .then(rejectIfStatusAbove400);
  }

  function showRebuildOMLResult(rebuildAsyncCallback) {
    // only perform one rebuild at a time -> queue rebuilds.
    rebuildOMLPromise = rebuildOMLPromise.then(() => {
      omlStatusDiv.style.color = null;
      omlStatusDiv.innerText = "Rebuilding OML...";
      return rebuildAsyncCallback()
      .then(() => {
        omlStatusDiv.innerText = "✓ Built OML";
        omlStatusDiv.style.color = "green";
      })
      .catch(errText => {
        errWndDiv.innerText = errText;
        omlStatusDiv.innerHTML = "✗ Failed to build OML ";
        omlStatusDiv.style.color = "red";
        omlStatusDiv.appendChild(getErrDetailsAnchor());        
      });
    });
  }

  function uploadResponseHandler(statusDiv, refreshListCallback) {
    statusDiv.innerHTML = "Saving ...";
    statusDiv.style.color = null;
    omlStatusDiv.innerHTML = "";

    return res => {
      if (res.status >= 200 && res.status < 300) {
        errWndDiv.innerText = "No error.";
        res.json().then(parsedAs => {
          statusDiv.innerHTML = "✓ Generated OML (" + parsedAs.join(", ") + ")";
          statusDiv.style.color = "green";
        });
        refreshListCallback();
        showRebuildOMLResult(rebuildOMLIncremental);
      }
      else {
        statusDiv.innerHTML = "✗ Failed to save/parse. ";
        statusDiv.appendChild(getErrDetailsAnchor());
        res.text().then(text => {
          errWndDiv.innerText = text;
        });
        statusDiv.style.color = "red";
      }
    };
  }

  let highlight;

  // Given a cell IRI, open the diagram that contains the cell
  function goto(cellIri) {
    querySPARQL(QUERIES.getDiagramAndCellId(cellIri))
    .then(([{diagramName, cellId}]) => {
      // drop the "_drawio" at the end:
      const actualDiagramName = diagramName.value.substring(0, diagramName.value.length-7);
      loadPage(actualDiagramName)
      .then(() => {
        if (highlight) {
          highlight.destroy();
        }
        const [cell] = ui.editor.graph.getCellsById([cellId.value]);
        highlight = new mxCellHighlight(ui.editor.graph, "#eb34e8", 6);
        highlight.highlight(ui.editor.graph.view.getState(cell));        
      })
    })
  }

  const wndDiv = document.createElement('div');
    wndDiv.style.userSelect = 'none';
    wndDiv.style.height = '100%';
    wndDiv.style.color = "rgb(112, 112, 112)";
    wndDiv.style.overflow = 'auto';
    wndDiv.classList.add("geFormatContainer");

  const omlDiv = document.createElement('div');
    omlDiv.classList.add('geFormatSection')
    omlDiv.style.padding = '12px 14px 8px 14px';
    wndDiv.appendChild(omlDiv);

  const omlLabel = document.createElement('div');
    omlLabel.innerText = "OML Status";
    omlLabel.style.fontWeight = 'bold';
    omlDiv.appendChild(omlLabel);

  const omlStatusDiv = document.createElement('div');
    omlStatusDiv.innerText = "Ready";
    omlDiv.appendChild(omlStatusDiv);

  const omlIncButton = mxUtils.button("Incremental rebuild (faster)", function() {
    showRebuildOMLResult(rebuildOMLIncremental);
  });
    omlDiv.appendChild(omlIncButton);
  const omlForceButton = mxUtils.button("Forced rebuild (slow)", function() {
    showRebuildOMLResult(rebuildOMLForced);
  });
    omlDiv.appendChild(omlForceButton);

  function createSavePageDiv(refreshModelsCallback) {
    const savePageDiv = document.createElement('div');
    const saveButton = mxUtils.button("Save Current Page", function() {
      const responseHandler = uploadResponseHandler(saveStatusDiv, refreshModelsCallback);
      const headers = new Headers({
        "Content-Type": "application/xml",
      });
      const serializer = new XMLSerializer();
      const xmlnode = ui.getXmlFileData(
        null,  // ignore selection
        true,  // only current page
        true); // uncompressed
      const diagram = xmlnode.children[0]
      const diagramName = diagram.getAttribute("name");
      const xml = serializer.serializeToString(diagram);
      return fetch(BACKEND + "/files/drawio/"+diagramName, {
        method: "PUT",
        headers,
        body: xml,
      })
      .then(responseHandler);
    });
      saveButton.style.width = "100%";
      saveButton.style.marginTop = "4px";
      saveButton.style.marginBottom = "2px";
      savePageDiv.appendChild(saveButton);
    const saveStatusDiv = document.createElement('div');
      savePageDiv.appendChild(saveStatusDiv);
    return savePageDiv;
  }
  function createUploadDiv(modelType, mimeType) {
    return function(refreshModelsCallback) {
      const uploadDiv = document.createElement('div');
      const uploadLabel = document.createElement('label');
        uploadLabel.innerText = "Upload "+modelType+":";
        uploadLabel.for = "uploadButton";
        uploadDiv.appendChild(uploadLabel);
      const uploadButton = document.createElement('input');
        uploadButton.type = "file";
        uploadButton.id = "uploadButton";
        uploadButton.style.width = "100%";
        uploadButton.style.marginTop = "4px";
        uploadButton.style.marginBottom = "2px";
        uploadButton.accept = mimeType;
        // uploadButton.multiple = true;
        uploadButton.onchange = e => {
          const responseHandler = uploadResponseHandler(statusDiv, refreshModelsCallback);
          Array.from(e.target.files).map(file => {
            fetch(BACKEND+"/files/"+modelType+"/"+file.name, {
              method: "PUT",
              body: file,
            })
            .then(responseHandler);
          });
        };
        uploadDiv.appendChild(uploadButton);
      const statusDiv = document.createElement('div');
        uploadDiv.appendChild(statusDiv);
      return uploadDiv;
    };
  }
  function createDownloadHandler(modelType) {
    return modelName => {
      const a = document.createElement('a');
      document.body.appendChild(a);
      a.setAttribute('href', BACKEND + "/files/" + modelType + "/" + modelName);
      a.setAttribute('download', modelName);
      a.setAttribute('target', "_blank"); // for browsers that don't support the 'download' attribute, tell them to open the link in a new tab
      a.click();
      document.body.removeChild(a);
    };
  }
  function createModelList(modelType, createUploadDiv, downloadButtonLabel, onDownloadClick, extraStuff) {
    const containerDiv = document.createElement('div');
      containerDiv.classList.add('geFormatSection')
      containerDiv.style.padding = '12px 14px 8px 14px';
      wndDiv.appendChild(containerDiv);
    const labelDiv = document.createElement('div');
      labelDiv.innerText = "Models — " + modelType;
      labelDiv.style.fontWeight = 'bold';
      containerDiv.appendChild(labelDiv);
    const modelListDiv = document.createElement('div');
      containerDiv.appendChild(modelListDiv);

    // Refreshes the list of models shown in the ModelVerse window
    function refreshList() {
      fetch(BACKEND + "/files/" + modelType, {
        method: "GET",
      })
      .then(res => res.json())
      .then(models => {
        if (models.length > 0) {
          modelListDiv.replaceChildren(...models.sort().map(modelName => {
            const div = document.createElement('div');
              div.style.padding = '3px 0px';
            const loadButton = mxUtils.button(downloadButtonLabel, () => onDownloadClick(modelName));
              loadButton.style.marginLeft = "12px";
            div.appendChild(document.createTextNode(modelName));
            div.appendChild(loadButton);
            const extraStuffWrapper = document.createElement('div');
            div.appendChild(extraStuffWrapper);
            function refreshExtraStuff() {
              extraStuff(modelName)
              .then(extraDiv =>  {
                if (extraDiv) {
                  extraStuffWrapper.replaceChildren(extraDiv);
                  extraDiv.appendChild(mxUtils.button("⟳", refreshExtraStuff));
                }
              });
            }
            refreshExtraStuff();
            return div;
          }));
        }
        else {
          const div = document.createElement('div');
              div.style.padding = '3px 0px';
          div.appendChild(document.createTextNode("No "+modelType+" models."));
          modelListDiv.replaceChildren(div);
        }
      });
    }
    refreshList();

    containerDiv.appendChild(createUploadDiv(refreshList));

    return refreshList;
  }

  function createPTrenderCallback(startTraceIri) {
    return () => {
      return fetch(BACKEND+"/render_pt/"+encodeURIComponent(startTraceIri))
      .then(treatResponseAsPageXml)
      .then(() => {
        refreshDrawioModelList();
        showRebuildOMLResult(rebuildOMLIncremental);
      });
    }
  }

  const extraPMstuff = modelName => {
    if (modelName.endsWith(":pm")) {
      const pmModel = addArtifactPrefix(modelName.substr(0, modelName.length-3)+"_pm#model");
      const urlEncoded = encodeURIComponent(pmModel);
      const enactButton = mxUtils.button("Start New...", ()=>{
        // open WEE in new tab:
        window.open(WEE+"/gettraces?iri="+urlEncoded, "_blank");
      });
      const shortTraceName = traceIri => dropArtifactPrefix(traceIri).split('#').findLast(str => str.length > 0);
      return Promise.all([
        fetch(WEE+"/traces/active/"+urlEncoded)
        .then(response => response.json())
        .then(enactments => {
          return enactments.map((enactment, i) => mxUtils.button(`Open "${shortTraceName(enactment.iri)}" (ongoing)`, createPTrenderCallback(enactment.iri)))
        }),
        fetch(WEE+"/traces/finished/"+urlEncoded)
        .then(response => response.json())
        .then(enactments => {
          return enactments.map((enactment, i) => mxUtils.button(`Open "${shortTraceName(enactment.iri)}" (finished)`, createPTrenderCallback(enactment.iri)))
        }),
      ])
      .then(([ongoing, finished]) => {
        const pmDiv = document.createElement('div');
        pmDiv.style.marginLeft = '8px';
        pmDiv.style.borderWidth = '1px';
        pmDiv.style.borderStyle = 'solid';
        pmDiv.appendChild(document.createTextNode("PM Enactment: "));
        pmDiv.appendChild(enactButton);
        if (ongoing.length > 0) {
          ongoing.forEach(o => pmDiv.appendChild(o));
        }
        if (finished.length > 0) {
          finished.forEach(f => pmDiv.appendChild(f));
        }
        return pmDiv;
      });
    }
    return Promise.resolve(null);
  };
  const noExtraStuff = () => Promise.resolve(null);

  const refreshDrawioModelList = createModelList("drawio", createSavePageDiv, "Open", modelName => loadPage(modelName), extraPMstuff);
  createModelList("xopp", createUploadDiv("xopp", "application/x-xopp,.xopp"), "Download", createDownloadHandler("xopp"), noExtraStuff);
  createModelList("csv", createUploadDiv("csv", "text/csv,.csv"), "Download", createDownloadHandler("csv"), noExtraStuff);
  createModelList("file", createUploadDiv("file", ""), "Download", createDownloadHandler("file"), noExtraStuff);

  // Load a model and add it as a new page to the editor
  function treatResponseAsPageXml(response) {
    return response.text()
    .then(xmltext => {
      // console.log(xmltext);
      const parser = new DOMParser();
      const doc = parser.parseFromString(xmltext, "application/xml");
      const node = doc.documentElement;
      const page = new DiagramPage(node);
      // if page with same name already exists, erase it:
      ui.pages = ui.pages.filter(pg => pg.node.getAttribute("name") != page.node.getAttribute("name"));
      ui.pages.push(page);
      ui.currentPage = page;
      ui.editor.setGraphXml(node);
    });
  }

  function loadPage(pageName) {
    return fetch(BACKEND + "/files/drawio/" + pageName)
    .then(treatResponseAsPageXml);
  }

  // make sure the plugin popup window is always within the bounds of the browser window:
  const dialogPosX = x => Math.max(0, Math.min(x, window.innerWidth - getSetting("dialogWidth")));
  const dialogPosY = y => Math.max(0, Math.min(y, window.innerHeight - getSetting("dialogHeight")));

  const wnd = new mxWindow("ModelVerse", wndDiv,
    dialogPosX(getSetting("dialogPosX")),
    dialogPosY(getSetting("dialogPosY")),
    getSetting("dialogWidth"),
    getSetting("dialogHeight"),
    true, true);
    wnd.destroyOnClose = false;
    wnd.setMaximizable(false);
    wnd.setResizable(true);
    wnd.setClosable(false);
    // remember window geometry in localstorage:
    wnd.addListener('resize', function(wnd) {
      // couldn't find a better way to get the new window size but the following:
      const parsepx = px => parseInt(px.substring(0, px.length-2));
      setSetting("dialogWidth", parsepx(wnd.div.style.width));
      setSetting("dialogHeight", parsepx(wnd.div.style.height));
    })
    wnd.addListener('move', function() {
      setSetting("dialogPosX", wnd.getX());
      setSetting("dialogPosY", wnd.getY());
    })

  wnd.show();

  window.onresize = event => {
    // make sure popup window remains within browser window bounds:
    const newX = dialogPosX(getSetting("dialogPosX"));
    const newY = dialogPosY(getSetting("dialogPosY"));
    wnd.div.style.left = newX + "px";
    wnd.div.style.top = newY + "px";
    // setSetting("dialogPosX", newX);
    // setSetting("dialogPosY", newY);
  }

}) // end of promise that checks the backend version.
})