histomicsui 1.6.1.dev52__tar.gz → 1.6.1.dev56__tar.gz

{histomicsui-1.6.1.dev52 → histomicsui-1.6.1.dev56}/.pre-commit-config.yaml

@@ -53,17 +53,17 @@ repos:
   rev: v0.0.18
   hooks:
   - id: circleci-config-validate
-- repo: https://github.com/ThisIsManta/stylus-supremacy
-  rev: v4.0.0
-  hooks:
-    - id: stylus-supremacy
-      language_version: "22.10.0"
-      args:
-        - '--options'
-        - './histomicsui/web_client/package.json'
+# - repo: https://github.com/ThisIsManta/stylus-supremacy
+#   rev: v4.0.0
+#   hooks:
+#     - id: stylus-supremacy
+#       language_version: "22.12.0"
+#       args:
+#         - '--options'
+#         - './histomicsui/web_client/package.json'
 - repo: https://github.com/astral-sh/ruff-pre-commit
   # Ruff version.
-  rev: v0.7.0
+  rev: v0.8.3
   hooks:
     - id: ruff
       args: [--fix, --exit-non-zero-on-fix]

{histomicsui-1.6.1.dev52 → histomicsui-1.6.1.dev56}/PKG-INFO

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

{histomicsui-1.6.1.dev52 → histomicsui-1.6.1.dev56}/histomicsui/web_client/dialogs/metadataPlot.js

@@ -1,4 +1,6 @@
 import $ from 'jquery';
+import 'select2';
+import 'select2/dist/css/select2.css';
 
 import View from '@girder/core/views/View';
 
@@ -23,6 +25,13 @@ const MetadataPlotDialog = View.extend({
                 plotOptions: this.plotOptions
             })
         ).girderModal(this);
+        // this adds search functionality to the select boxes, but not to the
+        // multiple select, since the select2 tool breaks some traditional
+        // aspects of multiple select
+        this.$('.h-plot-select').not('[multiple]').select2({
+            dropdownParent: $('.modal-body'),
+            width: '100%'
+        });
 
         return this;
     },

{histomicsui-1.6.1.dev52 → histomicsui-1.6.1.dev56}/histomicsui/web_client/package.json

@@ -39,6 +39,7 @@
         "copy-webpack-plugin": "^4.5.2",
         "petite-vue": "^0.4.1",
         "plotly.js": "2.34.0",
+        "select2": "4.1.0-rc.0",
         "sinon": "^2.1.0",
         "tinycolor2": "~1.4.1",
         "url-search-params-polyfill": "^8.1.1",

{histomicsui-1.6.1.dev52 → histomicsui-1.6.1.dev56}/histomicsui/web_client/panels/MetadataPlot.js

@@ -15,6 +15,21 @@ import '../stylesheets/panels/metadataPlot.styl';
 
 const sessionId = uuidv4();
 
+function mean(arr) {
+    if (!arr.length) {
+        return 0;
+    }
+    return arr.reduce((a, b) => a + b) / arr.length;
+}
+
+function stddev(arr) {
+    if (arr.length <= 1) {
+        return 0;
+    }
+    const m = mean(arr);
+    return Math.sqrt(arr.map((x) => Math.pow(x - m, 2)).reduce((a, b) => a + b) / arr.length);
+}
+
 var MetadataPlot = Panel.extend({
     events: _.extend(Panel.prototype.events, {
         'click .g-widget-metadata-plot-settings': function (event) {
@@ -457,7 +472,7 @@ var MetadataPlot = Panel.extend({
             colorScale = window.d3.scale.linear().domain(viridis.map((_, i) => i / (viridis.length - 1) * ((plotData.series.c.max - plotData.series.c.min) || 0) + plotData.series.c.min)).range(viridis);
         }
         const plotlyData = {
-            x: plotData.data.map((d) => d[plotData.series.x.index]),
+            x: plotData.series.x ? plotData.data.map((d) => d[plotData.series.x.index]) : 0,
             y: plotData.data.map((d) => d[plotData.series.y.index]),
             hovertext: plotData.data.map((d) => this._hoverText(d, plotData)),
             hoverinfo: 'text',
@@ -518,6 +533,86 @@ var MetadataPlot = Panel.extend({
                 }];
             }
         }
+        if (plotData.format === 'distrib') {
+            const maxs = plotData.series.s && plotData.series.s.distinct ? plotData.series.s.distinctcount : 1;
+            const pv = {
+                x: [],
+                y: [],
+                c: [],
+                r: [],
+                xe: [],
+                ye: [],
+                dd: Array(maxs),
+                xd: Array.from(Array(maxs), () => []),
+                yd: Array.from(Array(maxs), () => []),
+                cd: Array.from(Array(maxs), () => []),
+                rd: Array.from(Array(maxs), () => [])
+            };
+            plotData.data.forEach((d) => {
+                const s = plotData.series.s && plotData.series.s.distinct ? plotData.series.s.distinct.indexOf(d[plotData.series.s.index]) : 0;
+                if (pv.dd[s] === undefined) {
+                    pv.dd[s] = d;
+                }
+                if (plotData.series.x) {
+                    pv.xd[s].push(d[plotData.series.x.index]);
+                }
+                pv.yd[s].push(d[plotData.series.y.index]);
+                if (plotData.series.c) {
+                    pv.cd[s].push(d[plotData.series.c.index]);
+                }
+                if (plotData.series.r) {
+                    pv.rd[s].push(d[plotData.series.r.index]);
+                }
+            });
+            for (let s = 0; s < maxs; s += 1) {
+                pv.x[s] = mean(pv.xd[s]);
+                pv.xe[s] = stddev(pv.xd[s]);
+                pv.y[s] = mean(pv.yd[s]);
+                pv.ye[s] = stddev(pv.yd[s]);
+                pv.r[s] = plotData.series.r && plotData.series.r !== 'number' && pv.rd[s].length ? pv.rd[s][0] : mean(pv.rd[s]);
+                pv.c[s] = plotData.series.c && plotData.series.c !== 'number' && pv.cd[s].length ? pv.cd[s][0] : mean(pv.cd[s]);
+            }
+            plotlyData.x = [...Array(maxs).keys()];
+            if (plotData.series.x) {
+                plotlyData.error_x = {
+                    type: 'data',
+                    array: pv.xe.map((v) => v / Math.max.apply(Math, pv.xe)),
+                    color: '#0000C0',
+                    // width: 0,
+                    visible: true
+                };
+            }
+            plotlyData.y = pv.y;
+            plotlyData.mode = 'lines+markers';
+            plotlyData.error_y = {
+                type: 'data',
+                array: pv.ye,
+                color: '#C00000',
+                // width: 0,
+                visible: true
+            };
+            plotlyData.hovertext = pv.dd.map((d) => this._hoverText(d, plotData));
+            plotlyData.marker.symbol = 0;
+            if (plotData.series.r) {
+                plotlyData.marker.size = plotData.series.r && (plotData.series.r.type === 'number' || plotData.series.r.distinctcount)
+                    ? (
+                        plotData.series.r.type === 'number'
+                            ? pv.r.map((r) => (r - plotData.series.r.min) / (plotData.series.r.max - plotData.series.r.min) * 10 + 5)
+                            : pv.dd.map((d) => plotData.series.r.distinct.indexOf(d[plotData.series.r.index]) / plotData.series.r.distinctcount * 10 + 5)
+                    )
+                    : 10;
+            }
+            if (plotData.series.c) {
+                plotlyData.marker.color = plotData.series.c
+                    ? (
+                        !plotData.series.c.distinctcount
+                            ? pv.c.map((c) => colorScale(c))
+                            : pv.dd.map((d) => colorBrewerPaired12[plotData.series.c.distinct.indexOf(d[plotData.series.c.index])] || '#000000')
+                    )
+                    : '#000000';
+            }
+            plotlyData.type = 'scatter';
+        }
         return [plotlyData];
     },
 
@@ -548,7 +643,7 @@ var MetadataPlot = Panel.extend({
                 this.lastPlotData = plotData;
                 this.$el.html(metadataPlotTemplate({}));
                 const elem = this.$el.find('.h-metadata-plot-area');
-                if (!plotData || (plotData.format !== 'violin' && !plotData.series.x) || !plotData.series.y || plotData.data.length < 2) {
+                if (!plotData || (plotData.format !== 'violin' && plotData.format !== 'distrib' && !plotData.series.x) || !plotData.series.y || plotData.data.length < 2) {
                     elem.html('');
                     return;
                 }
@@ -560,7 +655,7 @@ var MetadataPlot = Panel.extend({
                 if (maximized) {
                     plotOptions.margin.l += 20;
                     plotOptions.margin.b += 40;
-                    plotOptions.xaxis = {title: {text: plotData.format !== 'violin' ? `${plotData.series.x.title}` : `${plotData.series.s ? plotData.series.s.title : ''}`}};
+                    plotOptions.xaxis = {title: {text: plotData.format !== 'violin' && plotData.format !== 'distrib' ? `${plotData.series.x.title}` : `${plotData.series.s ? plotData.series.s.title : ''}`}};
                     plotOptions.yaxis = {title: {text: `${plotData.series.y.title}`}};
                 }
                 this._plotlyNode = elem;

histomicsui-1.6.1.dev56/histomicsui/web_client/stylesheets/dialogs/metadataPlot.styl

@@ -0,0 +1,16 @@
+.modal-body
+  div.h-plot-resizable
+    resize vertical
+    overflow auto
+
+    select
+      height calc(100% - 24px)
+
+  .select2-container
+    display block
+    font-size 14px
+    line-height 1.42857143
+    color #222
+
+  .select2-results__option
+    padding 0 6px

{histomicsui-1.6.1.dev52 → histomicsui-1.6.1.dev56}/histomicsui/web_client/templates/dialogs/metadataPlot.pug

@@ -11,18 +11,19 @@
           -
             var plotFormats = [
               {key: 'scatter', label: 'Scatter'},
-              {key: 'violin', label: 'Violin'}]
+              {key: 'violin', label: 'Violin'},
+              {key: 'distrib', label: 'Distributions'}]
           select#h-plot-format.form-control
             each opt in plotFormats
               option(value=opt.key, selected=plotConfig.format === opt.key) #{opt.label}
         -
           var seriesList = [
             {key: 'x', label: 'x-axis', number: true, comment: 'Not used in violin plots'},
-            {key: 'y', label: 'y-axis', number: true},
+            {key: 'y', label: 'y-axis', number: true, noNone: true},
             {key: 'r', label: 'Radius'},
             {key: 'c', label: 'Color'},
-            {key: 's', label: 'Symbol', string: true, comment: 'Grouping for violin plots'},
-            {key: 'u', label: 'Dimension Reducation', number: true, multiple: true}]
+            {key: 's', label: 'Symbol', string: true, comment: 'Grouping for violin and distribution plots'},
+            {key: 'u', label: 'Dimension Reduction', number: true, multiple: true}]
         -
           var numNumbers = 0;
           var numIndex = [];
@@ -32,13 +33,13 @@
             label(for='h-plot-series-' + series.key) #{series.label}
             if series.comment
               p.g-hui-description #{series.comment}
-            select.form-control(id='h-plot-series-' + series.key, multiple=series.multiple)
-              if !series.number
+            select.h-plot-select.form-control(id='h-plot-series-' + series.key, multiple=series.multiple)
+              if !series.noNone
                 option(value='_none_', selected=plotConfig[series.key] === undefined) None
               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 && numIndex[optidx] === seriesidx) { selected = true; }
+                  - if (plotConfig[series.key] === undefined && series.number === true && numIndex[optidx] === seriesidx && (!plotConfig.format || plotConfig.format === 'scatter')) { selected = true; }
                   - if (series.multiple) { selected = plotConfig[series.key] ? plotConfig[series.key].includes(opt.key) : false; }
                   option(value=opt.key, selected=selected) #{opt.title}#{opt.count > 1 && opt.distinctcount !== 1 ? ' *' : ''}
         .form-group

{histomicsui-1.6.1.dev52 → histomicsui-1.6.1.dev56}/histomicsui.egg-info/PKG-INFO

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

histomicsui-1.6.1.dev52/histomicsui/web_client/stylesheets/dialogs/metadataPlot.styl

@@ -1,7 +0,0 @@
-.modal-body
-  div.h-plot-resizable
-    resize vertical
-    overflow auto
-
-    select
-      height calc(100% - 24px)