Add Plotly-based OWParallelCoordinates

MANIFEST.in

@@ -1,3 +1,4 @@
# From https://docs.python.org/2/distutils/sourcedist.html#commands
include README.md
recursive-include orangecontrib *.svg icons/*
recursive-include orangecontrib *.html *.js *.css

orangecontrib/prototypes/widgets/_owparallelcoordinates/script.js

@@ -0,0 +1,66 @@
NodeList.prototype.forEach = Array.prototype.forEach;


function on_plotly_restyle() {
    console.log('restyle');
    pybridge.update_axes_info(container.data[0].dimensions.map(function(dim) {
        return [dim.label, dim.constraintrange || []]
    }));
}


function on_plotly_afterplot() {
    ellipsize_labels();
    add_discrete_legend();
}


/**
 * Ellipsize dimension labels
 *
 * Remove once this is fixed:
 * https://github.com/plotly/plotly.js/issues/1703
 */
function ellipsize_labels() {
    var MAX_WIDTH = window.innerWidth / (container.data[0].dimensions.length + 1) - 20;
    console.log('relayout');
    document.querySelectorAll('.axisHeading .axisTitle').forEach(function (el) {
        el.textContent = el.__data__.label;

        while (el.textContent.length > 2 &&
               el.getComputedTextLength() > MAX_WIDTH) {
            el.textContent = el.textContent.slice(0, -2);
            el.textContent += '…';
        }

        // Add <title> element so tooltip works in SVG
        var title = document.createElementNS("http://www.w3.org/2000/svg", "title");
        el.insertBefore(title, el.firstChild);
        title.textContent = el.__data__.label;
    });
}


/**
 * Show or hide discrete legend. Expects window.discrete_colorbar config object.
 *
 * Remove once this is fixed:
 * https://github.com/plotly/plotly.js/issues/1968
 */
function add_discrete_legend() {
    // If not discrete colorbar, nothing to do here
    if (Object.keys(window.discrete_colorbar || {}).length === 0) {
        document.getElementById('customjs-container').innerHTML = '';
        return;
    }

    var html = '',
        colors = discrete_colorbar.colors,
        values = discrete_colorbar.values,
        values_short = discrete_colorbar.values_short;
    for (var i=0; i < colors.length; ++i) {
        html += '<div title="' + values[i].replace('"', '&quot;') + '"><span style="background:' + colors[i] + '"></span>&nbsp;' + values_short[i].replace('<', '&lt;') + '</div>';
    }
    html = '<div class="discrete-legend"><span class="title">' + discrete_colorbar.title + '</span><br>' + html + '</div>';
    document.getElementById('customjs-container').innerHTML = html;
}

orangecontrib/prototypes/widgets/_owparallelcoordinates/style.css

@@ -0,0 +1,56 @@
.axisTitle,
.cbtitle > text {
    font-weight: bold !important;
}

.axisTitle {
    width: 8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.axisExtent {
    display: none;
}

#filterBarPattern > rect {
    stroke: black;
    fill: black !important;
    stroke-width: 3;
}

.axis > .domain {
    stroke-opacity: .6;
    stroke-width: 2px;
}

.tick text {
    fill: black !important;
}


.discrete-legend {
    cursor: default !important;
    position: fixed;
    top: 20em;
    right: 1em;
    width: 7em;
    font-size: 8pt;
}
.discrete-legend > .title {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-weight: bold;
}
.discrete-legend > div {
    margin-top: .6em;
}
.discrete-legend > div > span {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    position: relative;
    top: 3px;
}

orangecontrib/prototypes/widgets/icons/ParallelCoordinates.svg

@@ -0,0 +1,61 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<rect x="41" y="5" fill="#B2B2B2" width="2" height="38"/>
<rect x="17" y="5" fill="#B2B2B2" width="2" height="38"/>
<rect x="29" y="5" fill="#B2B2B2" width="2" height="38"/>
<polygon fill="none" points="13.732,19.821 12.823,18.534 12.435,19.248 13.311,20.489 "/>
<polygon fill="none" points="18.068,12.955 21.16,19.655 21.775,18.784 17.931,9.172 13.357,17.556 14.311,18.906 "/>
<polygon fill="none" points="29.72,11.54 35.064,10.649 30.178,8.616 22.905,18.918 23.351,20.032 "/>
<polygon fill="none" points="22.103,21.696 22.649,20.968 22.219,19.891 21.645,20.704 "/>
<polygon fill="none" points="25.282,27.551 24.993,27.96 25.067,28.12 25.35,27.721 "/>
<polygon fill="none" points="7.884,27.591 7.677,27.97 8.233,28.526 8.461,28.168 "/>
<polygon fill="none" points="25.552,29.169 28.387,35.312 25.793,28.827 "/>
<polygon fill="none" points="18.066,37.773 9.186,28.893 8.958,29.251 17.934,38.227 24.402,29.063 24.328,28.903 "/>
<polygon fill="none" points="17.987,28.85 13.356,22.289 9.732,28.025 17.934,36.227 23.844,27.854 21.897,23.637 "/>
<polygon fill="none" points="20.495,20.599 17.932,15.045 14.935,19.79 18,24.133 "/>
<polygon fill="none" points="21.421,22.605 20.979,21.647 18,25.867 14.356,20.706 13.935,21.373 18.013,27.15 "/>
<polygon fill="none" points="22.579,22.728 24.51,26.911 24.84,26.443 23.084,22.055 "/>
<polygon fill="none" points="12.732,21.404 11.9,20.227 8.383,26.676 9.008,27.301 "/>
<polygon fill="#666666" points="21.645,20.704 22.219,19.891 21.775,18.784 21.16,19.655 "/>
<polygon fill="#666666" points="14.311,18.906 13.357,17.556 12.823,18.534 13.732,19.821 "/>
<polygon fill="#666666" points="20.979,21.647 20.495,20.599 18,24.133 14.935,19.79 14.356,20.706 18,25.867 "/>
<polygon fill="#666666" points="13.311,20.489 12.435,19.248 11.9,20.227 12.732,21.404 "/>
<polygon fill="#666666" points="21.897,23.637 21.421,22.605 18.013,27.15 13.935,21.373 13.356,22.289 17.987,28.85 "/>
<polygon fill="#666666" points="23.084,22.055 22.649,20.968 22.103,21.696 22.579,22.728 "/>
<polygon fill="#666666" points="43,10.34 43,9.327 41,9.66 36.923,10.339 29.822,7.384 22.463,17.811 22.905,18.918 30.178,8.616 
	35.064,10.649 29.72,11.54 23.351,20.032 23.786,21.119 30.28,12.46 36.804,11.373 41,13.119 43,13.952 43,12.869 41,12.036 
	38.662,11.063 41,10.674 "/>
<polygon fill="#989898" points="7.677,27.97 7.178,28.885 7.687,29.394 8.233,28.526 "/>
<polygon fill="#989898" points="25.35,27.721 25.067,28.12 25.552,29.169 25.793,28.827 "/>
<polygon fill="#989898" points="17.934,38.227 8.958,29.251 8.411,30.118 18.066,39.773 24.886,30.112 24.402,29.063 "/>
<polygon fill="#989898" points="24.51,26.911 24.993,27.96 25.282,27.551 24.84,26.443 "/>
<polygon fill="#989898" points="17.934,36.227 9.732,28.025 9.186,28.893 18.066,37.773 24.328,28.903 23.844,27.854 "/>
<polygon fill="#989898" points="9.008,27.301 8.383,26.676 7.884,27.591 8.461,28.168 "/>
<g>
	<polygon fill="#989898" points="29.806,21.408 26.037,26.747 26.479,27.854 30.194,22.592 41,26.139 43,26.796 43,25.742 
		41,25.086 	"/>
	<polygon fill="#989898" points="41,23.129 29.806,19.408 25.526,25.471 25.969,26.578 30.194,20.592 41,24.183 43,24.848 
		43,23.794 	"/>
</g>
<polygon fill="none" points="12.181,17.624 7,10.284 7,11.55 11.791,18.337 "/>
<polygon fill="none" points="11.258,19.316 7,13.284 7,25.293 7.646,25.938 "/>
<polygon fill="none" points="7,26.707 7,27.121 7.146,26.854 "/>
<polygon fill="none" points="29.698,38.591 29.879,38.545 28.387,35.312 "/>
<polygon fill="#666666" points="12.181,17.624 12.715,16.645 7,8.55 7,10.284 "/>
<polygon fill="#666666" points="11.791,18.337 7,11.55 7,13.284 11.258,19.316 "/>
<polygon fill="#989898" points="7.646,25.938 7,25.293 7,26.707 7.146,26.854 "/>
<polygon fill="#333333" points="43,35.222 43,34.189 41,34.697 30.302,37.409 26.479,27.854 26.037,26.747 25.969,26.578 
	25.526,25.471 23.786,21.119 23.351,20.032 22.905,18.918 22.463,17.811 18.069,6.828 12.715,16.645 12.181,17.624 11.791,18.337 
	11.258,19.316 7.646,25.938 7.146,26.854 7,27.121 7,29.211 7.178,28.885 7.677,27.97 7.884,27.591 8.383,26.676 11.9,20.227 
	12.435,19.248 12.823,18.534 13.357,17.556 17.931,9.172 21.775,18.784 22.219,19.891 22.649,20.968 23.084,22.055 24.84,26.443 
	25.282,27.551 25.35,27.721 25.793,28.827 28.387,35.312 25.552,29.169 25.067,28.12 24.993,27.96 24.51,26.911 22.579,22.728 
	22.103,21.696 21.645,20.704 21.16,19.655 18.068,12.955 14.311,18.906 13.732,19.821 13.311,20.489 12.732,21.404 9.008,27.301 
	8.461,28.168 8.233,28.526 7.687,29.394 7,30.48 7,32.353 8.411,30.118 8.958,29.251 9.186,28.893 9.732,28.025 13.356,22.289 
	13.935,21.373 14.356,20.706 14.935,19.79 17.932,15.045 20.495,20.599 20.979,21.647 21.421,22.605 21.897,23.637 23.844,27.854 
	24.328,28.903 24.402,29.063 24.886,30.112 29.706,40.556 41,38.651 43,38.314 43,37.301 41,37.639 30.294,39.444 29.879,38.545 
	41,35.729 "/>
<rect x="5" y="5" fill="#B2B2B2" width="2" height="38"/>
</svg>