histomicsui 1.5.1.dev49__tar.gz → 1.5.1.dev53__tar.gz

{histomicsui-1.5.1.dev49 → histomicsui-1.5.1.dev53}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: histomicsui
-Version: 1.5.1.dev49
+Version: 1.5.1.dev53
 Summary: Organize, visualize, and analyze histology images.
 Home-page: https://github.com/DigitalSlideArchive/histomicsui
 Author: Kitware, Inc.

{histomicsui-1.5.1.dev49 → histomicsui-1.5.1.dev53}/histomicsui/web_client/package.json

@@ -38,7 +38,7 @@
         "bootstrap-submenu": "^2.0.4",
         "copy-webpack-plugin": "^4.5.2",
         "petite-vue": "^0.4.1",
-        "plotly.js": "^1.58.5",
+        "plotly.js": "^2.34.0",
         "sinon": "^2.1.0",
         "tinycolor2": "~1.4.1",
         "url-search-params-polyfill": "^8.1.1",

{histomicsui-1.5.1.dev49 → histomicsui-1.5.1.dev53}/histomicsui/web_client/panels/MetadataPlot.js

@@ -65,6 +65,7 @@ var MetadataPlot = Panel.extend({
             });
             if (!this._listeningForAnnotations) {
                 this.listenTo(this.parentView.annotationSelector.collection, 'sync remove update reset change:displayed h:refreshed', this._refetchPlottable);
+                this.listenTo(this.parentView, 'h:selectedElementsByRegion', this.onElementSelect);
                 this._listeningForAnnotations = true;
             }
         }
@@ -155,6 +156,12 @@ var MetadataPlot = Panel.extend({
             }
         });
         keys = keys.concat(['_0_item.name', '_2_item.id', '_bbox.x0', '_bbox.y0', '_bbox.x1', '_bbox.y1']);
+        if (this._currentAnnotations && this._currentAnnotations.length > 1) {
+            keys = keys.concat(['_1_annotation.name']);
+        }
+        if (this._currentAnnotations && this._currentAnnotations.length >= 1) {
+            keys = keys.concat(['_3_annotation.id', '_5_annotationelement.id']);
+        }
         this.plottableDataPromise = restRequest({
             url: `annotation/item/${this.item.id}/plot/data`,
             method: 'POST',
@@ -186,7 +193,8 @@ var MetadataPlot = Panel.extend({
             data: this.plottableData.data,
             colDict: {},
             series: {},
-            format: plotConfig.format || 'scatter'
+            format: plotConfig.format || 'scatter',
+            adjacentItems: !!plotConfig.folder
         };
         plotData.columns.forEach((col) => {
             plotData.colDict[col.key] = col;
@@ -198,12 +206,170 @@ var MetadataPlot = Panel.extend({
     },
 
     onHover: function (evt) {
-        // this is a stub for wrapping.
+        if (!evt || !evt.points || evt.points.length < 1 || evt.points[0].pointIndex === undefined || !$('svg g.hoverlayer').length) {
+            return;
+        }
+        const idx = evt.points[0].pointIndex;
+        const image = this.lastPlotData.data[idx].image;
+        const maxw = 100, maxh = 100;
+        const imgw = Math.min(Math.ceil(image.right - image.left) * 2, maxw);
+        const imgh = Math.min(Math.ceil(image.bottom - image.top) * 2, maxh);
+        const regionUrl = `api/v1/item/${image.id}/tiles/region?width=${imgw}&height=${imgh}&left=${image.left}&top=${image.top}&right=${image.right}&bottom=${image.bottom}`;
+        let x = parseFloat($('svg g.hoverlayer g.hovertext text[x]').attr('x'));
+        let y = parseFloat($('svg g.hoverlayer g.hovertext text[y]').attr('y'));
+        x = x === 0 ? -maxw / 2 + (maxw - imgw) / 2 : x < 0 ? x - maxw + (maxw - imgw) : x;
+        const d = $('svg g.hoverlayer g.hovertext path[d]').attr('d');
+        if (d && (d.split('L6,').length >= 2 || d.split('L-6,').length >= 2)) {
+            const y2 = parseFloat(d.split('v')[2]);
+            y += Math.abs(y2) - maxh - 13 + (maxh - imgh) / 2;
+        } else if (d && d.split('v').length === 2) {
+            const y2 = parseFloat(d.split('v')[1]);
+            y += Math.abs(y2) - maxh - 13 + (maxh - imgh) / 2;
+        } else {
+            y = -3;
+        }
+        $('svg g.hoverlayer g.hovertext image.hoverthumbnail').remove();
+        $('svg g.hoverlayer g.hovertext').html($('svg g.hoverlayer g.hovertext').html() + `<image class="hoverthumbnail" href="${regionUrl}" x="${x}px" y="${y}px" width="${imgw}px" height="${imgh}px"/>`);
     },
 
     adjustHoverText: function (d, parts, plotData) {
     },
 
+    onSelect: function (evt, plotData) {
+        if (this._elementSelect) {
+            this._elementSelect -= 1;
+            if (this._afterSelect && !this._elementSelect) {
+                this._afterSelect();
+                this._afterSelect = null;
+            }
+            return;
+        }
+        if (plotData.colDict['_3_annotation.id'] === undefined || plotData.colDict['_5_annotationelement.id'] === undefined) {
+            return;
+        }
+        // evt is undefined when the selection is cleared
+        if (evt === undefined) {
+            this.parentView._resetSelection();
+            return;
+        }
+        // evt.points is an array with data, fullData, pointNumber, and pointIndex
+        const annots = {};
+        const elements = [];
+        evt.points.forEach((pt) => {
+            const row = plotData.data[pt.pointIndex];
+            const annotid = row[plotData.colDict['_3_annotation.id'].index];
+            const elid = row[plotData.colDict['_5_annotationelement.id'].index];
+            if (annotid === undefined || elid === undefined) {
+                return;
+            }
+            if (annots[annotid] === undefined) {
+                annots[annotid] = this.parentView.annotationSelector.collection.get(annotid) || null;
+            }
+            if (annots[annotid] === null || !annots[annotid]._elements || !annots[annotid]._elements._byId || !annots[annotid]._elements._byId[elid]) {
+                return;
+            }
+            elements.push(annots[annotid]._elements._byId[elid]);
+        });
+        if (!elements.length) {
+            return;
+        }
+        this.parentView._resetSelection();
+        elements.forEach((element, idx) => {
+            this.parentView._selectElement(element, {silent: idx !== elements.length - 1});
+        });
+    },
+
+    onElementSelect: function (elements) {
+        if (!this.lastPlotData || !this.lastPlotData.colDict['_5_annotationelement.id'] || !elements.models) {
+            return;
+        }
+        const ids = {};
+        elements.models.forEach((el) => {
+            ids[el.id] = true;
+        });
+        const colidx = this.lastPlotData.colDict['_5_annotationelement.id'].index;
+        const points = this.lastPlotData.data.map((row, idx) => ids[row[colidx]] ? idx : null).filter((idx) => idx !== null);
+        if (!points.length) {
+            return;
+        }
+        /* Deselect any selection on plotly.  There is no exposed function to
+         * do this, so we synthesize several actions: (a) switch to box select
+         * mode, (b) double click on the plot, (c) ignore the first selection
+         * event (first click), (d) on the second selection event, the plot no
+         * longer has a selection, so we can specify the selected points (in
+         * the _afterSelect callback), (e) switch back to whatever tool the
+         * user had selected on the plot. */
+        this._elementSelect = 2;
+        const curactive = this._plotlyNode.find('.modebar-btn.active');
+        this._afterSelect = () => {
+            window.Plotly.restyle(this._plotlyNode[0], {selectedpoints: [points]});
+            if (curactive.length) {
+                curactive[0].dispatchEvent(new MouseEvent('click'));
+            }
+        };
+        const plot = this._plotlyNode.find('.drag').first()[0];
+        for (let i = 0; i <= 2; i += 1) {
+            this._plotlyNode.find('.modebar-btn[data-val="select"]')[0].dispatchEvent(new MouseEvent('click'));
+            plot.dispatchEvent(new MouseEvent('mousedown', {bubbles: true, cancelable: true, view: window, clientX: 10, clientY: 10}));
+            plot.dispatchEvent(new MouseEvent('mouseup', {bubbles: true, cancelable: true, view: window, clientX: 10, clientY: 10}));
+        }
+    },
+
+    _formatNumber: function (val, significant) {
+        if (isNaN(parseFloat(val))) {
+            return val;
+        }
+        if (!significant || significant < 1) {
+            significant = 3;
+        }
+        const digits = Math.min(significant, Math.max(0, significant - Math.floor(Math.log10(Math.abs(val)))));
+        return val.toFixed(digits);
+    },
+
+    _hoverText: function (d, plotData) {
+        const used = {};
+        let parts = [];
+        let key = '_0_item.name';
+        if (plotData.adjacentItems && plotData.colDict[key] && d[plotData.colDict[key].index] !== undefined && plotData.colDict[key].distinctcount !== 1) {
+            used[key] = true;
+            parts.push(plotData.colDict[key]);
+        }
+        key = '_1_annotation.name';
+        if (plotData.colDict[key] && d[plotData.colDict[key].index] !== undefined) {
+            used[key] = true;
+            parts.push(plotData.colDict[key]);
+        }
+        ['x', 'y', 'r', 'c', 's'].forEach((series) => {
+            if (plotData.series[series] && d[plotData.series[series].index] !== undefined && used[plotData.series[series].key] === undefined) {
+                used[plotData.series[series].key] = true;
+                parts.push(plotData.series[series]);
+            }
+        });
+        parts = parts.map((col) => `${col.title}: ${col.type === 'number' ? this._formatNumber(d[col.index]) : d[col.index]}`);
+
+        const imageDict = {
+            id: '_2_item.id',
+            left: '_bbox.x0',
+            top: '_bbox.y0',
+            right: '_bbox.x1',
+            bottom: '_bbox.y1'
+        };
+        if (Object.values(imageDict).every((v) => plotData.colDict[v] && d[plotData.colDict[v].index] !== undefined)) {
+            d.image = {};
+            Object.entries(imageDict).forEach(([k, v]) => {
+                d.image[k] = d[plotData.colDict[v].index];
+            });
+            /* Plotly adds hovertext rows in its own way, so add several rows
+             * that are blank and of some width that we can dynamically
+             * replace. */
+            for (let i = 0; i < 8; i += 1) {
+                parts.push('<span class="hui-plotly-hover-thumbnail">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>');
+            }
+        }
+        this.adjustHoverText(d, parts, plotData);
+        return '<span class="hui-plotly-hover">' + parts.join('<br>') + '</span>';
+    },
+
     plotDataToPlotly: function (plotData) {
         const colorBrewerPaired12 = ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'];
         const viridis = ['#440154', '#482172', '#423d84', '#38578c', '#2d6f8e', '#24858d', '#1e9a89', '#2ab07e', '#51c468', '#86d449', '#c2df22', '#fde724'];
@@ -214,17 +380,11 @@ var MetadataPlot = Panel.extend({
         const plotlyData = {
             x: plotData.data.map((d) => d[plotData.series.x.index]),
             y: plotData.data.map((d) => d[plotData.series.y.index]),
-            hovertext: plotData.data.map((d) => {
-                const parts = [];
-                ['x', 'y', 'r', 'c', 's'].forEach((series) => {
-                    if (plotData.series[series] && d[plotData.series[series].index] !== undefined) {
-                        parts.push(`${plotData.series[series].title}: ${d[plotData.series[series].index]}`);
-                    }
-                });
-                this.adjustHoverText(d, parts, plotData);
-                return '<span class="hui-plotly-hover" style="font-size: 9px">' + parts.join('<br>') + '</span>';
-            }),
+            hovertext: plotData.data.map((d) => this._hoverText(d, plotData)),
             hoverinfo: 'text',
+            hoverlabel: {
+                font: {size: 10}
+            },
             marker: {
                 symbol: plotData.series.s && plotData.series.s.distinct ? plotData.data.map((d) => plotData.series.s.distinct.indexOf(d[plotData.series.s.index])) : 0,
                 size: plotData.series.r && (plotData.series.r.type === 'number' || plotData.series.r.distinctcount)
@@ -312,8 +472,10 @@ var MetadataPlot = Panel.extend({
                     plotOptions.xaxis = {title: {text: plotData.format !== 'violin' ? `${plotData.series.x.title}` : `${plotData.series.s.title}`}};
                     plotOptions.yaxis = {title: {text: `${plotData.series.y.title}`}};
                 }
+                this._plotlyNode = elem;
                 window.Plotly.newPlot(elem[0], this.plotDataToPlotly(plotData), plotOptions);
                 elem[0].on('plotly_hover', (evt) => this.onHover(evt));
+                elem[0].on('plotly_selected', (evt) => this.onSelect(evt, plotData));
             });
         }
         return this;

{histomicsui-1.5.1.dev49 → histomicsui-1.5.1.dev53}/histomicsui/web_client/templates/dialogs/metadataPlot.pug

@@ -22,7 +22,7 @@
             {key: 'r', label: 'Radius'},
             {key: 'c', label: 'Color'},
             {key: 's', label: 'Symbol', string: true, comment: 'Grouping for violin plots'}]
-        for series in seriesList
+        for series, seriesidx in seriesList
           .form-group
             label(for='h-plot-series-' + series.key) #{series.label}
             if series.comment
@@ -30,9 +30,10 @@
             select.form-control(id='h-plot-series-' + series.key)
               if !series.number
                 option(value='_none_', selected=plotConfig[series.key] === undefined) None
-              each opt in plotOptions
+              each opt, optidx in plotOptions
                 if (!series.number || opt.type === 'number') && (!series.string || opt.type === 'string' || opt.distinct)
                   - var selected = plotConfig[series.key] === opt.key
+                  - if (plotConfig[series.key] === undefined && series.number === true && optidx === seriesidx) { selected = true; }
                   option(value=opt.key, selected=selected) #{opt.title}
         .form-group
           label(for='h-plot-folder')

{histomicsui-1.5.1.dev49 → histomicsui-1.5.1.dev53}/histomicsui/web_client/templates/panels/metadataPlot.pug

@@ -10,4 +10,4 @@ block controls
       i.icon-resize-full(title="Maximize")
 
 block content
-  .h-metadata-plot-area
+  #h-metadata-plot.h-metadata-plot-area

{histomicsui-1.5.1.dev49 → histomicsui-1.5.1.dev53}/histomicsui/web_client/webpack.helper.js

@@ -12,7 +12,9 @@ module.exports = function (config) {
             to: config.output.path,
             toType: 'dir'
         }, {
-            from: require.resolve('plotly.js/dist/plotly.min.js'),
+            // the minified version fails in our test environment because
+            // plotly.min.js uses some modern javascript (plotly.js doesn't)
+            from: require.resolve(process.env.TOX_ENV_NAME ? 'plotly.js/dist/plotly.js' : 'plotly.js/dist/plotly.min.js'),
             to: path.join(config.output.path, 'extra', 'plotly.js'),
             toType: 'file'
         }, {

{histomicsui-1.5.1.dev49 → histomicsui-1.5.1.dev53}/histomicsui.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: histomicsui
-Version: 1.5.1.dev49
+Version: 1.5.1.dev53
 Summary: Organize, visualize, and analyze histology images.
 Home-page: https://github.com/DigitalSlideArchive/histomicsui
 Author: Kitware, Inc.