From bd966557d5eb0dbf71fc92c0e4a0bea69a637bb4 Mon Sep 17 00:00:00 2001
From: Spencer Childress <samussiah@gmail.com>
Date: Fri, 31 Jan 2020 11:20:19 -0500
Subject: [PATCH 1/3] fix #143

---
 package-lock.json                  | 2 +-
 package.json                       | 2 +-
 safetyOutlierExplorer.js           | 2 +-
 src/configuration/controlInputs.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8937794..3c84333 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "safety-outlier-explorer",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 54d1b23..abf1588 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "safety-outlier-explorer",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "Chart showing participant trajectories of lab measures, vital signs and other related measures in clinical trials.",
   "module": "./src/index.js",
   "main": "./safetyOutlierExplorer.js",
diff --git a/safetyOutlierExplorer.js b/safetyOutlierExplorer.js
index 0d17de1..8116024 100644
--- a/safetyOutlierExplorer.js
+++ b/safetyOutlierExplorer.js
@@ -402,7 +402,7 @@
             },
             {
                 type: 'dropdown',
-                option: 'x.column',
+                options: ['x.column', 'marks.1.per.2'],
                 label: 'X-axis',
                 require: true
             },
diff --git a/src/configuration/controlInputs.js b/src/configuration/controlInputs.js
index 714563c..ada6962 100755
--- a/src/configuration/controlInputs.js
+++ b/src/configuration/controlInputs.js
@@ -8,7 +8,7 @@ export default function controlInputs() {
         },
         {
             type: 'dropdown',
-            option: 'x.column',
+            options: ['x.column', 'marks.1.per.2'],
             label: 'X-axis',
             require: true
         },

From 764b652b040b6becd3016d9f329fb26204ae7b4b Mon Sep 17 00:00:00 2001
From: Spencer Childress <samussiah@gmail.com>
Date: Fri, 31 Jan 2020 11:22:02 -0500
Subject: [PATCH 2/3] explicitly import d3.select in addOverlapTitle

---
 safetyOutlierExplorer.js                                       | 2 +-
 .../onResize/addEventListeners/functions/addOverlapTitle.js    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/safetyOutlierExplorer.js b/safetyOutlierExplorer.js
index 8116024..194f52a 100644
--- a/safetyOutlierExplorer.js
+++ b/safetyOutlierExplorer.js
@@ -2219,7 +2219,7 @@
         // If there are overlapping points, add a note in the details section.
 
         if (overlap.length > 0) {
-            var titleEl = d3.select(this).select('title');
+            var titleEl = d3$1.select(this).select('title');
             var currentTitle = titleEl.text();
             var hasOverlapNote = currentTitle.search('overlapping'); //minor hack ...
             if (hasOverlapNote == -1) {
diff --git a/src/callbacks/onResize/addEventListeners/functions/addOverlapTitle.js b/src/callbacks/onResize/addEventListeners/functions/addOverlapTitle.js
index ae14cdf..d7ee3af 100644
--- a/src/callbacks/onResize/addEventListeners/functions/addOverlapTitle.js
+++ b/src/callbacks/onResize/addEventListeners/functions/addOverlapTitle.js
@@ -1,4 +1,5 @@
 import checkPointOverlap from './checkPointOverlap';
+import { select } from 'd3';
 
 export default function addOverlapTitle(d, chart) {
     // check for overlapping points
@@ -7,7 +8,7 @@ export default function addOverlapTitle(d, chart) {
     // If there are overlapping points, add a note in the details section.
 
     if (overlap.length > 0) {
-        var titleEl = d3.select(this).select('title');
+        var titleEl = select(this).select('title');
         var currentTitle = titleEl.text();
         var hasOverlapNote = currentTitle.search('overlapping'); //minor hack ...
         if (hasOverlapNote == -1) {

From 25c0afa33c11e30fab856e27296c8ae4e9223a3f Mon Sep 17 00:00:00 2001
From: Spencer Childress <samussiah@gmail.com>
Date: Fri, 31 Jan 2020 11:26:34 -0500
Subject: [PATCH 3/3] explicitly import d3.select in checkOverlapTitle

---
 rollup.config.js                              |  10 +-
 safetyOutlierExplorer.js                      | 107 +++++++++---------
 .../functions/checkPointOverlap.js            |  17 ++-
 3 files changed, 62 insertions(+), 72 deletions(-)

diff --git a/rollup.config.js b/rollup.config.js
index 108e76f..b3b0496 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,8 +1,8 @@
 import babel from 'rollup-plugin-babel';
 
-var pkg = require('./package.json');
+const pkg = require('./package.json');
 
-module.exports = {
+export default {
     input: pkg.module,
     output: {
         name: pkg.name
@@ -18,11 +18,7 @@ module.exports = {
 			webcharts: 'webCharts'
 		},
     },
-    external: (function() {
-        var dependencies = pkg.dependencies;
-
-        return Object.keys(dependencies);
-    }()),
+    external: Object.keys(pkg.dependencies),
     plugins: [
         babel({
             exclude: 'node_modules/**',
diff --git a/safetyOutlierExplorer.js b/safetyOutlierExplorer.js
index 194f52a..dd5b134 100644
--- a/safetyOutlierExplorer.js
+++ b/safetyOutlierExplorer.js
@@ -5,7 +5,7 @@
         ? define(['d3', 'webcharts'], factory)
         : ((global = global || self),
           (global.safetyOutlierExplorer = factory(global.d3, global.webCharts)));
-})(this, function(d3$1, webcharts) {
+})(this, function(d3, webcharts) {
     'use strict';
 
     if (typeof Object.assign != 'function') {
@@ -147,13 +147,13 @@
     })();
 
     // https://github.com/wbkd/d3-extended
-    d3$1.selection.prototype.moveToFront = function() {
+    d3.selection.prototype.moveToFront = function() {
         return this.each(function() {
             this.parentNode.appendChild(this);
         });
     };
 
-    d3$1.selection.prototype.moveToBack = function() {
+    d3.selection.prototype.moveToBack = function() {
         return this.each(function() {
             var firstChild = this.parentNode.firstChild;
             if (firstChild) {
@@ -516,7 +516,7 @@
         var _this = this;
 
         this.participantCount = {
-            N: d3$1
+            N: d3
                 .set(
                     this.raw_data.map(function(d) {
                         return d[_this.config.id_col];
@@ -544,7 +544,7 @@
         });
 
         //Nest missing and nonmissing results by participant.
-        var participantsWithMissingResults = d3$1
+        var participantsWithMissingResults = d3
             .nest()
             .key(function(d) {
                 return d[_this.config.id_col];
@@ -553,7 +553,7 @@
                 return d.length;
             })
             .entries(missingResults);
-        var participantsWithNonMissingResults = d3$1
+        var participantsWithNonMissingResults = d3
             .nest()
             .key(function(d) {
                 return d[_this.config.id_col];
@@ -584,7 +584,7 @@
             );
 
         //Count the number of records with missing results.
-        this.removedRecords.missing = d3$1.sum(
+        this.removedRecords.missing = d3.sum(
             participantsWithMissingResults.filter(function(d) {
                 return _this.removedRecords.placeholderRecords.indexOf(d.key) < 0;
             }),
@@ -672,7 +672,7 @@
     function participant() {
         var _this = this;
 
-        this.IDOrder = d3$1
+        this.IDOrder = d3
             .set(
                 this.raw_data.map(function(d) {
                     return d[_this.config.id_col];
@@ -706,7 +706,7 @@
                     _this.raw_data[0].hasOwnProperty(time_settings.order_col)
                 ) {
                     //Define a unique set of visits with visit order concatenated.
-                    visits = d3$1
+                    visits = d3
                         .set(
                             _this.raw_data.map(function(d) {
                                 return (
@@ -722,7 +722,7 @@
                             var aOrder = a.split('|')[0],
                                 bOrder = b.split('|')[0],
                                 diff = +aOrder - +bOrder;
-                            return diff ? diff : d3$1.ascending(a, b);
+                            return diff ? diff : d3.ascending(a, b);
                         })
                         .map(function(visit) {
                             return visit.split('|')[1];
@@ -730,7 +730,7 @@
                 } else {
                     //Otherwise sort a unique set of visits alphanumerically.
                     //Define a unique set of visits.
-                    visits = d3$1
+                    visits = d3
                         .set(
                             _this.raw_data.map(function(d) {
                                 return d[time_settings.value_col];
@@ -762,7 +762,7 @@
     function measure() {
         var _this = this;
 
-        this.measures = d3$1
+        this.measures = d3
             .set(
                 this.initial_data.map(function(d) {
                     return d[_this.config.measure_col];
@@ -770,7 +770,7 @@
             )
             .values()
             .sort();
-        this.soe_measures = d3$1
+        this.soe_measures = d3
             .set(
                 this.initial_data.map(function(d) {
                     return d.soe_measure;
@@ -830,7 +830,7 @@
                         ' ] filter has been removed because the variable does not exist.'
                 );
             } else {
-                var levels = d3$1
+                var levels = d3
                     .set(
                         _this.raw_data.map(function(d) {
                             return d[input.value_col];
@@ -909,7 +909,7 @@
                 return d.label.toLowerCase().replace(' ', '-');
             })
             .each(function(d) {
-                d3$1.select(this).classed(d.type, true);
+                d3.select(this).classed(d.type, true);
             });
 
         //Give y-axis controls a common class name.
@@ -1052,7 +1052,7 @@
         normalRangeInputs.select('input').attr('step', 0.01);
 
         normalRangeMethodControl.on('change', function() {
-            var normal_range_method = d3$1
+            var normal_range_method = d3
                 .select(this)
                 .select('option:checked')
                 .text();
@@ -1197,7 +1197,7 @@
             .sort(function(a, b) {
                 return a - b;
             });
-        this.measure.domain = d3$1.extent(this.measure.results);
+        this.measure.domain = d3.extent(this.measure.results);
         this.measure.range = this.measure.domain[1] - this.measure.domain[0];
         this.measure.log10range = Math.log10(this.measure.range);
         this.raw_data = this.measure.data.filter(function(d) {
@@ -1211,7 +1211,7 @@
         if (!this.config.visits_without_data)
             this.config.x.domain = this.config.x.domain.filter(function(visit) {
                 return (
-                    d3$1
+                    d3
                         .set(
                             _this.raw_data.map(function(d) {
                                 return d[_this.config.time_settings.value_col];
@@ -1343,20 +1343,20 @@
             this.lln = function(d) {
                 return d instanceof Object
                     ? +d[_this.config.normal_col_low]
-                    : d3$1.median(_this.measure.data, function(d) {
+                    : d3.median(_this.measure.data, function(d) {
                           return +d[_this.config.normal_col_low];
                       });
             };
             this.uln = function(d) {
                 return d instanceof Object
                     ? +d[_this.config.normal_col_high]
-                    : d3$1.median(_this.measure.data, function(d) {
+                    : d3.median(_this.measure.data, function(d) {
                           return +d[_this.config.normal_col_high];
                       });
             };
         } else if (this.config.normal_range_method === 'Standard Deviation') {
-            this.mean = d3$1.mean(this.measure.results);
-            this.sd = d3$1.deviation(this.measure.results);
+            this.mean = d3.mean(this.measure.results);
+            this.sd = d3.deviation(this.measure.results);
             this.lln = function() {
                 return _this.mean - _this.config.normal_range_sd * _this.sd;
             };
@@ -1365,13 +1365,10 @@
             };
         } else if (this.config.normal_range_method === 'Quantiles') {
             this.lln = function() {
-                return d3$1.quantile(_this.measure.results, _this.config.normal_range_quantile_low);
+                return d3.quantile(_this.measure.results, _this.config.normal_range_quantile_low);
             };
             this.uln = function() {
-                return d3$1.quantile(
-                    _this.measure.results,
-                    _this.config.normal_range_quantile_high
-                );
+                return d3.quantile(_this.measure.results, _this.config.normal_range_quantile_high);
             };
         } else {
             this.lln = function(d) {
@@ -1422,14 +1419,14 @@
         var _this = this;
 
         //count the number of unique ids in the current chart and calculate the percentage
-        this.participantCount.n = d3$1
+        this.participantCount.n = d3
             .set(
                 this.filtered_data.map(function(d) {
                     return d[_this.config.id_col];
                 })
             )
             .values().length;
-        this.participantCount.percentage = d3$1.format('0.1%')(
+        this.participantCount.percentage = d3.format('0.1%')(
             this.participantCount.n / this.participantCount.N
         );
 
@@ -1568,20 +1565,20 @@
     function clearHovered() {
         this.lines
             .filter(function() {
-                return !d3$1.select(this).classed('selected');
+                return !d3.select(this).classed('selected');
             })
             .select('path')
             .each(function(d) {
-                d3$1.select(this).attr(d.attributes);
+                d3.select(this).attr(d.attributes);
             });
         this.points
             .filter(function() {
-                return !d3$1.select(this).classed('selected');
+                return !d3.select(this).classed('selected');
             })
             .select('circle')
             .each(function(d) {
-                d3$1.select(this).attr(d.attributes);
-                d3$1.select(this).attr('r', d.radius);
+                d3.select(this).attr(d.attributes);
+                d3.select(this).attr('r', d.radius);
             });
         delete this.hovered_id;
     }
@@ -1865,7 +1862,7 @@
             );
 
             //Calculate range of data.
-            var ylo = d3$1.min(
+            var ylo = d3.min(
                 filtered_data
                     .map(function(m) {
                         return +m[_this.config.y.column];
@@ -1874,7 +1871,7 @@
                         return +f || +f === 0;
                     })
             );
-            var yhi = d3$1.max(
+            var yhi = d3.max(
                 filtered_data
                     .map(function(m) {
                         return +m[_this.config.y.column];
@@ -1904,7 +1901,7 @@
     function rangePolygon() {
         var _this = this;
 
-        var area = d3$1.svg
+        var area = d3.svg
             .area()
             .x(function(d) {
                 return (
@@ -1993,7 +1990,7 @@
             .style('width', null)
             .style('max-width', '10%')
             .on('change', function(d) {
-                context.multiples.id = d3$1
+                context.multiples.id = d3
                     .select(this)
                     .selectAll('option:checked')
                     .text();
@@ -2219,7 +2216,7 @@
         // If there are overlapping points, add a note in the details section.
 
         if (overlap.length > 0) {
-            var titleEl = d3$1.select(this).select('title');
+            var titleEl = d3.select(this).select('title');
             var currentTitle = titleEl.text();
             var hasOverlapNote = currentTitle.search('overlapping'); //minor hack ...
             if (hasOverlapNote == -1) {
@@ -2278,18 +2275,18 @@
             .map(function(d) {
                 return +d.values.y;
             })
-            .sort(d3$1.ascending);
+            .sort(d3.ascending);
         var height = this.plot_height;
         var width = 1;
         var domain = this.y_dom;
         var boxPlotWidth = 10;
         var boxColor = '#bbb';
         var boxInsideColor = 'white';
-        var fmt = d3$1.format('.3r');
+        var fmt = d3.format('.3r');
 
         //set up scales
-        var x = d3$1.scale.linear().range([0, width]);
-        var y = d3$1.scale.linear().range([height, 0]);
+        var x = d3.scale.linear().range([0, width]);
+        var y = d3.scale.linear().range([height, 0]);
 
         {
             y.domain(domain);
@@ -2297,7 +2294,7 @@
 
         var probs = [0.05, 0.25, 0.5, 0.75, 0.95];
         for (var i = 0; i < probs.length; i++) {
-            probs[i] = d3$1.quantile(results, probs[i]);
+            probs[i] = d3.quantile(results, probs[i]);
         }
 
         var boxplot = this.svg
@@ -2360,7 +2357,7 @@
             .append('circle')
             .attr('class', 'boxplot mean')
             .attr('cx', x(0.5))
-            .attr('cy', y(d3$1.mean(results)))
+            .attr('cy', y(d3.mean(results)))
             .attr('r', x(boxPlotWidth / 3))
             .style('fill', boxInsideColor)
             .style('stroke', boxColor);
@@ -2369,7 +2366,7 @@
             .append('circle')
             .attr('class', 'boxplot mean')
             .attr('cx', x(0.5))
-            .attr('cy', y(d3$1.mean(results)))
+            .attr('cy', y(d3.mean(results)))
             .attr('r', x(boxPlotWidth / 6))
             .style('fill', boxColor)
             .style('stroke', 'None');
@@ -2380,31 +2377,31 @@
                 d.values.length +
                 '\n' +
                 'Min = ' +
-                d3$1.min(d.values) +
+                d3.min(d.values) +
                 '\n' +
                 '5th % = ' +
-                fmt(d3$1.quantile(d.values, 0.05)).replace(/^ */, '') +
+                fmt(d3.quantile(d.values, 0.05)).replace(/^ */, '') +
                 '\n' +
                 'Q1 = ' +
-                fmt(d3$1.quantile(d.values, 0.25)).replace(/^ */, '') +
+                fmt(d3.quantile(d.values, 0.25)).replace(/^ */, '') +
                 '\n' +
                 'Median = ' +
-                fmt(d3$1.median(d.values)).replace(/^ */, '') +
+                fmt(d3.median(d.values)).replace(/^ */, '') +
                 '\n' +
                 'Q3 = ' +
-                fmt(d3$1.quantile(d.values, 0.75)).replace(/^ */, '') +
+                fmt(d3.quantile(d.values, 0.75)).replace(/^ */, '') +
                 '\n' +
                 '95th % = ' +
-                fmt(d3$1.quantile(d.values, 0.95)).replace(/^ */, '') +
+                fmt(d3.quantile(d.values, 0.95)).replace(/^ */, '') +
                 '\n' +
                 'Max = ' +
-                d3$1.max(d.values) +
+                d3.max(d.values) +
                 '\n' +
                 'Mean = ' +
-                fmt(d3$1.mean(d.values)).replace(/^ */, '') +
+                fmt(d3.mean(d.values)).replace(/^ */, '') +
                 '\n' +
                 'StDev = ' +
-                fmt(d3$1.deviation(d.values)).replace(/^ */, '');
+                fmt(d3.deviation(d.values)).replace(/^ */, '');
             return tooltip;
         });
     }
diff --git a/src/callbacks/onResize/addEventListeners/functions/checkPointOverlap.js b/src/callbacks/onResize/addEventListeners/functions/checkPointOverlap.js
index bf0171f..7da6c80 100644
--- a/src/callbacks/onResize/addEventListeners/functions/checkPointOverlap.js
+++ b/src/callbacks/onResize/addEventListeners/functions/checkPointOverlap.js
@@ -1,15 +1,14 @@
+import { select } from 'd3';
+
 export default function checkPointOverlap(d, chart) {
     // Get the position of the clicked point
-    const click_x = d3
-        .select(this)
+    const click_x = select(this)
         .select('circle')
         .attr('cx');
-    const click_y = d3
-        .select(this)
+    const click_y = select(this)
         .select('circle')
         .attr('cy');
-    const click_r = d3
-        .select(this)
+    const click_r = select(this)
         .select('circle')
         .attr('r');
     const click_id = d.values.raw[0][chart.config.id_col];
@@ -18,12 +17,10 @@ export default function checkPointOverlap(d, chart) {
     var overlap_ids = chart.points
         .filter(function(f) {
             const point_id = f.values.raw[0][chart.config.id_col];
-            const point_x = d3
-                .select(this)
+            const point_x = select(this)
                 .select('circle')
                 .attr('cx');
-            const point_y = d3
-                .select(this)
+            const point_y = select(this)
                 .select('circle')
                 .attr('cy');
             const distance_x2 = Math.pow(click_x - point_x, 2);