Merge pull request #313 from SafetyGraphics/dev-v1.1.1

Dev v1.2.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hep-explorer",
   "description": "Interactive Graphic for Exploring Hepatic Data in Clinical Trials",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "Rho, Inc.",
   "license": "MIT",
   "homepage": "https://github.com/SafetyGraphics/hep-explorer#readme",

src/callbacks/onInit/checkMeasureDetails.js

@@ -21,20 +21,63 @@ export default function checkMeasureDetails() {
             }: ${missingMeasures.join(', ')}.`
         );
 
+    //automatically add Measures if requested
+    if (config.add_measures) {
+        measures.forEach(function(m, i) {
+            if (specifiedMeasures.indexOf(m) == -1) {
+                config.measure_values['m' + i] = m;
+            }
+        });
+    }
+
     //check that x_options, y_options and size_options all have value keys/values in measure_values
-    const valid_options = d3.merge([Object.keys(config.measure_values), ['rRatio']]);
-    const all_options = ['x_options', 'y_options', 'point_size_options'];
-    all_options.forEach(function(options) {
-        config[options].forEach(function(option) {
+    const valid_options = Object.keys(config.measure_values);
+    const all_settings = ['x_options', 'y_options', 'point_size_options'];
+    all_settings.forEach(function(setting) {
+        // remove invalid options
+        config[setting].forEach(function(option) {
             if (valid_options.indexOf(option) == -1) {
                 delete config[options][option];
                 console.warn(
                     option +
                         " wasn't found in the measure_values index and has been removed from config." +
-                        options +
+                        setting +
                         '. This may cause problems with the chart.'
                 );
             }
         });
+
+        // update the control input settings
+        const controlLabel =
+            setting == 'x_options'
+                ? 'X-axis Measure'
+                : setting == 'y_options'
+                ? 'Y-axis Measure'
+                : 'Point Size';
+        var input = chart.controls.config.inputs.find(ci => ci.label == controlLabel);
+
+        if (input) {
+            //only update this if the input settings exist - axis inputs with only one value are deleted
+            // add options for controls requesting 'all' measures
+            if (config[setting + '_all']) {
+                const point_size_options = d3.merge([['Uniform', 'rRatio'], valid_options]);
+                config[setting] =
+                    setting == 'point_size_options' ? point_size_options : valid_options;
+                input.values = config[setting];
+            }
+        }
+    });
+    //check that all measure_values have associated cuts
+    Object.keys(config.measure_values).forEach(function(m) {
+        // does a cut point for the measure exist? If not, create a placeholder.
+        if (!config.cuts.hasOwnProperty(m)) {
+            config.cuts[m] = {};
+        }
+
+        // does the cut have non-null baseline and ULN cuts associated, if not use the default values
+        config.cuts[m].relative_baseline =
+            config.cuts[m].relative_baseline || config.cuts.defaults.relative_baseline;
+        config.cuts[m].relative_uln =
+            config.cuts[m].relative_uln || config.cuts.defaults.relative_uln;
     });
 }

src/callbacks/onLayout.js

@@ -14,6 +14,7 @@ import { initControlLabels } from './onLayout/initControlLabels';
 import { addFootnote } from './onLayout/addFootnote';
 import { addDownloadButton } from './onLayout/addDownloadButton';
 import { initEmptyChartWarning } from './onLayout/initEmptyChartWarning';
+import { relabelMeasureControls } from './onLayout/relabelMeasureControls';
 
 import customizePlotStyleToggle from './onLayout/customizePlotStyleToggle';
 import initStudyDayControl from './onLayout/initStudyDayControl';
@@ -41,4 +42,5 @@ export default function onLayout() {
     initControlLabels.call(this);
     initEmptyChartWarning.call(this);
     initStudyDayControl.call(this);
+    relabelMeasureControls.call(this);
 }

src/callbacks/onLayout/relabelMeasureControls.js

@@ -0,0 +1,15 @@
+export function relabelMeasureControls() {
+    var chart = this;
+    var config = this.config;
+    const all_settings = ['x_options', 'y_options', 'point_size_options'];
+    const controlLabels = ['X-axis Measure', 'Y-axis Measure', 'Point Size'];
+    const controlWraps = chart.controls.wrap
+        .selectAll('div')
+        .filter(controlInput => controlLabels.indexOf(controlInput.label) > -1);
+    const controls = controlWraps.select('select');
+    const options = controls.selectAll('option');
+    var allKeys = Object.keys(config.measure_values);
+    options
+        .text(d => (allKeys.indexOf(d) > -1 ? config.measure_values[d] : d))
+        .property('value', d => d);
+}

src/configuration/controlInputs.js

@@ -79,7 +79,7 @@ export default function controlInputs() {
             description: 'Parameter to set point radius',
             options: ['point_size'],
             start: null, // set in syncControlInputs()
-            values: ['Uniform'],
+            values: ['Uniform', 'rRatio'],
             require: true
         },
         {

src/configuration/settings.js

@@ -37,19 +37,14 @@ export default function settings() {
             TB: 'Total Bilirubin',
             ALP: 'Alkaline phosphatase (ALP)'
         },
-        x_options: ['ALT', 'AST', 'ALP'],
+        add_measures: false,
+        x_options: 'all',
+        x_default: 'ALT',
         y_options: ['TB'],
-        point_size: 'Uniform',
-        point_size_options: ['ALT', 'AST', 'ALP', 'TB', 'rRatio'],
+        y_default: 'TB',
+        point_size_options: 'all',
+        point_size_default: 'Uniform',
         cuts: {
-            ALT: {
-                relative_baseline: 3.8,
-                relative_uln: 3
-            },
-            AST: {
-                relative_baseline: 3.8,
-                relative_uln: 3
-            },
             TB: {
                 relative_baseline: 4.8,
                 relative_uln: 2
@@ -58,9 +53,10 @@ export default function settings() {
                 relative_baseline: 3.8,
                 relative_uln: 1
             },
-            xMeasure: null, //set in syncSettings
-            yMeasure: null, //set in syncSettings
-            display: null //set in syncSettings
+            defaults: {
+                relative_baseline: 3.8,
+                relative_uln: 3
+            }
         },
         imputation_methods: {
             ALT: 'data-driven',

src/configuration/syncControlInputs.js

@@ -33,8 +33,8 @@ export default function syncControlInputs(controlInputs, settings) {
             controlInput => controlInput.option === 'x.column'
         );
 
-        xAxisMeasureControl.description = settings.x_options.join(', ');
-        xAxisMeasureControl.start = settings.x_options[0];
+        //xAxisMeasureControl.description = settings.x_options.join(', ');
+        xAxisMeasureControl.start = settings.x.column;
         xAxisMeasureControl.values = settings.x_options;
     }
 
@@ -60,8 +60,8 @@ export default function syncControlInputs(controlInputs, settings) {
         const yAxisMeasureControl = controlInputs.find(
             controlInput => controlInput.option === 'y.column'
         );
-        yAxisMeasureControl.description = settings.y_options.join(', ');
-        yAxisMeasureControl.start = settings.y_options[0];
+        //  yAxisMeasureControl.description = settings.y_options.join(', ');
+        yAxisMeasureControl.start = settings.y.column;
         yAxisMeasureControl.values = settings.y_options;
     }
 
@@ -93,7 +93,7 @@ export default function syncControlInputs(controlInputs, settings) {
 
     const pointSizeControl = controlInputs.find(ci => ci.label === 'Point Size');
 
-    pointSizeControl.start = settings.point_size || 'Uniform';
+    pointSizeControl.start = settings.point_size;
 
     settings.point_size_options.forEach(function(d) {
         pointSizeControl.values.push(d);

src/configuration/syncSettings.js

@@ -1,5 +1,8 @@
+import getDefaults from './settings';
+
 //Replicate settings in multiple places in the settings object
 export default function syncSettings(settings) {
+    const defaults = getDefaults();
     settings.marks[0].per[0] = settings.id_col;
 
     //set grouping config
@@ -109,6 +112,21 @@ export default function syncSettings(settings) {
             typeof settings.baseline.values == 'string' ? [settings.baseline.values] : [];
     }
 
+    //merge in default measure_values if user hasn't specified changes
+    Object.keys(defaults.measure_values).forEach(function(val) {
+        if (!settings.measure_values.hasOwnProperty(val))
+            settings.measure_values[val] = defaults.measure_values[val];
+    });
+
+    //check for 'all' in x_, y_ and point_size_options, but keep track if all options are used for later
+    const allMeasures = Object.keys(settings.measure_values);
+    settings.x_options_all = settings.x_options == 'all';
+    if (settings.x_options == 'all') settings.x_options = allMeasures;
+    settings.y_options_all = settings.y_options == 'all';
+    if (settings.y_options == 'all') settings.y_options = allMeasures;
+    settings.point_size_options_all = settings.point_size_options == 'all';
+    if (settings.point_size_options == 'all') settings.point_size_options = allMeasures;
+
     //parse x_ and y_options to array if needed
     if (!(settings.x_options instanceof Array)) {
         settings.x_options = typeof settings.x_options == 'string' ? [settings.x_options] : [];
@@ -118,14 +136,41 @@ export default function syncSettings(settings) {
         settings.y_options = typeof settings.y_options == 'string' ? [settings.y_options] : [];
     }
 
-    // track initial Cutpoint (lets us detect when cutpoint should change)
+    //set starting values for axis and point size settings.
+    settings.point_size =
+        settings.point_size_options.indexOf(settings.point_size_default) > -1
+            ? settings.point_size_default
+            : settings.point_size_default == 'rRatio'
+            ? 'rRatio'
+            : 'Uniform';
+    settings.x.column =
+        settings.x_options.indexOf(settings.x_default) > -1
+            ? settings.x_default
+            : settings.x_options[0];
+    settings.y.column =
+        settings.y_options.indexOf(settings.y_default) > -1
+            ? settings.y_default
+            : settings.y_options[0];
+
+    // track initial Cutpoint  (lets us detect when cutpoint should change)
     settings.cuts.x = settings.x.column;
     settings.cuts.y = settings.y.column;
     settings.cuts.display = settings.display;
 
-    //Attach measure columns to axis settings.
-    settings.x.column = settings.x_options[0];
-    settings.y.column = settings.y_options[0];
+    // Confirm detault cuts are set
+    settings.cuts.defaults = settings.cuts.defaults || defaults.cuts.defaults;
+    settings.cuts.defaults.relative_uln =
+        settings.cuts.defaults.relative_uln || defaults.cuts.defaults.relative_uln;
+    settings.cuts.defaults.relative_baseline =
+        settings.cuts.defaults.relative_baseline || defaults.cuts.defaults.relative_baseline;
+
+    // keep default cuts if user hasn't provided an alternative
+    const cutMeasures = Object.keys(settings.cuts);
+    Object.keys(defaults.cuts).forEach(function(m) {
+        if (cutMeasures.indexOf(m) == -1) {
+            settings.cuts[m] = defaults.cuts[m];
+        }
+    });
 
     return settings;
 }

test-page/example0/index.html

@@ -16,7 +16,7 @@
     <body>
       <div id = 'title'>Hepatic Safety Explorer</div>
       <div id = 'subtitle'>Example 0 - Simulated Data</div>
-      <div id = 'info'>This is a demo page for the interactive Hepatic Explorer created by the ASA-DIA Interactive Safety Graphics working group. Code, details and documentation are available on <a href="https://github.com/SafetyGraphics/hep-explorer">github</a>.</div>
+      <div id = 'info'>This is a demo page for the interactive Hepatic Explorer created by the ASA-DIA Interactive Safety Graphics working group. Code, details and documentation are available on <a href='https://github.com/SafetyGraphics/hep-explorer'>github</a>.</div>
       <div id = 'container'></div>
     </body>
 

test-page/example0/index.js

@@ -10,12 +10,5 @@ d3.csv(
             } // settings
         );
         instance.init(data);
-        console.log(instance)
-
-        //quick test of participantSelected event
-        instance.chart.wrap.on("participantsSelected",function(){
-          console.log("Participant Selected Event:")
-          console.log(d3.event.data)
-        })
     }
 );

test-page/example4/index.html

@@ -0,0 +1,23 @@
+<html>
+    <head>
+        <title>Hepatic Safety Explorer - Example 2</title>
+
+        <meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>
+
+        <script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
+        <script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/RhoInc/Webcharts@1/build/webcharts.min.js'></script>
+        <script type = 'text/javascript' src = '../../hepexplorer.js'></script>
+        <link type = 'text/css' rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/gh/RhoInc/Webcharts@1/css/webcharts.min.css'>
+        <link type = 'text/css' rel = 'stylesheet' href = '../index.css'>
+
+    </head>
+
+    <body>
+      <div id = 'title'>Hepatic Safety Explorer</div>
+      <div id = 'subtitle'>Example 4 - Example with custom measures</div>
+      <div id= 'info'>This is a demo page for the interactive Hepatic Explorer created by the ASA-DIA Interactive Safety Graphics working group. Code, details and documentation are available on <a href="https://github.com/SafetyGraphics/hep-explorer">github</a>.</div>
+      <div id = 'container'></div>
+    </body>
+
+    <script type = 'text/javascript' src = './index.js'></script>
+</html>

test-page/example4/index.js

@@ -0,0 +1,80 @@
+const settings = {
+    max_width: 600,
+    value_col: 'LBORRES',
+    measure_col: 'TESTNAM',
+    visit_col:"VISIT",
+    //  visitn_col: 'VISITNUM',
+    studyday_col: 'STUDYDAY',
+    normal_col_low: 'LBORRESLO',
+    normal_col_high: 'LBORRESHI',
+    id_col: 'SUBJID',
+    group_cols: ['TRTA','SEX'],
+    filters: [
+        {
+            value_col: 'TRTA',
+            label: 'Treatment'
+        },
+        {
+            value_col: 'SEX',
+            label: 'Sex'
+        },
+        {
+            value_col: 'SUBJID',
+            label: 'ID'
+        }
+    ],
+    measure_values:{
+        'ALT':'ALT (SGPT)',
+        'AST':'AST (SGOT)',
+        'TB':'Total Bilirubin',
+        'ALP':"Alkaline Phosphatase",
+        'GGT':"GGT",
+        "LDH":"LDH"
+    },
+    add_measures:true,
+    /*
+    **Code below is required when measure_values is customized prior to v1.1.1**
+    cuts:{
+      ALT: {
+        relative_baseline: 3.8,
+        relative_uln: 3
+      },
+      AST: {
+        relative_baseline: 3.8,
+        relative_uln: 3
+      },
+      TB: {
+        relative_baseline: 4.8,
+        relative_uln: 2
+      },
+      ALP: {
+        relative_baseline: 3.8,
+        relative_uln: 1
+      },
+      GGT: {
+        relative_baseline: 3.8,
+        relative_uln: 3
+            },
+      LDH: {
+        relative_baseline: 3.8,
+        relative_uln: 3
+      }
+    },
+    */
+    baseline:{
+        value_col:"STUDYDAY",
+        values:[1]
+    },
+    analysisFlag:{
+        value_col:"EPOCH",
+        values:["Analysis"]
+    }
+};
+const chart = hepexplorer('#container', settings);
+d3.csv('../example2/allQuads.csv', function(data) {
+    data.forEach(function(d){
+        d.EPOCH = +d.STUDYDAY > 1 ? "Analysis" : "Baseline";
+        d.AgeGroup = +d.AGE < 60 ?  "<60":"60+";
+    })
+    chart.init(data);
+});