mlflowuihelper.user.js

// ==UserScript==
// @name         MLflow UI Helper
// @namespace    https://gist.github.com/mgbckr/6079e9ac26b33d9ae393791ce4fd7214
// @version      1.0.0
// @updateURL    https://gist.github.com/mgbckr/6079e9ac26b33d9ae393791ce4fd7214/raw/mlflowuihelper.user.js
// @downloadURL  https://gist.github.com/mgbckr/6079e9ac26b33d9ae393791ce4fd7214/raw/mlflowuihelper.user.js
// @description  Enhances MLflow UI (see https://mlflow.org)
// @author       Martin Becker
// @match        http://localhost:7777
// @match        http://localhost:5000
// @grant        none
// ==/UserScript==

/**
 * Current features:
 * * enable "<right click> + Copy image" for image artifacts 
 *   (yes, it bugged me so much I had to write a script to fix it ;))
 * 
 * Versions:
 * * 1.0.0:
 *   * enable "<right click> + Copy image" for image artifacts
 */
(function() {
    'use strict';
    var mutationObserver = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            switch(mutation.type) {
                case "childList":
                    if (mutation.target.className == "artifact-right") {
                        // TODO: a little hacky
                        let container = document.getElementsByClassName("image-container")[0];
                        container.setAttribute("mlflowuihelper_trigger", true)
                    }
                    break;
                case "attributes":
                    if(mutation.target.className == "image-container") {
                        // get image url
                        var imgUrl = document.getElementsByClassName("image-container")[0].style["background-image"].replace("url(\"","").replace("\")","")
                        // creat image node
                        var img = document.createElement("img");
                        img.src = imgUrl;
                        img.style = "height: 100%"
                        // update image container
                        let container = document.getElementsByClassName("image-container")[0];
                        container.innerHTML = "";
                        container.appendChild(img);
                    }
                    break;
            }
        });
    });

    mutationObserver.observe(document.documentElement, {
        subtree: true,
        attributes: true,
        childList: true
    });

})();